SlideShare a Scribd company logo
1 of 23
Download to read offline
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 Workers
  Web Sockets
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
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
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
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?



 “The Web Hypertext Application Technology
 Working Group, expects HTML5 to reach W3C
Candidate Recommendation Stage in 2012, and
 graduate to W3C Recommendation in 2022.”
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 library
that helps you build the next generation of HTML5
           and CSS3-powered websites.”


           http://www.modernizr.com/
Polyfills



  “A polyfill is a piece of code (or plugin) that
provides the technology that you, the developer,
    expect the browser to provide natively.”
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.
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
Web Workers




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

More Related Content

Similar to HTML 5 in een vogelvlucht (Dutch)

HTML5. Waarom HTML5 nu relevant is voor jóu.
HTML5. Waarom HTML5 nu relevant is voor jóu.HTML5. Waarom HTML5 nu relevant is voor jóu.
HTML5. Waarom HTML5 nu relevant is voor jóu.Willem Mulder
 
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggeHTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggePureplexity
 
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7srprs.me
 
Third Generation Internet Applications
Third Generation Internet ApplicationsThird Generation Internet Applications
Third Generation Internet ApplicationsPatrick Koning
 
Case Automatisering Gids Sitecore Event 12062008
Case Automatisering Gids Sitecore Event 12062008Case Automatisering Gids Sitecore Event 12062008
Case Automatisering Gids Sitecore Event 12062008efocus.im
 
Html5 jeugdwerknet
Html5 jeugdwerknetHtml5 jeugdwerknet
Html5 jeugdwerknetHans Rossel
 
Web3 - Gemeentelijke Dienstverlening
Web3 - Gemeentelijke DienstverleningWeb3 - Gemeentelijke Dienstverlening
Web3 - Gemeentelijke DienstverleningLars Smeets
 
Community Kick Off Slides
Community Kick Off SlidesCommunity Kick Off Slides
Community Kick Off SlidesWouterJansen
 
DPC2007 Case Study Surfnet (Herman Van Dompseler)
DPC2007 Case Study Surfnet (Herman Van Dompseler)DPC2007 Case Study Surfnet (Herman Van Dompseler)
DPC2007 Case Study Surfnet (Herman Van Dompseler)dpc
 
Crowd Designing Microservices Architecture
Crowd Designing Microservices ArchitectureCrowd Designing Microservices Architecture
Crowd Designing Microservices ArchitectureRubiX BV
 

Similar to HTML 5 in een vogelvlucht (Dutch) (20)

HTML5 (Dutch)
HTML5 (Dutch)HTML5 (Dutch)
HTML5 (Dutch)
 
HTML5. Waarom HTML5 nu relevant is voor jóu.
HTML5. Waarom HTML5 nu relevant is voor jóu.HTML5. Waarom HTML5 nu relevant is voor jóu.
HTML5. Waarom HTML5 nu relevant is voor jóu.
 
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggeHTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
 
Html5 App
Html5 AppHtml5 App
Html5 App
 
Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7Usabilityweb magazine nr. 7
Usabilityweb magazine nr. 7
 
ICT
ICTICT
ICT
 
Netwerken 6 4-diensten-op-het-internet
Netwerken 6 4-diensten-op-het-internetNetwerken 6 4-diensten-op-het-internet
Netwerken 6 4-diensten-op-het-internet
 
Third Generation Internet Applications
Third Generation Internet ApplicationsThird Generation Internet Applications
Third Generation Internet Applications
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Api kooien les 1
Api kooien les 1Api kooien les 1
Api kooien les 1
 
Alles Over Api's
Alles Over Api'sAlles Over Api's
Alles Over Api's
 
Case Automatisering Gids Sitecore Event 12062008
Case Automatisering Gids Sitecore Event 12062008Case Automatisering Gids Sitecore Event 12062008
Case Automatisering Gids Sitecore Event 12062008
 
Cms
CmsCms
Cms
 
Html5 jeugdwerknet
Html5 jeugdwerknetHtml5 jeugdwerknet
Html5 jeugdwerknet
 
Web3 - Gemeentelijke Dienstverlening
Web3 - Gemeentelijke DienstverleningWeb3 - Gemeentelijke Dienstverlening
Web3 - Gemeentelijke Dienstverlening
 
2010 byte joomladagen
2010 byte joomladagen2010 byte joomladagen
2010 byte joomladagen
 
Community Kick Off Slides
Community Kick Off SlidesCommunity Kick Off Slides
Community Kick Off Slides
 
DPC2007 Case Study Surfnet (Herman Van Dompseler)
DPC2007 Case Study Surfnet (Herman Van Dompseler)DPC2007 Case Study Surfnet (Herman Van Dompseler)
DPC2007 Case Study Surfnet (Herman Van Dompseler)
 
BiMserver
BiMserverBiMserver
BiMserver
 
Crowd Designing Microservices Architecture
Crowd Designing Microservices ArchitectureCrowd Designing Microservices Architecture
Crowd Designing Microservices Architecture
 

More from Maurice De Beijer [MVP]

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppMaurice De Beijer [MVP]
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectMaurice De Beijer [MVP]
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Maurice De Beijer [MVP]
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureMaurice De Beijer [MVP]
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactMaurice De Beijer [MVP]
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureMaurice De Beijer [MVP]
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using CypressMaurice De Beijer [MVP]
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingMaurice De Beijer [MVP]
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockMaurice De Beijer [MVP]
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptMaurice De Beijer [MVP]
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptMaurice De Beijer [MVP]
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisMaurice De Beijer [MVP]
 

More from Maurice De Beijer [MVP] (20)

Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components AppPractice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
 
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software ProjectA foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
 
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressSurati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
 
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using CypressBuild reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
 
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and AzureBuilding reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
 
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with ReactBuilding large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
 
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & AzureBuilding Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
Building reliable web applications using Cypress
Building reliable web applications using CypressBuilding reliable web applications using Cypress
Building reliable web applications using Cypress
 
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent renderingGetting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
 
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred HitchcockReact suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
 
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScriptFrom zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
The new React
The new React The new React
The new React
 
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScriptFrom zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
 
Why I am hooked on the future of React
Why I am hooked on the future of ReactWhy I am hooked on the future of React
Why I am hooked on the future of React
 
I am hooked on React
I am hooked on ReactI am hooked on React
I am hooked on React
 
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apisCreate flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
 

HTML 5 in een vogelvlucht (Dutch)

  • 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
  • 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)
  • 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