Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Going Mobile with HTML5
Semelhante a Going Mobile with HTML5 (20)
Mais de John Reiser
Mais de John Reiser (20)
Último
Último (20)
Going Mobile with HTML5
- 1. Follow along! http://njgeo.org/html5mobile/
- 2. Going mobile with John Reiser Geospatial Research Lab http://gis.rowan.edu/
- 3. Overview • Introduction to & quick history of HTML5 • Some mobile mapping inspiration • A look at the HTML5 mapping APIs • Locating your users using geolocation • Data formats used on the web • Map Tiles and the Web Mercator projection • Thoughts on designing for mobile • Questions
- 4. What is HTML5? • HTML5 is the latest version of the structured document language of the Web. • HTML5 is a set of specifications, dealing document structure as well as with component parts such as JavaScript, stylesheets, audiovisuals, and mobile-specific functionality. • Broad support for HTML5 across desktop and mobile browsers.
- 5. Quick history of HTML • Began as a means to cross-reference research. • First web servers & browsers appear in the early 1990s. • W3C formed in 1994 to define standards for HTML and HTTP. • Standards ignored as commercial browsers race for new functionality. • HTML 4 became the standard in 1998.
- 6. Rise of HTML5 • In response to high rate of errors in HTML pages, XHTML was defined. • XHTML was adopted by browsers, but many pages “upgraded” by incorporating new features but not declaring themselves as XHTML. • W3C continued work on XHTML2. • A new group, WHATWG, formed to push for interoperable web applications. • In 2006, W3C began working with WHATWG.
- 7. All about applications • Subsequent progress on HTML5 worked toward developing Web Applications that would work across browsers. – New form fields – Greater, yet secure, access via browsers – Support for more media & functionality – Performance – Emphasis on mobile
- 9. HTML5 for Mobile • HTML5 support is nearly the same between desktop browsers and their mobile equivalents. • Functionality differs due to the nature of the device; smaller form factor and varying levels of support across mobile platforms. • Despite this, the majority of web pages written in HTML5 will appear and function in a similar fashion.
- 10. Why not Native apps? • Native applications have their place in the mobile ecosystem. • Device-specific functionality may be required of an application. • HTML5 functionality is gaining support across mobile devices. • The list of reasons why native apps are superior to HTML5 is shrinking.
- 11. Which is which?
- 12. Which is which?
- 14. What do you need to get started?
- 15. <!DOCTYPE html>
- 16. Mapping with HTML5 • The interactive nature of web maps are due to JavaScript. • You can have an HTML5 map within minutes due to the multiple JS libraries available. • There are also several general JS libraries, such as JQuery, which provide functions for cross platform capability and can aid you in your programming tasks. • JQuery Mobile is what is behind the presentation companion site.
- 17. Inspiration
- 19. The Weather Channel • Basic map, very little functionality. • Temporal data; looped animation of previous weather conditions. • Elegant, custom layer switcher. • Experience using the map matches the rest of the website.
- 20. Texas Wildfire Risk Assessment http://www.texaswildfirerisk.com/
- 21. TxWRAP • Access to the same data available via the Desktop version. • Wildfires bring with the possibility of evacuations. • Making this data available to the public & the emergency responders benefits both parties.
- 23. Rowan SpaceFinder! • Locates rooms on Rowan University’s Glassboro campus. • Designed for mobile, but works on desktop. • Provides access to a large amount of data, but still responsive.
- 24. Demo: Real-Time Hazard Console http://node.dtsagile.com/
- 25. Real-Time Hazards • Demonstrates the networking capabilities of HTML5. • Updates from any viewer are then pushed out to all other viewers. • Uses Node.js and Socket.io to provide the real-time updates.
- 26. Which API is right for you?
- 27. ArcGIS JS API Mapquest Bing Maps OpenLayers Modest Maps HTML5 Mapping APIs Yahoo! Maps Polymaps Leaflet Mapstraction Nokia Maps Google Maps
- 28. Google Maps
- 29. Google Maps • Google Maps is currently the most popular web mapping API. • Provides base maps & imagery, geocoding services, XML-based data parsing. • Free to use, usage fees for higher traffic users. • Many, many resources available for implementing custom functionality.
- 30. Google Maps • Pros – start quickly – a small set of data – services like geocoding, traffic, Stree tView, and elevation profiles • Cons – Closed source – Free, to a point
- 31. OpenLayers
- 32. OpenLayers • OpenLayers provides the most highest degree of support for different data formats and projections. • Amazing amount of functionality out of the box. • Is open source software. • You must provide your own data; base maps not included. • Largest in terms of library size.
- 33. OpenLayers • Pros – Very powerful and extensible – Huge example library to help you get started – Supports projections – Editing tools built in • Cons – Codebase is very large – Does not include any services or base maps; you provide the data
- 34. Leaflet
- 35. Leaflet • Leaflet is developed by CloudMade. • Leaflet is open source. • OpenStreetMap derived basemaps available through CloudMade. • Lightweight. • Easy to understand. • Several helper functions, but you may need to write your own code.
- 36. Leaflet • Pros – Very responsive – Lightweight – Basemaps available – Geocoding and routing services available • Cons – API does not include a nearly as much out-of- the-box functionality as either GMaps or OpenLayers
- 38. Additional JS Libraries • These additional JS libraries can aid in cross-browser support and quicker development times. – JQuery – Prototype – Dojo • JQuery Mobile is used to power the companion site.
- 39. Geolocation http://datenform.de/mapeng.html
- 40. Geolocation • HTML5 supports physical location of the device through the navigator.geolocation object. • If it exists, you have some geolocation abilities. • Three methods: – getCurrentPosition – get once – watchPosition – get continuously – clearWatch • Methods called asynchronously, passing a Position object.
- 41. Position • The Position object returned contains two components: – Coordinates object • latitude • longitude • accuracy • altitude • altitudeAccuracy • heading • speed – Timestamp
- 42. Geolocation Demo • Fields will continue to update as you move around (or as accuracy improves) • watchPosition called on page load • clearWatch called when Back button is pressed
- 43. Other Mobile Sensors • HTML5 Device Access also exposes additional data in JavaScript – Compass/Magnetomet er – Accelerometer – Device Orientation • These can be combined to provide a richer, location-based http://flickr.com/photos/marcoarment/1955464307/ mobile experience.
- 44. HTML5 and GIS Data
- 45. Web-friendly Formats • Many traditional GIS formats are not ideal for transmission via the Internet. – Shapefiles and Coverages are composed of several different files with rigid relative structure. – Rasters come in common formats (JPEG) but are often far larger in size than commonly encountered. – Often, users only request a localized portion of the data. Location specific retrieval is not possible with most formats.
- 46. Accessing GIS via Web Services • Requests using Web Services allows GIS servers to receive queries for specific data, filtering by location or attribute. • The entire data set could be pushed back to the client, but this is not required. • Making a request to OSM like so: http://www.openstreetmap.org/api/0.6/map?bbox=- 75.120765,39.710157,-75.119697,39.710953 returns data within the bounding box defined.
- 47. Data formats on the Web
- 48. eXtensible Markup Language • XML is an open, text- based interchange format. • Human readable, but greater emphasis on machine parsing. • HTML and XML are closely related. • Many Web GIS data formats based on XML.
- 49. JSON • JavaScript Object Notation is a open data format based on how JavaScript objects are recorded. • Great as a web-based data interchange format. • Text based, human readable.
- 50. GeoJSON • GeoJSON is JSON that is specifically structured to represent geographic information. • Specific keys: – geometry – properties (attributes) – crs (projection info) • Still text based & human readable.
- 51. AJAX • Asynchronous JavaScript and XML is a technique by which web applications make additional requests for data. • Typically, after the page is loaded within the browser, any open connections are closed until the user navigates to the next page. • AJAX allows for additional data requests that occur in the background. • Background connections allow the rest of the page to function and to not require user input.
- 52. AJAX • While XML is in the name, JSON is often used. • The browser can incorporate the data received into the currently displayed page. • Data could be continuously updated and pushed back to the browser on a regular basis. • The browser can also receive user feedback and send the data asynchronously back to the server.
- 53. These formats work for features, but what about rasters?
- 54. Projections
- 57. Web Mercator • Yet another mark of Google’s influence on web mapping is the common projection that most web mapping applications use today. • Based on a spherical model of the Earth, Web Mercator reprojects the planet (minus the poles) into a square.
- 58. Why Web Mercator? • While cartographers might bemoan the distortion associated with Mercator, a projection that preserves shape allows for a fixed set of zoom levels. • Pre-Google Maps, there were very few attempts to define an open structure for map tiling. • Serving static map images from disk will always be faster than rendering images from GIS data.
- 59. Web Mercator • This enables division of the planet into increasingly smaller squares. • These square tiles can then be served using a static web server, using a defined directory structure. • example.com/z/x/y.png
- 61. Cache Creation • There are two predominate methods for populating a tile cache with map tiles. – Direct: using a desktop computer to generate the tiles from a GIS, storing them locally or remotely. • Arc2Earth, TileMill are two direct tile producers. – Intermediary: using middle-man software that passes on requests to a GIS server while creating and managing the cache. • TileCache and GeoWebCache are two intermediaries.
- 62. Number of Levels • You want to render only the levels needed for your application. • Number of tiles quadruple as the zoom level increases. • Limit the zoom levels of your map to what is appropriate. • Specify the tile ordering scheme.
- 63. Caching Schemes • Precache – render the map tiles for a given extent or zoom level(s) before deployment. • Cache on demand – only cache areas at high zoom levels when the first request is made. – Stamen’s Watercolor map tiles are cached to a certain level, then drawn as needed. – Using a CDN (like Amazon CloudFront) prevents you from handling on-demand requests. • Cache only in your area of focus. • Cache only areas with data.
- 64. Caching On Demand GIS Caching Web Server Software Map Map Tile does not exist: Cach GDB Rendered then stored. e GIS Caching Web Server Software Map Map Tile does exist: Cach GDB Pre-rendered tile returned. e
- 65. “Rendering the World” https://speakerdeck.com/u/yhahn
- 67. @kelsosCorner & @stamen http://sta.mn/py6
- 68. I’ve got my map and my data, now what?
- 69. Design for Users
- 70. User Interface • HTML5 comes with no required UI or human- interaction guidelines. • Your applications can be designed however you see fit. • With mapping applications, one might be tempted to look to the desktop for inspiration.
- 71. Don’t.
- 72. GUI Interaction Methods • Desktop interfaces follow the WIMP model. – Windows, icons, menus, pointer • Mobile devices break from this model. • Touch changes the way we interact with devices. • Our familiarity with WIMP interfaces is learned.
- 77. Desktop GIS UI • Desktop GIS has been saddled with the same UI baggage. • Initially command line, but then the WIMP interface came along and all GIS applications followed suit. • Does not work for a mobile environment.
- 79. When designing your mobile applications, throw out everything you know about Desktop GIS.
- 80. Moving your data online is about getting the broadest audience possible.
- 81. HTML5 can adapt to a variety of desktop and mobile devices.
- 83. Thank you! John Reiser Rowan University Campus GIS Specialist Geospatial Research reiser@rowan.edu Lab 856-256-4817 http://gis.rowan.edu/ @johnjreiser 856-256-4861 @rowangeolab
Notas do Editor
- HTML5 shifts away from ratifying what browser supported features are already implemented. Instead, the focus has been on introducing greater functionality. HTML 5 and supporting technology emphasizes a greater control over connectivity and performance, better support for offline storage of data, and advances in multimedia and 3D support. HTML5 also provides for greater access to the browser and device, including support for geolocation, device orientation, and sensors such as internal accelerometers.
- Well, that will get you started with an HTML5 document. So if you are looking to add additional functionality to an existing page, you will need to include this (or replace the existing) DTD at the very top of your pages. But in reality, it’s not that simple, we need some additional functionality that is provided by JavaScript.