HTML5 Overview Owen Williams owen at dynabooks daht com Owen Williams owen at dynabooks daht com.
11
HTML5 Overview Owen Williams owen at dynabooks daht com
-
Upload
amelia-gutierrez -
Category
Documents
-
view
242 -
download
5
Transcript of HTML5 Overview Owen Williams owen at dynabooks daht com Owen Williams owen at dynabooks daht com.
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
