E-book Webtechniek - The Internet Academy

Dit e-book hoort bij de opleiding Digitale Dienstverlening en de training
Webtechniek.
Titel:
Webtechniek voor niet-techneuten
Uitgever:
The Internet Academy
Auteur:
Jaap van de Putte
Versie:
16 augustus 2016
Met dank aan:
Jules Ernst, 200ok
Mark van Vlerken en Michèlle van Vlerken-Thonen,
Vierkante Meter
Michiel Roering, gemeente Den Helder
Ronald Lamars, gemeente Oudewater
Copyright (C) 2016 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 Front-Cover 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......................................................................................... 9
2.1 Soorten browsers.............................................................................. 9
2.2 Browsers voor computers.................................................................... 9
2.3 Browsers voor mobiele toepassingen..................................................... 12
2.4 Test je website in verschillende browsers............................................... 13
3. Het webadres of URL....................................................................... 15
3.1 URL en URI.................................................................................... 15
3.2 Opbouw webadres........................................................................... 15
3.3 Http en https................................................................................. 16
3.4 Subdomeinen................................................................................. 18
3.5 Subdirectories................................................................................ 18
4. HTML en CSS.................................................................................20
4.1 HTML........................................................................................... 20
4.2 Enkele HTML-elementen (HTML5).........................................................22
4.3 CSS............................................................................................. 24
4.4 Kleurcontrast................................................................................. 30
4.5 Semantiek en HTML.........................................................................31
4.6 Afbeeldingen in HTML of CSS...............................................................32
4.7 Responsive design............................................................................36
4.8 Verschillende HTML-versies................................................................38
5. HTML-opbouw webpagina................................................................. 40
5.1 HTML-code basisopbouw webpagina......................................................40
5.2 Taalkeuze.....................................................................................41
5.3 Head-gedeelte...............................................................................41
5.4 Body-gedeelte................................................................................ 45
6. Opbouw van je website....................................................................46
6.1 Content Management Systeem (CMS).....................................................46
6.2 Templates..................................................................................... 51
Inhoudsopgave
Pagina 5
6.3 CSS............................................................................................. 54
6.4 Statische content............................................................................ 54
6.5 Bijzondere bestanden voor zoekmachines...............................................55
7. Client en server............................................................................. 57
7.1 Het client-server-model.................................................................... 57
7.2 Webserver en provider...................................................................... 57
7.3 Communicatie tussen client en server...................................................58
7.4 Client-side versus server-side.............................................................59
7.5 JavaScript..................................................................................... 61
7.6 Cache.......................................................................................... 61
7.7 FTP............................................................................................. 62
7.8 Snelheid website............................................................................. 62
8. HTTP-statuscodes........................................................................... 64
8.1 Overzicht HTTP-codes......................................................................64
8.2 404: Niet gevonden.......................................................................... 64
8.3 410-melding (Pagina is weg)...............................................................65
8.4 301-melding (permanente redirect)...................................................... 66
8.5 302-redirect (tijdelijke redirect).........................................................67
8.6 500-melding (serverfout)................................................................... 67
8.7 Foutief gebruik............................................................................... 68
8.8 Nieuwe structuur van je site...............................................................69
9. Afbeeldingen op je site.................................................................... 70
9.1 Kenmerken afbeelding...................................................................... 70
9.2 Resolutie is niet belangrijk voor het web................................................70
9.3 Bestandstype................................................................................. 70
9.4 Formaat van de afbeeldingen..............................................................72
9.5 Grootte van de bestanden..................................................................72
9.6 Positioneren van afbeeldingen............................................................73
9.7 Naamgeving van afbeeldingen............................................................. 75
9.8 Alt, title en omschrijving................................................................... 76
10. Tekst invoeren met je CMS-editor.....................................................78
10.1 Semantisch opmaken......................................................................78
Inhoudsopgave
Pagina 6
10.2 Scheiden van opmaak en content.......................................................79
10.3 WYSIWYG-modus en tekstmodus......................................................... 79
10.4 Rommelcode................................................................................80
10.5 Voorkomen van ongewenste code.......................................................81
10.6 Ongewenste HTML-code weghalen......................................................82
10.7 Controleren op ongewenste HTML-code................................................ 82
11. Apps: native apps, webapps en hybride apps.......................................83
11.1 Native apps.................................................................................. 83
11.2 Webapps..................................................................................... 83
11.3 Hybride apps................................................................................ 84
11.4 Wat moet je nu kiezen....................................................................85
12. Tools om je website te testen..........................................................86
12.1 Toegankelijkheid toetsen met toetsenbord............................................86
12.2 Controle alternatieve teksten afbeeldingen........................................... 87
12.3 Google Search Console....................................................................87
12.4 Web Developer (add on voor Firefox)................................................... 87
12.5 Screaming Frog.............................................................................88
12.6 Colour Contrast Analyser.................................................................. 93
12.7 WCAG Contrast Checker (add on voor Firefox)........................................ 94
12.8 Testen op kleurenblindheid............................................................... 95
12.9 HTML_CodeSniffer..........................................................................95
12.10 WAVE Accessibility Tool..................................................................96
12.11 Pingdom Website Speed Test............................................................ 97
Inhoudsopgave
Pagina 7
1. Inleiding
In onze trainingen merken we dat veel cursisten moeite hebben met de technische
aspecten van het vak. 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 ons achterhoofd hebben wij 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 Opleiding
Digitale Dienstverlening.
Inhoudsopgave
Pagina 8
2. Browser
Een browser of webbrowser is het programma waarmee je websites bekijkt. Dat
kan bijvoorbeeld zijn op je computer, je tablet of je mobiele telefoon.
2.1 Soorten browsers
De bekendste browsers 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
Pagina 9
Inhoudsopgave
Pagina 10
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.
Over het algemeen blijken organisaties vaak verouderde browsers te gebruiken.
Bijna altijd gaat het daarbij om 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.
Hieronder nog het gebruik van de verschillende IE-versies (bron: StatCounter). IE 11
stijgt geleidelijk in gebruik, alle andere IE-versies dalen. IE 8 en 10 scoort minder
dan 2 %, IE 6 en 7 zitten praktisch op 0. IE 9 zit boven de 2 % en IE 11 zit op 17 %.
Inhoudsopgave
Pagina 11
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
Inhoudsopgave
Pagina 12
2.4 Test je website in verschillende browsers
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
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/.
Verschillende systemen
Dezelfde browsers op verschillende systemen verschillen ook van elkaar. Zo kan de
lay-out op Firefox onder Windows er anders uit zien dan die van Firefox op de Mac.
Daar moet je dus ook op testen.
Inhoudsopgave
Pagina 13
Mobiel testen
Uiteraard moet je je site ook mobiel testen. Een handige site om je site op
verschillende devices te testen is mobiletest.me. Hiermee kun je testen op de meest
gangbare smartphones en besturingssystemen, zoals Android, Apple iOS en Windows
Mobile.
Er zijn ook bedrijven waar je met echte smartphones en tablets kunt testen,
zogenaamde Open Device Labs. Enkele voorbeelden:
•
odl.netvlies.nl
•
odl.vicompany.nl
Meer informatie vind je op opendevicelab.com.
Inhoudsopgave
Pagina 14
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:
• http:
het protocol
• www:
subdomein
• gemeentebest.nl: domein
• nl:
topleveldomein
• zoeken/?q=rommelmarkt: pad
• zoeken: subdirectory (of map)
Inhoudsopgave
Pagina 15
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:
https://www.theinternetacademy.nl/trainingen/opleiding-digitaledienstverlening#ervaringen
Er zijn verschillende protocollen:
• http of https: protocol voor webpagina's (zie verder)
• maito: mail-protocol
• ftp: File Transfer Protocol
3.3 Http en https
Secure Socket Layer (SSL)
Een volledige webadres bevat het voorvoegsel http. Dit voorvoegsel is het protocol.
Het kan zijn dat de website beveiligd is met Secure Socket Layer (SSL). Aan het
protocol wordt dan een "s' toegevoegd, het protocol wordt dan "https". Bij SSL
worden alle gegevens versleuteld verstuurd, waardoor ze minder makkelijk door
onbevoegden zijn te achterhalen.
Een voorbeeld van een adres is:
https://www.theinternetacademy.nl
Het gebruik van het certificaat herken je aan het slotje in de adresbalk:
Bij een uitgebreid certificaat is ook de organisatienaam zichtbaar bij het slotje:
Met die extra 's' hoef je in de communicatie geen rekening te houden: als je het
www-adres gebruikt, voegt de server daar vanzelf http of https aan toe.
Problemen met https
Er kunnen problemen zijn met het gebruik van SSL.
Inhoudsopgave
Pagina 16
Het 1e vaak voorkomende probleem is dat niet alle inhoud op de pagina gebruik
maakt van SSL. Bijvoorbeeld als er een plaatje op je website staat waarbij in de url
'http' staat in plaas van 'https'. Er komt dan geen groen slotje in de adresbalk, maar
een grijze met een waarschuwingsicoontje. Als je klikt op het icoontje krijg je een
toelichting.
Een 2e probleem ontstaat als het certificaat verlopen is of niet goed is geïnstalleerd.
Probeer dit te voorkomen: de foutmelding die bezoekers krijgen doet afbreuk aan je
reputatie en het kan zijn dat bijvoorbeeld je bezoekersstatistieken ook niet meer
goed werken.
Inhoudsopgave
Pagina 17
Een 3e probleem is als er zowel gebruik gemaakt wordt van http en https,
bijvoorbeeld als de zoekfunctie over https loopt en de rest van de site niet.
Bezoekers krijgen dan als ze de zoekfunctie weer verlaten de waarschuwing 'Deze
verbinding is niet beveiligd'. Ook dit wil je liever niet en kun je voorkomen door óf
alles over https te laten lopen óf door te zorgen dat het deel dat over https loopt
niet terug gaat naar http. Dit laatste kun je bijvoorbeeld doen als je een webwinkel
hebt. Zodra iemand gaat afrekenen, start het https-deel. Dat doet amazon.com
bijvoorbeeld.
3.4 Subdomeinen
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
elo.theinternetacademy.nl als onze digitale leeromgeving.
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 niet versterkt, want de waarde van het subdomein komt niet ten goede
aan je hoofddomein. Dat is geen probleem als het echt andere content is en een
andere functie, zoals in ons voorbeeld met het subdomein elo. 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.
3.5 Subdirectories
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.
Inhoudsopgave
Pagina 18
Het is belangrijk om goed het verschil te weten tussen een subdirectory en een
subdomein, en de voor- en nadelen van beide.
Inhoudsopgave
Pagina 19
4. HTML en CSS
Een webpagina is geschreven in de codetaal 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-tags , HTML-elementen en
HTML-attributen. Dat leggen we hieronder allemaal uit.
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 <p>. De "p" is van het Engelse paragraph, wat alinea betekent. Na de tekst
volgt er een sluit-tag </p>:
<p>Dit is een stukje tekst.</p>
HTML-elementen
De begin- en sluittag vormen samen het HTML-element. In het vorige voorbeeld heb
je dus het element p en de tag <p>.
Er is niet altijd een begintag en een eindtag. Sommige elementen hebben geen
eindtag. Dit is bijvoorbeeld het geval bij het element voor een afbeelding, het
element img:
<img src="plaatje.gif">
En bij het br-element
Postbus 12<br>
Een ander belangrijk element zijn de headings. De titel bovenaan een pagina moet
een <h1> krijgen. De "h" staat hier voor "heading". Alle andere koppen op een pagina
krigen ook een heading, bijvoorbeeld h2 of h3.
Noot: 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
Inhoudsopgave
Pagina 20
nieuwe tags onderscheid maken tussen onderdelen van de pagina, bijvoorbeeld een
menu 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. Overigens is dat nog steeds af te raden, want zoekmachines en
screenreaders kunnen hier nog niet goed mee omgaan.
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:
<img src="12345.gif" alt="Golden Retriever">
Commentaar in HTML
Je kunt in HTML tekst ook markeren als commentaar. Het wordt dan niet op de
website getoond, je kunt het alleen zien in de broncode.
Hiervoor gebruik je "<!--" aan het begin en "-->" aan het eind van de tekst die je niet
wil tonen. De code hiervoor is:
<!-- Code toegevoegd op 13 april 2015 –->
Samenvattend
• p is het element voor een alinea.
• <p> 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: <p>tekst</p>
• Sommige elementen hebben geen eindtag ', zoals het img-element.
Opdracht
1. Open een willekeurige pagina (maar niet de homepage) van je site.
2. Klik op de rechtermuisknop en kies "Paginabron bekijken".
Inhoudsopgave
Pagina 21
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 h1-eindtag)?
4.2 Enkele HTML-elementen (HTML5)
p (paragraph)
Betekenis
alinea (NIET een paragraaf)
HTML-code
<p>Dit is een voorbeeld.</p>
Voorbeeld
Dit is een voorbeeld.
ul – ongeordende opsomming (unordered list)
Betekenis
ongeordende opsomming
HTML-code
<ul>
<li>Olifanten</li>
<li>Apen</li>
</ul>
Voorbeeld
• Olifanten
• Apen
ol – geordende opsomming (ordered list)
li – opsommingsitem (list item)
Betekenis
Inhoudsopgave
Pagina 22
geordende opsommingen
HTML-code
<ol>
<li>Tel eerst tot 10.</li>
<li>Geef dan je mening.</li>
</ol>
Voorbeeld
1. Tel eerst tot 10.
2. Geef dan je mening.
h1 (heading 1)
Betekenis
Kop 1 (of titel van een pagina)
HTML-code
<h1>Franse wijnen</h1>
Voorbeeld
Franse wijnen
h2
Betekenis
Kop 2
HTML-code
<h2>Bordeaux</h2>
Voorbeeld
Bordeaux
Inhoudsopgave
Pagina 23
br
Betekenis
nieuwe regel (break)
HTML-code
Gemeente Huppeldepup <br>
Kralingerpad 12 <br>
9999 ZZ Gemeente Huppeldepup
Voorbeeld
Gemeente Huppeldepup
Kralingerpad 12
9999 ZZ Gemeente Huppeldepup
img
Attributen
src – adres van de afbeelding (source)
alt – alternatieve tekst (alternative)
Betekenis
afbeelding
HTML-code
<img src="images/retriever.jpg" alt="Retriever">
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
Pagina 24
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
Inhoudsopgave
Pagina 25
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:
<p class="date">
<div id="summary">
In de CSS staat dan:
.date {
color: #333;
}
#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:
<p id="space">Stukje tekst</p>
<p id="space">Foutief gebruik: 2 x dezelfde id gebruikt op 1 pagina.</p>
En deze code is goed:
Inhoudsopgave
Pagina 26
<p class="space">Stukje tekst</p>
<p class="space">Correct gebruik: een class mag meerdere keren op 1 pagina
gebruikt worden.</p>
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.
Anker maken met id
Stel je hebt een lange pagina, dan kan het handig zijn om direct te kunnen linken
naar een tekst verderop in de pagina. Dat kan met een zogenaamde ankerlink.
Hieronder zie je een intern menu op Wikipedia met ankerlinks naar de verschillende
onderdelen van de pagina:
De html-code van de 1e ankerlink is:
<a href="#levensloop">Levensloop</a>
De link leidt naar de kop 'Levensloop' en de code daarvan is:
Inhoudsopgave
Pagina 27
<h2 id="levensloop">Levensloop</h2>
Via de 'id' is de ankerlink gekoppeld.
Opnemen van de CSS
De CSS kun je op 3 manieren koppelen aan je website:
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:
<p style="margin-bottom:1.2em">Stukje tekst</p>
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:
<p>Stukje tekst</p>
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.
Interne stylesheet: CSS als stijlblok in de head
Inhoudsopgave
Pagina 28
De 2e manier is om de CSS in een stijlblok op te nemen in de head. Dat kun je doen
met het style-element:
<head>
[…]
<style>
p {margin-bottom:1.2em;}
</style>
[…]
</head>
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:
<link rel="stylesheet" href="../styles/default.css" type="text/css" media="screen">
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:
<p>Stukje tekst</p>
In de CSS staat de volgende code:
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:
<p class="summary">Stukje tekst</p>
In de CSS staat dan de volgende code:
Inhoudsopgave
Pagina 29
.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 Kleurcontrast
Om tekst te kunnen zien moeten de letters voldoende contrast hebben met de
achtergrond. Zo is een zwarte tekst met een witte achtergrond voor de meeste
mensen optimaal leesbaar.
Voor dit contrast is een maat, het contrastratio. Deze maat loopt van 1 tot 21: 1 is
geen contrast, 21 is maximaal contrast. En nu is het erg handig dat er ook een
internationale norm is voor het contrast tussen tekst en achtergrond. Deze norm
staat beschreven in de Web Content Accessibility Guidelines (WCAG). WCAG hanteert
hierbij een aantal niveaus, maar gangbaar is om voor gewone tekst het contrastratio
van 4,5 aan te houden. Met de tools WCAG Contrast Checker en Colour Contrast
Ratio kun je dit zelf meten. We bespreken deze tools in het laatste hoofdstuk.
Hieronder een voorbeeld van een oranje tekst op een witte achtergrond. Het
contrastratio is 2,94. En dat is dus onvoldoende: de waarde moet minimal 4,5 zijn.
Inhoudsopgave
Pagina 30
4.5 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 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 <h1>-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:
Inhoudsopgave
Pagina 31
<p class="date">14 april 2014</p>
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.6 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:
<img src="leuk-plaatje.png">
Positioneren van een afbeelding
Als je een afbeelding links of rechts wilt plaatsen, dan kun je dat ook regelen met
css. Dat kun je doen met een inline stijl, zoals
<img src="plaatje.png" style="float_right">
Dit heeft echter wat nadelen:
1. Bij een mobiele weergave wil je waarschijnlijk geen plaatje rechts, maar
gewoon onder of boven de tekst.
Inhoudsopgave
Pagina 32
2. Als je ooit de stijl wil aanpassen, dan moet je je hele site nalopen waar deze
inline stijl gebruikt wordt.
3. De code wordt rommelig.
Beter is het daarom om ook dit te doen in de externe stylesheet.
De goede manier om een plaatje te positioneren is dus via de externe css,
bijvoorbeeld:
.photo-news {
float:right;
}
Op een kleiner scherm – bijvoorbeeld kleiner dan 500 pixels – kun je de volgende css
gebruiken:
.photo-news {
width:100%;
height:auto;
}
Bij het img-element in de html plaats je dan een class:
<img src="plaatje.png" class="photo-news">
Als je de afbeelding in je CMS kunt positioneren, gebruik dan deze classes, en geen
handmatige opmaak.
De opmaakcode die wel mag in de html is het width- en height-attribuut. 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.
<img src="olifant.gif" alt="olifant" width="200" height="100">
Alt-attribuut
Inhoudsopgave
Pagina 33
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:
<img src="leuk-plaatje.png" alt="Sacrada Familia">
De functie van het alt-attribuut is:
•
Het geeft aan gebruikers van spraak- en braille-uitvoer de alternatieve tekst.
•
Het wordt getoond in 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:
<img src="leuk-plaatje.png" alt="Sacrada Familia" title="Bron: Wikipedia">
De tekst die je hierin plaatst tonen browsers vaak bij mouse-over. Het title-attribuut
wordt vaak verwisseld met het alt-attribuut. Eigenlijk is er zelden een reden om het
title-attribuut te gebruiken. In het voorbeeld hierboven is bijvoorbeeld het titleattribuut gebruikt om de bron of de fotograaf van de foto te melden, maar ons
inziens is dat ook een slechte toepassing van het title-attribuut. Als je de bron wil
noemen, zet deze dan gewoon zichtbaar voor iedereen bij de foto, zoals in het
voorbeeld hieronder.
Inhoudsopgave
Pagina 34
Vaak zie je dat beide ingevoerd zijn met dezelfde tekst:
<img src="plaatje.png" alt="pepernoot" title="pepernoot">
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.
Afbeelding in de CSS
Een puur decoratieve afbeelding is bijvoorbeeld een kleurverloop in de site, zie de
afbeelding hieronder.
Afbeelding 1: Decoratieve afbeelding
Omdat deze afbeelding geen betekenis (of inhoud) overbrengt, maar alleen bedoeld
is voor de vormgeving, hoort deze afbeelding thuis in de vormgeving.
Inhoudsopgave
Pagina 35
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.
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.7 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 lay-outaanpassing gedaan met CSS. Bij een
lagere resolutie zorgt de CSS ervoor dat de lay-out wordt gewijzigd.
Inhoudsopgave
Pagina 36
Hieronder zie je een voorbeeld: de 1e afbeelding toont onze website op een gewoon
computerscherm.
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.
Inhoudsopgave
Pagina 37
4.8 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-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.
Inhoudsopgave
Pagina 38
Het gebruiken van een moderne versie van HTML biedt een site de mogelijkheid om
gebruik te maken van de nieuwste technologieën. Meer informatie over verschillende
versies vind je op http://nl.wikipedia.org/wiki/HyperText_Markup_Language.
Inhoudsopgave
Pagina 39
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:
<html>
[...]
</html>
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:
<html>
<head>
[allerlei meta-informatie]
</head>
<body>
[de content van de pagina]
</body>
</html>
Voor het html-element staat nog de zogenaamde DOCTYPE-declaratie. Daarin staat
aangegeven welke HTML-versie de website gebruikt. Voor HTML5 is dat:
<!DOCTYPE html>
Inhoudsopgave
Pagina 40
5.2 Taalkeuze
Het html-element bevat ook de taalkeuze van de pagina, bijvoorbeeld voor een
Nederlandstalige site is dat:
<html lang="nl">
5.3 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:
<title>Basisopleiding webmanager – The Internet Academy</title>
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
Pagina 41
Afbeelding 2: 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.
Google gebruikt de titel ook vaak bij het tonen van het zoekresultaat. Om die reden
is het ook heel belangrijk dat de titel betekenisvol is en uniek binnen de site. Het is
onwenselijk dat 2 verschillende pagina's exact dezelfde titel hebben, want voor
Google is het dan onduidelijk welke pagina dan bij welke titel horen.
Metatags
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.
Inhoudsopgave
Pagina 42
Metatag description
In code ziet deze er bijvoorbeeld als volgt uit:
<meta name="description" content="The Internet Academy verzorgt cursussen,
opleidingen en workshops over allerhande internet-gerelateerde 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. De lengte is maximaal 160 tekens, want dat is de lengte van de snippettekst
die Google toont bij een zoekresultaat. 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 metainformatie. Je kunt de tag dus beter 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
Hieronder een voorbeeld van de code.
<meta name="robots" content="noindex, nofollow">
In dit voorbeeld is de wens dat zoekmachines de pagina NIET indexeren (noindex) en
de links in de pagina NIET volgen (nofollow).
De meta-tag robots geeft onder andere de volgende informatie aan zoekmachines:
• Indexeer deze pagina wel of niet.
• Volg wel of niet de links op deze pagina.
Inhoudsopgave
Pagina 43
Deze tag is alleen nodig als je wil dat een zoekmachine iets niet doet. Dus als je wil
dat de pagina gewoon geïndexeerd moet worden en dat links in de pagina gewoon
gevolgd moeten worden, dan kun je de tag weglaten.
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
informatie 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.
Het nadeel van zo'n metatag is dat je deze op elke pagina moet toevoegen die je
niet wilt indexeren. Wil je het voor je hele site of een hele directory dan kan het
handig zijn om de HTTP-header X-Robots-Tag te gebruiken. Meer hierover kun je
lezen op https://yoast.com/prevent-site-being-indexed/.
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:
<link rel="stylesheet" type="text/css" href="/styles/screen.css" media="all">
• JavaScript-bestanden, bijvoorbeeld:
Inhoudsopgave
Pagina 44
<script type="text/javascript"
src="/scripts/jquery-1.7.js"></script>
5.4 Body-gedeelte
Na het head-gedeelte van de webpagina krijg je het body-deel. Dit is omsloten met
het element body:
<body>
[content]
</body>
In het body-deel staat al je content, dus alles wat je ziet als je naar je website
kijkt.
Inhoudsopgave
Pagina 45
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 3: CMS met database
Voorbeelden van CMS-en zijn:
• WordPress: veel gebruikt voor wat kleinere sites
• Drupal: een populair open source CMS voor gemeenten
Inhoudsopgave
Pagina 46
• Drupal
• Joomla
• Plone
• 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
Pagina 47
Afbeelding 4: 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
Pagina 48
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
• Bodytekst
• Datum tonen vanaf
• Datum tonen tot en met
• Publiceer / depubliceer
Hergebruik van content
Inhoudsopgave
Pagina 49
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.
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 CMSen leveren. En er zijn ook slechte open source CMS-en.
Inhoudsopgave
Pagina 50
De laatste jaren zijn open source CMS-en veel populairder geworden bij non-profitorganisaties, 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.
Afbeelding 5: CMS, database en templates
Het werken met templates heeft een aantal grote voordelen:
• De site krijgt zo een consistente vormgeving, want de pagina's zijn allemaal
vergelijkbaar opgebouwd .
Inhoudsopgave
Pagina 51
•
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
De meeste templates hebben een verschillende opbouw voor de weergave op een
desktop en op een mobiel.
Een webpagina voor desktopweergave bestaat meestal uit de volgende onderdelen
(zie ook afbeelding hieronder):
• bovenkant, de header
• onderkant, de footer
• een menu (boven, links of rechts)
• het contentdeel
• vaak een rechterkolom met gerelateerde of algemene informatie
Inhoudsopgave
Pagina 52
Afbeelding 6: Opbouw template
Vooral de header (bovenkant), het menu en de footer (de onderkant) zijn voor alle
pagina's van de site gelijk of vergelijkbaar.
Voor een mobiele weergave is de weergave zo dat alles onder elkaar bekeken kan
worden. Vaak is de header kleiner, het menu vervangen door een hamburgermenu en
valt de content onder het menu en de info uit de rechterkolom daar weer onder.
Soorten templates
Vaak heeft een site verschillende soorten pagina's, zoals:
• homepage
• gewone contentpagina
• nieuwspagina
Inhoudsopgave
Pagina 53
• zoekresultatenpagina
• formulier
Veel CMS-en maken voor elke soort pagina een eigen template. Sommige CMS-en
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 7: 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
Pagina 54
Afbeelding 8: 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
delen van de site NIET geïndexeerd moeten 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)
• Directories die niet geïndexeerd mogen worden zijn "nieuwesite" en "service".
Inhoudsopgave
Pagina 55
Het bestand is alleen nodig als je wilt dat bepaalde directories van je site NIET
bezocht moeten worden. Het bestand gebruikt de Robots Exclusion Standard.
Let op: Met robots.txt voorkom je niet dat de directories niet geïndexeerd worden.
Als er bijvoorbeeld links naar pagina's in deze directories staan, dan worden deze
pagina's wel geïndexeerd. Met de metatag robots voorkom je wel dat een pagina
vindbaar wordt. Deze tag wordt uitgelegd in het hoofdstuk 'HTML-opbouw
webpagina'.
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 volgt:
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.
Bron: https://support.google.com/webmasters/answer/183668?
hl=nl&ref_topic=4581190&vid=1-635794707095594598-4212143325
Je kunt een sitemap maken op basis van het sitemapprotocol. Deze kun je vinden op
www.sitemap.org.
Elke keer dat je pagina's maakt of verwijdert moet je dit bestand bijwerken. Het is
daarom handig als je gebruik maakt van een dynamische sitemap. Deze is steeds
bijgewerkt naar de huidige structuur van je website.
Inhoudsopgave
Pagina 56
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.
Deze webserver staat bij een provider of hosting provider. Je kunt ook zeggen dat
de provider jouw website host.
Inhoudsopgave
Pagina 57
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 9: PageSpeed Insights van Google
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.
Inhoudsopgave
Pagina 58
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 10: Communicatie tussen client en server
Deze communicatie gaat heel snel. Een server kan meerdere requests tegelijkertijd
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
Pagina 59
Als voorbeeld nemen we de validatie van een eenvoudig contactformulier.
Afbeelding 11: 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 12: 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 kan met HTML5 of 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
Pagina 60
Afbeelding 13: 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 clientsidescripting.
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
Inhoudsopgave
Pagina 61
opnieuw bij de server worden opgehaald, maar kan de pagina uit de cache van de
browser worden getoond.
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.
7.8 Snelheid website
In de snelheid van de site spelen verschillende factoren een rol:
• Client-side:
° Performance computer/device
° Kenmerken pagina (complexe code, gebruik JavaScript)
° Snelheid internetverbinding (glasvezel, 3G)
Inhoudsopgave
Pagina 62
• Server-side:
° Kwaliteit netwerk
° Kwaliteit servercode
° Performance server
° Locatie server
• Internet:
° DNS resolving
De snelheid van je site is een belangrijke factor in het succes van je site. Mensen
haken af als het lang duurt voordat de pagina wordt geladen. Je moet dus
controleren of al deze factoren in orde zijn. Maar geen zorgen, in het laatste
hoofdstuk bespreken wij tools waarmee je dit kunt meten.
Inhoudsopgave
Pagina 63
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 HTTP-statuscodes (zie
ook http://nl.wikipedia.org/wiki/Lijst_van_HTTP-statuscodes).
8.1 Overzicht HTTP-codes
De request van de browser aan de server geeft altijd een antwoord (response) van de
server. Deze antwoorden zijn de HTTP-statuscodes of server respons codes.
Deze communicatie moet je je als volgt voorstellen:
• De browser (client):"Mag ik de pagina 'index.html' van jou?"
• De webserver gaat even kijken. Mogelijke antwoorden:
°
"Alsjeblieft, hier is het bestand."(code 200 OK)
°
"Kan hem echt nergens vinden" (code 404 Not Found)
°
'De pagina is verwijderd' (code 410 Gone)
° "Je moet ergens anders zijn. Ik stuur je verzoek door naar het andere adres."
(code 301 Permanent Redirect)
° "Je moet ergens anders zijn. Ik stuur je verzoek door naar het andere adres."
°
(code 302 Temporary Redirect)
"Sorry, maar de website werkt niet." (code 500 Internal Server Error)
8.2 404: 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
Inhoudsopgave
Pagina 64
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 404-melding
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?
• 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.
Het kan ook zijn dat er een bestand niet gevonden wordt, bijvoorbeeld een
verwijziging naar een JavaScript-bestand, dat niet bestaat. Je krijgt hiervan geen
foutmelding en ziet het dus verder niet. Maar het is wel minder goed voor de
performance. Probeer dit soort fouten ook te voorkomen.
8.3 410-melding (Pagina is weg)
Op dit moment is de trend om websites kleiner te maken. Dat betekent dat je veel
pagina's weg moeten gooien. Hoe doe je dit nu voor zoekmachines en voor je
bezoekers op een nette manier?
Als jij naar een pagina gaat, dan krijgt de webserver een verzoek binnen om deze
pagina te tonen. Als de pagina er niet is, dan wordt normaal gesproken een 404melding gegeven, Niet gevonden. Maar er bestaat ook een responscode 410, en die
betekent 'Verwijderd'. Eigenlijk zou je die dus moeten gebruiken, want daarmee geef
Inhoudsopgave
Pagina 65
je aan zoekmachines aan dat de pagina echt weg is en dat ze deze kunnen
verwijderen uit hun index.
Hoe kun je dit nu voor elkaar krijgen op je site? Dat kan als jij de mogelijkheid hebt
om per pagina een responsheader in te stellen. Dat is vaak niet het geval. In dat
geval is de 404 een goede 2e keus. Ook dan geef je een duidelijke boodschap: de
pagina is er niet (meer) en ook dan verwijdert Google deze uit zijn index.
Controleer verder of jouw site 404-meldingen heeft. Zijn die er, kijk of ze het gevolg
zijn van dode links op je site. Dat kun je eenvoudig onderzoeken met ScreamingFrog,
zie hoofdstuk over tools.
Tot slot zijn er verwijzingen vanaf andere sites naar jouw site. Leiden die
verwijzingen ook naar niet-bestaande pagina's, neem dan contact op met die
organisaties en vraag ze de onjuiste links te verwijderen.
8.4 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.
Inhoudsopgave
Pagina 66
8.5 302-redirect (tijdelijke redirect)
Als de verwijzing niet definitief is, maar tijdelijk, dan kun je ook een 302-redirect
gebruiken. Dit is zelden het geval en daarom kun je beter in de gangbare situaties
een 301 gebruiken1.
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.6 500-melding (serverfout)
Als het probleem op de server ligt, dan kan je een 500-serverfout geretourneerd
krijgen.
Afbeelding 14: 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
1 www.bigoakinc.com/blog/when-to-use-a-301-vs-302-redirect/
Inhoudsopgave
Pagina 67
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.
Behalve een 500-fout zijn er ook andere foutmeldingen in de 500-range, zoals een
501 en een 502.
8.7 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 typefout 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.
Inhoudsopgave
Pagina 68
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 direct door te leiden. Deze
browser-redirect heeft echter alleen nadelen:
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.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.
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 410 voor pagina's die verwijderd 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) Nog beter: zorg dat je sitemap dynamisch wordt
gegenereerd, zodat deze altijd is bijgewerkt.
Inhoudsopgave
Pagina 69
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 belangrijk.
Meer hierover lezen? Zie www.photoshopessentials.com/essentials/the-72-ppi-webresolution-myth/.
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,
maar PNG blijkt vaak veel grotere bestanden op te leveren dan GIF of JPEG. Ons
advies: kies voor JPEG of GIF.
Inhoudsopgave
Pagina 70
Afbeelding 15: Afbeelding met vlakken, opslaan als GIF of PNG
Afbeelding 16: Afbeelding met veel kleuren, opslaan als JPEG of PNG
Inhoudsopgave
Pagina 71
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:
<img src="plaatje.gif" alt="" width="100" height="200">
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.
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.
Inhoudsopgave
Pagina 72
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 17: 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:
• 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
Inhoudsopgave
Pagina 73
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:
<img src="afbeeldinkje.gif" class="img-right" alt="leuke afbeelding">
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
Pagina 74
• 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".
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:
Inhoudsopgave
Pagina 75
•
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
(verbindingstreepje, 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
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
Inhoudsopgave
Pagina 76
Alt-attribuut: verplicht bij betekenisvolle afbeelding
Als een afbeelding betekenis overbrengt is een beschrijvende alt-tekst nodig. Dit is
bijvoorbeeld nodig voor blinde gebruikers, die de afbeelding niet kunnen zien. Met
het alternatief krijgen ze toch de informatie van de afbeelding.
Brengt de afbeelding geen extra informatie over, dan mag de alt-tekst leeg blijven.
Title-attribuut: bijna nooit nodig
Het title-attribuut geeft de bekende mouse-over-tekst zodra je met de muis over de
afbeelding beweegt. Het title-attribuut heeft geen toegevoegde waarde. Deze kan
bijna altijd beter leeggelaten worden.
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 pagina2.
In HTML zien deze attributen als volgt uit:
<img alt="Boswerf Bezoekerscentrum;" class="img-right"
longdesc="/images/boswerf.html" src="/images/boswerf.jpg;" title="Foto: Ronald
Grip">
2 Zie ook http://webaim.org/techniques/images/longdesc
Inhoudsopgave
Pagina 77
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 18: 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.
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).
Inhoudsopgave
Pagina 78
Met semantisch opmaken 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 editor 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 strikte
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).
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-Get-modus
(WYSIWYG) voor zijn editor. WYSIWYG is een term die komt uit de Oudheid en is
Inhoudsopgave
Pagina 79
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-modus heeft (gelukkig) bijna elke editor ook een tekstmodus of
een HTML-modus. Hieronder zie je een voorbeeld van Wordpress:
Afbeelding 19: 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 20: WYSIWYG-modus in ModX met knop HTML
Als 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!
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
Inhoudsopgave
Pagina 80
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:
<p><span style="color: #4f81bd;"><span style="font-family:
Cambria,serif;"><span style="font-size: medium;"><b><span
style="color: #00000a;"><span style="font-family: Arial,serif;"><span
style="font-size: small;">Doel van sociale
media</span></span></span></b></span></span></span><br />
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.</p>
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 waarschijnlijk helemaal
niet.
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)
Inhoudsopgave
Pagina 81
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.
4. Weet je niet goed wat nu precies de rommelcode is, gooi dan alle HTML-code
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
Pagina 82
11. Apps: native 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 in de store nodig
• Verandering/update in de software van het platform kan betekenen dat de
techniek aangepast moet worden
11.2 Webapps
Een webapp is in feite een soort mini-website. Het wordt gebouwd in HTML, CSS en
JavaScript.
Inhoudsopgave
Pagina 83
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.
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
Inhoudsopgave
Pagina 84
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 beginnen 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 verspild aan de webapp. Bedenk daarom
vooraf wat nodig is om het probleem effectief op te lossen.
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
Pagina 85
12. Tools om je website te testen
Toegankelijkheid toetsen met toetsenbord – Google Search Console – Web
Developer (add on voor Firefox) – ScreamingFrog - Colour Contrast Analyser Testen op kleurenblindheid – HTML_CodeSniffer - WAVE Accessibility Tool –
Pingdom Website Speed Test
12.1 Toegankelijkheid toetsen met toetsenbord
(Met dank aan de informatie op http://iacobien.nl/artikelen/tools/).
De makkelijkste en goedkoopste toets op toegankelijkheid is kijken of alles op je site
bereikbaar en bruikbaar is met het toetsenbord. Kun je met de tab-toets, de pijltjestoetsen en de spatiebalk alles bereiken en alles gebruiken?
Testen
•
Focus zichtbaar: zie je bij het tabben door de site? Gebruik hiervoor Firefox,
want bijvoorbeeld Chrome voegt hier zelf een randje aan toe.
•
Logische tabvolgorde: ga je op een logische manier door een formulier of een
menu?
•
Alles bereikbaar: kun je alles bereiken met het toetsenbord? Ook de
bedieningsknoppen van een video of een carrousel?
•
Geen toetsenbordval: blijf je niet hangen op een bepaalde link, bijvoorbeeld
dat je wel een video in kunt komen maar er nooit meer uit?
Instellen toetsenbordtoegankelijkheid op een Mac
Op een Apple-computer moet je de browser aanpassen om te kunnen testen.
Safari:
Voorkeuren » Geavanceerd » Tabtoets markeert elk onderdeel op de
webpagina
Firefox: Systeemvoorkeuren (van de Mac) » Toetsenbord » Toetscombinaties »
Check radiobutton onderaan ‘Alle regelaars’.
Chrome: Voorkeuren » Instellingen » Webinhoud » Vink aan ‘Als u op een webpagina
op Tab drukt worden links en velden in een formulier gemarkeerd’.
Inhoudsopgave
Pagina 86
12.2 Controle alternatieve teksten afbeeldingen
Een informatieve afbeelding moet een alternatieve tekst krijgen. Dit kun je toetsen
met Web Developer (zie verder), maar ook in Firefox:
Extra » Pagina-info » Media
12.3 Google Search Console
Google Search Console heette vroeger Hulpprogramma’s voor webmasters. Je vind
dit bij de producten van Google. We bespreken dit verder niet in dit e-book.
12.4 Web Developer (add on voor Firefox)
Een handige add-on voor Firefox is Web Developer, te vinden op
https://addons.mozilla.org/nl/firefox/addon/web-developer/.
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).
De balk bevat de volgende onderdelen:
1. Disable
5. Images
9. Resize
2. Cookies
6. Information
10.Tools
3. CSS
7. Miscellaneous
11.View Source
4. Forms
8. Outline
12.Options
Handige opties zijn:
Inhoudsopgave
Pagina 87
• 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.
12.5 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=""
Inhoudsopgave
Pagina 88
•
•
•
•
•
•
404-meldingen
lengte title
lengte h1
aanwezigheid alt-tekst
aanwezigheid tabellen (die je dan met de hand kunt controleren)
aanwezigheid Google Analytics- of Piwik-trackingcode
Hieronder werken we ScreamingFrog uit met enkele voorbeelden.
Spideractie starten
1. Open 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 of als je intussen al duizenden pagina's
hebt geïndexeerd, 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.
Controleren 404-meldingen
1. Als het goed is in het bovenste menu het tabblad "Internal" open, zie screenshot
hieronder.
Inhoudsopgave
Pagina 89
2. Klik in het venster met de webadressen op Status Code, zodat deze aflopend
sorteert. Als er 404-meldingen zijn, komen deze bovenaan (tenzij er nog 500meldingen zijn).
3. Selecteer een 404-melding.
4. Kies uit het ondermenu de optie In Links (zie screenshot hierboven). Daar zie
je de pagina staan die leidde tot een 404-melding.
5. Bekijk daar de anchor text. Dit is de linktekst. Gebruik deze om op de pagina
waar de dode link staat te zoeken naar de dode link zelf.
Controleren op unieke paginatitels
Het belangrijkste kenmerk van elke pagina is de paginatitel. Deze vind je in het
HTML-element title. Voor Google is het belangrijk dat elke pagina een unieke titel
heeft. Als dat niet het geval is en je hebt 2 verschillende pagina's met dezelfde titel
is dat verwarrend voor Google.
Het is ook belangrijk voor de bezoekers van je site, want als ze in de zoekresultaten
van Google 2 resultaten zien met dezelfde titel, welke pagina is dan de juiste?
Inhoudsopgave
Pagina 90
Vergelijk dit met dat je een boekhandel binnenloopt en er liggen 2 verschillende
boeken met dezelfde titel. Welk boek was nu het boek dat je wilde kopen?
Ergo: het is een goed streven om elke pagina een unieke titel te geven. Om te
controleren of je dat gedaan gebruik je ScreamingFrog.
1. Kies in het bovenmenu voor Page Titles.
2. Kies in het filter voor Duplicate (zie screenshot hieronder).
3. Je krijgt nu een overzicht van pagina's die geen unieke titel hebben.
Er zijn verschillende oorzaken van duplicate titels. We noemen enkele voorbeelden:
• Webadressen zijn bereikbaar op http EN https. Het is beter slechts 1 protocol te
gebruiken, waarschijnlijk bij voorkeur het https-protocol.
• De website is bereikbaar op met en zonder www in het webadres. Beter is het om
hier 1 domein voor te kiezen.
• Alle nieuwsberichten hebben de titel 'Nieuws". Beter is het om hier elk
nieuwsbericht zijn eigen titel te geven, namelijk de titel van het nieuwsbericht.
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).
Inhoudsopgave
Pagina 91
Je komt daar via Configuration » Custom (zie screenshot).
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 "<table" is
opgenomen om handmatig de tabellen te controleren op toegankelijkheid.
Indexeer vervolgens de hele site. Ga dan in het bovenmenu naar het item "Custom"
en daar zie je alle URL's die voldoen aan een filter.
Je kunt deze optie ook gebruiken om te controleren of de Google Analytics
trackingcode overal geïnstalleerd is.
Inhoudsopgave
Pagina 92
Na het instellen van de custom variables moet je wel opnieuw je website spideren
met ScreamingFrog.
12.6 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 de achtergrond. Dat
gaat als volgt:
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.
Inhoudsopgave
Pagina 93
Als je in het eerste venster gekozen hebt voor Luminositeit, dan krijg je in het
scherm eronder het contrastratio.
12.7 WCAG Contrast Checker (add on voor Firefox)
Een andere handige tool om het contrast van tekst met achtergrond te testen is de
WCAG Contrast Checker,
zie https://addons.mozilla.org/nl/firefox/addon/wcag-contrast-checker/ De tool
geeft op basis van je CSS al direct aan of er contrastproblemen zijn. Zelf kun je het
contrast testen door met een pipet de voorgrondkleur en de achtergrondkleur te
selecteren.
Inhoudsopgave
Pagina 94
12.8 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].
Een tool is www.etre.com/tools/colourblindsimulator/.
12.9 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
Pagina 95
12.10 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.
Inhoudsopgave
Pagina 96
12.11 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.
Op Pingdom Website Speed Test kun je je site testen op snelheid. Je vindt de site op
http://tools.pingdom.com/fpt/.
Inhoudsopgave
Pagina 97
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. Onze ervaring is dat als je onder de 70 %
functioneert, jouw website te traag is.
De snelheid kun je ook nog testen met pagespeed insights van Google en de Yslowextensie van Firefox/Chrome.
Er zijn ook tools die permanent de snelheid monitoren.
–––
Einde e-book
Inhoudsopgave
Pagina 98