1. FITC Spotlight HTML5 - 2011-12-03
Frédéric Harper - @fharper
Microsoft Canada

5. 1. You know HTML5 and use it now
2. You know what is HTML5 and don’t use it
3. You are totally new to this

6. http://www.fanpop.com/spots/dcs-flash/images/9732789/title/flash-fanart

7. http://esselinkc.wordpress.com/category/uncategorized/

10. http://azure.com/

12. http://www.duncannuggets.com/2011/02/duncan-nugget-68-minor-situations-major.html

14. + +
HTML5 HTML5 CSS3 JavaScript

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

16.  Video  Drag-and-drop
 Document editing  Canvas
 Offline storage  Cross-document messaging
 CSS3 Media Queries  Audio
 Microdata  Semantics elements
 WOFF  Web Sockets
 Web Workers  AND MUCH MORE!
 Geolocalisation

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

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

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

23. <style type="text/css">
@font-face {
font-family: MyFont;
src: url('Font.woff');
}
</style>
<div style="font: 24pt MyFont, sans-serif;">
Text that I want to use the font MyFont.
</div>

26. <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" />

28. First draft Working draft Last call Recommendation candidate Recommendation

29. X X X X X Lowest Common
X X X Dominator
X X
X X X
X X

30. X X X X X Polyfill Enriched
X X X X X
X X
X X X
X X

31. X X X X X
Alternate
X X X X X Experiences
X X X X X
X X X X X
X X

36. And
more…

39. And
more…

40. http://joshduck.com/periodic-table.html

42.  Try it

43.  Try it
 Read on it

44.  Try it
 Read on it
 Do cool project

45.  Try it
 Read on it
 Do cool project
 and have fun!

46. http://www.w3.org/TR/html5/
http://caniuse.com
http://www.modernizr.com/
http://makeawesomeweb.com
http://html5gallery.com
http://diveintohtml5.org/
http://www.beautyoftheweb.com
http://ie.microsoft.com/testdrive/

48. Frédéric Harper
Developer Evangelist @ Microsoft
fredh@microsoft.com
@fharper
http://webnotwar.ca
http://oocz.net