Drumbeat/Hackasaurus

Hackasaurus is a set of tools that we are developing to allow teenagers to closely review, remix and redesign the Web. Currently we are thinking of the project as a scaffolded experience, where teens have the opportunity to engage with the Web by hanging out, messing around and geeking out. This experience is based on the work done by Mizuko Ito et al. in the ethnographic study Kids' Informal Learning with Digital Media.

Hanging Out

Web X-Ray Goggles

We are developing a tool called Web X-Ray Goggles for inspecting existing web pages and sites. This tool allows the user to see all of the elements of code that make up a page.

Here's a four-minute screencast on the inspiration, rationale, and usage of the prototype:

<video controls src="https://secure.toolness.com/webxray/webxray-video-take-2.ogv" type="video/ogg"/>

The actual prototype can be used at secure.toolness.com/webxray/.

Next Steps

• Modify the colors for tags to make component identification easier.
• Rework the activate/deactivate functionality.
• Display a transparent message saying “Web X-Ray Goggles activated! Press ESC to deactivate".
• In the informational overlay, add a brief sentence to explain the meaning of the currently selected tag.

Messing Around

The Messing Around tools allow users to actually engage with the content that they have identified with the WXG. Using the Mixmaster, teens will be able to replace, alter and exchange content on an existing webpage/ site. We have developed two wireframes to explain how we are conceiving of this remixing tool.

Wireframe: Boring Form

The actual "form" here is just a very conventional placeholder. Instead of being a form, the final tool could be a really simple domain-specific language (DSL) that people collaboratively edit on an etherpad, or it could be visualized more as a narrative, or something else entirely. This is mostly just a starting point to give you an idea of what sorts of information people would be providing Hackasaurus, what kinds of skills might be learned from the activity, and potential areas where people could "deep dive" if they really want to geek out.

Some other things being assumed here:

• Once the user clicks "Bust This Hack!", it's either instantly shared to everyone else in the local community (e.g. the library), or it remains private but easily sharing it with the local community is just a click away.

• The user is probably coming here from some sort of welcome or index page that lists available Hacks to try out, with options to edit or clone an existing Hack or create a new one. Wireframes for this haven't been created yet, but it's easy to imagine what such a page might look like.

Wireframe: Magnetic Poetry

In this mock-up we are exploring how remixing code is very similar to magnetic poetry. We could utilize the color coding system developed for the WXG to differentiate grammatical elements. Additionally, thinking of code this way allows for users to define their own rules, rather than defining lines of sequential procedural code. Here, we are thinking about how some users might approach a sentence grammatically, others visually and some might just cluster components together that they will eventually make sense of. With the magnetic poetry mechanic, there is also an element of social collaborative mentoring, where one user might assist another in ultimately developing code.

Grammar

Both of the wireframes above have an implicit sense of grammar. So we've started to identify some of the grammatical components that might make up a hack rule.

Verbs might include delete, replace with html, or change background color.

Subjects could be CSS selectors.

Adjectives or qualifiers might be additional selectors or domain names.

Objects are dependent on the verb being used; they can be nothing, or html, or text, or a color, or something different.

Possible sentences that could be created by kids, whether through a form, magnetic poetry, a DSL, or something else include:

"replace any pages with the html B"

"replace any pages on domain x.y.z with the html B"

"replace any elements matching css selector A with the html B"

"replace any elements matching css selector A on any pages on domain x.y.z with the html B"

"replace <a selection> with <a selection>"

Next Steps

• Develop a functional prototype based on one or more mockups.
• Consider integrating a gaming aspect.
• Think about ways to include a mentoring/hint/bumper-bowling system that isn't as annoying as the MS Paper Clip.
• Think about systems for users to define their own rules.
• Think about social collaborative mentoring.
• Think about social collaborative badging, karma for being helpful, and so forth.

Geeking Out

The highest level of engagement are the “geeking out” tools. These are tools developed for users with a serious interest in web design and development.

This component of the project is in the most nascent form; we're thinking of using wireframing tools to allow teens to create new interfaces and interactions from scratch. This might involve the use of pre-existing tools like OmniGraffle or developing our own tools from scratch.

One initial idea includes developing a "build out" game, where teens use physical cards to trade with other kids, etc. Perhaps you need badges/achievements to be able to trade certain things or make certain kinds of content or code.

We are also tinkering with the idea of developing a super funked-out HTML editor that would allow users to create a brand new page/website from scratch. This might build on some of the HTMLPad work that Atul blogged about in late 2010.

Youth Jam Days

We are developing a series of 1 day and weekend events for kids to user test as well as design parts of the Hackasaurus. The events are going to be designed and run through the New Youth City Learning Network in collaboration with Mozilla. The jams are being developed to be modular so that any teen, parent or organization can replicate the activity on their own. We are currently in the process of developing curriculum to complement the activities. The first jam is scheduled for Spring 2011 in New York.

Scheduled Jams:

• 2/9 @ 4pm, New York Public Library, Grand Concourse (Bronx)
• 2/10 @ 4pm, New York Public Library, 67th St (Manhattan)
• 2/11 @ 3:30PM, NY Public Library, Battery Park City (Manhattan)
• 2/17 @ 4pm, YouMedia, Chicago
• 3/17 @ 4pm, YouMedia, Chicago
• 3/23 @ 4pm, New York Public Libary, Grand Concourse (Bronx)
• 3/24 @ 4pm, New York Public Library, 67th St (Manhattan)
• 3/25 @ 3:30pm, New York Public Library, Battery Park City (Manhattan)

Similar or Related Tools

These could be used as inspiration for the design of Hackasaurus tools, or they could become part of the Hackasaurus toolkit itself.

• Colorzilla (Firefox add-on)
• Measure It (Firefox add-on)
• Platypus (Firefox add-on)
• GreaseMonkey (Firefox add-on)
• Firebug (Firefox add-on)
• Erkie's Ad Destroyer (bookmarklet)
• Westciv's XRAY (bookmarklet)
• ShiftSpace
• Optimizely
• NeoPets HTML Guide
• Smart Girl HTML Tutorial
• Wirify Wireframing Tools
• Webmonkey's HTML cheatsheet

Team Members

• Taylor Bayless, YouMedia
• Jess Klein, New Youth City Learning Network
• Jack Martin, New York Public Library
• Ben Moskowitz, Mozilla
• Rafi Santo, Indiana University
• Chris Shoemaker, New York Public Library
• Atul Varma, Mozilla

Project Pages

• Lighthouse Project Management
• Hackasaurus Website- coming soon