Maurice de Beijer
Waar gaan we het over hebben? Waarom HTML5? Wie beslist wat HTML5 is? Hoe gaan browsers er mee om? Verschillende HTML5...
Wie ben ik Maurice de Beijer. The Problem Solver. Microsoft CSD MVP. DevelopMentor instructor. Twitter:   @mauricedb ...
Waarom HTML5 HTML is de meest verspreide UI technologie    Maar door browser verschillen lastig om mee te     werken Mi...
Wie gaat er eigenlijk over? De World Wide Web Consortium (W3C)    Was oorspronkelijk met XHTML2 bezig Web Hypertext App...
Wanneer is het klaar?  “The Web Hypertext Application Technology  Working Group, expects HTML5 to reach W3C Candidate Reco...
Wanneer is het klaar?  “The Web Hypertext Application Technology  Working Group, expects HTML5 to reach W3C Candidate Reco...
Hoe zit het met de browsers? Yahoo Graded Browser Support
Google analytics - msmvps.org 762098 bezoeken laatste maand
Google analytics - msmvps.org
Wat werkt in welke browser? CanIUse.com
Modernizr “Modernizr is an open-source JavaScript librarythat helps you build the next generation of HTML5           and C...
Polyfills   “A polyfill is a piece of code (or plugin) that provides the technology that you, the developer,     expect th...
Google Chrome Frame Gebruik Google Chrome binnen Internet Explorer 6 of  hoger Wordt alleen gebruikt als er specifiek om...
Onderwerpen   Semantic markup   Input elementen   CSS3   Video & Audio   Canvas   Local storage   Drag-Drop & File ...
Semantic markup Het gaat om de data, niet hoe het er uit ziet! De meest gebruikte CSS classes bij <div> elementen    <d...
Semantic markup Nu zijn het HTML5 elementen   <nav>   <section>   <header>   <footer>   <article>   <aside>
Input elementen De meeste data types moeten met:      <input type="text" /> De browser kan helpen als het weet om wat vo...
Input elementen Softkeyboards passen zich aan http://bit.ly/InputElements
CSS 3 Rounded corners   .box {border-radius: 10px;} Drop shadows   .box {box-shadow: 10px 5px 5px grey;} Gradients   .b...
CSS 3 Media queries   @media screen and (max-width: 1024px) {      aside {         display: none;      }    } Transforms...
Video & Audio Er is een nieuw <video> en <audio> element Er is echter geen standaard encoding     OGV    WEBM    MP4...
Canvas Een vlak om op te tekenen    Op dit moment is er alleen een 2D context Primitives die je kunt tekenen    Lines ...
Canvas De hele API wordt via JavaScript aangestuurd Zeer krachtig maar lastig om mee te werken    Er zijn nog niet veel...
Local storage - Web Storage Name – Value pair storage    Storage is per site    Het advies voor browsers is 5Mb max rui...
Local storage - IndexedDB Een object of NoSQL store in de database    Werkt alleen in Chrome en FireFox    Zie demo Er...
Drag-Drop Elementen verslepen in de browser    Ook files uit de Windows Explorer naar een HTML     element Events voor ...
File IO File IO met een FileReader object File kan op verschillende manieren gelezen worden    readAsArrayBuffer()    ...
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...
Geolocation Waar is iemand?    Bijvoorbeeld om een location based search te doen De gebruiker moet toestemming geven W...
Geolocation De Position bevat minimaal    latitude    longitude    accuracy
Web Workers JavaScript mag niet te lang duren van de browser Via een Worker() object kan een JavaScript file in de achte...
Web Workers Web Workers zijn beperkt in wat ze mogen doen    Niets met het document Mogen wel IO doen    XMLHttpReques...
Offline Web Applications Een web app kan ook draaien zonder dat er een  netwerk verbinding is Via een cache manifest wor...
Offline Web Applications Manifest bevat secties voor:    Cache (default)    Network    Fallback Het manifest moet het...
Server Sent Events Push communicatie van de Server naar de browser    Gebruik standaard technieken om data naar de serve...
Server Sent Events EventSource object    Functies:       close()   Events       onmessage       onopen       onerro...
WebSockets Duplex communictatie tussen de browser en de server Geen HTTP verkeer    Begint wel als HTTP verkeer    Ser...
WebSockets WebSocket object   Functies:       send() om data te sturen          Kan ook binary data zijn!       close...
Conclusie HTML 5 heeft een grote toekomst    Het is de enige platform onafhankelijke UI techniek    Zelfs binnen Window...
Upcoming SlideShare
Loading in...5
×

