HTML5 Gallery » Web App

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 — 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/

Dooity

Derek Johnson — Tue, 08 Mar 2011 14:00:11 +0000

A to-do list web app that utilizes a raft of HTML5 features and related technologies. localStorage, offline caching, CODR, SVG and canvas are all used in the application.

URL: http://www.dooity.com/

How To Get My Ex Back

Ian — Tue, 22 Feb 2011 10:00:20 +0000

Social application allowing people to share, give and learn advice on how to get an ex back.

The main h1 is contained within a header along with the nav. The main content is then contained within a section, and the h2 and h3 elements here could be grouped within a hgroup element.

The small element could have been used to enclose the copyright information, and remember that the script element no longer requires the type attribute.

URL: http://www.htgmeb.com