Cursus Dreamweaver 01/01/2004 Voor updates, achtergrondinformatie, voorbeelden en download: Bezoek http://www.ideabox.be/webdesign Cursus Dreamweaver www.ideabox.be/webdesign pagina 1/36
Inleiding Deze cursus wordt volledig gratis op internet aangeboden. Je mag deze cursus gebruiken, afdrukken of doorsturen naar anderen als één geheel. Het overnemen van teksten is niet toegelaten. Bezoek regelmatig de website (http://www.ideabox.be/webdesign/) voor updates, achtergrondinformatie, voorbeelden en download. Cursus Dreamweaver www.ideabox.be/webdesign pagina 2/36
Inhoudstabel Inhoudstabel 3 Inleiding tot webdesign 4 CSS style sheets 7 Gebruik van lettertypes 11 Gebruik van afbeeldingen 15 Beheer van domeinnamen 18 Usability: richtlijnen voor een bruikbaardere website 22 Niet vraag gericht 25 Vraag gericht 25 Webhosting 27 Technologieën om in het oog te houden 33 Cursus Dreamweaver www.ideabox.be/webdesign pagina 3/36
Inleiding tot webdesign Onderdelen van een webpagina Een webpagina bestaat uit 3 onderdelen: Tekst Afbeeldingen (geluid, video, animatie) Opmaak Tekst en opmaak worden samen opgeslagen in een HTML-bestand dat eenvoudig herkenbaar is aan de extensie.htm of.html. Afbeeldingen worden in een apart bestand opgeslagen, meestal van het GIF of JPEG formaat. In de HTML code wordt dan een referentie naar de correcte afbeelding gelegd zodat de webbrowser weet waar hij de afbeelding moet vinden om in de pagina te voegen. Het is dus belangrijk dat we bij het verplaatsen (bvb publicatie) van een webpagina steeds zowel de HTML-bestanden als de afbeeldingen verplaatsen. HyperText Markup Language HTML is geen programmeertaal maar een opmaak taal. D.w.z. dat het een set codes bevat die een webbrowser vertellen hoe een pagina moet worden opgemaakt. Om een stuk tekst in het vet te zetten bijvoorbeeld gebruiken we deze code: <B>deze tekst is vet</b> HTML code staat steeds tussen twee haakjes < en > en komt bijna altijd in een paar voor: de begin- en de sluit-tag. Cursus Dreamweaver www.ideabox.be/webdesign pagina 4/36
Webeditors en WYSIWYG HTML-code kan men in principe met de hand schrijven. Elke tekstverwerker is daar bruikbaar voor. Webeditors kunnen echter helpen om sneller HTML-code te schrijven en met minder fouten. Veel gebruikt zijn WYSIWYG editors. Dat zijn programma s die de eindgebruiker een zeer visuele opmaakmogelijkheid geven. Het programma schrijft zelf de nodige HTML-codes om de gewenste opmaak te bekomen. Enkele populaire WYSIWYG webeditors zijn Microsoft Frontpage, Macromedia Dreamweaver en Adobe Golive. Microsoft Frontpage is onderdeel van MS Office en sluit zeer nauw aan bij de andere Office programma s. Wie met MS Word kan werken kan met Frontpage een eenvoudige website in elkaar zetten. Frontpage heeft een eenvoudige leercurve en is gericht op snel resultaat. http://www.microsoft.com/frontpage/ Macromedia Dreamweaver is een populair pakket bij professionele webbuilders. Het programma is zowel voor Windows als voor MacOS beschikbaar. Dreamweaver sluit nauwer aan bij grafische opmaak pakketten en heeft een veel moeilijkere leercurve. http://www.macromedia.com/software/dreamweaver/ Adobe Golive integreert perfect met de andere Adobe producten en is een geduchte concurrent van Dreamweaver. Het is eveneens een zeer professionele designomgeving. http://www.adobe.com/products/golive/main.html Webeditors schrijven HTML-bestanden (= HTML-code + tekst). Dit wil zeggen dan men nog steeds op een grafisch programma aangewezen is om de website van een grafische opmaak te voorzien. Cursus Dreamweaver www.ideabox.be/webdesign pagina 5/36
Verschillen in weergave Een belangrijk gevolg van het gebruik van HTML-codes is dat een website er op elke computer iets anders uit kan zien. HTML-codes vertellen de webbrowser immers hoe het een en het ander op het scherm moet verschijnen. Maar het is uiteindelijk de computer van de bezoeker van de site die de HTML-codes correct moet lezen, interpreteren, en uitvoeren. Het weergave van een webpagina is afhankelijk van: Het platform van de bezoeker: Windows, Linux, MacOS De webbrowser: Internet Explorer, Netscape, Opera Het formaat van het scherm: 640x480, 800x600,... De beschikbare technologieën: java, javascript, Flash, plug-ins Het aantal kleuren dat het scherm kan weergeven Als webbuilder moeten we er steeds naar streven onze webpagina s voor zo veel mogelijk internetgebruikers beschikbaar te maken ongeacht de computer die ze gebruiken. Daarom is het heel belangrijk om de site te testen op verschillende configuraties. Cursus Dreamweaver www.ideabox.be/webdesign pagina 6/36
CSS style sheets Inleiding Style sheets (CSS) is een extra set opmaakcodes die aan HTML worden toegevoegd om de webdesigner een betere controle te geven over de weergave van tekst(blokken) op de pagina. Implementatie CSS codes kunnen op drie verschillende plaatsen in een website worden geïmplementeerd: In een apart.css document In de hoofding van de webpagina In een specifieke HTML-tag In een apart.css document In dit geval wordt er een bestand aangemaakt dat meestal de naam style.css draagt. In dit document worden alle stylecodes geschreven. Via de HTML-tag <link> is het dan mogelijk om dit style.css bestand aan een of meerdere HTML pagina s te linken. De omschreven stijlen in het CSS document zijn nu beschikbaar in het HTML bestand. Het grote voordeel van deze aanpak is dat één set met stijldefinities de stijlen in verschillende webpagina s, of zelfs de hele website, aanstuurt. Het is dus mogelijk om de stijl van de volledige website ingrijpend te veranderen door aanpassingen te maken in dit ene CSS bestand. Het is niet ondenkbaar dat we voor verschillende webbrowsers (Netscape, Internet Explorer, Opera), verschillende platformen (Windows, MacOS, Linux) en zelfs verschillende toestellen (PC, NetBox, WAP GSM, PDA...) een verschillend CSS- bestand gaan gebruiken om op deze manier de weergave van de webpagina s aan te passen aan de mogelijkheden van de client. In de hoofding van de webpagina Wanneer de CSS stijlen alleen maar binnen één webpagina noodzakelijk zijn is het mogelijk om deze informatie in de <head> tag van het HTML document te schrijven. De stijlen zijn dan binnen de volledige webpagina beschikbaar. Cursus Dreamweaver www.ideabox.be/webdesign pagina 7/36
Voorbeeld: CSS tags in de <head> tag van een HTML document: <html> <head> <title>untitled Document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline; } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; text-decoration: overline; }.titelgroot { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #0033FF; } --> </style> </head> <body> </body> </html> In een specifieke HTML-tag Tenslotte is het ook mogelijk om CSS tags toe te voegen aan één bepaalde HTMLtag binnen een webpagina. Alleen de tekst die tussen deze specifieke tag staat zal van de stijlen gebruik kunnen maken. Tussen deze drie implementatie-niveau s is er een vastgelegde hiërarchie: Style.css < style in <head> < style in tag Toch is het niet wenselijk om stijlinformatie op verschillende niveau s weg te schrijven binnen één website. De kans op conflicterende stijlinformatie wordt dan te groot. Kies liever meteen voor een style.css document waarin alle stijlinformatie wordt weggeschreven. Twee soorten tags Cursus Dreamweaver www.ideabox.be/webdesign pagina 8/36
Er zijn twee manieren waarop we stijlinformatie aan een webpagina kunnen toevoegen: Door het herdefiniëren van bestaande HTML-tags Door het aanmaken van nieuwe style-classes Herdefiniëren van bestaande HTML-tags Traditionele HTML-tags zeggen vrij weinig over de manier waarop informatie op het scherm moet worden weergegeven. De tag <H1> bijvoorbeeld zegt dat de inbegrepen tekst een Hoofding 1 is. Die is in principe groter dan een <H2> of Hoofding 2. Hoe zo n H1 tekst er precies moet uitzien, welk lettertype, vet of niet, welk formaat... vertelt de HTML code niet. Het is de webbrowser op de client die dit zal bepalen. Het is dus niet ondenkbaar dan de ene webbrowser een H1 titel groter zal maken dan de andere. Door gebruik te maken van CSS codes kunnen we de weergave van deze H1-tag echter beter gaan controleren en de webbrowser opleggen hoe die exact moet worden weergegeven. Via CSS codes herdefiniëren we dus de bestaande HTML-tags zoals <H1> door er een set van opmaakregels (font, size, color, weight, theocratieën, background...) aan te koppelen. Wanneer we deze HTML tags nu binnen de webpagina gaan gebruiken worden ze exact weergegeven zoals opgegeven in de CSS codes. Wanneer we op deze manier de <BODY>-tag gaan herdefinieren zal alle tekst binnen de webpagina op deze manier worden weergegeven. Tenzij een andere HTML of CSS tag dat anders vastlegt. Voorbeeld: herdefinitie van de bestaande <H1>-tag: h1 { } font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline; Cursus Dreamweaver www.ideabox.be/webdesign pagina 9/36
Aanmaken van nieuwe style-classes Een tweede manier om CSS informatie aan tekstblokken toe te voegen is door zelf nieuwe CSS-tags of -classes aan te maken. We verzinnen daarvoor zelf een naam voor de tag (bvb grotetitel ) en koppelen daaraan opnieuw een set van opmaakregels (font, size, color, weight, theocratieën, background...). Belangrijk in de naamgeving van deze CSS classes is dat ze steeds moeten beginnen met een punt en geen spaties mogen bevatten. Zijn de classes beschikbaar binnen de webpagina (via een link naar het style.css document of de style codes in de <head>-tag) dan kunnen we deze classes op een bestaande HTML tag gaan toepassen. Alle tekst binnen deze doel-tag zal de opmaak van de classe krijgen. Voorbeeld: een eigen style-classe:.titelgroot { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #0033FF; } Meer informatie en links over CSS http://www.ideabox.be/webdesign/css.html Cursus Dreamweaver www.ideabox.be/webdesign pagina 10/36
Gebruik van lettertypes Er zijn verschillende zaken waarop u moet letten bij het gebruik van lettertypes op webpagina s. Beschikbare lettertypes Wanneer een webeditor een HTML-code schrijft voor het gebruik van een lettertype, wordt er enkel een referentie gelegd naar de naam van dat font. Dit wil zeggen dat een bezoeker van een website de tekst alleen maar in dat bewuste lettertype zal kunnen zien wanneer dat font ook effectief beschikbaar is op zijn computer. Wanneer u dus zeer exotische lettertypes gaat gebruiken op een webpagina, dan is het mogelijk dat die niet beschikbaar zijn op de computer van de bezoeker van uw website. Zijn webbrowser zal dan op zoek gaan naar een alternatief lettertype dat hij wel ter beschikking heeft om de tekst weer te geven. U kan deze gang van zaken beïnvloeden door zelf in de HTML code twee alternatieve lettertypes voor te stellen. Zie hoofdstuk CSS voor meer informatie. <font face="verdana, Arial, Helvetica, sansserif">tekst</font> Letters in afbeeldingen Wenst u toch een speciaal lettertype te gebruiken, bijvoorbeeld voor titels, dan kan dat door woorden als afbeeldingen te maken in een grafisch programma. De tekst, in het door u gekozen lettertype, wordt dan omgezet in een afbeelding waardoor zij zoals gewenst op het scherm van de bezoeker verschijnt. Het nadeel van deze aanpak is dat het veel meer tijd vraagt om deze titels aan te maken of aanpassingen in de tekst te maken aangezien u elke keer een volledig nieuwe afbeelding moet aanmaken. Gebruik ook geen afbeeldingen voor te grote stukken tekst aangezien de site dan zeer traag wordt. Cursus Dreamweaver www.ideabox.be/webdesign pagina 11/36
Letters in Flash Wanneer u over een database gestuurde website beschikt is het niet eenvoudig om dynamische tekst zomaar in een afbeelding te gieten in het gewenste formaat. Macromedia Flash kan hier een laatste uitweg bieden. Net als HTML gebruikt Flash immers de lettertypes die op de clientcomputer beschikbaar zijn om teksten in een bepaald font weer te geven. Flash beschikt echter over de capaciteit om een lettertype in de flash-file te embedden, waardoor het ook kan worden gebruikt wanneer het niet op de computer van de bezoeker van de website beschikbaar is. In combinatie met het feit dat er een mogelijkheid is om dynamisch tekst vanuit een database (via HTML, XML of LoadVars) door te geven aan de Flash-file, kan deze dynamische tekst toch worden getoond in het gewenste lettertype. Leesbare lettertypes Net zoals bij de opmaak van teksten voor print is het niet wenselijk om meer dan 3 verschillende lettertypes te gebruiken op dezelfde pagina. Het is ook heel waarschijnlijk dat u hetzelfde font uniform over de hele site gaat gebruiken. Een CSS (style sheet) kan u daarbij helpen. Omdat een webpagina per definitie op het scherm wordt gelezen is het belangrijk om zeer duidelijke letters te gebruiken. Gebruikerstesten hebben uitgewezen dat de leesbaarheid van een lettertype een rechtstreekse invloed heeft op de snelheid waarmee iemand een tekst van het scherm kan lezen en de hoeveelheid die hij ervan zal onthouden. Verdana wordt steeds naar voren geschoven als het meest leesbare lettertype voor op het scherm. Arial is een goed alternatief. Grootte van letters CSS (style sheets) laten de webdesigner toe het formaat van de letterts uit te drukken in pixels, punten of centimeters. Hou er rekening mee dat sommige computersystemen niet in staat zijn zeer kleine letters op een duidelijke manier op het scherm weer te geven. Over het algemeen zijn letters van een formaat 10 tot 12 punten voldoende leesbaar op elk scherm. Sommige websites bieden de bezoeker de mogelijkheid om zelf het formaat van de letters te kiezen. Ook in de instellingen van de webbrowser kan de gebruiker een standaard formaat voor de letters op alle pagina s die hij bekijkt instellen. Hou daar rekening mee. Het is niet ondenkbaar dat de layout van een webpagina helemaal Cursus Dreamweaver www.ideabox.be/webdesign pagina 12/36
onderuit gaat wanneer de bezoeker plots de webbrowser instelt op een letterformaat van 250%. Testen is de boodschap. Printbare pagina s Veel internetgebruikers hebben de gewoonte om webpagina s met veel tekst af te drukken om ze zo rustig te kunnen lezen. Webbrowsers proberen dan op verschillende manieren de webpagina te herschikken zodat die op een A4 pagina past. Achtergrond afbeeldingen worden bij het afdrukken niet weergegeven en zeer brede tabellen worden danig herschreven. Druk de gemaakte pagina s zelf eens af bij wijze van test. Steeds meer websites kiezen ervoor om een printbare versie van hun inhoud ter beschikking te stellen. Dezelfde tekst wordt dan op een sobere manier gepresenteerd zonder onnodige afbeeldingen of navigatiesysteem. Wanneer de inhoud van de website database gedreven is, is het een kleine moeite om een extra template te voorzien die de inhoud van de site in een sober printable formaat op het scherm geeft. Vergeet op deze pagina ook niet duidelijk eventuele copyright informatie en de URL van de website te vermelden. Eventueel kan naast of onder een artikel een icoontje van een printertje worden geplaatst waarachter een javascript zit dat de bewuste webpagina meteen afdrukt. Portable Document Format Hoe dan ook is de webbuilder steeds gebonden aan een aantal onzekerheden (platform, schermformaat, beschikbare lettertypes, flash plugin...) die een invloed hebben op de manier waarop zijn creatie op het scherm verschijnt. Voor grote brokken tekst die bedoeld zijn om te worden afgedrukt, kan worden uitgeweken naar het PDF-formaat van Adobe. Dit bekende bestandsformaat wordt wereldwijd gebruikt voor het verspreiden van digitale documenten. Heel wat DTP en tekstverwerkers zijn in staat teksten in dit formaat op te slaan. De voordelen van PDF: Acrobat Reader, het programma om PDF-bestanden te lezen, is gratis verkrijgbaar op de website van Adobe en reeds aanwezig op miljoenen internetcomputers. De Acrobat Reader is bovendien beschikbaar voor zowat elk denkbaar computerplatform. Cursus Dreamweaver www.ideabox.be/webdesign pagina 13/36
Gebruikers van de website kunnen geen aanpassingen maken aan PDF documenten die ze downloaden. Iets wat wel mogelijk is met MS Word documenten. Indien gewenst kan de verspreider zelfs vermijden dat men teksten uit een PDF-bestand kan knippen en plakken in een ander programma. Het is mogelijk om PDF-documenten op basis van hun inhoud te doorzoeken. PDF-documenten worden exact zo weergegeven als ze door de designer in elkaar zijn gezet. Bovendien zijn ze zeer geschikt voor de printer. Zoals de designer het heeft gemaakt, zo komt het uit de printer van de client. Wanneer er PDF-documenten op de website worden aangeboden is het interessant om een link naar de Adobe-site te voorzien waar men de PDF reader kan downloaden. Geef bij elke link naar een PDF-bestand ook aan dat het om een niet-html bestand gaat en zeg ook hoe groot het is. PDF bestanden met veel afbeeldingen kunnen zeer groot worden. Meer informatie en links http://www.ideabox.be/webdesign/fonts.html Cursus Dreamweaver www.ideabox.be/webdesign pagina 14/36
Gebruik van afbeeldingen Digitaal formaat Er zijn verschillende formaten waarin een computer een grafisch beeld als een computerbestand kan opslaan. BMP, GIF, JPEG, EPS, PICT zijn maar enkele voorbeelden. Belangrijk is dat u op een website enkel de formaten GIF en JPEG kan gebruiken. Beide formaten hebben hun specifieke eigenschappen en toepassingen: Het GIF formaat: Kan slechts 256 kleuren per afbeelding bevatten Kan een transparante achtergrond hebben Is ideaal voor kleine icoontjes Is ideaal voor logo s en andere afbeeldingen met weinig kleuren Het JPEG formaat: Kan tot 16,7 miljoen kleuren bevatten Kan geen transparante achtergrond hebben Kan extra compressie gebruiken wat het bestand kleiner maakt maar de beeldkwaliteit aantast Is ideaal voor grote afbeeldingen met veel kleuren Wordt steeds gebruikt voor foto s Afmetingen De afmeting van een afbeelding wordt bij websites uitgedrukt in pixels, niet in centimeters. Een gemiddeld computerscherm is 800 pixels breed en 600 pixels hoog. Zorg er dus voor dat uw afbeeldingen zeker niet groter zijn dan dat, omdat ze anders niet op één scherm passen en de gebruiker moet scrollen om de volledige afbeelding te kunnen zien. Meestal zal u afbeeldingen niet veel groter dan 250 tot 300 pixels willen maken. Let er bij het vergroten of verkleinen van afbeeldingen steeds op dat u de verhouding hoogte op breedte niet wijzigt, anders vervormt de afbeelding. Cursus Dreamweaver www.ideabox.be/webdesign pagina 15/36
Afbeeldingen bewerken Om afbeeldingen of foto s te bewerken (vergroten, verkleinen, stukken uit knippen...) hebt u een apart grafisch programma nodig. Voor Windows raden we Paint Shop Pro aan. Gratis proefversie op http://www.jasc.com - $99 aankoop Voor Macintosh gebruikers is Graphic Converter een goede oplossing. Gratis proefversie op http://www.lemkesoft.de/us_index.html - $30 aankoop Beide programma s zijn ook in staat om afbeeldingen in andere grafische formaten te openen en te converteren naar het GIF of JPEG formaat. Vergroten en verkleinen van afbeeldingen Vaak zal u uw afbeeldingen moeten vergroten of verkleinen. Het is daarbij belangrijk dat u dat NIET doet in de Webeditor, maar dat u uw afbeelding eerst verkleint in een grafisch programma (Paint Shop pro, Graphic Converter, Photoshop...), de verkleinde afbeelding opnieuw opslaat, en die aan uw webpagina toevoegt. U zal merken dat wanneer u afbeeldingen te veel vergroot, de individuele pixels zichtbaar worden en de afbeelding er geblokt gaat uitzien. Wanneer u afbeeldingen inscant, probeer ze dan meteen te scannen op het formaat dat u nodig hebt. Foto s van een digitale camera zal u bijna altijd moeten verkleinen voor ze op de website kunnen. Indien u over een grote hoeveelheid afbeeldingen beschikt die allemaal verkleind moeten worden, beschikken zowel Paint Shop Pro als Graphic Converter over een batch functie om veel afbeeldingen in één klik om te zetten. Cursus Dreamweaver www.ideabox.be/webdesign pagina 16/36
Beeldbanken en copyright U kan niet zomaar afbeeldingen van andere websites plukken en ze op uw eigen site gebruiken. Toch zijn er verschillende, al dan niet gratis, beeldbanken die u via het internet kan raadplegen om afbeeldingen te zoeken die bij uw website passen: http://www.gettyimages.com/ - foto s, meestal te koop http://www.corbis.com/ - foto s, maastal te koop http://www.animationfactory.com/ - animaties, gratis http://dir.yahoo.com/business_and_economy/shopping_and_services/ph otography/stock_photography/royalty_free/ - links naar gratis foto s http://gallery.yahoo.com/ - zoekmotor voor afbeeldingen http://dgl.microsoft.com/ - clip art en icoontjes van Microsoft http://www.barrysclipart.com/ - clip art en icoontjes http://www.imagestation.com/ - gedeelde beeldbanken van Sony Meer informatie en links http://www.ideabox.be/webdesign/afbeeldingen.html Cursus Dreamweaver www.ideabox.be/webdesign pagina 17/36
Beheer van domeinnamen Inleiding De domeinnaam is de unieke identificatie, zowel op technisch als op marketing vlak, van elke website. Een correcte registratie en een correct beheer van dit asset is dan ook van levensbelang voor het voortbestaan van de website. Structuur van een domeinnaam Het adres van een website bestaat uit 3 delen: Het sub-domein, meestal www. De domeinnaam, het gedeelte tussen de twee punten Het top-level, het laatste gedeelte,.be bijvoorbeeld Top-levels De organisatie ICANN is verantwoordelijk met het beheer van top-levels. Elk land beschikt over een top-level domeinnaam die bestaat uit de officiële ISO code van het land: BE voor België, NL voor Nederland, UK voor het Verenigd Koninkrijk... Daarnaast werden er voor de VS verschillende andere top-levels gemaakt:.com voor commerciële bedrijven.org voor non-profit organisaties.net voor netwerken.gov voor Amerikaanse overheidsdiensten Er bestaat ook een top-level.nato en er is een top-level.eu in de maak voor bedrijven in de Europese Unie. In 2001 werden ook nog nieuwe top-levels, waaronder.name (voor particulieren),.biz (voor bedrijven),.shop (voor webwinkels),.info...,gemaakt die over de daarop volgende jaren beschikbaar worden/werden. In elk land is er een organisatie die een centraal register beheert van alle domeinnamen op basis van het top-level van dat land. In België was dat tot 2001 het departement computerwetenschappen van de KULeuven. Vandaag is dat de vzw DNS.be. Elke land stelt eigen regels op basis waarvan een organisatie een domeinnaam mag registreren. Er zijn aparte organisaties voor de registratie van.com,.org,.net en.biz. In principe kan iedereen een domeinnaam op basis van dit top-level registreren. Domeinnaam Cursus Dreamweaver www.ideabox.be/webdesign pagina 18/36
Het middenste gedeelte van het adres van een website is de eigenlijke domeinnaam. Deze kan maximaal 64 karakters bevatten en mag niet bestaan uit vreemde tekens. Letters met leestekens (ë, è, à...) zijn sinds enkele jaren wel mogelijk. Subdomein Wanneer u eenmaal een registratie van een domeinnaam, bijvoorbeeld mijnbedrijf.be hebt gedaan bent u in principe onbeperkt in het aantal subdomeinamen dat u aanmaakt: intranet.mijnbedrijf.be klanten.mijnbedrijf.be mail.mijnbedrijf.be... Elke subdomein kan staan voor een andere server waar andere informatie of diensten te vinden zijn. Registratie van domeinnamen in België De registratieprocedure voor een domeinnaam is in elk land anders. Sinds 2001 is in België een systeem op basis van agenten van toepassing. Het beheer van de centrale database met domeinnamen berust bij de vzw DNS.be waarin verschillende belangrijke internetproviders vertegenwoordigd zijn. Als bedrijf of particulier kan u echter geen registratie doen rechtstreeks bij de vzw DNS.be. Daarvoor kunt u terecht bij een van de agenten. Zo n 300 bedrijven (banken, IT firma s en internetproviders) zijn agent van DNS en kunnen een domeinnaam registreren. Om agent te mogen zijn moeten ze een minimaal quotum per jaar halen. Sinds juni 2002 betaalt een agent 6 per jaar per geregistreerde domeinnaam aan de vzw DNS.be. De agenten zijn vrij in het hanteren van prijzen naar de eindklant toe. De prijzen die agenten hanteren liggen tussen de 10 en de 150 per jaar per domein. De website Tarieven.be (http://www.tarieven.be) biedt vergelijkende tabellen aan. Sinds 2001 werden alle beperkingen op wie welke domeinnamen mag registreren opgeheven. Er werd wel een klachtenprocedure voorzien via dewelke men onrechtmatig geregistreerde domeinnamen kan terug eisen. Sinds oktober 2002 is het ook toegelaten om domeinnamen te verhandelen in België. Cursus Dreamweaver www.ideabox.be/webdesign pagina 19/36
Registratie van niet Belgische domeinnamen Veel bedrijven bereiden hun internationale expansie voor door domeinnamen in andere landen te registreren. Sommige internationale agenten zoals Register.com (http://www.register.com) geven de mogelijkheid om tientallen domeinnamen in verschillende landen tegelijk te registreren. De prijzen variëren van land tot land. Domain Name Servers Het systeem van domeinnamen (DNS) geeft webbrowsers de mogelijkheid om, wanneer de gebruiker een URL intikt, de juiste website te contacteren. Dit is een redelijk complex systeem. Alle internetproviders en veel grote bedrijven met een eigen internet infrastructuur beschikken over DNS-servers. Deze server zijn in staat een URL om te zetten in het overeenkomstige IP-adres. Elke computer (server of client) die op het internet is aangesloten wordt geïdentificeerd door zo n IP adres (bijvoorbeeld 200.100.225.99). Op basis van dit adres is het mogelijk informatie (e-mails, webpagina s, bestanden...) van de ene internetcomputer naar de andere te sturen. Wanneer een gebruiker een URL in de webbrowser ingeeft zal deze de DNS server van de internetprovider contacteren om het overeenkomstige IP-adres te vinden. Men spreekt van lookup. Met een speciaal programma is het ook mogelijk om een reverse lookup te doen waarbij men de domeinnaam krijgt die bij een IPadres hoort. Met dit IP-adres kan de webbrowser de juiste server contacteren. Het is echter vaak zo dat er meerdere websites op één server staan. Daarom zal de server ook over een lijst beschikken van alle domains van de sites die op zijn harde schijf staan. Wanneer een client een bepaalde URL opvraagt weet de server dus in welke directory hij de bestanden van deze site moet gaan zoeken. DNS servers copieëren dagelijks hun data naar elkaar. Om een nieuwe domeinnaam in de servers te krijgen heeft men een authorative domeinserver nodig. Dat is één server die het centrale beheer van uw naam op zich neemt. Alleen deze server, meestal van uw internet provider of uw DNS-agent, kan de instellingen van uw domeinnaam wijzigen. De andere DNS-servers kunnen alleen maar deze gegevens overnemen. In het centrale register van vzw DNS.be wordt bij de registratie van uw domeinnaam de adressen van de authoritive nameservers opgenomen. Op deze servers wordt ingesteld op welk IP-adres uw website te vineden is. Op de server met dat IP-adres staat in welke directory de bestanden van uw site staan. Cursus Dreamweaver www.ideabox.be/webdesign pagina 20/36
Meer informatie http://www.dns.be http://www.tarieven.be http://www.register.com http://www.domeindokter.be http://www.iana.org/cctld/cctld-whois.htm http://news.yahoo.com/fc?tmpl=fc&cid=34&in=tech&cat=domain_names_and_re gistration Cursus Dreamweaver www.ideabox.be/webdesign pagina 21/36
Usability: richtlijnen voor een bruikbaardere website Inleiding Usability is de studie van de bruikbaarheid. Niet alleen websites maar ook software, en alle mogelijk andere instrumenten die op een of andere manier met de mens in interactie treden, kunnen op hun bruikbaarheid worden getest. Gebruikerstesten zijn vaak de enige echte objectieve manier om de bruikbaarheid van een website te meten en te verbeteren. Op basis van gebruikerstesten werden een aantal algemene regels opgesteld die door steeds meer webdesigners worden gevolgd. Over de geldigheid van sommige regels valt zeker te discussiëren. Een veel gehoorde opmerking is dat usability weinig ruimte laat voor creatief design van de webdesigner uit. De bedoeling is uiteraard om een goede middenweg te vinden tussen een grafisch aantrekkelijke en creatieve maar toch duidelijke en bruikbare website. Uniforme vormgeving Een uniforme vormgeving is zowat het belangrijkste item dat een set webpagina s bindt tot één website. Door het hanteren van een eenduidige huisstijl wordt een website herkenbaar voor gebruikers. Daarnaast zorgt een eenvormige structuur ervoor dat de gebruiker deze structuur gewoon zal worden en er steeds beter zal mee leren werken. Webdesigners stuiten op veel tegenstand van gebruikers wanneer ze een website van een nieuwe look voorzien. Over het algemeen zien we dan dat de gebruikers de eerste dagen beduidend meer tijd nodige hebben om de juiste zaken te vinden op de aangepaste website. Cursus Dreamweaver www.ideabox.be/webdesign pagina 22/36
Vaste paginastructuur Steeds vaker hanteren websites een min of meer vaste paginastructuur die over verschillende websites heen terug komt: Logo: links bovenaan, is link naar de homepage Zoekfunctie: rechts bovenaan, één veld met de toets zoek er achter Toolbar met links naar help en contactpagina: onder of boven de zoekfunctie Hoofdnavigatie: links Contextuele navigatie die afhangt van de inhoud van de pagina: rechts Cursus Dreamweaver www.ideabox.be/webdesign pagina 23/36
Navigatie De navigatie is het belangrijkste instrument waarmee de gebruiker zich door de website beweegt. Duidelijkheid, eenduidigheid, uniformiteit en bruikbaarheid staan hier dus centraal. Een navigatie staat steeds op dezelfde plaats op de pagina. Alle onderdelen staan samen. Ideaal bestaat ze uit niet meer dan 7 tot 10 rubrieken. Alle rubrieken zijn zichtbaar. Openklappende menu s vormen een enorme drempel voor gebruikers. Bovendien zijn dan niet alle items zichtbaar. De items bestaan uit duidelijke termen. Marketing termen of termen die bedoeld zijn om de gebruiker te teasen zijn uit den boze. De gebruiker moet meteen zien wat er zich onder het item zou bevinden. Tekst Tekst wordt ideaal weergegeven in een donkere kleur op een witte of lichte achtergrond. Links, en alleen links, zijn onderlijnd zodat ze herkenbaar zijn. Verdana, 10 punten is het beste lettertype voor gebruik op een scherm. Arial, 12 punten is een goed alternatief. Taalkeuze In België verwachten gebruikers zich bij het binnen komen van een website aan een taalkeuzescherm. Dit scherm bevat een logo, een tagline en de keuze van de talen. Elke taal wordt weergegeven in die taal ( Nederlands, Français, English ). Vlagjes worden beter niet gebruikt. De taalkeuze kan worden opgeslagen in een cookie zodat een bezoeker bij een tweede bezoek meteen op de juiste taalversie terecht komt. In dat geval moet elke andere pagina wel opnieuw een taalkeuze bevatten. Gepositioneerd onder het logo, op basis van de ISO codes van de talen: NL, EN, DE, FR... Cursus Dreamweaver www.ideabox.be/webdesign pagina 24/36