HTML5 Overview

3,527

Published on

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,527
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Overview

  1. 1. Maurice de Beijer
  2. 2. Waar gaan we het over hebben? Waarom HTML5? Wie beslist wat HTML5 is? Hoe gaan browsers er mee om? Verschillende HTML5 onderdelen
  3. 3. Wie ben ik Maurice de Beijer. The Problem Solver. Microsoft CSD MVP. DevelopMentor instructor. Twitter: @mauricedb of @HTML5Support Blog: http://msmvps.com/blogs/ theproblemsolver/default.aspx Web: http://www.HTML5Support.nl E-mail: mauricedb@computer.org
  4. 4. Waarom HTML5 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. 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. 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. 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. 8. Hoe zit het met de browsers? Yahoo Graded Browser Support
  9. 9. Google analytics - msmvps.org 762098 bezoeken laatste maand
  10. 10. Google analytics - msmvps.org
  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) that provides the technology that you, the developer, expect the browser to provide natively.”
  14. 14. Google Chrome Frame Gebruik 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. 15. Onderwerpen Semantic markup Input elementen CSS3 Video & Audio Canvas Local storage Drag-Drop & File IO Geolocation Web Workers Offline Web applications Server Sent Events & WebSockets
  16. 16. 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”>
  17. 17. Semantic markup Nu zijn het HTML5 elementen  <nav>  <section>  <header>  <footer>  <article>  <aside>
  18. 18. 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.
  19. 19. Input elementen Softkeyboards passen zich aan http://bit.ly/InputElements
  20. 20. CSS 3 Rounded corners .box {border-radius: 10px;} Drop shadows .box {box-shadow: 10px 5px 5px grey;} Gradients .box {background: linear-gradient(Yellow, Lime);} Multi column text article {column-count: 3; }
  21. 21. CSS 3 Media queries @media screen and (max-width: 1024px) { aside { display: none; } } Transforms .box:hover {transform: scale(1.2);} Transitions .box {transition: transform 1s ease-in;}
  22. 22. 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
  23. 23. 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
  24. 24. Canvas De hele API wordt via JavaScript aangestuurd Zeer krachtig maar lastig om mee te werken  Er zijn nog niet veel tools  Adobe® Illustrator® plugin  Leonardo Sketch Er is een AngryBirds versie mee gemaakt  http://chrome.angrybirds.com/
  25. 25. 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]);
  26. 26. Local storage - IndexedDB 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 IndexedDB  Werkt nog wel in Webkit browsers (iOS)
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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. 31. Geolocation De Position bevat minimaal  latitude  longitude  accuracy
  32. 32. 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
  33. 33. 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
  34. 34. Offline Web Applications Een web app kan ook draaien zonder dat er een netwerk verbinding is Via een cache manifest wordt er bepaald wat voor offline beschikt is De cached resources komen altijd uit de cache  Het manifest wordt gebruikt om de cache bij te werken  Dit gebeurt pas nadat de pagina getoond is  Alleen als de inhoud van het manifest anders is
  35. 35. Offline Web Applications Manifest bevat secties voor:  Cache (default)  Network  Fallback Het manifest moet het juiste mime type hebben: text/cache-manifest
  36. 36. Server Sent Events Push communicatie van de Server naar de browser  Gebruik standaard technieken om data naar de server te sturen. Alles is gewoon HTTP verkeer  Is eigenlijk gewoon long polling  Pas op met verbindingen die te lang open blijven (30 seconden to max 2 minuten)
  37. 37. Server Sent Events EventSource object  Functies:  close()  Events  onmessage  onopen  onerror  Gaat ook af als de verbinding gesloten wordt
  38. 38. WebSockets Duplex communictatie tussen de browser en de server Geen HTTP verkeer  Begint wel als HTTP verkeer  Server doet een upgrade naar WS dmv een “101 Switching Protocols” response Ondersteuning is nog beperkt  Alleen Chrome en FireFox (met prefix)
  39. 39. WebSockets WebSocket object  Functies:  send() om data te sturen  Kan ook binary data zijn!  close()  Events voor als er wat gebeurt  onmessage  onopen  onclose  onerror
  40. 40. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×