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

Kwaliteit van belastingrechtspraalc belicht

Schrijfgong in beeld

Easy VR - Installatiebedrijf Klok

Folder Volkswagen Amarok sneeuwschuiver

SV-4B Nieuwsbrief 2014/1

voor de handleiding - Hoornbeeck College

Factsheet – Verfijning Stroomopwaarts

WC verhalen - Free Musketeers

uitleg

Download product info