This is the first and only chapter in this book that’s dedicated to HTML5. But what is HTML5? To put it simple, it’s an umbrella name for a combination of HTML, JavaScript, CSS, and several new APIs that appeared during the last several years. That’s all. Five years ago people were using a fashionable term Web 2.0 to define modern looking applications. These days the term HTML5 is in fashion and we’ll go along with it. Just make no mistakes - it’s about the same old development in JavaScript with the use of the latest advances in HTML and CSS.
This book has a lot of JavaScript. But this chapter includes an overview of some of the new HTML tags that were introduced to make the markup more semantic and convenient. We’ll also provide a brief overview of selected APIs that are included in HTML5 spec (Web Storage, WebSQL, WebSockets, and Web Workers).
The majority of the modern Web browsers already support the current version of HTML5 specification. The question is if the users of your Web application have or rather can have a modern browser installed on their device? There are two groups of users that will stick to the outdated browsers for some time:
-
Computer illiterate people who are afraid of installing any new software one their PCs. Especially, people of the older generation. "John, after the last visit of our grandson our computer works even slower than before. Please don’t let him install these new fancy browsers here. I just need my old Internet Explorer, access to Hotmail and Facebook".
-
Business users working for large corporations, where all the installations of the software on their PCs is done by professional system administrators. They say, "We have 50000 PCs in or firm. An upgrade from Internet Explorer version 8 to version 9 is a major undertaking. Internal users work with about a hundred Web applications on a regular basis. They can install whatever browser they want, but if some of these application won’t work as expected, the users will flood us with support requests we’re not qualified to resolve . Hence the strategy of using the lowest denominator browser often wins.
In the worst case scenario, Web developers need to make both of these groups happy. Take an online banking - this old couple has to be able to use your Web application from their old PCs otherwise they can transfer their lifetime savings to a different bank which doesn’t require the later version of Firefox for online banking.
Does it mean that enterprise Web developers shouldn’t even bother using HTML5 that’s not 100% supported? Not at all. This means that a substantial portion of their application’s code will be will be bloated by the if-statements figuring out what this specific Web browser supports and providing several solutions that keep your application on float in any Web browser. This what makes the job of DHTML developers a lot more difficult than of, say Java developers who know exactly the environment where their code will work. Of you don’t install the JavaRuntime of version 1.6 our application won’t work. As simple as that. How about asking Java developers writing applications that will work in any runtime released during the last 10 years? No, we’re not that nasty.
Do you believe it would be a good idea for Amazon or Facebook to re-write their UI in Java? Of course not unless they want to loose half of their customers who will be scared to death after seeing the message of the 20-step Java installer asking for the access to the internals of their computer. Each author of this book is a Java developer, and we love using Java… on the server side. But when it comes to the consumer facing Web applications it’s just not there yet.
So what’s the bottom line? We have to learn how to develop Web applications that won’t require installing any new software on the user’s machines. Today it’s DHTML or, let’s stick to the modern terminology, HTML5 stack.
In the unfortunate event of needing to support both new and old HTML and CSS implementations you can use HTML5 Boilerplate that is not a framework, but a template for creating a new HTML project that will support HTML5 and CSS3 elements but will work even in the hostile environments of the older browsers. It’s like broadcasting a TV show in HD, but letting the cavemen with the 50-year old black-and-white tubes watching it too.
HTML Boilerplate comes is a really simple way to start your project pre-packaged with solutions and workarounds offered by well known gurus in the industry. Make no mistake, your codebase may be larger that you wanted - for example, the initial CSS starts with 500 lines accommodating the old and new browsers, but it may be your safety net.
|
Tip
|
Watch this screencast by Paul Irish, a co-creator of HTML5 Boilerplate. You can also read the current version of the Getting started with HTML5 Boilerplate on Github. |
In this section we’ll overview a small set of the new HTML5 tags and attributes that are very practical for enterprise Web developers. For example, we are not going to review the <canvas> tag that allows you to draw freely in a predefined rectangular area. But we will show you some HTML5 goodies that are practical and useful for Web forms.
It’s hard to imagine an enterprise Web application that is not using forms. At the very minimum the Contact Us form has to be there. A login view is yet another example of the HTML form that almost every enterprise application needs. Our sample application Save Sick Child will need it too.
We’ll start with the prompts. Showing the hints or prompts right inside the input field will save you some screen space. HTML5 has a special attribute placeholder.