HTML5 overview done at Achmea TechNight. Note: This is a Dutch language presentation

1. HTML 5 in een vogelvlucht
Maurice de Beijer

2. Waar gaan we het over hebben?
Waarom HTML 5?
Wie beslist er eigenlijk wat HTML 5 is?
Hoe gaan browsers er mee om?
Web Workers
Web Sockets

3. Wie ben ik
Maurice de Beijer.
The Problem Solver.
Microsoft CSD MVP.
DevelopMentor instructor.
Twitter: @mauricedb
Blog: http://msmvps.com/blogs/theproblemsolver/
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?
Het 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”
Het 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. Hoe zit het met de browsers?
Yahoo Graded Browser Support

9. Google analytics - msmvps.org
750.000 bezoekers per maand
95% gebruikt een van de eerste drie browsers

10. Google analytics - msmvps.org
Hoe zit het met Internet Explorer?

11. Wat werkt in welke browser?
CanIUse.com

12. 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/

13. 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. Google Chrome Frame
Draai Google Chrome binnen Internet Explorer 6 of
hoger
Wordt alleen gebruikt als er specifiek om gevraagd
wordt
Kan ook voor specifieke versies van IE
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Doet niets als Chrome Frame niet geinstalleerd is.

15. Wat zit er allemaal in HTML 5?

16. Maar er is meer!

17. Web Workers
JavaScript mag niet te lang duren van de browser
Via een Worker() object kan een JavaScript file in de
achtergrond gestart worden
Mag wel langer duren

18. 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

19. Web Workers
DEMO

20. Web Sockets
Bidirectionele communicatie tussen de browser en de
server
Sockets voor het web
Gebruikt geen standaard HTTP
Hou rekening met oudere infrastructuur!
Kan ook binaire data versturen.

21. Web Sockets
Er is een server side component nodig
Socket.IO is de populairste
Draait op node.js
Diverse .NET iplementaties
WCF 4.5 - WebSocketsHost
SignalR.WebSockets (.NET 4.5)
Fleck (.NET 4.0)

22. Web Sockets
DEMO

23. Conclusie
HTML 5 heeft een grote toekomst
Het 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