HTML5 Gallery » Experimental

Timer Tab

Richard Clark — Wed, 24 Aug 2011 14:20:11 +0000

An interesting little online web app. canvas is used to dynamically generate a favicon that displays the time left until the URL is opened. A manifest file is used so the app can work offline. localStorage is used to store the options.

URL: http://www.timer-tab.com/

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/

Experience Bureau

Derek Johnson — Tue, 23 Nov 2010 21:22:59 +0000

A site by Peter Chappell experimenting with canvas and flickr photos.

Square and traingular masked version of the same image are brought into a canvas element from flickr. They then respond to the movement of the mouse to create a kaleidosope effect. Some new HTML5 elements are used to create the structure of the page, although the validator shows two errors for the val attribute on radio inputs.

URL: http://www.experiencebureau.com/toys/kaleidoscope/

Datagutt’s Blog

Derek Johnson — Tue, 07 Sep 2010 21:00:57 +0000

A small personal blog mostly about the development of the blog itself.

A section element is used to wrap the content which is unnecessary – div would have been a better choice. Other HTML5 elements are used properly to give semantics to the articles. nav could possibly have been used for the pagination.

URL: http://blog.datagutt1.com/

Visualizing the World Cup

Derek Johnson — Fri, 03 Sep 2010 17:00:36 +0000

A personal project by Robert Ivan that displays the winners and runners up of all World Cup tournaments using canvas.

The site has a nice document outline, with the page and sectioning content properly titled using heading (h1-h6) elements. As the graphic could be seen as the main content, there is an argument for putting the “What are we looking at here?” into a footer, and using an aside for the 3 sections on World Cup trivia, and another aside for the browser information; each with nested sections.

URL: http://robertivan.com/WorldCuphtml5.html

Das HTML5-Buch

Derek Johnson — Sat, 21 Aug 2010 17:00:08 +0000

A website promoting a German HTML5 book by web designer and developer Peter Kröner.

The site is very well coded, for example the content of the asides on each page relates to the page content rather than the site as a whole, so they are therefore nested in the content sections. Peter could maybe have used nested sections in the asides to drop their content down a level in the outline so it isn’t at the same level as the main content.

There is also a demo section that includes video, canvas (with animation), drag and drop between two browser windows, and new form input types.

URL: http://html5-buch.de/

Fyvr

Derek Johnson — Sat, 21 Aug 2010 13:00:56 +0000

A web app that combines Amazon, Yahoo! BOSS, and ColourLovers APIs to build an Amazon search engine.

The search results page makes use of the (as yet unsupported) details element along with summary, and the open boolean attribute. On both the homepage and the SERP section is used to wrap content where it could either be left out or replaced with div.

URL: http://fyvr.net/

Cart 543

Derek Johnson — Fri, 20 Aug 2010 21:00:17 +0000

An experimental shopping cart using HTML5 features.

This site seems to work best in Safari, using drag and drop to add to cart, and localStorage to keep a record of order details. As far as new HTML5 elements are concerned, the about section is untitled and the meta charset has not been shortened.

URL: http://www.sourcebits.com/cart543/

Online Shopping List

Derek Johnson — Mon, 21 Jun 2010 21:00:20 +0000

A simple interface that uses web storage to create a shopping list. The missing doctype and charset declarations produce validation errors.

URL: http://www.onlineshoppinglist.org/

html5design.de

Derek Johnson — Thu, 13 May 2010 15:00:51 +0000

An experimental HTML5 document that uses canvas and audio. A couple of script tags have the type attribute, and the article elements should probably be nested section elements. figcaption should be used to describe a figure. The contact info could maybe be in an address element, and I would use section rather than article unless the content makes sense on it’s own out of context.

URL: http://www.html5design.de/