Html5 Overview
Upcoming SlideShare
Loading in...5
×
 

Html5 Overview

on

  • 3,563 views

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

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

Statistics

Views

Total Views
3,563
Views on SlideShare
3,553
Embed Views
10

Actions

Likes
2
Downloads
73
Comments
0

1 Embed 10

http://www.slideshare.net 10

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 Overview Html5 Overview Presentation Transcript

  • 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/previewofhtml5
    • 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=&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>
  • 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>
  • 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=&quot;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 = &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);
    • });
    • });
  • 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