Dev Unplugged: HTML5 Contest for Web Developers

  • Article

DevUnplugged

For a past few days, there’s been a mysterious hashtag that’s been floating around on Twitter; #devunplugged. There were a lot tweets from the @IE Twitter account cited this hashtag but folks couldn’t find out why. Well, earlier today, Carter Rabasa and the contest organizers took the wraps off a very cool contest for web developers. That’s right! It’s a contest for web developers to build HTML5 apps! From the site’s description:

dev-unplugged-logo

We believe that HTML5 and related technologies, in conjunction with faster and faster browsers, finally give developers the tools they need to create experiences that are just as vivid, interactive and high-fidelity as what you have come to expect from native applications without the need for plug-ins. We want to see what you can do unplugged. Push HTML5 to its limits and compete for over $40,000 in prizes. The Grand Prize winner will receive $9,000 in cash and a fully-loaded trip with a Golden Ticket to the Future of Web Apps Conference in Las Vegas on June 27th.

If you ever needed an excuse to crank out an HTML5 application that showcases some your web developer awesome-ness, this is it!

The Prizes

The contest organizers have landed on a really impressive set of 9 featured prizes and 9 honourable mentions. The prizes include:

  • $40,000 in total prizes including $9,000 for the Grand Prize.
  • Front page exposure on theFWA.com and beautyoftheweb.com
  • Cool hardware: laptops and slates from Alienware, HP and ASUS
  • An all-expense paid trip to the Future of Web Apps Las Vegas with “golden ticket” VIP access
  • ...and more!

At this point, you might be asking yourself, “OK, so how do I participate?” That’s simple. For the Dev Unplugged contest, there are two categories: Games and Music.

Category: Games

8507_dev_contest_category_games_thumb_77F114E7Everyone loves games. Online, we’re witnessing an explosion of fun and creative HTML5-based games. Don’t believe me? Go check out Make Awesome Web, which (among other things) has a few of examples worth checking out. Much of the momentum behind HTML5-based gaming can be attributed to the amazing JavaScript frameworks/libraries – like EaselJS – that are available to make the process of building these games much simpler.

Here’s the description on this category from the contest organizers:

Ready to unleash the next great tower defense game ? Has your passion for side-scrolling platform games subsided not one bit since the days of Ninja Gaiden ? We’re not looking for the most complicated game, but we are definitely looking for games that are fun and addictive.

And if that wasn’t enough to get you excited, here’s a news flash: Mike Mignola , the creator of Hellboy , has opened-up up a treasure trove of content for developers to use to create their HTML5 game! Smashing bad guys is way more fun when it’s with the Right Hand of Doom, right?

Simple enough. Got an idea for a fun HTML5-based game? Build one and submit it. In other words, GET EXCITED AND MAKE THINGS (with HTML5!).

Category: Music

2804_dev_contest_categories_music1_thumb_29D88FA5When I’m not playing games, I’ve often listening to music. And while – in certain instances – there’s no accounting for taste, I think we can all agree that music provides the rhythm for everyone’s lives.

Ok, so maybe you’re more of a music lover. Do you sometimes stare hypnotized for 30 minutes at the music visualizations in your music player? Have an idea for creating an unbelievable HTML5 website for your band? Have you invented a new instrument that’s perfect for the web? Now’s your chance to show everyone what it means to experience music on the web.

And we’ve teamed-up with AWOLNATION and Ra Ra Riot to provide you with their most popular cuts to get started!

Inspiring stuff, indeed! Time to crank up the creative juices and share your passion for musical artists!

Also, don’t forget to check out the rules for the Dev Unplugged contest. There’s a PDF-based copy of the official rules for Dev Unplugged contest is here. That stated, for submissions, the organizers provided some high-level rules in a manner that web developers will appreciate:

  1. No Plugins: The submission must stick to HTML/CSS/JS on the client-side (no restrictions on the server-side)
  2. Same Markup: The submission has to work across IE9 RC, Chrome Beta and Firefox Beta.
  3. Making the Web Native: The submission must be amazing! We will be keeping an eye out for submissions that push the envelope and blur the line between a web app and a native app.

HTML5 Resources

The good news is that there is a ton of resources and/or sites to help inspire or guide you through the process of building an HTML5 application for the Dev Unplugged contest. That stated, I’ve decided to include a few here to help get you started.

First things first, when it comes to Internet Explorer 9, you really should check out the Internet Explorer 9 Guide for Developers. It’s a fantastic resource to review what’s new for web developers.

For examples that leverage HTML5, make sure to check out Make Awesome Web. It’s… well, awesome! Also, there’s some foundational stuff like the HTML5 Boilerplate and, to take it a step further, Initializr. From the site: “Initializr will generate for you a clean customizable template based on Boilerplate with just what you need to start.”

HTML5HTML5 Resources: Games

For most HTML5 games, you’ll typically leverage the HTML5 canvas element, HTML5 audio, and any number of JavaScript libraries. Here are a few worth checking out:

  • Canvas Demos - Applications, games, tools and tutorials for the HTML5 canvas element
  • EaselJS - JavaScript library for working with the HTML5 canvas element
  • gury - HTML5 canvas utility library
  • Raphaël - JavaScript library that helps you work with vector graphics
  • Rocket Engine - HTML5 and JavaScript game engine
  • Impact - HTML5 canvas and JavaScript game engine
  • Crafty - JavaScript game engine
  • LimeJS - HTML5 game framework
  • jsGameSoup – JavaScript game library (with HTML5)
  • gameQuery – JavaScript game engine with jQuery
  • ... and many more!

I would also strongly recommend that you listen to Grant Skinner’s interview on .NET Rocks! for some background on building games with HTML5. During this interview, Grant also provides some details in things to consider and watch out for when building HTML5 games.

HTML5 Resources: Music

Video and audio to the max, eh? And, a little use of the HTML5 canvas tag may not hurt too. Oh, and CSS. For visually-appealing HTML5 applications that highlight musical artists, there’s a lot to consider. Here are a few sites and resources worth checking out:

  • Font Squirrel - for all your font-y goodness
  • Modernizr - JavaScript library that facilitates feature detection and simplifies (in some respects) your mark-up and styles
  • jPlayer - HTML5 audio & video for jQuery
  • SublimeVideo - HTML5 video player
  • MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims
  • audiolib.js - Audio tools library for JavaScript
  • ... and many more!

Looking for books? If you’re just getting started, I’d highly recommend Introducing HTML5 by Bruce Lawson and Remy Sharp. It’s excellent. Otherwise, check out titles like HTML5 for Web Designers, CSS3 for Web Designers, and many others.

IMPORTANT! You will have until May 8, 2011, 11:59 PM Eastern to submit your entry for the Dev Unplugged contest. Here are some of the key dates:

  • Submit your App idea: March 1 to May 8
  • View entries in the Gallery: April 5 to May
  • Top 40 Finalist Gallery update: May 12-22
  • View the winners: on or around May 23

You can learn more about Dev Unplugged at www.beautyoftheweb.com/dev/unplugged. Also, don’t forget to follow the fine folks from the IE team on Twitter (@IE) and the #devunplugged hashtag for the latest information and updates about the contest.