• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 features: location, history and offline apps

Html5 features: location, history and offline apps



Location, History and Offline Apps

Location, History and Offline Apps



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

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 features: location, history and offline apps Html5 features: location, history and offline apps Presentation Transcript

    • HTML5 o o o Location History Offline Apps
    • 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
    • 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
    • HTML5 BROWSERS COMPATIBILITY http://html5test.com/results/desktop.html
    • 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
    • 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
    • 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? } }
    • 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
    • LOCATION WHERE I AM? http://en.wikipedia.org/wiki/File:Latitude_and_Longitude_of_the_Earth.svg http://www.satsig.net/world105.gif
    • LOCATION DEMO o o http://playground.html5rocks.com/#get_current_p osition http://www.maxmind.com/en/geoip_demo
    • 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 ·
    • 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
    • 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
    • HISTORY DEMO http://html5demos.com/history https://github.com/languages/JavaScript/most_watc hed
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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/ 
    • 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/ 