Html5 Overview
-
Upload
owen-williams -
Category
Technology
-
view
2.840 -
download
0
description
Transcript of Html5 Overview
![Page 1: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/1.jpg)
HTML5 OverviewHTML5 OverviewOwen Williams
owen at dynabooks daht comOwen Williams
owen at dynabooks daht com
![Page 2: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/2.jpg)
Resources
• http://en.wikipedia.org/wiki/HTML5
• http://dev.w3.org/html5/html4-differences/
• http://www.alistapart.com/articles/previewofhtml5
• http://diveintohtml5.org/
![Page 3: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/3.jpg)
New Doctype• <!DOCTYPE html>
• Works now in all browsers for “standards mode” start using it!
![Page 4: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/4.jpg)
Content Elements
<header>
<nav>
<article>
<aside>
<section>
<footer>
<summary>
<details>
![Page 5: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/5.jpg)
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>
![Page 6: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/6.jpg)
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>
![Page 7: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/7.jpg)
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
![Page 8: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/8.jpg)
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>
![Page 9: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/9.jpg)
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
![Page 10: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/10.jpg)
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);
});
});
![Page 11: Html5 Overview](https://reader035.fdocuments.in/reader035/viewer/2022062703/55515033b4c905bd1c8b5689/html5/thumbnails/11.jpg)
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