HTML5New Features and ResourcesRon Reiter, 2012

What's New?● CSS3● Drag and Drop● localStorage & sessionStorage● IndexedDB● Application Cache Manifest● Native Audio and Video Support● Real-time P2P Video Streaming● Web Intents

What's New? (etc.)● postMessage● File API● Websockets● Canvas & SVG● WebGL● Notifications● Web Workers● Geolocation

CSS3 Media QueriesCSS3 media queries are used for responsive design:

@media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops

*/}

@media screen and (max-width:479px) { /* Target portrait smartphones */}

CSS3 New Features● Rounded Corners● Transitions and Animations● 2D & 3D Transformations● Transparency● Box Shadows● Text Effects● Columns, Regions, Exclusions● Custom Filters & GLSL Shaders● Compositing & Blending

CSS3 Demos● CSS3 Playground

○ http://css3.mikeplate.com/

● Adobe (Filters, Compositing, Regions)○ http://adobe.github.com/web-platform/samples/css-customfilters/

○ http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

○ http://adobe.github.com/web-platform/demos/compositing/index.html

○ http://www.html5rocks.com/en/tutorials/regions/adobe/

● Media Queries○ http://mediaqueri.es/

CSS3 Demos (etc.)● Transitions

○ http://www.joelambert.co.uk/flux/

● 3D○ http://www.keithclark.co.uk/labs/3dcss/demo/

○ http://www.paulrhayes.com/experiments/cube-3d/touch.html

○ http://www.satine.org/research/webkit/snowleopard/snowstack.html

○ http://www.clicktorelease.com/code/css3dclouds/

Drag and Drop● Web Application UI

○ http://html5demos.com/drag

● Files○ Desktop to Browser

■ http://jsfiddle.net/darcyclarke/YWF3u/1/

○ Browser to Desktop■ http://www.thecssninja.com/demo/gmail_dragout/

Storage● localStorage is a persistent key-value store● sessionStorage is the same, only volatile● Client-side only● 5 megabyte limit

localStorage.setItem(key, value)

localStorage.getItem(key)

localStorage.removeItem(key)

localStorage.clear()

IndexedDB● Allows indexed, efficient queries● Transactions● Object basedvar customerData = [

{ ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },

{ ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }

];

var request = indexedDB.open("example", 2);

var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

objectStore.createIndex("name", "name", { unique: false });

objectStore.createIndex("email", "email", { unique: true });

for (var i in customerData) {

objectStore.add(customerData[i]);

}

Cache Manifest● Turns web pages into offline applications

○ http://www.html5rocks.com/en/tutorials/appcache/beginner/

● Example file structure:

CACHE MANIFEST

index.html

stylesheet.css

images/logo.png

scripts/main.js

Media Tags● Audio and video tags● Video can be manipulated using canvas or

CSS filters<audio src="test.ogg" autoplay>

Your browser does not support the audio element.

</audio>

<video controls>

<source src="foo.ogg" type="video/ogg">

<source src="foo.mov" type="video/quicktime">

Your browser doesn't support the video element.

</video>

WebRTC● MediaStream API (getUserMedia) - API

for utilizing webcams or microphones● PeerConnection API - allows audio and

video streaming between peers● Data Channel API - used for P2P data

sharing, for directly sending files and raw data between clients not through a server

● Get started○ http://www.html5rocks.com/en/tutorials/webrtc/basics/

postMessage● Allows cross-domain iframe and window

communication using messages and callbacks

● The right way to exchange data between two different domains under your control

Web Intents● Allows invoking web applications with an

intent-like interface, passing data to them● Example - http://webintents.org/

var intent = new Intent("http://webintents.org/share",

"text/uri-list",

"http://news.bbc.co.uk");

window.navigator.startActivity(intent);

File & File System API● Another local storage interface, but with a

file interface, organized in directories● Can be used for accessing real filesystem

on PhoneGap● In the future, HTML5 based desktop

applications might also be able to access the real filesystem using it

Websockets● Message oriented communication

○ Chat, games, and other interactive content● The right way to do server push● Reduces the HTTP headers overhead● No request-response constraint

(completely asynchronous)● Emulation libraries

○ sockjs○ socket.io

SockJS Example// Echo sockjs server (node.js)

var sockjs_opts = {sockjs_url: "http://cdn.sockjs.org/sockjs-0.3.min.js"};

var sockjs_echo = sockjs.createServer(sockjs_opts);

sockjs_echo.on('connection', function(conn) {

conn.on('data', function(message) {

conn.write(message);

});

});

// 1. Echo sockjs client

<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>

<script>

var sockjs_url = '/echo';

var sockjs = new SockJS(sockjs_url);

sockjs.onopen = function() {console.log('[*] open', sockjs.protocol);};

sockjs.onmessage = function(e) {console.log('[.] message', e.data);};

sockjs.onclose = function() {console.log('[*] close');};

sockjs.send("Hello!");

</script>

Canvas● Pixel manipulation API● Used for image processing, games

(sprites), and more● Examples

○ http://kennethjorgensen.com/canvas/tree.html○ http://hakim.se/experiments/html5/blob/03/○ http://hakim.se/experiments/html5/coil/

SVG● SVG - Scalable Vector Graphics● Great for scaling graphics to any size, an

advantage when dealing with sub-pixel screens (retina)

● Examples○ http://raphaeljs.com/analytics.html○ http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-

Column-lower-animated.svg○ http://svg-wow.org/camera/camera.xhtml

WebGL● JavaScript OpenGL interface for 3D

programming● Widely adopted● Microsoft's IE10 will not support it, claim

the standard is not secure● Examples

○ http://www.chromeexperiments.com/webgl/○ http://ro.me○ http://lights.elliegoulding.com/

Notifications● Allows websites to pop up desktop

notifications for open tabsdocument.querySelector('#show_button').addEventListener('click', function() {

if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED

// function defined in step 2

window.webkitNotifications.createNotification(

'icon.png', 'Notification Title', 'Notification content...');

} else {

window.webkitNotifications.requestPermission();

}

}, false);

Web Workers● Used for CPU intensive processing● Does not interrupt the UI threadmain.jsvar worker = new Worker('my_task.js');

worker.onmessage = function(event) {

console.log("Worker said : " + event.data);

};

worker.postMessage('ali');

mytask.jsself.postMessage("Working hard for event.data");

self.onmessage = function(event) {

self.postMessage('Hi '+ event.data);

};

Geolocation

Questions?Thank You!