Building HTML5 Applications: Is this the right choice?

HTML5 introduces new markup elements and loads of JavaScript APIs to the specification which provides developers an consistent way to access native functionality across browsers. This not only brings benefit to the developers, but also to the designers! They will now be able to carry out complex tasks and easily add multimedia to the web. HTML5 tends to make the markup much more meaningful and cleaner than before with the new semantic elements.
The intention of the blog is to highlight few of the HTML5 features which really stands out and help you decide if you should move to HTML5 right away!  

Why HTML5?

• New Semantic Elements: HTML5 not only lets you make your markup shorter but it also defines new semantic markup. So in total you can expect a much better developer productivity as HTML5 makes web programming faster by shortening the doctype. It also defines new meaningful semantic elements like section, nav, article, aside, header, footer, etc., which we will take up more in detail in my next blog post.
• Video: You can embed video without third-party proprietary plug-ins or codec, hence no dependencies. Content can be played by any browser supporting HTML5 video feature. Video becomes as easy as embedding an image. Go check out the Infragistics HTML5 Video player which provides some amazing features here!
• Canvas: This feature allows a web developer to render graphics on the fly. This gives you a drawing surface on the screen. As with video, there is no need for a plug in. Check out Infragistics jQuery Charts here, this uses HTML5 Canvas! You can refer to Murtaza’s blog on creating IG logo using HTML5 Canvas.
• Geolocation: Best known for use on mobile devices, geolocation is coming with HTML5. We can expect a lot more location aware applications in the future with this. This can help you in localizing your application. All you need is a HTML5 enabled browser!
• Web Workers: A Web worker is a JavaScript executed from a HTML page; which runs in the background independently of the other UI Scripts. Web Workers use separate background threads for processing and it does not affect the performance of a web page. The W3C and WHATWG envision web workers as long-running scripts that are not interrupted by user-interface scripts (scripts that respond to clicks or other user interactions). Having such workers from being interrupted by user activities would allow Web pages to remain responsive at the same time as they are running long tasks in the background! Web workers interact with main document via message passing.
• Application caches: Web pages will start storing more and more information locally on the visitor's computer. It works like cookies, but where cookies are small, the new feature allows for much larger files. Hence you can expect a better performance from the application (caching) which can reduce the load on to the server. It also lets you make the application work in an offline mode!

HTML5 SPECIFICATIONS

Two different versions of the HTML5 specification are available at this time, but there are a few other versions that are also worth taking a look at:

• W3C HTML5 Specification. The latest published version is at www.w3.org/TR/html5. This version is what is closest to being final.
• WHATWG HTML5 Specification. The latest living standard is at www.whatwg.org/specs/web-apps/current-work/multipage. Generally, newer additions get added to this specification first, before finally making it to the W3C specification.
• WHATWG HTML5 Specification—Edition for Web Developers. The web developer edition is at http://developers.whatwg.org. This is a nice, easy-to-look at version of the WHATWG specification that is usually kept in sync with the living standard but can be out of date.

Can you use HTML5?

Yes you surely can use it now. Many existing websites are written in HTML5. Although the current target date for the HTML5 specification to reach recommendation is 2014, this does not mean you cannot use it! All the latest versions of the major web browsers are already supporting HTML5 features.

 

HTML5 and Microsoft Developer Tools

Visual Studio 2012 provides support for HTML5 semantics. In case you are using VS 2010, you can still add HTML5 Semantic and IntelliSense support.
Microsoft has updated two of its development tools with service packs (VS 2010 SP1): Visual Studio 2010 and Expression Web 4. With the service packs Microsoft enabled these tools to provide HTML5 documents type for validation, and IntelliSense for the HTML5 Semantics/tags. If you’re using Visual Studio 2010 SP1, you can enable the HTML5 Schema by clicking Tools –> Options –> Text Editor –> HTML –> Validation, and then selecting the HTML5 option in the Target drop-down list, as shown in Figure 1. You can also set HTML5 as the default schema from the HTML Source Editing Toolbar in any HTML file, as shown in Figure 2.

Figure 1: Enable the HTML5 validation using the Options Dialog

Figure 2: Select HTML5 Schema on HTML Source editing toolbar

Now you can start creating your HTML5 application from your Visual Studio 2010 with complete IntelliSense Support!

Is your browser HTML5 enabled?

The modern browsers support most of the HTML5 features. You can test your browser if it supports HTML5 features here. You may try changing the document mode of the browser and this page will update the features supported based on the current browser document mode.
There are many websites which uses Modernizr JavaScript library to detect if the browser supports HTML5 features. And probably you should use this in your web applications as well to test if HTML5 features are supported by the client, if not then use a fallback approach for a better end user experience!

 

We will have a drill down to few of these feature in the future posts, so stay tuned!

 

Cheers
Abhishek
@narainabhishek