DevDays 2011 Html5 sessie

677 views
646 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
677
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DevDays 2011 Html5 sessie

  1. 1.
  2. 2. HTML 5: De praktische introductie<br />Christian Peeters | Trainer | Master it Training<br />
  3. 3. Agenda<br />De HTML 5 specificatie<br />Canvas<br />Scalable Vector Graphics<br />Audio / Video<br />
  4. 4. HTML 5<br />
  5. 5. Recommendation<br />First Public Working Draft <br />Working Draft<br />Last Call<br />Candidate Recommendation<br />
  6. 6. Browser Ondersteuning<br />“We learned a lot from IE6” <br />
  7. 7. HTML 5 Elementen<br /><!DOCTYPE html><br /><meta charset=“utf-8”><br /><header><br /><footer><br /><section><br /><article><br /><aside><br /><nav><br />
  8. 8. Layout HTML 4<br /><div id=“header”><br /><div id=“menu”><br /><div id=“mainContent”><br /><div class=“news”><br /><div class=“news”><br /><div class=“news”><br /><div id=“footer”><br />
  9. 9. Layout HTML 5<br /><header><br /><article class=“news”><br />Content<br /><header><br /><nav><br /><div id=“mainContent”><br /><article class=“news”><br /><aside><br />< article class=“news”><br /><footer><br />< article class=“news”><br /><nav><br /><footer><br />
  10. 10. Canvas<br />Scriptable bitmap<br />Tekenen van vormen en pixels<br />“fire & forget”<br />
  11. 11. Scalable Vector Graphics<br />Vector<br />Retained mode (vs. immediate mode)<br />Output van diverse tools<br />DOM<br />CSS<br />Javascript<br />
  12. 12. Support Check<br />function supportsSVG() { <br /> return !!document.createElementNS && <br />!!document.createElementNS('http://www.w3.org/2000/svg', <br />"svg").createSVGRect; <br />}<br />SVG plugin<br />
  13. 13. Audio & Video<br /><audio <br />src=<br />preload=<br />autoplay<br />loop<br />controls<br />><br />…<br /></audio><br /><video<br />src=urlnaar het audio of video bestand<br />width=breedte van de video<br />height=hoogte van de video<br />poster=urlnaareen thumbnail afbeelding<br />preload= (none/auto) starten met downloaden<br />autoplay direct beginnen met afspelen<br />loopblijvenherhalenvanaf het begin<br />controls toon start/stop/pause en tijdlijn<br />><br />…<br /></video><br />
  14. 14. Ondersteuning<br />Audio<br />installatie<br />Video<br />zalverdwijnen<br />
  15. 15. Fall-back<br /><video autoplay autobuffer="true" width="400px" height="300px"><br /><source src="vid-hi.mp4"<br />type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' <br />media="(min-device-width: 800px)"><br /><source src="vid-lo.mp4" <br />type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><br /><source src="vid.ogg" <br />type='video/ogg; codecs="theora, vorbis"'><br />fall-back content voor browsers die geen video-element ondersteunen<br /></video><br />
  16. 16. Mime-types registratie<br />IIS via management console<br />IIS Express via Web.config<br /><system.webServer><br /> <staticContent><br /> <mimeMap fileExtension=".webm" mimeType="video/webm" /><br /> <mimeMap fileExtension=".ogg" mimeType="application/ogg"/><br /> <mimeMap fileExtension=".ogv" mimeType="video/ogg" /><br /> <mimeMap fileExtension=".mp4" mimeType="video/mp4" /><br /> <mimeMap fileExtension=".m4v" mimeType="video/m4v" /><br /> </staticContent><br /> </system.webServer> <br />
  17. 17. Support check<br />function supports_video() { <br />return !!document.createElement('video').canPlayType;<br />}<br />
  18. 18. Modernizr<br />Gratis javascript library<br />Support checks<br /><ul><li>Canvas
  19. 19. Inline SVG
  20. 20. Audio / Video
  21. 21. CSS 3
  22. 22. Geolocation
  23. 23. Localstorage
  24. 24. Drag & drop
  25. 25. x-window messaging</li></li></ul><li>HTML 5<br />==<br /><sup><b></sup><br />
  26. 26. Vragen<br />?<br />
  27. 27. Links<br />blog.master-it.nl<br />www.w3.org/TR/html5/<br />www.Modernizer.com<br />www.beautyoftheweb.com/<br />

×