Download
neal stublen nstublen@jccc edu n.
Skip this Video
Loading SlideShow in 5 Seconds..
HTML5 and CSS3 PowerPoint Presentation
Download Presentation
HTML5 and CSS3

HTML5 and CSS3

164 Views Download Presentation
Download Presentation

HTML5 and CSS3

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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