Inhoud. Wat zijn webrichtlijnen, waarom zouden we daar iets mee moeten en hoe doe je dat dan?

Maat: px

Weergave met pagina beginnen:

Download "Inhoud. Wat zijn webrichtlijnen, waarom zouden we daar iets mee moeten en hoe doe je dat dan?"

Julius de Valk
8 jaren geleden
Aantal bezoeken:

1 Webrichtlijnen

2 Inhoud Wat zijn webrichtlijnen, waarom zouden we daar iets mee moeten en hoe doe je dat dan?

3 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'.

4 Webrichtlijnen? 125 regels en een set van toetsen (slide 1 of 125)

5 Wat zijn webrichtlijnen? Richtlijnen om een duurzaam toegankelijke website te bouwen

6 Duurzaamheid Informatie is voor langere tijd vindbaar en doorzoekbaar: informatie is archiveerbaar.

7 Toegankelijkheid Iedereen moet toegang hebben tot de informatie en diensten die je aanbiedt

8 Wie is iedereen? Gehandicapten?

9 Mensen met een functiebeperking Blind (slechtziend?), spastisch (parkinson?, reuma?), kleurenblind, oud(er), laaggeletterd, [ ]

10 Mensen met een functiebeperking Blind (slechtziend?), spastisch (parkinson?, reuma?), kleurenblind, oud(er), laaggeletterd, [ ] Tritanopia (ongevoelig voor blauw)

11 Technologische beperkingen CSS, Javascript, andere browser, telefoon, PDA,Spelconsole, Java, Flash (ipad/iphone), Sliverlight, $nextbigthing?

13 Wat doen webrichtlijnen? Webrichtlijnen garanderen kwaliteit.

14 Kwaliteit? Kwaliteit = voldoen aan een algemeen geaccepteerde norm

15 Kwaliteit? Kwaliteit = meetbaar

16 Toegankelijk = boooringgg! Hoe maak je een website dan nog interessant? Ik mag geen javascript gebruiken, geen flash, geen $nextbigthing, [...]

17 Interessant maken Geen excuus om dan maar een slechte website te bouwen.

19 Gelaagd bouwen Oplossing: bouw in lagen, het principe van "progressive enhancement"

20 Lagen HTML: voor je documentstructuur CSS: voor de vormgeving Javascript: introduceert gedrag plugins: geven een rijkere ervaring

21 Documenstructuur (HTML) Structureer je document op volgorde van belangrijkheid. Gebruik semantische HTML.

22 Volgorde? kop menu inhoud voet

23 <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?

24 <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?

25 Semantische HTML Semantiek = betekenis

26 Betekenis HTML tags vertellen iets over de inhoud van het element.

27 Inhoud  <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>  <div id="inhoud">

28 Hoe dan niet?  <p style="color:red">deze paragraaf is rood!</p>  <a onclick="followlink(this)">klik hier!</a>  <sup>mooi klein tekstje</sup>

29 Werkwijze Begin met bepalen van belangrijkheid, voeg betekenis aan je inhoud toe en groepeer als laatste.

30 De volgende laag: css Zorg dat alles opgemaakt en zichtbaar is.

31 Zichtbaar? Houd alle informatie beschikbaar als de bezoeker geen ondersteuning voor scripting heeft.

32 Scripting Gebruik event-based scripting om gedrag te introduceren en vormgeving aan te passen

33 Event-based scripting De browser geeft een seintje als er iets gebeurd. Haak daarop in.

34 Inhaken op events Browser heeft document geladen: zet vormgeving, voeg ander gedrag toe.

35 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>

36 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; }

37 $nextbigthing? HTML/CSS Bouw een formulier met een file input. Ondersteuning voor scripting Zorg met javascript dat de gebruiker meerdere files kan toevoegen.

38 $nextbigthing? Ondersteuning voor plugin? Gebruik de flash/java plugin om de dialoog te openen.

39 Deze werkwijze? Voldoe aan standaarden, gebruik progressive enhancement en je voldoet voor 90% aan webrichtlijnen.

40 Vragen?

Vergelijkbare documenten

Websitecursus deel 1 HTML

Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!