3. Geschiedenis
●Nineties: Browser wars: IE vs Netscape: EEE
●1998: Webstandaarden: W3C & WaSP
●2001: Van tabellen naar layers en css
●2004: WHATWG Community: ontevreden over
richting van XHTML, W3C heeft geen voeling
meer met realiteit, XHTML2 niet backwards
compatible
●2006:
Tim Berners Lee (W3C) stopt ontwikkeling XHTML2.
5. HTML5: Basis
✔WHATWG voegt Web Forms 2.0 en Web Apps
1.0 samen tot HTML5.
✔Bestaande content ondersteunen (backwards
compatible)
✔Het wiel niet opnieuw uitvinden (bestaande
gebruiken bevestigen).
✔Error handling (beschrijven hoe browsers dit
moeten doen)
✔Vereenvoudigen van syntax (en opnieuw
toelaten van "lelijke" code)
8. Layout structuur
Divs hebben geen semantische betekenis =>
schermlezers en robotten kunnen niet
interpreteren wat bv hoofdnavigatie is
Google studie toonde aan dat vaak dezelfde div
classes werden gebruikt
Outline is niet meer correct als een blogpost via
feed wordt opgenomen op andere pagina (bv 2x
h1)
23. Audio
Meer info: http://html5doctor.com/native-audio-in-the-browser
<audio controls preload="auto" autobuffer>
<source src="vakantie.mp3" />
<source src="vakantie.ogg" />
<!-- steek hier de Flash embed/object voor IE 6/7/8 -->
<p>Je browser ondersteunt geen audio, <a
href="vakantie.mp3">download de audio</a>.</p>
</audio>
24. <Canvas>
Flash killer?
Gelijkt op img tag maar dan dynamisch
aanpasbaar via javascript
Problemen met accessibility
Niet zo flexibel DOM wijzigen als svg
Werkt met pixels: telkens overschrijven dus cpu
intensief
27. Offline: cache manifest
<html manifest=”jeugdwerknet.manifest”>
jeugdwerknet.manifest bevat
CACHE MANIFEST
index.html
jeugdwerknet.js
jeugdwerknet.css
5MB storage bruikbaar op client
Opgelet met updaten: cache clearen niet eenvoudig
Meer info en code:
http://www.html5rocks.com/en/tutorials/appcache/beginner
56. Mobiele website
● Native App:
● Toegang tot camera, accelerometer
● Niet linkbaar vanaf site, vindbaar vanaf google
● Steeds meer platformen
● Web App
● Platform/Toestelonafhankelijk
● Linkbaar, social media, google, audience…
● Mobiele browsers steeds meer mogelijkheden en toegang tot
device zaken
● Geen flash, hover
● Futureproof
61. Opgelet!
● Screensize ≠ Internet snelheid
● Screensize ≠ Situatie
● Wat is mobiel?
● Ipad/iphone in bed
● Laptop op mifi
● Blog lezen op Android in trein
● Netbook
69. Mobile first
Maak fluid 1 koloms
basisversie voor
mobiele toestellen
Voeg media queries toe
voor de grotere
toestellen
Progressive
Enhancement
70. Progressive Enhancement
@media
(min-width:480px) { /* from now on white & 2
columns */ }
@media
(min-width:768px) { /* from now on 3 columns */ }
@media
(max-width:1024px) { /* from now on black & 4
columns */ }
/* all the way up... */