23 April

Laatste bijeenkomst.

Vanavond gaan we kijken naar FTP

File Transfer Protocol
Wat is het?
http://nl.wikipedia.org/wiki/Ftp

http://www.worldnet.nl/helpdesk/hosting/website-uploaden.htm

Waarmee?
www.wsftp.com/

8

Yo......nog 3 bijeenkomsten te gaan!!!!

WERKGELUIDEN !

Les 7

......................Hoi,

Vanavond een klein stukje over javascript en hoe gebruik je het.

Javascript:
http://nl.wikipedia.org/wiki/JavaScript


Waar?
Bijvoorbeeld hier:
http://www.leejoo.nl/

les 6

Ontwerp, Usability en kleur.

Vanavond gaan we kijken naar design en kleurgebruik.

Kleuren schemas:
http://en.wikipedia.org/wiki/Color_scheme

Elke kleur wordt wel met een bepaalde emotie geassocieerd:
http://www.htmlwijzer.nl/artikel/kleurgebruik.php

Dit is natuurlijk maar een leidraad.

Probeer in ieder geval te gaan voor:
-een klein kleuren pallet. Dus zowel voor de tekst als voor de de vormgeving, teveel kleur leidt af en komt vaak goedkoop over(behalve als dat dus aansluit op je doelgroep, bv peuters zitten niet te wachten op een mooie statige website)
-Niet te contrasterende kleuren (behalve als dat je bewust wilt)
-Geef je teksten niet te vreemde kleuren (oranje tekst op groene achtergrond)
-Vergeet achtergrondplaatjes (of het moet wel een heeeeeel mooie rustige tile zijn)

Een goede tip om een kleuren pallet samen te stellen:
http://www.boxesandarrows.com/view/natural_selections_colors_found_in_nature_and_interface_design

Wil/kun je het zelf niet doen, dan zij hier een groot aantal colour schemes te vinden:
http://www.colorschemer.com/schemes/index.php

http://www.colorschemer.com/online.html

Paar kleine tips voor goed design:
http://www.htmlwijzer.nl/artikel/design.php

Usability:
Broodkruimels/breadcrums
http://www.w3use.nl/usability/broodkruimels.html


Link v.d. week:
Gratis stockfotos:
http://www.freeimages.co.uk/
http://www.stockvault.net/

BONUSlink:
http://www.tutorialized.com/

Les 5

Hallo......

Vanavond even wat theorie, wat lekkere tips en ook nog wat leuks.

Ten eerste hier een lijstje (willekeurige volgorde) met tips die in de loop v.d. aangevuld zullen worden.



1. Ontwerp voor je doelgroep

Bedenk van tevoren wat je doelgroep is. Een jong publiek bedien je heel anders dan een wat volwassener groep.
Een site van een advocaten kantoor bijvoorbeeld, moet vertrouwen en degelijkheid uitstralen. Een site voor een punklabel, juist niet.


2. Laat de bezoeker het gevoel hebben dat hij de boel onder controle heeft.

Neem de controle van de bezoeker niet over door pop-ups te laten verschijnen of browserpagina's te laten openen zonder de nodige knoppen erop. Ook het uitschakelen van muisknoppen of toetsen is geen goed idee.
Begin ook niet onmiddelijk met muziek te smijten (behalve als dat aansluit bij bv doelgroep)

3. Let op bij plaatjes

Zorg ervoor dat je plaatjes maar een paar kB groot zijn. Dat komen de paginas mooi binnen.
Zorg ervoor dat de verhoudingen van foto's ook binnen je ontwerp passen, zoniet aanpassen.
Goede gratis grafische editor GIMP

4. Het juiste gereedschap

Gebruik het juiste gereedschap voor de juiste website. flash is bijvoorbeeld erg mooi voor een portfolio-site, maar niet handig voor een website met veel tekst. Dan gebruik je gewoon ouderwetse html, dreamweaver.

5. Maak je boodschap duidelijk

Laat je bezoeker weten wat hij of zij kan vinden op je site. Maak de beginpagina van de site duidelijk, zodat in een oogopslag men weet wat de site te bieden heeft. Ook bezoekers die via een ander pagina op je site komen, moeten duidelijk kunnen zien waar het om gaat. Doe je dit niet, dan kan je site nog zo mooi zijn, maar binnen 20 seconden zijn je bezoekers weer weg.


6. Schep duidelijkheid

Verrassen van bezoekers is leuk, maar zorg wel dat je duidelijk bent. Schep geen verwarring doordat je verassend wilt zijn. Als een bezoeker langer dan 20 seconden moet nadenken waar iets voor dient, of hoe iets werkt, is de kan vrij groet dat hij ahaakt.

7. Geef voldoende informatie

