HTML5 THE USEFUL BITS Alex Mackey Senior Consultant Readify SESSION CODE: WEB304 (c) 2011 Microsoft. All rights reserved.

ASP.net/SQL dev for last 10 years Author MVP Organized DDD Melbourne About me

"I don't think it's ready for production yet" Philippe Le Hegaret W3C interaction domain leader

Work in progress

Myths History Obsolete items What’s in HTML5? Detecting HTML5 support Conclusion Agenda

“You cannot use HTML5 till 2022”

“HTML 5 will break the internets”

“XHTML is dead”

“HTML5 includes Geolocation, CSS3, SVG, Web fonts etc etc”

“HTML5 replaces Silverlight & Flash”

HTML A very brief history

WHATWG Mozilla, Opera & later Apple created proposal for next generation of apps Proposal initially rejected W3C asked if could use as basis for HTML5 HTML 5 “officially” started in 2004 Wont be considered recommendation until 2 complete implementations History

Backwards compatible Stress practical usage Separate presentation from mark-up Well-defined error handling Don’t expose users to authoring errors Written in HTML & XML syntax Scripting is here to stay HTML5 Principals

Obsolete

Obsolete elements

So what’s new? ► Doctype, syntax, ► New DOM tranversal/manipulation methods ► Semantic elements ► Form enhancements ► Audio/Video ► Canvas ► Offline ► Stuff that people think is HTML5 but isn't..

No need to self-close tags: No need to wrap attributes in quotations: Case insensitive: Syntax

Semantic

Most popular class names

Most popular ID names

New semantic elements Header (intro or nav aids) Nav (navigation) Aside (separate from main content e.g advert) Footer (footer of document or section) Article (self contained and independent) Section (splitting page or article up) Can be nested gsnedders.html5.org/outliner/

Semantic Issues Browser stylesheet doesn’t target unrecognised elements IE needs hack to recognise elements: Firefox 2 (or Gecko-based browser pre 1.9b5) closes an unrecognised element and moves content outside

Forms

New input types Placeholder Autofocus Required New types and attributes ignored if not supported Drag and drop API

Element and document changes HTMLElement getElementsByClassName() HTMLDocument getElementsByClassName() activeElement hasFocus getSelection()

Audio/Visual

No one codec WebM? Make sure you add MIME type to IIS Consider 3 rd party wrapper js players e.g. SublimeVideo, Open Standard Media player

Canvas

► Supported in most modern browsers ► Workaround for earlier versions of IE: ► Experimental builds of opera have 3D support

Offline

Cache Manifest Browser history manipulation Local Storage Session storage

Microdata & Data

Scoped name/value pairs Any attribute starting with "data-" will be treated as a storage area for private data Previously micro-formats, RDFs Some elements get value from src or href /richsnippets

Not strictly HTML5..

Geolocation Web workers Web sockets File API

Web workers Previously long running scripts stopped browsers Use for computational intensive tasks No access to page DOM and cannot communicate with parent Workers can spawn workers Execution doesn’t block UI leaving responsive

Progressive Enhancement

Detection Check if property exists on global object: if (navigator.geolocation) Check if method exists on object: document.createElement('canvas').getContext; Use Modernizer (modernizr.com) if (Modernizr.audio)

BrowserHTML5testSunspider (ms)Kraken (ms)V8v5 IE 8 ( ) IE 9 beta ( ) IE 9 ( ) IE 10 Preview ( ) Firefox (3.6.9) Firefox (4.0b6) Chrome ( ) Opera (10.62) Safari ( ) ` Html5test.com (bonus points ignored) www2.webkit.org/perf/sunspider-0.9/sunspider.html krakenbenchmark.mozilla.com v8.googlecode.com/svn/data/benchmarks/v5/run.html

FunctionalityIE 8IE 9 betaFirefoxFirefox 4ChromeOperaSafari Doctype trigger strictYYYYYYY CanvasNYYYYYY VideoNPartial AudioNPartial FormsNNNPartial Drag and dropNNYYYNY Application CacheNNYYYYY Geo locationNNYYYYY Cross documentYYYYYYY Web socketsNNNYYNY Session storageYYYYYYY Local storageYYYYYYY SVG in textNYNYNNN Web workersNNYYYYY Web SQL DbNNNNYYY

Don’t use.. ► Semantic elements? ► Some new elements e.g. progress ► Drag and drop API ► Audio/Visual?

Features to use now ► Doctype ► Input types and attributes ► Cross document messaging ► Canvas ► Microdata & Data attribute ► Browser history APIs ► Geo-location & SVG ► Offline (careful!)

Any questions? readify.net simpleIsBest.co.uk

Further reading ► ► dev.w3.org/html5/spec/Overview.html ► diveintohtml5.com/ ► html5doctor.com/microformats/ ► developer.mozilla.org/en/Canvas_tutorial ► vimeo.com/ ► Html5demos.com ► webdatabase/ ► ► Introducing HTML5 Bruce Lawson & Remy Sharp ► PRO HTML5 Programming Lubbers et al

Enrol in Microsoft Virtual Academy Today Why Enroll, other than it being free? The MVA helps improve your IT skill set and advance your career with a free, easy to access training portal that allows you to learn at your own pace, focusing on Microsoft technologies. What Do I get for enrolment? ► Free training to make you become the Cloud-Hero in my Organization ► Help mastering your Training Path and get the recognition ► Connect with other IT Pros and discuss The Cloud Where do I Enrol? Then tell us what you think.

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. (c) 2011 Microsoft. All rights reserved.