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');
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);
});
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);
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();
}
var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
file.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
}, false);
}
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);
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);
<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>
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;
@-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').innerHTML = event.state; // 'Contact Page Form'
});
-webkit-border-image: url(border_image_1.png) ;
border-width: 10px; 