HTML5 Gallery » Web App

Picozu Image Editor

Derek Johnson — Sun, 25 Mar 2012 23:01:04 +0000

Picozu is an online image editor that uses the canvas element and other HTML5 technologies. Appcache is used to store images used in the app’s skin for offline use, and localStorage is used as part of the Facebook integration.

In the markup the menu element would be a good choice for the list of commands used, possibly with toolbar set as the type. There are also a couple of type attributes in the script tags, but other than that a very smart piece of web development.

URL: http://www.picozu.com/editor

CanvasLoader Creator

Derek Johnson — Mon, 19 Mar 2012 21:37:29 +0000

A nice little web app that creates a spinning loading graphic using canvas, with a VML fallback for non-supporting browsers.

The diameter, FPS, speed, colour and other variables can be tweaked to customise the graphic.

In the markup there is a header for a div rather than for sectioning content, and there are opportunities to use input type="email" and input type="color", but overall a nice use of canvas and HTML5 in general.

URL: http://heartcode.robertpataki.com/canvasloader/

dublinbikes2go

Gerard Druiven — Wed, 01 Feb 2012 23:05:37 +0000

A mobile focused (although it works perfectly well on a laptop) web app for finding and using Dublin Bikes, Dublin’s bike sharing scheme.

The site uses HTML5 technologies such as localStorage and offline appcache, as well as the geolocation API, a technology closely related to HTML5.

URL: http://beta.dublinbikes2go.com/

Wispy.me

Gerard Druiven — Fri, 09 Dec 2011 08:00:33 +0000

The application uses the canvas element to create a Wordle-like display of words from a user’s Twitter timeline. The flashcanvas JavaScript library is used for older browser support and the markup makes use of some of the new HTML5 elements such as header, section and nav.

It’s difficult to comment on the JavaScript canvas code that creates the text as it’s been minimised.

URL: http://wispy.me

ComprobantesCBB

Ian Devlin — Sat, 17 Sep 2011 08:00:20 +0000

Online invoice application for Mexico.

The website itself uses HTML5 markup, a hgroup could be used to enclose the grouped h1-h3 elements and the div footer could use the footer element. The forms could also have taken advantage of some of the new input types.

The actual application uses offline storage and the file API, which is good to see.

URL: http://www.comprobantescbb.com/

DNA Model

Derek Johnson — Thu, 30 Jun 2011 23:14:41 +0000

A nice canvas showcase that lets the user perform some customizations of a rotating DNA double helix.

Developer Kasen Lam explains some of the technical hurdles experienced when building the app, “The nucleotides were first created using the createRadialGradient method, however the it would take around 1 -3 seconds to generate the animation, so images were used instead to represent them. Also, to avoid a flickering animation the elements are drawn offscreen and then copied into your onscreen.”

URL: http://sysnetik.com/labs/dna-model/

Endless Mural

Derek Johnson — Thu, 16 Jun 2011 14:00:12 +0000

A web app by Eric Fickes that uses canvas to create shapes and drawings based on users’ mouse gestures. The help section uses a video element.

URL: http://endlessmural.com/

NakshART

Derek Johnson — Wed, 06 Apr 2011 14:00:37 +0000

A nice little web app that uses your location to show you the position of the stars, planets and constellations in the night sky directly above you, and draws them on a canvas.

URL: http://www.nakshart.com/#

Aviary HTML5 Photo Editor

Derek Johnson — Wed, 23 Mar 2011 14:00:46 +0000

An HTML5 follow-up to Aviary’s previous Flash based online photo editor.

The app is very easy to use, and works by loading the images into a canvas where all the image editing is done. There is also embed code so it can be used in third-party websites. A very well presented example of what can be done with HTML5.

URL: http://www.aviary.com/html5builder

iPaint

Derek Johnson — Tue, 08 Mar 2011 18:00:15 +0000

A web app that has similar functions to Microsoft Paint.

iPaint uses the canvas element for the drawing surface in the main app page. The next version could maybe include localStorage so users could come back to a painting, and a manifest file so it works offline.

The non-app pages could also benefit from using new HTML5 elements such as article for each of the comments.

URL: http://www.jswidget.com/