Zorg dat je bezoekers voldoende informatie hebben. Als ze bijvoorbeeld iets kunnen downloaden, zet er dan bij hoeveel MB de download groot is.
Als je wilt dat mensen in contact me je treden, zorg dan dat alle mogelijk communicatie gegevens duidelijk en makkelijk te vinden zijn.

8. Testen enzzzzz.(saai? laat het een ander doen)
Test je site op verschillende browsers en als het
kan ook op andere pkatformen. Laat andere mensen eerlijk zeggen wat ze er van vinden, of het fijn werkt, of het duidelijk is. Je bent zelf namelijk vaak niet meer in staat om objectief en kritisch naar je eigen werk te kijken(als je er al zo lang mee bezig bent)

9. Controleer je links
Niet werkende links zijn een van de meest vervelende zaken die je op internet kunt tegenkomen. Zorg dat je links werken. Werkt er een niet, haal het dan weg. Dit geldt speciaal voor externe links naar nadere sites, controleer af en toe of ze nog bestaan.


10. Zorg voor een duidelijk en eenvoudige navigatie.
In een oogopslag moet duidelijk worden waar de navigatie zich bevind. Tevens dient de navigatie makkelijk te zijn en niet te diep. Ook vinden bezoekers het fijn om te weten waar ze zijn, dus let op pagina titel, maak wellicht gebruik van een kruimelpad.
Ook moet men met 1 druk op de toets weer op de beginpagina kunnen komen.
Dus die navigatie is erg belangrijk?
http://twinklemagazine.nl/nieuws.aspx?navid=1&id=2194&terms=DM&searchtype=2&fragment=True

Slechte navigatie:
http://www.google.nl/search?sourceid=navclient&hl=nl&ie=UTF-8&rlz=1T4GGLR_nlNL207NL207&q=examples+of+bad+website+navigation





FF wat doen...........


3D button (NL)
http://www.sitemasters.be/tutorials/11/1/522/Fireworks/3D-knop

Meerdere randen rond tekst
http://www.sitemasters.be/tutorials/11/1/523/nieuw/Meerdere_randen_rond_tekst

Punching shapes
http://www.sitemasters.be/tutorials/extern/660/Header_sidebar_with_curved_inside_corner_(VideoTutorial)


Website resolutie:
Ga je voor 800 bij 600
of 1024 bij 768

Wat wordt het meest gebruikt, en hoe ga je met verschillende resoluties om.
http://www.searchenginejournal.com/optimizing-screen-resolution-with-google-analytics-1024x768-vs-800x600/4896/
Resolutie test.
http://www.unk.edu/website/index.php?id=2184

OK fireworks dan weer:

Slicen? wat is dat?
http://www.video-tutes.com/player/player.php?id=1203&T_id=4

Huiswerk

http://www.zoekmachine-optimalisatie-seo.be/on-page-optimalisatie/wat-doe-ik-als-mijn-navigatie-structuur-suckt/
Maak een sitetree:



Link v.d. week:
8000 fonts...................gratis!!!
http://www.urbanfonts.com/

Les 4

Vorige keer hebben we het een en ander in Fireworks gedaan zoals:
-tekst manipulatie
-intro in rolloverbuttons

Vanavond kijken we verder in Fireworks en behandelen:

-The button inspector
-annimated gifs
-Drop-Down Menus
-Patterned Text
-Paste Inside


Web Graphic Design Ideas and Tips

Les3

Hallo allemaal, vanavond gaan we lekker leuk doen.

Als eerste gaan we het hebben over buttons.
Buttons zijn de knoppen die je gebruikt om te navigeren door je website.

Gratis prefab buttons
http://www.graphics-4free.com/
http://www.buttonland.com/
http://www.aaa-buttons.com/

Online button generators
http://cooltext.com/
http://www.hooverwebdesign.com/freebuttons/

-Roll over button.
Hoe maak je in Dreamweaver een rollover button.
http://www.smartwebby.com/web_site_design/rollover_images.asp


Je weet nu hoe je buttons maakt, maar er is een nog een navigatie manier:

-Clickable imagemaps.
Wat is een imagemap en hoe maak je die?

Step 1:
Start Dreamweaver and open the page where the image map will appear.

Step 2:
Insert an image to use as the map, or click on an existing image.

Step 3:
Open the File menu and select Window, then Property Inspector.

Step 4:
Click on the arrow in the lower left corner of the Property Inspector to expand the options.

Step 5:
In the Map Name box, type the name of the image map. This helps the browser know which map is being referenced when you set the hotspots.

Als we dit hebben gehad gaan we naar onze grote vriend Fireworks

http://www.lehigh.edu/~inimr/fireworks/index.htm