Your SlideShare is downloading. ×
0
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Html5 features: location, history and offline apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 features: location, history and offline apps

687

Published on

Location, History and Offline Apps

Location, History and Offline Apps

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
687
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
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. HTML5 o o o Location History Offline Apps
  • 2. HTML5 STANDARDS W3C – World Wide Web Consortium WHATWG – Web Hypertext Application Technology Working Group http://upload.wikimedia.org/wikipedia/commons/f/f7/HTML5-APIs-and-related-technologies-by-SergeyMavrody.png
  • 3. ESTIMATION 2012 HTML 5.0 Candidate Rec HTML 5.1 2013 Call for Review 1st Working Draft HTML 5.2 http://en.wikipedia.org/wiki/HTML5#New_APIs 2014 2015 2016 Recommendation Last Call Candidate Rec 1st Working Draft Recommendation
  • 4. HTML5 BROWSERS COMPATIBILITY http://html5test.com/results/desktop.html
  • 5. LOCATION o o o Effort of W3C to standardise an interface for geolocation information on the client side Gives ECMAScript set of object defining location Uses location information servers o o o o o o IP address WiFi MAC network Bluetooth MAC address RFID GPS GSM/CDMA cell IDs
  • 6. LOCATION COMAPTIBILITY o HTML5 Geolocation API support IE 9.0+ o 3.5+ Safari 5.0+ Chrome 5.0+ Opera 10.6+ iPhone 3.0+ Android 2.0+ Polyfills o o Firefox https://github.com/Modernizr/Modernizr/wiki/HTML5 -Cross-browser-Polyfills#geo-location Geolocation API / Skyhook / Navizon / Xtify / Maxmind
  • 7. LOCATION SOURCE function get_location() { navigator.geolocation.getCurrentPosition(show_map); } function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // no native support; maybe try a fallback? } }
  • 8. LOCATION OBJECT Position Object Property Type Notes coords.latitude double decimal degrees coords.longitude double decimal degrees coords.altitude double or null meters above the reference ellipsoid coords.accuracy double meters coords.altitudeAccuracy double or null meters coords.heading double or null degrees clockwise from true north coords.speed double or null meters/second DOMTimeStamp like a Date() object timestamp
  • 9. LOCATION WHERE I AM? http://en.wikipedia.org/wiki/File:Latitude_and_Longitude_of_the_Earth.svg http://www.satsig.net/world105.gif
  • 10. LOCATION DEMO o o http://playground.html5rocks.com/#get_current_p osition http://www.maxmind.com/en/geoip_demo
  • 11. HISTORY o o o Access to browser history HTML5 – manipulate history contents stack Ensure URLs are resource identifiable history.pushState support IE · Firefox 4.0+ Safari 5.0+ Chrome 8.0+ Opera 11.50+ iPhone 4.2.1+ Android ·
  • 12. HISTORY TRAVEL Moving forward and backward window.history.back(); window.history.forward(); o Moving to a specific point in history window.history.go(-1); window.history.go(1); o
  • 13. HISTORY CHANGE Adding and modifying history entries history.pushState(); history.replaceState(); o window.history.pushState({'one':'1','two':'2'}, 'History', '/history'); https://developer.mozilla.org/en/docs/DOM/Manipulating_the_browser_history
  • 14. HISTORY DEMO http://html5demos.com/history https://github.com/languages/JavaScript/most_watc hed
  • 15. OFFLINE STORAGE OPTIONS o Storage Options o Web Storage o http://code.google.com/p/sessionstorage/ IndexedDB o WebSQL o o Why? o o o o o Store dynamic data Store static resources Store binary data Sync data with server Increase application performance
  • 16. WEB STORAGE o o Similar to cookies with enhanced capacity Two storage areas local storage as persistent cookies (per domain) o session storage as session cookies o o o o About 5MB capacity Only client-side access Good programmatic interface – key/value pair
  • 17. WEB STORAGE & DEMO Session storage // Store value on browser for duration of the session sessionStorage.setItem('session_key', 'session_value'); // Retrieve value (gets deleted when browser is closed and reopened) sessionStorage.getItem('session_key'); Local storage // Store value on the browser beyond the duration of the session localStorage.setItem('local_key', 'local_value'); // Retrieve value (works even after closing and re-opening the browser) localStorage.getItem('local_key'); <Storage>.removeItem(); <Storage>.clear(); http://en.wikipedia.org/wiki/Web_Storage
  • 18. INDEXEDDB o o o o Local database for hierarchical objects (structure) Handle simultaneous data operations (transactions) Chrome and Firefox support; other browser vendors More on: https://developer.mozilla.org/enUS/docs/IndexedDB
  • 19. WEBSQL o o o o RDBMS like data storing Supported by add-on extensions W3C Web Applications Working Group ceased working on the specification in November 2010 Use Lawnchair - http://brian.io/lawnchair/ http://en.wikipedia.org/wiki/Web_SQL_Database
  • 20. OFFLINE APPS SUPPORT  Polyfills http://amplifyjs.com/  https://github.com/marcuswestin/store.js  http://yuilibrary.com/yui/docs/cache/#offline  http://rezitech.github.com/stash/  http://smus.com/game-asset-loader/ 
  • 21. MORE DEMOS http://html5demos.com/  https://developer.mozilla.org/enUS/demos/tag/tech:html5  http://www.html5rocks.com/en/  chrome://quota-internals/  HTML5 APIs support  http://caniuse.com/  http://mobilehtml5.org/ 

×