2. What is HTML5?
New Wave of Exciting Technologies for Making Web Apps.
Friday, December 10, 2010
3. 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
4. New Elements
header hgroup
nav details
section summary
article output
aside progress
footer menu
Friday, December 10, 2010
5. Form enhancements
new input types
color number
time month
date datetime
url range
email search
tel week
datetime-local
<input type="color" required="required" />
Friday, December 10, 2010
6. Form enhancements
new attributes
required autocomplete
autofocus pattern
...
<input type="color" required="required" />
Friday, December 10, 2010
8. 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
9. History
manipulate 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
10. Web Storage
localStorage
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
11. Web Workers
var 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
12. 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
13. Resources
HTML5 Spec @ WHATWG Using HTML5 Today
http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.facebook.com/note.php?note_id=43853209391
W3C Spec HTML5 Demos and Examples
http://www.w3.org/TR/html5/ http://html5demos.com/
Dive Into HTML5 by Mark Pilgrim Introducing HTML5
http://diveintohtml5.org http://introducinghtml5.com/
HTML5 Rocks Using HTML5's new Semantic Tags Today
http://www.html5rocks.com/ http://msdn.microsoft.com/en-us/scriptjunkie/gg454786.aspx
HTML5 Doctor Wrapping Things Nicely with HTML5 Local Storage
http://html5doctor.com/ http://24ways.org/2010/html5-local-storage
HTML5 Unleashed: Tips, Tricks and Techniques MDN HTML5
http://www.w3avenue.com/2010/05/07/html5-unleashed-tips- https://developer.mozilla.org/en/HTML/HTML5
tricks-and-techniques
Friday, December 10, 2010