Introduction to HTML5

Introduction to HTML5
adrian.olaru@1and1.ro

Friday, December 10, 2010

What is HTML5?
New Wave of Exciting Technologies for Making Web Apps.


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>


New Elements
header hgroup
nav details
section summary
article output
aside progress
footer menu


Form enhancements
new input types
color number
time month
date datetime
url range
email search
tel week
datetime-local

<input type="color" required="required" />

Form enhancements
new attributes
required autocomplete
autofocus pattern
...

<input type="color" required="required" />

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


Canvas
<canvas id="mycanvas" width="150" height="150">
fallback content here
</canvas>

var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
context.ﬁllStyle = "rgb(255,0,0)";
context.ﬁllRect(30, 30, 50, 50);


History
manipulate the contents of the history stack

history.pushState({page: 1}, "page 1", "page1.html");
history.replaceState()

window.onpopstate = function(e) {
e.state;
};


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();


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.


But wait, there’s more
selectors inline editing

drag & drop ofﬂine apps

web SQL database geolocation

messaging server events

web sockets ...


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


Thank You


Introduction to HTML5

More Related Content

What's hot

Viewers also liked

Similar to Introduction to HTML5

Recently uploaded

Introduction to HTML5