Html5 Overview

  • 2,792 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,792
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
74
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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=&quot;music.oga&quot; type=&quot;audio/ogg&quot;>
    • <source src=&quot;music.mp3&quot; type=&quot;audio/mpeg&quot;>
    • </audio>
    • Native Video Element
    • <video src=&quot;video.ogv&quot; controls poster=&quot;poster.jpg&quot; width=&quot;320&quot; height=&quot;240&quot;>
    • <a href=&quot;video.ogv&quot;>Download movie</a>
    • </video>
  • 6. Audio and Video
    • Making your own video controls
    • <video src=&quot;video.ogg&quot; id=&quot;video&quot;></video>
    • <script>
    • var video = document.getElementById(&quot;video&quot;);
    • </script>
    • <p>
    • <button onclick=&quot;video.play();&quot;>Play</button>
    • <button onclick=&quot;video.pause();&quot;>Pause</button>
    • <button onclick=&quot;video.currentTime = 0;&quot;>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=&quot;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 = &quot;blah&quot;;
    • ...
    • if (localStorage.someValue = &quot;blah&quot;) {  ...  }
    • 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