HTML 5

First of all it is clear that HTML 5 is in fact works in progress and the deadline for the completion of its development is 2020! In spite of this fact many browsers are already supporting HTML 5 or an implementation of this exciting new language. HTML 5 is reputed to be not just an upgrade of HTML 4 but a completely new standard.

There is a lot of hype about HTML 5 already and in IT circles it is revered and spoken about with much expectation. I must say that I was surprised that the expected completion date is so far away and yet it is already getting a lot of publicity.

Jeremy, our tutor suggested we test our browser compatibility on www.html5test.com. I ran a few tests on some of my browsers and most faired relatively well except from my Blackberry Curve "smart" phone which got 1 point in the test. A measly one point ! I also installed "Bolt" which is an alternative browser for the Blackberry and this scored much better. I had originally looked into "Bolt" as an alternative browser to play You Tube videos on the Blackberry. I was pretty disappointed. Videos are grainy and slow even on a wifi connection. On the 3G connection they are simply not playable.

I also did quite a lot of reading on this new implementation of HTML 5. First of all I found out that HTML 5 is no longer part of SGML which inadvertently means that it can be made simpler and from what I read it is supposed to be simpler. I was also pleased to see that the basic structure common to all web pages has finally been realized and now the standard supports the following (taken from about.com):

• <section> - to define sections of pages
• <header> - defines the header of a page
• <footer> - defines the footer of a page
• <nav> - defines the navigation on a page
• <article> - defines the article or primary content on a page
• <aside> - defines extra content like a sidebar on a page
• <figure> - defines images that annotate an article

Also, HTML 5 seems quite focused on creating dynamic web pages which is after all the order of the day nowadays. It has several features specifically aimed at this such as the <canvas>, <video> and <audio> elements.

Is HTML5 the end of flash ?

At face value it seems that HTML 5 will attack the Adobe Flash platform at its roots. HTML 5 aims to include the animation and multimedia features that are currently available in browsers through the installation of the plugins as standard features. This is undoubtedly a serious threat to Flash and in my opinion unless Adobe come up with something that is vastly superior to what HTML 5 is offering they are in serious trouble. The possibility of using browser integrated animation rather than using a third part flash plugin is certainly advantageous and will help make the entire internet platform more stable. Many times it is the multiple plugins that are installed in a browser that cause crashes and other annoying behavior.

The hostility shown by Apple in its vastly popular Ipad products towards Adobe Flash is also an important factor especially when you consider that Safari already has excellent HTML5 support. This clearly shows the way which Apple is heading. Microsoft is also promising at least some support for HTML5 in its latest browsers which is another nail in Adobe Flash's coffin. Adobe simply have to stay ahead by adding innovations to Flash that will place it in the forefront. It is going to be difficult for Adobe to constantly come up with new ideas in my opinion.

What about old browsers ?

Of course the existence of millions of systems still using old browsers cannot be ignored. Although some sites are already using HTML 5, the risk of browsers not supporting it is still very high and one must be sure that the website that is designed to use the new features must have a fall back system and be able to function without  HTML 5 support. This is of course even more important is devices with built in browsers such as the millions of smart phones currently in use. Thankfully, there are ways to determine if the browser being used to view a site is HTML 5 complaint. Well, actually you do not test for HTML 5 as a whole, rather, you test for a particular feature when you are going to implement it. For example, the <canvas> feature is already well known in HTML 5 and is used to create a virtual canvas anywhere on your page onto which you can draw graphics on the fly. To test if the browser being used supports the <canvas> element it is relatively easy and would involve :

  return !!document.createElement('canvas').getContext;

The above creates a dummy canvas which is stored in memory and not displayed and tries to get the Context of the object. It will return true if the feature is supported. There are also JavaScript libraries that can be used to detect a multitude of features rather than testing them one by one but essentially these are doing the same thing.

Delving into some HTML 5

It was now time to get my hands dirty with some actual coding. As usual I was very eager to actually start testing some code and decided to do some tests with the new <canvas> element which is already well known.

I wrote the code below and the background screen shows the result. This is of course a very basic example that used JavaScript to write to an HTML 5 canvas. I tested in both in Firefox and Google Chrome and it worked great on both. I also tested it on Internet explorer 7 which I have installed on this development PC and needless to say it did not work.



Next, I tested the Gradient feature. This feature can prove very useful judging from my experience with web design where we usually use background images to create gradients and have to suffer from the inherent re-sizing limitations that images bring with them. The image below shows the gradient created together with the code that produced this.

Finally, some references

I did a considerable amount of reading while writing this blog post. I was barely aware of the HTML 5 standard before starting out and now I must admit that I consider myself to be familiarised enough that I even intend to attempt to include at least some HTML 5 features in a future project.

Here are some internet resources that I found particularly useful.

http://www.w3schools.com/

I cannot not start with W3 Schools. Their website is clear and to the point and with many useful examples.

http://diveintohtml5.org/

I must say that Mr. Mark Pilgrim did a lot of good work on this website. I simply love the way the work is presented and spent many hours reading through the volumes of informaition contained here.

http://www.technologyreview.com/web/24844/?a=f

The technology review published by MIT was a good source to read about the challenges that HTML 5 presents to  Adobe Flash.

http://dev.w3.org/html5/html-author/

The above is a link to the W3C HTML 5 reference. As a reference document it is valuable as it lists all the elements in detail.