Google put together a great web app on how to build web apps

Feb 16, 2012 21:31 GMT  ·  By

HTML5, CSS3, WebGL and so on have the ability to greatly transform the web. But that's no use if no one knows how to use them and what they're capable of. Educating developers is as important as building browser support.

And since developers are flesh and blood just like the rest of us, most of them anyway, so what better way to educate them than via an impressive app that not only looks gorgeous but actually uses all of the technologies that it boasts about.

One such app, put together by the Chrome Developer Relations team, is the Field Guide to Web Applications.

It's designed to look and feel like a book, but everything is built using standard HTML5 and CSS3 features. Granted, it comes with some advanced functionality, like offline support.

"We’ve heard loud and clear from users that they want more and better web apps, and we hope this new field guide will enable you to create those web apps," Google wrote.

"Our fictitious author Bert Appward guides you through topics like the properties of web applications, design fundamentals, tips for creating great experiences, and a few case studies that put best practices to use," it said.

For the aesthetics, the team turned to CSS3 naturally. The app makes ample use of things like box-shadow, opacity, multiple backgrounds and so on.

Interestingly, the app also works online, meaning that you can access it on your phone or tablet, providing they support the features, and have it available even if you don't have a data connection.

This works courtesy of AppCache, an HTML5 feature built to enable developers to run web pages completely offline, or to selectively cache files and resources locally, for faster access.

The entire app is one big HTML page, but the team used the HTML5 History API to ensure that users can continue where they left off if they leave the page and then come back.