HTML5 Overview - PowerPoint PPT Presentation

tevin
html5 overview n.
Skip this Video
Loading SlideShow in 5 Seconds..
HTML5 Overview PowerPoint Presentation
Download Presentation
HTML5 Overview

play fullscreen
1 / 11
Download Presentation
HTML5 Overview
128 Views
Download Presentation

HTML5 Overview

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. HTML5 Overview Owen Williams owen at dynabooks daht com

  2. Resources • http://en.wikipedia.org/wiki/HTML5 • http://dev.w3.org/html5/html4-differences/ • http://www.alistapart.com/articles/previewofhtml5 • http://diveintohtml5.org/

  3. New Doctype • <!DOCTYPE html> • Works now in all browsers for “standards mode” start using it!

  4. Content Elements <header> <nav> <article> <aside> <section> <footer> <summary> <details>

  5. 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>

  6. 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>

  7. 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

  8. 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>

  9. 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

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

  11. 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