Want to see the future of the web today? We are the presents best innovative HTML5 websites that use the latest internet technology.
Add to the world’s biggest doodle
GlobalDoodle wants you to participate in the creation of the world’s largest communal artwork. With a virtual canvas that stretches to 16,000 square kilometres, there’s plenty of space left to submit your doodle, which you create using the coloured pencils, pens and highlighters provided. You can zoom and pan the map to the area of your choice, and create a location code for saving and sharing your doodle. Although some people are simply using the canvas as a graffiti board to announce their love for a heart-throb or a football team, GlobalDoodle is a commendably ambitious venture that wouldn’t be possible without HTML5.
Explore cities in the form of a cube
Remember those old games where you had to tilt ball bearings through a maze into holes at the end? Google Maps Cube brings the same fun and frustration to your browser, by inviting you to roll a blue marble around cities including NewYork, Tokyo and San Francisco. Along the way you need to perform tasks such as visit certain locations and avoid heavy traffic to proceed to the next level (there are eight in all).
The cube-based presentation makes navigating the streets very tricky, but the game looks great and makes inventive use of HTML5 to display 3D buildings. Apparently, if you can make it to the London level, you can use the Underground network to get around, which sounds like an ingenious touch. You’ll need Chrome to play it.
Learn about the web from an HTML5 book
The Google project ‘20 things I learned about browsers and the web’ is a useful way to introduce net novices to the internet. Presented as a 60-page online book, it covers topics ranging from cloud computing and web apps to browser add-ons and privacy. The attractive HTML5 format makes it easy to flick through the content, which is clearly explained and accompanied by amusing illustrations, many of which are animated, You can share and print individual sections at the click of a button, and there’s a handy recap of the 20 ‘things’ at the end.
Turn your screen into an aquarium
Microsoft’s FishIE Tank is a great demonstration of how HTML5 uses hardware acceleration to produce fast, accurate graphics. Choose to display between one and 1,000 tropical fish and your screen and your monitor will become an animated aquarium, with fish swimming across the screen at up to 60 frames per second.
If you use Chrome, you should also check out the WebGL Aquarium, which makes dazzling use of HTML5. Here you can immerse yourself in a giant marine tank, and try different lighting, viewing angles and bubble effects. You can also set the number of fish swimming around, and include plenty of sharks.
Play an HTML5 version of Solitaire
Solitairey is a beautifully rendered HTML5 version of the popular card (and Windows) game Solitaire. You can choose from 31 varieties of the game, including Baker’s Dozen, Freecell and Pyramid (rules for each one are provided), and select different backgrounds and styles of deck, such as Egyptian.
The animated cards look fantastic, and gameplay is very slick, from moving cards to the correct piles to dealing new ones from the pack. Also, if you get stuck, you can easily restart your game at the click of a button.
Explore European countries by climate
Tour operator Thomson has created an Interactive Climate Map of Europe that helps you decide where to go on holiday based on average weather conditions in a particular month. Just hover your mouse above a city to view details of temperature, hours of sun, humidity and rainfall, and use the calendar and slider bars to filter the results. The angular borders and coastlines look a bit odd, but the HTMLS map is smooth to navigate and offers instant access to useful information.
Watch digital artwork being created
The online artistic community Deviantart recently updated its tree HTML5 drawing application Muro with an innovative feature called Redraw. This records and replays every brush stroke, layer and movement used in the creation of a picture, so you can watch the whole process back afterwards, step by step, and in slow motion. This means you can study other artists’ techniques to improve your own, and produce video tutorials to share. Muro offers a wide range of drawing tools, effects and filters, and is very easy to use.
Use Flickr’s new HTML5 featuresAs revealed in Issue 291’s What’s New Online, Flickr has added a new HTML5 uploader that lets you drag and drop pictures to your account, so they appear online between 20 and 30 per cent faster than before. You can organise images and rotate them, and add titles and descriptions to images as they’re uploading. The uploader currently works in Chrome, Firefox and Safari, with support for Internet Explorer coming soon.
Another new HTML5 feature lets you enhance pictures with the brilliant photo-editing suite Aviary. Just choose ‘Edit photo in Aviary’ from the drop- down Actions menu to get started (you’ll need to give Aviary access to your Flickr account).
For an alternative HTML5 image editor, try Picozu. This lets you upload photos from your hard disk, import them from Facebook, Flickr and Picasa, or start a picture from scratch. You can then apply a huge variety of effects, filters, textures and other artistic tools, and save the result to your computer.
Take part in an interactive story
Created partly by British film director Edgar Wright (Shaun of the Dead), The Random Adventures of Brandon Generator is an HTML5 comic-book adventure that lets you shape the story. In the first episode, you can explore Brandon’s room, leave a message on his laptop, doodle a creature on his desktop notepad and listen to the voicemail that’s been left on his phone. You’ll need to log in using Facebook, Twitter or Windows Live, but nothing is shared without your permission and you can browse other users’ ideas in the online gallery. Four episodes are planned in all, and although the site is designed to promote Internet Explorer 9, it will work in any HTML5 browser.