Your SlideShare is downloading. ×
Html5 Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5 Overview

2,818
views

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

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,818
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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