HTML 5 in een vogelvluchtMaurice de Beijer

Waarom HTML 5? Wie beslist er eigenlijk wat HTML 5 is? Hoe gaan browsers er mee om? Web Workers Web Sockets

Waar gaan we het over hebben?

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

Wie ben ik

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

Waarom HTML 5

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

Wie gaat er eigenlijk over?

“The Web Hypertext Application Technology Working Group, expects

HTML5 to reach W3C Candidate Recommendation Stage in 2012, and graduate to W3C Recommendation in

2022.”

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

Wanneer is het klaar?

Yahoo Graded Browser Support

Hoe zit het met de browsers?

750.000 bezoekers per maand 95% gebruikt een van de eerste drie browsers

Google analytics - msmvps.org

Hoe zit het met Internet Explorer?

Google analytics - msmvps.org

CanIUse.com

Wat werkt in welke browser?

“Modernizr is an open-source JavaScript library that helps you build the next generation of

HTML5 and CSS3-powered websites.”

http://www.modernizr.com/

Modernizr

“A polyfill is a piece of code (or plugin) that

provides the technology that you, the developer, expect the browser to provide

natively.”

Polyfills

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.

Google Chrome Frame

Wat zit er allemaal in HTML 5?

Maar er is meer!

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

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

DEMO

Web Workers

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.

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)

Web Sockets

DEMO

Web Sockets

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