Having issues seeing the presentation? Read the disclaimer
Slides controls
← and → to move around.
Ctrl/Command and + or - to zoom in and out if slides don’t fit.
S to view page source.
T to change the theme.
H to toggle syntax highlight.
N to toggle speaker notes.
3 to toggle 3D effect.
0 to toggle help.
HTML5*
Web Development to the next level
*Including other next generation technologies of the Web Development stack
Rough Timeline of Web Technologies
1991HTML
1994HTML 2
1996CSS 1 + JavaScript
1997HTML 4
1998CSS 2
2000XHTML 1
2002Tableless Web Design
2005AJAX
2009HTML 5
HTML5 ~=
HTML
+
CSS
+
JS
Today, we will cover...
Offline / Storage
Expect the unexpected
JS
Web Storage
// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
Save text value on the client side (crash-safe)
JS
Web SQL Database
var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
See the generated database: Developer > Developer Tools > Storage
JS
IndexedDB
var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
var db = event.srcElement.result;
var transaction = db.transaction([], IDBTransaction.READ_ONLY);
var curRequest = transaction.objectStore('ObjectStore Name').openCursor();
curRequest.onsuccess = ...;
};
JS
Application Cache
<html manifest="cache.appcache">
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
}
}, false);
Full-duplex, bi-directional communication over the Web:
Both the server and client can send data at any time, or even at the same time.
Only the data itself is sent, without the overhead of HTTP headers, dramatically
reducing bandwidth.
Use the echo demo below to test a WebSocket connection from your browser.
Both the message you send and the response you receive travel over the same WebSocket connection.
Location:
Message:
Output:
Demo powered by
JS
Notifications
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}
Note: Use this button if you also want to reset the permissions
Enter your twitter user name to show your last tweet as a notification
( this feature is only available in Google Chrome )
JS
FileSystem APIs
Asynchronously write a file to a sandboxed file system using JavaScript:
window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
// fs.root is a DirectoryEntry object.
fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(writer) { // writer is a FileWriter object.
writer.onwrite = function(e) { ... };
writer.onerror = function(e) { ... };
var bb = new BlobBuilder();
bb.append('Hello World!');
writer.write(bb.getBlob('text/plain'));
}, opt_errorHandler);
}
}, opt_errorHandler);
( The FileSystem API is currently only implemented in Google Chrome 9+ )
JS
Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
JS
Device Orientation
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
This sample requires FF3.6+ or Google Chrome
on a device with a built in accelerometer or iOS 4.2.
HTML
Speech Input
<input type="text" x-webkit-speech />
Speech input is not enabled in your browser.
Try running Google Chrome with the --enable-speech-input flag.
<input list="cars"/>
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
</datalist>
<menu>
<command type="command" disabled label="Publish" />
</menu>
<details>
<summary>HTML 5</summary>
This slide deck teaches you everything you need to know about HTML 5.
</details>
HTML 5This slide deck teaches you everything you need to know about HTML 5.
<metermin="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
Your score is: A+
<progress>working...</progress>
Download is:
<progress value="75" max="100">3/4 complete</progress>
Goal is:
<div itemscope itemtype="http://example.org/band">
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
In March 1936, an unusual confluence of forces occurred in
Santa Clara County.
A long cold winter delayed the blossoming of the millions of
cherry, apricot, peach, and prune plum trees covering hundreds
of square miles of the Valley floor. Then, unlike many years,
the rains that followed were light and too early to knock
the blossoms from their branches.
Instead, by the billions, they all burst open at once.
Seemingly overnight, the ocean of green that was the Valley
turned into a low, soft, dizzyingly perfumed cloud of pink
and white. Uncounted bees and yellow jackets, newly born,
raced out of their hives and holes, overwhelmed by this
impossible banquet.
Then came the wind.
It roared off the Pacific Ocean, through the nearly
uninhabited passes of the Santa Cruz Mountains and then,
flattening out, poured down into the great alluvial plains
of the Valley. A tidal bore of warm air, it tore along the
columns of trees, ripped the blossoms apart and carried them
off in a fluttering flood of petals like foam rolling up a
beach.
This perfumed blizzard hit Stevens Creek Boulevard, a two-lane
road with a streetcar line down its center, that was the main
road in the West Valley. It froze traffic, as drivers found
themselves lost in a soft, muted whiteout. Only the streetcar,
its path predetermined, passed on...
CSS
Text stroke
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
}
face: border-radius: 0px;
left eye: border-radius: 0px;
right eye: border-radius: 0px;
base white: border-radius: 0px;
mouth: border-radius: 0px;
nose: border-radius: 0px;
left black eye: border-radius: 0px;
right black eye: border-radius: 0px;
CSS
Gradients
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
@-webkit-keyframespulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
*Please make a better use of it. We don't want a new blink tag ;)
Pulse!
Nuts & Bolts
Improvements to the core platform
JS
New Selectors
Finding elements by class (DOM API)
var el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
var els = document.getElementsByClassName('section');
els[0].focus();
Finding elements by CSS syntax (Selectors API)
var els = document.querySelectorAll("ul li:nth-child(odd)");
var tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td"); // el == tds[0]
HTMLJS
Custom data-* attributes
Define, store, and retrieve custom data on the DOM.
// Add new data attributes via JS.
var el = document.querySelector('#out');
el.setAttribute('data-foo', 'bar');
var html = [];
for (var key in el.dataset) {
html.push(key, ': ', el.dataset[key], '<br>');
}
el.innerHTML = html.join('');
Output:
id: good
name: joe
screenName: user1
foo: bar
JS
Element.classList
<div id="main" class="shadow rounded"></div>
var el = document.querySelector('#main').classList;
el.add('highlight');
el.remove('shadow');
el.toggle('highlight');
console.log(el.contains('highlight')); // false
console.log(el.contains('shadow')); // false
console.log(el.classList.toString() == el.className); // true
Output:
<div id="main" class="rounded"></div>
JS
History API
link.addEventListener('click', function(event) {
// manually add a value to the history stack
// without making the browser load any new page
history.pushState('Contact Page Form', 'Contact Page', '/contact');
});
// capture navigation in case we want to change,
// for instance, some content when it changes
window.addEventListener('popstate', function(event) {
document.querySelector('h1').innerText = event.state; // 'Contact Page Form'
});
-webkit-border-image: url(border_image_1.png) ;
border-width: 10px; 