Docstoc

HTML5 Overview

Document Sample
HTML5 Overview Powered By Docstoc
					HTML5 Overview
        Owen 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/previewofht
    ml5

•   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

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:10
posted:9/26/2011
language:English
pages:11