Where we’ve been and where we see the potential of HTML5 for the GIS Community

AppGeo’s Vice President and Director of Software Architecture, Peter Girard, has been watching the development of HTML5 for several years with the conviction that it represented the correct technology direction for the company.  We held back jumping on the Flash bandwagon, and we took some flack for not being at the “cutting edge” while we quietly invested in HTML5 components as they appeared, and the dividends are now arriving and we are not surprised.

HTML5, simply put, makes sense for the GIS community for several reasons, not least of which are:

  • Improved handling of graphical and multimedia elements without plugins
  • Support for device access or awareness such as geolocation, orientation and sensor input
  • Expanded scope for modern user interface design
  • Operates efficiently on low-powered devices
  • Enhances offline and storage options that keep applications running even if connectivity is lost temporarily

If you just follow the news, you might have the impression that HTML5 just arrived on the scene.  But the truth is that HTML5 has been coming slowly for several years, and will keep delivering in the years ahead.

Bottom line: we are fans, and have put HTML5 into practice with our MapGeo(TM) application and other custom mobile and web-based applications that we have developed or are developing.  For example, our award-winning custom applications for the City of Baltimore and for the US Geological Survey GAP Analysis Program took advantage of HTML5.

 

HTML5 Branding and Capabilities

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

We use the eight symbols of the HTML5 Identity System (pictured above) to organize additional commentary on the various classes of HTML5 capabilities and then describe how we are using them.

 

Class 1: Semantics

HTML5 Powered with Semantics

HTML5 adds new semantic tags for contextual mark up of text and updates some old tags for improved accessibility and searchability.

AppGeo has been taking advantage of semantic tags since HTML4 for linking label inputs.  With HTML5 AppGeo is using new input types and using Aria (the Web Accessible Initiative (WAI) Accessible Rich Internet Applications suite for making content more accessible for people with disabilities).

 

Class 2: Offline and Storage

HTML5 Powered with Offline & Storage

HTML5 has features that allow authors to create web applications that can work offline and manage offline/online complexity, including: application caching, local or offline storage, and online/offline events status.

AppGeo has been taking advantage of local and session storage capabilities for going on two years now.


Class 3: Device Access

HTML5 Powered with Device Access

HTML5 supports the increasing range of device capabilities – tilt, geolocation, acceleration or motion, audio, video, etc. – on devices that we use to interact with web applications, such as smartphones and tablets.

AppGeo has been taking advantage of these capabilities for more than a year for geolocation, device orientation, and for camera access (Android 3+).

 

Class 4: Connectivity/Real Time

HTML5 Powered with Connectivity / Realtime

HTML5 improves connectivity speeds and data exchanges between the server and the client using WebSockets that allow the server to push data to the client.

AppGeo is currently using REST APIs and exploring this option.

 

Class 5: Multimedia

HTML5 Powered with Multimedia

HTML5 supports native multimedia embedded in pages.  To many, this is one of the most visible “big” things about HTML5.

AppGeo is exploring this option for deployment to meet future customer needs.


Class 6: 3D, Graphics and Effects

HTML5 Powered with Graphics, 3D & Effects

HTML5 supports natively SVG, Canvas, WebGL, and CSS3 3D features.

AppGeo has been using SVG and Canvas for many years (as soon as they came out and as soon as they became available through HTML5).  Our current focus is on Canvas, which we use to manage map mark up capabilities.  We are also planning to utilize CSS3 3D to speed up rendering performance, especially on mobile devices.

 

Class 7: Performance and Integration

HTML5 Powered with Performance & Integration

HTML5 has native browser support for components and techniques that make websites faster, including Web Workers that do not impact browser response while they work on data.

AppGeo is using AJAX (XMLHttpRequest) to greatly reduce the traffic per request and allow for retrieving data in the background.  We are exploring and planning to utilize Web Workers for geoprocessing and background drawing of Web page elements.

 

Class 8: CSS3 and Styling

HTML5 Powered with CSS3 / Styling

HTML5 makes it easier to manage, author and apply styles over similar sections of a web page.

AppGeo is using these styling capabilities to develop more modern user interfaces with drop shadows, rounded corners, gradient colors, and so on.

 

To borrow a phrase from the W3C website, we’ve seen the future and it is in our browser!

 

By Tom Harrington with input from Peter Girard, Vice President and Director of Software Architecture, and Ryan Westphal, Senior Application Developer

Image Credit:  Business Insider