Post on 26-Mar-2015
HTML5 OverviewHTML5 OverviewOwen Williams
owen at dynabooks daht comOwen 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? 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)
• <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