Webrichtlijnen
Inhoud Wat zijn webrichtlijnen, waarom zouden we daar iets mee moeten en hoe doe je dat dan?
Webrichtlijnen? 30 juni 2006: de Tweede kamer neemt het 'Besluit Kwaliteit Rijksoverheidswebsites' Alle nieuw te maken websites van de rijksoverheid dienen te voldoen aan de 'Richtlijnen voor de toegankelijkheid en duurzaamheid van overheidswebsites'.
Webrichtlijnen? 125 regels en een set van toetsen (slide 1 of 125)
Wat zijn webrichtlijnen? Richtlijnen om een duurzaam toegankelijke website te bouwen
Duurzaamheid Informatie is voor langere tijd vindbaar en doorzoekbaar: informatie is archiveerbaar.
Toegankelijkheid Iedereen moet toegang hebben tot de informatie en diensten die je aanbiedt
Wie is iedereen? Gehandicapten?
Mensen met een functiebeperking Blind (slechtziend?), spastisch (parkinson?, reuma?), kleurenblind, oud(er), laaggeletterd, [ ]
Mensen met een functiebeperking Blind (slechtziend?), spastisch (parkinson?, reuma?), kleurenblind, oud(er), laaggeletterd, [ ] Tritanopia (ongevoelig voor blauw)
Technologische beperkingen CSS, Javascript, andere browser, telefoon, PDA,Spelconsole, Java, Flash (ipad/iphone), Sliverlight, $nextbigthing?
Wat doen webrichtlijnen? Webrichtlijnen garanderen kwaliteit.
Kwaliteit? Kwaliteit = voldoen aan een algemeen geaccepteerde norm
Kwaliteit? Kwaliteit = meetbaar
Toegankelijk = boooringgg! Hoe maak je een website dan nog interessant? Ik mag geen javascript gebruiken, geen flash, geen $nextbigthing, [...]
Interessant maken Geen excuus om dan maar een slechte website te bouwen.
Gelaagd bouwen Oplossing: bouw in lagen, het principe van "progressive enhancement"
Lagen HTML: voor je documentstructuur CSS: voor de vormgeving Javascript: introduceert gedrag plugins: geven een rijkere ervaring
Documenstructuur (HTML) Structureer je document op volgorde van belangrijkheid. Gebruik semantische HTML.
Volgorde? kop menu inhoud voet
<html> <head>[...]</head> <body> <div id="main"> <div id="kop"> [...] <div> <div id="menu"> [...] <div> <div id="inhoud"> [...] <div> <div id="voet"> [...] <div> <div> </body> </html> Volgorde?
<html> <head>[...]</head> <body> <div id="main"> <div id="inhoud"> [...] <div> <div id="menu"> [...] <div> <div id="kop"> [...] <div> <div id="voet"> [...] <div> <div> </body> </html> Volgorde?
Semantische HTML Semantiek = betekenis
Betekenis HTML tags vertellen iets over de inhoud van het element.
Inhoud <!-- tekst structureren --> <h1>dit is de belangrijkste kop</h1> <p class="introductie"> Dit is een paragraaf met een <strong>stukje nadruk</strong> </p> <address>hier kan ik een adres kwijt</address> <!-- Een division. Gebruik om elementen logisch te groeperen --> <div id="inhoud">
Hoe dan niet? <!-- introduceert vormgeving --> <p style="color:red">deze paragraaf is rood!</p> <!-- introduceert gedrag --> <a onclick="followlink(this)">klik hier!</a> <!-- zegt iets over weergave --> <sup>mooi klein tekstje</sup>
Werkwijze Begin met bepalen van belangrijkheid, voeg betekenis aan je inhoud toe en groepeer als laatste.
De volgende laag: css Zorg dat alles opgemaakt en zichtbaar is.
Zichtbaar? Houd alle informatie beschikbaar als de bezoeker geen ondersteuning voor scripting heeft.
Scripting Gebruik event-based scripting om gedrag te introduceren en vormgeving aan te passen
Event-based scripting De browser geeft een seintje als er iets gebeurd. Haak daarop in.
Inhaken op events Browser heeft document geladen: zet vormgeving, voeg ander gedrag toe.
Events, vormgeving en gedrag <h2 class="extra">diashow navigatie</h2> <ul id="dianavigatie"> <li><h3><a href="#dia1">dia 1</a></h3></li> [...] </ul> <h2 class="extra">diashow afbeeldingen</h2> <ul id="diashow"> <li id="dia1"> <img src="[]" alt="mooi plaatje" /> </li> [...] </ul>
Events, vormgeving en gedrag // Met behulp van jquery $(document).ready(function(){ }) $('#diashow li').addclass('slide'); $('#dianavigatie h3 a').click(function(event){ showslide(this) }); /* klasse */.slide { position:absolute; top:0; left:0; }
$nextbigthing? HTML/CSS Bouw een formulier met een file input. Ondersteuning voor scripting Zorg met javascript dat de gebruiker meerdere files kan toevoegen.
$nextbigthing? Ondersteuning voor plugin? Gebruik de flash/java plugin om de dialoog te openen.
Deze werkwijze? Voldoe aan standaarden, gebruik progressive enhancement en je voldoet voor 90% aan webrichtlijnen.
Vragen?