11. “...extending the language to better
support Web applications [...] This puts
HTML in direct competition with other
technologies[...] , in particular Flash and
Silverlight.”
Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
14. HTML5 specification aimed
at browser developers
(defines how browsers handle markup/code – no reverse engineering)
for authors: HTML5 differences from HTML4
http://www.w3.org/TR/html5-diff/
20. Top 20 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
21. 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
24. current and old browsers “support” these
(although some need a little extra help)
header, footer, … { display: block; }
25. Internet Explorer needs extra training wheels
document.createElement('header');
document.createElement('footer');
…
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
28. type and attributes for built-in validation
(of course you should still validate on the server)
<input … required>
<input type=”tel”>
<input type=”email”>
<input type=”url”>
<input … pattern="[a-z]{3}[0-9]{3}">
Demos:
http://people.opera.com/patrickl/experiments/forms/newtypes.html
http://people.opera.com/patrickl/experiments/forms/date-time.html
http://people.opera.com/patrickl/experiments/forms/validation.html
33. video as native object
● “plays nice” with rest of the page
●
keyboard accessibility built-in
●
API for controls:
v = document.getElementById('myVideo');
v.play();
v.pause();
…
Demos:
http://people.opera.com/patrickl/experiments/webm/basic-controls/
http://people.opera.com/patrickl/experiments/webm/fancy-controls/
http://people.opera.com/patrickl/experiments/webm/fancy-swap/
36. Ogg Theora
“free and open”, no licensing/royalties
not many tools for it, not web optimised
37. WebM
open and royalty-free, web optimised
support by software and hardware vendors
38. providing multiple sources
<video controls autoplay poster="…" width="…" height="…">
<source src="movie.webm" type="video/webm" />
<source src="movie.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<!-- fallback content -->
</video>
still include fallback for old browsers
http://camendesign.com/code/video_for_everybody
39. audio exactly the same as video
<audio src=”music.mp3” controls autoplay></audio>
[...]
<audio controls autoplay>
<source src="music.mp3" type="audio/mpeg" />
<source src="music.oga" type="audio/ogg" />
<!-- fallback content -->
</audio>
same format debacle: MP3 vs Ogg Vorbis