It is fast becoming the case that web and windows apps actually have a sliver of a difference between them. I would like to share what I have felt about HTML5 for a while now – that it will change the way we write web apps!
The following features will make HTML5 a great web standard for tomorrow:
- Video and Audio
- Canvas
- Web Workers
- Application Cache
Video and Audio:
Before arrival of HTML5, browsers were dependent on object and embed tags to insert multimedia content. Browsers supported limited formats of audio and video. You had to look out for an external plug-in to support any a new format. With HTML5, various formats are supported by using just a <video> tag. HTML5 video tag supports MPEG4, flv, ogg, WebM and avi. As for <audio> tag, it supports Ogg vorbis, MP3 and wav. What’s more, you can control video and audio from JavaScript.
Canvas:
This is one of my favorite tags, probably because I started with this tag. Canvas tag is used to render graphics and images on the fly. If you are thinking of game development, you can easily rely on JavaScript and CSS as the ‘game engines’. Take a look at our HTML5 canvas-based game here. All current versions of leading web browsers support canvas tag. There are some interesting tutorials here to get you started on canvas.
Steps to use Canvas:
- Declare a canvas tag
- From JavaScript, call getContext method to get handle to canvas context object
- Use canvas context to draw shapes, images and graphics
Web Workers:
Web workers are another addition to HTML5 that helps you perform javascript processing using background process. Think of Web Workers as Hyper-Threading for web browsers! You can easily offload any function to background threads and improve application’s responsiveness. Implementing web workers can be broken into following steps:
- Create a Web Worker
- Post a message to the Web Worker
- Handle the notification handler triggered by posting message in #2
For more details, refer to Robert Nyman’s post on web workers.
Application Cache:
How about an email client designed in HTML5 with offline caching functionality? This will allow a user to browse through cached emails even when he or she is offline. Loading time will be faster as the data will be fetched from cache. Application Cache in HTML5 is achieved by:
a. Registering the content type of manifest file as “text/cache-manifest”
For Apache, you can use AddType directive “AddType text/cache-manifest .manifest”
You can add “.manifest” MIME Type to Internet Information Server
b. Creating cache manifest file to include/exclude objects that will be cached.
CACHE MANIFEST/styles.css/logic.js/background.jpgc. Adding manifest attribute in the HTML file
<html manifest=”/cache.manifest”>
Application cache offers a great amount of flexibility on what can be included / excluded in it. Though there are limitations on the size of data (5mb), this can still be useful feature if you are developing offline apps using HTML5.
