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) on Twitter Find out more about events here: You are a Web Camper!

HTML5: How about today? Katrien De

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

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?

Map of “HTML5”

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

DEMO New HTML5 Markup

HTML5 shim enabling-script/ enabling-script/ Use reset CSS HTML 5 Intellisense for Visual Studio 2010 and 2008 (last update April 2010): en-us/d771cbc8-d60a-40b0-a1d8- f19fc393127d en-us/d771cbc8-d60a-40b0-a1d8- f19fc393127d Rey Bango’s Visual Studio HTML5 Web and Page templates: create-html5-website-and-page-templates-for- visual-studio-2010/ create-html5-website-and-page-templates-for- visual-studio-2010/ What & How to use Today?

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

DEMO CSS3

Modernizr Media with fallback formats (non WOFF) face kit) What & How to use Today?

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

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

DEMO HTML5 Video

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

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

DEMO

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?

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

DEMO ECMAScript 5

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 What & How to use Today?

GENERAL GUIDELINES Using HTML5 Today:

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

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

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

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

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

RESOURCES

Internet Explorer 9 Beta Guide for Developers HTML5 resources Reset CSS: Great list of PolyFills: About PolyFills: fill-in-the-gaps-to-make-html5-and-css3-usable- today/ fill-in-the-gaps-to-make-html5-and-css3-usable- today/ X-icon editor: W3C :

HTML5 Labs – Prototype implementations

px Tool: Expression Web SuperPreview

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

Adobe Illustrator to Canvas exporter, by MIX Online team AI > Canvas Plugin

soft.com PAGE 37 Tools: Visual Studio HTML5 & SVG Extensions

THANK YOU!