HTML5New Features and ResourcesRon Reiter, 2012
Whats New?●   CSS3●   Drag and Drop●   localStorage & sessionStorage●   IndexedDB●   Application Cache Manifest●   Native ...
Whats New? (etc.)●   postMessage●   File API●   Websockets●   Canvas & SVG●   WebGL●   Notifications●   Web Workers●   Geo...
CSS3 Media QueriesCSS3 media queries are used for responsive design:@media screen and (min-width:480px) and (max-width:800...
CSS3 New Features●   Rounded Corners●   Transitions and Animations●   2D & 3D Transformations●   Transparency●   Box Shado...
CSS3 Demos● CSS3 Playground  ○   http://css3.mikeplate.com/● Adobe (Filters, Compositing, Regions)  ○   http://adobe.githu...
CSS3 Demos (etc.)● Transitions  ○   http://www.joelambert.co.uk/flux/● 3D  ○   http://www.keithclark.co.uk/labs/3dcss/demo...
Drag and Drop● Web Application UI  ○   http://html5demos.com/drag● Files  ○ Desktop to Browser    ■ http://jsfiddle.net/da...
Storage●   localStorage is a persistent key-value store●   sessionStorage is the same, only volatile●   Client-side only● ...
IndexedDB● Allows indexed, efficient queries● Transactions● Object basedvar customerData = [   { ssn: "444-44-4444", name:...
Cache Manifest● Turns web pages into offline applications   ○   http://www.html5rocks.com/en/tutorials/appcache/beginner/●...
Media Tags● Audio and video tags● Video can be manipulated using canvas or  CSS filters<audio src="test.ogg" autoplay> You...
WebRTC● MediaStream API (getUserMedia) - API  for utilizing webcams or microphones● PeerConnection API - allows audio and ...
postMessage● Allows cross-domain iframe and window  communication using messages and  callbacks● The right way to exchange...
Web Intents● Allows invoking web applications with an  intent-like interface, passing data to them● Example - http://webin...
File & File System API● Another local storage interface, but with a  file interface, organized in directories● Can be used...
Websockets● Message oriented communication  ○ Chat, games, and other interactive content● The right way to do server push●...
SockJS Example// Echo sockjs server (node.js)var sockjs_opts = {sockjs_url: "http://cdn.sockjs.org/sockjs-0.3.min.js"};var...
Canvas● Pixel manipulation API● Used for image processing, games  (sprites), and more● Examples  ○ http://kennethjorgensen...
SVG● SVG - Scalable Vector Graphics● Great for scaling graphics to any size, an  advantage when dealing with sub-pixel  sc...
WebGL● JavaScript OpenGL interface for 3D  programming● Widely adopted● Microsofts IE10 will not support it, claim  the st...
Notifications● Allows websites to pop up desktop  notifications for open tabsdocument.querySelector(#show_button).addEvent...
Web Workers● Used for CPU intensive processing● Does not interrupt the UI threadmain.jsvar worker = new Worker(my_task.js)...
Geolocation
Questions?Thank You!
Upcoming SlideShare
Loading in...5
×

HTML5 New Features and Resources

2,291

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,291
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 New Features and Resources

  1. 1. HTML5New Features and ResourcesRon Reiter, 2012
  2. 2. Whats New?● CSS3● Drag and Drop● localStorage & sessionStorage● IndexedDB● Application Cache Manifest● Native Audio and Video Support● Real-time P2P Video Streaming● Web Intents
  3. 3. Whats New? (etc.)● postMessage● File API● Websockets● Canvas & SVG● WebGL● Notifications● Web Workers● Geolocation
  4. 4. 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 */}
  5. 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. 6. 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/
  7. 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. 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. 9. 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()
  10. 10. 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]);}
  11. 11. 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
  12. 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 doesnt support the video element.</video>
  13. 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. 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. 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. 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. 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. 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. 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. 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. 21. 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/
  22. 22. 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);
  23. 23. 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);};
  24. 24. Geolocation
  25. 25. Questions?Thank You!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×