Download as PDF, PPTX
![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]);
}](https://image.slidesharecdn.com/html5-121007170636-phpapp01/85/HTML5-New-Features-and-Resources-10-320.jpg)
![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>](https://image.slidesharecdn.com/html5-121007170636-phpapp01/85/HTML5-New-Features-and-Resources-18-320.jpg)
![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]);
}](https://image.slidesharecdn.com/html5-121007170636-phpapp01/75/HTML5-New-Features-and-Resources-10-2048.jpg)
![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>](https://image.slidesharecdn.com/html5-121007170636-phpapp01/75/HTML5-New-Features-and-Resources-18-2048.jpg)
Uploaded byRon Reiter
HTML5 New Features and Resources
This document summarizes new features in HTML5 including CSS3 features like media queries, rounded corners, and transitions. It also covers JavaScript APIs like localStorage, IndexedDB, the cache manifest, drag and drop, web sockets, and the file system API. The document provides examples and links to demonstrations of these new capabilities, making it a useful resource for learning about HTML5 features and seeing them in action.
HTML5 New Features and Resources
- 1. HTML5 New Features andResources Ron Reiter, 2012
- 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
- 3. What's New? (etc.) ● postMessage ● File API ● Websockets ● Canvas & SVG ● WebGL ● Notifications ● Web Workers ● Geolocation
- 4. CSS3 Media Queries CSS3media 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
- 6. CSS3 Demos ● CSS3Playground ○ 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/
- 7. 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/
- 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 ● Turnsweb 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 ● Audioand 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-domainiframe and window communication using messages and callbacks ● The right way to exchange data between two different domains under your control
- 15. Web Intents ● Allowsinvoking 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 & FileSystem 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 orientedcommunication ○ 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 // Echosockjs 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 manipulationAPI ● 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 OpenGLinterface 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 websitesto 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 ● Usedfor 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); };
- 24.
- 25.