[...]
[...]
[...]
[...]
Volgorde? [...]
Volgorde? [...]
[...]
[...]
[...]
[...]
Semantische HTML
Semantiek = betekenis
Betekenis
HTML tags vertellen iets over de inhoud van het element.
Inhoud
Hoe dan niet?
Klik hier!
<sup>Mooi klein tekstje
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
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?
Semantische HTML
Semantiek = betekenis
Betekenis
HTML tags vertellen iets over de inhoud van het element.
Inhoud
Dit is de belangrijkste kop
Dit is een paragraaf met een <strong>stukje nadruk
hier kan ik een adres kwijtHoe dan niet?
Deze paragraaf is rood!
Klik hier!
<sup>Mooi klein tekstje
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
Diashow navigatie
Diashow afbeeldingen
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?