Design Challenge Tutorials

Over the last two weeks, I gave two tutorials to our Design Challenge students.

The first was called Engineering Prototypes, and centers on the most challenging part of working on prototypes for me, which is the balance between expediency of implementation and robustness. Prototyping involves prioritizing the former over the latter, but it’s unwise to throw engineering principles out the door: for instance, a prototype that constantly crashes or runs slowly may not be usable enough to dogfood, and one whose implementation is poorly designed can be difficult to iterate and evolve. My tutorial attempts to present some of the factors one should take into account to produce prototypes that are both quick to implement and robust enough to dogfood.

The other session was called Prototyping with jQuery but it included a heavy dose of Firebug as well.

For the second session, I created a prototype of something that I’ve wanted to make for a while: Open Web Challenges.

These are essentially a series of interactive web-based problems that require “hacking the page” using real-world tools to solve. They’re inspired by a number of my favorite pedagogical dilemmas, such as the time someone in LambdaMOO made me program my way out of a paper bag; the inventive exercises from Graham Nelson’s Inform Designer’s Manual 4th Edition; the labs from Bryant and O’Hallaron’s Computer Systems: A Programmer’s Perspective; and the mathematical proofs from Carol Schumacher’s Chapter Zero. Obviously, being a one-day hack, these Open Web Challenges pale in comparison, but the prototype was fun to build and I’d like to continue creating more interactive exercises like this.

All in all, I thought the Design Challenge was an awesome opportunity for students around the world to learn more about open-source design and development, as well as a great way for Mozilla folks to get a chance to talk to students, teach, and obtain a better understanding of what we need to do to make the Web as a platform easier to learn. If you’re interested, I recommend checking out the rest of the tutorials at design-challenge.mozilla.com/spring09.

I’d also like to thank Pascal Finette for putting the Design Challenge together—it’s unquestionably a success and I’m looking forward to participating in more Mozilla Education projects in the future.

4 Responses to “Design Challenge Tutorials”

  1. Anonymous Says:

    Great idea!

    For the jQuery puzzles, you might consider either putting an interactive JavaScript console on the page or explaining how to use Firebug as one. I actually found it easiest just to use javascript: urls in the address bar.

  2. Hank Says:

    Hey man! Ubiquity’s in the number 2 spot on digg right now. Congrats!(?)

  3. Mikle Says:

    I like challenges like the Python Challenge and not pron, and I would like to see you continue this one. I recently got into web development, which way more confusing than desktop development (for me at least), and although I decided my first project will be use bare html, css, JS and php to get my hands dirty, I’m sure next time I’ll use frameworks like jQuery and Django.

    Keep us updated on new additions to the challenge :)

  4. Prelude To Barcelona at Toolness Says:

    [...] Open Web—perhaps it will build upon htmlpad.org or the Open Web Challenges that I made for my Design Challenge Tutorials, or maybe it will be something completely [...]