First off, while the model hasn't varied, the feel of the sites deploying the latest HTML5 features is dramatically more interactive and dynamic. Whereas yesterday's Web offered essentially static displays of data, HTML5 forerunners are serving up dynamic presentations through which the data moves and flows quickly. Relatively small enhancements such as these make all of the difference in speed and sophistication.
HTML5 Deep Dive
Developers continue to report that the tools and libraries for Flash code are substantially better than those for HTML5, but this is changing. The gap will probably narrow, given the major push by the browser makers to cut Adobe out of the loop, but it may be difficult to unseat Adobe, considering the depth and quality of its tools.
The other major differences lie below the surface. The latest browsers offer Web developers a local database for caching several megabytes of material. Most users won't even notice this reliance on the browser for data caching; they'll just feel that some data-centric apps are livelier. The lag from waiting for the Internet is disappearing.
There are many other HTML5 features that make it easier for Web developers to build applications that offer responsiveness on a par with that of native applications. Improved forms, more sophisticated layouts, and richer background work all offer smooth performance that may not be as immediately apparent as dancing sprites on a canvas object but still add up to more usable tools.
Smart designers see HTML5 as a way to create a single design out of basic tags and CSS directives that works well on many different machines and on many different screen real estates. It's never perfect, of course, but it's easier than writing Java for the Android phone, Objective-C for iOS, and an entirely different Objective-C for Mac desktops.
Can HTML5 help the Web supplant native code? Only time will tell, but for now here are 10 Web apps that highlight the best that HTML5 can deliver.
HTML5-optimized app No. 1: TweetDeck
In the beginning, TweetDeck was just a native application. Then the company recognized that Web apps were becoming more common and powerful, and it wanted TweetDeck to remain a leader.
James Whittaker, an architect who helped craft the user experience of the Web version of the product, said that while he knew that moving the application to the Web would be a challenge, the extra features made it possible to design a sophisticated version of the application.
Local storage was among the most valuable additions to HTML5 as far as TweetDeck was concerned. This new feature allows TweetDeck to cache data used for autocompleting forms and account details. This data has traditionally been kept on the server, forcing the user to wait seconds for the latest tweets to kick in.
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."
HTML5-optimized app No. 6: Basecamp Mobile
37Signals is known for building good Web applications that help people organize their work. When the smartphone market came along, the company invested in native applications because it knew people would want to check off tasks with their phone. After hiring a native developer for the iPhone, the company watched Android bloom. Then the team started wondering about the BlackBerry and other phones.
"Eventually we came to the conclusion that we should stick with what we're good at: Web apps," said Jason Fried. "We know the technologies well, we have a great development environment and workflow, we can control the release cycle, and everyone at 37signals can do the work."
As a result, the company's mobile version targets WebKit browsers and delivers most of the slick HTML5 features that the desktop version does in a package that's tuned to the small screen size of smartphones.
HTML5-optimized app No. 7: PhobosLab
"I only used a very small subset of the Canvas API, most important drawImage(), which works almost the same everywhere as far as I can tell," said Dominic Szablewski. "For 2D games there's not much else you need."
Along the way, PhobosLab also fixed a few other issues with the performance of the audio and the way that multitouch events are handled. The company found, for example, that the linkage between the audio and other parts of the program, such as the animation, wasn't consistent across platforms. Szablewski reports that the behavior of audio tags across the various browsers makes it difficult to synchronize sound with events -- an important element when writing games with bouncing balls. He's able to work with single platforms like the iPhone, but he's still not able to count on consistent performance in the wide range of browsers.
"I hope that this solution of reimplementing canvas and audio won't be needed anymore in a year or two, when the iPhone's browser has fixed all these issues," said Szablewski.
HTML5-optimized app No. 8: Walking Man
HTML5-optimized apps No. 9 and 10: Google and Yahoo
If this were a truly fair list of extreme HTML5 projects, it's possible that Google and Yahoo would take up 70 to 90 percent of the entries.
Both Yahoo and Google engineers are major contributors to the HTML5 committees, and both companies continue to develop tools that help drive the standards. An open, capable Web browser helps both companies, and they devote the resources to nurturing it. This slick presentation from Google is just one example of its plans for expanding the power of the browser to drill down into the file system and work with individual bits. Will anyone dream of programming in C after seeing it? I'm not so sure.