Is HTML5 the right choice for your application?

Introduction

One billion HTML5-capable phones have been sold by 2013. HTML5 is not a new version of an old markup language, is a new concept for website development and applications in the era of mobile devices, cloud computing and networking.
 

At ASSIST Software we adopt new technologies and integrate them in our projects. Since the Steve Jobs rant about flash, Apple made a bet on HTML5 as well as other companies like Microsoft, Google, Intel.

I will describe this technology and how we’re using it at ASSIST Software further on.

What is HTML5

HTML5 is a markup language used for developing content for the World Wide Web and an important element of the Internet. Is the language that describes how a page should look like.

HTML5 is the most exciting step forward in web development since the launch of XHTML 1.0. HTML5 represents the future and it’s not yet a final standard until 2014 but it can be implemented right now. Most newest browsers support already important new  features.

Chart 1 shows the minimum browser version required for an element to be supported:

Comparison to HTML4

Compared with HTML5, HTML4 is limited in features and developers had to rely on Flash or Java plugins to add rich content to their websites.

HTML5 has in scope not to use Flash plugins that consume lots of CPU.

Below you can find the status of new features and their status according W3C.

New Elements in HTML5

More specifically, HTML5 adds a whole bunch of new markup tags to include rich content:

• <header> and <footer> tags to help you isolate tops and bottoms of content blocks. Can be used more than once on a single page.
• <article> tag which identifies a specific, singular piece of content, e.g., a blog post or a user comment.
• <nav> tag to specify which sections should be considered navigational blocks.
• <section> tag that lets you define a generic section of content; similar to the currently existing <div> tag.
• <audio> and <video> tags to mark the inclusion of audio or video content.
• <canvas> tag that lets you draw graphics using a separate scripting language.
• <embed> tag to embed external content or applications into the page.

There are some other elements with a significant role so I’ll extend their description.

• Along the features I presented, there is the video tag, which is replacing object tag for video elements. Google is already using the <video> element on his html5 video player for Youtube. As shown in Chart 1 video support is present in most modern browsers, but some of them were relunctant to use the proprietary format H.264. Right now all of them support H.264 and Mozilla Firefox and Opera implemented it using operating system installed codec.
• Audio element was created to play audio content in the browser. The existing support is very good for desktop and mobile browsers. Google Play Music included the HTML5 feature for streaming audio.
• One of the most important new element is canvas that allows to develop interactive 2D websites. Compared to SVG which is vector-based, canvas is raster-based. Javascript and canvas can be used in developing powerful games.
• SVG element is a vector image format for 2D graphics.  Is not well suited for games but for charts and animations is great. Notable examples in this regards are Google Analytics and d3js[3] library.

Advantages/Disadvantages to use HTML5

HTML5 has many powerful new features for both developers and users. Like any other software, a new technology has also drawbacks that have to be taken in consideration when developing a web application.

Advantages:

1. No need for plugins that slowdowns the computer and consume device’s battery
2. Access to device hardware: microphone, camera, location, accelerometer
3. One codebase for lots of platforms

Disadvantages:

1. Availability of tools for authoring and creating interactive content
2. Performance compared to native applications

When did we use HTML5?

Project name: English Attack!

We developed several games for the English Attack! project, using HTML5 on all of them to work on desktop and mobile devices.

Description: We initially tried developing the games using Canvas until we encountered some challenges like canvas performance which was not satisfactory for complex games. The solution was to rewrite some portions to use DOM renderer. To improve performance we implemented animations with sprites.

Project name: Bucovina Museum

We also used HTML5 in a project for Bucovina museum. We had to create an app for their tablets to highlight the museum areas, most of them placed outside.

Description: Considering that tablets were not covered by Wi-Fi it was a must having the content saved on local storage. We used a new feature from HTML5 that allowed us to have the whole application saved locally in case of no connectivity. One problem quickly arose from the inability of Android 2.3 stock browser to play offline audio content. As an workaround we used video tag to play audio files, which was supported to play offline content.

! Keep in mind when using the audio tag that for older Android devices some workarounds are necessary.

Project: Netcapital

We are currently developing the Android application for Netcapital project which is a social network website for businesses.

Description: To benefit from html5 advantages but in the same time to add more native integration we decided to use Phonegap this time. Most of the code is written in Javascript, HTML5 and CSS3 and we also developed plugins for native integration like showing native Share.

Conclusion

To determine whether HTML5 is the right choice for your app you have to set the features you want in your application first. If you want a polished, high-performance application then the native integration is the best option. On our end we decide what technology fits better according to specifications and requirements.

With no doubt we can say that HTML5 is the future for web and support is approaching to 100% on all major browsers and platforms by every step.