Your SlideShare is downloading. ×
0
HTML5 Overview <ul><li>Owen Williams </li></ul><ul><li>owen at dynabooks daht com </li></ul>
Resources <ul><li>http://en.wikipedia.org/wiki/HTML5 </li></ul><ul><li>http://dev.w3.org/html5/html4-differences/ </li></u...
New Doctype <ul><li><!DOCTYPE html> </li></ul><ul><li>Works now in all browsers for “standards mode”  start using it! </li...
Content Elements <ul><li>< header>  </li></ul><ul><li>< nav> </li></ul><ul><li><article> </li></ul><ul><li>< aside> </li><...
Audio and Video <ul><li>Native Audio Element </li></ul><ul><li><audio> </li></ul><ul><li><source src=&quot;music.oga&quot;...
Audio and Video <ul><li>Making your own video controls </li></ul><ul><li><video src=&quot;video.ogg&quot; id=&quot;video&q...
Canvas - 2d Drawing <ul><li>function draw() {  </li></ul><ul><li>var ctx = document.getElementById('canvas').getContext('2...
New Form Elements <ul><li>New Input Types </li></ul><ul><li>tel, search, url, email,  </li></ul><ul><li>datetime, date, mo...
HTML Manifest  (caching instructions for the browser) <ul><li>Your HTML File: </li></ul><ul><li><!DOCTYPE HTML> </li></ul>...
Working Offline <ul><li>Is this computer online? </li></ul><ul><li>  if (navigator.onLine == true) {...} </li></ul><ul><li...
What works now? <ul><li>New elements (all, with IE shim javascript) </li></ul><ul><li><canvas>  (Firefox, Safari, Chrome, ...
Upcoming SlideShare
Loading in...5
×

Html5 Overview

2,846

Published on

Overview of new elements and capabilities found in the HTML 5 specification.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,846
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
75
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Html5 Overview"

  1. 1. HTML5 Overview <ul><li>Owen Williams </li></ul><ul><li>owen at dynabooks daht com </li></ul>
  2. 2. Resources <ul><li>http://en.wikipedia.org/wiki/HTML5 </li></ul><ul><li>http://dev.w3.org/html5/html4-differences/ </li></ul><ul><li>http://www.alistapart.com/articles/previewofhtml5 </li></ul><ul><li>http://diveintohtml5.org / </li></ul>
  3. 3. New Doctype <ul><li><!DOCTYPE html> </li></ul><ul><li>Works now in all browsers for “standards mode” start using it! </li></ul>
  4. 4. Content Elements <ul><li>< header> </li></ul><ul><li>< nav> </li></ul><ul><li><article> </li></ul><ul><li>< aside> </li></ul><ul><li>< section> </li></ul><ul><li>< footer> </li></ul><ul><li>< summary> </li></ul><ul><li><details> </li></ul>
  5. 5. Audio and Video <ul><li>Native Audio Element </li></ul><ul><li><audio> </li></ul><ul><li><source src=&quot;music.oga&quot; type=&quot;audio/ogg&quot;> </li></ul><ul><li><source src=&quot;music.mp3&quot; type=&quot;audio/mpeg&quot;> </li></ul><ul><li></audio> </li></ul><ul><li>Native Video Element </li></ul><ul><li><video src=&quot;video.ogv&quot; controls poster=&quot;poster.jpg&quot; width=&quot;320&quot; height=&quot;240&quot;> </li></ul><ul><li><a href=&quot;video.ogv&quot;>Download movie</a> </li></ul><ul><li></video> </li></ul>
  6. 6. Audio and Video <ul><li>Making your own video controls </li></ul><ul><li><video src=&quot;video.ogg&quot; id=&quot;video&quot;></video> </li></ul><ul><li><script> </li></ul><ul><li>var video = document.getElementById(&quot;video&quot;); </li></ul><ul><li></script> </li></ul><ul><li><p> </li></ul><ul><li><button onclick=&quot;video.play();&quot;>Play</button> </li></ul><ul><li><button onclick=&quot;video.pause();&quot;>Pause</button> </li></ul><ul><li><button onclick=&quot;video.currentTime = 0;&quot;>Rewind</button> </li></ul><ul><li></p> </li></ul>
  7. 7. Canvas - 2d Drawing <ul><li>function draw() { </li></ul><ul><li>var ctx = document.getElementById('canvas').getContext('2d'); </li></ul><ul><li>var img = new Image(); </li></ul><ul><li>img.onload = function(){ </li></ul><ul><li>ctx.drawImage(img,0,0); </li></ul><ul><li>ctx.beginPath(); </li></ul><ul><li>ctx.moveTo(30,96); </li></ul><ul><li>ctx.lineTo(70,66); </li></ul><ul><li>ctx.lineTo(103,76); </li></ul><ul><li>ctx.lineTo(170,15); </li></ul><ul><li>ctx.stroke(); </li></ul><ul><li>} </li></ul><ul><li>img.src = 'images/backdrop.png'; </li></ul><ul><li>} </li></ul>https://developer.mozilla.org/en/Canvas_tutorial
  8. 8. New Form Elements <ul><li>New Input Types </li></ul><ul><li>tel, search, url, email, </li></ul><ul><li>datetime, date, month, week, time, datetime-local, </li></ul><ul><li>number, range, color </li></ul><ul><li>New Elements </li></ul><ul><li><datalist> </li></ul><ul><li><meter> </li></ul><ul><li><progress> </li></ul><ul><li><output> </li></ul>
  9. 9. HTML Manifest (caching instructions for the browser) <ul><li>Your HTML File: </li></ul><ul><li><!DOCTYPE HTML> </li></ul><ul><li><html manifest=&quot;cache-manifest”> </li></ul><ul><li>Your Manifest File: </li></ul><ul><li>CACHE MANIFEST </li></ul><ul><li>index.html </li></ul><ul><li>help.html </li></ul><ul><li>style/default.css </li></ul><ul><li>images/logo.png </li></ul><ul><li>images/backgound.png </li></ul><ul><li>NETWORK: </li></ul><ul><li>server.cgi </li></ul>
  10. 10. Working Offline <ul><li>Is this computer online? </li></ul><ul><li> if (navigator.onLine == true) {...} </li></ul><ul><li>localStorage / sessionStorage </li></ul><ul><li> localStorage.someValue = &quot;blah&quot;; </li></ul><ul><li> ... </li></ul><ul><li> if (localStorage.someValue = &quot;blah&quot;) {  ...  } </li></ul><ul><li>SQL Database API </li></ul><ul><li>db.readTransaction(function (t) { </li></ul><ul><li>t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) { </li></ul><ul><li>report(data.rows[0].title, data.rows[0].author); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
  11. 11. What works now? <ul><li>New elements (all, with IE shim javascript) </li></ul><ul><li><canvas> (Firefox, Safari, Chrome, Opera, MSIE9?) </li></ul><ul><li><audio> (Firefox, Safari, Opera) </li></ul><ul><li><video> (Firefox, Safari) </li></ul><ul><li>html manifest (Firefox, Safari) </li></ul><ul><li>localStorage (Firefox, Safari, IE8) </li></ul><ul><li>SQL database (Safari) </li></ul>http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×