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

  • 665 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
665
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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