Your SlideShare is downloading. ×
0
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

704

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. East of Toronto .NET User Group 2011-10-27Frédéric Harper – Microsoft Canada
  • 2. • It will be all about HTML5!
  • 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. + +HTML5 HTML5 CSS3 JavaScript
  • 5. Performance Semantics Styling Multimedia3D Effects Offline& Storage Connectivity Device Access
  • 6. First draft Working draft Last call Recommendation candidate Recommendation
  • 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.  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. <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. <header> <nav><section> <aside> <article> <article> <figure> <footer>
  • 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. Web Open Font Format
  • 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. 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. 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. polyfill(n) poly • fill: JavaScript that implants HTML5functionality in a browser that does not offernative support
  • 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.  http://caniuse.com/ http://www.modernizr.com/
  • 19. iOS Android Windows PhoneGeolocation     Offline   Local Storage   Video/Audio   Canvas  SVG   WebSQL  Gradients*   CSS3 Animations*   Text Shadows  CSS3 Transforms 
  • 20. And more…
  • 21. 1. You already know HTML
  • 22. 1. You already know HTML2. You already know the tools
  • 23. 1. You already know HTML2. You already know the tools3. Cross browsers / platforms / devices
  • 24. 1. You already know HTML2. You already know the tools3. Cross browsers / platforms / devices4. One of the future technology
  • 25. Try it
  • 26. Read on it
  • 27. Do coolproject
  • 28. Have fun!
  • 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. Frederic HarperDeveloper Evangelist @ Microsoftfredh@microsoft.comhttp://webnotwar.cahttp://outofcomfortzone.net

×