Your SlideShare is downloading. ×
0
East of Toronto .NET User Group           2011-10-27Frédéric Harper – Microsoft Canada
• It will be all about HTML5!
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
+          +HTML5   HTML5       CSS3       JavaScript
Performance     Semantics           Styling      Multimedia3D Effects    Offline& Storage   Connectivity   Device Access
First draft   Working draft   Last call   Recommendation candidate   Recommendation
 Video               Drag-and-drop Document editing    Canvas Offline storage     Cross-document CSS3 Media        ...
 Video               Drag-and-drop Document editing    Canvas Offline storage     Cross-document CSS3 Media        ...
<div id=“header”>  <div id=“nav”>                          “sidebar”><div id=“section”>                           <div id=...
<header>  <nav><section>                 <aside> <article> <article> <figure>      <footer>
<video src="video.mp4" id="videoTag">   <source src="video.webm" />   <a href="http://videolink.com/">      Sorry, your br...
Web Open Font Format
<link href="mobile.css" rel="stylesheet" media="screenand (max-width:480px)“ type="text/css" /><link href="netbook.css" re...
X   X   X   X   X    Lowest CommonX           X   X      Dominator    X           X                    Only use features n...
X   X   X   X   X    Polyfill EnrichedX   X   X   X   X    X           X   Only use features either                    nat...
polyfill(n) poly • fill: JavaScript that implants HTML5functionality in a browser that does not offernative support
X   X   X   X   X                          AlternateX   X   X   X   X        ExperiencesX   X   X   X   XX   X   X   X   X...
 http://caniuse.com/ http://www.modernizr.com/
iOS   Android   Windows                                    PhoneGeolocation                                            ...
And more…
1.   You already know HTML
1.   You already know HTML2. You already know the tools
1.   You already know HTML2. You already know the tools3. Cross browsers / platforms / devices
1.   You already know HTML2. You already know the tools3. Cross browsers / platforms / devices4. One of the future technol...
Try it
Read on it
Do coolproject
Have fun!
http://www.w3.org/TR/html5/http://caniuse.comhttp://www.modernizr.com/http://makeawesomeweb.comhttp://html5gallery.comhttp...
Frederic HarperDeveloper Evangelist @ Microsoftfredh@microsoft.comhttp://webnotwar.cahttp://outofcomfortzone.net
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
×

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

710

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

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×