HTML5 New Features and Resources

  • 2,026 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,026
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
46
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5New Features and ResourcesRon Reiter, 2012
  • 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. Whats New? (etc.)● postMessage● File API● Websockets● Canvas & SVG● WebGL● Notifications● Web Workers● Geolocation
  • 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. 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● 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. 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 limitlocalStorage.setItem(key, value)localStorage.getItem(key)localStorage.removeItem(key)localStorage.clear()
  • 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. 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. 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. 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● 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. 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. 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. Geolocation
  • 25. Questions?Thank You!