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

Like this? Share it with your network

Share

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

on

  • 927 views

 

Statistics

Views

Total Views
927
Views on SlideShare
927
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

East of Toronto .NET Usergroup - Put the 5 in HTML Presentation 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