html5 overview n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML5 Overview PowerPoint Presentation
Download Presentation
HTML5 Overview

Loading in 2 Seconds...

play fullscreen
1 / 11

HTML5 Overview - PowerPoint PPT Presentation


  • 123 Views
  • Uploaded on

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>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML5 Overview' - tevin


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html5 overview
HTML5 Overview

Owen Williams

owen at dynabooks daht com

resources
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
New Doctype
  • <!DOCTYPE html>
  • Works now in all browsers for “standards mode” start using it!
content elements
Content Elements

<header>

<nav>

<article>

<aside>

<section>

<footer>

<summary>

<details>

audio and video
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 video1
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
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 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
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
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
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