5 Cool Things in HTML 5 for Mobile Web App Development

Following on from my previous HTML 5 article, I decided to write another one talking about a few cool things that HTML 5 brings us which help us develop cross-platform web applications. Although not all devices support HTML 5 at the moment, it is increasingly becoming the standard due to its relatively low resource consumption and accessibility.

Canvas

Canvas is pretty much what it says on the tin, it is an element which can be used by JavaScript draw draw graphics on-the-fly. These graphics can range from static graphics (such as graphs), to animations all the way through to fully rendered 3D images using WebGL. The idea of canvas is that it’s a blank canvas for you to work with.

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

Audio/Video

HTML 5 introduces the audio and video elements. These elements are used to embed audio and video content into your website. As these are raw media files (unlike Flash which includes its own player), it relies on the web browser to be able to decode and control the content. Standard still has not been agreed upon, with some browser developers wanting to use Ogg (the open standard), and others wanting to use h.264. This currently makes it difficult for developers, so while we’re waiting for a clear victor, it’s probably best that we include both!

https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

Offline Caching

The problem with web applications is that they require a continuous internet connection. This can become even more problematic when using mobile devices, as there may be no guarantee of coverage (particularly if the user is on the move). HTML 5 solves this problem by using offline caching. Using manifesto files you can tell a browser what files it should cache, what files require an internet connection (ie. shouldn’t be cached) and a fallback if content is not available. This can also be used to reduce the need to communicate back to the server continually, thus saving you, and the user precious bandwidth.

http://www.webreference.com/authoring/languages/html/HTML5-Application-Caching/

Client-side Storage

We are used to cookies being used to store data on the client, but they are rather inflexible. This is sorted with the use of client-side storage. There are a few different types of this: Session storage will store data associated with a particular instance of a website. What this means is that the data is persistent as you navigate through a website, but if you open up another instance of the website (such as in another tab or window), then the session is different. This means you can have different data stored with different instances.

Local storage is more like cookies, however unlike cookies the data is not sent to the server in every HTTP request, it is only retrieved as and when needed. This means that data isn’t unnecessarily sent to the server allowing you to store more data and save bandwidth. The data persists when the window is closed and (unlike session storage) can be accessed across all tabs/windows. The data is associated with the domain.

If you are wanting to store more complex data and be able to search through it easily, you’re able to use a database store. This uses the SQLite spec, and means you’re able to query the database file and retrieve only relevant information to be processed or sent back to the server.

http://www.webreference.com/authoring/languages/html/HTML5-Client-Side/

Geolocation

One of the big things about Smartphones and mobile applications is that they can determine the location of the user, and therefore bring up information relevant to the location. This was done differently by each device and required direct access to the OS API. HTML 5 has standardised the methodology to retrieve the location, and does it by whatever means the device can handle (eg. Wi-Fi networks if the device has a wireless card but no GPS). As this is implemented by the browser, there is no need to (as developers) worry about how the location is retrieved.

http://diveintohtml5.org/geolocation.html

HTML 5 Preparation

When setting up an HTML 5 web page, there are a couple of things which need to be done. First of all you need to standardise the CSS for the new HTML 5 elements. This can be done at the top of your CSS stylesheet by making all the new elements be displayed as “block” elements:

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
  display: block;
}

Unfortunately there is still a range of browsers which still don’t render HTML 5 objects. This means we need to add a JavaScript hack. Rather than downloading or creating your own JavaScript file, you may as well just link to a file that has already been created for you on Google Code. This means that it will always be kept up to date. Also as it is only needed for IE browsers up to version 8, you won’t need other browsers to load it:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

You are then free to start creating your HTML 5 web page!