Drumbeat/Hackasaurus

HACKASAURUS 12/7 by Jess Klein and Atul Varma

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”.

Hanging Out

This Web X-Ray Goggles tool that we are developing for inspecting existing web pages and sites allows the user to see all of the elements of code that make up a page. The current prototype is a bookmarklet that can be tested here: https://secure.toolness.com/webxray/

What is functional about this prototype is the overall mechanic of hovering and then reading the description of the page component that you are looking at, however we still need to make some adjustments.

Next Steps: -modifying the colors for tags to make component identification easier -researching measureit, colorzilla addons to see other designing toolkits -rework the “turn on/ turn off” functionality - display transparent message saying “WXVG” axtivated! ESC to deactivate -in overlay, add a brief sentence [hacktionary] to explain tag

Messing Around

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

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 the form 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.

In this prototype we are exploring how remixing code is very similar to magnetic poetry. We could utilize the color coding system developed for the WXVG 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.

We have started to identify some of the grammatical rules: verbs - 'delete', 'replace with html' subjects - css selector adjectives/qualifiers - 'on domain' objects - dependent on verb. can be nothing, or html, or text, etc. clustering as a visual exercise sentences: "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 - consider a gaming aspect here - think about ways to include a mentoring/ hint/ bumper bowling system - think about systems for user to define their own rules - think about social collaborative mentoring - think about social collaborative badging, karma for being helpful, etc. for “standout users”

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, however we are thinking of developing wireframing tools to allow teens to create new interfaces and interactions from scratch. Some initial ideas include 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 awesome.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 (e.g., HTMLPad)

Other ideas: -we should build a glossary! hackslossary - kids building a glossary together

Upcoming milestones

- colorcoded version of web x-ray goggles (wxvg) - first functional protoytpe of the hackasaurus - user test prior to hackfest with kids - NYC Hackfest - Spring - CHI Hackfest- TBD - "Geeking Out" prototypes

Terminology

bookmarklet - pure javascript, can be used on any browser; just injects JS into a web page. examples: x-ray goggles, selectorGadget, instapaper bookmarklet

add-on/extension - browser specific. usually involves JS, but can also involve "proprietary" browser/platform-specific technologies like Microsoft COM, Mozilla XPCOM/XUL, etc. examples: delicious Firefox addon, ubiquity, adblock plus.

content script - a very common kind of add-on that was pioneered by GreaseMonkey. It's a lot like a bookmarklet, but more powerful and more secure; yet it's generally far less powerful than an add-on. can access iframes from other domains on pages, make network requests to other domains, etc.

plug-ins- cross browser, written in C/C++; usually they let you fundamentally extend the web by adding stuff that browsers can't otherwise do. examples: Adobe Flash, Microsoft Silverlight, Adobe Acrobat Reader

karma- in social web environments, a user is termed as having good karma if they behave particularly well. e.g., if a user frequently has insightful comments on blogs.