Er wordt al tijden veel over de nieuwe HTML 5 standaard gesproken. Maar wanneer kan je als ontwikkelaar nu eigenlijk met HTML 5 aan de slag? En als je het kan gaan gebruiken wat heeft het eigenlijk allemaal te bieden? Hoe zit het met al die oudere browsers die mensen misschien nog gebruiken? En dan hebben we natuurlijk nog de vraag wat ik moet doen als ik tussen Silverlight en HTML 5 moet kiezen voor een nieuwe applicatie?
2. Waar gaan we het over hebben?
Waarom?
Wie beslist wat HTML 5 is?
Hoe gaan browsers er mee om?
Verschillende HTML 5 onderdelen
3. Wie ben ik
Maurice de Beijer.
The Problem Solver.
Microsoft CSD MVP.
DevelopMentor instructor.
Twitter: @mauricedb
Blog: http://msmvps.com/blogs/
theproblemsolver/default.aspx
Web: http://www.TheProblemSolver.nl
E-mail: mauricedb@computer.org
4. Waarom HTML 5
HTML is de meest verspreide UI technologie
Maar door browser verschillen lastig om mee te
werken
Minder bedrijven ondersteunen een enkel platform
Bring your own hardware
Smartphones en tablets ondersteunen geen plugins
Men wil rijkere applicaties
Animaties
Communicatie
etc
5. Wie gaat er eigenlijk over?
De World Wide Web Consortium (W3C)
Was oorspronkelijk met XHTML2 bezig
Web Hypertext Application Technology Working
Group (WHATWG)
In 2004 begonnen uit onvrede met XHTML2
Vanaf 2009 samen bezig
Er wordt gewerkt aan “HTML The Living Standard”
De W3C neemt een snapshot
Dat wordt HTML5
6. Wanneer is het klaar?
“The Web Hypertext Application Technology
Working Group, expects HTML5 to reach W3C
Candidate Recommendation Stage in 2012, and
graduate to W3C Recommendation in 2022.”
7. Wanneer is het klaar?
“The Web Hypertext Application Technology
Working Group, expects HTML5 to reach W3C
Candidate Recommendation Stage in 2012, and
graduate to W3C Recommendation in 2022.”
8. Browsers
Vraag niet welke browser HTML 5 ondersteunt
Geen enkele implementeert de hele standaard!
Vraag welke browsers een bepaald deel
implementeren
CanIUse.com
En wat je kan doen met de overige browsers
HTML 5 Polyfills
9. Modernizr
“Modernizr is an open-source JavaScript library
that helps you build the next generation of HTML5
and CSS3-powered websites.”
http://www.modernizr.com/
10. Polyfills
“A polyfill is a piece of code (or plugin) that
provides the technology that you, the
developer, expect the browser to provide natively.”
14. Onderwerpen
Semantic markup
Input elementen
CSS3
Video & Audio
Canvas
Local storage
Drag-Drop & File IO
Geolocation
Web Workers
15. Semantic markup
Het gaat om de data, niet hoe het er uit ziet!
De meest gebruikte CSS classes bij <div> elementen
<div class=“nav”>
<div class=“section”>
<div class=“header”>
<div class=“footer”>
<div class=“article”>
<div class=“aside”>
16. Semantic markup
Nu zijn het HTML5 elementen
<nav>
<section>
<header>
<footer>
<article>
<aside>
17. Input elementen
De meeste data types moeten met:
<input type="text" />
De browser kan helpen als het weet om wat voor
data het gaat
search
url
number
datetime
Etc.
21. Video & Audio
Er is een nieuw <video> en <audio> element
Er is echter geen standaard encoding
OGV
WEBM
MP4
Meerdere <source> elementen opgeven
De browser kiest de eerste die werkt
Zie Wikipedia voor browser ondersteuning
22. Canvas
Een vlak om op te tekenen
Op dit moment is er alleen een 2D context
Primitives die je kunt tekenen
Lines
Rectangles
Arcs
Curves
Images
Paths
23. Canvas
De hele API wordt via JavaScript aangestuurd
Zeer krachtig maar lastig om mee te werken
Er zijn nog niet veel tools
Er is een AngryBirds versie mee gemaakt
http://chrome.angrybirds.com/
24. Local storage - Web Storage
Name – Value pair storage
Storage is per site
Het advies voor browsers is 5Mb max ruimte per site
sessionStorage
Geldig gedurende de browser sessie
localStorage
Blijft langer bestaan
De value moet een string zijn!
sessionStorage['data'] = JSON.stringify({ value: 1 });
data = JSON.parse(sessionStorage['data']);
25. Local storage - IndexDB
Een object of NoSQL store in de database
Werkt alleen in Chrome en FireFox
Zie demo
Er was een Web SQL Database
Is deprecated en vervangen door de IndexDB
Werkt nog wel in Webkit browsers (iOS)
26. Drag-Drop
Elementen verslepen in de browser
Ook files uit de Windows Explorer naar een HTML
element
Events voor
dragstart
dragenter
dragover
drop
Argument bevat een dataTransfer object
27. File IO
File IO met een FileReader object
File kan op verschillende manieren gelezen worden
readAsArrayBuffer()
readAsBinaryString()
readAsDataURL()
readAsText()
Als de file gelezen is gaat het onload event af
De result property bevat de inhoud
28. File IO
Soms is een file te groot om helemaal te lezen
Een Blob is een deel van een file
Met een file.slice() kan je een blob maken
Een FileReader object kan ook met een blob werken
29. Geolocation
Waar is iemand?
Bijvoorbeeld om een location based search te doen
De gebruiker moet toestemming geven
Werkt zowel in desktop als mobiele browsers
Nauwkeurigheid kan sterk varieren
Via het navigator object te vinden
navigator.geolocation.getCurrentPosition()
De options ondersteunt
enableHighAccuracy: true
31. Web Workers
JavaScript mag niet te lang duren van de browser
Via een Worker() object kan een JavaScript file in de
achtergrond gestart worden
Kan wel langer duren
32. Web Workers
Web Workers zijn beperkt in wat ze mogen doen
Niets met het document
Mogen wel IO doen
XMLHttpRequest
FileReader
importScripts()
Document kan berichten met worker uitwisselen
postMessage()
onmessage callback functie wordt aangeroepen
Alle data wordt gekloond
33. Conclusie
HTML 5 heeft een grote toekomst
Get is de enige platform onafhankelijke UI techniek
Zelfs binnen Windows 8 is het belangrijk
Diverse browsers ondersteunen verschillende
onderdelen
Gebruik feature detection om te zien wat wel en niet
Gebruik polyfills om ontbrekende stukken aan te vullen
Je hoeft niet te wachten tot het klaar is
Begin nu en maak betere web applicaties