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

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

4. "I don't think it's ready for production yet" Philippe Le Hegaret W3C interaction domain leader http://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041

5. Work in progress

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

8. “You cannot use HTML5 till 2022”

9. “HTML 5 will break the internets”

10. “XHTML is dead”

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

12. “HTML5 replaces Silverlight & Flash”

13. HTML A very brief history

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

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

25. Obsolete

26. Obsolete elements

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

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

30. Semantic

31. Most popular class names 2009 http://devfiles.myopera.com/articles/572/idlist-url.htm

32. Most popular ID names 2009 http://devfiles.myopera.com/articles/572/idlist-url.htm

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

35. Semantic Issues Browser stylesheet doesn’t target unrecognised elements IE needs hack to recognise elements: http://remysharp.com/downloads/html5.js Firefox 2 (or Gecko-based browser pre 1.9b5) closes an unrecognised element and moves content outside

36. Forms

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

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

39. Audio/Visual

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

41. Canvas

42. ► Supported in most modern browsers ► Workaround for earlier versions of IE: http://excanvas.sourceforge.net/ ► Experimental builds of opera have 3D support

43. http://www.benjoffe.com/code/demos/canvascape/

44. http://canvaspaint.org/

45. http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

46. Offline

47. Cache Manifest Browser history manipulation Local Storage Session storage

48. Microdata & Data

49. 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 http://www.google.com/webmasters/tools /richsnippets

50. Not strictly HTML5..

51. Geolocation Web workers Web sockets File API

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

53. Progressive Enhancement

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

55. BrowserHTML5testSunspider (ms)Kraken (ms)V8v5 IE 8 (8.0.7600.16385) 275204.0-119 IE 9 beta (9.0.7930.16406) 96661.461183.01328 IE 9 (9.0.8112.16421) 141788.340600.4723 IE 10 Preview (10.0.1008.16421) 231--- Firefox (3.6.9)139829.417924.7524 Firefox (4.0b6)204746.211950.61008 Chrome (6.0.472.59) 217588.215941.56226 Opera (10.62)159622.413617.33916 Safari (5.02 7522.18.5) 207732.418689.62870` 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

56. http://caniuse.com/

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

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

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

64. Any questions? readify.net 1300 666 274 simpleIsBest.co.uk alexjmackey@gmail.com

65. Further reading ► www.w3.org/TR/html5-diff/ ► dev.w3.org/html5/spec/Overview.html ► diveintohtml5.com/ ► html5doctor.com/microformats/ ► developer.mozilla.org/en/Canvas_tutorial ► vimeo.com/5810449 ► Html5demos.com http://validator.w3.org/ http://html5.validator.nu/ ► http://hacks.mozilla.org/2010/06/comparing-indexeddb-and- webdatabase/ ► http://simon.html5.org/dump/html5-canvas-cheat-sheet.html ► Introducing HTML5 Bruce Lawson & Remy Sharp ► PRO HTML5 Programming Lubbers et al

66. 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? www.microsoftvirtualacademy.com Then tell us what you think. TellTheDean@microsoft.com

67. © 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.