Today we’re beginning a new series of posts covering the use of HTML5 for web and mobile GIS developers.
2010 – HTML5 Takes Off
Google, Microsoft and Apple have all been shouting from the rooftops about HTML5 since around 2010 and have already started implementing HTML5 features in the latest versions of their browsers even though the standard won’t be complete for several years yet. You can test support within your current browser at www.html5test.com. Whether HTML5 will be the saving grace of the web remains to be seen. What is certain though is that the public interest in HTML5 is huge and growing all the time.
2015 – Final Specification Due
HTML5 is an evolving standard which is not expected to be finalized until 2015. For an amusing countdown visit http://www.ishtml5readyyet.com. With browser manufacturers competing to adopt HTML5 features right away, this means that there is likely to be a fair bit of discrepancy around how HTML5 is implemented. Nevertheless, HTML5 is here. Whether it will really achieve as much as is claimed remains to be seen, but as Web GIS developers we need to know about this stuff!
So What Exactly is HTML5?
HTML5 is not exactly a new standard, because it really is just a loose collection of enhancements that have or will be made to the HTML 4.01 spec. It’s just easier to refer to these collectively as HTML5.
It’s not like the internet needs to upgrade. Everything that was coded in HTML4 continues to work quite happily without modification. However, as browsers continue to adopt new features offered by HTML5, web developers will be more inclined to use them – either to take advantage of new functionality, or to make it easier to accomplish what they could already do in HTML4.
Key New Features of HTML5
Let’s cover some of the core enhancements offered by HTML5 which developers can start to use right away in supported browsers.
First of all, HTML5 introduces a whole bunch of new tags. Some of these are what are known as ‘semantic’ tags which allow other computers to discover not just what a page element is but what it means which makes it easier to re-purpose content. We’ll cover semantic tags in the next post in this series.
There are new tags for embedding audio and video in a web page without relying on plugins like Flash and Quicktime.
There is improved support for forms such as auto-completion as the user types and automatic focusing on fields to make data entry easier.
New APIs
There are new APIs, or Application Programming Interfaces too which encapsulate brand new functionality.
The Canvas API allows you to draw rich graphics natively within the browser and apply gradients, fills and other effects.
The Geolocation API can provide the location of a connected device via its IP address, by triangulation with local wi-fi hotspots or GPS (if supported)
Local Storage improves on the current idea of using ‘cookies’ – small data files that are stored on the user’s hard drive to persist session information, user preferences and so on. In HTML5 you can store up to 5MBdata locally, making it possible to improve performance by caching. For example, you could store a document locally as the user edits it before submitting the changed version to the server.
Drag and drop allows us to achieve a similar effect to what we often see in Desktop applications. Any element on your page can be made draggable with some simple JavaScript and ‘dropped’ anywhere else on the page.
Web Workers allows us to achieve the effect of ‘multi-threading’ by coordinating JavaScript background processes and can greatly improve performance.
Offline Web Applications – as demonstrated in the past by Google Gears – let users run our web applications without being connected to the Internet. HTML5 coordinates the download of all the data they need and its subsequent upload when they are back online.
In the next post in this series we’ll cover semantic markup in HTML5.
