The document discusses the new features of HTML5 including improved semantics, forms, and multimedia capabilities. Some key points:
1. HTML5 adds new semantic elements like <header>, <footer>, <nav> that more accurately describe content. It also simplifies the doctype to <!DOCTYPE html>.
2. HTML5 introduces richer built-in form controls without JavaScript like date/time pickers, number sliders, and improved validation.
3. Multimedia is enhanced with <video>, <audio>, and <canvas> elements, allowing native playback of audio/video without plugins and scriptable drawing on <canvas>.
6. "there is already a lot of excitement for HTML5,
but it’s a little too early to deploy it because
we’re running into interoperability issues."
Philippe Le Hegaret, W3C interaction domain leader
blogs.techrepublic.com.com/hiner/?p=6369
17. “...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
34. 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
35. 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
42. current and old browsers “support” these
(although some need a little extra help)
header, footer, … { display: block; }
43. Internet Explorer < 9 needs extra training wheels
document.createElement('header');
document.createElement('footer');
…
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
90. canvas drawing ready-made images
ctx = canvas.getContext("2d");
var logo = new Image();
logo.src = 'logo.png';
ctx.drawImage(logo,x1,y1,w1,h1,x2,y2,w2,h2);
or call in an existing image already on the page
95. canvas also works with video
ctx = canvas.getContext("2d");
v = document.getElementById('player');
ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);
grab currently displayed frame (update as appropriate)
107. application cache
<html manifest=”blah.manifest”>
CACHE MANIFEST
# send this with correct text/cache-manifest MIME
images/sprites.png
scripts/common.js
scripts/jquery.js
styles/global.css
NETWORK:
# never cached (apart from normal caching mechanism)
onlineonly.css
FALLBACK:
# pattern matching. fallback file will also be cached
images/ images/not-offline.png
108. data storage
cookies and their limitations...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010
23:59:59 UTC; path=/'
…
/* convoluted string operations go here … */
110. WebSQL
relational DB / SQL in browser
var db =
openDatabase(dbName, version, displayName, expectedSize);
db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) {
/* do something with the results */
});
});
not being developed further (IE/Mozilla prefer IndexedDB)
– nonetheless available right now in Opera+WebKit!
111. etc
File API, Web Workers, History API, Web Messaging,
Drag and Drop, Server-Sent Events…
118. feature-detection for audio/video
if (!!document.createElement('video').canPlayType;) { … }
if (!!document.createElement('audio').canPlayType;) { … }
119. feature-detection for audio/video codecs
var v = document.createElement('video');
if (!!(v.canPlayType)&&
((v.canPlayType('video/webm;codecs="vp8,vorbis"') == 'probably')
||
(v.canPlayType('video/webm;codecs="vp8, vorbis"') == 'maybe')))
{ … }