Updates van deze cursus kunnen gevonden worden op de website

www.ideabox.be/webdesign

Cursus Dreamweaver 2004 - 2005

Cursus Dreamweaver

•

Updates van deze cursus kunnen gevonden worden op de website http://www.ideabox.be/webdesign

•

Niets uit deze cursus mag worden overgenomen zonder toestemming van de auteur.

•

Datum van deze versie: 12/11/2004

Pagina 1/89



Inhoud Cursus Dreamweaver ................................................................................... 1 Inhoud ....................................................................................................... 2 Inleiding internettechnologieën...................................................................... 4 Inleiding.................................................................................................. 4 Client-side technologieën ........................................................................... 4 HTML – Hyper Text Markup Language.......................................................... 4 XHTML – eXtensible Hyper Text Markup Language......................................... 5 CSS – Cascading Style Sheets .................................................................... 6 Javascript................................................................................................ 7 DHTML.................................................................................................... 7 Domeinnamen............................................................................................. 8 Inleiding.................................................................................................. 8 Structuur van een domeinnaam .................................................................. 8 Technische werking van DNS.................................................................... 10 Registratie van domeinnamen in België...................................................... 15 Registratie van niet Belgische domeinnamen .............................................. 17 Een DNS agent kiezen ............................................................................. 18 Alles over een domeinnaam te weten komen .............................................. 21 Meer informatie ......................................................................................... 23 HTML ....................................................................................................... 24 Inleiding................................................................................................ 24 Standaarden .......................................................................................... 24 Basisbeginselen van HTML ....................................................................... 25 Structuur van een HTML pagina ................................................................ 25 Structurele opmaak ................................................................................ 26 Meer informatie...................................................................................... 26 Cascading Style Sheets (CSS) ..................................................................... 27 Inleiding................................................................................................ 27 Implementatie ....................................................................................... 27 Twee soorten tags .................................................................................. 29 Programma’s om CSS te schrijven ............................................................ 31 CSS2 en het box-model........................................................................... 32 Meer informatie...................................................................................... 33 Dreamweaver ........................................................................................... 34 Inleiding................................................................................................ 34 Een nieuw project opzetten ...................................................................... 34 Folderstructuur ...................................................................................... 35 Templates ............................................................................................. 37 Layout view ........................................................................................... 38 Cascading Style Sheets in Dreamweaver.................................................... 39 Gebruik van afbeeldingen in Dreamweaver................................................. 40 Layers .................................................................................................. 40 Behaviors .............................................................................................. 42 Assets................................................................................................... 43 Dreamweaver extensions......................................................................... 43 Macromedia Contribute............................................................................ 44 Hosting .................................................................................................... 46 Inleiding................................................................................................ 46 Shared hosting....................................................................................... 46 Virtual private server .............................................................................. 47 Dedicated hosting................................................................................... 49 Co-location of housing............................................................................. 50 Verschillende platformen ......................................................................... 51 Factoren die de keuze beïnvloeden............................................................ 51 Meer informatie...................................................................................... 54 Pagina 2/89



Usability ................................................................................................... 55 Inleiding................................................................................................ 55 Uniforme vormgeving.............................................................................. 55 Vaste paginastructuur ............................................................................. 56 Navigatie............................................................................................... 58 Tekst .................................................................................................... 58 Taalkeuze.............................................................................................. 60 Informatiestructuur................................................................................. 61 Usability mythes..................................................................................... 61 Taalgebruik ........................................................................................... 62 Gebruiksvriendelijkheidstesten ................................................................. 62 Homepage usability ................................................................................... 63 Inleiding................................................................................................ 63 Richtlijnen ............................................................................................. 63 Accessibility .............................................................................................. 66 Inleiding................................................................................................ 66 Blindsurfers in België .............................................................................. 66 Richtlijnen ............................................................................................. 66 Accessibility via CSS ............................................................................... 67 Breadcrumbs ......................................................................................... 69 Broken links........................................................................................... 70 Afbeeldingen op het web............................................................................. 72 Server side includes ................................................................................... 74 Wat zijn server side includes ?.................................................................. 74 Metrics..................................................................................................... 77 Inleiding................................................................................................ 77 Over pageviews en meer ......................................................................... 77 Bezoekersstatistieken.............................................................................. 77 Taggers................................................................................................. 79 Search engine marketing ............................................................................ 80 Inleiding................................................................................................ 80 Webdirectories ....................................................................................... 80 Zoekmotoren ......................................................................................... 83 Paid listings ........................................................................................... 85 Optimalisatie van websites....................................................................... 87

Pagina 3/89



Inleiding internettechnologieën Inleiding In dit hoofdstuk maakt u kennis met verschillende technologieën die de kern van het internet uitmaken. De basis van het internet is het TCP/IP protocol. TCP/IP is niet meer dan een set afspraken waardoor computers op een uniforme manier digitale signalen uitwisselen. Elke computer die TCP/IP verstaat kan op het internet worden aangesloten. Ook andere toestellen zoals settop boxen, GSM’s, PDA’s, telefoons en zelfs parkeermeters wordt uitgerust met de mogelijkheid om TCP/IP te praten. Bovenop deze TCP/IP laag worden echter verschillende protocollen en technologieën gebruikt met elk hun specifieke toepassing: uitwisseling van email, bestanden, instant messaging berichten, ...

Client-side technologieën Client-side technologieën kennen hun werking op de client, de webbrowser. Het zijn opmaak- of scripttalen die als onderdeel van een webpagina worden doorgestuurd naar de webbrowser en daar uitgevoerd. Verschillende families en generaties van webbrowsers gaan anders om met deze technologieën. De correcte werking ervan is dus gedeeltelijk afhankelijk van de webbrowser, besturingssysteem en computer waarmee de bezoeker de site opvraagt. Dat zorgt ervoor dat elke nieuwe website zeer goed getest moet worden in verschillende generaties webbrowsers om eventuele compatibiliteitsproblemen te kunnen opvangen.

HTML – Hyper Text Markup Language Deze opmaaktaal wordt gebruikt om webpagina’s vorm te geven. HTML bestaat uit een set van codes die specifieke informatie over de opmaak meegeven aan blokken tekst op een webpagina. De HTML code wordt door de webbrowser geïnterpreteerd (ge-renderd) en weergegeven op het scherm. HTML codes zijn eenvoudig herkenbaar omdat ze steeds omgeven zijn door hekjes “<” en “>”. U kan de HTML code van een webpagina bekijken door in de webbrowser te kiezen voor het menu Beeld > Bron. HTML code van een andere website kan probleemloos worden gecopyeerd. Meer informatie Webmonkey Deze Engelstalige website is een belangrijke informatiebron voor professionele webmasters. Verschillende technologieën komen er aan bod. http://www.webmonkey.com HTML op het Net Pagina 4/89



Deze Nederlandstalige site bevat een zeer duidelijk gestructureerd overzicht van alle bestaande HTML codes, hun attributen, en extra's. http://html.op-het.net W3schools Deze Engelstalige website bestaat uit tientallen "tutorials" waarin u kennis maakt met nieuwe technieken en technologieën. http://www.W3schools.com

XHTML – eXtensible Hyper Text Markup Language HTML, de opmaakcode waarin webpagina's worden gemaakt, bestaat al een hele tijd. Nu en dan worden er nieuwe versies uitgebracht met nieuwe of aangepaste functionaliteiten. De HTML versie die de meeste websites vandaag gebruiken is HTML 4.01. In tussentijd verscheen echter ook XML op de proppen. Een universele, op HTML gelijkende code die steeds vaker wordt gebruikt om data op te slaan en door te geven tussen verschillende systemen. Een beetje minder HTML Om de bestaande HTML specificaties en de populaire XML codes met elkaar in overeenstemming te brengen werd XHTML ontwikkeld, HTML code die voldoet aan de strenge opmaakregels van XML. In zekere zin keert XHTML ook terug naar de basis van HTML. Structurele vs. visuele opmaak Aanvankelijk werd HTML gebruikt om structurele elementen uit een tekst zoals een paginatitel, een tussentitel of een beeld te identificeren. Het stond elke webbrowser min of meer vrij om te beslissen hoe deze structurele elementen moesten worden weergegeven op het scherm van de bezoeker. Gaandeweg werden er echter verschillende HTML tags toegevoegd die bedoeld waren om de pagina visueel op te smukken. De tag met al zijn attributen is daar een goed voorbeeld van. Tot de grote ergernis van vele webmasters zitten er echter nog steeds kleine verschillende in de manier waarop webbrowsers deze HTML tags op het scherm visualiseren. Met XHTML keren we terug naar het opmaken van pagina's met structurele code. Hoe deze elementen dan moeten worden gevisualiseerd op verschillende paltformen laten we voortaan over aan de CSS file. Dat is een apart bestand dat met een eigen code-set aangeeft hoe de verschullende structurele XHTML elementen eruit moeten zien op het scherm. Meer informatie http://www.wdvl.com/Authoring/Languages/XML/XHTML/ Introduction to XHTML http://www.w3schools.com/xhtml/ XHTML Tutorial http://www.alistapart.com/articles/betterliving/ Pagina 5/89



Better Living Through XHTML http://hotwired.lycos.com/webmonkey/00/50/index2a.html XHTML Overview

CSS – Cascading Style Sheets Deze opmaaktaal geeft webbouwers meer controle over de weergave van tekst op het scherm. Typische zaken die met CSS mogelijk zijn maar niet met HTML is het uitvullen van tekst (links en recht tegelijk uitlijnen), het aanpassen van de interlinie van tekst, of het verwijderen van de onderlijning onder links. Een tweede voordeel van CSS is dat deze opmaakcode niet noodzakelijk in de webpagina zelf moet zitten. HTML code daarentegen zit steeds vervat tussen de teksten van de webpagina. CSS code kan in een apart bestand worden opgeslagen dat meestal de naam style.css krijgt. Dit ene bestand kan dan de weergave van de volledige website aansturen, niet alleen van één enkele pagina. Voorbeeldcode 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; }

De volgende generatie CSS Versie 1 van CSS wordt door de meeste webbrowsers correct geïnterpreteerd. De ondersteuning voor CSS 2 is nog niet in elke browser optimaal. In combinatie met XHTML laat CSS 2 echter toe om ook aan de client-side content en presentatie volledig van elkaar te scheiden. Een zeer mooi voorbeeld van de kracht van XHTML en CSS 2 is te vinden op de website http://www.csszengarden.com/. Hier kan éénzelfde HTML pagina volledig van uitzicht veranderen door alleen maar de CSS file te vervangen. Meer informatie http://www.w3.org/Style/CSS/ http://directory.google.com/Top/Computers/Programming/Internet/CSS/ http://jigsaw.w3.org/css-validator/ http://www.htmlhelp.com/reference/css/ Pagina 6/89



Javascript Javascritp is een kleine scripttaal die de webbouwer controle geeft over enkele instellingen van de webbrowser. Zo kan een javascript worden gebruikt om een pop-up venster te openen of om de ingevulde inhoud van een formulier te valideren voor het naar de server wordt doorgestuurd. De meeste browsers zijn in staat javascript uit te voeren. Het is echter belangrijk om een pagina die intensief van javascript gebruik maakt te testen op verschillende platformen. Javascript code zit verwerkt in de HTML pagina en is van daar uit toegankelijk voor de bezoeker van de site. Het is dus uitgesloten om deze technologie te gebruiken voor zeer kritische toepassingen zoals bijvoorbeeld de afrekening van een online bestelling. Iets wat in de vroege dagen van e-commerce wel eens gebeurde. Zie: http://www.iwks.com/opinion/default.asp?pagetypeid=2&articleid=15952&subsec tionid=649

DHTML Dynamische DHTML staat voor de combinatie van HTML met CSS en Javascript. Deze 3 technologieën samen geven webmasters de mogelijkheid om een zekere mate van (client-side) interactie mee te geven aan hun webpagina’s. Typische DHTML effecten zijn navigatiemenu’s die open klappen wanneer de surfer erover beweegt met zijn cursor. Maar ook de meer vervelende mouse-trails worden meestal op basis van DHTML gemaakt. Ondanks de benaming heeft DHTML niet te maken met dynamisch webpagina’s die gegenereerde worden door een back-end scripting taal. Meer informatie http://www.dynamicdrive.com http://www.webreference.com/dhtml/ http://webmonkey.wired.com/webmonkey/authoring/dynamic_html/ http://www.w3schools.com/dhtml/default.asp

Pagina 7/89



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 site. De technische werking van het DNS (Domain Name Servers) systeem is een belangrijke hoeksteek van het internet. Maar de keuze van een goede domeinnaam is ook een belangrijke stap in de marketing van de website. Redenen genoeg dus om even stil te blijven staan bij de technische, marketing, management, en usability aspecten van domeinnamen.

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 dat bestaat uit de officiële ISO code van het land: BE voor België, NL voor Nederland, UK voor het Verenigd Koninkrijk ... Sommige landen zoals de UK hebben ervoor gekozen om hun top-level nog eens op te delen. Zo zijn commerciële Britse websites te vinden onder .co.uk. In ons land is dat enkel het geval voor academische instellingen die het achtervoegsel .ac.be krijgen. Alle andere domeinen vallen rechtstreeks onder .be. 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. Die laatste zal in het begin van 2005 beschikbaar zijn voor registratie. In 2001 werden ook nog nieuwe top-levels, waaronder .NAME (voor particulieren), .BIZ (voor bedrijven), .SHOP (voor webwinkels), .INFO ... , opgezet 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, op basis waarvan iemand een domeinnaam mag registreren.

Pagina 8/89



Er zijn aparte organisaties voor de registratie van .COM, .ORG, .NET en .BIZ. In principe kan iedereen een domeinnaam op basis van zo’n top-level registreren. Domeinnaam 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 (spatie, %, *, _, ...). 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 subdomeinnamen dat u aanmaakt: • • • •

intranet.mijnbedrijf.be klanten.mijnbedrijf.be mail.mijnbedrijf.be ....

Elk subdomein kan gekoppeld worden aan een andere server waar andere informatie of diensten te vinden zijn. Subdomeins moeten niet meer worden geregistreerd, ze kunnen worden aangemaakt op de DNS server. (zie verder)

Pagina 9/89



Technische werking van DNS 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 internetinfrastructuur, beschikken over DNS-servers. Deze servers 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. U kan het IP adres van een domeinnaam eenvoudig achterhalen door in Windows, onder de DOS prompt, het commando “ping www.mijnbedrijf.be” te gebruiken.

Een “ping” van het domein www.syntra-ab.be leert ons dat het IP adres van de server 209.15.173.5 is. Met dit IP-adres kan de webbrowser de juiste server contacteren. Het is echter vaak zo dat er meerdere websites op één server staan. We spreken dan over “virtual sites” (zie hoofdstuk over hosting). 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 kopieëren dagelijks hun data naar elkaar. Om een nieuwe domeinnaam in de servers te krijgen heeft men een “authorative domeinserver” Pagina 10/89



