1 / 30

HTML5 and CSS3

Neal Stublen nstublen@jccc.edu. HTML5 and CSS3. Chapter 10 Geolocation , Offline Web Apps, and Web Storage (JavaScript Ahead). Geolocation. Where Am I?. Browsers can use IP addresses, network connections, cell tower information, and GPS to determine location

hewitt
Télécharger la présentation

HTML5 and CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

  2. Chapter 10Geolocation, Offline Web Apps, and Web Storage(JavaScript Ahead)

  3. Geolocation

  4. Where Am I? • Browsers can use IP addresses, network connections, cell tower information, and GPS to determine location • Web apps can request location information from the browser • Browsers will (should?) prompt the user before sharing location information

  5. JavaScript to Access Location function determineLocation() { if (‘geolocation’ in navigator) { geo = navigator.geolocation; geo.getCurrentPosition(…); } else { // not supported } }

  6. The Position Object • Position provides coordinates and a timestamp • Coordinates include latitude, longitude, and accuracy • Possibly altitude, heading, and speed

  7. Example Location • W3Schools geolocation example: • http://www.w3schools.com/html/html5_geolocation.asp

  8. Integrating Maps • Google Maps API • http://maps.google.com/maps/api/js • Place a map inside an element • Set a map location • Place a location marker on the map

  9. Possible Uses? • Directions from the user’s current location • Find a store near you

  10. Offline Web Apps

  11. Stay Connected with Users • Have the browser keep a local copy of your site • HTML, images, CSS, JavaScript • HTML5 Application Cache • Not the browser cache

  12. Using cache.manifest CACHE MANIFEST # version 0.1 CACHE: index.html images/photo.jpg js/main.js NETWORK: *

  13. Request Caching • Specify the cache.manifest file within the html element of each HTML file <!doctype html> <html manifest=“/cache.manifest”> • Browsers will confirm with the user before caching the site

  14. Limitations • Browsers enforce storage limits • Policies vary by browser • Rely on fallback resources

  15. Manifest Fallback Area • Any resources in the media folder will be replaced with a PNG image file FALLBACK: media/ images/ford-plane-still.png / /offline.html

  16. Site Changes • Changes to the cache.manifest file trigger re-caching the site • Use a version comment in the manifest file to force re-downloading a site

  17. Online Detection • JavaScript can be used to determine if the site is online or offline if (navigator.onLine) { // Online activity } else { // Offline activity }

  18. Possible Uses • Compose messages offline and send them when connected • Download content for offline browsing • Work schedules, articles, reports • But where does that kind of dynamic content go?

  19. Web Storage

  20. Storing Data Locally • Store up to 5MB of data for your web site (W3C spec. suggestion) • Works well with offline web applications • Possible alternative to cookies

  21. Session Storage • Specific to one window or tab • Isolated from other windows (even for the same site) • Lives only as long as the window or tab

  22. Local Storage • Persists across sessions, tabs, and windows • Keep local data instead of repeatedly transferring it from servers

  23. Storing Data • Data is stored as key-value pairs • The “key” is a name given to identify the data • “name”, “email”, “msg:4875963” • The “value” is the data you want to store • “John”, “john@example.com”, “You have been chosen to receive a special gift...”

  24. JavaScript Accesses Storage localStorage.setItem(“name”, “John”); var name = localStorage.getItem(“name”); Or… localStorage[“name”] = “John”; var name = localStorage[“name”];

  25. Accessing Web Storage • Browser restricts access based on the web address • JavaScript on microsoft.com cannot access Web Storage for google.com • Data is not shared between different browsers • However, it can probably be browsed (and edited) by the user from within the browser

  26. Possible Uses • “Remember me” option to save an email address or user name • Shopping cart information • Online store browsing information

  27. More HTML5

  28. Web Workers • Execute scripts in the background • Longer running tasks that you don’t want to block the user from using the site

  29. Web Sockets • Provides two-way communication with a remote site • Receive messages from a remote site • New mail, stock prices

  30. Web SQL and IndexedDB • Local storage like you get with Web Storage • Indexed database queries • Less support than Web Storage • Web SQL no longer being updated

More Related