Discover HTML5 and CSS3: The Future of Web Development

2. You are a Web Camper! • 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

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

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

6. What is HTML5? 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

7. Map of “HTML5”

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

9. New HTML5 Markup DEMO

10. What & How to use Today? • HTML5 shim 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 • 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/

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

12. CSS3 DEMO

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

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

15. HTML5 Video & Audio • <video> • <audio> • Containers & Codecs • H.264 • WebM • Fallbacks

16. HTML5 Video DEMO

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

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

19. Canvas & SVG DEMO

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

21. ECMA Script 262 • 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

22. ECMAScript 5 DEMO

23. What & How to use Today? • 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)

24. Using HTML5 Today: General Guidelines

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. General guidelines • Use Feature Detection vs Browser Detection • List of browsers keeps growing • Many different versions • Browser version upgrade frequently • Using Shims and Poly Fills

27. Browser Detection For Legacy Isolation // Target Legacy Code Only <!-- IE lte 7]> // place legacy code here <[endif]-->

28. Modernizr with JavaScript 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 }

29. The map of “HTML5” First Public Working Draft Working Draft Last Call Candidate Recommendation Recommendation

30. Resources

31. Resources • Internet Explorer 9 Beta Guide for Developershttp://msdn.microsoft.com/en-us/ie/ff468705 • HTML5 resourceshttp://msdn.microsoft.com/nl-be/scriptjunkie • Reset CSS: http://meyerweb.com/eric/tools/css/reset/ • Great list of PolyFills: http://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/ • X-icon editor: http://www.xiconeditor.com/ • W3C : www.w3.org

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

33. Modernizr • http://www.modernizr.com

34. Tool: Expression Web SuperPreview • http://www.microsoft.com/expression/products/Web_Overview.aspx

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

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

37. Tools: Visual Studio HTML5 & SVG Extensions • http://visualstudiogallery.msdn.microsoft.com

38. THANK YOU!