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.