Write once – run anywhere: with HTML5, say Steve Crabb, CEO and Ingunn Ingimars, IT Consultant at Aviation42, one software applications works across all devices in an airline.

“The wonderful thing about standards is that there are so many of them to choose from“. This statement, which so accurately summarises the world of programming, has been attributed to both Grace Hopper, a computer scientist and US Navy Officer, and Andrew S. Tanenbaum, a professor of computer science.

Processing power increases every day, storage space seems to expand at the same rate as the universe and our demands for a glossier, fancier, faster experience are on the rise. No wonder so many have been tempted to create standards and convince others to follow them. RealPlayer, JavaScript, HTML, QuickTime, Flash, XML, XHTML, XSL, XST, CSS… there is an excess of concepts; but on which one should we really bet? Is there any one correct way of developing content for the World Wide Web? Do we need a unified approach? As it turns out, the World Wide Consortium (W3C) an organisation dedicated to developing standards for the World Wide Web, has come up with the standard for HTML5, albeit still in draft at the time of writing, but it has already attracted a great deal of attention.

Why do you need HTML5?

You can regard HTML5 as a ‘write once, run anywhere’ technology. A correctly developed website in HTML5 will run on your desktop’s web browser, on your tablet computer and on your smartphone. You should not need to create and maintain separate websites for separate devices. Another advantage of HTML5 results from its focus on improving graphics and media support by eliminating the need for Adobe Flash or other third party plugins when viewing online videos. It also enables websites to be used offline because local storage has been added, improving offline capabilities. And geolocation is built in, giving you the location of the user; also access to hardware such as the camera and microphone is already available in some browsers. These are only few of the reasons you should take a closer look at HTML5.

HTML vs. HTML5

For a little over two decades now, your everyday webpages have been created, or coded, with some versions of HTML (HyperText Markup Language). HTML is a set of tags, or angled brackets, which serve as instructions as to how web browsers should render or display the content. If you want to display a word in bold font on your webpage you would write it like this:

Here is a <b>great</b> sentence

which will be displayed as:

Here is a great sentence

The ‘5’ in HTML5 simply refers to this being the 5th version of that coding language, but it has attracted much more attention than, say, the 4th version of HTML (published 1997) or the 3rd version because it is more extensive than previous versions and has a lot more tags. The earlier versions were used by developers and designers to create standard websites to be viewed solely in web browsers on your computer. With the advent of tablet computers and smartphones, coupled with easier and cheaper Internet access and users wanting more videos and more graphics, it was soon evident that the world needed something more than HTML. HTML5 not only has all the old HTML tags but many interesting new ones have been added to it.

Is HTML5 the only thing I need?

Although you can build great websites with HTML5, it doesn‘t quite solve the question of life, the universe and everything. For styling, web designers still employ CSS (Cascading Style Sheets). If it is a rich user interface experience you are after then JavaScript and associated frameworks, and libraries such as AJAX, JQuery and JQueryMobile are available.

What do you need to run HTML5?

An HTML5 compatible browser is a must. These exist for most operating systems such as Microsoft’s Windows, Apple’s OS X and Linux and for a multitude of mobile operating systems, Google’s Android, Apple’s iOS (iPad/iPhone/iPod), Nokia’s Symbian, RIM’s Blackberry and Microsoft’s Windows Phone 7 (and 8).

Because HTML5 still retains all the old tags, all older webpages are still OK in newer web browsers and most web browsers today support most of the new tags in HTML5. You can test how compatible your web browser is (on your computer, tablet computer and smartphone) by following these links and obtain a score.
http://html5test.com/

HTML5 apps

In the ‘good old days’, the windows design philosophy reigned supreme and installable applications or programs, apps for short, were focused pretty squarely on that platform. Then the web browser revolution came and web apps became the flavour of the day. More recently along came the iPhone and the App Store and the development community fell in love with native apps, the installable applications, once again.

To develop a native app for the major platforms separate code needs to be written for each operating system on which you want to run. On the up side, native apps provide a more responsive user interface, can use the available features of a device such as cameras, gyros, GPS, the phonebook etc. and are easy to find via the appropriate app store.

An HTML5 web app is essentially a web application designed specifically to run in an HTML5 browser. It can be written once and run in all compatible browsers. This helps in reducing the development costs while deployment and updates are made easier. In addition, there is no need to submit the app for approval as with Apple’s App Store. On the down side the user experience can be compromised compared to native apps and access to the device’s features remains limited.

One fundamental difference between an HTML5 app and a native app can be explained by examining the dealings of the Financial Times and Apple. The Financial Times had created a native app available in Apple’s App Store in order for their readers to read the news on the iPad and iPhone. But, as Apple takes 30% of the revenue generated by apps in its App Store, the only real option to avoid this fee is to develop a web app instead. In what is seen as a landmark case, the Financial Times decided to move its native iPad/iPhone app to a HTML5 web app primarily because Apple wanted a 30% slice of all its subscription revenue. http://www.reuters.com/article/2011/08/31/us-apple-ft-idUSTRE77U1O020110831

