HTML5 is more than a few years old and no longer a curiousity. Web pages that used to simply emulate a piece of paper are now expected to do something snazzy to justify their existence. Thanks to HTML5, along with innovations in JavaScript and CSS, interactive logic is a standard strategy for Web programming, and full-fledged Web apps are everywhere. All it takes is a few extra tags to rewrite the world's software as a Web page.
At least that's the vision. And folks have been eating it up. IT managers love the promise of HTML5 and the cloud because it means installing one app on the desktop -- the browser -- and forgetting about those boxes in the cubicles. Programmers love it because HTML5 is often as easy as putting a few tags in the right places, even though CSS can occassioinally drive us mad. The bean counters love it because Web designers are cheaper and more plentiful than C++ programmers. Strategic managers love it because they don't need to ask the smartphone manufacturers for permission to get in their Web store.
[ Experts explain all key HTML5 specs, from canvas to local storage, plus the latest browser benchmarks and report cards on HTML5 support in InfoWorld's megaguide to HTML5. Download the PDF today! | Beware the 11 hard truths about HTML5. | Keep up with the latest developer news with InfoWorld's Developer World newsletter. ]
Of course, we all know this vision arose long before the HTML5 buzz. It's just taken us a long time to realize the dream the original creators of JavaScript laid out, in which all Web pages would be interactive apps. And the techniques in use are a blend of the new and those that existed long before the HTML5 standard became big. The result are apps, and suites of apps, that offer most of the functionality a business could want.
Here's a look at how seven powerful apps are implementing the HTML5 vision and how one high-profile detractor lost its love for the Web's next big thing. All provide insights on how to make the most of HTML5, JavaScript, and CSS, while avoiding the hard truths of relying on Web technologies to deliver your treasured app to your users.
Exemplary HTML5 app No. 1: Zoho
There are at least 33 apps in the Zoho collection. Some are basic productivity apps, like a word processor, and others, like the Zoho CRM app, are more akin to structured databases for storing information about customers, users, and clients. Zoho has wisely found a way to work with Google Apps, so you can use the best of both collections.
Zoho's tools rely on many parts of the HTML5 specification, but less than you might expect. The editing tools do much of the layout work with carefully designed CSS rules. The editing logic is all handled by Zoho's code, and I couldn't find the new HTML5 contentEditable tag in any of the documents I tried. If the feature set is complex, it can be easier not to trust the browser to handle the editing.
Several Zoho apps open up databases using either the local storage or session storage API. They can push key/value pairs for later reuse.
Other parts of the HTML5 tool set are obvious. The form builder lets you drag and drop elements into place. The data, though, seems to be using its own internal hooks instead of the newer features for form validation.
Exemplary HTML5 app No. 2: Google Docs
They started simply, but Google Docs and Google Drive are doing almost all we need to do. For me, the defining moment came when I edited a document concurrently with someone on the other end of a phone. Our changes flowed between us and the work was done. Google Docs does not offer as many features as Microsoft Office does, but its integration with Gmail makes getting started with Google's online Office alternative a snap.
The bulk of the applications seem to use basic HTML for all of their work. The tables, texts, and figures are laid out with HTML, and mouse-clicks drive the action. The local storage is allocated, but there weren't many key/value pairs I could find in my browser's local database after extensive use.
Google is said to build many of its Web-based tools with Google Web Toolkit, a Java-based mechanism that translates all of the Java into JavaScript. It is well-tuned to work with many browsers, including some from previous generations. It may be some time before Google starts relying more on HTML5. This is a bit ironic given that Google's Chrome often reports one of the best scores on HTML5Test, a compliance-checking website.
Exemplary HTML5 app No. 3: HTML5 slide apps
There are more than a half-dozen HTML5 libraries for building slide decks in HTML instead of PowerPoint, including Presentation.js, Impress.js, Fathom.js, reveal.js, and CSSS. The images and text swoop and swirl around the screen, making ordinary PowerPoint slides look boring and last century. If your audience is still asleep afterward, it will be your fault.
The core of the program uses basic HTML to lay out your slides in DIVs given absolute coordinates. As you page through the program, it will use WebKit transforms to change the viewpoint of these DIVs by panning, twisting, turning, or even rotating in 3D. All of the new HTML5 additions to the CSS layout engine and the canvas object are available for use in designing your slides.
The approach is surprisingly simple for something that looks very impressive. If you can code your message in HTML using the standard fonts and tags, the JavaScript will do the rest.
Exemplary HTML5 app No. 4: Aviary
Creating a good text editor in JavaScript and HTML is a challenge, but creating a photo editor is even more impressive. Many of the important tools for fixing photos are available as buttons for an application that just runs in your browser. Photoshop might cost hundreds of dollars, but Aviary does most of what the average person wants for next to nothing. (Test it here.)
Aviary uses HTML5's Canvas object, a surprisingly complicated addition to HTML. The standard offers the basic ways of drawing text or lines, and a number of Web apps use these features to draw graphs. But underneath all that is a large collection of tools for working with individual pixels. This is what Aviary uses for some of the fancier enhancements.
Exemplary HTML5 app No. 5: Scribd
Scribd began as an elaborate Flash application for displaying documents. Its goal was to become the leading repository for documents on the Web, and only Flash gave it the font support and precise placement necessary to render accurately the wide range of documents the world has produced.
Two major features made it possible for Scribd to duplicate much of this with HTML5: Web fonts and canvas. Web font enhancements have made it possible for Scribd to better capture fonts used in documents. Until recently, most browsers only had access to a few basic examples of a serif, sans serif, or monospaced font.
The improved HTML5 canvas enables Scribd to draw these letters and other bitmaps at arbitrary positions on the screen. Scribd's HTML5 version is now simpler because the incompatibilities caused by having to use the Flash plug-in are out of the loop. The other features of the browser also work with the documents -- which wouldn't happen when relying on the Flash plug-in. You can, for instance, select sentences or words directly with mouse clicks. VoilA . Complex documents are now treated just like regular websites.
Exemplary HTML5 app No. 6: HootSuite
When the group at HootSuite started to build a platform to knit together all of the social networks in our lives, it recognized that HTML5 was a natural platform. HootSuite would use the Web to aggregate the Web. The resulting tool allows you to watch all of your social networks in one central website, a feature that HootSuite gives away to light users and sells to enterprise and corporate users.
HootSuite's servers collect all your social networking data after using OAuth authentication to connect to your social accounts. The servers feed this to your browser using AJAX calls, and the browser layout does the rest.
The Web app uses HTML5's local storage key/value database extensively to cache information and limit the amount of Web traffic. This is most useful for mobile users or anyone who happens to be on a metered plan for connecting to the Internet.
Exemplary HTML5 app No. 7: Angry Birds
We know it and love it as an app for your iPad, but you can get a copy of Angry Birds from Google Chrome and run it on your desktop in a browser. There are even skyscraper ads right alongside the game just like a regular website. Now you can goof off with your browser just as you would with your smartphone.
The souped-up HTML5 Canvas tag and its many drawing operations lies at the heart of Angry Birds, as with many other HTML5 games, like the Atari Arcade built by Microsoft. The routines give programmers all they need to draw the artwork for the game. Many of the old libraries (such as the physics library) at the core of Angry Birds that were built for Flash are being rewritten to support HTML5 applications drawing on the canvas.
Getting Flash out of the loop promises to eliminate all of the glitches that appeared when the Flash plug-in and the browser couldn't get along.
HTML5 cautionary tale: Facebook mobile app
Not everyone is smitten with the HTML5 path. Some who invested heavily inHTML5 are backing away. Facebook CEO Mark Zuckerberg called it a big strategic mistake to create Facebook's mobile products with HTML5. The solutions worked, but they were sluggish and glitchy because the browsers just weren't fast enough to handle all of the data. Native apps are much better at limiting the memory footprint, and that's often the most important limitation for a programmer working on the mobile platform.
Fans of HTML5 acknowledge these complaints, but it's not like native apps are perfect, easy to write, and portable. The solution, they suggest, is to keep your aspirations in check and use the best of the new features. Don't try to display a bazillion triangles in a first-person shooter that runs in your browser. Work with the new tags and back-end enhancements like the local database. Start with a simple editor and build slowly. The advantage of HTML5 is that you can roll out new features one at a time without asking the user to go through all of the grief of upgrading.