nodig. Dat is één server die het centrale beheer van uw naam op zich neemt. Alleen deze server, meestal van uw internetprovider of uw DNS-agent, kan de instellingen van uw domeinnaam wijzigen. De andere DNS-servers kunnen alleen maar deze gegevens overnemen. De creatie van een nieuw DNS record of de aanpassing van een record (bvb bij de verhuis van de website naar een andere server) gebeurt via deze “authorative domeinserver”. Meestal duurt het 24u tot 48u voor alle DNS servers wereldwijd deze nieuwe of aangepaste gegevens hebben overgenomen. Deze tijd kan worden ingekort door op voorhand de TTL (Time To Live) van het domein te verlagen. Zo worden DNS servers gedwongen om zeer regelmatig de instellingen van de DNS records van het domein te actualiseren door opnieuw contact op te nemen met de authorative domeinserver. Bij de verhuis van uw website naar een andere webserver (met een ander IP adres) moet het DNS record worden aangepast. Tijdens de 24u tot 48u na deze aanpassing zullen dus wereldwijd sommige DNS servers reeds de nieuwe gegevens gebruiken en andere servers nog de oude gegevens. D.w.z. dat een deel van uw bezoekers de nieuwe site zal zien, en een ander deel de oude site. In het centrale register van vzw DNS.be worden bij de registratie van uw domeinnaam de adressen van de authorative nameservers opgenomen. Meestal is dat één server met minstens één backup server.

Pagina 11/89



Schema van de werking van het DNS systeem De website http://www.domeindokter.be/ geeft gebruikers de mogelijkheid om stap voor stap een procedure te doorlopen die de goede werking van een domeinnaam controleert: • • • • •

Correcte Correcte Correcte Correcte Correcte

registratie bij DNS.be instelling van een authorative DNS server instelling van DNS records voor web en mail verkeer werking van de webserver en mailserver weergave van de eerste pagina van de site door de webserver

Op basis van deze informatie kan u ontdekken waar in de keten eventuele problemen met uw domeinnaam zitten.

Pagina 12/89



De website domeindokter.be controleert de correcte registratie van het domein syntra-ab.be en geeft ook een woordje uitleg bij elke stap. De registratie van een domeinnaam gebeurt steeds op naam van een “Licensee”. Dit is de persoon die de eigenaar is van de domeinnaam. Hij of zijn heeft het recht om bijvoorbeeld een transfert van de domeinnaam aan te vragen. Als unieke identificatie van de Licensee wordt het email adres gebruikt dat bij registratie werd opgegeven. Zorg er steeds voor dat u toegang hebt tot dit adres. In de beginjaren van het internet werden domeinnamen soms geregistreerd door medewerkers van een bedrijf op basis van hun persoonlijk email adres. Bij het verlaten van het bedrijf nemen zij de domeinnaam dan in feite mee. Het Licensee adres is echter best niet gebaseerd op het domein zelf. Aanpassingen aan de DNS instellingen zijn immers vaak nodig wanneer er technische problemen zijn, en dan is ook dat adres net niet bereikbaar. De Licensee gegevens van een domeinnaam kan u eenvoudig opzoeken via de website www.dns.be.

Pagina 13/89



Via de website dns.be kunnen de registratiegegevens van elke Belgische domeinnaam worden opgevraagd.

Pagina 14/89



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 DNS agenten van toepassing. Het beheer van de centrale database met domeinnamen berust bij de vzw DNS.be waarin verschillende belangrijke internetproviders, AGORIA en de federale overheid 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 (webbouwers, IT firma’s en internetproviders) zijn agent van DNS.be en kunnen een domeinnaam registreren. Om agent te mogen zijn, moeten ze een minimaal aantal namen per jaar registreren en deze namen ook op voorhand betalen. 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.

Evolutie van het aantal domeinregistraties per jaar in België. Bron: Jaarverslag DNS.be 2003 (http://www.dns.be/nl/News/annualreport.htm)

Pagina 15/89



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.

De website tarieven.be vergelijkt de DNS prijzen van verschillende Belgische agenten. Sinds 2001 werden alle beperkingen op wie welke domeinnamen mag registreren opgeheven. Daarvoor was een uittreksel uit het Staadsblad of een merkregistratie noodzakelijk om aan te tonnen dat uw bedrijf recht had op een bepaalde naam. Er werd wel een klachtenprocedure voorzien via dewelke men onrechtmatig geregistreerde domeinnamen kan terug eisen. Meer informatie daarover is te vinden op: http://www.dns.be/nl/DomainInfo/disputegeneralinfo.htm

Pagina 16/89



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 en voorwaarden variëren van land tot land.

Via register.com kan u meer dan 40 verschillende top-levels registreren.

Pagina 17/89



Een DNS agent kiezen Er is geen rakketwetenschapper nodig om een domeinnaam op een goede manier te hosten. Toch kan het geen kwaad om wat aandacht te besteden aan welke DNS agent u kiest. Prijs De prijs voor de jaarlijkse licentie op de domeinnaam is zonder twijfel een belangrijke factor. Met ruim 300 DNS agenten in België en een inkoopprijs voor de agenten zelf van 6€ per domein per jaar, vallen er zeker zaken te doen. De website Tarieven.be maakt overigens een mooi overzicht van de prijzen van de meeste agenten. Vooral wanneer u meerdere domeinnamen hebt is het interessant om die bij één agent te centraliseren. Lijst met Belgische DNS agenten: http://www.dns.be/info/nl/agent/registered Vergelijkende prijstabel: http://www.tarieven.be/internet_registrars.php Code of conduct Een groot deel van de Belgische agenten ondertekenden een “code of conduct”. Ze worden in de lijst van DNS.be apart weergegeven. Meestal kan u ook een logo op de website van de agent vinden. Lijst van agenten: http://www.domain-ethix.be/nl/ListOfCocAgents/list.html Extra diensten Naast de zuivere registratie van een domeinnaam bieden de meeste agenten, soms inbegrepen in de prijs, enkele extra diensten aan zoals: •

Één of meerdere email boxen op basis van het domein, al dan niet met spam- en/of virusbescherming

•

URL forwarding waarbij men na het intikken van het domein wordt doorgestuurd naar een andere website

•

DNS servers waarin u instellingen voor de verschillende DNS records kan opslaan

•

“Parkeren” van een ongebruikte domeinnaam al dan niet met weergave van een eenvoudige webpagina waarvan u zelf de inhoud kan aanpassen.

•

Bouw van een mini-site onder het domein

Pagina 18/89



Website creatie, hosting en email zijn enkele van de extra diensten (al dan niet betalend) bij de Belgische agent register.be. Control panel Normaal gezien zal u zelden de instellingen van uw domeinnaam willen aanpassen omdat zo de goede werking van uw website en email in het gedrang kan komen. In sommige gevallen, zoals bvb bij het verhuizen van uw website, zijn er toch aanpassingen aan de DNS records wenselijk. Zorg er in de eerste plaats voor dat deze aanpassingen gratis voor u worden gedaan. Sommige agenten bieden een control panel aan. Via een paswoord kan u dan zelf inloggen op hun website en DNS aanpassingen rechtstreeks op de DNS servers zelf maken. Enige technische kennis is vereist.

Pagina 19/89



Via het control panel kunnen Hostbasket klanten online zelf DNS records toevoegen of aanpassen in de DNS servers. Van DNS agenda veranderen U kan zonder problemen op elk moment van DNS agent veranderen. We spreken dan van een “Transfert”. Om een transfert van uw domein aan te vragen neemt u contact op met uw nieuwe DNS agent. Die zal de transfert bij de vzw DNS.be aanvragen. De vzw DNS.be zal nu een email sturen naar het email adres van de Licensee van het domein om een bevestiging van de transfert te vragen. Na bevestiging wordt de domeinnaam naar de nieuwe agent getransfereert. Er begint een nieuwe licentieperiode van 1 jaar. De oude DNS agent heeft op geen enkele manier invloed op deze gang van zaken en kan de transfert dus ook niet tegen houden. Er is ook een procedure die de overdracht van een domeinnaam naar een andere Licensee mogelijk maakt. Bijvoorbeeld in het kader van een verkoop van een domeinnaam. Meer informatie is te vinden op de website http://www.dns.be

Pagina 20/89



Alles over een domeinnaam te weten komen Door verschillende gratis online diensten en tools te combineren kan u heel wat informatie over een domeinnaam, en de daaraan gekoppelde website, verzamelen. 1. De eerste stap om informatie over een bestaande domeinnaam op te vragen is het centrale register, de zogenaamde WHOIS. a. Voor Belgische domeinnamen is dat www.dns.be. b. Voor internationale domeinnamen kan dat o.a. via Internic: http://www.internic.net/whois.html 2. De tweede stap is het evalueren van de indexatie van het domein in zoekmotoren zoals Google en Altavista. a. Geef het domein in in de zoekbox van Google (www.google.com) b. Indien de website tijdelijk onbereikbaar is kan u de cache copy van Google van de pagina opvragen c. Google kan ook vertellen welke websites een link hebben naar de site, een duidelijke indicatie van de popularieit van de site d. En welke pagina’s van de website in de database van Google geïndexeerd zijn. 3. De gespecialiseerde zoekmotor Alexa (www.alexa.com) geeft nog wat meer achtergrond informatie over de website en probeert o.a. een gok te doen naar het aantal bezoekers dat de site dagelijks ontvangt. Deze cijfers zijn natuurlijk slechts indicatief. 4. Indien de website gebruik maakt van een gratis abonnement op een statistiekensysteem (zoals bvb Nedstat Basic) dan vindt u op de site vaak een icoontje waarop u kan klikken. Er verschijnt dan een pagina met bezoekersgegevens van de website. 5. Netcraft (http://uptime.netcraft.com/) kan u een overzicht geven van de webserver waarop de site draait en eventueel ook een korte historiek van de verschillende servers waarop de site in het verleden gehost was. 6. Tenslotte kan u via Archive.org ook nog oudere versies van de website opvragen.

Google kan meer informatie over een website voorzien

Pagina 21/89



Alexa doet een gok naar het aantal bezoekers op een website.

Het internet archive kan oudere versies van een website opvissen.

Pagina 22/89



Meer informatie http://www.dns.be beheer van .be domeinnamen http://www.domainethics.be code of conduct van de Belgische DNS agenten http://www.tarieven.be prijsvergelijking van verschillende DNS agenten in België http://www.register.com registratie van meer dan 40 internationale top-levels http://www.domeindokter.be controleert de goede werking van de verschillende aspecten van een domeinnaam http://www.iana.org/cctld/cctld-whois.htm overzicht van alle internationale top-levels http://www.ideabox.be/webdesign/broken_links.html informatie over het instellen van een custom 404 pagina op verschillende soorten servers http://www.alexa.com deze zoekmotor voorziet achtergrondinformatie bij een domeinnaam http://www.sedo.us/ marktplaats voor domeinnamen http://news.yahoo.com/fc?tmpl=fc&cid=34&in=tech&cat=domain_names_and_re gistration nieuws over domeinnamen en registraties

Pagina 23/89



HTML Inleiding HTML (Hyper Text Markup Language) vormt de basistaal waarin webpagina’s worden opgemaakt. In essentie geeft HTML de webbuilder een set van codes die hem toelaten de informatie die op een webpagina hoort te staan te omschrijven. Op basis van deze omschrijving zal de webbroser van de client in staat zijn de informatie op de pagina correct te visualiseren.

Standaarden De exacte specificaties van de HTML taal worden bewaakt door een onafhankelijke organisatie W3C. In principe is het dan ook alleen deze organsiatie die, in overleg met de aangesloten bedrijven en adviseurs, wijzigingen aan de taal kan aanbrengen. Momenteel is de laatste versie van HTML de versie 4.1. De specificaties zijn terug te vinden op http://www.w3.org/MarkUp/. W3C staat overigens nog in voor de ontwikkeling van verschillende andere standaarden waarop het web gebaseerd is. In het verleden was het echter de gewoonte dat software bedrijven die webbrowsers maken hun eigen toevoeging aan de HTML code maaken en die incorporeerden in hun eigen webbrosers. Vandaag drukken de meeste organisaties opnieuw op het belang dat alle webeditors HTML code genereren die perfect aansluiten bij de officiële W3C specificaties. Via de W3C validator (http://validator.w3.org/) kan u eenvoudig een bestaande webpagina online laten valideren op het correcte gebruik van de HTML specificaties.

Pagina 24/89



Basisbeginselen van HTML HTML codes worden tussen de tekst van de webpagina geplaatst en samen met deze tekst vervat in .html of .htm bestanden. Voorbeelden: • • •

Deze tekst is vet
Dit is een paragraaf
<STRONG>Deze tekst is extra belangrijk

In sommige gevallen hebben HTML tags ook attributen. Hiermee worden de eigenschappen van de HTML tag verfijnt. Voorbeelden: • •

Deze paragraaf is links uitgelijnd

Deze paragreef is rechts uitgelijnd

Binnen één HTML tag kunnen andere tags worden gebruikt. We spreken dan van het “nesten” van HTML tags. Voorbeeld:
In deze paragraag is dit woord vet gedrukt

Structuur van een HTML pagina Een HTML bestand heeft meestal min of meer dezelfde basisstructuur: <TITLE>Titel van de pagina Inhoud van de pagina • • •

De tags omvatten de volledige pagina De tags bevatten meta informatie over de pagina die niet op de pagina zelf wordt getoond De tags omvatten de inhoud van de pagina

Pagina 25/89



Structurele opmaak Bij de uitbouw van de HTML specificaties werden steeds meer HTML tags toegevoegd die de webbrowser niet alleen informatie geven over het soort gegevens (de titel, een tussentitel, ...) maar ook over hoe deze zaken exact op het scherm moeten worden weergegeven (formaat, lettertype, ...) Tot grote frustratie van vele webmasters gaan verschillende webbrosers op verschillende platformen echter steeds anders om met deze richtlijnen. Vandaag wordt vooral geprobeerd om enkel “structurele opmaak” mee te geven aan de webpagina via HTML tag. Dit wil zeggen dat de tags alleen maar informatie geven over het soort data: titel, tussentitel, citaat, afbeeldingen. De informatie over de weergave van deze elementen, bvb in welk lettertype te tussentitels worden worden weergegeven, wordt opgeslagen in een Style Sheet (zie volgende hoofdstuk). Op die manier kan de weergave van de webpagina’s gemakkelijker worden aangepast.

Meer informatie Webmonkey Deze Engelstalige website is een belangrijke informatiebron voor professionele webmasters. verschillende technologieën komen er wekelijks aan bod. http://www.webmonkey.com HTML op het Net Deze Nederlandstalige site bevat een zeer duidelijk gestructureerd overzicht van alle bestaande HTML codes, hun attributen, en extra's. http://html.op-het.net W3schools Deze Engelstalige website bestaat uit tientallen "tutorials" waarin je kennis maakt met nieuwe technieken en technologieën. http://www.W3schools.com/

Pagina 26/89



Cascading Style Sheets (CSS) 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 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 webbrowser (Netscape, Internet Explorer, Opera), verschillende platformen (Windows, MacOS, Linux) en zelfs verschillende toestellen (PC, NetBox, WAP GSM, PDA ...) een verschillend CSSbestand 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 tag van het HTML document te schrijven. De stijlen zijn dan binnen de volledige webpagina beschikbaar.

Pagina 27/89



Voorbeeld: CSS tags in de tag van een HTML document: Untitled Document <meta http-equiv="Content-Type" content="text/html; charset=iso-88591"> <style type="text/css"> 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 < 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 teleinformatie wordt weggeschreven.

Pagina 28/89



Twee soorten tags Er zijn twee manieren waarop we stijlinformatie aan een webpagina kunnen toevoegen: • •

Door het herdefinieren van bestaande HTML-tags Door het aanmaken van nieuwe style-classes

Herdefinieren van bestaande HTML-tags Traditionele HTML-tags zeggen vrij weinig over de manier waarop informatie op het scherm moet worden weergegeven. De tag
bijvoorbeeld zegt dat de inbegrepen tekst een Hoofding 1 is. Die is in principe groter dan een
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
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 -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
-tag: h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; text-decoration: underline; }