Video – without plugins

Before HTML5 there was no in-built method for playing videos in a web browser. The de facto standard is to use the Adobe Flash Player with the <object> tag but the downside to that approach is that Flash does not play on iPhone/iPad/iPods unless some workarounds are employed – the simplest workaround being to publish your video on YouTube and link to it. Other third party plugins exist but the end result is the same – the user has to download that particular plugin to play the video.

HTML5 has introduced the <video> tag which provides a host of controls (such as Play, Pause, Stop, volume controls and other whizz bang effects). So, it can‘t get any easier, can it? Well, not quite, as there is still a myriad of video formats and codecs available and the HTML5 standard, in its draft format, has not yet specified which video format and codec should be supported by all web browsers (for more info, refer to http://en.wikipedia.org/wiki/HTML5_video). Mark R. Robertson has written a good article (http://www.reelseo.com/file-formats-containers-compression/) on the subject of video formats and codecs but the short version is that the video format, such as .mov, .avi and .mp4, is a sort of container that stores the information needed to play a video, e.g. the video stream and the audio stream. You then compress or encode the video stream using one compression scheme, e.g. h.264, and the audio stream using another compression scheme, e.g. MP3. The different compression schemes are called codecs (short for coder/decoder). For online videos you have to choose a good video format and codec to strike a reasonable balance between quality on the one hand (little or no loss during compression), and load time and bandwidth on the other hand.

This subject alone is material enough for an entire article but from the above we can draw the conclusion that we still have a way to go until we get a universal way of delivering online videos to our users.

Geolocation – you are here

Geolocation, short for geographical location, is supported in HTML5. Web browsers that support the geolocation tag can get information on where the user is and use that information to enhance his browsing experience, e.g. by searching for a nearby café or a pharmacy. The accuracy, however, depends a bit on the device running the HTML5 webpage. Your smartphone might have a GPS which will yield a more accurate location than your laptop‘s web browser which has to rely on the nearest connection box of your ISP (Internet Service Provider).

Local storage and working offline

You may have heard of website cookies, the small bits of information that get passed between your browser and the web server that hosts the webpage you are looking at. The cookies take time to load and they require bandwidth when you open, or load, new pages. HTML5 introduces a new concept of a larger local storage on your computer and your browsing experience becomes faster and more agile as a result.

HTML5 uses the local storage to provide offline support. This means you can create web applications (webpages with a lot of functionality) and use them when not connected to the Internet. Imagine having checklists you would like to download to your computer, then go somewhere where there is no Internet connectivity, work on the checklists and then upload them when you get connected again. Reports filled in by your airline crews may also benefit from this technology as you can have them fill in reports on tablet computers while on-board the aircraft and then upload the information once they get connected.

Canvas – graphics on the go

The world of aviation is a fast-paced one and aviation professionals most likely spend as much time on the go as they do in a traditional office environment in front of a large computer screen. Mainframe and client/server computer systems are making way for feature rich web applications which are always up to date and accessible around the clock. This has generated a demand for sophisticated and dynamic graphics such as dashboards, graphs and charts to present the information in a quick and easy manner. HTML5 introduces the <canvas> tag for such graphics and you use JavaScript as the paintbrush to tell it what should be displayed.

Drag & drop – let’s get moving

User controls on web pages have, up until now, been quite limited to input fields and submit buttons, and drag & drop capabilities required quite amount of coding. With HTML5 you can now quite easily create web applications which allow the users to drag and drop objects on your pages, e.g. to reorder lists and delete items by dragging them away. This helps make web applications more interactive and user friendly.

Conclusion

This article has hopefully demystified and simplified the hype around HTML5 and helped you understand how important a role it can play in your airline. Keep in mind, however, that technology is in constant flux and you should not let the latest trends guide your IT strategy.  Remember to analyse carefully what you really need and whether your airline has the management resolve and financing to see technological changes through.

HTML5: the pros and cons

A few positives

• HTML5 builds on two decades of HTML development and has enhanced rather than revolutionised the way we display content on the World Wide Web;
• Write once, run anywhere reduces development costs;
• HTML5 releases you from your office chair and makes it easier for you to work on the go.

The downside and future challenges

• HTML5 as a standard is still being developed and it will take a few years until it becomes complete;
• Implementation across the major browsers is still patchy for some functionalities/tags;
• HTML5 developers still do not have full control of the features of the devices, such as the camera.

Some useful links

http://www.youtube.com/watch?v=mzPxo7Y6JyA&feature=player_embedded
http://www.the10most.com/code/the-10-best-html5-tutorial-websites-you-should-visit.html
http://experimenting.in/other/demo_webstorage.htm
http://html5demos.com/drag

Some acronyms explained…

AJAX:            Asynchronous JavaScript and XML
HTML:          HyperText Markup Language
XML:            eXtensible Markup Language
XHTML:         Extensible Hypertext Markup Language
XSL:             Extensible Stylesheet Language
XST:             Xilinx Synthesis Tool
CSS:             Cascading Style Sheet