html5 new features and resources
TRANSCRIPT
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: "[email protected]" },
{ ssn: "555-55-5555", name: "Donna", age: 32, email: "[email protected]" }
];
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!