• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 New Features and Resources

HTML5 New Features and Resources






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    HTML5 New Features and Resources HTML5 New Features and Resources Presentation Transcript

    • HTML5New Features and ResourcesRon Reiter, 2012
    • Whats New?● CSS3● Drag and Drop● localStorage & sessionStorage● IndexedDB● Application Cache Manifest● Native Audio and Video Support● Real-time P2P Video Streaming● Web Intents
    • Whats 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 limitlocalStorage.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 MANIFESTindex.htmlstylesheet.cssimages/logo.pngscripts/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 doesnt 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● Microsofts 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!