You are a Web Camper Congratulations You are
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
HTML 5: How about today? Katrien De Graeve @katriendg
Agenda What is HTML 5? HTML 5 Semantic Markup elements CSS 3 Video and Audio Canvas and SVG ECMAScript 262 General Guidelines & Resources
What is HTML 5? HTML 5 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
Web Apps SVG Geolocation ECMA Script 262 CSS HTM L ECM A Map of “HTML 5” W 3 C ECMAScript 262 Geolocation API Filters Fonts SMIL Gradients and Patterns Styling Scripting Painting, Filling, Color Transforms Text Paths Basic Shapes Document Structure DOM L 3 Abstract Schemas DOM L 3 Views and Formatting DOM L 3 XPath DOM L 3 Validation DOM L 3 Load and Save DOM L 3 Events DOM L 3 Core DOM L 2 HTML DOM L 2 Traversal and Range DOM L 2 Style DOM L 2 Events DOM L 2 Views DOM L 2 Core DOM L 1 Xml. Http. Request L 2 Xml. Http. Request Web Workers Web Storage Web Sockets API Web IDL Web SQL Database Web DOM Core Uniform Messaging Policy Server-Sent Events Selectors API L 2 Selectors API Progress Events Programmable HTTP Caching and Serving CSS Generated Content for Paged Media Index DB File API Element Traversal CORS CSS Animations CSS Transitions CSS 3 D Transformations CSS 2 D Transformations CSS Image Values CSS Flexible Box Layout CSS Grid Positioning CSS Scoping CSS Basic User Interface CSS Color CSS Speech CSS Media Queries CSS Template Layout CSS Multi-column Layout CSS Basic Box Model CSS Fonts CSS Backgrounds and Borders CSS Ruby CSS Line Grid CSS Writing Modes CSS Text CSS Cascading and Inheritance CSS Values and Units CSS Print Profile CSS Paged Media CSS Namespaces CSS Snapshot 2007 Text alternatives Polyglot Markup HTML 5 Diff from HTML 4 HTML 5 Markup HTML+RDFa Microdata Canvas 2 D Context HTML 5
The basics – HTML 5 Markup Doctype New document structure New semantic elements section, nav, article, aside, hgroup, header, footer, figure, figcaption, . . . <video>, <audio>. . .
New HTML 5 Markup DEMO
What & How to use Today? HTML 5 shim http: //remysharp. com/2009/01/07/html 5 enabling-script/ Use reset CSS HTML 5 Intellisense for Visual Studio 2010 and 2008 (last update April 2010): http: //visualstudiogallery. msdn. microsoft. com/enus/d 771 cbc 8 -d 60 a-40 b 0 -a 1 d 8 -f 19 fc 393127 d Rey Bango’s Visual Studio HTML 5 Web and Page templates: http: //blog. reybango. com/2010/09/21/how-tocreate-html 5 -website-and-page-templates-forvisual-studio-2010/
CSS 3 Colors & opacity Bordes & shadows Fonts Dynamic styling Selectors Media queries Namespaces
CSS 3 DEMO
What & How to use Today? Modernizr Media Queries @font-face with fallback formats (non WOFF) http: //www. fontsquirrel. com/ (@fontface kit)
Fallbacks with CSS. target { -moz-border-radius: 20 px; -webkit-border-radius: 20 px; }
HTML 5 Video & Audio <video> <audio> Containers & Codecs H. 264 Web. M Fallbacks
HTML 5 Video DEMO
What & How to use Today? Fallback mechanism with Silverlight or Flash, or download video file Use fallback for older browsers Check codecs & containers usage
Canvas & SVG Canvas SVG 1. 1 Basic shapes Paths Text Transforms Painting Filling, Color Scripting Styling Gradients Patterns
Canvas & SVG DEMO
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 Java. Script library etc)
ECMA Script 262 Native JSON New Array Methods index. Of, for. Each, every, map Enhanced Object Model create, define. Property, get. Prototype. Of Computational Methods string. trim, tol. SOString, data. parse, date. now, bind
ECMAScript 5 DEMO
What & How to use Today? j. Query: 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/json 2. js)
Using HTML 5 Today: GENERAL GUIDELINES
What’s Generally Safe To Use? HTML 5 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 CSS 3 2 D Transforms Backgrounds & Borders Fonts Media Queries Selectors Colors and Opacity
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
Browser Detection For Legacy Isolation // Target Legacy Code Only <!-- IE lte 7]> // place legacy code here <[endif]-->
Modernizr with Java. Script 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 }
ECMAScript 262 Geolocation API Filters Fonts SMIL Gradients and Patterns Styling Scripting Painting, Filling, Color Transforms Text Paths Basic Shapes Document Structure DOM L 3 Abstract Schemas DOM L 3 Views and Formatting DOM L 3 XPath DOM L 3 Validation DOM L 3 Load and Save DOM L 3 Events DOM L 3 Core DOM L 2 HTML DOM L 2 Traversal and Range DOM L 2 Style DOM L 2 Events DOM L 2 Views DOM L 2 Core DOM L 1 Xml. Http. Request L 2 Xml. Http. Request Web Workers Web Storage Web Sockets API Web IDL Web SQL Database Web DOM Core Uniform Messaging Policy Server-Sent Events Selectors API L 2 Selectors API Progress Events Programmable HTTP Caching and Serving CSS Generated Content for Paged Media Index DB File API Element Traversal CORS CSS Animations CSS Transitions CSS 3 D Transformations CSS 2 D Transformations CSS Image Values CSS Flexible Box Layout CSS Grid Positioning CSS Scoping CSS Basic User Interface CSS Color CSS Speech CSS Media Queries CSS Template Layout CSS Multi-column Layout CSS Basic Box Model CSS Fonts CSS Backgrounds and Borders CSS Ruby CSS Line Grid CSS Writing Modes CSS Text CSS Cascading and Inheritance CSS Values and Units CSS Print Profile CSS Paged Media CSS Namespaces CSS Snapshot 2007 Text alternatives Polyglot Markup HTML 5 Diff from HTML 4 HTML 5 Markup HTML+RDFa Microdata Canvas 2 D Context HTML 5 Recommendati on Candidate Recommendati on Geolocation SVG Web Apps CSS Last Call Working Draft First Public Working Draft ECMA Script 262 HTML ECMA The map of “HTML 5” W 3 C
RESOURCES
Resources Internet Explorer 9 Beta Guide for Developers http: //msdn. microsoft. com/en-us/ie/ff 468705 HTML 5 resources http: //msdn. microsoft. com/nl-be/scriptjunkie Reset CSS: http: //meyerweb. com/eric/tools/css/reset/ Great list of Poly. Fills: http: //bit. ly/dd. LS 2 d About Poly. Fills: http: //blog. reybango. com/2010/10/11/how-polyfills-fill-in -the-gaps-to-make-html 5 -and-css 3 -usable-today/ X-icon editor: http: //www. xiconeditor. com/ W 3 C : www. w 3. org
HTML 5 Labs – Prototype implementations http: //html 5 labs. interoperabilitybridges. com/
Modernizr http: //www. modernizr. com
Tool: Expression Web Super. Preview http: //www. microsoft. com/expression/products/Web_Overview. aspx
Tools: F 12 Developer Tools Testing from Internet Explorer 9 to 7 Browser Mode Changes the rendering engine only Great list of Poly. Fills Changes the rendering engine and user agent string
AI > Canvas Plugin Adobe Illustrator to Canvas exporter, by MIX Online team http: //www. visitmix. com/labs/ai 2 canvas/
Tools: Visual Studio HTML 5 & SVG Extensions http: //visualstudiogallery. msdn. micros oft. com PAGE 37
THANK YOU!
- Slides: 38