introduction to html5
DESCRIPTION
Introduction to HTML5TRANSCRIPT
What is HTML5?New Wave of Exciting Technologies for Making Web Apps.
Friday, December 10, 2010
New doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
Friday, December 10, 2010
New Elements
header hgroup
nav details
section summary
article output
aside progress
footer menu
Friday, December 10, 2010
Form enhancementsnew input types
<input type="color" required="required" />
color number
time month
date datetime
url range
email search
tel week
datetime-local
Friday, December 10, 2010
Form enhancementsnew attributes
<input type="color" required="required" />
required autocomplete
autofocus pattern
...
Friday, December 10, 2010
Video & Audio<video><source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
fallback content here
<video>
<audio src="audio.mp3">fallback content here</audio>
Video Formats:.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
Friday, December 10, 2010
Canvas<canvas id="mycanvas" width="150" height="150">
fallback content here
</canvas>
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
Friday, December 10, 2010
Historymanipulate the contents of the history stack
history.pushState({page: 1}, "page 1", "page1.html");
history.replaceState()
window.onpopstate = function(e) {
e.state;
};
Friday, December 10, 2010
Web StoragelocalStorage
data persists after the window is closed
data is shared across all browser windows.
sessionStorage
data doesn't persist after the window is closed
data is not shared with other windows
localStorage.setItem("size", "2"); //or localStorage.size = "2";
localStorage.getItem("size"); //or localStorage.size
localStorage.removeItem("size");
localStorage.clear();
Friday, December 10, 2010
Web Workersvar worker = new Worker('task.js');
worker.addEventListener('message', function(e) { e.data; }, false);
worker.postMessage('Hello World'); // Send data to our worker.
worker.terminate(); //to terminate the running worker
task.js:
onmessage = function (event) { postMessage(e.data); };
importScripts('foo.js', 'bar.js'); /* imports two scripts */
There are some HUGE stipulations, though:
Workers don't have access to the DOM
Workers don't have direct access to the 'parent' page.
Friday, December 10, 2010
But wait, there’s more
selectors inline editing
drag & drop offline apps
web SQL database geolocation
messaging server events
web sockets ...
Friday, December 10, 2010
Resources
HTML5 Spec @ WHATWGhttp://www.whatwg.org/specs/web-apps/current-work/multipage/
Using HTML5 Todayhttp://www.facebook.com/note.php?note_id=43853209391
W3C Spechttp://www.w3.org/TR/html5/
HTML5 Demos and Exampleshttp://html5demos.com/
Dive Into HTML5 by Mark Pilgrimhttp://diveintohtml5.org
Introducing HTML5http://introducinghtml5.com/
HTML5 Rockshttp://www.html5rocks.com/
Using HTML5's new Semantic Tags Todayhttp://msdn.microsoft.com/en-us/scriptjunkie/gg454786.aspx
HTML5 Doctorhttp://html5doctor.com/
Wrapping Things Nicely with HTML5 Local Storagehttp://24ways.org/2010/html5-local-storage
HTML5 Unleashed: Tips, Tricks and Techniqueshttp://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques
MDN HTML5https://developer.mozilla.org/en/HTML/HTML5
Friday, December 10, 2010
Thank You
Friday, December 10, 2010