1 2 3 Dit e-book hoort bij de opleiding Webmanager en de training Webtechniek. Titel e-book: Webtechniek voor niet-techneuten Uitgever: The Internet A...
Dit e-book hoort bij de opleiding Webmanager en de training Webtechniek. Titel e-book:
Webtechniek voor niet-techneuten
Uitgever:
The Internet Academy
Auteur:
Jaap van de Putte
Versie:
14 januari 2015
Met dank aan:
Mark van Vlerken en Michèlle van Vlerken-Thonen, Vierkante Meter Michiel Roering, gemeente Den Helder Ronald Lamars, gemeente Oudewater Jules Ernst, 200ok
Copyright (C) 2015 Jaap van de Putte Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no FrontCover Texts, and no Back-Cover Texts. A copy of the license is available on http://www.gnu.org/licenses/fdl.html.
Inhoudsopgave 1. Inleiding.................................................................................8 2. Browser................................................................................10 2.1 Soorten browsers....................................................................10 2.2 Browsers voor computers..........................................................10 2.3 Browsers voor mobiele toepassingen.............................................12 2.4 Test je website in verschillende browsers.......................................12 2.5 Opdracht..............................................................................13 3. Het webadres of URL...............................................................14 3.1 URL en URI............................................................................14 3.2 Opbouw webadres...................................................................14 3.3 http en https.........................................................................15 3.4 Subdomeinen en subdirectories...................................................15 4. HTML en CSS..........................................................................17 4.1 HTML..................................................................................17 4.2 Enkele HTML-elementen...........................................................19 4.3 CSS.....................................................................................22 4.4 Semantiek en HTML.................................................................27 4.5 Afbeeldingen in HTML of CSS......................................................28 4.6 Responsive design...................................................................32 4.7 Verschillende HTML-versies........................................................33 5. HTML-opbouw webpagina.........................................................35 5.1 HTML-code basisopbouw webpagina.............................................35 5.2 Head-gedeelte.......................................................................36 5.3 Body-gedeelte.......................................................................40 6. Opbouw van je website............................................................41 6.1 Content Management Systeem (CMS)............................................41 6.2 Templates.............................................................................46 6.3 CSS.....................................................................................49 6.4 Statische content....................................................................50 Inhoudsopgave
5
6.5 Bijzondere bestanden voor zoekmachines......................................51 7. Client en server......................................................................54 7.1 Het client-server-model............................................................54 7.2 Webserver en provider.............................................................54 7.3 Communicatie tussen client en server...........................................56 7.4 Client-side versus server-side.....................................................56 7.5 JavaScript.............................................................................58 7.6 Cache..................................................................................58 7.7 FTP.....................................................................................59 8. HTTP-statuscodes...................................................................60 8.1 Overzicht HTTP-codes..............................................................60 8.2 404-melding (pagina niet gevonden).............................................61 8.3 301-melding (permanente redirect)..............................................62 8.4 302-redirect (tijdelijke redirect).................................................62 8.5 500-melding (serverfout)...........................................................63 8.6 Foutief gebruik......................................................................64 8.7 Verwijderde pagina's: wat doe je er mee?......................................65 8.8 Nieuwe structuur van je site......................................................65 9. Afbeeldingen op je site............................................................67 9.1 Kenmerken afbeelding..............................................................67 9.2 Resolutie is niet belangrijk voor het web.......................................67 9.3 Bestandstype.........................................................................67 9.4 Formaat van de afbeeldingen.....................................................69 9.5 Grootte van de bestanden.........................................................70 9.6 Positioneren van afbeeldingen....................................................70 9.7 Naamgeving van afbeeldingen....................................................73 9.8 Alt, title en omschrijving..........................................................74 10. Tekst invoeren met je CMS-editor..............................................76 10.1 Semantisch opmaken..............................................................76 10.2 Scheiden van opmaak en content...............................................77 10.3 WYSIWYG-modus en tekstmodus................................................78
Inhoudsopgave
6
10.4 Rommelcode........................................................................79 10.5 Voorkomen van ongewenste code...............................................80 10.6 Ongewenste HTML-code weghalen..............................................80 10.7 Controleren op ongewenste HTML-code.......................................81 11. Apps, webapps en hybride apps................................................82 11.1 Native apps.........................................................................82 11.2 Webapps.............................................................................83 11.3 Hybride apps........................................................................83 11.4 Wat moet je nu kiezen............................................................84 12. Tools om je website te testen...................................................86 12.1 Webmaster Tools (Hulpprogramma’s voor webmasters).....................86 12.2 Web Developer (add on voor Firefox)..........................................92 12.3 Screaming Frog.....................................................................94 12.4 Colour Contrast Analyser.........................................................97 12.5 Testen op kleurenblindheid......................................................98 12.6 HTML_CodeSniffer.................................................................99 12.7 WAVE Accessibility Tool..........................................................100 12.8 Snelheid site testen op Pingdom Website Speed Test......................100
Inhoudsopgave
7
1. Inleiding Bij de basisopleiding Webmanager merkten we dat voor veel cursisten juist de technische aspecten van het vak moeilijk zijn. Logisch, want in veel gevallen heb je dit niet in een opleiding gehad. Je wordt geacht het wel te weten en mee te kunnen praten met de techneuten en de webbouwers. Met deze situatie in mijn achterhoofd heb ik dit e-book geschreven. Het gaat natuurlijk wel over techniek, maar hopelijk voldoende duidelijk uitgelegd zodat je begrijpt wat de termen allemaal inhouden. Heb je correcties, aanvullingen of andere opmerkingen, stuur deze naar [email protected]. Het e-book gebruiken we bij de eendaagse training Webtechniek en bij de basisopleiding Webmanager. Meer informatie over de opleiding vind je op www.theinternetacademy.nl/webmanager.
Inhoudsopgave
8
Inhoudsopgave
9
2. Browser 2.1 Soorten browsers Een browser of webbrowser is het programma waarmee je op je computer, je tablet of mobiele telefoon websites bekijkt. De bekendste browsers voor zijn: • voor computers: ° Firefox ° Google Chrome ° Internet Explorer ° Safari ° Opera • voor mobiele telefoons en tablets: ° Safari Mobile ° Android ° Chrome
2.2 Browsers voor computers Enkele jaren terug had Microsoft met Internet Explorer nog een zeer groot marktaandeel (wereldwijd 70 %, in Nederland zelfs 90 %) (zie grafiek hieronder). De afgelopen jaren zijn andere browsers ook populair geworden, ten koste van het marktaandeel van Internet Explorer. Hieronder de verschuiving in de markt wereldwijd (bron: Wikipedia).
Inhoudsopgave
10
Afbeelding 1: Verloop marktaandeel browsers 2009 - 2013 De grafiek laat het volgende zien voor de periode 2009 tot en met 2013: • Internet Explorer daalde van 70 % naar 30 % • Firefox begon op 28 %, steeg eerst maar daalde vanaf 2011 tot ongeveer 20 % in 2013 • Google's Chrome startte in 2009 en steeg naar 40 % in 2013. • Apple's Safari steeg van 3 % naar ongeveer 6 % in 2013. • Mobile steeg vanaf 2009 naar ongeveer 12 % in 2013.
Inhoudsopgave
11
Over het algemeen blijken organisaties vaak verouderde browsers te gebruiken, met name de verouderde versies van Internet Explorer. Particuliere gebruikers updaten sneller en zijn ook sneller overgegaan op andere browsers dan Internet Explorer. Nog steeds hoor je vaak in organisaties dat ze vanwege de veiligheid nog niet overgaan op Firefox of Chrome. Het omgekeerde is het geval: de verouderde versies van Internet Explorer leveren de grootste risico's op voor virussen en andere ongewenste software. Bij onze trainingen werken we vooral met Firefox, omdat we werken met een aantal add ons (plug-ins) van deze browser.
2.3 Browsers voor mobiele toepassingen Mobiele apparaten, zoals smartphones en tablets, hebben weer hun eigen browsers. Meest gebruikte mobiele browsers zijn: • Android, voor bijvoorbeeld Samsung-tablets en Samsung-telefoons • Safari Mobile voor iPhone en iPad • Chrome • Windows Mobile voor Nokia-telefoons • Opera Mobile
2.4 Test je website in verschillende browsers Het is altijd goed om je site op meerdere browsers te testen. Een website zou er in elke browser hetzelfde uit moeten zien, maar dat is vaak niet het geval. Vaak zijn er verschillen in lay-out, die op zich niet ernstig hoeven te zijn, maar toch afbreuk doen aan jouw website. Zorg dat je zelf op je computer een aantal browsers hebt om te testen. In ieder geval de nieuwste versies van: • Internet Explorer • Firefox • Chrome • Safari
Inhoudsopgave
12
De grootste problemen treden vaak op bij de verschillende versies van Internet Explorer. Op een Windows-computer heb je normaal gesproken slechts 1 versie, dus zul je voor de andere versies iets anders moeten bedenken. Een website waar je de verschillende versies van Internet Explorer kunt testen is http://netrenderer.com/.
Als je de mogelijkheid hebt, test ook de verschillende mobiele browsers: • Safari Mobile (iPhone) • Android (onder andere op Samsung en HTC) • Windows Mobile (op Nokia) • Google Chrome (kun je op iedere mobiele telefoon plaatsen)
2.5 Opdracht Opdracht: installatie Web Developer In de volgende paragrafen leggen we je meer uit over HTML en de code. Voordat we daarmee beginnen is het handig als je de add on Web Developer in Firefox installeert. Die add on gebruiken we namelijk in de opdrachten. 1. Open Firefox. 2. Ga naar https://addons.mozilla.org/nl/firefox/addon/60/ 3. Klik op de button om de add on te installeren. 4. Klik op de knop om de browser opnieuw te starten.
Inhoudsopgave
13
3. Het webadres of URL Elke webpagina heeft een uniek adres, waarmee het vindbaar is op het web. Dit adres is de Uniform Resource Locator, afgekort tot URL. Webadres is een ander woord voor URL. Een voorbeeld van een adres is: http://www.theinternetacademy.nl
3.1 URL en URI Een andere benaming voor de URL is URI: Uniform Resource Identifier. Strikt genomen is dat net iets anders, maar die verschillen zijn mijns inziens niet belangrijk. Beide termen worden vaak gebruikt als synoniem. Een URL kan ook gebruikt worden voor andere adressen dan webpagina's, bijvoorbeeld voor een e-mailadres. De URL is dan bijvoorbeeld: mailto:[email protected] Of voor een FTP-adres: ftp://ftp.theinternetacademy.nl
3.2 Opbouw webadres Stel we hebben het volgende webadres: http://www.gemeentebest.nl/zoeken/?q=rommelmarkt Dat bestaat uit de volgende onderdelen: Onderdeel adres
Uitleg
http://
protocol
www
subdomein
gemeentebest.nl
domein
nl
topleveldomein
zoeken/?q=rommelmarkt
pad
zoeken
subdirectory (of map)
Inhoudsopgave
14
?q=rommelmarkt
parameter (in dit geval de zoekparameter)
Met een webadres kun je ook binnen een pagina direct verwijzen naar een plek in de pagina met een zogenaamd tekstanker. Dit is herkenbaar aan het #teken (of hashtag), zie bijvoorbeeld hieronder: http://www.theinternetacademy.nl/gratis-lesmateriaal/handboek-schrijvenvoor-het-web#aanpassingen
3.3 http en https Het volledige adres bevat het voorvoegsel http://, maar in de gewone communicatie van het adres kun je dit weglaten. Dit voorvoegsel is het protocol. Het kan zijn dat de website beveiligd is met Secure Socket Layer (SSL). Alle gegevens worden dan versleuteld verstuurd, waardoor ze minder makkelijk door onbevoegden zijn te achterhalen. Als jouw site SSL gebruikt, dan is er een “s" toegevoegd aan http, bijvoorbeeld: https://www.theinternetacademy.nl Ook hier hoef je in de communicatie geen rekening mee te houden: als je het www-adres gebruikt, voegt de server daar vanzelf http of https aan toe. Een ander protocol is het mailto-protocol, het protocol voor een mailadres.
3.4 Subdomeinen en subdirectories Subdomein In ons webadres – www.theinternetacademy.nl – is theinternetacademy.nl het domein. Bij een domein kun je ook subdomeinen gebruiken. In dit geval is www in feite een subdomein, maar gebruiken we het hier als hoofddomein. Vaak worden er nog andere subdomeinen gebruikt. Wij gebruiken bijvoorbeeld school.theinternetacademy.nl als onze digitale leeromgeving.
Inhoudsopgave
15
Belangrijk om te weten is dat een subdomein in feite een eigen domein is. Dat betekent dat bijvoorbeeld voor Google de populariteit van het domein geen enkele invloed heeft op de populariteit van het subdomein, en vice versa. Als je kiest om content op een subdomein te plaatsen, betekent dat je de linkwaarde van je hoofddomein verlaagt, want een stukje van de populariteit van jouw hoofddomein gaat naar het subdomein. Dat is geen probleem als het echt andere content is en een andere functie, zoals in ons voorbeeld met het subdomein school. Maar in de meeste andere situaties maak je je “merk" minder sterk door content te plaatsen op subdomeinen. Ook op de webserver staan de subdomeinen vaak apart. En hebben ze dus eigen serverruimte en eigen bandbreedte voor het dataverkeer.
Subdirectory Een subdirectory is een map op jouw website. Het komt na het domein. Een voorbeeld van een subdirectory is “trainingen" in het webadres www.theinternetacademy.nl/trainingen. De linkwaarde van de content in de subdirectories komen wel ten goede aan de linkwaarde van het domein zelf. Het is belangrijk om goed het verschil te weten tussen een subdirectory en een subdomein, en de voor- en nadelen van beide.
Inhoudsopgave
16
4. HTML en CSS Een webpagina is geschreven in de codetaal Hypertext Markup Language, afgekort tot HTML. In principe zorgt de HTML voor alles behalve de vormgeving van teksten en afbeeldingen. Deze vormgeving staat in zogenaamde Cascading Style Sheets (CSS).
4.1 HTML HTML bestaat uit code. En die code kan bestaan uit HTML-elementen, HTMLtags en HTML-attributen. Dat leggen we hieronder allemaal uit.
Verklaring Engelse naamgeving De HTML-elementen en -attributen zijn afkortingen van Engelse termen. We geven alvast een overzicht: Element / attribuut
Volledige naam
Nederlandse vertaling
p
paragraph
alinea (dus NIET een paragraaf)
h
heading
kop
img
image
plaatje
src
source
bron
ol
ordered list
geordende opsomming
ul
unordered list
niet geordende opsomming
li
list item
opsommingsitem
table
table
tabel
tr
table row
tabelrij
th
table heading
tabelkop
td
table data
tabelcel
a
anchor
anker (link)
br
break
regelovergang
Inhoudsopgave
17
HTML-tags Een stukje tekst op een webpagina bestaat uit de tekst die we kunnen lezen en HTML-code, die om de tekst heen staat. Bij een alinea staat er voor de tekst de HTML-tag
. De “p” is van het Engelse paragraph, wat alinea betekent. Na de tekst volgt er een sluit-tag
:
Dit is de titel.
HTML-element De begin- en sluittag vormen samen het HTML-element. In het vorige voorbeeld heb je dus het element p en de tag
. Er is niet altijd een begintag en een eindtag. Sommige elementen zijn 'self closing': er is alleen een begintag die eindigt met een slash voor de afsluitende vishaak. Dit is bijvoorbeeld het geval bij het element voor een afbeelding , het element img:
En bij het br-element Postbus 12
HTML-attributen En, om dan gelijk maar het verhaal af te maken, een element kan ook attributen hebben. In het voorbeeld hierboven heeft het img-element het attribuut src. Elk element heeft bepaalde attributen. Zo heeft de afbeelding ook het attribuut voor een alternatieve tekst, het alt-attribuut:
Nog even op een rijtje: • p is het element voor een alinea. •
is de begintag voor een alinea. • Een element kan attributen hebben, zoals “src" bij een img-element. • De meeste elementen hebben een begin- én een eindtag:
tekst
Inhoudsopgave
18
• Sommige elementen zijn 'self closing', zoals het img-element. Ze hebben geen eindtag, maar aan het eind van de begintag een spatie en slash, vlak voor de eindhaak. Een ander belangrijk element zijn de headings. De titel bovenaan een pagina moet een
krijgen. De “h” staat hier voor “heading”. Alle andere koppen op een pagina krigen ook een heading, bijvoorbeeld h2 of h3.
Opdracht 1. Open een willekeurige pagina (maar niet de homepage) van je site. 2. Klik op de rechtermuisknop en kies “Paginabron bekijken". 3. Zoek in de code op h1. Tip: zoeken doe je met Ctrl-F. 4. Welke tekst staat er in het element h1 (tussen de h1-begintag en de h1eindtag)?
4.2 Enkele HTML-elementen HTML-element
p (paragraph)
Betekenis
alinea (NIET een paragraaf)
HTML-code Voorbeeld
Dit is een voorbeeld.
Dit is een voorbeeld.
ul – ongeordende opsomming (unordered list) HTML-element
Betekenis HTML-code
Inhoudsopgave
ol – geordende opsomming (ordered list) li – opsommingsitem (list item) ongeordende opsommingen geordende opsommingen
19
Olifanten
Apen
Tel eerst tot 10.
Geef dan je mening.
Voorbeeld
•
Olifanten
•
Apen
1. Tel eerst tot 10. 2. Geef dan je mening.
HTML-element
h1 (heading 1)
Betekenis
Kop 1 (of titel van een pagina)
HTML-code
Franse wijnen
Voorbeeld
Franse wijnen
HTML-element
h2
Betekenis
Kop 2
HTML-code Voorbeeld
Inhoudsopgave
Bordeaux
Bordeaux
20
HTML-element
br
Betekenis
nieuwe regel (break) Gemeente Huppeldepup
HTML-code
Kralingerpad 12 9999 ZZ Gemeente Huppeldepup
Gemeente Huppeldepup Voorbeeld
Kralingerpad 12 9999 ZZ Gemeente Huppeldepup
HTML-element Attributen Betekenis HTML-code
img src – adres van de afbeelding (source) alt – alternatieve tekst (alternative) afbeelding
Voorbeeld
Noot: de uitleg hierboven geldt voor HTML versie 4 en ouder. De nieuwste versie van HTML, HTML 5, kent een aantal wijzigingen. Zo mag het element h1 meerdere keren voorkomen op de pagina. Je kunt namelijk met nieuwe tags onderscheid maken tussen onderdelen van de pagina, bijvoorbeeld een menu
Inhoudsopgave
21
en de primaire content. Elk onderdeel kan zijn eigen headingsstructuur hebben. Er kan dus een h1 voor het menu zijn en een h1 voor de gewone content van de pagina.
4.3 CSS De Cascading Stylesheets (CSS) zijn een of meerdere bestanden, waarin de vormgeving van content zoals teksten en afbeeldingen is vastgelegd. In de CSS is vastgelegd welke opmaak er hoort bij welke tag, bijvoorbeeld bij de h1: h1 { font-size:130%; font-weight:bold;}
In bovenstaande CSS-code staat dat de grootte van de tekst 130 % moet zijn en dat de tekst vetgedrukt moet zijn. In de browser wordt de HTML samengevoegd met de CSS tot een leesbare en opgemaakte titel.
Inhoudsopgave
22
Het werken met stylesheets (CSS) is heel handig, want je kunt zo op één plek vastleggen hoe de opmaak in je site moet zijn. In feite ligt de huisstijl van de website vast in de CSS. Ook leg je bijvoorbeeld posities van blokken tekst en afbeeldingen zo vast. De CSS regelt onder andere de opmaak van: • lettertypes • tekstkleur • achtergrondkleur • alinea-afstand • positie tekst en andere elementen , zoals afbeeldingen • weergave knoppen in formulier
Koppelen van CSS aan HTML De standaard HTML-elementen, zoals de p (alinea) en de h1, kun je via de CSS opmaken door in de CSS dit element op te nemen en hier een opmaak aan toe te voegen. In het voorbeeld hieronder is de tekst voor de h1 groot en groen: h1 { font-size:200%; color: green; } Daarnaast kun je de elementen ook opmaken door aan het element een class of id toe te voegen, bijvoorbeeld:
In de CSS staat dan: .date { color: #333; Inhoudsopgave
23
} #summary { font-weight:bold; }
Het verschil tussen een id en een class is dat een id maar 1 keer op een pagina gebruikt mag worden. Een class mag op een pagina onbeperkt aangeroepen worden. Dus de 2e regel in deze code is fout:
Stukje tekst
Foutief gebruik: 2 x dezelfde id gebruikt op 1 pagina.
En deze code is goed:
Stukje tekst
Correct gebruik: een class mag meerdere keren op 1 pagina gebruikt worden.
Deze classes en id's zijn niet alleen handig voor het koppelen van de CSS aan de HTML. Ze worden ook gebruikt om bijvoorbeeld betekenis aan de elementen toe te voegen. Dit is bijvoorbeeld belangrijk voor zoekmachines, want die weten dan ook wat zo'n tekst betekent. Meer daarover verderop in dit hoofdstuk.
Opdracht 1. Open je website in Firefox 2. Ga met Web Developer naar CSS » View CSS 3. Zoek daar naar de h1 en kijk welke code bij de h1 staat aangegeven. Herken je deze code terug in de opmaak van de h1 op de site?
Inhoudsopgave
24
Opnemen van de CSS De CSS kun je op 3 manieren koppelen aan je website1: 1. Inline style: CSS-code in de HTML-tag 2. Interne stylesheet: CSS-code als blok in de head van de pagina 3. Externe stylesheet: CSS als los bestand Voor de duidelijkheid: dé manier om CSS te koppelen is methode 3: de CSS plaatsen in een eigen bestand. CSS is opmaakcode en die hoort niet in de HTML te staan. Omdat de andere methodes vaak voorkomen en het goed is dat je ze herkent, bespreken we ze hier allemaal.
Inline style: CSS-code in de HTML-tag CSS-code kan in de HTML geplaatst worden met het style-attribuut:
Stukje tekst
Hierbij maak je gebruik van een inline style. Als je een stukje tekst uit Word direct plakt in het CMS is dit vaak het gevolg: de opmaakcode vanuit Word is meegekopieerd en staat ook in de webpagina. De oplossing is vaak om de HTML-modus van de editor te kiezen en het styleattribuut met de stijldefinitie weg te halen. Dat vereist wel enige kennis van HTML … Bovenstaand voorbeeld ziet er dan zo uit:
Stukje tekst
De nadelen van het opnemen van CSS via een inline style zijn: • Opmaak staat toch in de HTML. • Opmaak niet aanpasbaar per apparaat (desktop, mobiele telefoon enz.). • Gebruiker kan geen eigen opmaak kiezen. • Aanpassen opmaak moet in elke pagina.
De 2e manier is om de CSS in een stijlblok op te nemen in de head. Dat kun je doen met het style-element: […] <style> p {margin-bottom:1.2em;} […]
Ook aan deze manier van CSS-koppen zitten nadelen: • Opmaak staat toch in de HTML. • Gebruiker kan geen eigen opmaak kiezen.
Externe stylesheet: CSS als extern bestand Zoals gezegd, dé manier om de CSS te koppelen aan de pagina is de CSS op te nemen in een apart bestand en in het head-gedeelte van de pagina te verwijzen naar dit bestand. In code ziet dat er bijvoorbeeld zo uit:
Als je nu een alinea op een bepaalde manier opgemaakt wilt hebben, hoe je alleen in de CSS de opmaak voor p-element op te nemen. De HTML-code ziet er zo uit:
Stukje tekst
In de CSS staat de volgende code:
Inhoudsopgave
26
p { margin-bottom:1.2em; }
Ook kun je met een class of id bij het element opnemen. Via de CSS kun je hier dan opmaak aan toevoegen. Dus bijvoorbeeld in de HTML voeg je de class summary toe:
Stukje tekst
In de CSS staat dan de volgende code: .summary { margin-bottom:1.2em; font-weight:bold; }
Het verschil tussen een id en een class is dat je een class meerdere keren op een pagina kunt gebruiken, terwijl een id slechts 1 keer per pagina mag gebruiken. Voordelen van het gebruik van een externe stylesheet zijn: • Opmaak kan eenvoudig worden aangepast, want een aanpassing hoeft maar 1 keer gedaan te worden. • Opmaak kan gevarieerd worden afhankelijk van de beeldschermgrootte (responsive design). • Gebruiker kan zijn eigen opmaak kiezen. Bijvoorbeeld mensen die last hebben van hele witte vlakken kunnen een grijze achtergrond kiezen. Of witte tekst op een zwarte achtergrond. • Via de elementen en de attributen voeg je ook betekenis toe, bijvoorbeeld met een class "author" maak je duidelijk dat de tekst de naam van de auteur bevat. Dit bespreken we in de volgende paragraaf.
4.4 Semantiek en HTML Tot nu toe hebben we vooral aandacht besteed aan de opmaak van de teksten. Maar de elementen (zoals heading 1 of h1) en de waarde van Inhoudsopgave
27
attributen (zoals class="author") doen nog iets heel belangrijks: je maken ook duidelijk wat de betekenis is van de tekst. Het gaat hierbij om semantiek: het toevoegen van betekenis via HTML-code. Als een regel tekst tussen
-tags staat, betekent dit dat deze tekst de titel van de pagina is. Nog een voorbeeld: een datum van een training, bijvoorbeeld 14 april 2014. Dit kun je dan opmaken als volgt:
14 april 2014
Met deze class heb je betekenis (of semantiek) toegevoegd: je vertelt hiermee aan Google dat de tekst in feite een datum is. Met een element voeg je dus vooral betekenis toe. En met een class of een id kun je ook eigen betekenis toevoegen. Het semantisch opmaken van je teksten heeft 2 belangrijke voordelen: • Zoekmachinevriendelijkheid: Zoekmachines weten zo wat de betekenis is van teksten. • Toegankelijkheid: Mensen die de opmaak van de tekst niet kunnen zien kunnen zo toch de betekenis van de teksten weten.
4.5 Afbeeldingen in HTML of CSS HTML is voor de inhoud, CSS voor de opmaak. Waar horen nu de afbeeldingen, want je hebt informatieve en decoratieve afbeeldingen? Nou, informatieve moeten in de HTML en niet-informatieve staan bij voorkeur in de CSS.
Afbeeldingen in de HTML Als een afbeelding in de HTML is opgenomen dan gebruik je daarvoor het imgelement:
Positioneren van een afbeelding Inhoudsopgave
28
Een afbeelding wil je vaak links of rechts plaatsen. Dat zou kunnen met een inline-stijl (zie hiervoor het onderdeel over CSS), bijvoorbeeld zo: Het nadeel hiervan is dat je opmaak plaatst in de HTML. En in de HTML hoort eigenlijk geen opmaak, die hoort in de CSS. De goede manier om dit te doen is dus inderdaad om in de CSS deze opmaak te plaatsen, bijvoorbeeld: .img_right { float:right; }
Bij het img-element in de HTML plaats je dan een class:
Als je de afbeelding in je CMS kunt positioneren, gebruik dan deze classes, en geen handmatige opmaak. Wat wél mag is het width- en height-attribuut gebruiken in de HTML. Dit is wat verwarrend, want in feite staat hier toch gewoon opmaakcode in de HTML. Een reden hiervoor is dat deze informatie belangrijk is voor browsers bij het opbouwen van de pagina. Ze weten dan welke ruimte ze vrij moeten laten voor de afbeelding, die vaak na de tekst wordt geplaatst. Dus de volgende code is wel goed.
Alt-attribuut
Inhoudsopgave
29
In principe is de afbeelding informatief, brengt dus informatie over. Je hebt dan ook een alternatieve tekst nodig, voor degenen die de afbeelding niet kunnen zien. Dit kan met het alt-attribuut:
De functie van het alt-attribuut is: •
Het geeft aan mensen die spraak- en braille-uitvoer gebruiken de alternatieve tekst.
•
Het wordt getoond in de plaats van de afbeelding als de afbeelding niet getoond wordt, bijvoorbeeld omdat je internetverbinding traag is of je hebt het tonen van afbeeldingen uitgezet om de pagina sneller te laden.
•
Zoekmachines gebruiken deze tekst als beschrijving van de afbeelding. Zo weten zij ook wat er op de afbeelding is te zien.
Title-attribuut Een ander attribuut is het title-attribuut:
De tekst die je hierin plaatst tonen browsers vaak bij mouse-over. Het titleattribuut wordt vaak verwisseld met het alt-attribuut. Eigenlijk is er zelden een reden om het title-attribuut te gebruiken. Een reden om het titleattribuut te gebruiken is om bijvoorbeeld de bron of de fotograaf van de foto te melden, zoals in het voorbeeld hierboven. Vaak zie je dat beide ingevoerd zijn met dezelfde tekst:
Voor blinden en slechtzienden is het juist onhandig als er zowel een alt als een title is ingevuld met dezelfde tekst, want vaak worden beide opgelezen bij de spraakuitvoer.
Inhoudsopgave
30
Afbeelding in de CSS Een puur decoratieve afbeelding is bijvoorbeeld een kleurverloop in de site, zie de afbeelding hieronder.
Afbeelding 2: Decoratieve afbeelding Omdat deze afbeelding geen betekenis (of inhoud) overbrengt, maar alleen bedoeld is voor de vormgeving, hoort deze afbeelding thuis in de vormgeving. In de stylesheet (CSS) is dit bijvoorbeeld zo opgenomen: .wrapper { margin: 0 8px; background-image: url("../img/verloop.gif"); }
In CSS is het technisch niet mogelijk om een alternatieve tekst op te nemen. Dat hoeft hier ook niet, want de afbeelding brengt geen betekenis over. Het komt regelmatig voor dat een niet-informatieve afbeelding toch in de HTML staat. Het goede nieuws is dat hier geen grote bezwaren tegen zijn. Ook vanuit bijvoorbeeld de richtlijnen voor toegankelijkheid is dit toegestaan. Een reden om een niet-informatieve afbeelding toch in de HTML te plaatsen is als jij geen toegang hebt tot de CSS. Bij veel CMS-en is dat het geval. Dan heb je geen andere mogelijkheid dan de afbeelding in de HTML te plaatsen.
Inhoudsopgave
31
Informatief of niet-informatief? Soms is het moeilijk voor je als redacteur om in te schatten of een afbeelding informatief is of niet-informatief. In dat geval mag je vaak vertrouwen op je eigen inschatting. Het is niet verboden om een niet-informatieve afbeelding toch van een alternatieve tekst te voorzien.
4.6 Responsive design Een stukje over responsive design mag hier niet ontbreken, want elke zichzelf respecterende webmanager heeft het hier over. Met responsive design wordt bedoeld dat de lay-out van de website zich aanpast aan de grootte van het beeldscherm waarop de website wordt getoond. Dat is met name belangrijk als de website getoond wordt op kleine schermen, zoals op een mobiele telefoon. Voor een groot deel wordt deze layoutaanpassing gedaan met CSS. Bij een lagere resolutie zorgt de CSS ervoor dat de lay-out wordt gewijzigd. Hieronder zie je een voorbeeld: de 1e afbeelding toont onze website op een gewoon computerscherm.
Inhoudsopgave
32
In de afbeelding hieronder zie je de lay-out op een mobiele telefoon. Je ziet dat voor de mobiele weergave het menu is weggelaten, zodat de bezoeker zo snel mogelijk de primaire content van de pagina te zien krijgt.
4.7 Verschillende HTML-versies HTML kent ook versies. De nieuwste versie is HTML5. De oudere versies – HTML 4 en XHTML 1 – worden ook nog veel gebruikt. In een HTML-versie liggen de "grammaticale" regels van de HTML vastgelegd. In de allereerste regel code van een webpagina is aangegeven welke HTML-
Inhoudsopgave
33
versie gebruikt wordt. Zo weten browsers hoe ze de HTML moeten vertalen naar zichtbare content. Dit proces van vertalen wordt "parsing" genoemd. De HTML-versie is aangegeven met de tag DOCTYPE.
Het gebruiken van een moderne versie van HTML biedt een site om gebruik te maken van de nieuwste technologieën. Meer informatie over verschllende versies vind je op http://nl.wikipedia.org/wiki/HyperText_Markup_Language.
Inhoudsopgave
34
5. HTML-opbouw webpagina De HTML-code van een webpagina is ingedeeld in 2 secties: • head: deze bevat alle meta-informatie • body: deze bevat de content die zichtbaar is in de webpagina Al jouw teksten, afbeeldingen en filmpjes staan dus in de body-sectie van de pagina.
5.1 HTML-code basisopbouw webpagina De HTML-code begint en sluit met het HTML-element: [...]
Daartussen staan 2 delen: • head-gedeelte met de meta-informatie • body-gedeelte met alle content Deze delen hebben ook hun eigen element. De opbouw is dan als volgt: [allerlei meta-informatie] [de content van de pagina]
Voor het html-element staat nog de zogenaamde DOCTYPE-declaratie. Daarin staat aangegeven welke HTML-versie de website gebruikt. Voor HTML5 is dat:
Inhoudsopgave
35
Het html-element bevat ook de taalkeuze van de pagina, bijvoorbeeld:
5.2 Head-gedeelte In de head-sectie staat onder ander het volgende: • title-element: deze bevat de titel van de pagina en is bij de meeste browsers zichtbaar in de browserbalk • meta-tags, zoals keywords en description • links naar de CSS-bestanden • links naar JavaScript-bestanden • de Google Analytics Tracking code
Title-element Een bijzonder HTML-element is de title. Deze bevat de titel van de pagina. Een goede opbouw van de title is: titel content – naam organisatie Deze volgorde past bij de taakgerichtheid van een bezoeker: deze komt eerst voor de content, en dan pas voor de afzender. In HTML-code ziet dat er bijvoorbeeld als volgt uit: Basisopleiding webmanager – The Internet Academy
Het is meta-informatie: de title is geen onderdeel van de content van de pagina, maar wordt getoond in de browserbalk. In de afbeelding hieronder is dit met een groen kader aangegeven.
Inhoudsopgave
36
Afbeelding 3: Title-element, zichtbaar in de browserbalk Dit is ook altijd zo de bedoeling geweest toen HTML voor het eerst werd ontwikkeld door Tim Berners-Lee. In zijn lijst van de 1e HTML-tags staat het volgende over de title-tag: The title is not strictly part of the text of the document, but is an attribute of the node. It may not contain anchors, paragraph marks, or highlighting. the title may be used to identify the node in a history list, to label the window displaying the node, etc. It is not normally displayed in the text of a document itself. Contrast titles with headings. Bron: www.w3.org/History/19921103hypertext/hypertext/WWW/MarkUp/Tags.html De oorspronkelijke betekenis was dus om het venster te voorzien van een label, deze functie is nog steeds dezelfde.
Meta-tags In het head-gedeelte staan vaak meta-tags. De bekendste meta-tags zijn: • description: beschrijving van de pagina • keywords: trefwoorden van de pagina • robots: instructies of zoekmachines de pagina moeten volgen De meta-tags zijn oorspronkelijk ontwikkeld om meta-informatie over een pagina mee te geven. Geleidelijk aan werden ze steeds meer misbruikt en hebben ze hun waarde grotendeels verloren.
Metatag description In code ziet deze er bijvoorbeeld als volgt uit: Inhoudsopgave
37
<meta name="description" content="The Internet Academy verzorgt cursussen, opleidingen en workshops over allerhande internetgerelateerde onderwerpen, zoals usability, vindbaarheid, online statistieken en toegankelijkheid van websites." />
In de meta-tag description hoort een adequate en korte beschrijving van jouw site te staan. Richtlijn is maximaal 250 tekens, waarbij de belangrijkste informatie bij voorkeur in de 1e 170 tekens staan. Deze meta-tag is niet belangrijk voor de vindbaarheid, maar wel belangrijk voor de zichtbaarheid van jouw site, want zoekmachines presenteren de inhoud van deze tag soms bij de zoekresultaten. Een goede, betekenisvolle description-tag kan zo helpen dat mensen vaker op jouw pagina in de zoekresultaten klikken.
Metatag keywords Een voorbeeld van de meta-tag keywords is: <meta name="keywords" content="internet trainingen, cursussen, opleiding, opleidingen, schrijven voor het web, webmanager, basisopleiding webmanager" />
De meta-tag keywords is bedoeld om de belangrijkste trefwoorden van je site in te plaatsen. Omdat deze tag vaak misbruikt werd om hoger te komen in de zoekresultaten maken zoekmachines niet of nauwelijks nog gebruik van deze meta-informatie. Je kunt de tag dus net zo goed niet gebruiken. Een reden om de tag wel te gebruiken is als je eigen zoekmachine de trefwoorden gebruikt voor het indexeren van de content.
Metatag robots Voorbeeld van de code: <meta name="robots" content="index, follow" />
De meta-tag robots geeft de volgende informatie aan zoekmachines: • Indexeer deze pagina wel of niet. • Volg wel of niet de links op deze pagina.
Inhoudsopgave
38
Deze tag is een belangrijk hulpmiddel om aan zoekmachines duidelijk te maken op welke manier zij de pagina moeten indexeren. Het is dus belangrijk dat deze aanwezig is in jouw pagina's. Een andere manier om zoekmachines te informeren over jouw pagina's is het gebruik van het bestand robots.txt. Deze bespreken we in het volgende hoofdstuk. Er zijn 2 belangrijke verschillen tussen de metatag robots en het bestand robots.txt: 1. robots.txt gebruik je voor volledige directories, de metatag robots geeft alleen informate over de pagina waar de tag in staat. 2. Pagina's van een directory die via de robots.txt uitgesloten zijn, kunnen toch door Google geïndexeerd worden, als er naar de pagina's wordt gelinkt. Staat er een metatag robots die aangeeft dat de pagina niet geïndexeerd mag worden, dan gebeurt dat ook niet. Wil je dus echt zeker zijn dat een pagina niet geïndexeerd wordt, dan moet je dit aangeven met de metatag robots.
Links naar bestanden In het head-gedeelte staan ook een aantal links naar bestanden. Bij het opvragen van de pagina worden deze bestanden ook opgehaald. Het zijn onder andere links naar: • CSS-bestanden, bijvoorbeeld:
5.3 Body-gedeelte Na het head-gedeelte van de webpagina krijg je het body-deel. Dit is omsloten met het element body: [content]
In het body-deel staat al je content, dus alles wat je ziet als je naar je website kijkt.
Opdracht 1. Open je website 2. Open de broncode van de pagina. 3. Welke taal is aangegeven in het html-element?
Inhoudsopgave
40
6. Opbouw van je website Als het goed is ziet jouw website er als één geheel uit, maar technisch gezien bestaat het uit een aantal onderdelen: •
CMS met database: bestaat uit een invoerdeel en vaak uit verschillende modulen
•
Templates: samen met de CSS vormen ze de vormgeving van je site
•
Statische content
•
enkele bijzondere bestanden: robots.txt en sitemap.xml
We bespreken deze allemaal hieronder.
6.1 Content Management Systeem (CMS) Bijna alle sites maken tegenwoordig gebruik van een Content Management Systeem (CMS). Met een CMS kun je direct via de website (webbased) content invoeren. Die wordt opgeslagen in een database. Zie de afbeelding hieronder.
Afbeelding 4: CMS met database
Voorbeelden van CMS-en zijn: • WordPress: veel gebruikt voor wat kleinere sites Inhoudsopgave
41
• TYPO 3: een populair open source CMS voor gemeenten • Drupal • closed source CMS-en, zoals van SIM, Green Valley en InfoProjects
Een CMS bestaat in grote lijnen uit: • invoerdeel met een editor • ondershoudsdeel voor de pagina's die niet in een module staan • modulen • database
Invoerdeel Het invoerdeel is waar jij als redacteur jouw content beheert. Je moet inloggen met een inlogaccount. Die bestaat uit een gebruikersnaam en wachtwoord. Het is per CMS heel verschillend wat je precies wel en niet via het CMS kunt onderhouden. De vormgeving ligt meestal grotendeels vast in templates en stylesheets en kun je dus niet direct aanpassen via het CMS.
Editor Teksten en afbeeldingen invoeren doe je via een editor. Vaak is dit een zogenaamde WYSIWYG-editor: Een What-You-See-Is-What-You-Get-editor.
Inhoudsopgave
42
Afbeelding 5: Edit-scherm van WordPress
Als je met meerdere redacteuren werkt is het handig om de mogelijkheden van de editor zo veel mogelijk te beperken. Dus liever niet dat iedereen tekst kan onderstrepen of tekst kan doorhalen. Een editor is een stukje software, dat jouw webbouwer geplaatst heeft in het CMS. Er zijn een paar editors die door vrijwel alle CMS-en gebruikt worden. Dat zijn: • TinyMCE • FCKeditor
De editors zijn configurabel, wat wil zeggen dat ze aanpasbaar zijn. Wil jij bijvoorbeeld allerlei knopjes in de editor niet, dan kan de webbouwer deze weghalen.
Inhoudsopgave
43
Opdracht 1. Ga naar de editor van jouw CMS. 2. Welke knopjes zijn volgens jou niet nodig in de editor?
Noot: De WYSIWYG-editor wordt ook wel een WYSIWYM-editor genoemd: What You See Is What You Mean. Daarmee bedoelen ze dat je met de editor niet zozeer de tekst opmaakt, maar vooral betekenis toevoegt. Door bijvoorbeeld een kopje te voorzien van een opmaakprofiel h2 geef je de betekenis van een kopje mee.
Algemene contentpagina's De basis van het CMS vormen de standaardpagina's, die je kunt beheren. Soms zijn er verschillende soorten standaardpagina's.
Modulen Naast standaardpagina's heeft een website bijna altijd ook content die een speciale opmaak moet krijgen. Denk bijvoorbeeld aan nieuwsberichten, formulieren of een forum. Een module heeft een aantal voordelen: • Het heeft eigen invoervelden. • Het hergebruiken van de content is eenvoudig
Eigen invoervelden Een module heeft een aantal eigen invoervelden. Dit maakt de invoer van content makkelijk. Bijvoorbeeld: Een nieuwsmodule heeft de invoervelden: • Titel • Samenvatting (lead) • Afbeelding Inhoudsopgave
44
• Bodytekst • Datum tonen vanaf • Datum tonen tot en met • Publiceer / depubliceer
Hergebruik van content Doordat modules de content gestructureerd opslaan is het hergebruik hiervan makkelijk. Je kunt bijvoorbeeld de nieuwsberichten op meerdere plekken in je site tonen. Daarvoor hoef je de nieuwsberichten zelf niet aan te passen.
Database Alle content die je invoert met het CMS is opgeslagen in een database. Door te werken met een database is het beheer van de content veel makkelijker. Een database kun je vergelijken met een spreadsheet. Het bevat alle teksten van je site en de koppelingen naar afbeeldingen en downloads. Meestal maakt de webbouwer of provider elke nacht een backup van de database. Heb je bijvoorbeeld per ongeluk een tekst weggegooid, dan is deze via de backup van de vorige dag vaak weer terug te halen. Een ander voordeel van de database is dat je teksten in één keer kunt doorzoeken en vervangen. Stel je wil overal dat bepaalde HTML-code wordt weggehaald, dan kan dat met een zoek-en-vervang-actie op de database. Dit doet in de regel de webbouwer.
Closed source versus open source De code van het CMS kan afgeschermd zijn door de ontwikkelaar. Het CMS is dan closed source: de broncode is niet vrijgegeven. Het kan ook zijn dat de broncode van het CMS wel vrij beschikbaar is en door iedereen gedownload kan worden. Het CMS is dan een open source CMS.
Inhoudsopgave
45
Open source heeft een aantal grote voordelen, maar het grootste voordeel is de leveranciersonafhankelijkheid. Doordat de broncode vrij beschikbaar is, ben je minder afhankelijk van de leverancier/webbouwer. De code is namelijk niet van de webbouwer. Ben je niet tevreden met je webbouwer, dan kun je gewoon een andere zoeken en daarmee verder gaan. Een open source CMS is niet beter dan een closed source. Dat is afhankelijk van veel andere factoren. Er zijn bijvoorbeeld webbouwers die heel goede closed source CMS-en leveren. En er zijn ook slechte open source CMS-en. De laatste jaren zijn open source CMS-en veel populairder geworden bij nonprofit-organisaties, zoals overheden en onderwijsinstellingen. Met name door de kleinere leveranciersafhankelijkheid zijn de beheerskosten vaak ook lager.
6.2 Templates De opmaak van de website is vastgelegd in templates. In zo'n template staat code die op elke pagina terugkomt, zoals een header (bovenste deel van de website), een footer (het afsluitende deel van je site) en een menu. je kunt een template van een website vergelijken met een sjabloon in Word: ook in een sjabloon staan al een paar standaard zaken, zoals het lettertype, zodat je die niet steeds hoeft te definiëren. Contentpagina's hebben vaak een eigen template als basis, en voor bijvoorbeeld de homepage is weer een andere template. Een website heeft vaak meerdere templates. Het werken met templates heeft een aantal grote voordelen:
Inhoudsopgave
46
Afbeelding 6: CMS, database en templates • De site krijgt zo een consistente vormgeving, want de pagina's zijn allemaal vergelijkbaar opgebouwd . • Als beheerder hoef je minder na te denken over de vormgeving, want dat is al grotendeels geregeld in de templates.
Zoals we eerder bespraken ligt de vormgeving voor een deel ook vast in de CSS. De vormgeving is dus vastgelegd in de CSS-bestanden en de templates. De CSS en de templates samen worden vaak ook de theme (het thema) genoemd.
Opbouw template Een webpagina bestaat meestal uit de volgende onderdelen (zie ook afbeelding hieronder): • bovenkant, de header • onderkant, de footer • een menu (boven, links of rechts) • het contentdeel Inhoudsopgave
47
• vaak een rechterkolom met gerelateerde of algemene informatie
Afbeelding 7: Opbouw template Vooral de header (bovenkant), het menu en de footer (de onderkant) zijn voor alle pagina's van de site gelijk of vergelijkbaar.
Soorten templates Vaak heeft een site verschillende soorten pagina's, zoals: • homepage • gewone contentpagina • nieuwspagina • zoekresultatenpagina Inhoudsopgave
48
• formulier Veel CMS-en maken voor elke soort pagina een eigen template. Sommige CMSen doen dit anders en leggen de opbouw niet in een template vast, maar via kleinere blokken. Zo werkt Drupal met “blocks” en “views”.
6.3 CSS De opmaak van teksten en afbeeldingen wordt geregeld met de Cascading Stylesheets (CSS), of kortweg stylesheets. Samen met de templates vormen deze de vormgeving van de site.
Afbeelding 8: Opbouw webpagina met CMS, templates en CSS
6.4 Statische content De meeste content zit in de database van het CMS, maar soms zijn er pagina's die daar buiten vallen en niet aanpasbaar zijn via het CMS. Dit noemen we statische content. Deze content kan meestal alleen door de webbouwer worden aangepast.
Inhoudsopgave
49
Afbeelding 9: Opbouw webpagina: CMS, templates, CSS en statische content
6.5 Bijzondere bestanden voor zoekmachines robots.txt Het bestand robots.txt gebruik je om aan zoekmachines duidelijk te maken welke pagina geïndexeerd mogen worden en op welke pagina's de links gevolgd mogen worden. Het bestand staat in de root van je site. Bij The Internet Academy staat het bijvoorbeeld op www.theinternetacademy.nl/robots.txt. Een voorbeeld van zo'n bestand is: User-agent: * Disallow: /nieuwesite Disallow: /service
Met deze code geven wij het volgende aan: • De informatie geldt voor alle zoekmachines (user-agents = zoekmachines, * = alle)
Inhoudsopgave
50
• Directories die niet geïndexeerd mogen worden zijn “nieuwesite" en “service". Zorg dat dit bestand aanwezig is op je site, want het verbetert de indexering van je site. Naast robots.txt gebruik je ook de metatag robots in de pagina zelf. Daarmee informeer je zoekmachines op het niveau van de pagina, terwijl je met robots.txt deze informatie geeft op het niveau van een directory. Meer informatie hierover vind je in paragraaf ##.
sitemap.xml Met het bestand sitemap.xml geef je aan zoekmachines aan hoe de structuur is van je website. Dit bestand plaats je in de root, net als robots.txt. Google beschrijft dit zelf als volgt2: Sitemaps zijn een methode om Google te informeren over pagina's op uw site die we anders misschien niet zouden vinden. Een XML-sitemap, meestal gewoon sitemap genoemd, is een lijst van de pagina's op uw website. Als u een sitemap maakt en verzendt, zorgt u ervoor dat Google op de hoogte is van alle pagina's op uw site, inclusief de URL's die tijdens de normale crawlprocedure van Google niet worden gevonden. Je kunt een sitemap maken op basis van het sitemapprotocol. Deze kun je vinden op www.sitemap.org. Wil je dat je site goed gevonden wordt, dan is het belangrijk om ook dit bestand te maken en te plaatsen op de webserver
Opdracht 1. Ga naar je website 2. Controleer of het bestand robots.txt aanwezig is (ga naar het adres op www.jouwdomeinnaam.nl/robots.txt) 3. Controleer of het bestand sitemap.xml aanwezig is (ga naar het adres op www.jouwdomeinnaam.nl/sitemap.xml) 2 https://support.google.com/webmasters/answer/156184?hl=nl Inhoudsopgave
51
Inhoudsopgave
52
7. Client en server Een essentieel onderdeel van webtechniek is het model van client en server. De client is bijvoorbeeld de browser waarin je websites bekijkt, de server is de computer waar de website op draait.
7.1 Het client-server-model Het web is opgebouwd volgens het client-server-model: • De browser waarin je een pagina bekijkt, is de client. • De webserver waar de website staat, is de server.
Het model waarbij de client en de server met elkaar communiceren wordt het client-server-model genoemd. Andere voorbeelden van dit model zijn e-mail en FTP. De terminologie client/server komt vaak voor op het web, vandaar dat we hier aandacht aan besteden. Een voorbeeld is de validatie van gegevens in een webformulier. Deze kan in de browser zijn: dan noemen we dat client side. Of kan gebeuren op de server: dan noemen we dat server side. In de Wikipedia wordt het als volgt omschreven: Het client-servermodel is een model in de informatica en computertechniek voor de samenwerking tussen twee of meer programma's, die zich op verschillende computers kunnen bevinden. Kenmerkend voor de asymmetrie in het model is: – de server is permanent beschikbaar en is reactief – een client is bij gelegenheid actief en neemt het initiatief tot communicatie met de server
7.2 Webserver en provider De website van jouw organisatie staat ergens op een computer die verbonden is met het internet. Deze computer heet een webserver. Een server is vergelijkbaar met een gewone computer, maar dan net iets uitgebreider. Inhoudsopgave
53
Deze webserver staat bij een provider of hosting provider. Je kunt ook zeggen dat de provider jouw website host. De kwaliteit van de hosting is bijzonder belangrijk voor de kwaliteit van je website. Een trage server zorgt dat elke bezoeker langer moet wachten. Ook verslechtert de vindbaarheid van je site, want zoekmachines houden niet van sites die langzaam laden. Ook is het belangrijk dat de server niet offline gaat. Offline betekent dat de server tijdelijk geen contact maakt met het internet en niet bereikbaar is. Het is belangrijk dat je de monitoring van je site niet overlaat aan je webbouwer, maar dat je hier zelf ook op let. Als de webbouwer bijvoorbeeld zelf verantwoordelijk is voor de hosting, heeft hij ook andere belangen dan jouw goed te informeren over de snelheid van jouw website. Het monitoren van je site kun je bijvoorbeeld doen met PageSpeed Insights of met een online dienst als WatchMouse.
Afbeelding 10: PageSpeed Insights van Google
Inhoudsopgave
54
7.3 Communicatie tussen client en server Als je in je browser een webpagina gaat bezoeken, stuurt je browser (client) een verzoek aan de server om deze pagina te tonen. Dit verzoek van de client heet een request. De server geeft hierop een antwoord: dat is de response. Deze communicatie wordt op de server bijgehouden in een server log of in de logfiles.
Afbeelding 11: Communicatie tussen client en server
Deze communicatie gaat heel snel. Een server kan meerdere requests tegelijktijd afhandelen.
7.4 Client-side versus server-side Een goed begrip van dit client-server-model is handig bij het begrijpen van verschillende dingen die op een website gebeuren.
Inhoudsopgave
55
Als voorbeeld nemen we de validatie van een eenvoudig contactformulier.
Afbeelding 12: Voorbeeld contactformulier De velden in dit formulier zijn verplicht. Als de velden niet worden ingevuld, dan moet er een foutmelding verschijnen. Deze foutmelding kan direct al in de browser gegeven worden. De validatie is dan client side.
Afbeelding 13: Foutmelding direct client side Het voordeel is dat de invuller al direct de foutmelding krijgt, op het moment dat hij naar het volgende veld gaat. Deze vorm van validatie gaat met JavaScript. De validatie kan ook pas op de server plaatsvinden. Pas als de invuller klikt op versturen, verschijnt de foutmelding. Deze vorm van validatie is server side.
Inhoudsopgave
56
Afbeelding 14: Foutmelding na versturen, server side Het nadeel van de validatie via de server is dat het pas gebeurt als het formulier verstuurd is. Echter, JavaScript werkt niet altijd in elke browser, vandaar dat de validatie via de server ook altijd plaatsvindt.
7.5 JavaScript JavaScript is een programmeertaal. Zoals we net gezien hebben werkt JavaScript direct in de browser. Met andere woorden: JavaScript werkt client side. Omdat JavaScript een scripting-taal wordt genoemd, spreken we ook wel over client-sidescripting.
7.6 Cache Ook zo'n typische webterm: cache. Met cache wordt bedoeld dat er informatie onthouden wordt, bijvoorbeeld een pagina die je eerder hebt bezocht. In elke browser zit cache. Bezoek je een pagina voor de 2e keer, dan hoeft niet alles opnieuw bij de server worden opgehaald, maar kan de pagina uit de cache van de browser worden getoond.
Inhoudsopgave
57
Het cachen vindt ook vaak plaats op de server. Wordt bij de server een pagina opgevraagd die al eerder (bijvoorbeeld door iemand anders) is opgehaald, dan is deze gecached en kan de pagina direct naar de aanvrager (client) worden opgestuurd. Omdat bijna alle sites tegenwoordig werken met een database, worden ook de pagina's opgebouwd met informatie uit de database. Dat kost even tijd. Door pagina's op de server te cachen, is het niet nodig om de database aan te spreken. Caching kan plaats vinden op elke plek tussen de client en de server. Bijvoorbeeld ook in een proxy server. Zo'n server wordt vaak gebruikt als meerdere mensen via één internetverbinding werken, zoals bij organisaties. Caching kan soms vervelend zijn als jij een website onderhoudt. Kijk je in de browser of een wijziging goed is doorgevoerd, kan het zijn dat je geen wijzigingen in de browser ziet. Dan kan het zijn dat je nog kijkt naar de cache. Een paar keer de pagina herladen of drukken op Ctr-F5 kan hier de oplossing geven.
7.7 FTP Behalve via websites zijn er ook manieren om bestanden uit te wisselen. Een vrij technische, maar erg handige methode is via File Transfer Protocol (FTP). Ook hier heb je een client – de FTP-client – en een server - de FTP-server. Via de client kun je op je computer contact maken met de FTP-server. Dit is vaak de webserver. Vervolgens kun je onder andere bestanden heen en weer sturen. Ook kun je enkele eenvoudige serverhandelingen uitvoeren, zoals het wijzigen van de rechten van mappen en bestanden op de server. FTP kan handig zijn als je snel een bestand wil plaatsen op de webserver.
Inhoudsopgave
58
8. HTTP-statuscodes Als iemand in zijn browser een pagina bezoekt, dan gaat er een verzoek (request) vanuit zijn browser naar de webserver, waar de site staat. In deze communicatie gebruiken browser en server zogenaamde HTTPstatuscodes (zie ook http://nl.wikipedia.org/wiki/Lijst_van_HTTPstatuscodes).
8.1 Overzicht HTTP-codes Een request is kort gezegd een verzoek van de client aan de server. Het antwoord van de server heet een response. Over HTTP staat het volgende In de Wikipedia: In HTTP is vastgelegd welke vragen (de Engelse term hiervoor is requests) een cliënt aan een server kan stellen en welke antwoorden (de Engelse term is responses) een webserver daarop kan teruggeven. Deze communicatie moet je je als volgt voorstellen: • De browser (client):"Mag ik bestand index.html van jou?" • De webserver (server gaat even zoeken. Mogelijke antwoorden: ° “Alsjeblieft"(code 200 OK) ° “Kan hem echt nergens vinden" (code 404 Page Not Found) ° “Er ligt hier een briefje dat je ergens anders moet zijn. Ik stuur je verzoek even door". (code 301 Permanet Redirect of 302 Temporary Redirect) ° “Ik ben er even niet." (code 500 Internal Server Error)
Alleen als de server het helemaal niet doet, krijg je geen antwoord van de server. Maar dat komt zelfden voor: meestal krijgt een request van de client antwoord van de server. Daarbij zijn er verschillende antwoorden mogelijk, zoals je hierboven hebt gezien. Dergelijke antwoorden zijn HTTP-statuscodes of server respons codes. De belangrijkste HTTP-statuscodes zijn: • 200: OK: het request van de client is goed beantwoord Inhoudsopgave
8.2 404-melding (pagina niet gevonden) Als een pagina niet gevonden wordt, krijg je in je browser een 404-melding. Deze melding geeft de server als hij een adres niet kan vinden. Het webadres dat je invoerde blijft staan in de adresbalk. Dat is makkelijk, want dan kun je zien of je wellicht een typefout hebt gemaakt bij het invoeren. Als eigenaar van een website probeer je te voorkomen dat bezoekers zo'n melding krijgen. Je kunt het natuurlijk niet altijd voorkomen. Als een bezoeker zelf een typefout maakt of er staat ergens op een andere site een verkeerde verwijzing naar jouw site, dan kun jij daar niet veel aan doen. Maar soms ligt de oorzaak wel in je site, bijvoorbeeld als je een pagina hebt hernoemd en geen doorverwijzing hebt gemaakt van de oude pagina naar de nieuwe. Er zijn een paar programma's waarmee je kunt controleren of deze meldingen ook op jouw site voorkomen: • Hulpprogramma voor Webmasters (zie hoofdstuk 11) • Screaming Frog (zie hoofdstuk 11) • Google Analytics of een andere analytics-programma
Wat de site in ieder geval niet moet doen is een zogenaamde zachte 404melding geven. Een verkeerd adres wordt dan op de server geredirect naar een andere pagina. Die pagina lijkt op een 404-pagina, maar is het niet. Je kunt dit zien, doordat het ingevoerde webadres wordt vervangen door een ander adres. Waarom is dit niet zo handig?
Inhoudsopgave
60
• Google krijgt dan geen melding dat de pagina niet meer bestaat en past zijn database niet aan. • Iemand die het adres heeft ingevoerd ziet dit adres niet meer en weet dus niet of hij wellicht een typefout heeft gemaakt. • In de programma's om je site te controleren kun je dan niet meer makkelijk zien of er 404-meldingen zijn.
8.3 301-melding (permanente redirect) De manier om een pagina door te verwijzen is een 301-redirect. Voorbeeld: Je hebt een pagina “cursus.html" en je wilt deze hernoemen naar “training.html". Als je gewoon de naam verandert, dan krijgen de bezoekers die nog cursus.html intypen een 404-melding. Dat wil je voorkomen, want je wilt graag dat ze toch op de juiste pagina uitkomen. Op de server stel je daarom in dat de pagina cursus.html redirect naar training.html. Dit doe je via een permanente 301-redirect. Veel CMS-en hebben een tool waarmee je dit kunt doen. Je kunt ook een hele directory redirecten. Dat kun je zelf met het bestand .htaccess, maar dit kun je ook aan de webbouwer vragen. In sommige CMS-en kun je dit ook zelf doen. Het redirecten van een pagina kan ook in de browser, met een meta-refresh. Dat is ons inziens altijd af te raden. Meer daarover verderop in het e-book.
8.4 302-redirect (tijdelijke redirect) Als de verwijzing niet definitief is, maar tijdelijk, dan kun je ook een 302redirect gebruiken. Dit is zelden het geval en daarom kun je beter in de gangbare situaties een 301 gebruiken3.
Het verschil met een 301 is bij een 302 dat zoekmachines de oorspronkelijke URL blijven indexeren. Een ander verschil is dat bij een 302 de oorspronkelijke url in de adresbalk blijft staan. Bij een 301 komt de bestemmings-url in de adresbalk. 302's worden ook nog wel eens misbruikt door mensen die hun site hoger willen krijgen in zoekmachines. Conclusie: gebruik voor het redirecten een 301.
8.5 500-melding (serverfout) Als het probleem op de server ligt, dan kan je een 500-serverfout geretourneerd krijgen.
Afbeelding 15: 500-melding van Google
Het kan zijn dat de server tijdelijk overbelast is en dat de pagina een paar seconden later wel geladen wordt. Dit soort fouten wil je echter ook altijd zien te voorkomen. Via Hulpprogramma's voor Webmasters kun je controleren of deze pagina vaak is getoond aan bezoekers. Zo ja, dan is het tijd om dit verder te onderzoeken, bijvoorbeeld door het na te vragen bij je provider. Ook kan het reden zijn om om de performance van je site structureel te gaan meten. Inhoudsopgave
62
8.6 Foutief gebruik Soft 404 Sommige sites hebben een algemene pagina waar alle pagina-niet-gevondenmeldingen op uitkomen. deze pagina heeft een eigen adres. Dus als je zoekt op: www.ncdt.nl/ikbestaniet/ dan redirect zo'n site naar bijvoorbeeld: www.ncdt.nl/pagina-niet-gevonden/ De respons van de server is hier echter niet een 404 Page Not Found, maar een 200 OK. Dit heet een “soft 404”. Je zou wellicht beter kunnen zeggen een 'fake 404. Dit heeft allerlei nadelen: • Zoekmachines herkennen niet dat de pagina niet meer bestaat, want ze krijgen een 200-melding. Dus blijft de verkeerde verwijzing naar de pagina in hun database. Foutieve links naar je site blijven bestaan. • Omdat het adres wijzigt, ziet de gebruiker niet meer welk adres hij heeft ingevoerd. Stel dat hij een typfout heeft gemaakt, dan ziet hij dat niet meer. • Het controleren van je site op 404-meldingen wordt iets onhandiger, want je kunt niet eenvoudig zoeken op de 404's, maar moet gaan zoeken op de naam van de pagina.
Client redirect Het redirecten van een pagina kan ook in de browser, met een meta-refresh. Meestal wordt 0 seconden refreshtijd aangehouden, om de pagina diret door te leiden. Deze browser-redirect heeft echter alleen nadelen:
Inhoudsopgave
63
1. De oude pagina moet eerst geladen worden in de browser voordat deze kan doorverwijzen. De bezoeker moet hierdoor onnodig langer wachten. 2. Zoekmachines zien niet dat de pagina doorverwijst. Dat is wel het geval bij een 301-redirect: daar krijgt de zoekmachine de juiste responscode (301) terug. Een browser-redirect van 0 seconden kan zelfs negatieve gevolgen voor de ranking van je site hebben, omdat zoekmachines dit soms inschatten als spam. Conclusie: gebruik voor het doorverwijzen altijd een server-redirect.
8.7 Verwijderde pagina's: wat doe je er mee? Op dit moment is de trend om websites kleiner te maken. Dat betekent dat je veel pagina's weg moeten gooien. Maar dan loop je het risico dat zoekmachines allemaal 404-meldingen op je site krijgen en dat mensen de pagina's niet meer kunnen vinden. Het beste is te zorgen dat iemand een correcte 404-melding krijgt als hij naar de verdwenen pagina gaat. Zoekmachines krijgen een 404-respons en zullen de link naar de pagina verwijderen. Controleer verder of jouw site geen 404-meldingen heeft. Dat kun je eenvoudig onderzoeken met ScreamingFrog, zie hoofdstuk over tools. Tot slot zijn er verwijzingen vanaf andere sites naar jouw site. Is het een site die veel bezoek op je site aflevert, dan kun je die site doorgeven dat de pagina is verdwenen.
8.8 Nieuwe structuur van je site Een ander vraagstuk wat kan spelen is dat je een nieuwe site hebt gekregen met een nieuwe indeling van de content. Met vaak een nieuw menu. Hoe zorg je er nu voor dat bezoekers de oude content nog kunnen vinden. OF als deze verdwenen is, hoe ze wel verder geholpen kunnen worden.
Inhoudsopgave
64
Hierin zijn 3 stappen belangrijk: • Zorg voor 301-redirects om de oude pagina's door te sturen naar de nieuwe. je kunt ook een hele directory redirecten, bijvoorbeeld als de directory in de oude structuur “producten” heette en in de nieuwe structuur “grasmachines”. • Gebruik een correcte 404 voor pagina's die verdwenen zijn en niet logisch geredirect kunnen worden. • Genereer een nieuwe sitemap.xml en plaats deze weer op je server. (zie hoofdstuk 6 over de sitemap)
Inhoudsopgave
65
9. Afbeeldingen op je site Afbeeldingen op je site maken je content een stuk prettiger om naar te kijken. Bij het plaatsen van afbeeldingen moet je op een paar dingen letten, zodat de afbeeldingen ook snel geladen worden en de HTML-code goed blijft.
9.1 Kenmerken afbeelding Een afbeelding heeft een paar technische kenmerken: • de resolutie: het aantal pixels per inch of centimeter • het bestandsformaat: png, gif of jpg • de afmetingen: de breedte en de hoogte in pixels • de grootte van de afbeelding in bytes
9.2 Resolutie is niet belangrijk voor het web Om maar gelijk een mythe de wereld uit te helpen: de resolutie van een afbeelding is voor het web helemaal niet belangrijk4. Toegegeven, ook ik heb lang gedacht dat een afbeelding een resolutie van 72 pixels per inch moest hebben. Maar de resolutie heeft enkel te maken met het printen (drukken) van de afbeelding, niet met de weergave op een beeldscherm. Dus de resolutie die een afbeelding heeft kun je gerust zo laten staan.
9.3 Bestandstype Voor afbeeldingen voor het web zijn 3 geschikte formaten: • GIF: geschikt voor afbeeldingen met vlakken, zoals logo's • JPEG: geschikt voor afbeeldingen met veel kleuren, zoals foto's • PNG: geschikt voor alle soorten afbeeldingen (combinatie van GIF en JPEG). Een belangrijk kenmerk van GIF en PNG is dat zij ook transparantie ondersteunen. PNG lijkt dus het ideale formaat, omdat het voor alle type afbeeldingen geschikt is. Mijn ervaring is wel dat PNG vaak groter is dan GIF of JPEG. 4 www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/ Inhoudsopgave
66
Afbeelding 16: Afbeelding met vlakken, opslaan als GIF of PNG
Afbeelding 17: Afbeelding met veel kleuren, opslaan als JPEG of PNG Inhoudsopgave
67
9.4 Formaat van de afbeeldingen Dan de grootte van de afbeeldingen in pixels. Wat je moet voorkomen is dat de afbeelding geresized wordt in de browser. Dat gebeurt als de afbeelding in een groter formaat op de server staat als dat deze in je webpagina getoond wordt. Dus als het formaat waarop de afbeelding getoond wordt 100 bij 200 pixels is (dus het formaat in de browser), dan moet de afbeelding op de server exact dezelfde maten hebben. Vaak staat de afbeeldingsgrootte in de HTML aangegeven. In de browser kun je dit zien als je de HTML bekijkt van de afbeelding, bijvoorbeeld: Het betekent niet dat deze maten ook de echte afmetingen van de afbeelding zijn. Je kunt checken of de grootte in de browser klopt met de werkelijke grootte van de afbeelding met de tool Web Developer in Firefox. Kies dan de optie Images » Make Images Full Size (zie het volgende hoofdstuk voor een uitleg). Het groter of kleiner maken van een afbeelding in de browser heet resizen. Het resizen in de browser heeft een aantal nadelen: • Downloaden van een te grote afbeelding kost onnodig meer tijd. • De afbeelding wordt onscherper, want een browser kan slecht verkleinen en vergroten. Zorg dus dat het juiste formaat van de afbeelding al op de server staat. Sommige CMS-en zorgen voor het aanpassen van de afbeelding op de server, maar veel CMS-en doen dit niet. In dat geval moet je de afbeelding al in de goede maten maken vooraf in een fotoprogramma. Voorbeelden van fotoprogramma's zijn: • IrfanView (voor Windows, gratis) • Voorvertoning en Pixelmator (voor de Mac) • Photoshop Elements (Windows en Mac). Je hebt ook nog online programma's, zoals www.pixlr.com. Inhoudsopgave
68
9.5 Grootte van de bestanden Met grootte bedoelen we hier het aantal bytes van de afbeelding. Meestal gaat het dan over kB's. Hierbij staat k voor kilo: 1 kB is 1.024 bytes. Een foto op een website kan vaak vrij licht (in bytes) blijven. Bij veel fotoprogramma's kun je bij het opslaan kiezen voor een bepaalde kwaliteit. Kies dan de laagste kwaliteit waarbij je vindt dat de afbeelding er op het scherm nog steeds goed uitziet. In Photoshop Elements gebruik je hiervoor de optie “Opslaan voor het web". Vervolgens kun je kijken welk bestandstype goed is (GIF, JPEG of PNG) en welke kwaliteit minimaal nodig is.
Afbeelding 18: Opslaan voor het web in Photoshop
9.6 Positioneren van afbeeldingen Een afbeelding kun je links, midden of rechts uitlijnen. Ook kun je aangeven of er nog wat ruimte tussen de afbeelding en de tekst moet komen. Dit positioneren kun je op 2 manieren:
Inhoudsopgave
69
• met opmaakcode in de HTML, bijvoorbeeld met een inline-style (zie het hoofdstuk over HTML en CSS) • met een class, waarmee je verwijst naar de opmaak in de CSS
Dé manier om het te doen is de methode met een class. In een CMS betekent dit bijna altijd dat je de afbeeldingen moet positioneren met de optie “Uitlijnen": daar kun je kiezen tussen links, rechts of midden. Als het goed is koppelt je CMS dan een “class” aan de afbeelding. Deze classes zijn gedefinieerd in de CSS van je site, bijvoorbeeld: .img-right { float:right; padding: 4px 0 4px 8px; /* ruimte tussen afbeelding en tekst */ } In de HTML ziet het er dan als volgt uit:
De andere opties van je CMS, zoals het aangeven van de grootte van de afbeelding en het aangeven van ruimte tussen de afbeelding en de tekst kun je beter niet gebruiken, want die geeft opmaakcode in je HTML. Door het uitlijnen van afbeeldingen te doen met classes zorg je ook voor een uniforme lay-out van je website; immers als je kiest voor bijvoorbeeld links uitlijnen, dan gebeurt dat in de hele site op dezelfde manier. Hieronder de wijze waarop de editor TinyMCE dit aanbiedt: De opties die je niet moet gebruiken zijn:
Inhoudsopgave
70
• Uitlijning • Afmetingen aanpassen • Verticale ruimte • Horizontale ruimte • Rand • Stijl Deze opties geven allemaal een style-attribuut, en die willen we liever niet, onder andere omdat er dan opmaakcode in de HTML staat. De enige optie om wel te gebruiken is "Klasse".
Inhoudsopgave
71
9.7 Naamgeving van afbeeldingen Een afbeelding kun je elke naam geven, maar omdat afbeeldingen getoond worden op het web, kiezen wij zelf altijd voor bepaalde kenmerken: •
Gebruik alleen kleine letters
•
Gebruik geen spaties
•
Gebruik koppeltekens in plaats van liggende streepjes
Gebruik kleine letters Voor sommige servers is er verschil tussen “Hond" en “hond". Om vergissingen te voorkomen is ons advies om standaard altijd alleen kleine letters aan te houden, dus “hond".
Gebruik geen spaties Webadressen kennen in principe geen spaties. Omdat de afbeelding ook een webadres heeft, is het beter om in de afbeeldingsnaam geen spaties te gebruiken.
Gebruik koppeltekens tussen woorden Zoekmachines zien woorden waar underscores (liggende streepjes) als 1 lang woord. “tim_james" is dus voor Google “timjames". Als je een koppelteken (verbindingstreeptje, min-teken of in het Engels een hyphen) gebruikt, dan zien zoekmachines het wel als losse woorden. In het voorbeeld hiervoor wordt het dan “tim-james" Voorbeeld: Niet goed zijn: “Trouwlocatie Amerpoort.jpg" en “Trouwlocatie_amerpoort.jpg Wel goed is: “trouwlocatie-amerpoort.jpg
Inhoudsopgave
72
9.8 Alt, title en omschrijving Een afbeelding kan extra informatie in de HTML meekrijgen met zogenaamde attributen. Er zijn 3 attributen die vaak gebruikt worden; • alt-attribuut voor alternatieve tekst • title-attribuut voor de titel • longdesc voor de link naar de omschrijving
Alt-attribuut: verplicht bij betekenisvolle afbeelding Het alt-attribuut geeft de alternatieve tekst voor de afbeelding. Dit is bijvoorbeeld nodig voor blinde gebruikers, die de afbeelding niet kunnen zien. Met het alternatief krijgen ze toch de informatie van de afbeelding. Bij een informatieve afbeelding mag de alt-tekst daarom niet ontbreken. Is de afbeelding niet-informatief, dan mag de alt-tekst leeg blijven.
Title-attribuut: meestal niet nodig Het title-attribuut geeft de bekende mouse-over-tekst zodra je met de muis over de afbeelding beweegt. Eigenlijk heeft het title-attribuut geen enkele toegevoegde waarde en kan deze over het algemeen beter leeggelaten worden. Een zinvolle mogelijkheid om deze wel te gebruiken is bijvoorbeeld voor het aangeven van het copyright van een foto.
Longdesc: alleen voor link bij complexe afbeeldingen Met de longdesc kun je een link opnemen naar een pagina. Dit is handig als de afbeelding te complex is om in een korte alternatieve tekst op te schrijven. Helaas is de ondersteuning niet bij alle browsers goed. Gebruik je de longdesc, zorg dan daarnaast altijd voor een link naar de pagina5. In HTML zien deze attributen als volgt uit:
5 Zie ook http://webaim.org/techniques/images/longdesc Inhoudsopgave
73
Inhoudsopgave
74
10. Tekst invoeren met je CMS-editor Een klein plekje in dit e-book over het invoeren van tekst lijkt ons wel handig.
10.1 Semantisch opmaken Als je een tussenkop in je CMS invoert kun je deze even vet maken. Voor het oog ziet dit er uit als een kop, maar er is in de code niets dat aangeeft dat het een kop is. Daardoor weten zoekmachines en mensen die jouw tekst niet kunnen zien – zoals blinden – niet dat het een kop is. Bij het opmaken heb je dus geen betekenis – of semantiek – meegegeven aan de tekst.
Als je de tussenkop opmaakt met bijvoorbeeld een Kop 2 (heading 2 of h2), dan krijgt het deze betekenis wel mee. Kop 2 is een opmaakprofiel en in vrijwel elke editor zit een knop voor het toevoegen van opmaakprofielen.
Afbeelding 19: Opmaakprofilelen in de editor van een CMS
Doordat de tussenkop nu ook opgemaakt is als kop, weten zoekmachines en screenreaders dat de tekst een kop is. En op deze manier is de structuur die jij aanbrengt aan de tekst duidelijk voor iedereen en alles.
Inhoudsopgave
75
Semantiek is een kernbegrip van het moderne internet. Het semantische web wordt ook wel Web 3.0 genoemd (zie bijvoorbeeld http://nl.wikipedia.org/wiki/Semantisch_web). Met semantisch opomaken bedoelen we dat de betekenis die jij aanbrengt in teksten ook opgenomen is in de onderliggende HTML-code. Voorbeelden van semantisch opmaken zijn: • kopopmaakprofielen (headings) voor titels van pagina's en tussenkoppen • de opsommingsoptie uit je edtitor voor opsommingen • opmaakprofiel tabelkop gebruiken voor tabelkoppen • het legend-element voor de kop van een fieldset in een formulier
10.2 Scheiden van opmaak en content Naast semantiek is de scheiding van opmaak en content ook een kernelement van het web. De regel is dat alle content in de HTML staat en dat de opmaak in de CSS staat. Dat is in lijn met de genoemde opmaakprofielen. Bij het gebruik van een opmaakprofiel – zoals kop 2 voor een tussenkop – maak je namelijk niet op, maar geef je de betekenis mee dat de tekstregel een tussenkop is. Via de CSS wordt dit vervolgens opgemaakt zodat het er ook uitziet als een kop. (Meer over HTML en CSS staat in het hoofdstuk over HTML en CSS.) Bij het invoeren van teksten en afbeeldingen zorgen we dan ook voor een vrij stricte scheiding van content en opmaak. Dat betekent: • Meer ruimte tussen alinea's maak je niet met een extra lege regel, maar door de CSS van de alinea's te wijzigen. • Een kop maak je niet gewoon vet via je editor, maar geef je het kopopmaakprofiel mee. • Bij het plaatsen van een afbeelding geef je deze niet extra witruimte via het aanpassen van de witruimte om de afbeelding, maar door het juiste opmaakprofiel te kiezen. (zie ook het hoofdstuk over Afbeeldingen).
Inhoudsopgave
76
Een woord vet of cursief maken kan wel, want ook daar geef je in feite semantiek mee aan: dat woord heeft extra nadruk. Je moet voorkomen dat er opmaakinformatie in je HTML staat.
10.3 WYSIWYG-modus en tekstmodus Tegenwoordig heeft elk CMS een zogenaamde What-You-See-Is-What-You-Getmodus (WYSIWYG) voor zijn editor. WYSIWYG is een term die komt uit de Oudheid en is bedoeld om aan te geven dat wat jij op je scherm ziet ook zo uit de printer rolt. (Ja, dat is lang geleden toen ze die term uitvonden.) Vergelijk het met de look & feel van Word. Naast de WYWISYG-modues heeft (gelukkig) bijna elke editor ook een tekstmodus of een HTML-modus. Hieronder zie je een voorbeeld van Wordpress:
Afbeelding 20: Tekstmodus in WordPress
En hieronder zie je editor in het CMS ModX: rechts in de knoppenbalk zie je een knop HTML om naar de HTML-modus te gaan:
Afbeelding 21: WYSIWYG-modus in ModX met knop HTML Ãls je niet weet hoe dat in je eigen CMS zit, bekijk dan even hoe dat daar zit. Voor het opruimen van die rommelcode is de tekst- of HTML-modus noodzakelijk!
Inhoudsopgave
77
10.4 Rommelcode Als je werkt met een CMS zul je regelmatig een stukje tekst ergens vandaan halen om die te plaatsen in je eigen site. Dan heb je ook vast wel eens gemerkt dat het niet eenvoudig copy & paste is. Als je dat doet, komt er allerlei rommelcode mee. Wegkrijgen is vaak a hell of a job, om gek van te worden, want die rotcode blijft er maar in staan. Hieronder leggen we uit hoe je die ongewenste code kunt voorkomen en kunt verwijderen. Eerst even een uitleg over die ongewenste HTML-code. Als voorbeeld neem ik onderstaande tekst: Doel van sociale media Het doel van sociale media is om zichtbaar te zijn als gemeente, maar vooral om snel online met specifieke doelgroepen in contact te komen, informatie/kennis uit te wisselen en signalen op te pikken uit de samenleving. Ik kopieer dat vanuit Word en plak dat direct in een CMS-pagina. Als ik vervolgens de HTML-code van de pagina bekijk, zie ik het volgende:
<span style="color: #4f81bd;"><span style="font-family: Cambria,serif;"><span style="font-size: medium;"><span style="color: #00000a;"><span style="font-family: Arial,serif;"><span style="font-size: small;">Doel van sociale media Het doel van sociale media is om zichtbaar te zijn als gemeente, maar vooral om snel online met specifieke doelgroepen in contact te komen, informatie/kennis uit te wisselen en signalen op te pikken uit de samenleving.
Wat je ziet is dat er allerlei opmaakcode is meegekomen. Voor de duidelijkheid heb ik die even onderstreept. In HTML hoort geen opmaakcode, want die hoort in de CSS (zie het hoofdstuk over HTML en CSS). Maar wellicht nog belangrijker voor je, die opmaak wil je helemaal niet.
Inhoudsopgave
78
In de volgende paragrafen leg ik uit hoe je deze code kunt voorkomen en hoe je deze weghaalt.
10.5 Voorkomen van ongewenste code Er zijn een paar manieren om deze ongewenste meeliftende code te voorkomen. Het is afhankelijk van je editor van je CMS welke methode werkt. De opties, van makkelijk naar moeilijk: 1. In de WYSIWYG-modus van je editor: plak de tekst met Ctrl-Shift-V (Shft-⌘-V voor Mac-gebruikers) 2. In de HTML-modus of tekstmodus van je editor: plak de tekst met Ctrl-V (⌘-V voor de Mac) 3. Plak de tekst in Kladblok, kopieer deze vervolgens en plak deze in je invoerveld in je CMS. Je begrijpt dat optie 3 nogal omslachtig is, en optie 1 het makkelijkst. Probeer het in eens in je CMS. Als optie 1 werkt, ben je een blij mens.
10.6 Ongewenste HTML-code weghalen Maar goed, soms staat die rotzooi-code er toch in. Gelukkig bieden veel CMS-en tegenwoordig een met een goed werkende schoonmaakfunctie (knopje in de editor). Dit zou je als eerste kunnen gebruiken. Werkt dat niet, probeer dan het volgende: 1. Ga naar de HTML-modus (heet soms tekstmodus) van je editor. 2. Heb je de brontekst nog ergens bij de hand, haal dan alle code weg, kopieer de brontekst opnieuw, en plak de tekst met Ctrl-V (⌘-V voor Mac-gebruikers). 3. Heb je de brontekst niet meer bij de hand, verwijder dan de rommelcode.
Inhoudsopgave
79
4. Weet je niet goed wat nu precies de rommelcode is, gooi dan alle HTMLcode weg die je ziet en laat alleen de content staan. Ga vervolgens terug naar de WYSIWYG-modus en maak daar de tekst op.
10.7 Controleren op ongewenste HTML-code Hoe weet je nu of er ongewenste code in je pagina's is geslopen?
Wil je per pagina kijken, dan kun je het makkelijkst dit in de broncode van de pagina controleren. Bij de meeste browsers kun je hiervoor de rechtermuisknop gebruiken. Kies dan “Broncode bekijken" of een vergelijkbare tekst. Wil je je hele site hierop controleren, dan kan dat perfect met de tool ScreamingFrog. Zie daarvoor het volgende hoofdstuk Tools om je website te testen.
Inhoudsopgave
80
11. Apps, webapps en hybride apps Een app is een klein programmaatje dat draait op een mobiele telefoon of een tablet. Naast apps heb je ook webapps. En nog een combinatie van beide: de hybride apps. Als je overweegt een app te ontwikkelen, is het belangrijk dat je voor- en nadelen van deze opties kent. In onderstaande tekst hebben we gebruik gemaakt van het goede artikel Wat is het verschil tussen een native app, webapp of hybride app? op de website van Spijker& co.
11.1 Native apps Een app die speciaal ontwikkeld is voor gebruik op een mobiele telefoon of tablet is een native app. De app kun je niet openen in een browser en is daarmee wezenlijk anders dan een webapp (zie verder). Een app specifiek ontwikkeld voor mobiel heeft de potentie om heel gebruiksvriendelijk te zijn.
Voordelen • Maximaal gebruik van alle beschikbare functionaliteiten van het apparaat • Integratie mogelijkheden met andere apps • Toegang tot de smartphone-bibliotheek voor gebruik van media • Geen internetverbinding nodig • Hogere snelheid op het apparaat
Nadelen • Per platform (Apple iOS, Android, Windows mobile) moet er ontwikkeld worden • Goedkeuring voor plaatsing op store nodig • Verandering/update in de software van het platform kan betekenen dat de techniek aangepast moet worden
Inhoudsopgave
81
11.2 Webapps Een webapp is in feite een soort mini-website. Het wordt gebouwd in HTML, CSS en JavaScript. Het voordeel van een webapp is dat deze vrij goedkoop is om te ontwikkelen. Een goed voorbeeld van een webapp is de afval-app, die veel gemeenten hebben. Je voert je postcode in en je ziet gelijk wanneer je je vuilnis buiten moet zetten.
Voordelen • Voor alle browsers is slechts 1 webapp nodig. • App is altijd up-to-date • Beperkt gebruik van specifieke beschikbare sensoren van je smartphone of tablet (locatie, accelerometer) • Niet afhankelijk van goedkeuring voor plaatsing in een store • Relatief lage ontwikkelkosten
Nadelen • Niet alle functionaliteit van een mobiele telefoon of tablet kan gebruikt worden • Geen opslag van data op het toestel zelf, dus altijd verbinding met internet nodig • Geen distributiekanaal (store) • Technisch gezien zijn er beperkingen doordat je beperkt ben tot de mogelijkheden van HTML, CSS en JavaScript.
11.3 Hybride apps Een hybride app combineert de webapp met een native app. De voor- en nadelen zitten daarom ook tussen beide mogelijkheden in. Het is goedkoper dan een app, duurder dan een webapp en biedt net wat meer mogelijkheden da de webapp.
Inhoudsopgave
82
Voordelen • De gecombineerde mogelijkheden van een native en een webapp • Flexibiliteit • Minimale uitbreidingen mogelijk zonder een echte release in de store
Nadelen • Hybride kan een reden zijn tot afwijzing van het plaatsen in de store. • Onderhouden van 2 omgevingen betekent meer kosten op de lange duur
11.4 Wat moet je nu kiezen Als je je content wil aanbieden voor mobiele platforms, welke vorm moet je dan kiezen? En om het geheel nog moeilijker te maken: je hebt nog responsive sites: sites die zich aanpassen aan het beeldscherm van je gebruiker. Er zijn dus 4 varianten. Het beste kun je beginnnen met je website responsive te maken. Je hebt dan maar 1 site om te onderhouden. Een responsive site werkt op een mobiel scherm, op een tablet zoals een iPad en op een desktop. Dus dan bedien je iedereen. Maar apps bieden aanvullend een belangrijke voordelen, dus een app kan daarna nog steeds van meerwaarde zijn voor jouw klanten. Dit is wel een apart project en je zult de app moeten ontwikkelen én onderhouden. Begin daarom met een goed strategisch plan: 1. Welk probleem van jouw klant wil je oplossen? Is het wel een probleem van de klant of is het een wild niet onderbouwd idee van het management? Misschien bestaat het vraagstuk niet eens (behalve bij je manager) of kan het probleem al opgelost worden door je website responsive te maken. 2. Welke functionaliteit is nodig? Als je eerst een webapp bouwt en je merkt na 2 maanden dat je eigenlijk een app nodig hebt, dan heb je onnodig geld versplild aan de webapp. Bedenk daarom vooraf wat nodig is om het probleem effectief op te lossen. Inhoudsopgave
83
3. Welk budget heb je? Van goedkoop naar duur: responsive site, webapp, native app en hybride app. 4. Voor welke platformen wil je ontwikkelen? Pak je webstatistieken erbij en bekijk welke platformen veel gebruikt worden. Het is vaak al voldoende als je ontwikkelt voor Android en voor iOS van Apple.
Inhoudsopgave
84
12. Tools om je website te testen Tools die we hier bespreken: Hulpprogramma's voor webmasters, Web Developer (add on voor Firefox), ScreamingFrog, Colour Contrast Analyser, Testen op kleurenblindheid, HTML_CodeSniffer, WAVE Accessibility Tool en Pingdom Website Speed Test.
12.1 Webmaster Tools (Hulpprogramma’s voor webmasters) Behalve Google Analytics heeft Google nog een ander product dat enorm belangrijk is voor webmasters om hun eigen site te monitoren: webmasterhulpprogramma's. Wij geven de voorkeur aan de Engelse benaming: Webmaster Tools.
Beginpagina Webmaster tools
Ga naar je Google-account.
Klik op Producten.
Je krijgt dan een lijst met de producten van Google. Zie hieronder.
Klik op Webmasterhulpprogramma's (daar hadden ze beter een korter woord voor kunnen bedenken ...).
Je krijgt dan een lijst met een of meerdere websites. Kies de website die je wilt beheren.
Andere manier om het te vinden is om in Google te zoeken op “Hulpprogramma’s voor webmasters”. Dat is vaak nog het makkelijkst.
Inhoudsopgave
85
Je bent nu in de Webmaster tools. Het product bestaat uit de volgende onderdelen: • Configuratie • Instellingen
Configuratie Instellingen Hier kun je je voorkeursdomein en crawlsnelheid instellen. Bij voorkeur stel je het voorkeursdomein niet hier in, maar doen je dat via de instellingen op je server of in de configuratie van je DNS. Maar als dat allemaal niet kan, dan kun je dat hier doen. Bij crawlsnelheid kun je de aanbevolen keuze van Google kiezen.
Sitelinks Sitelinks zijn de links die Google laat zien bij een zoekresultaat, zie hieronder een voorbeeld bij het zoeken op Purmerend.
Inhoudsopgave
86
Je hebt enkel de mogelijkheid om links weg te halen (te “degraderen"), je kunt niet aangeven dat er bepaalde links moeten worden toegevoegd.
URL-parameters configureren Het configureren van url-parameters is nodig als je meerdere url's hebt voor dezelfde content. Vaak is dat zo als er bijvoorbeeld sessions-id's zijn. Google geeft zelf de volgende voorbeelden: http://www.example.com/producten/dames/jurken/groen.htm http://www.example.com/producten/dames?category=jurken&color=groen Beide adressen verwijzen naar dezelfde pagina. Om duplicate content te voorkomen en de indexatie van de pagina's te optimaliseren kun je hier urlparameters configureren. Beter is het om je site aan te passen als je meerdere webadressen voor dezelfde pagina's hebt.
Adreswijziging Inhoudsopgave
87
Als je je site verhuist naar een nieuw domein kun je dat hier aangeven. Ook hier is onze voorkeur om dat zelf goed te regelen op de server met een 301redirect op het domein. In dat geval is de mogelijkheid hier binnen Hulpprogramma's niet nodig.
Gebruikers Hier beheer je de gebruikers van deze tools. Je kunt gebruikers toevoegen en verwijderen. Gebruikers kun je beperkte of volledige rechten geven.
Partners Als je wilt dat iemand namens jouw site kan handelen, kun je de betreffende persoon als partner toevoegen. In tegenstelling tot eigenaren en gebruikers van sites, kunnen partners geen sitegegevens bekijken of siteacties uitvoeren in Webmaster Tools. Partners mogen echter wel andere taken uitvoeren. Zo kunnen leden van het YouTube-partnerprogramma bijvoorbeeld een officieel YouTube-kanaal maken voor, en koppelen aan, jouw site.
Gezondheid Dit onderdeel heb ik niet verder uitgewerkt. Ik volsta met het noemen van de mogelijkheden.
Crawlfouten • Server-fouten, zoals niet bereikbaarheid (of niet snel genoeg bereikbaar) van de server • Afwijkende statuscodes, zoals 404-melding • DNS-fouten • Serverconnectiviteit • Ophalen van robots.txt
Crawlstatistieken • Statistieken van de Google-bot
Geblokkeerde url's Inhoudsopgave
88
• Url's die met robots.txt zijn geblokkeerd.
Ophalen als Google Voor het opsnorren van specifieke problemen, bijvoorbeeld als de site gehackt is en er ongewenste content staat. Je kunt hier ook nieuwe onderdelen van je site aanmelden.
Indexeringsstatus Het aantal pagina's dat Google bot indexeert over een bepaalde periode.
Malware Of je software op je server hebt staan die illegale dingen doet, zoals spammen of virussen verspreiden. Hier zal bijna altijd staan dat Google geen malware heeft gevonden. Is dat er toch, dan zul je direct in actie moeten komen om dit op te pakken. In de Help van Webmaster Tools staat hier meer uitleg over.
Verkeer Zoekopdrachten Dit onderdeel is interessant, vooral omdat deze informatie niet via bijvoorbeeld Google Analytics te krijgen is. Het geeft aan hoe vaak een pagina getoond is in de zoekresultaatpagina's en hoe vaak er op doorgeklikt is.
Links naar uw site Geeft een overzicht van de sites die linken naar jouw site.
Interne links Het aantal interne links dat naar een pagina verwijst, is voor zoekmachines een signaal voor het relatieve belang van die pagina. Als een belangrijke pagina niet in de lijst wordt weergegeven, of wanneer een minder belangrijke
Inhoudsopgave
89
pagina een relatief hoog aantal interne links bevat, moet je wellicht de interne linkstructuur aanpassen.
Optimalisatie Sitemap Controle of je een sitemap hebt geplaatst. Zo niet, dan kun je er een direct toevoegen.
URL's verwijderen HTML verbeteringen Google controleert in hoeverre de HTML goed is, onder andere of meta descriptions niet dubbel voorkomen. Zorg dat hier geen meldingen in staan.
Contentzoekwoorden Dit is ook een interessant onderdeel. Google geeft hier aan welke belangrijk trefwoorden gevonden zijn en aan welke pagina's deze gekoppeld zijn. Als er onverwachte woorden zijn, dan kan de site gehackt zijn. Als verwachte woorden ontbreken, dan kan het zijn dat de betreffende pagina niet geïndexeerd is. Het kan helpen om een Sitemap te plaatsen om te zorgen dat alle pagina's geïndexeerd worden. Het kan ook zijn dat de woorden zijn uitgesloten omdat ze veel op de site voorkomen of omdat ze te algemeen zijn.
Gestructureerde gegevens Het nieuwe internet is het semantisch web, Web 3.0. Daarbij staat de semantiek van informatie centraal. Daarmee wordt bedoeld dat je aan content betekenis (semantiek) toevoegt, zodat zoekmachines dit beter kunnen interpreteren. Bekende manieren om content te structureren zijn: • Correct gebruik van HTML-tags, zoals
voor paginatitels en
voor lijsten. Inhoudsopgave
90
• Zinvolle namen voor class en id in de HTML • Gebruik van Rich Snippets.
Labs Verder niet uitgewerkt.
12.2 Web Developer (add on voor Firefox) Op het web zijn veel tools om je website zelf te testen. Een aantal van deze tools zijn als 'add on' beschikbaar voor de browser Firefox. Een handige add on is Web Developer, online te vinden op https://addons.mozilla.org/nl/firefox/addon/web-developer/. De add on Web Developer is handig voor elke webredacteur. Je hoeft dus geen techneut of programmeur te zijn. Ook als je alleen maar content invoert, is deze add on heel handig. Tenminste, als je het ook belangrijk vindt dat je website goed vindbaar en toegankelijk is … Als je Web Developer hebt geïnstalleerd heb je een extra werkbalk boven je adresbalk, zie hieronder (even in tweeën geknipt voor de leesbaarheid van de tekst).
Afbeelding 22: Webdeveloper (1e deel werkbalk)
Afbeelding 23: Webdeveloper (2e deel werkbalk)
De balk bevat de volgende onderdelen: Inhoudsopgave
91
1. Disable
5. Images
9. Resize
2. Cookies
6. Information
10.Tools
3. CSS
7. Miscellaneous
11.View Soure
4. Forms
8. Outline
12.Options
Handige opties zijn: • Disable » JavaScript Javascript uitzetten, zodat je kunt zien hoe de site werkt als Javascript niet werkt • Forms » Populate form fields Handig om een formulier te testen. Met deze optie worden alle velden ingevuld. • Images » Display alt-attributes Toont alle alt-teksten van afbeeldingen • Images » Make images full size Controle of de redacteur de afbeeldingen wel in de juiste grootte heeft geplaatst • Outline » Outline Headings Voor controle of je de koppen goed hebt opgemaakt • Outline » Outline Tables » Outline Table Cells Controle of er tabellen op de pagina zijn gebruikt • Tools » Validate HTML Controle of je bij de invoer geen ongeldige HTML hebt ingevoerd De tool heeft meer mogelijkheden, dus bekijk de tool gerust verder.
Inhoudsopgave
92
12.3 Screaming Frog Onze meest geliefde tool voor het controleren van een site is Screaming Frog, te vinden op www.screaming-frog.co.uk. Er is een gratis versie en een betaalde. Deze laatste kost ongeveer € 120, maar die is zijn geld meer dan waard. Hieronder bespreken we de betaalde versie. In de training Webtechniek bespreken we deze tool uitgebreid. Screaming Frog is een spider. Dus net zo'n stukje software als Google gebruikt voor het indexeren van jouw site. Hij bezoekt alle pagina's, bekijkt de code en bekijkt ook bijvoorbeeld welke server-response-codes worden teruggegeven. Je kunt met deze tool bijvoorbeeld controleren: • Gebruik van inline stijlen (zie het hoofdstuk over CSS). Je controleert dan op de code “style="" • 404-meldingen • lengte title • lengte h1 • aanwezigheid alt-tekst • aanwezigheid tabellen (die je dan met de hand kunt controleren) • aanwezigheid Google Analytics-trackingcode Hieronder werken we ScreamingFrog uit met enkele voorbeelden.
Custom filters Handig in de betaalde versie van ScreamingFrog is het onderdeel Custom filters. Daarmee kun je zoeken op tekstfragmenten, bijvoorbeeld op het gebruik van inline stijlen (zie het hoofdstuk over CSS). Je komt daar via Configuration » Custom (zie screenshot)
Inhoudsopgave
93
In het dialoogvenster dat je dan krijgt, stel je de filters in, zie volgend screenshot.
Je kunt daar de filters instellen. Hierboven hebben we bijvoorbeeld enkele filters ingesteld om te kijken of er opmaakcode in de HTML staat. De code “
94
Je kunt deze optie ook gebruiken om te controleren of de Google Analytics trackingcode overal geïnstalleerd is.
Spideractie starten 1. Start ScreamingFrog 2. Ga naar het invoerveld bovenin “Enter URL to spider" 3. Voer daar jouw domeinnaam in en klik op Start. 4. Bij een normale verbinding scant ze zo'n 1.000 url's per minuut. 5. Als de spider na 10 minuten nog doorgaat, klik dan op stoppen. Op sommige onderdelen, zoals agenda's, blijft ze maar “doorspideren". 6. Als je op een later moment verder wilt met de resultaten kun je deze ook opslaan.
Voorbeeld: controleren 404-meldingen Hieronder een voorbeeld in het gebruik van ScreamingFrog, namelijk de controle op 404-meldingen Inhoudsopgave
95
1. Als het goed is in het bovenste menu het tabblad “Internal" open, zie screenshot hieronder.
2. Klik in het venster met de webadressen op Status Code, zodat deze aflopend sorteert. Als er 404-meldingen zijn, komen deze bovenaan. 3. Selecteer een 404-melding. 4. Kies uit het ondermenu de optie In Links (zie screenshot hierboven). Daar zie je de link staan die leidde tot een 404-melding.
12.4 Colour Contrast Analyser De laatste tool die we hier bespreken is Colour Contrast Analyser. Dit is een klein programmaatje, het werkt onder Windows en op de Mac. Je kunt het downloaden van www.paciellogroup.com/resources/contrastAnalyser. Het programma spreekt waarschijnlijk voor zich. Voor de analyse van het kleurcontrast kies je de kleur van de voorgrond en de kleur van deachtergrond. Dat gaat als volgt: Inhoudsopgave
96
1. Klik op het witte vlak bij Kleurkeuze. 2. Er opent een dialoogvenster. Klik daar op het vergrootglas. 3. Je kunt dan de kleur aanstippen van datgene dat je wilt onderzoeken.
Als je in het eerste venster gekozen hebt voor Luminositeit, dan krijg je in het scherm eronder het contrastratio.
12.5 Testen op kleurenblindheid Er zijn online verschillende tools. We hebben daar echter nog weinig ervaring mee. Weet je een goede tool, mail ons graag op [email protected]. Inhoudsopgave
97
Een tool is www.etre.com/tools/colourblindsimulator/.
12.6 HTML_CodeSniffer HTML_CodeSniffer is een handig programma om te checken of de HTML van een webpagina voldoet aan de richtlijnen voor toegankelijkheid. De tool kun je downloaden van http://squizlabs.github.io/HTML_CodeSniffer. Met toegankelijkheid wordt bedoeld: de bruikbaarheid van de site voor mensen met een functionele beperking. Er zijn internationale richtlijnen voor webtoegankelijkheid, de Web Content Accessibility Guidelines (WCAG) 2.0. HTML_CodeSniffer test in hoeverre de HTML van de pagina voldoet aan WCAG 2.0. Nadat je de tool hebt geïnstalleerd, ga je naar een pagina die je wilt testen. Klik in je bladwijzerbalk op HTML_CodeSniffer en je krijgt een rapportage, dat er ongeveer zo uit ziet als in onderstaande afbeelding.
Inhoudsopgave
98
12.7 WAVE Accessibility Tool Op wave.webaim.org/ vind je nog een tool om jouw website te testen op toegankelijkheid. Bekijk in ieder geval de errors: dat zijn de items die niet voldoen aan WCAG. In de linkerbalk kun je kiezen voor: •
Summary
•
Details
•
Documentation
•
Outline: overzicht van alle headings die op de pagina worden gebruikt.
Bij details kun je nog kiezen voor Level A of level AA.
12.8 Snelheid site testen op Pingdom Website Speed Test Een van de factoren die het meest bijdragen aan de tevredenheid van gebruikers en de vindbaarheid van je site in zoekmachines is de laadsnelheid van je site.
Inhoudsopgave
99
Op Pingdom Website Speed Test kun je je site testen op snelheid. Je vindt de site op http://tools.pingdom.com/fpt/. (Ook kun je tools gebruiken die permanent de snelheid monitoren.)
Wil je je site testen voor Nederland, klik dan op Settings en check Amsterdam aan. Vul vervolgens het domein in klik op Test Now.
Eventjes wachten en dan krijg je het rapport. Belangrijk is de melding hoe snel je bent in vergelijking met andere sites: In ons geval staat er "Your website is faster than 98 % of tested websites. Dat is een goed bericht. Onze ervaring is dat als je onder de 70 % functioneert, jouw website te traag is.
Het nadeel hiervan is dat je opmaak plaatst in de HTML. En in de HTML hoort eigenlijk geen opmaak, die hoort in de CSS. De goede manier om dit te doen is dus inderdaad om in de CSS deze opmaak te plaatsen, bijvoorbeeld: .img_right { float:right; }
