1. HTML5 Overview Owen Williams owen at dynabooks daht com Owen Williams owen at dynabooks daht com

2. Resources http://en.wikipedia.org/wiki/HTML5 http://dev.w3.org/html5/html4-differences/ http://www.alistapart.com/articles/previewofhtml5 http://diveintohtml5.org/ http://diveintohtml5.org

3. New Doctype Works now in all browsers for standards mode start using it!

4. Content Elements

5. Audio and Video Native Audio Element Native Video Element Download movie

6. Audio and Video Making your own video controls var video = document.getElementById("video"); Play Pause Rewind

7. Canvas - 2d Drawing function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } img.src = 'images/backdrop.png'; } https://developer.mozilla.org/en/Canvas_tutorial

8. New Form Elements New Input Types tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color New Elements

9. HTML Manifest (caching instructions for the browser) Your HTML File: Your Manifest File: CACHE MANIFEST index.html help.html style/default.css images/logo.png images/backgound.png NETWORK: server.cgi

10. Working Offline Is this computer online? if (navigator.onLine == true) {...} localStorage / sessionStorage localStorage.someValue = "blah";... if (localStorage.someValue = "blah") {... } SQL Database API db.readTransaction(function (t) { t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) { report(data.rows[0].title, data.rows[0].author); });

11. What works now? New elements (all, with IE shim javascript) (Firefox, Safari, Chrome, Opera, MSIE9?) (Firefox, Safari, Opera) (Firefox, Safari) html manifest (Firefox, Safari) localStorage (Firefox, Safari, IE8) SQL database (Safari) http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers