iRadar: 15 Sites That Do Amazing Things With HTML5

Thursday, December 02, 2010

15 Sites That Do Amazing Things With HTML5

15 Sites That Do Amazing Things With HTML5: "

what is html5 The forthcoming HTML5 update to the 20 year old HyperText Markup Language promises to bring the “web” experience to a whole new level, allowing the browser to do more from both a visual and data perspective. Even though HTML5 is still a good distance away from being fully deployed, that hasn’t stopped many developers from pushing it to the limits.

Check out these amazing websites which really give you a good idea as to the capabilities of HTML5 as a programming language, doing things in your web browser that were once only possible in an external program or plugin. I’ve tested them in Chrome and they should all work in an HTML5 compliant browser such as Chrome, Firefox 4, Safari or IE9. They are demos and HTML5 is still a work in progress, so if you have problems viewing them you might want to try in another browser. Enjoy!

Arcade Fire – The Wilderness Downtown

what is html5

This is a great demo done by Arcade Fire and Google which feature different HTML5 Canvas tricks. I don’t want to spoil the surprise for you – enter your childhood address and enjoy the video and technical wizardry.

WebVenture

dive into html5

WebVenture is an HTML5 and Javascript implementation of the MacVenture gaming platform. You can now play Deja Vu 1 & 2, Shadowgate and Uninvited right in your browser! Other game implementations such as Wolfenstein 3D are being worked on, bringing gaming into your browser.

20 Things I Learned About Browsers And The Web

dive into html5

This site from Google demos a “book” styled approach to a description about how web browsers work and how many of the underlying technologies work. Impressive from a technical standpoint, it also is a good primer for readers who would like to know more about how the web works.

Collaborative Drawing

dive into html5

This demo uses the HTML5 websockets feature to allow viewers to collaboratively – at the same time – draw on the canvas.

SketchPad

html5 tutorial

SketchPad is a “paint” program for the web. It supports rudimentary drawing instruments and is done only in HTML5 and JavaScript.

Galactic Plunder

html5 tutorial

Galactic Plunder is a 2D Space Shooter implemented in HTML5. Not quite as feature filled as a normal side scrolling shooter, it is done entirely in HTML5 which is impressive in itself.

Video Effects

html5 tutorial

HTML5 allows you to to much with video on the web. In addition to letting you play it without your web browser, with no plugin, it allows you to manipulate that video. This demo shows how you can “Blow up” the pixels of a video while playing.

Multiple Window Ball

This demonstrates and effect also seen in the Arcade Fire video. HTML5 allows you to open multiple windows and have objects move between them.

HTML5Rocks (Google)

HTML5 Rocks is a slideshow which demonstrates many of the special features of the HTML5 language. If you are a developer it gives you sample code and lets you see the possibilities of HTML5.

8-bit Color Cycling (Like Old School Games)

If you were a gamer in the early 90s you will remember this effect fondly. Since computational power was limited, graphic designers used ‘tricks’ to emulate video in a static image. This canvas effect will show you how it was done and also includes many examples which are beautiful as well.

HTML5 Experiments from Hakim.se

This site lists many demos of games and other neat little gadgets to show off what you can do with HTML5. Good for inspiration and maybe a little time diversion.

Harmony

Harmony is a neat little drawing program that lets you use cool brushes to paint a picture. You can create things such as “fur” and “web” which are just cool to see in creation.

Twitter/Music Mashup

This neat mashup from @9elements pits music and rotating dots with twitter posts about HTML5. Hard to describe in practice, must be seen to understand!

Radiohead/HTML5 Mashup

Another neat mashup which pits Radiohead’s Idioteque with a drawing of Thom Yorke which is drawn as the song progresses. Another “seen to be believed” effect.

Want More?

HTML5Demos / CanvasDemos

what is html5

These two websites are set up to give views a wide variety of demos of HTML5 and the HTML5 Canvas effects. Ranging from the mundane to the “cool”, if you are thirsty for more these are the places to go.

There are many demos of HTML5 out there on the internet now – and it is well on its way to becoming the new standard of the web. Do you have awesome demos you would like to share? Please post in the comments below!

Got Questions? Ask Them Now FREE on MakeUseOf Answers!