10 Great HTML5 Experiments and Apps

Very often HTML5 is coined as a successor to its previous version or even to Flash – but HTML5 is more than that. It can not only playback video and audio, but has native support for geolocation, offline storage, drag and drop, etc. In this post, we’ll take a look at some recent web experiments and apps. Please note that you will need a browser that supports HTML5. You can find out which browsers support HTML by visiting caniuse.com

The HTML5 Canvas Collage

This experimental application makes use of HTML5 Canvas element to create collage from a list of images. It works by pulling images from FlickR and when dragged and dropped on the working stage, it creates a new layer. Each layer can then by manipulated in the following ways: move, scale, rotate, move layer up and down, remove layer, change opacity, change blending mode and enable or disable shadow.

Aviary HTML5 Photo Editor

Aviary’s HTML5 Photo Editor is a revolution in quick and easy photo editing. With a few clicks anyone with an internet connection can edit a photo into a beautifully layered piece of art or perform a series of simple touch ups.

HTML5 to-do list

5List is an HTML5 to-do list written in HTML5, CSS3 and JavaScript. It makes use of a bunch of HTMl5 features including localStorage which is a client-side database where data is stored in the users local machine.

Drag and drop image uploader

This HTML5 image uploader is a Mozilla’s attempt to demonstrate HTML5 features supported in Firefox 3.6.  It supports drag and drop image upload from your desktop as well as an offline image editor – it saves your image locally so that you can edit when you’re offline.

Google Pacman

Google released this game as a doodle. It was a statement: what HTML5 can do, and what HTML5 means to Google. You can play this on iPad and other touch devices.

HTML5 Forms

A great tutorial with sample code and demo of the most useful and supported additions that HTMl5 can bring to a form. It covers required form fields, placeholder fields, date-picker and specific fields for email, web and phone.

HumbleFinance

HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis.

HTML5 Slideshow

This Slideshow showcases HTML5’s localStorage and ContentEditable capabilities with a fast, feature-rich and easy to use interface, leveraging CSS3 to enhance aesthetics while keeping the file size small. It supports “auto-saved” content (via localStorage) , arrow key navigation and multiple themes

Muro – Drawing tool

Muro is a pure HTML5 browser-based drawling tool from DeviantArt. It comes in two modes: Basic and Pro, both of which free to use. Muro supports effects, filters, sharpening tools and great brushes – all combined in an intuitive and simple interface to make drawing easier.

Nearby Jobs with Geolocation

This web application automatically detects your location and returns nearby jobs in a Google Map. Please note that this will work with GeoLocation aware browsers only. In most browsers, you will be asked to Share your location before proceeding.

Add Your Comments

  • (will not be published)