Presentatie webrichtlijnen

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 documentstructuurCSS: 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

voet

inhoud

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

Semantische HTML

Semantiek = betekenis

Betekenis

HTML tags vertellen iets over de inhoud van het element.

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

Hoe dan niet?



<p style="color:red">Deze paragraaf is rood!</p>



<a onclick="followLink(this)">Klik hier!</a>



<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/CSSBouw een formulier met een file input.

Ondersteuning voor scriptingZorg 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?

Presentatie webrichtlijnen

Documents

Transcript of Presentatie webrichtlijnen