HTML 5 in een vogelvlucht        Maurice de Beijer
Waar gaan we het over hebben?  Waarom HTML 5?  Wie beslist er eigenlijk wat HTML 5 is?  Hoe gaan browsers er mee om?  Web ...
Wie ben ikMaurice de Beijer.The Problem Solver.Microsoft CSD MVP.DevelopMentor instructor.Twitter: @mauricedbBlog: http://...
Waarom HTML 5HTML is de meest verspreide UI technologie  Maar door browser verschillen lastig om mee te werkenMinder bedri...
Wie gaat er eigenlijk over?Het World Wide Web Consortium (W3C)  Was oorspronkelijk met XHTML2 bezigWeb Hypertext Applicati...
Wanneer is het klaar? “The Web Hypertext Application Technology Working Group, expects HTML5 to reach W3CCandidate Recomme...
Wanneer is het klaar? “The Web Hypertext Application Technology Working Group, expects HTML5 to reach W3CCandidate Recomme...
Hoe zit het met de browsers? Yahoo Graded Browser Support
Google analytics - msmvps.org 750.000 bezoekers per maand   95% gebruikt een van de eerste drie browsers
Google analytics - msmvps.org Hoe zit het met Internet Explorer?
Wat werkt in welke browser?CanIUse.com
Modernizr  “Modernizr is an open-source JavaScript librarythat helps you build the next generation of HTML5           and ...
Polyfills  “A polyfill is a piece of code (or plugin) thatprovides the technology that you, the developer,    expect the b...
Google Chrome FrameDraai Google Chrome binnen Internet Explorer 6 ofhogerWordt alleen gebruikt als er specifiek om gevraag...
Wat zit er allemaal in HTML 5?
Maar er is meer!
Web WorkersJavaScript mag niet te lang duren van de browserVia een Worker() object kan een JavaScript file in deachtergron...
Web WorkersWeb Workers zijn beperkt in wat ze mogen doen  Niets met het documentMogen wel IO doen  XMLHttpRequest  FileRea...
Web Workers DEMO
Web SocketsBidirectionele communicatie tussen de browser en deserver  Sockets voor het webGebruikt geen standaard HTTP  Ho...
Web SocketsEr is een server side component nodigSocket.IO is de populairste  Draait op node.jsDiverse .NET iplementaties  ...
Web Sockets DEMO
ConclusieHTML 5 heeft een grote toekomst  Het is de enige platform onafhankelijke UI techniek  Zelfs binnen Windows 8 is h...
Upcoming SlideShare
Loading in …5
×

HTML 5 in een vogelvlucht (Dutch)

3,248 views
3,179 views

Published on

HTML5 overview done at Achmea TechNight.

Note: This is a Dutch language presentation

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,248
On SlideShare
0
From Embeds
0
Number of Embeds
1,566
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML 5 in een vogelvlucht (Dutch)

  1. 1. HTML 5 in een vogelvlucht Maurice de Beijer
  2. 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. 3. Wie ben ikMaurice de Beijer.The Problem Solver.Microsoft CSD MVP.DevelopMentor instructor.Twitter: @mauricedbBlog: http://msmvps.com/blogs/theproblemsolver/Web: http://www.TheProblemSolver.nlE-mail: mauricedb@computer.org
  4. 4. Waarom HTML 5HTML is de meest verspreide UI technologie Maar door browser verschillen lastig om mee te werkenMinder bedrijven ondersteunen een enkel platform Bring your own hardware Smartphones en tablets ondersteunen geen pluginsMen wil rijkere applicaties Animaties Communicatie etc
  5. 5. Wie gaat er eigenlijk over?Het World Wide Web Consortium (W3C) Was oorspronkelijk met XHTML2 bezigWeb Hypertext Application Technology WorkingGroup (WHATWG) In 2004 begonnen uit onvrede met XHTML2Vanaf 2009 samen bezig Er wordt gewerkt aan “HTML The Living Standard”Het W3C neemt een snapshot Dat wordt HTML5
  6. 6. Wanneer is het klaar? “The Web Hypertext Application Technology Working Group, expects HTML5 to reach W3CCandidate Recommendation Stage in 2012, and graduate to W3C Recommendation in 2022.”
  7. 7. Wanneer is het klaar? “The Web Hypertext Application Technology Working Group, expects HTML5 to reach W3CCandidate Recommendation Stage in 2012, and graduate to W3C Recommendation in 2022.”
  8. 8. Hoe zit het met de browsers? Yahoo Graded Browser Support
  9. 9. Google analytics - msmvps.org 750.000 bezoekers per maand 95% gebruikt een van de eerste drie browsers
  10. 10. Google analytics - msmvps.org Hoe zit het met Internet Explorer?
  11. 11. Wat werkt in welke browser?CanIUse.com
  12. 12. Modernizr “Modernizr is an open-source JavaScript librarythat helps you build the next generation of HTML5 and CSS3-powered websites.” http://www.modernizr.com/
  13. 13. Polyfills “A polyfill is a piece of code (or plugin) thatprovides the technology that you, the developer, expect the browser to provide natively.”
  14. 14. Google Chrome FrameDraai Google Chrome binnen Internet Explorer 6 ofhogerWordt alleen gebruikt als er specifiek om gevraagdwordt 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. 15. Wat zit er allemaal in HTML 5?
  16. 16. Maar er is meer!
  17. 17. Web WorkersJavaScript mag niet te lang duren van de browserVia een Worker() object kan een JavaScript file in deachtergrond gestart worden Mag wel langer duren
  18. 18. Web WorkersWeb Workers zijn beperkt in wat ze mogen doen Niets met het documentMogen wel IO doen XMLHttpRequest FileReader importScripts()Document kan berichten met worker uitwisselen postMessage() onmessage callback functie wordt aangeroepenAlle data wordt gekloond
  19. 19. Web Workers DEMO
  20. 20. Web SocketsBidirectionele communicatie tussen de browser en deserver Sockets voor het webGebruikt geen standaard HTTP Hou rekening met oudere infrastructuur!Kan ook binaire data versturen.
  21. 21. Web SocketsEr is een server side component nodigSocket.IO is de populairste Draait op node.jsDiverse .NET iplementaties WCF 4.5 - WebSocketsHost SignalR.WebSockets (.NET 4.5) Fleck (.NET 4.0)
  22. 22. Web Sockets DEMO
  23. 23. ConclusieHTML 5 heeft een grote toekomst Het is de enige platform onafhankelijke UI techniek Zelfs binnen Windows 8 is het belangrijkDiverse browsers ondersteunen verschillendeonderdelen Gebruik feature detection om te zien wat wel en niet Gebruik polyfills om ontbrekende stukken aan te vullenJe hoeft niet te wachten tot het klaar is Begin nu en maak betere web applicaties

×