East of Toronto .NET Usergroup - Put the 5 in HTML
•
0 likes•560 views
The document is a presentation about HTML5 given by Frédéric Harper of Microsoft Canada. It introduces HTML5 and its key features such as video, audio, canvas, drag and drop. It discusses the different stages in the HTML5 specification process. It also covers strategies for using HTML5 across different browsers, including the lowest common denominator approach, polyfills, and alternate experiences. The presentation encourages learning more about HTML5 and having fun building projects with it.
More Related Content
What's hot
What's hot (17)
Viewers also liked
Similar to East of Toronto .NET Usergroup - Put the 5 in HTML
Similar to East of Toronto .NET Usergroup - Put the 5 in HTML (20)
More from Frédéric Harper
More from Frédéric Harper (20)
Recently uploaded
Recently uploaded (20)
East of Toronto .NET Usergroup - Put the 5 in HTML
- 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
- 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!
- 45. Frederic Harper Developer Evangelist @ Microsoft fredh@microsoft.com http://webnotwar.ca http://outofcomfortzone.net