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

Resources

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

Content Elements

Audio and Video Native Audio Element Native Video Element Download movie

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

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'; }

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

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

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); });

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)