Drumbeat/StoneSoup/HTML hacking

Hackasaurus at Tecnoestiu @CitiLab

Today we had a hack jam session at Citilab's Tecnoestiu project, with 16 kids from a summer camp at Fundació Marianao, from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the Hackasaurus X-Ray Googles (more exactly, its Spanish version).

We started by showing them an analogy with "hacking" a paper magazine (pasting some images in a kind of spoof collage) and elicited about what's a hacker, what do they do and how do they look like. This way also testing the kids ability with Google Images and identifying img URLs. Then we went straight to a live demo of Grover as a Google logo, and some other minor but funny changes on the popular search engine.

After that, they just catch the idea and started to look for webpages to hack and images to use. Some ended up "hacking" Wikipedia articles, in a sort of curious form of (unharmful) vandalism. Some others just showed their passion for Barça. Another group tried the Social Security webpage but it had too many rollover imgs as buttons, so they moved to a popular online bank. Some of them loved to deal with details, while some others just hacked a couple of things and started to play online games...

At the end some of they presented their hacks in front of a chroma key, and surprisingly enough, before leaving, the more active ones at the session were asking if they can do that from home, how to share and make those changes permanent and visible for other people.

We'll have videos and pics soon, but here's a screenshot gallery of some of the hacks:

Initial collage as a starter

Grover hacks Google demo

Barça offers the cup at Real Madrid's website

Pocoyo shows up at Justin Bieber's article

Barça theme of Google

Cristiano Patata

Hacking a bank's website

The battle of Harry and Minnie

David Guetta's new image

ToDo list

• Translate to Spanish & Catalan http://hackasaurus.org/goggles.php and what's needed at https://github.com/hackasaurus/webxray
  • Also details for teachers and other facilitators at http://etherpad.mozilla.com:9000/jammin
  • https://wiki.mozilla.org/Drumbeat/Hackasaurus/Roadmap
  • Sketch out localization strategy & implications with Atul
• Consider using http://netfools.com/puzzle/
• Also the missions at https://secure.toolness.com/webxray/missions/
  • Are the missions required for your event? Suggest taking this out of scope.
• Also if possible http://htmlpad.org/ and left text of http://htmlpad.org/test/edit
  • Again: let's co-ordinate on larger localization strategy / implications.
  • The English copy for these pages is being re-written. Will be done by mid-June.
• Organise two Hack jams at July (Citilab & probably Golferichs center) following recommendations from http://jessicaklein.blogspot.com/2011/04/youth-design-jams-101-building-your.html and http://openmatt.wordpress.com/2011/04/26/best-hackasaurus-event-ever/
• Fully document the session (video + wiki) in Catalan/Spanish/English
• Spread the initial results through local channels and educational nodes

Check

• Each Thursday (9pm Barcelona): http://etherpad.mozilla.com:9000/Hackasaurus-community-call
• Also plans at http://etherpad.mozilla.com:9000/Hackasaurus-glroadmap and http://etherpad.mozilla.com:9000/Hackasaurus-eventroadmap

Hack Jams

• Citilab (mid July)
• Golferichs (mid July, to be confirmed)
• Televall (mid July, to be confirmed)