East of Toronto .NET Usergroup - Put the 5 in HTML

838 views
767 views

Published on

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

  • Be the first to like this

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

No notes for slide

East of Toronto .NET Usergroup - Put the 5 in HTML

  1. 1. East of Toronto .NET User Group 2011-10-27Frédéric Harper – Microsoft Canada
  2. 2. • It will be all about HTML5!
  3. 3. A. You know HTML5 and use it nowB. You know what is HTML5 and don’t use itC. You don’t know what I am talking about
  4. 4. + +HTML5 HTML5 CSS3 JavaScript
  5. 5. Performance Semantics Styling Multimedia3D Effects Offline& Storage Connectivity Device Access
  6. 6. First draft Working draft Last call Recommendation candidate Recommendation
  7. 7.  Video  Drag-and-drop Document editing  Canvas Offline storage  Cross-document CSS3 Media messaging Queries  Audio Microdata  Browser history WOFF management Web Sockets  Semantics elements Web Workers  AND MUCH MORE!
  8. 8.  Video  Drag-and-drop Document editing  Canvas Offline storage  Cross-document CSS3 Media messaging Queries  Audio Microdata  Browser history WOFF management Web Sockets  Semantics elements Web Workers  AND MUCH MORE!
  9. 9. <div id=“header”> <div id=“nav”> “sidebar”><div id=“section”> <div id= <div id=“article”> <div id=“article”> <div id=“media”> <div id=“footer”>
  10. 10. <header> <nav><section> <aside> <article> <article> <figure> <footer>
  11. 11. <video src="video.mp4" id="videoTag"> <source src="video.webm" /> <a href="http://videolink.com/"> Sorry, your browser doesn’t support HTML5video tag </a> <!– Flash/Silverlight video here --></video>
  12. 12. Web Open Font Format
  13. 13. <link href="mobile.css" rel="stylesheet" media="screenand (max-width:480px)“ type="text/css" /><link href="netbook.css" rel="stylesheet“ media="screenand (min-width:481px) and (max-width: 1024px)“type="text/css" /><link href="laptop.css" rel="stylesheet" media="screenand (min-width:1025px)“ type="text/css" />
  14. 14. X X X X X Lowest CommonX X X Dominator X X Only use features natively X X X available in all target X X browsers
  15. 15. X X X X X Polyfill EnrichedX X X X X X X Only use features either natively available OR X X X available via JavaScript polyfill X X
  16. 16. polyfill(n) poly • fill: JavaScript that implants HTML5functionality in a browser that does not offernative support
  17. 17. X X X X X AlternateX X X X X ExperiencesX X X X XX X X X X Only use features available in target X X browsers AND design alternate experience for other browsers
  18. 18.  http://caniuse.com/ http://www.modernizr.com/
  19. 19. iOS Android Windows PhoneGeolocation     Offline   Local Storage   Video/Audio   Canvas  SVG   WebSQL  Gradients*   CSS3 Animations*   Text Shadows  CSS3 Transforms 
  20. 20. And more…
  21. 21. 1. You already know HTML
  22. 22. 1. You already know HTML2. You already know the tools
  23. 23. 1. You already know HTML2. You already know the tools3. Cross browsers / platforms / devices
  24. 24. 1. You already know HTML2. You already know the tools3. Cross browsers / platforms / devices4. One of the future technology
  25. 25. Try it
  26. 26. Read on it
  27. 27. Do coolproject
  28. 28. Have fun!
  29. 29. http://www.w3.org/TR/html5/http://caniuse.comhttp://www.modernizr.com/http://makeawesomeweb.comhttp://html5gallery.comhttp://diveintohtml5.org/http://www.html5tutorial.info/http://www.beautyoftheweb.comhttp://html5labs.interoperabilitybridges.com/
  30. 30. Frederic HarperDeveloper Evangelist @ Microsoftfredh@microsoft.comhttp://webnotwar.cahttp://outofcomfortzone.net

×