W3C Widgets: Apps made with Web Standards

HTML5 you may ask yourself: how did we get here? Bruce Lawson, Opera Software WIPA tour/ Sydney, Melbourne, Canberra, Perth, Brisbane / November 2010

Archiutect pic

XHTML 2 <img />

Thank you @mamipeko http://d.hatena.ne.jp/Mamipeko/

We consider Web Applications to be an important area that has not been adequately served by existing technologies… There is a rising threat of single- vendor solutions addressing this problem before jointly-developed specifications. http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html

© Copyright 2004-2010 Apple Computer, Inc., Mozilla Foundation, and Opera Software ASA. You are granted a license to use, reproduce and create derivative works of this document. http://www.whatwg.org/specs/web-apps/current-work/

2007 W3C HTML group revived

Why HTML5 wins ● Backwards compatibility, and a clear migration path. ● Well-defined error handling. ● Users should not be exposed to authoring errors.

Why HTML5 wins ● Practical use: every feature that goes into the Web- applications specifications must be justified by a practical use case. ●Scripting is here to stay (but should be avoided where more convenient declarative mark-up can be used). ● Open process (arguable!).

Other Design Principles ● Pave the cowpaths. ● 80/ 20 rule ●Consider users over authors over implementors over specifiers over theoretical purity.

HTML5 <!DOCTYPE html>

Geolocation SVG CSS

HTML5 does not replace HTML 4.01

HTML5 has more bling!

HTML5 is umbrella term: markup elements and JavaScript APIs

30 new elements (or maybe 31)

Top class names 1. footer 11. button 2. menu 12. main 3. style1 13. style3 4. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo 10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm

Top 20 id names 1. footer 11. search 2. content 12. nav 3. header 13. wrapper 4. logo 14. top 5. container 15. table2 6. main 16. layer2 7. table1 17. sidebar 8. menu 18. image1 9. layer1 19. banner 10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm

Webforms – more powerful form elements

standardise commonly-used rich form elements – without JavaScript

built-in validation (of course you should still validate on the server) <input type=email> <input type=url required> <input type=range min=10 max=100> <input type=date min=2010-01-01 max=2010-12-31> <input pattern="[0-9][A-Z]{3}" placeholder="9AAA"> http://people.opera.com/brucel/demo/html5-forms-demo.html

HTML5 Myths

“...extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

Photo credits Mamipeko's nails and face by Mamipeko, used with permission All 5 Mamipeko's nails together http://www.flickr.com/photos/drzuco/4826509298/sizes/o/in/photostream/ (with permission) Green tea: http://en.wikipedia.org/wiki/File:Sencha.jpg Sad farewell, overturned wheelchair from iStockphoto, all rights reserved. NOT FOR BEING RE-USED. All others, me or public domain

www.opera.com/developer bruce.lawson@opera.com www.brucelawson.co.uk twitter.com/brucel

W3C Widgets: Apps made with Web Standards

by brucelawson

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 41

Statistics

W3C Widgets: Apps made with Web Standards Presentation Transcript