1. East of Toronto .NET User Group
2011-10-27
Frédéric Harper – Microsoft Canada

3. • It will be all about HTML5!

4. A. You know HTML5 and use it now
B. You know what is HTML5 and don’t use it
C. You don’t know what I am talking about

5. + +
HTML5 HTML5 CSS3 JavaScript

6. Performance Semantics Styling Multimedia
3D Effects Offline& Storage Connectivity Device Access

7. First draft Working draft Last call Recommendation candidate Recommendation

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.  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!

11. <div id=“header”>
<div id=“nav”>
“sidebar”>
<div id=“section”>
<div id=
<div id=“article”>
<div id=“article”>
<div id=“media”>
<div id=“footer”>

12. <header>
<nav>
<section>
<aside>
<article>
<article>
<figure>
<footer>

16. <video src="video.mp4" id="videoTag">
<source src="video.webm" />
<a href="http://videolink.com/">
Sorry, your browser doesn’t support HTML5
video tag
</a>
<!– Flash/Silverlight video here -->
</video>

17. Web Open Font Format

20. <link href="mobile.css" rel="stylesheet" media="screen
and (max-width:480px)“ type="text/css" />
<link href="netbook.css" rel="stylesheet“ media="screen
and (min-width:481px) and (max-width: 1024px)“
type="text/css" />
<link href="laptop.css" rel="stylesheet" media="screen
and (min-width:1025px)“ type="text/css" />

22. X X X X X Lowest Common
X X X Dominator
X X
Only use features natively
X X X
available in all target
X X browsers

23. X X X X X Polyfill Enriched
X X X X X
X X Only use features either
natively available OR
X X X available via JavaScript
polyfill
X X

24. polyfill
(n) poly • fill: JavaScript that implants HTML5
functionality in a browser that does not offer
native support

25. X X X X X
Alternate
X X X X X Experiences
X X X X X
X X X X X Only use features
available in target
X X browsers AND design
alternate experience for
other browsers

26.  http://caniuse.com/
 http://www.modernizr.com/

27. iOS Android Windows
Phone
Geolocation   
 
Offline   
Local Storage   
Video/Audio   
Canvas  
SVG   
WebSQL  
Gradients*   
CSS3 Animations*   
Text Shadows  
CSS3 Transforms 

32. And more…

34. 1. You already know HTML

35. 1. You already know HTML
2. You already know the tools

36. 1. You already know HTML
2. You already know the tools
3. Cross browsers / platforms / devices

37. 1. You already know HTML
2. You already know the tools
3. Cross browsers / platforms / devices
4. One of the future technology

40. Try it

41. Read on it

42. Do cool
project

43. Have fun!

44. http://www.w3.org/TR/html5/
http://caniuse.com
http://www.modernizr.com/
http://makeawesomeweb.com
http://html5gallery.com
http://diveintohtml5.org/
http://www.html5tutorial.info/
http://www.beautyoftheweb.com
http://html5labs.interoperabilitybridges.com/

45. Frederic Harper
Developer Evangelist @ Microsoft
fredh@microsoft.com
http://webnotwar.ca
http://outofcomfortzone.net