2. 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
4. CSS3 Media Queries
CSS3 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 */
}
5. 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
8. 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/
9. 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()
10. IndexedDB
● Allows indexed, efficient queries
● Transactions
● Object based
var 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]);
}
11. 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
12. 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>
13. 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/
14. 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
15. 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);
16. 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
17. 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
18. 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>
19. 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/
20. 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
21. 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/
22. Notifications
● Allows websites to pop up desktop
notifications for open tabs
document.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);
23. Web Workers
● Used for CPU intensive processing
● Does not interrupt the UI thread
main.js
var worker = new Worker('my_task.js');
worker.onmessage = function(event) {
console.log("Worker said : " + event.data);
};
worker.postMessage('ali');
mytask.js
self.postMessage("Working hard for event.data");
self.onmessage = function(event) {
self.postMessage('Hi '+ event.data);
};