Last week, the future of the web got a logo. Just another reminder that, love it or hate it, HTML5 is here to stay and it IS the new standard. We’ve done some cool round-ups on here before that give several great examples of new sites made with HTML5. Instead of a repeat performance I thought I’d hunt down a few examples that are a bit out there on the edges, showing off some of the cool new things you can do with HTML5. A few of them have been around for a while but I’ve made sure to include a few new ones too. And some that, though subtle, show a keen use of design given some new native abilities.
I hope you enjoy the inspiration. The web is waiting for you to make it awesome!
The Wilderness Downtown by Google & The Arcade Fire
Ever wanted your life to be featured in one of your favorite band’s music videos? Thanks to HTML5, that experience is not only possible, but it’s native to your browser. Head on over to The Wilderness Downtown and type in the address of the home you grew up in. Then, watch as Google Maps and Chris Milk (the video’s director) take you on an impressive journey through your past with a soundtrack by The Arcade Fire.
Jolicloud
This slick little OS is Linux based and makes no bones about cutting out everything in your way when it comes to accessing the apps you want – whether they be web or native.
Wordmark.it
Want to see how a word or phrase looks in every font on your computer in a slightly better layout than a drop-down menu? Well, here it is. Check it out!
Z-Type
Where was this game at when I was in grade school and learning to type? Seriously, if you can tear yourself away from this game before “wave 10″ then you are a stronger person than I. Z-type uses HTML5 Canvas, Audio, Javascript, and a space invaders/asteroids theme to incentivize typing quickly and correctly. Go ahead, give it a go!
Nike Better World
Who says something has to be flashy (pun intended) and in your face to be siiiiick? Not Nike, because this beautifully subtle site shows how HTML5 can bring native beauty to a whole new level. Head on over and give it a scroll.
Klowdz
The newest and arguably best way to prove what you see when you look at the sky is to draw it on this HTML5 canvas created by the folks over at Klowdz. You can even buy prints of your own work! They’re also saying that soon they will create a “battle” section where you can face off against your friends in endless contests of who is the most right-brained.
Canvas Cycle
Another cool Chrome Experiment, Canvas Cycle is like having an editing panel on your super nintendo. You can pick from a number of different 8-bit scenes and control the audio, zoom, cycle speed (on the water/audio), cycle type, and of course – the color.
GraphyCalc
This is an HTML5 built 3d calculator that actually allows you to explore a 3d function by rotating the graph with your mouse. What else is there to say? Give it a whirl!
Google Maps + Dynamic Canvas
This mashup has me geeking out more than all of the other examples. Why? Because Google Maps provides an API that allows you to create custom overlays using HTML5 Canvas. The most exciting part about this example is that the possibilities I can image are seemingly infinite and useful. This particular overlay shows how many bicycles are available for hire at London Cycle hire stationsvia data provided by the Boris Bikes API.
Darkroom
This web app allows you to pull up pictures from various web services like flickr and edit/save them using some basic but powerful editing tools.
20 Things
As part of their ongoing support campaign for HTML5, Google made this nifty ebook called “20 Things I Learned About Browsers & The Web” using – you guessed it – HTML5. It’s a clean site, er, book, with smooth animations and a very handy table of contents page/dock.
Agent 8-Ball
I don’t play games online a whole lot, but this one scores points for a nice design and flash free implementation. Isn’t it nice to know that when you do want to play a compulsory game every now and then that the flash plug-in your running won’t crash your browser?
Bonus!
Apple launched the HTML5 version of their site!
Sources
www.html5gallery.com
www.chromeexperiments.com
Gisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS Brazil. Twitter: @gismullr