FITC Spotlight HTML5 - The state of the web

1,949 views
1,871 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,949
On SlideShare
0
From Embeds
0
Number of Embeds
583
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

FITC Spotlight HTML5 - The state of the web

  1. 1. FITC Spotlight HTML5 - 2011-12-03 Frédéric Harper - @fharper Microsoft Canada
  2. 2. 1. You know HTML5 and use it now2. You know what is HTML5 and don’t use it3. You are totally new to this
  3. 3. http://www.fanpop.com/spots/dcs-flash/images/9732789/title/flash-fanart
  4. 4. http://esselinkc.wordpress.com/category/uncategorized/
  5. 5. http://azure.com/
  6. 6. http://www.duncannuggets.com/2011/02/duncan-nugget-68-minor-situations-major.html
  7. 7. + +HTML5 HTML5 CSS3 JavaScript
  8. 8. Performance Semantics Styling Multimedia3D Effects Offline& Storage Connectivity Device Access
  9. 9.  Video  Drag-and-drop Document editing  Canvas Offline storage  Cross-document messaging CSS3 Media Queries  Audio Microdata  Semantics elements WOFF  Web Sockets Web Workers  AND MUCH MORE! Geolocalisation
  10. 10. <video src="video.mp4" id="videoTag"> <source src="video.webm" /> <a href="http://videolink.com/"> Your browser doesn’t support HTML5 video tag </a> <!– Flash/Silverlight video here --></video>
  11. 11. <div id=“header”> <div id=“nav”> “sidebar”><div id=“section”> <div id= <div id=“article”> <div id=“article”> <div id=“media”> <div id=“footer”>
  12. 12. <header> <nav><section> <aside> <article> <article> <figure> <footer>
  13. 13. <style type="text/css"> @font-face { font-family: MyFont; src: url(Font.woff); }</style><div style="font: 24pt MyFont, sans-serif;"> Text that I want to use the font MyFont.</div>
  14. 14. <link href="mobile.css" rel="stylesheet" media="screenand (max-width:480px)“ type="text/css" /><link href="netbook.css" rel="stylesheet“media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" /><link href="laptop.css" rel="stylesheet" media="screenand (min-width:1025px)“ type="text/css" />
  15. 15. First draft Working draft Last call Recommendation candidate Recommendation
  16. 16. X X X X X Lowest CommonX X X Dominator X X X X X X X
  17. 17. X X X X X Polyfill EnrichedX X X X X X X X X X X X
  18. 18. X X X X X AlternateX X X X X ExperiencesX X X X XX X X X X X X
  19. 19. Andmore…
  20. 20. Andmore…
  21. 21. http://joshduck.com/periodic-table.html
  22. 22.  Try it
  23. 23.  Try it Read on it
  24. 24.  Try it Read on it Do cool project
  25. 25.  Try it Read on it Do cool project and have fun!
  26. 26. http://www.w3.org/TR/html5/http://caniuse.comhttp://www.modernizr.com/http://makeawesomeweb.comhttp://html5gallery.comhttp://diveintohtml5.org/http://www.beautyoftheweb.comhttp://ie.microsoft.com/testdrive/
  27. 27. Frédéric HarperDeveloper Evangelist @ Microsoftfredh@microsoft.com@fharperhttp://webnotwar.cahttp://oocz.net

×