10 Web apps pushing HTML5 to the limit

HTML5 is breathing new life into Web applications, hinting at major shifts in programming to come.

1 2 3 Page 2
Page 2 of 3

Whittaker also praised many granular enhancements to CSS and HTML, such as gradients that improve the look and feel. HTML5's audio tag has also given TweetDeck "the ability to play the famous TweetDeck chirp when you get updates."

HTML5-optimized app No. 2: Pirates Love Daisies

Grant Skinner is CEO and chief architect of a design firm that once specialized in Flash games. Then Microsoft asked his outfit to create something to show off the promise of HTML5 and the power of Internet Explorer 9. The casual game called Pirates Love Daisies was the result. "Microsoft is really focused on graphics performance. One of our big goals was to build a game that showed off what IE could do," he explained.

The game comes with a button that can turn on and off dust storms, shadows, and "a lot of visual extras that you don't get on other browsers." IE9's tight integration with the graphics card allows it to draw more details on the canvas object at a faster frame rate. It still can't approach a native game, but there's a big increase in visual complexity after pushing the button.

While he praised the performance and the new opportunities, Skinner said his firm had to build a number of tools and libraries that they take for granted when creating Flash games. He also said there were plenty of glitches and the technology was "still maturing."

The audio tag, for example, behaves differently in many browsers, requiring plenty of code to smooth over the inconsistencies. On iOS, with the Safari engine, "you can have one active audio tag. And you can only play it on touch event." Getting the page to make a noise to accompany another event, such as the arrival of new data, is not possible.

HTML5-optimized app No. 3: NakshArt

If you look up in the night sky to see stars, identifying the major constellations is simple with NakshArt. The HTML5-savvy site collects your location and time from the browser, then uses this data to compute what the night sky should look like. NakshArt also stores the information about the night sky in a local database to make the site more responsive on repeat visits.

While all of these features make it much easier to display the stars in the right location, Premkumar Seshadri, president at HCL Technologies, says that HTML5 still feels unfinished. "Canvas elements lag lots of visual features, like 2D line effects," he said. "There is no straightforward way to create dotted lines."

Seshadri says he's built a number of sophisticated libraries on top of the line-drawing primitives. "Once canvas matures like today's Flash, you'll get to see a lot many sophisticated applications," he predicted.

HTML5-optimized app No. 4: Aviary

Does Photoshop still cost hundreds if not thousands of dollars? There are fewer and fewer reasons to buy it because of the burgeoning world of HTML5-based image editors that are following quickly on the heels of the Flash-based tools. If you want to diddle with the pixels and build up images from layers, these HTML5 image editors are hard to distinguish from Photoshop.

A true professional will find that many of the features aren't as powerful or as sophisticated as the high-end product from Adobe, but most of us aren't professionals who watch the pixels so closely. Aviary is just one of several great tools for editing images in an HTML5 canvas object. It's like Photoshop without the price or the installation hassles. It may not have as many features as Photoshop, but it comes with many of the most important ones to suit your needs.

HTML5-optimized app No. 5: Scribd

A document storage site, Scribd now sends out HTML5 versions of documents that don't require Flash. The company started out with Flash because its font support was much better than raw HTML. Now that HTML5 supports many fonts, documents are more likely to look correct. Is it perfect? It looks pretty good, but fonts are one of the hardest elements to get correct.

The look isn't the only advantage. Scribd's HTML5-rendered documents behave more like regular HTML -- because they are HTML. It's possible to cut and paste the letters even if they're plopped at strange angles in weird parts of the canvas object. They're not a drawing or a PDF; they're just letters that react to the mouse. Scribd uses the tagline, "All the world's documents, living online as part of the fabric of the Web."

1 2 3 Page 2
Page 2 of 3
7 inconvenient truths about the hybrid work trend
Shop Tech Products at Amazon