html5 the useful bits alex mackey senior consultant readify session code: web304 (c) 2011 microsoft....
TRANSCRIPT
(c) 2011 Microsoft. All rights reserved.
HTML5 THE USEFUL BITS
Alex MackeySenior ConsultantReadify
SESSION CODE: WEB304
• 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 HegaretW3C interaction domain leaderhttp://www.infoworld.com/d/developer-world/w3c-hold-html5-in-websites-041
Work in progress
• Myths• History• Obsolete items• What’s in HTML5?• Detecting HTML5 support• Conclusion
Agenda
“You cannot useHTML5 till 2022”
“HTML 5 willbreak the internets”
“XHTML is dead”
“HTML5 includesGeolocation, CSS3, SVG,
Web fonts etc etc”
“HTML5 replacesSilverlight & Flash”
HTMLA 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
<basefont> <big> <center> <font> <s> <strike> <frame> <frameset> <noframes> <applet> <dir> <isindex> <tt> <u> <acronym>
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..
<!DOCTYPE HTML>
No need to self-close tags:<img src="nice.jpg" /><img src="nice.jpg">
No need to wrap attributes in quotations:<img src="nice.jpg"><img src=nice.jpg>
Case insensitive:<IMG SRC=nice.jpg><img src=nice.jpg><iMg SrC=nice.jpg>
Syntax
Semantic
footer
menu
style1
msonormal
text
content
title
style2
header
copyright
0 20000 40000 60000 80000 100000 120000 140000 160000 180000
Most popular class names 2009
http://devfiles.myopera.com/articles/572/idlist-url.htm
Most popular ID names 2009
http://devfiles.myopera.com/articles/572/idlist-url.htm
footer
content
header
logo
container
main
table1
menu
layer1
autonumber1
0 50000 100000 150000 200000 250000 300000
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: http://remysharp.com/downloads/html5.js
• Firefox 2 (or Gecko-based browser pre 1.9b5) closes an unrecognised element and moves content outside
Forms
Forms
• New input types• Placeholder• Autofocus• Required • New types and attributes ignored if not supported• Drag and drop API
Element and document changes
• HTMLElementgetElementsByClassName()
• HTMLDocumentgetElementsByClassName() activeElement hasFocus getSelection()
Audio/Visual
Audio/Visual
• No one codec• WebM?• Make sure you add MIME type to IIS• Consider 3rd party wrapper js players
e.g. SublimeVideo, Open Standard Media player
Canvas
Canvas
► Supported in most modern browsers► Workaround for earlier versions of IE:
http://excanvas.sourceforge.net/► Experimental builds of opera have 3D
support
http://www.benjoffe.com/code/demos/canvascape/
http://canvaspaint.org/
http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
Offline
Offline
• Cache Manifest• Browser history manipulation• Local Storage• Session storage
Microdata & Data
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 http://www.google.com/webmasters/tools/richsnippets
Not strictly HTML5..
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)
Browser HTML5test Sunspider (ms) Kraken (ms) V8v5
IE 8 (8.0.7600.16385)
27 5204.0 - 119
IE 9 beta (9.0.7930.16406)
96 661.4 61183.0 1328
IE 9(9.0.8112.16421)
141 788.3 40600.4 723
IE 10 Preview(10.0.1008.16421)
231 - - -
Firefox (3.6.9) 139 829.4 17924.7 524
Firefox (4.0b6) 204 746.2 11950.6 1008
Chrome (6.0.472.59)
217 588.2 15941.5 6226
Opera (10.62) 159 622.4 13617.3 3916
Safari (5.02 7522.18.5)
207 732.4 18689.6 2870`
Html5test.com (bonus points ignored)www2.webkit.org/perf/sunspider-0.9/sunspider.htmlkrakenbenchmark.mozilla.comv8.googlecode.com/svn/data/benchmarks/v5/run.html
http://caniuse.com/
Functionality IE 8 IE 9 beta Firefox Firefox 4 Chrome Opera Safari
Doctype trigger strict Y Y Y Y Y Y Y
Canvas N Y Y Y Y Y Y
Video N Partial Partial Partial Partial Partial Partial
Audio N Partial Partial Partial Partial Partial Partial
Forms N N N Partial Partial Partial Partial
Drag and drop N N Y Y Y N Y
Application Cache N N Y Y Y Y Y
Geo location N N Y Y Y Y Y
Cross document Y Y Y Y Y Y Y
Web sockets N N N Y Y N Y
Session storage Y Y Y Y Y Y Y
Local storage Y Y Y Y Y Y Y
SVG in text N Y N Y N N N
Web workers N N Y Y Y Y Y
Web SQL Db N N N N Y Y Y
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!)
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
Enrol in Microsoft Virtual Academy TodayWhy 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. [email protected]
(c) 2011 Microsoft. All rights reserved.
© 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.