Pagina 29/89



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 “grote_titel”) 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 -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; }

Pagina 30/89



Programma’s om CSS te schrijven De meeste grote webeditors (Dreamweaver, Golive, ...) zijn in staat om CSS code toe te voegen aan de HTML bestanden. In sommige gevallen kan het echter nuttig zijn om een specifieke CSS editor te gebruiken om meer geavanceerde CSS codes manueel te kunnen implementeren. Een krachtige CSS editor die zowel voor Windows als voor MacOS beschikbaar is is Style Master (http://www.westciv.com/style_master/)

Pagina 31/89



CSS2 en het box-model CSS2 CSS2, een nieuwe generatie van de CSS specificaties, geeft webmasters een nog verder doorgedreven controle over de weergave van de HTML pagina. De bedoeling is om met CSS2 enkel zuiveren structurele opmaak in HTML code te schrijven en alle informatie over de visuele weergave van de webpagina op te slaan in een apart CSS bestand. Zo is het niet alleen mogelijk om verschillende surfers een andere style sheet te geven (bvb voor slechtzienden) maar ook een andere weergave te selecteren wanneer de webpagina via een ander medium (bvb een PDA, touchscreen, dataprojector, ...) wordt bekeken. Ook het opmaken van printvriendelijke pagina’s kan nu eenvoudig door een extra style sheet ter beschikking te stellen. Het box-model Om een HTML pagina volledig opmaak-onafhakelijk te kunnen schrijven moeten de verschillende onderdelen van de pagina zoals menu, hoofding, tekstblokken, ... in zogenaamde “boxen” worden gestoken. We kunnen daarvoor de
tag gebruiken.

Titel van de

menu item
menu item
menu item

pagina
1
2
3

Met de hulp van CSS classes kan elke box dan zijn eigen locatie en zijn eigen afmetingen krijgen.

Pagina 32/89



Het CSS box-model Er is een eenvoudig demo van dit model te vinden op: http://www.redmelon.net/tstme/box_model/

Meer informatie http://www.w3.org/Style/CSS/ http://directory.google.com/Top/Computers/Programming/Internet/CSS/ http://jigsaw.w3.org/css-validator/ http://www.htmlhelp.com/reference/css/

Pagina 33/89



Dreamweaver Inleiding Macromedia Dreamweaver is zonder twijfel de meest professionele webeditor op dit moment. In de markt van de huis-tuin-en-keuken webbouwers wordt Dreamweaver alleen naar de kroon gestoken door Frontpage van Microsoft. In de professionele markt komt alleen Golive van Adobe in de buurt. Dreamweaver is een WYSIWYG editor die meteen op het scherm de HTML pagina visualiseerd. Daarnaast is het echter steeds mogelijk om de wisselen naar Code View om de naakte HTML code te bekijken en te bewerken. Dreamweaver beschikt over een hele hoop ingebouwde functies om zowel een statische als een dynamische website te onderhouden. Het programma integreert ook naadloos met de andere webdesign programma’s van Macromedia waaronder Fireworks (voor afbeeldinge) en Flash (voor animaties). Er is een uitgeberid online support community voor Dreamweaver en ook de website van Macroemdia zelf bevat een hele hoop tips en tutorials.

Een nieuw project opzetten Inleiding U kan met Dreamweaver verschillende websites tegelijk beheren. Binnen Dreamweaver heten deze verschillende projecten Sites. Het is belangrijk dat u elke nieuwe site een eigen folder op de harde schijf van uw computer geeft. Binnen deze folder zal Dreamweaver dan alle relevante bestanden opslaan. Hoe een nieuw project opstarten in Dreamweaver Om een nieuw project op te starten in Dreamweaver kiest u in het menu Site voor New Site. Er verschijnt een venster waarin u de verschillende eigenschappen van de nieuwe site kan configureren. Geef het project een unieke naam en een Local Root Folder. Dat is de map op uw eigen harde schijf waarbinnen u alle bestanden (html paginas, afbeeldingen, downloads, ...) gaat opslaan. Het is ook mogelijk om een netwerk-locatie als local root folder te selecteren. In dat geval kan u met meerdere webmasters aan de website werken. Dreamweaver voorziet een “check-in / check-out” feature dat ervoor zorgt dat niet kan werken aan een bestand dat net door een andere webmasters wordt aangepast. Optioneel kan u ook de Remote Info aanvullen. Op basis van deze gegevens is Dreamweaver dan in staat uw website ook online te publiceren. Het publiceren kan o.a. verlopen via FTP, webfolders of via een fileserver. De default image folder is de map waarin u alle beelden van uw project gaat opslaan. Pagina 34/89



Ontwikkelt u een dynamische website die gebruik zal maken van back-end scripting en/of een database. Dan is het ook nodig om een “testing server” te definiëren. Dat is de server waarop u de scripts kan testen. Bij het previewen van de webpagina’s zal Dreamweaver de scripts eerst naar deze server copyeren om te correct te kunnen uitvoeren. Let er steeds op dat u eerst via het menu Site en dan Open Site het juiste project selecteert waaraan u gaat werken. Zorg dat elk project een eigen local root folder heeft en dat alle files die deel uit maken van de site (HTML pagina’s, beelden, downloads, scripts, ...) zich binnen deze local root folder bevinden.

Folderstructuur Inleiding Een Dreamweaver site bestaat uit, bijna per definitie, een hele hoop html, gif en jpeg bestanden. Het is dan ook zeer belangrijk om van bij de start van het project een goede folderstructuur uit te bouwen die het mogelijk maakt om, ook wanneer de website snel groeit, eenvoudig bestanden terug te vinden. Templates en style sheets Bij het aanmaken van templates zal Dreamweaver automatisch een folder /Templates/ aanmaken en daarin alle .dwt bestanden opslaan. Strikt genomen moet deze folder niet mee naar de server gekopieerd worden om de website te publiceren. Maar het kan nooit kwaad om een reservekopie van de templates op de server te plaatsen. Indien de website gebruik maakt van meerdere style sheets, bvb voor verschillende webbrowsers, is het geen slecht idee om deze .css bestanden in een aparte folder /Styles/ te gooien. Afbeeldingen en downloads Alle afbeeldingen worden best opgeslagen in een aparte folder /Images/. Bij het opzetten van de site is er een mogelijkheid om een "default images folder" vast te leggen. Dreamweaver zal voortaan alle gebruikte afbeeldingen in deze folder opslaan. Indien er veel beelden zijn kan het handig zijn om hier nog subfolders te voorzien. Alle andere niet-HTML bestanden zoals bvb downloads in PDF, PPT, MS Word, MP3, ... kunnen opnieuw in een aparte folder /Downloads/ worden weggeschreven. Folders vs. URL Het grote voordeel van een statische HTML site is dat de foldernamen eveneens zichtbaar worden in de adressenblak van de webbrowser van de bezoeker van de site. Indien de website dus uit verschillende hoofdstukken of rubrieken bestaat kan het nuttig zijn deze in aparte folders op te slaan. De URL van een pagina in Pagina 35/89



de adressenbalk van de webbrower voorziet zo de bezoeker ook informatie over zijn locatie in de website. (zie ook breadcrumbs) Duidelijke foldernamen die de inhoud van de website omschrijven, kunnen ook een gunstig effect hebben op de search engine plaatsing van de website. Vreemde tekens Net zoals bij de bestandsnamen van de HTML pagina's is het ook voor folders een goed idee om deze zaken te vermijden: • • •

spaties in de foldernamen, sommige webbrowsers breken een URM immers af aan de eerste spatie die ze tegen komen hoofd-en kleine letters door elkaar gebruiken, sommige webserver maken geen onderscheid, anderen wel. vreemde tekens zoals é, è, à, ë, ...

Meertalige website Voor een meertalige website is het handig om onder de root een folder te maken voor elke taal: /NL/, /FR/, /EN/, ... Hieronder kunnen dan opnieuw subfolders voor de verschillende hoofdstukken van de website worden aangemaakt. Geef de subfolders in de verschillende taalversies bij voorkeur dezelfde (bvb engelstalige) naam zodat de structuur van de verschillende taalversies van de website steeds hetzelfde blijft. Gebruik voor de foldernamen van de talen de officiële ISO code van die taal. Default pagina's Elke webserver heeft default pagina's. Dat is de webpagina die wordt getoond wanneer de webbrowser van de bezoeker van de site alleen maar een foldernaam aanspreekt (bvb http://www.ideabox.be/webdesign/) zonder de bestandsnaam van een HTML document op te geven. De naam van de default pagina hangt af van server tot server. Meestal is het een van de volgende: • • • •

default.html of .htm home.html of .htm index.html of .htm welcome.html of .htm

Zorg ervoor dat er in elke folder een defaultpagina aanwezig is die als het ware de homepage van die bewuste rubriek van de website is. Indien u toegang hebt tot de configuratie van de webserver kan u de naam van de defaultpagina zelf aanpassen. Meer informatie

Pagina 36/89



http://www.macromedia.com/support/dreamweaver/ts/documents/site_directory. htm - Building a folder structure - Macromedia http://www.upstate.edu/courseware/dw_workshop/planning/planning_pg3.shtml - Planning a website: File Structure

Templates Inleiding Met templates kan u sjablonen ontwikkelen die de basis vormen voor elke webpagina binnen de site. Daarvoor wordt de inhoud van elke pagina opgedeeld in Editable regions en Non-editable regions. De eerste bevatten inhoud die op elke pagina anders is zoals tekst en links. De tweede bevatten inhoud die voor elke pagina hetzelfde is zoals hoofding, footer, ... Binnen één website kan u verschillende templates hanteren. Wanneer u een template aanpast zal Dreamweaver automatisch alle pagina's aanpassen die gebaseerd zijn op dit template. Hoe templates gebruiken in Dreamweaver Het is belangrijk dat u templates aanmaakt bij het begin van het project, nog voor u de eerste echte pagina maakt. Maak een HTML pagina aan en kies in het menu File voor Save as template. De pagina wordt nu opgeslagen in een speciale folder /Templates/ binnen de Local Root Folder en krijgt de extensie .dwt. Default is de hele pagina non-editable. Selecteer nu een gedeelte van de pagina dat editable moet zijn en kies in het menu Insert voor Template Objects en dan voor Editable Region. Geef de regio een naam en sla het template opnieuw op. Om nu een pagina aan te maken op basis van het template kiest u in het menu File voor New en dan voor het tabblad Templates. U kan op deze nieuwe pagina enkel aanpassingen maken binnen de in het template vastgelegde editable regions. Geavanceerde templates In Dreamweaver MX werden verschillende nieuwe functionaliteiten aan templates toegevoegd. Zo is het bijvoorbeeld mogelijk om Repeating Regions en Optional Regions toe te voegen. Er is ook een beperkte script-taal ter beschikking om een bepaalde intelligentie in de tempaltes in te bouwen. Meer daarover kan u vinden in het boek Dreamweaver MX templates.

Pagina 37/89



Templates downloaden Bent u niet meteen grafische aangelegd, of hebt u gewoonweg niet de tijd om eigen templates te ontwikkelen, dan kan u bestaande templates, al dan niet gratis, van het internet downloaden en gebruiken. http://www.templatemonster.com http://www.sitebeans.com http://www.elated.com/pagekits http://www.freelayouts.com http://www.boxedart.com Links http://www.dreamweavermx-templates.com/tutorials/index.cfm

Layout view Inleiding Tabellen worden op webpagina's zeer intensief gebruikt om de pagina layout vast te leggen en de verschillende afbeeldingen en textblokken ten opzichte van elkaar te positioneren. Dreamweaver beschikt over een handig instrument, Layout View, om de pagina opmaak aan te maken en automatisch te laten converteren naar een complexe tabel. De recente opkomst van CSS2 als layout technologie heeft ervoor gezorgd dat steeds meer websites tabellen verlaten als manier om layout te geven aan pagina’s. Als u uw website echter ook voor oudere webbrowser mooi toegankelijk wil maken kan u echter moeilijk om layouttabellen heen. Hoe Layout View gebruiken in Dreamweaver In het tabblad Layout kan u wisselen tussen Standard View en Layout View. Eenmaal binnen layout viaw kan u gebruik maken van twee nieuwe elementen: de layout tabel en de layout cel. Teken eerst een layout tabel over de hele pagina. Deze tabel heeft een groene achtergrond. Teken nu meerdere layout cellen binnen de tabel. Binnen de tabel kan u de layout cellen pixel per pixel positioneren en groter of kleiner maken. Gebruik de layout cellen om de verschillende logische blokken binnen de pagina aan te duiden waar straks afbeeldingen en textblokken gaan verschijnen. Layout cellen kunnen elkaar niet overlappen. Wanneer u nu van Layout View terug keert naar Standard View zal Dreamweaver automatisch de getekende layout omzetten naar een complexe tabel. U kan nu binnen de cellen van deze tabel uw afbeeldingen en textblokken plaatsen. Pagina 38/89



Cascading Style Sheets in Dreamweaver Inleiding Style sheets (CSS) zijn een extra set opmaak codes die, in combinatie met traditionele HTML codes, de webbuilder een veel grotere controle geven over de opmaak van tekst op de webpagina's. Bovendien laat CSS toe om, zelfs in statische webpagina's, opmaak en inhoud van de site verder van elkaar te scheiden. Hoe CSS gebruiken in Dreamweaver Begin steeds een style sheet te maken samen met het template van de site. Onder het menu-item Window staat de optie CSS Styles. Het CSS Styles venster opent. Onderaan dit venster staat een plus-teken om een nieuwe stijl toe te voegen. U kan een bestaande HTML tag herconfigureren, of u kan een custom style tag aanmaken. In dat laatste geval geeft u de tag een eigen naam. U kan de style informatie opslaan in het huidige bestand (This document only) of in een aparte .css file. In dat geval kan u de stijlinformatie meteen in verschillende webpagina’s gebruiken door de CSS file aan alle pagina’s te koppelen. Eenmaal de stijl tags aangemaakt kan u een stuk tekst, of een HTML tag, op de pagina selecteren en in het venster CSS Styles op de stijl klikken om deze stijl op de geselecteerde tekst toe te passen. U kan op elk moment de eigenschappen van een style class aanpassen. Alle stukken tekst binnen uw website die gebaseerd zijn op deze classe zullen dan automatisch veranderen. CSS in Dreamweaver MX 2004 De meest recente versie van Dreamweaver maakt zeer intensief gebruik van CSS om de opmaak van pagina’s aan te sturen. Er is ook de mogelijkheid om CSS2 te gebruiken om de volledige layout van de pagina in CSS vast te leggen, dus zonder gebruik te maken van tabellen. Voorbeelden De website CSS Zen Garden toont verschillende pagina's die eenzelfde HTML document volledig anders inkleden door gebruik te maken van een alternatieve CSS files. http://www.csszengarden.com/ Links http://www.w3.org/Style/CSS/ http://directory.google.com/Top/Computers/Programming/Internet/CSS/ http://jigsaw.w3.org/css-validator/ Pagina 39/89



http://www.htmlhelp.com/reference/css/ http://www.htmlcenter.com/tutorials/index.cfm/css/ http://www.delijst.net/delijst/Artikelen/CSS/ http://www.christopherschmitt.com/books/cssbook/ http://devedge.netscape.com/central/css/

Gebruik van afbeeldingen in Dreamweaver Inleiding Afbeeldingen vormen een belangrijk onderdeel van elke webpagina. Een incorrect gebruik van afbeeldingen kan veel schade berokkenen aan de website. Hoe afbeeldingen gebruiken binnen Dreamweaver Afbeeldingen kunnen op verschillende plaatsen binnen een webpagina worden gebruikt. •

Als achtergrond: Kies in het menu Modify voor Page Properties. Daar kan u een afbeelding als achtergrond van de pagina instellen. De hele achtergrond van de pagina wordt nu betegeld met de afbeelding.

•

Als achtergrond van een tabel of cel: selecteer de tabel of cel. U kan u een achtergrondafbeelding instellen in het venster Properties.

•

Op de pagina: U kan natuurlijk ook een afbeelding gewoon op de pagina plaatsen. Zorg ervoor dat het GIF of JPEG bestand zich binnen de Local Root Folder van de site bevindt. Maak eventueel een aparte map /images/.

Vergroot of verklein een afbeelding nooit in Dreamweaver. Ga daarvoor terug naar een grafisch programma en sla de aangepaste afbeelding opnieuw op. Via het venster Properties kan u verschillende eigenschappen van een afbeelding aanpassen zoals de rand, de link, de ruimte rond het beeld, en de uitlijning. Zorg ervoor dat u minimaal elk beeld een ALT-tag mee geeft. Dat is een alternatieve omschrijving van het beeld die zichtbaar wordt gemaakt wanneer het beeld om een of andere reden niet toonbaar is. Door gebruik te maken van Image Maps (Hotspots) kan u aan één afbeelding verschillende links koppelen. In functie van waar op het beeld de surfer klikt zal hij dan naar een andere webpagina gaan.

Layers Inleiding Layers zijn dynamische HTML objecten die het mogelijk maken verschillende stukken HTML code exact te positioneren op de webpagina, zelfs over elkaar te Pagina 40/89



laten bewegen, en evenetueel met behulp van behaviors te laten verschijnen en verdwijnen. Hoe Layers gebruiken in Dreamweaver Layers kan u in Standard View gewoon tekenen op de webpagina. De knop Draw Layer bevindt zich in het tabblad Common. Elke getekende layer kan in het Properties venster een unieke naam krijgen om er later naar de verwijzen. Elke layer wordt ook gevisualiseerd met een klein geel icoontje links bovenaan de webpagina. Layers kunnen (gedeeltelijk) over elkaar liggen. Om te bepalen welke layer bovenaan hoort, past u in het Properties venster voor elke layer de eigenschap Zindex aan. Normaal gezien worden layers gepositioneerd t.o.v. de linker boven hoek van de webpagina. Door het gele icoontje van een layer echter in een andere layer te slepen zal de verplaatste layer zich relatief positioneren t.o.v. de positie van de moeder-layer.

Pagina 41/89



Behaviors Inleiding Behaviors vormen de kern van Dynamische HTML. Deze combinatie van Javascript, CSS en Layers laat webbuilders toe de webpagina een gedrag mee te geven. Hoe behaviors gebruiken in Dreamweaver Behaviors bestaan steeds uit een Event en een Action. Het Event is de oorzaak, iets dat de bezoeker van de pagina moet doen opdat het gedrag zou voorkomen. De Action is het gevolg, de reactie van de pagina op het Event. Voorbeeld: Event Inladen van de pagina Gebruik klikt op een link Gebruiker beweegt met de muis over een knop Verlaten van de pagina

Action Open een pop-up venster Start een animatie Toon layer met extra informatie over deze knop Speel een geluid

Om een behavior aan een pagina toe te voegen kiest u in het menu Window voor Behaviors. Selecteer nu een HTML code op de pagina waaraan u het behavior wenst te koppelen. Klik in het venster Behaviors op het plus-teken om een behavior toe te voegen. Selecteer de actie die u wenst. Configureer de eigenschappen van deze actie in het volgende venster. Selecteer nu een Event dat de actie in gang moet zetten. Het aantal beschikbare events is afhankelijk van de generatie webbrowsers waarvoor u uw pagina optimaliseert. Om dit aan te passen kiest u in het menu met de Events onderaan voor Show Events For... Links http://www.smartwebby.com/web_site_design/dreamweaver_behaviors.asp

Pagina 42/89



Assets Inleiding Binnen het venster Assets verzamelt Dreamweaver op een overzichtelijke manier de verschillende elementen zoals afbeeldingen, links, kleuren, animaties, stukken HTML code, die binnen het project worden gebruikt. Zo kan u op een eenvoudige manier elementen in verschillende pagina's hergebruiken om de consistentie binnen de website te bewaren. Hoe assets gebruiken binnen Dreamweaver Kies in het menu Windows voor Assets om het venster te laten verschijnen. Aan de hand van de icoontjes links in het venster Assets kan u door de verschillende onderdelen lopen: afbeeldingen, kleuren, links, animaties, video, scripts, templates, HTML-codes. Een onderdeel van de assete is de Library. Hier kunnen stukken HTML code die waak in de website voorkomen centraal worden opgeslagen en beheerd.

Dreamweaver extensions Wat zijn extensions ? Dreamweaver extensions zijn, zoals de naam het al aangeeft, extra uitbreidingen die u kan downloaden en installeren. Ze voegen kleine functionaliteiten aan de webeditor toe. Extensions kunnen verschillende functies bevatten zoals speciale HTML codes, speciale bewerkingen op bestaande HTML code of bijvoorbeeld nieuwe Javascripts die extra functionaliteiten toevoegen. Waar kan ik extensions vinden ? Veel extensions kan je downloaden via de website van Macromedia zelf: in de Dreamweaver Exchange. Maar er zijn ook verschillende andere websites waar u, al dan niet na betaling, extensions kan downloaden. Hoe zelf extensions aanmaken Wie dat wenst, en kan, heeft de mogelijkheid om zelf extensions aan te maken en te verdelen via het internet. Deze mogelijkheid kan bijvoorbeeld handig zijn wanneer u met meerder webmasters aan één groot project werkt en gezamelijk functionaliteiten wil gebruiken. De website van Macromedia vertelt er alles over. Pagina 43/89



Macromedia Contribute Inleiding Begin 2003 lanceerde Macromedia het product Contribute, een “light” versie van Dreamweaver. In combinatie met Dreamweaver is Contribute een eenvoudig maar krachtig instrument om websites te actualiseren. Hoe gaat het in zijn werk ? Een webmaster/webbuider bouwt een website in Dreamweaver en gebruikt daarbij uiteraard Templates, Library elementen en Style Sheets. Wanneer de site klaar is worden alle bestanden, inclusief de mappen Templates en Library, opgeladen naar de webserver. Mist de juiste loginnaam en paswoord kunnen Macromedia Contribute gebruikers nu de website aanpassen. Ze surfen daarvoor met Contribute naar de juiste pagina en klikken op de toets “Edit Page”. Contribute zal de webpagina, inclusief de template informatie en style sheet, binnen halen. De gebruiker kan nu aanpassingen maken en de pagina opnieuw publiceren. Via de toets “New Page” kan een nieuwe pagina worden aangemaakt. Daarvoor zal Contribute alle beschikbare templates van de website downloaden en aanbieden aan de gebruiker.

Pagina 44/89



screenshot Macromedia Contribute Teamwork Contribute bevat ook verschillende instrumenten om met meerder personen aan één website te werken. Eén gebruiker kan immers als administrator toegangsrechten toekennen aan anderen. Meer informatie http://www.macromedia.com/support/contribute/ Macromedia Contribute Support Center http://www.pcmag.com/article2/0,4149,716825,00.asp Contribute review door PC magazine http://www.macromedia.com/devnet/contribute/articles/contribute_client.html Macromedia DevNet: Contribute and your Client http://www.dreamweavermx-templates.com/tutorials/tutworkflow.cfm Contribute/Dreamweaver Workflow

Pagina 45/89



Hosting Inleiding Het kiezen van een goede oplossing voor het hosten van een website maakt deel uit van de creatie van een succesvolle internetaanwezigheid. Er zijn verschillende oplossingen op de markt beschikbaar en er zijn heel wat zaken die in overweging moeten worden genomen bij het kiezen van een leverancier van webhosting diensten. De verschillende op de markt aangeboden oplossingen vallen uit elkaar in een aantal belangrijke categorieën: • • • •

Shared hosting (gedeelde hosting) Virtual private server (eigen virtuele server) Dedicated hosting (eigen server) Housing of co-location (onderbrengen)

Shared hosting Via deze oplossing delen verschillende websites eenzelfde webserver. Ze krijgen elk een eigen deeltje van de harde schijf toegewezen waarbinnen de verschillende bestanden worden opgeslagen. Via een systeem van “virtual sites” is de webserver in staat om een bezoeker de juiste webpagina’s voor te schotelen van de site die hij opvraagt. Voordelen van Shared hosting •

Het grootste voordeel van shared hosting is de prijs. Verschillende klanten dekken immers de kost van de webserver en de connectie naar het internet.

•

Het technische beheer van de server wordt volledig door de hosting aanbieder gedaan.

Nadelen van Shared hosting •

Het nadeel is dat het aantal aangeboden opties zoals databases, scripttalen, of een beveiligde omgeving voor de verwerking van credit card nummers, vaak beperkt is.

•

Daarnaast kunnen bij slecht beheerde shared servers de activiteiten van de verschillende klanten invloed hebben op elkaar. Als bijvoorbeeld een andere klant van de hosting provider, die ook op uw server zit, met een script de server op de knieën krijgt dan zal ook uw website onbereikbaar zijn.

Shared hosting is ideaal voor kleinere websites die vooral uit statische HTML pagina’s bestaan. De meeste websites worden onder deze formule op het web gezet. De prijzen voor sharded hosting (zonder database) schommelen in Europa rond 20€ per maand afhankelijk van de exacte specificaties (e-mail, andere extra’s, aantal MB, trafiek ...) Pagina 46/89



Virtual private server Ook met deze formule worden verschillende klanten op een machine samen gebracht. Ze hebben echter toegang tot een webbased “control panel” dat hen toelaat hun deel van de webserver in hoge mate zelf te configureren. Denken we bijvoorbeeld aan het activeren van Frontpage-extensies, het aanmaken van email boxen of het raadplegen van serverstatistieken. Virtual private server is een ideale oplossing voor kleinere websites met specifieke eisen. Ook minder technisch aangelegde webbuilders kunnen op deze manier meer controle uitoefenen op de omgeving waarin hun website terecht komt. Een virtual private server laat u meestal ook toe om meerdere websites samen te hosten. Voordelen van een virtual private server • • •

Meer controle over de hostingomgeving Mogelijkheid om meerdere sites te hosten Geen technische kennis noodzakelijk

Nadelen van een virtual private server •

Nog steeds afhankelijk van eventuele performance problemen van andere klanten die op dezelfde server zitten

In de VS beginnen prijzen voor virtual private servers al vanaf 50$ per maand.

Pagina 47/89



screenshot van een controlpanel

Pagina 48/89



Dedicated hosting Bij dedicated hosting huurt de klant een webserver van het hostingbedrijf. Deze server staat exclusief ter beschikking van de klant. Het hostingbedrijf zorgt, afhankelijk van het contract, voor een minimale of uitgebreidde support op het vlak van hardware, besturingssysteem en/of software. Het hosting bedrijf zal vaak een beperkt aantal eigen configuraties voor dedicated hosting voorstellen, waaruit de klant dan kan kiezen. Daarna heeft de klant volledige controle over deze machine voor installatie van extra software (bvb databases of scripttalen) en één of meerdere websites. Via een remote oplossing (bvb Terminal Services in het geval van een dedicated Windows Server; of SSH voor Linux servers) heeft de klant toegang tot zijn machine voor beheer. Een degelijke kennis van serverbeheer is vereist om voor deze oplossing te kiezen. Dedicated hosting wordt vaak gekozen voor websites met zeer veel bezoekers en of zeer specifieke eisen. Professionele webbuilders hebben vaak een eigen dedicated server waarop ze de websites van verschillende klanten kwijt kunnen. Het is mogelijk om meer dan 200 websites op een dedicated server te zetten. Voordelen van dedicated hosting •

Het grootste voordeel van dedicated hosting is dat de klant een volledige machine voor eigen gebruik heeft. Hij heeft dan ook de mogelijkheid om, via virtual servers, meerdere websites van op deze machine te bedienen. Ook het aanbieden van e-mail en andere diensten is, mits installatie van d e j u i s t e s o f t w a r e , m o g e l i j k .

•

Men is volledig onafhankelijk van andere klanten van de hosting provider

Nadelen van dedicated hosting •

Technische kennis voor het beheer van de server is noodzakelijk

•

Kan duur zijn

Afhankelijk van het gekozen platform en het dataverkeer op de webserver beginnen de prijzen voor dedicated hosting rond 150€ per maand voor een Linux server. Managed hosting Managed hosting is een variatie op dedicated hosting waarbij de hosting provider instaat voor het technische beheer van de server (updates, patches, herstarten in geval van problemen, advies over optimalisatie van de server, ...) Vaak zal de provider enkel “managed hosting” aanbieden op de eigen configuraties en zeer restrictief zijn op de software die de klant mag installeren op de server. Bovendien is managed hosting vaak zeer duur.

Pagina 49/89



Co-location of housing Via deze oplossing voorziet de klant zijn eigen hardware die in het datacenter van de hosting provider wordt geplaatst. De provider voorziet alleen maar stroom en netwerkconnectie. De klant staat volledig in voor beheer van de hardware, besturingssysteem en software. In veel gevallen kan een apart support contract worden afgesloten bvb voor het herstarten van de server na een fatale crash. Via een speciale code kan de klant fysieke toegang krijgen tot het datacenter om de machine te onderhouden. Co-location is interessant wanneer u over eigen serverhardware beschikt en u zelf de volledige controle en verantwoordelijkheid wilt dragen. Deze oplossing wordt vooral gebruikt wanneer u zeer specifieke toepassingen wil gaan draaien zoals bvb een SMS gateway. Voordelen van co-location • •

Volledige eigen controle Fysieke toegang tot het datacenter mogelijk

Nadelen van co-location • •

Grote technische kennis noodzakelijk Klant draagt volledig eigen verantwoordelijkheid over de machine

De prijs voor co-location wordt bepaald door de ruimte die de hardware nodig heeft (meestal gerekend in standaard units) en het verbruik van de bandbreedte.

Pagina 50/89



Verschillende platformen In combinatie met een hostingplan dient vaak ook een platform te worden gekozen waarop de website zal worden gehost. Niet alle providers bieden alle platformen aan. De belangrijkste mogelijkheden zijn: • •

Windows Linux/unix

Windows servers staan over het algemeen bekend voor: • • •

Eenvoudig beheer (in het geval van dedicated hosting of co-location) Duurder wegens zware licentiekosten voor de software Meer beheerstaken voor updating en patching

Linux servers worden over het algemeen gezien als: • • •

Iets moeilijker in beheer wegens het gebrek aan een grafische interface Lichter voor de hardware en minder duur wegens een gratis of goedkoop besturingssysteem Iets minder last van beveiligingsproblemen

De keuze van een hosting platform is afhankelijk van de toepassingen die u wil gaan gebruiken. Om bijvoorbeeld een MS Access database toegankelijk te maken via een website is Windows bijna onontkoombaar. De platformkeuze wordt pas echt belangrijk bij dedicated hosting of co-location. In het geval van shared hosting of een virtual private server komt u zelf niet in contact met het besturingssysteem van de server zelf. Een goedkoop platform dat recent opgang kent onder kleine webbuilders is de Cobalt Raq. Dit kleine toestel bevat een aangepaste versie van Linux en is volledig afgesteld op eenvoudige webhosting. De administratie gebeurt via een webbased interface die toegankelijk is via een webbrowser.

Factoren die de keuze beïnvloeden Er zijn verschillende factoren die de keuze van een hosting provider beïnvloeden: • • • • • • • •

Platform Netwerk connectie Extra diensten en uitbreidingen Support en SLA Dataverkeer Betrouwbaarheid Fysieke locatie Prijs

Platform Voor shared hosting paketten kan u niet altijd het platform kiezen. Is dat wel het geval dan hangt dat vaak nauw samen met de extra opties die op elk platform worden aangeboden zoals de scripttaal PHP op Linux of ASP op Windows. Pagina 51/89



Voor dedicated hosting hangt het platform vaak af van uw eigen technische kennis en de omgeving waarbinnen uw websites zelf werden ontwikkeld. Gaat u voornamelijk statische websites voor kleine klanten hosten dan is een Cobalt Raq het overwegen waard. Netwerk connectie Elke hosting provider is op een of meerdere manieren verbonden met de rest van het internet. Hoe sneller de connectie van de provider hoe sneller uw eigen website toegankelijk zal zijn. Er zijn verschillende tools om de snelheid van het netwerk te testen. Gebruik daarvoor de eigen website van het hosting bedrijf als referentie en test op verschillende uren van de dag (voor, na en tijdens de kantooruren) en dagen van de week. De meeste hosting providers maken gebruik van peering akkoorden met verschillende andere ISP’s. Ze leggen dan snelle datalijnen tussen elkaars netwerken om de klanten onderling met elkaar te verbinden. In principe heeft een ISP met meer peering-akkoorden ook een sneller netwerk. http://www.dslreports.com/tools http://www.internettrafficreport.com/ Extra diensten en uitbreidingen Vooral bij shared hosting bent u gebonden aan de extra’s die het hostingbedrijf wil aanbieden: e-mail boxen, databases, scripttalen. Ook wanneer u deze zaken niet op korte termijn nodig heeft, kan het nuttig zijn de upgrade mogelijkheden en bijhorende prijzen te zoeken. Veel aangeboden opties zijn: • control panel voor beheer van de opties • email boxen met spam & virus bescherming • mogelijkheid om meerdere domeinen en sub-domeinen te koppelen • dagelijkse backup van uw data • bezoekersstatistieken • mogelijkheid voor scripttalen (PHP, ASP, .NET) en databases (MySQL, MS Access, ...) • activatie van frontpage extensies als u uw website met dit pakket bouwt Als dedicated hostingklant zijn extra’s zoals een firewall of een dagelijkse backup van alle bestanden op uw webserver naar een andere machine interessante opties die u onmiddellijk of later nodig kan hebben. Support en SLA Als uw website een kritisch onderdeel van uw onderneming is, is een degelijke support belangrijk. Vaak hebt u de mogelijkheid om naast de standaard support (bvb het herstarten van de webserver na een crash) extra support aan te kopen voor het besturingssysteem, applicaties of andere technische problemen. De snelheid waarmee men uw probleem kan oplossen is uiteraard van levensbelang. Zowat alle hosting providers werken met een ticketting systeem waarmee u online een supportaanvraag kan doorgeven. Er wordt dan exact gemeten hoe snel de provider op uw vragen kan antwoorden. Bewaar alle tickets goed. Ze kunnen u later helpen om eventuele slechts dienstverlening aan de kaak te stellen. Pagina 52/89



Vaak worden voorwaarden in een Service Level Agreement gegoten. Daarin verbindt de hosting partner zich ertoe de website bvb 99,8% van de tijd in de lucht te houden. Deze SLA’s worden belangrijker naarmate uw webapplicatie kritischer wordt. De ervaring leert echter dat SLA’s zeer relatief zijn en dat er altijd wel uitzonderingen zijn die niet door de SLA worden gedekt. Zo stellen de meeste hosting providers dat op voorhand aangekondigde downtime van de server geaccepteerd moet worden. Probeer via ervaringen van andere klanten een goed beeld te krijgen van de kwaliteit van de dienstverlening van de provider. Dataverkeer De belangrijkste kost van een hostingprovider is zijn dataverkeer. Dat is het aantal Gb gegevens dat bezoekers van uw website opvragen en dat dus via het netwerk van de hostingprovider wordt verzonden. De provider zal immers zijn netwerkleveranciers moeten betalen op basis van het aantal Gb verkeer dat wordt doorgegeven. In de telecom-wereld wordt wel eens gesproken van de “interconnectie tarieven”. Dat zijn de prijzen die telecom bedrijven elkaar aanrekenen om doorgegeven verkeer (digitale data of telefoongesprekken) af te handelen. In een standaard contract voor zowel shared als dedicated hosting wordt vaak een aantal Gb dataverkeer per maand voorzien. Wanneer uw website veel bezoekers trekt of grote downloads aanbiedt, kan u dataverkeer bijkopen of upgraden naar een duurder hostingplan. Het moeilijke is dat u bij het lanceren van een nieuwe website vaak niet weet hoeveel data u zal versluizen en dus hoe hoog uw hostingfactuur exact zal zijn. Kies daarom voor een flexiebel plan waar u eenvoudig kan upgraden. Meestal voorziet de hostingpartner een systeem waarlangs u het gebruikte dataverkeer continu in het oog kan houden. Grijp op tijd in wanneer het verkeer te sterk stijgt. Een beperking in het dataverkeer is een typische zaak die hosting providers in de “kleine lettertjes” zetten. Niet zelden is het bijkopen van dataverkeer zeer duur. Wees er dus zeker van dat u voor het afsluiten van een hosting contract hierover volledig bent geïnformeerd. Betrouwbaarheid In de relatief jonge internetsector is het belangrijk om een betrouwbare hosting partner te vinden die veel klanten heeft en waarvan u zeker bent dat hij nog een tijdje zal bestaan. U wilt immers niet terecht komen in een situatie waar het hosting bedrijf van de ene dag op de andere verdwijnt en zijn servers worden afgesloten. Voorzie eventueel een backup oplossing waarmee u uw website snel opnieuw in de lucht kan brengen. Zorg er in elk geval voor dat u zelf over een backup van uw volledige website inclusief database beschikt.

Pagina 53/89



Fysieke locatie Gezien het wereldwijde karakter van het internet is de fysieke locatie van uw webserver minder belangrijk. Het is mogelijk dat uw website op een server in de VS even snel, zo niet sneller, bereikbaar is dan in een Belgisch datacenter. Wenst u een nauw contact met het hosting bedrijf dan is het echter geen slecht idee om voor een Belgische of Europese oplossing te kiezen. U kan dan support krijgen in uw eigen taal en kan in uitzonderlijke situaties (bvb het duidelijk niet neleven van de SLA) eenvoudiger juridische stappen tegen de provider ondernemen. Prijs Prijs is een niet onbelangrijk deel van het verhaal. Webbuilders, die zelf vaak slechts reseller zijn van een ander hosting bedrijf, zijn vaak een dure oplossing. Niet oninteressant om te weten is dat de hosting prijzen in de UK en de US over het algemeen lager liggen dan in België. Laat kwaliteit en betrouwbaarheid echter steeds primeren in deze zeer competitieve sector.

Meer informatie http://www.rackspace.com - hosting provider in US en UK die o.a. dedicated servers onder het Linux en Windows platform aanbieden. Beschikt eveneens over een reseller-programma. http://www.hostbasket.com - Belgische hosting provider die zowel shared als dedicated oplossingen voorziet onder Windows en Linux. Beschikt eveneens over een reseller-programma. http://www.nomonthlyfees.com - US provider die enkel virtual private server oplossingen heeft onder Linux. Beschikt eveneens over een reseller-programma. http://servers.yahoo.com - Yahoo biedt hostingoplossingen aan op basis van Cobalt Raq. http://www.hostsearch.com - Hostsearch geeft toegang tot een database met technische informatie en prijzen van verschillende hosting providers. http://www.epinions.com/inet-Web_Hosting-All - reviews en ratings van webhosting providers.

Pagina 54/89



Usability 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.

Pagina 55/89



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

Pagina 56/89



Tijdens gebruikersonderzoek werden gebruikers gevraagd om voor een aantal objecten die courant op een website te vinden zijn de meest logisch plaats aan te geven. -

de terug naar de homepage knop: links bovenaan reclamebanners: bovenaan hoofdmenumenu: links shopping mandje: rechts bovenaan help-link: rechts bovenaan

locatie van de knop “terug naar de homepage”

locatie van de shopping basket

Meer informatie over dit onderzoek: Pagina 57/89



http://psychology.wichita.edu/surl/usabilitynews/62/web_object_international.ht m

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. Vermijd het gebruik van openklappende navigatiesystemen. Weinig van deze javascript gedreven oplossingen zijn echt handig in gebruik. Gebruikersonderzoek leert dat vooral minder ervaren surfers er moeite mee hebben. Navigatiesystemen die steunen op niet-standaard technologieën zoals Flash of Java applets zijn volledig uit den boze. Surfers die deze technologieën niet ondersteunen of bewust hebben afgezet in de instellingen van hun webbrowser kunnen nu helemaal niet meer door de site navigeren. Verbazingwekkend genoeg gebruiken lang niet alle surfers het aangeboden navigatiesysteem om zich een weg door de website te banen. Een deel gebruikt alleen de links in de content van de website. Zorg er m.a.w. voor dat er in de content ook voldoende links te vinden zijn om door de site te navigeren.

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. Een website die zich richt tot een ouder publiek mag zonder twijfel de letters 12 punten groot maken. Gebruikersonderzoek heeft uitgewezen dat gebruikers grotere letters en korte paragrafen sneller kunnen lezen. Bovendien is “lezen” niet helemaal het juiste woord in deze context. Gebruikers “scannen” een pagina waarbij ze opzoek gaan naar ankerpunten zoals titels, woorden in het vet, links (opvallend door hun blauwe kleur) en onderschriften bij foto’s. Leesbare teksten zijn dus kort en maken gebruik van duidelijke omschrijvende tussentitels. Er wordt ook veel gebruik gemaakt van bullet-lists om lange stukken doorlopende tekst te vermijden. De grootte van de tekst van de website wordt best in een CSS file opgeven in relatieve termen. Dit geeft de surfer de mogelijkheid om indien gewenst via de ingebouwde functies van zijn webbrowser de tekst groter te maken. Test deze optie. Sommige designs vallen volledig uit elkaar wanneer de tekst door de webbrowser groter wordt gemaakt. Pagina 58/89



Het weergeven van tekst als een beeld (GIF of JPEG) wordt vaak gedaan om meer controle te hebben over het lettertype en de weergave van de letters op het scherm. Het nadeel is dat deze stukken tekst niet vergroot kunnen worden en bovendien niet leesbaar zijn voor de crawler van een search engine of voor een surfers die hulpmiddelen zoals een brailleregel gebruikt. Sommige webbrowser beschikken over 2 knoppen om de tekst meteen groter en kleiner te maken. In de laatste versies van Internet Explorer werden deze knoppen echter verborgen in een submenu dat moeilijk bereikbaar is. Sommige websites (bvb http://www.wired.com/) kiezen er daarom voor om deze handige functie zelf aan te bieden. Via een klein Javascript worden dan alternatieve CSS files geladen die de teksten op de website groter weergeven. Meer informatie over het incorporeren van alternatieve style sheets: http://www.alistapart.com/articles/alternate/ Maximaliseer het kleurcontrast tussen de letters en de achtergrond. Ongeveer 8% van de mannen en 1% van de vrouwen is in zekere mate kleurenblind. Meer informatie over de kleurcontrasten is te vinden op: http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnhess/html/hess10092000.asp

Pagina 59/89



Taalkeuze In België verwachten gebruikers zich bij het binnen komen van een website aan een taalkeuzescherm. Dit scherm heeft maar één functie: het selecteren van de taal. Het dient dan ook zo sober mogelijk te zijn. Het taalkeuzescherm 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. Maar ook zonder cookie (sommige surfers aanvaarden geen cookies) moet het taalkeuzescherm correct werken. In dat geval moet elke andere pagina wel opnieuw een taalkeuze bevatten. Gepositioneerd links bovenaan onder het logo van de site, op basis van de ISO codes van de talen: NL, EN, DE, FR ... Ideaal gaat de surfer bij het aanklikken van een andere taal op een subpagina van de website meteen naar de overeenkomstige pagina in de gekozen taal. Bovendien wordt de taalselectie in het cookie ook aangepast naar de nieuwe taal. Een terugkerende surfer komt met andere woorden steeds terecht op de laatst gekozen taalversie, niet op de eerst gekozen.

Het taalkeuzescherm van Electrabel bevat niet de namen van de talen

Pagina 60/89



Informatiestructuur De informatiestructuur van de website geeft een plattegrond van de beschikbare informatie weer. Het is belangrijk dat deze structuur vraaggericht is en geen reflectie is van hoe de organisatie achter de website zichzelf ziet. Eventueel kan het vraagpatroon van de gebruikers uit gebruikerstesten, enquêtes en/of analyse van de populaire pagina’s op de website, worden afgeleid. De informatiestructuur wordt zichtbaar gemaakt via: • De navigatie • Een sitemap • Een “pad in de site” of broodkruimels (“home > hoofdcat. > subcat > pagina”)

Usability mythes Mythe 1: gebruikers scrollen niet graag Het is een veel gehanteerd argument dat webpagina’s slechts één scherm lang mogen zijn omdat gebruikers niet graag zouden scrollen. Dat is niet waar. Een pagina kan 3 tot 6 schermen lang zijn. Horizontaal scrollen is niet gebruikelijk. Het is echter wel belangrijk dat men op het eerste scherm (“above the fold”) duidelijk maakt dat er iets meer te zien is lager op de pagina. Dit kan bvb door een kader of foto zo te plaatsen dat die de “fold” net kruist. Breng in rekening dat surfers verschillende formaten van schermen hebben en de “fold” dus op een andere plaats kan liggen. Mythe 2: elke pagina moet binnen 2 clicks bereikbaar zijn Op basis van dit argument werden onmogelijk grote en complexe navigatiesystemen ontwikkeld die veel te veel keuzes en opties presenteren aan de gebruiker. De internetgebruiker heeft er niets op tegen om een paar keer te klikken voor hij zijn doel bereikt. Het is echter wel belangrijk dat hij bij elke klik het gevoel heeft dat hij een stap dichter bij dat doel is gekomen. Uiteraard moet het aantal kliks om informatie te bereiken niet onnodig groot worden gemaakt.

Pagina 61/89



Taalgebruik Correct taalgebruik is uiteraard een vereiste. Een webpagina kan iets informeler dan een brief maar het is geen aanleiding om een turbotaaltje te gaan gebruiken. Let er ook op dat bij een meertalige website alle onderdelen vertaald worden. Typisch vergeet men bij het vertalen van een webpagina TITLE-tags, of bijschriften van afbeeldingen. Ook de feedbackpagina die men te zien krijgt na bvb het versturen van een contactformulier moet in de juiste taal worden weergegeven.

Gebruiksvriendelijkheidstesten De enige manier om usability problemen te identificeren binnen een website is testen, testen en nog eens testen. Geef een gebruiker de opdracht iets te zoeken op de website en observeer hoe dat gebeurt en waar het fout gaat. Een eenvoudige oefening is een gebruiker een schermafdruk van de homepage van een website voorleggen. Vraag de gebruik dan om aan te geven welke deze van de pagin aanklikbaar zouden zijn en welke informatie hij of zij verwacht achter de klik.

Pagina 62/89



Homepage usability Inleiding De homepage is de eerste pagina waarmee de meeste bezoeker in contact komen wanneer ze uw website bezoeken. Deze pagina vereist dan ook extra aandacht. De usability guru Jakob Nielsen scheef zelfs een volledig boek over de gebruiksvriendelijkheid van homepages op basis van een analyse van de eerste pagina van 50 bekende websites. Meer informatie: http://www.useit.com/homepageusability/

Richtlijnen Identificatie Geef aan de hand van een logo en een tagline duidelijk aan wie de organisatie achter de website is en waarover de website gaat. Meestal staat het logo links bovenaan in beeld. Op de andere pagina’s van de website is het logo aanklikbaar en linkt het surfers terug naar de homepage. Op de homepage zelf is het logo natuurlijk niet aanklikbaar. TITLE-tag Geef de homepage een duidelijke TITLE tag. Deze HTML tag wordt op verschillende plaatsen gebruikt: a. In de titelbalk van de webbrowser b. In de tekst van een bookmark of favoriet c. Als aanklikbaar resultaat in een zoekmotor Omdat de meeste webbrowsers de favorieten alfabetisch ordenen is het belangrijk dat de title van de homepage begint met de naam van de website/organisatie. Als de titel begint met “Welkom op de website van ...” dan zal de website gesorteerd worden bij de letter “W” i.p.v. de eerste letter van de naam van de website/organisatie. Bedrijfsinformatie Verzamel alle bedrijfsinformatie op één plaats. Meestal komen bezoekers naar uw website omdat ze meer willen weten of uw diensten of producten. Soms willen ze echter meer over uw firma weten zoals persberichten, contactgegevens, management, geschiedenis, vacatures, ... Verzamel deze gegevens in één rubriek. Deze rubriek is goed berijkbaar van op de eerste pagina maar het is niet het middelpunt van de website. Voorzie ook een duidelijk link “Contact” c o n t a c t i n f o r m a t i e

die

rechtstreeks naar de g a a t .

Pagina 63/89



Belangrijke informatie Plaats de 4 belangrijkse items waarvoor surfers uw website bezoeken zeer prominent op de homepage. Dit zijn niet noodzakelijk de items die u zelf het belangrijkse vindt. U kan deze gegevens eenvoudig afleiden uit bezoekersstatistieken. Geef voldoende ruimte aan de belangrijkste acties die gebruikers ondernemen op uw website. Op de website van de GoudenGids bijvoorbeeld staat het zoekformulier om een bedrijf te zoeken centraal. Geef de gebruiker geen functies of tools of informatie die volledig ongerelateerd zijn aan de inhoud van de website zoals een zoekbox om het hele internet te doorzoeken of het weerbericht. Taalgebruik Gebruik duidelijke en ondubbelzinning termen voor de links en buttons op de website. Vermijd het gebruik van “leuke” of “goed gevonden” kwinkslagen of marketing termen. Surfers zijn zeer pragmatisch in hun gedrag en zijn zelden bereid een website te “ontdekken”. Voeg niet onnodig labels toe aan area’s die op zich als duidelijk maken waartoe ze dienen zoals bvb het menu. Vermijd het gebruik van afkortingen waarmee uw bezoeker mogelijk niet vertrouwd is. Voorzie meteen uitleg over de afkortingen die u gebruikt, niet achter een link. Zoekfunctie Voorzien een duidelijke, eenvoudige zoekfunctie op de eerste pagina. Bij voorkeur centraal op de pagina of rechts bovenaan. Maak het textveld minstens 25 karakters breed zodat men er een volledig woord kan in ingeven. Op de knop die men moet aanklikken op de zoekopdracht te starten staat duidelijk het woord “zoek” en geen andere onduidelijk termen zoals “GO”. Ook dat drukken op de ENTER-knop start de zoekopdracht. Als de knop niet het label “zoek” heeft dan is een apart label noodzakelijk om de z o e k f u n c t i e t e i d e n t i f i c e r e n . Voorbeelden van de inhoud Toon voorbeelden van informatie en diensten die dieper in de website te vinden zijn zoals bijvoorbeeld de titels van laatste nieuwsberichten of een feature van een speciaal dossier. Deze voorbeelden linken rechtstreeks naar het detail-item en niet naar de eerste pagina van de categorie waartoe te behoren. Voorzie eveneens een link naar de algemenen categorie waartoe het voorbeeld behoord. Zorg dat er een duidelijk onderscheid is tussen beide links.

Pagina 64/89



Archief Voorzie eenvoudige toegang tot items die vroeger op de homepage stonden. Gebruikers herinneren zich soms speciale aanbiedingen die bij hun vorig bezoek op de homepage stonden. Links Identificeer links duidelijk (bij voorkeur blauw en onderlijnd) en begin de aanklikbare tekst van een link met een relevant trefwoord. Surfers lezen een webpagina niet volledig maar scannen die. Duidelijke links zijn actie-items die bij zo’n scan worden opgemerkt. Gebruik geen specifieke zinnen voor de links zoals “Klik hier”. Maak het woord zelf aanklikbaar. Gebruik ook geen generiek termen zoals “Meer ...”. Maar geef duidelijk aan wat men meer krijgt zoals “Meer nieuws” of “Volledige archief”. Wanneer een link iets anders doet dan het openen van een nieuwe webpagina, bijvoorbeeld het downloaden van een PDF bestand of het starten van een video fragment, geef dat dan duidelijk aan bij de link. Navigatie Geef de navigatie een duidelijke plaats op de pagina. Groepeer verschillende navigatieitems om ze overzichtelijker te maken. Navigatie elementen van hetzelfde soort staat steeds bij elkaar en komen niet dubbel voor op de pagina. Gebruik duidelijke termen in de navigatie en vermijd zelf verzonnen woorden die niet mteen ondubbelzinnig duidelijk maken waarvoor ze staan. Gebruik enkel icoontjes als die gebruikers meer informatie verschaffen over het item zoals “new”, “promotie” of “video”. Grafisch Probeer geen belangrijke onderdelen van de homepage zoals navigatie te over accentueren met de veel grafische elementen. Surfers doen sterk grafisch uitgewerkte objecten snel af als reclamebanners en negeren die bijna volledig. Vermijd functionele grafische elementen die de vorm van een banner of reclame button hebben. Maak bewust gebruik van sterke beelden die een duidelijke relatie hebben met de inhoud van de website. Ga niet te veel af op weinig zeggende foto’s uit beeldbibliotheken.

Pagina 65/89



Accessibility Inleiding Naast gebruiksvriendelijkheid moeten webmasters ook steeds meer aandacht besteden aan de toegankelijkheid (accessibility) van hun websites. In het bijzonder wordt dan gedacht aan mensen met een visuele handicap en gebruikers van alternatieve input/output toestellen zoals screenreaders en brailleregels. W3C, de organisatie die bezig is met het beheer van de open standaarden waarop het internet is gebaseerd, heeft een set van richtlijnen (http://www.w3.org/WAI/) uitgewerkt om de toegankelijkheid van webpagina's te garanderen. Ook de Amerikaanse federale overheid hanteert gelijkaardige regels (http://www.section508.gov/) voor haar websites.

Blindsurfers in België In ons land is de organisatie Blindsurfer (http://www.blindsurfer.be/) actief bezig met het promoten van universele toegankelijkheid van websites. Na een grondig screening kunnen websites een label krijgen wanneer ze voldoende toegankelijk zijn voor hulpmiddelengebruikers. De federale en andere overheden hebben het engagement genomen om al hun websites de komende maanden en jaren toegankelijk te maken. U kan een screening van uw website aanvragen om het label te bekomen. Maar los van het label zelf is het zonder twijfel een best practice om uw website zo toegankelijk mogelijk te maken.

Richtlijnen Via enkele eenvoudige richtlijnen kan u ervoor zorgen dat uw website toegankelijk is voor hulpmiddelen gebruikers. Richtlijnen met betrekking tot de inhoud: 1. Tekstalternatief voor elk niet-tekstueel element (JPG, GIF,...) 2. Vlot consulteerbare datatabellen 3. Alternatieven voor multimedia elementen 4. Inhoud begrijpbaar voor wie geen kleuren kan onderscheiden 5. Alternatieven voor complexe grafische elementen, pagina's of documenten (PDF, Excel, Powerpoint,...) 6. Indicatie van taalwijzigingen (cf. Meta-header) Richtlijnen met betrekking tot de navigatie: 7. Betekenisvolle tekst bij elke (al dan niet grafische) link 8. Goede navigatiemogelijkheden voor hulpmiddelengebruiker 9. Correcte implementatie van frames, bij voorkeur geen frames 10. Correcte definitie van image maps Richtlijnen met betrekking tot programma-objecten: 11. Alternatieven voor programma-objecten (Applets, JavaScripts, Flash, Shockwave,...), bij voorkeur geen programma-objecten Pagina 66/89



Richtlijnen met betrekking tot de pagina-opmaak: 12. Browser instellingen (lettertype, lettergrootte, kleuren) blijven bruikbaar (o.a. via een correcte CSS implementatie) 13. Paginaopmaak geschikt voor hulpmiddelengebruikers 14. Correct gebruik van nieuwe vensters en popupvensters Richtlijnen met betrekking tot formulieren: 15. Correcte implementatie van formulieren Overige richtlijnen: 16. Compatibiliteit met diverse grafische en tekstbrowsers Meer informatie en een gedetailleerde uitleg bij deze richtlijnen kan u vinden op http://www.blindsurfer.be/bsi004N.htm

Accessibility via CSS CSS (Cascading Style Sheets) is een van de tools die een webmaster ter beschikking heeft om de website toegankelijk te maken voor sufers met verschillende soorten webbrowsers. Kort samengevat bevat CSS een extra set codes om de opmaak van de webpagina’s aan te sturen. Zo is het via CSS o.a. mogelijk om teksten uit te vullen (tegelijk links en recht uitlijnen) of de interlinie tussen twee tekstregels in te stellen. Deze zaken zijn met “traditionele” HTML codes niet mogelijk. Een ander voordeel van CSS is dat de opmaak van de tekst in één bestand (met de extensie .css) wordt opgeslagen; volledig gescheiden van de inhoud in de HTML bestanden. Een handige extra is dat u verschillende CSS bestanden (lees: opmaakmodellen) kan koppelen aan één HTML pagina. Zo zou u bijvoorbeeld een gewoon opmaakmodel en een opmaakmodel met extra contrasterende kleuren kunnen aanbieden voor surfers die kleurenblind zijn. Ook een opmaakmodel dat de teksten op uw webpagina 5 punten groter maakt voor slechtziende surfers behoort tot de mogelijkheden. Met een extra stukje javascript (http://www.alistapart.com/articles/alternate/) kan u bezoekers van de website zelf laten kiezen welk opmaakmodel ze het beste vinden. Deze keuze wordt dan eveneens in een cookie opgeslagen voor het volgende bezoek. U kan ook voor één HTML pagina verschillende style sheets aanbieden die worden gebruikt afhankelijk van het medium waarmee de bezoeker de webpagina bekijkt. Zo kan u dezelfde webpagina een ander uitzicht geven bij: • • • • • • • •

Bekijken op een computerscherm Afdrukken op papier Bekijken op een kiosk met touchscreen Voorgelezen door een screenreader Projecteren op een groot scherm Weergave op een brailleregel Bekijken op een klein scherm van een GSM of PDA ... Pagina 67/89



Meer informatie over Accessibility http://www.w3.org/WAI/ W3C Web Accessibility Initiative http://www.section508.gov/ Section 508: The Road to Accessibility http://www.blindsurfer.be/ Blindsurfer http://www.macromedia.com/macromedia/accessibility/ Macromedia Accessibility http://www.w3.org/WAI/ER/existingtools.html Evaluation, Repair, and Transformation Tools for Web Content Accessibility http://bobby.watchfire.com/bobby/html/en/index.jsp Bobby, tests op toegankelijkheid http://www.accessify.com/accessible-table-builder.asp Accessible Table builder

Pagina 68/89



Breadcrumbs Wat zijn breadcrumbs ? Breadbrumbs (broodkruimels) worden ook wel eens het "pad in de site" genoemd. Deze regel maakt de bezoeker van een webpagina duidelijk waar hij zich exact bevindt in de structuur van de site. Meestal ziet zoals breadcrumb er zo uit: home > kleding > broeken > Levi's Waarom zijn breadcrumbs belangrijk ? Breadcrumbs geven de bezoeker van de site een belangrijke indicatie over de structuur van de site en de plaats van een specifieke pagina binnen deze structuur. Ze maken het mogelijk de website beter te begrijpen en beter te navigeren binnen de site. Hoe breadcrumbs maken in Dreamweaver ? In een dynamische website (lees: gebaseerd op een databank of CMS) kunnen breadcrumbs haast automatisch worden gegenereerd. In een statische website zijn een paar kunstgrepen mogelijk. Via expressions en parameters in Dreamweaver MX templates is het mogelijk eenvormige breadcrumbs te maken. Er bestaan ook oplossingen die steunen op server side scripting zoals PHP. En tenslotte bestaat er ook een Dreamweaver extension die breadcrumbs genereert op basis van javascript. Alle oplossingen vereisen echter een zekere systematiek in de naamgeving van bestanden en folders in de site opdat de breadcrumbs correct zouden werken. Het is dus belangrijk dat u bij het begin van de site voor een oplossing kiest. Meer informatie http://www.kaosweaver.com/Extensions/Breadcrumbs/ Kaosweaver Breadcrumbs Extension http://www.evolt.org/article/Breadcrumbs_for_PHP_Lovers/17/4455/ Breadcrumbs for PHP lovers http://www.dreamweavermx-templates.com/tutorials/tutcrumbtrail.cfm Using Parameters & Expressions to make a Breadcrumb Trail

Pagina 69/89



Broken links Wat zijn "gebroken links" Broken links, ook wel dead links genoemd zijn de ergste vijand van elke webmaster. Het zijn links naar pagina's die niet (meer) bestaan. Dat kan gebeuren wanneer een link niet correct is, of wanneer de pagina waarnaar wordt gelinkt wordt verwijderd. Hoe gebroken links tegen gaan Deze enige manier om gebroken links, zowel binnen de eigen site als links naar externe sites, op te sporen te snel te herstellen is door de website regelmatig te controleren. Dreamweaver beschikt daarvoor over een ingebouwde functie onder het menu Site > Check Links Sitewide. Dreamweaver zal daarop alle interne links controleren en een rapport met eventuele problemen genereren. Eventueel kan ook nog een extern programma worden ingeschakeld om de website te controleren wanneer hij reeds online staat. Xenu is daarvoor een zeer goede, en bovendien gratis, oplossing. Maar er bestaan natuurlijk nog een reeks andere programma's. Hoe gebroken links opvangen ? Wanneer je de structuur van jouw website wijzigt is het mogelijk dat bezoekers via links op andere sites naar specifieke pagina's op jouw site om een gebroken link stuiten. De webserver zal dan een gevreesde 404 pagina tonen. Het is echter mogelijk om deze 404 pagina aan te passen. Zo kan je er bijvoorbeeld een korte maar vriedelijke foutboodschap op zetten, samen met een link naar de (nieuwe) homepage en/of een link naar de sitemap waar de bezoeker opzoek kan naar de eigenlijke pagina. Meer informatie http://home.snafu.de/tilman/xenulink.html Xenu
http://www.elsop.com/linkscan/ LinkScan http://www.netmechanic.com/ NetMechanic http://www.asaenet.org/sections/tech/article/1,2261,52065,00.html Custom 404 Error Pages http://www.thesitewizard.com/archive/custom404.shtml Pagina 70/89



How to Set Up A Custom 404 File Not Found Page http://hotwired.lycos.com/webmonkey/02/40/index4a.html?tw=backend The HTTP Error 404 Antidote http://www.404lounge.net 404lounge.net: the most beautiful 404 sites

Pagina 71/89



Afbeeldingen op het web Een webpagina zou weinig attractief zijn zonder grafische elementen. 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, PNG 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. 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.

Pagina 72/89



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. 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, meestal te koop http://www.animationfactory.com/ - animaties, gratis http://dir.yahoo.com/Business_and_Economy/Shopping_and_Services/Photograp hy/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

Pagina 73/89



Server side includes

Wat zijn server side includes ? Server side includes zijn zeer korte commando’s die u aan een HTML pagina kan toevoegen. Deze commando’s worden door de webserver uitgevoerd voordat hij een opgevraagde webpagina doorstuurt naar de bezoeker.

Waarvoor kan u server side includes gebruiken ? Server side includes worden meestal gebruikt om verschillende aparte HTML pagina’s in één bestand weer te geven. Zo is het bijvoorbeeld mogelijk om een header of een footer slechts één keer als apart HTML bestand op de server te zetten. Via een server side include in elke pagina worden de header en de footer automatisch toegevoegd aan elke pagina. Server side includes zijn m.a.w. vooral nuttig om gemeenschappelijk delen van webpagina’s (denk ook aan bvb Templates binnen Dreamweaver) uniform weer te geven en eenvoudig beheerbaar te maken. Server side includes kunnen ook worden gebruikt om bijvoorbeeld op een webpagina automatisch de datum van de laatste update weer te geven.

Pagina 74/89



Hoe gebruik ik server side includes ? Een server side include wordt geschreven binnen een gewone HTML commentaartag: Deze code vertelt de webserver om het bestand header.html te gaan zoeken in de bovenliggende folder en de inhoud van dat bestand op te nemen in de pagina. Plaats alle bestanden die u op deze manier wil includen in bestaande pagina’s bij voorkeur in één folder /includes/ in de root van de site. Zo blijft de folderstructuur van uw website proper. Het spreekt voor zich dat u enkel tekst bestanden (HTML, TXT, ...) kan includen in een HTML pagina. Het includen van bijvoorbeeld afbeeldingen of PDF bestanden is niet mogelijk via SSI.

Hoe weet ik of mij webserver SSI ondersteunt De meeste webservers, zowel Linux/Apache als Windows/ISS zijn in staat om server side includes te interpreteren en uit te voeren. Meestal wordt de server ingesteld zodat alleen webpagina’s met een bepaalde extensie server side includes kunnen bevatten. Vaak moet u de extentie van webpagina’s die SSI’s bevatten aanpassen van .html naar .shtml. De beste manier om het gebruik van SSI op uw webserver uit te testen is door een aantal test-bestanden (test.htm, test.html, test.shtml, test.shtm) op de server te publiceren en uit te proberen. Plaats in deze documenten onderstaande code: Als de webserver SSI ondersteunt zal deze code vervangen worden door de datum van vandaag wanneer u de pagina opvraagt via de webbrowser. Als uw server gaan SSI ondersteunt kan u aan de administrator vragen dat te activeren. Of u kan uitwijken naar het gebruik van Templates of Library items in Dreamweaver.

Pagina 75/89



Hoe gebruik ik server side includes in Dreamweaver ? Macromedia Dreamweaver ondersteunt het gebruik van server side includes. SSI sluit immers zeer nauw aan bij het gebruik van Templates en Library items in Dreamweaver. Alle drie geven ze webmasters de mogelijkheid om een groeiende site eenvoudig onder controle te houden. Voor een uitgebreide vergelijking van de voor- en nadelen van SSI, Templates en Library items in Dreamweaver zie: http://www.dwfaq.com/Tutorials/Dynamic/SSIs.asp Plaats de cursor op de plaats in de HTML pagina waar u een ander bestand wil invoegen. Kies in het menu Insert voor Script Objects en dan voor Server Side Includes. Selecteer nu het bestand dan u wenst op te nemen. Opgelet. De bestanden die u wil includen moeten zich ook binnen uw local root folder bevinden zodat Dreamweaver ze eveneens naar de webserver publiceert. Zie voor meer informatie over het gebruik van SSI in Dreamweaver: http://www.macromedia.com/support/dreamweaver/ts/documents/create_ssi.ht m

Waar kan ik meer informatie vinden over server side includes ? http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html http://www.carleton.ca/~dmcfet/html/ssi.html http://www.wdvl.com/Authoring/SSI/ http://www.smartwebby.com/web_site_design/server_side_includes.asp

Pagina 76/89



Metrics Inleiding “Meten is weten” dat geldt ook voor de e-ondernemer. De digitale sporen die surfers van hun bezoeken achter laten geven marketeers unieke mogelijkheden om kwantitatieve en kwalitatieve gegevens te verzamelen over het gedrag van bezoekers op de website, de performanties van reclameacties, de wensen van de markt, en de verkoop. Er zijn een hoop tools op de markt beschikbaar voor het verzamelen en analyseren van gegevens.

Over pageviews en meer Wanneer we over gebruikersstatistieken van websites praten kommen verschillende termen naar boven. • •

• •

•

Pageviews zijn het aantal bekeren webpagina’s Hits zijn het aantal opgevraagde bestanden op de server. Elk beeld op een webpagina is een apart bestand. Het opvragen van één webpagina met 3 beelden erop genereert dus 4 hits Unique visitors zijn unieke bezoekers. D.w.z. dat de bezoekers uniek geïdentificeerd zijn, meestal aan de hand van een cookie Unique IP adresses zijn unieke IP adressen. Elke computer die op het internet is aangesloten heeft zo’n uniek adres. Surfers op bedrijfsnetwerken surfen echter vaak met hetzelfde IP adres omdat de firwall van het netwerk hun werkelijke adres afschermt Referrers zijn andere webpagina’s die bezoekers naar uw website doorsturen

Bezoekersstatistieken Geen enkele website heeft bestaansreden als er geen mogelijkheid is om te meten wat de site oplevert. Voor een commerciële website is de uit de website voortvloeiende verkoop een duidelijke meetstaf. Maar er is meer. Elke website zou uitgerust moeten zijn met een manier om het aantal bezoekers op de website te meten, en de herkomst en het gedrag van de bezoekers op de website te analyseren. Loganalyzers Wanneer een websurfer een pagina opvraagt wordt er heel wat informatie over de surfer naar de webserver verzonden: • • • • •

Datum & tijd van het bezoek IP adres van de bezoeker Opgevraagde pagina Webbrowser, besturingssysteem en type processor van de bezoeker Resultaat van de actie (bvb “200” voor “pagina verzonden”, of “404” voor “pagina niet gevonden”)

Pagina 77/89



Deze informatie wordt door de webserver opgeslagen in een logfile. Meestal is een een “access log” dat informatie bevat over de opgevraagde bestanden, en een “error log” dat informatie bevat over eventuele fouten. 66.196.90.190 - - [26/Jul/2004:04:16:11 -0400] "GET /robots.txt HTTP/1.0" 404 275 "-" "Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)" 66.196.90.148 - - [26/Jul/2004:04:16:13 -0400] "GET /dreamweaver/css_scroll.html HTTP/1.0" 200 12160 "-" "Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)" 63.238.163.75 - - [26/Jul/2004:04:34:23 -0400] "HEAD / HTTP/1.1" 200 0 "-" "InternetSeer.com" 62.166.70.66 - - [26/Jul/2004:04:50:22 -0400] "GET /webdesign/weblog/rss.xml HTTP/1.0" 200 9116 "http://ranchero.com/software/netnewswire/" "NetNewsWire Lite/1.0.1 (Mac OS X)" 81.212.65.21 - - [26/Jul/2004:05:06:29 -0400] "GET /webdesign/layers.html HTTP/1.1" 200 3654 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)" 81.212.65.21 - - [26/Jul/2004:05:06:31 -0400] "GET /webdesign/style_web.css HTTP/1.1" 200 1033 "http://www.ideabox.be/webdesign/layers.html" "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)" 81.212.65.21 - - [26/Jul/2004:05:06:31 -0400] "GET /webdesign/images/xml.gif HTTP/1.1" 200 429 "http://www.ideabox.be/webdesign/layers.html" "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)" 81.212.65.21 - - [26/Jul/2004:05:06:32 -0400] "GET /webdesign/petals-1.jpg HTTP/1.1" 200 11892 "http://www.ideabox.be/webdesign/layers.html" "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)" 213.224.86.97 [26/Jul/2004:05:09:17 -0400] "GET /webdesign/pdf/webdesign_cursus.pdf HTTP/1.1" 200 62384 "http://www.google.be/search?q=cursus+flash+dreamweaver+online&hl=nl&lr=&cr=countryBE&ie=UTF-8&start=10&sa=N" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)" 213.224.86.97 [26/Jul/2004:05:09:35 -0400] "GET /webdesign/pdf/webdesign_cursus.pdf HTTP/1.1" 206 148470 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)" 213.224.86.97 [26/Jul/2004:05:09:36 -0400] "GET /webdesign/pdf/webdesign_cursus.pdf HTTP/1.1" 206 135998 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)"

Voorbeeld van een logfile Verschillende eenvoudige instrumenten kunnen deze logfiles analyseren en er duidelijke informatie uit destilleren. Typische scripts die logfiles kunnen analyseren zijn: • • • •

Webalizer - http://www.mrunix.net/webalizer/ (open source) AWStats - http://awstats.sourceforge.net/ (open source) Analog - http://www.analog.cx/ (open source) Clicktracks – http://www.clicktracks.be/ (open source)

Het voordeel van log analyzers is dat ze geen impact hebben op de werking van de website. Het nadeel is dat ze zelde “live” informatie geven. De logfiles worden bvb maar één keer per dag geanalyseerd en de resultaten in een rapport opgeslagen.

Pagina 78/89



Taggers Wanneer u geen eigen script op de website wil of mag installeren dan zijn er andere tools die van op een andere server het verkeer op de website in de gaten kunnen houden en daarover rapporten kunnen genereren. Het volstaat om een stukje HTML code in de footer van elke webpagina toe te voegen. Men spreekt van het “taggen” van de pagina’s. Zo’n “tag” bevat een klein scriptje (meestal javascritp) dat bij het opvragen van een pagina wordt ingeladen. Dit script zal informatie naar de tracking software op een andere server doorsturen. Deze kan de resultaten opvangen, verwerken en weergeven in rapporten. Voorbeelden zijn: • •

Nedstat – http://www.nedstat.be Webtrends Live - http://www.webtrendslive.com

Het voordeel van taggers is dat ze vaak wel in staat zijn “live” informatie door te geven. Ze steunen wel op de correcte werking van een andere server en zijn meestal gebaseerd op een abonnementsformule. Voor het onafhankelijk meten van het verkeer op media sites hanteert de CIM een tagging systeem met de naam Metriweb. Meer informatie: http://www.cim.be/metriweb/

Pagina 79/89



Search engine marketing Inleiding Met de sterke opgang van de zoekmotor Google ontwikkeld zich, eerst in de VS en dan ook in Europa, een nieuwe tak in de online marketing industie: search engine marketing. Zoals de naam aangeeft gebruikt search engine marketing populaire zoekmotors om een doelgericht publiek naar een website te trekken. Dit wordt bereikt door de website een optimale positie te geven in verschillende zoekmotoren. Het bekomen van zo’n optimale positie kan op twee manieren: • •

Paid listing: het afkopen van hoge posities op bepaalde terfwoorden Search Engine Optimalisation: het optimaliseren van de website zodat die op “natuurlijke” wijze een hoge positie inneemt.

Een goede SE marketing actie combineert Paid listings en SEO om het beste resultaat en een maximale return uit de investering te behalen.

Webdirectories Inleiding Om een SE marketing campagne op poten te zetten is het belangrijk om een goed inzicht te hebben in de werking van webdirectories en search engines. Webdirectories Webdirectories zijn sites die steunen op een team van redactieleden om website te evalueren en in een set van categorieën en subcategorieën onder te verdelen. Elke site wordt manueel door een lid van de redactie bezocht, geëvalueerd en na goedkeuring in de juiste categorie opgeslagen. De meeste webgidsen zijn gegroeid uit persoonlijke initiatieven. Webdirectories kunnen meestal steunen op een hoge kwaliteit maar een beperkt volume aan links. Yahoo Yahoo is een van de oudste en meest bekende webgidsen. Dagelijks werken ruim 40 mensen aan het evalueren en toevoegen van nieuwe sites. Toch duurt het, na het aanmelden van uw website, ruim zes maanden voor de site geëvalueerd wordt. Yahoo geeft geen garantie dat elke website ook effectief worden opgenomen. Voor commerciële website hanteert Yahoo een fee die betaald moet worden om de website te laten evalueren. Opname wordt in dat geval niet gegarandeerd.

Pagina 80/89



Getting answers fast is important to your business. With Yahoo! Express, your request to be listed in the Directory will be reviewed and the Yahoo! editorial team will respond to you within 7 business days, for a review fee of only $299 ($600 for adult sites). If your listing is accepted into the Directory, there will be a $299 recurring annual fee in subsequent years ($600 for adult sites) to maintain the listing Daarnaast biedt Yahoo adverteerders de mogelijkheid hun website op een prominentere plaats zichtbaar te maken binnen een categorie. Zie Payed listings. Een vermelding in Yahoo kan echter een hoop nieuw verkeer naar een website trekken. Domainnamen van websites die in Yahoo werden opgenomen en die vervallen worden vaak zeer snel opnieuw ingepikt om het inkomende verkeer af te leiden naar een andere website. DMOZ DMOZ, ook bekend onder de naam Open Directory, is een webgids die door vrijwillige redacteurs wordt onderhouden. Op het moment van schrijven bevat deze webgids ruim 4 miljoen website in 590.000 categorieën die door meer dan 63.000 redacteurs worden onderhouden. Opname in DMOZ biedt verschillende voordelen aangezien deze webgids als “open content” beschikbaar is. Andere sites, waaronder Google, nemen de inhoud van de webgids immers over op hun eigen website. Zo bereiken de listings nog meer surfers. Om een website te laten opnemen in DMOZ kan u deze aanmelden in een categorie. De site zal door de redacteur van de categorie worden geëvalueerd. Omdat het bij DMOZ om vrijwillige redacteurs draait is het moeilijk om een tijdspad voor de opname te voorspellen. In sommige gevallen is het mogelijk om zelf nog redacteur te worden in een categorie en zo de eigen website toe te voegen. DMOZ hanteert echter relatief strenge selectiecriteria om nieuwe redacteurs toe te laten en te evalueren.

Pagina 81/89



Pagina 82/89



Startpagina’s Startpagina’s zijn een vereenvoudigde vorm van webgidsen waarbij de links kort op elkaar staat en verdeeld worden over verschillende thematische pagina’s. De pagina’s worden vaak door vrijwillige redacteurs onderhouden. Voorbeelden van startpagina’s in België zijn: http://www.go2.be http://www.start.be

Zoekmotoren Inleiding In tegenstelling tot webdirectories worden search engines volledig automatisch opgevuld met informatie. De search engine stuurt verschillende “spiders” het web op om informatie te downloaden. De gevonden webpagina’s worden geïndexeerd in een database. Van op de website kunnen bezoekers de database dan op basis van trefwoorden doorzoeken. Door hun geautomatiseerde werking kunnen search engines meer en sneller sitres opnemen dan webgidsen. De relevantie en kwaliteit van de gevonden websites is echter meest lager. Google Google was lang niet de eerste maar momenteel web een van de meest populaire search engines. De site heeft zijn gigantisch populariteit te danken aan zijn super-eenvoudige gebruikersinterface en zijn (voor een search engine) kwaliteitsvolle resultaten. Deze goede resultaten kan Google voorleggen dankzij een speciaal algorithme onder de naam PageRank. Google gebruikt PageRank om gevonden websites op basis van hun relevantie te sorteren. Daarvoor gebruikt de zoekmotor niet alleen de inhoud van de bewuste pagina voor evalueert ze ook de pagina’s die een link hebben naar de bewuste pagina’s. Meer informatie over RageRank: http://www.webworkshop.net/pagerank.html Google gebruikt zijn krachtige zoekfuncties ook om te zoeken binnen nieuwsgroepen, afbeeldingen en nieuwsbronnen op het web. Daarbij staat de eenvoudige gebruikersinterface steeds centraal. Opname in Google kan niet geforceerd worden. De siet biedt bezoekers wel de mogelijkheid om een URL aan te melden. De ervaring leert dat toegevoegde website binnen 4 tot 6 weken door de GoogleBot, de spider van Google, wordt bezocht en geïndexeerd. Daarna komt de spider, afhankelijk van het aantal updates aan de website, regelmatig terug om nieuwe inhoud van de site te indexeren. Het regelmatig herindexeren van informatie door Google staat bekend als de Google Dance. Pagina 83/89



Meer informatie over de Google Dance: http://dance.efactory.de/ http://www.seochat.com/googledance Ook Google geeft adverteerders de mogelijkheid om hogere listings bij bepaalde trefwoorden te kopen. Dit programma staat bekend onder de naam Ad Sense (zie verder)

Pagina 84/89



Paid listings Inleiding Via een systeem van paid listings geven zoekmotoren adverteerders de mogelijkheid om tegen betaling hun website op een betere zichtbare positie te plaatsen wanneer bepaalde trefwoorden, relevant voor de adverteerder, worden ingegeven. Zoekmotoren letter er echter zeer goed op dat ze gesponserde resultaten goed scheiden van de “natuurlijke” zoekresultaten. Google Adsense Google hanteert een programma onder de naam Ad Sense. Adverteerders kunnen hier online inloggen en een publiek selecteren dat ze wensen te benaderen op basis van taal, land en ingegeven trefwoord. Om basis van het volume van het geselecteerde publiek zal Google een prijs voor de advertenties bepalen. De gesponserde links onder het Ad Sense programma verschijnen rechts in beeld naast de zoekresultaten. Indien er meerdere adverteerder zijn zullen ze volgend relevantie (op basis van het aantal keer dat ze worden aangeklikt) worden gesorteerd. Google Ad Sense geeft adverteerder verschillende handige tools om hun SE marketing campagnes te beheren, de resultaten te analyseren en waar nodig snel bij te sturen. De betaling gebeurt op voorhand via credit card. Er is een mogelijk om een dagelijkse spending limit in te stellen.

gesponserde links voor het trefwoord “SEO” rechts in beeld.

Pagina 85/89



Via een syndicatie programma kunnen webmasters ook Ad Sense advertenties op hun eigen website later verschijnen. Dat vergroot het bereik van de advertenties.

weergave van Google Ads op een andere website Overture Overture is een van de pioneers van paid listings. De search engine, die tegenwoordig eigendom is van Yahoo, verzorgt ook de payed listings om andere zoeksites. Overture hanteert een systeem van veilingen om de ideale prijs voor een bepaald trefwoord te berekenen.

Pagina 86/89



Optimalisatie van websites Inleiding Omdat zoekmotoren gebruik maken van algorithmes om de inhoud van de gevonden webpagina’s te analyseren en te evalueren is het mogelijk om webpagina’s zo op te maken dat ze hoge scores opleveren bij bepaalde zoekopdrachten. Over het algemeen houden search engines de exacte algorithmes die ze gebruiken geheim. Het is immers hun belangrijkse wapen om relevante zoekresultaten te genereren in de strijd tegen concurrenten. Bovendien worden er zeer regelmatig wijzigingen en verfijningen aan de algorithmes aangebracht. Op basis van verschillende testen en het analyseren van goed scorende websites is het mogelijk om te ontdekken welke onderdelen van een webpagina een positieve invloed hebben op de ranking. Op basis van deze informatie is het mogelijk om geoptimaliseerde webpagina’s te maken. Optimalisatie van de inhoud Een zoekmotor anlyseert in de eerste plaats de inhoud van een webpagina’s. Daarbij gaat zowat alle aandacht uit naar de tekst en de HTML codes. Search engines zijn nog niet in staat de inhoud van beelden te intepreteren en zijn zeer beperkt in het analyseren van Flash animaties. Het is dus belangrijk om op alle pagina’s van de website voldoende tekstuele informatie te hebben staan. De inhoud van de webpagina’s wordt geanalyseerd. Daarbij wordt gezocht naar prominente trefwoorden. Dat zijn woorden die op een of andere manier aangeven dat ze belangrijker en relevant zijn voor de hele inhoud van de pagina. Dat kan bijvoorbeeld omdat ze in een titel staan, aan het begin van een paragraaf staan, of meerdere keren op de pagina voorkomen. Een goede website bevat teksten die zowel aantrekelijk zijn voor bezoekers als voor search engines.

Pagina 87/89



Optimalisatie van de HTML codes Een zoekmotor lees niet alleen de tekst van een webpagina maar ook de rest van de HTML codes. In deze codes gaat het algorithme opzoek naar aanwijzigen voor belangrijke trefwoorden. Deze HTML codes kunnen daarbij helpen: • • • •

META-tag description META-tag keywords H1, H2, H3 en H4 titels Links

Een goede webpagina bevat niet te veel balast HTML codes zoals onnodig veel in elkaar geplaatste tabellen. Webposition Webposition Gold is een vrij omstreden programma. Op basis van een voortdurende testing van de algorithmes van verschillende zoekmotoren probeert dit programma de ideale HTML pagina op de maken voor een goede positionering in verschillende engines. Na het toevoegen van uw eigen teksten worden de HTML pagina’s opnieuw geanalyseert en krijgt u suggesties voor verbeteringen. Webposition is omstreden omdat het gebruikers toelaat op een weinig eerlijke manier de resultaten van Google te beïnvloeden. Bovendie wordt het programma specifiek ook Google vernoemt op zijn SEO pagina. http://www.webposition.com Optimalisatie van de links De populaire zoekmotor Google analyseert niet alleen de inhoud van een webpagina. Er wordt ook gekeken naar het aantal inkomende links van andere sites naar de doel website op te bepalen hoe belangrijk de site is. Dit principe heet PageRank. Elke webpagina die wordt opgenomen in de database van Google krijgt op basis van het aantal inkomende links een ranking tussen 1 en 10, de page rank. Door de toolbar van Google te installeren binnen de webbrowser is het mogelijk om van elke webpagina die u bezoekt de PageRank op te vragen. Meer informatie over de Google Toolbar: http://toolbar.google.com/ Meer informatie over linking met het oog op SEM: http://www.linkingmatters.com/ Het belangrijk dat Google hecht aan links tussen verschillende websites heeft ervoor gezorgt dat weblogs, in essentie een verzameling links met commentaar, zeer goede posities innemen in de database van de zoekmotor. Pagina 88/89



Selectie van trefwoorden Een SEM campagne begint met een analyse van de huidige positionering van de website in verschillende search engines op bepaalde trefwoorden. Daarnaast kan een visitor tracking oplossing meteen een goed beeld geven van het aantal bezoekers op de website en de referrering search engines. Tenslotte is de verkoop (rechtstreeks of lead generatie) het ultieme meetinstrument om het succes van een SEM campagne te bepalen. De keuze van de trefwoorden waarop de website zal worden geoptimaliseerd is een belangrijke stap. Kies niet alleen voor de meest voor de hand liggen trefwoorden maar ook voor eventuele vertalingen, synoniemen, andere volgorde van woorden, streektaal en typefouten. Verschillende instrumenten kunnen u verder helpen bij het selecteren van trefwoorden. Google Keyword Suggestion Gebruikers van het payed inclusion programma van Google kunnen gebruik maken van het Keyword Suggestion Tool. Op basis van enkele trefwoorden wordt er in een database van werkelijk uitgevoerde zoekopdrachten door andere sufers gezocht naar synoniemen en gerelateerde trefwoorden die mogelijk ook interessant zijn voor uw SEM campagne. https://adwords.google.com/select/main?cmd=KeywordSandbox Wordtracker Wordtracker gaat nog een stap verder. Niet alleen worden zoekopdrachten van verschillende zoekmotoren aangeboden. Het is ook mogelijk om de gevonden woorden te gaan wegen op basis van het aantal keer dat ze worden opgezocht en het aantal concurrerende resultaten. Op die manier is Wordtracker in staat om u net die trefwoorden voor te schotelen die op een relatief eenvoudige maniet tot goede SEM resultaten kunnen leiden. http://www.wordtracker.com SEO Count SEO count laat u toe om de resultaten van uw SEO campagne te meten. Deze dienst zal de door u geselecteerde trefwoorden op regelmatig tijdsstippen bij Google ingeven, de resultaten analyseren en rapporten opmaken over de voortgang van de positie van uw website. http://www.seocount.com/

Pagina 89/89

Updates van deze cursus kunnen gevonden worden op de website

Recommend Documents

bijvoorbeeld zegt dat de inbegrepen tekst een Hoofding 1 is. Die is in principe groter dan een