This semester I am taking a Web Application and Development class. I've been hearing about HTML5 for a while now, but I never looked into the details until I took this class. While doing some research for it, I came across a ton of really useful tools and applications, all using HTML5 elements.
The awesome thing about HTML5 is that it has the potential to make developing web applications a lot more consistent across all the different browsers. For a long time, developing web applications required you to test it for the different browsers, and even write separate code for each browser to make sure that it is compatible.
With HTML5, the browser just interprets the HTML and renders the page to you. No extra plugins required, no hassle. Since it's standardised under one umbrella (the
W3C), there are no real differences between how different browsers interpret it.
For example, playing videos (on YouTube, etc) usually requires a Flash plugin. Not only is installing a plugin annoying, but Flash also injects a good dose of horse tranquiliser into your computer (it takes up a lot of processing power is basically what I'm saying). Whereas using the HTML5 video tag takes up a lot less processing power. In addition to that, you can do all sorts of cool editing on the video.
So I thought I will do some link lovin' in this blog post, and share some of the best and most useful HTML5 tools I have come across.
I am mainly linking to apps that I have played around with myself, and things that load in a decent amount of time. For example, the
Ok Go HTML5 video takes eons to load, so I won't really be linking to that (well, okay, I just did, but you can chose to check it out or not).
Also, there are so many HTML5 apps being developed now that my head nearly exploded browsing through them all. Hence, the focus of this post is on HTML5
tools only. I.e. not games and simply entertainment stuff, but online applications which I hope you can make use of.
Let me know in the comments what you tried out and which ones you liked (or didn't like). If you find other cool things, shout out below.
Note that if you are using an old browser, none of these features will work. I recommend the latest versions of
Chrome or
Firefox (Safari is fairly decent too, and IE9 now has HTML5). If it's a little slow to load, please be patient :)
1) deviantArt Muro
______________________________________________________
 |
| Muro |
What better way to start the linkage love than with one of the best HTML5 online drawing tools developed.
I have seen a lot of HTML5-based drawing tools, but
Muro just eats everyone's cake. It's almost like online Photoshop. There are 22 filters to chose from, and you can add multiple layers, as well as do basic things like fill block colours and use the paint brush. Both the "basic" and "pro" versions are available for free.
But for more advanced features, like using brushes and importing your own images, you need to register for a deviantArt account.
2) Finden
______________________________________________________
 |
| Finden |
This uses HTML5, Javascript and the Geolocation API to find and display all the tweets in your area (you can zoom in and out). I wish there was a way to change the location and see the tweets for other locations.
3) Continuous Calender
______________________________________________________
 |
| Continuous Calendar |
This calendar application saved my life mid way though this university semester. I really needed an online application to write down all my deadlines and exam dates, but I hate using Google Calender because, to me it's simply badly designed (too much clutter, too messy and clunky).
This is where Continuous Calendar comes in. It has infinite scrolling, so navigation between each month is incredibly smooth. Also, there is no server side feature, i.e. all your data is stored in your browser, so your data is completely private.
Maybe other people might not like it because of its simplicity and lack of functionality (for example, you cannot share your calendar with other people), but if you are looking for an application to simply plan your daily schedule, then you will like this.
4) Art of Stars
______________________________________________________
 |
| Art of Stars |
This uses geolocation to find where you are, and shows the star constellation directly above you. I am loving all the cool applications based on geolocation.
5) Colorist
______________________________________________________
 |
| Colorist |
Determines the basic color palette from any image that you upload. Useful to generate color palettes for any designs centered on photos.
6) Neon Flames
______________________________________________________
 |
| Neon Flames |
I blogged about this tool
before, but since this post is my full closure on HTML5 tools, I thought to link to it again.
Using this tool, you can draw awesome, gracious-looking flames, and then download the PNG file. Unfortunately you cannot upload your own images and draw on them (yet). But still, pretty cool stuff.
7) Rutt-Etra-Izer
______________________________________________________
 |
| Rutt-Etra-Izer |
You can upload any image you fancy, and this renders the WebGL version of the
Rutt-Etra video synthesiser. You can manipulate the image how you like, and then save it. I am not sure how useful you will find this app, but I loved playing around with it so much that I just had to link to it. And the final product looks wicked cool.
8) Background Generator
______________________________________________________
 |
| Background generator |
This app is bucket loads of awesome. I don't usually make backgrounds for any of my blogs in Photoshop (my background is always white), but I have tried and I find it to be a pain. Especially since I'm a novice when it comes to using Photoshop brushes and creating textures.
This allows you to design Photoshop-esque backgrounds within your browser. You can also enter a URL to preview the background on your website in real-time, without uploading it to your server.
Design some of those subtle noise, wood, and other "web3.0" backgrounds in a breeze. Select a texture to combine with the gradient. Then apply it to your website by generating the CSS code, or just saving the image.
9) YouTube
______________________________________________________
 |
| YouTube in HTML5 |
Most people don't know that YouTube has an HTML5 version in beta testing. As I mentioned in the introduction, using HTML5 to play videos takes up less processing power, so you might want to try out YouTube in HTML5.
You can switch on the HTML5 version by visiting the link above, and switch it off anytime by visiting the same link. Note that not all of the videos are converted to HTML5, but you can use the advanced search to look for them, or simply add "webm=1" (without quotes) at the end of any search query.
