HTML5 Overview Owen Williams owen at dynabooks daht com Resources • http://en.wikipedia.org/wiki/HTML5 • http://dev.w3.org/html5/html4-differences/ • http://www.alistapart.com/articles/previewofhtml5 • http://diveintohtml5.org/ New Doctype • • Works now in all browsers for “standards mode” start using it!

Transcript HTML5 Overview Owen Williams owen at dynabooks daht com Resources • http://en.wikipedia.org/wiki/HTML5 • http://dev.w3.org/html5/html4-differences/ • http://www.alistapart.com/articles/previewofhtml5 • http://diveintohtml5.org/ New Doctype • • Works now in all browsers for “standards mode” start using it!

HTML5 Overview
Owen Williams
owen at dynabooks daht com
Resources
•
http://en.wikipedia.org/wiki/HTML5
•
http://dev.w3.org/html5/html4-differences/
•
http://www.alistapart.com/articles/previewofhtml5
•
http://diveintohtml5.org/
New Doctype
•
<!DOCTYPE html>
•
Works now in all browsers for “standards mode”
start using it!
Content Elements
<header>
<nav>
<article>
<aside>
<section>
<footer>
<summary>
<details>
Audio and Video
•
Native Audio Element
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
•
Native Video Element
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
Audio and Video
•
Making your own video controls
<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<p>
<button onclick="video.play();">Play</button>
<button onclick="video.pause();">Pause</button>
<button onclick="video.currentTime = 0;">Rewind</button>
</p>
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
New Form
Elements
•
New Input Types
tel, search, url, email,
datetime, date, month, week, time, datetime-local,
number, range, color
•
New Elements
<datalist>
<meter>
<progress>
<output>
HTML Manifest
(caching instructions for the browser)
• Your HTML File:
<!DOCTYPE HTML>
<html manifest="cache-manifest”>
• 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?
•
localStorage / sessionStorage
if (navigator.onLine == true) {...}
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)
•
<canvas> (Firefox, Safari, Chrome, Opera,
MSIE9?)
•
<audio>
(Firefox, Safari, Opera)
•
<video>
(Firefox, Safari)
•
html manifest (Firefox, Safari)
•
localStorage (Firefox, Safari, IE8)
•
SQL database (Safari)
http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers

Directory