html5 oslo-code-camp
DESCRIPTION
History of how HTML5 came about, its design principles and some examples (forms, video, structure)TRANSCRIPT
HTML5: why are we here?
Code Camp / Oslo / 16 October 2010
Bruce Lawson, Opera Software
XHTML 2<img />
Paper to W3C, 2004
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
Paper to W3C, 2004●Backwards compatibility, and a clear migration path.●Well-defined error handling.●Users should not be exposed to authoring errors.●Practical use: every feature that goes into the Web-applications specifications must be justified by a practical use case. The reverse is not necessarily true.●Scripting is here to stay (but should be avoided where more convenient declarative mark-up can be used).●Avoid device-specific profiling.●Make the process open.
© 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.
Design Principles - Compatibility
● Support Existing Content● Do not Reinvent the Wheel● Pave the Cowpaths● Evolution Not Revolution
www.w3.org/TR/html-design-principles/
Design Principles - Utility
● Solve Real Problems● Secure By Design● Separation of Concerns● DOM Consistency
Design Principles -Priority of Constituencies
Consider users over authors over implementors over specifiers over theoretical purity.
Design Principles - Interoperability
● Well-defined Behavior● Avoid Needless Complexity● Handle Errors
Design Principles - Universal Access
● Media Independence● Support World Languages● Accessibility
HTML5<!DOCTYPE html>
Geo
SVG
SVG
CSS
New Exciting Web Technology
HTML5 does not replace HTML 4.01
HTML5 has more bling!
HTML5 is umbrella term:markup elements and JavaScript APIs
Top 20 class names1. 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 names1. 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
Styling HTML5 elements
article, nav, header, footer {display:block;}
document.createElement ('article');
http://html5shim.googlecode.com/svn/trunk/html5.js
Webforms – more powerful form elements
standardise commonly-usedrich 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
<video>
“...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 HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
<object width="425" height="344"><param name="movie"
value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
<video src=video.ogv controls autoplay poster=poster.jpg width=320 height=240> <a href=video.ogv>Download movie</a></video>
video format debates – Free formats vs MP4
<video controls autoplay poster=… width=… height=…><source src=movie.webm type=video/webm><source src=movie.mp4 type=video/mp4><source src=movie.ogv type=video/ogg><!-- fallback content -->
</video>
still include fallback for old browsershttp://camendesign.com/code/video_for_everybody
video as native object...why is it important?
● “play nice” with rest of the page● keyboard accessibility built-in● API for controls
controlling video with JavaScript
<script> /* grab the first video element */var video = document.getElementsByTagName('video')[0]; /* remove the browser-supplied controls, cos we're scripting our own */video.removeAttribute('controls');</script><video controls>
<source src=movie.webm type=video/webm></video><input type=button value="play / pause" onclick="if (video.paused) video.play(); else video.pause()">
video accessibility
<video controls autoplay poster=… width=… height=…><source src=movie.webm type=video/webm><source src=movie.mp4 type=video/mp4><source src=movie.ogv type=video/ogg><track src=subtitles.srt kind=subtitles srclang=en><!-- fallback content -->
</video>http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-elementhttp://www.delphiki.com/html5/playr/
video media queries
<video controls><source src=hi-res.ogv media=”(min-device-width:800px)”><source src=lo-res.ogv></video>
http://dev.w3.org/html5/spec/video.html#the-source-element
Photo credits
Swinging London http://www.flickr.com/photos/nationalarchives/3008584298/
Cute NEWT by Rob Winters @Robwinters
Sharks with lasers:http://www.flickr.com/photos/starstreak007/3416655056/
HTML5 rocks by Alex SextonUsed with permission
Satan from ??
All others, me
