7 apps making the most of HTML5

Full-fledged Web apps are proving the power of HTML5, CSS, and JavaScript and providing great examples of how best to use the latest scripts and tags

Page 2 of 4

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.

| 1 2 3 4 Page 2