2. Congratulations! You are part of a global community of thousands of web developers who attend Web Camps to keep their web development skills up-to-date Web Camps are run all over the world in 6 continents, 30 countries Join the community! Facebook Fan Page (search for Web Camps) Follow @Webcamps on Twitter Find out more about events here: www.webcamps.ms You are a Web Camper!

3. HTML5: How about today? Katrien De Graeve @katriendg

5. What is HTML5? HTML5 Semantic Markup elements CSS3 Video and Audio Canvas and SVG ECMAScript 262 General Guidelines & Resources Agenda

6. HTML5 is... the future of the web not just a marketing message still under development huge, and testing isn’t binary needs to be done the right way What is HTML5?

7. Map of “HTML5”

8. Doctype New document structure New semantic elements section, nav, article, aside, hgroup, header, footer, figure, figcaption,...,... The basics – HTML5 Markup

9. DEMO New HTML5 Markup

10. HTML5 shim http://remysharp.com/2009/01/07/html5- enabling-script/ http://remysharp.com/2009/01/07/html5- enabling-script/ Use reset CSS HTML 5 Intellisense for Visual Studio 2010 and 2008 (last update April 2010): http://visualstudiogallery.msdn.microsoft.com/ en-us/d771cbc8-d60a-40b0-a1d8- f19fc393127d http://visualstudiogallery.msdn.microsoft.com/ en-us/d771cbc8-d60a-40b0-a1d8- f19fc393127d Rey Bango’s Visual Studio HTML5 Web and Page templates: http://blog.reybango.com/2010/09/21/how-to- create-html5-website-and-page-templates-for- visual-studio-2010/ http://blog.reybango.com/2010/09/21/how-to- create-html5-website-and-page-templates-for- visual-studio-2010/ What & How to use Today?

11. Colors & opacity Bordes & shadows Fonts Dynamic styling Selectors Media queries Namespaces CSS3

12. DEMO CSS3

13. Modernizr Media Queries @font-face with fallback formats (non WOFF) http://www.fontsquirrel.com/http://www.fontsquirrel.com/ (@font- face kit) What & How to use Today?

14. .target { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } Fallbacks with CSS

15. Containers & Codecs H.264 WebM Fallbacks HTML5 Video & Audio

16. DEMO HTML5 Video

17. Fallback mechanism with Silverlight or Flash, or download video file Use fallback for older browsers Check codecs & containers usage What & How to use Today?

18. Canvas SVG 1.1 Basic shapes Paths Text Transforms Painting Filling, Color Scripting Styling Gradients Patterns Canvas & SVG

19. DEMO

20. Fallback to Flash or Silverlight Fallback to images in some cases Some libraries out there (some Silverlight plugins, Raphael JavaScript library etc) Canvas/SVG: What & How to use Today?

21. Native JSON New Array Methods indexOf, forEach, every, map Enhanced Object Model create, defineProperty, getPrototypeOf Computational Methods string.trim, tolSOString, data.parse, date.now, bind ECMA Script 262

22. DEMO ECMAScript 5

23. jQuery: good framework to support multiple browsers Back-porting of new functions.JSON native support fallback to libraries on older browsers (for example use shim http://json.org/json2.js) http://json.org/json2.js What & How to use Today?

24. GENERAL GUIDELINES Using HTML5 Today:

25. What’s Generally Safe To Use? HTML5 Doc Type Semantic Elements Audio & Video Canvas Selection APIs Content Editable DOM Storage Ajax Navigation Cross Document Messaging SVG Document Object Model Core - Level 2 & 3 Events – Level 2 & 3 CSS3 2D Transforms Backgrounds & Borders Fonts Media Queries Selectors Colors and Opacity

26. Use Feature Detection vs Browser Detection List of browsers keeps growing Many different versions Browser version upgrade frequently Using Shims and Poly Fills General guidelines

27. // Target Legacy Code Only // place legacy code here Browser Detection For Legacy Isolation

28. if (Modernizr.localstorage) { // Yay – use local storage persistent } else { // Boo – Resort to cookies or a polyfill } if (Modernizr.svg) { // Yay - SVG is supported natively } else { // Boo – Resort to a fallback or polyfill } Modernizr with JavaScript

29. First Public Working Draft Working Draft Last Call Candidate Recommendati on Recommendati on

30. RESOURCES

31. Internet Explorer 9 Beta Guide for Developers http://msdn.microsoft.com/en-us/ie/ff468705 http://msdn.microsoft.com/en-us/ie/ff468705 HTML5 resources http://msdn.microsoft.com/nl-be/scriptjunkie http://msdn.microsoft.com/nl-be/scriptjunkie Reset CSS: http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/ Great list of PolyFills: http://bit.ly/ddLS2dhttp://bit.ly/ddLS2d About PolyFills: http://blog.reybango.com/2010/10/11/how-polyfills- fill-in-the-gaps-to-make-html5-and-css3-usable- today/ http://blog.reybango.com/2010/10/11/how-polyfills- fill-in-the-gaps-to-make-html5-and-css3-usable- today/ X-icon editor: http://www.xiconeditor.com/ http://www.xiconeditor.com/ W3C : www.w3.orgwww.w3.orgResources

32. http://html5labs.interoperabilitybridges.com/ HTML5 Labs – Prototype implementations

33. http://www.modernizr.comModernizr

34. http://www.microsoft.com/expression/products/Web_Overview.as px Tool: Expression Web SuperPreview

35. Browser Mode Changes the rendering engine only Great list of PolyFills Changes the rendering engine and user agent string Tools: F12 Developer Tools Testing from Internet Explorer 9 to 7

36. Adobe Illustrator to Canvas exporter, by MIX Online team http://www.visitmix.com/labs/ai2canvas/ AI > Canvas Plugin

37. http://visualstudiogallery.msdn.micro soft.com PAGE 37 Tools: Visual Studio HTML5 & SVG Extensions

38. THANK YOU!