1 / 38

You are a Web Camper!

You are a Web Camper!. Congratulations! Y ou 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!

duard
Download Presentation

You are a Web Camper!

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 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

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

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

  4. 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

  5. Map of “HTML5”

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

  7. New HTML5 Markup DEMO

  8. 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/

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

  10. CSS3 DEMO

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

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

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

  14. HTML5 Video DEMO

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

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

  17. Canvas & SVG DEMO

  18. 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)

  19. 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

  20. ECMAScript 5 DEMO

  21. 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)

  22. Using HTML5 Today: General Guidelines

  23. 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

  24. 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

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

  26. 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 }

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

  28. Resources

  29. 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

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

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

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

  33. 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

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

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

  36. THANK YOU!

More Related