HTML5 Jedi Arena - shaping the web of the future

We live in exciting times: the decline of IE6 (finally :)), the rise of mobile and multi-touch devices, the maturing of web standards, the boom of social networks, better connections and computers are just some of the trends which present us with challenges and opportunities to create web experiences we couldn't even think of a few years ago.

We follow new technologies and web standards closely, and we love experimenting with them. Many of our clients are already experiencing the benefits of these new technologies for their projects. For example, the SilverStripe Mobile Module, used by Metlink Wellington's mobile website, makes use of CSS3 to deliver great graphics at a very fast speed. Our own monitoring tool, Dawn^TM, uses Canvas and tons of Javascript to create a rich user experience.

At SilverStripe, we see the amazing potential of client side technologies and how they will shape the future of the web, so we asked ourselves, how far can we go? This sparked the idea of creating the HTML5 Jedi Arena, a company-internal competition where developers and designers could experiment and demonstrate the new possibilities of HTML5, CSS3, and Javascript.

The rules were simple:

• No server side technologies
• It has to work in a browser (can be any browser)
• Four weeks to create (outside of business hours), ten minutes to present your creation

Four judges with different backgrounds evaluated the projects based on innovation and execution. The prize for best project was a PlayStation 3.

The presentations blew us away! Everyone who participated pushed the boundaries of what's possible from a different angle. From crazy 3D renderers to old-school interfaces, we got a glimpse of what the future holds for us.

Here is a short summary of each project:

Metlink timetable plugin

Developer: Carlos

With this plugin, users can see when their next bus arrives in a convenient Safari toolbar. Carlos used Yahoo! Pipes to get Metlink timetable data and bundled the HTML and Javascript as a Safari extension, using a web database to save user settings in an innovative way of using HTML.

iPad gallery

Designer: David

David created a minimal and elegant iPad app that could be used as an image gallery, particularly useful for presenting design mockups to clients. With a beautiful minimalist interface, he explored different gestures as a way to control the experience on a multi-touch device.

Heightfield (Voxel landscape)

Developer: Hamish

Hamish is already notorious at SilverStripe for his very advanced experiments (mostly safe!), so we weren't surprised that he pushed hardware and software to its limits. Heightfield is a kind of 3d rendering system, using Canvas, that lets you fly over a computer-generated landscape. Pure insanity.

Get the code on github or view a demo (Chrome only.)

iPad CMS

Developer: Julian

Julian explored how SilverStripe CMS could be optimised for the iPad. With nice gestures interfaces, he gave us many insights for our next version of the SilverStripe CMS.

Time to talk

Developer: Luke

Luke loves to travel, but finding the right time to have a chat with his friends around the world is always a boring calculation task. To simplify it, he created a clock using Canvas that tells you the current time in different time zones.

Website composer

Developer: Mark

Mark's kids were having a hard time creating websites, so he developed a super-easy-to-use website composer that lets you simply add features and drag them around on the screen.

Download the code (.zip, 9.9 MB)

Sticky notes

Developer: Phalkunz

Phalkunz revisited the sticky notes app idea to show how elegant and enjoyable a web app can be. Using the latest HMTL5 and CSS3 properties, he managed to put together an app even better than its desktop cousins.

Get the code on github.

Typesetter

Developer: Sam

Typography aficionados know how hard is to set letter spacing of characters on the web. Sam created an app to make words in a sentence with exactly the same width, creating a very nice poster-style typesetting tool.

View a demo.

The old-time TV

Developer: Will

Will used nostalgia as the big theme of his video player app. Instead of sleek and shiny interfaces, he depicted an old-school 1980s video setup, using CSS3 to create a very engaging and real experience.

Get the code on github.

And the winners are...

After a tough discussion amongst the judges, the winners were

• Phalkunz, for overall best project.
• Mark, for best innovation.
• Will, for best execution.

Participation and feedback for the challenge and the projects were extremely positive, and we're looking forward to the next round!

Well done, SilverStripe Jedis. May the force be with you. :)