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

Post per Mozilla.cat

Hackasaurus, eines per a aprendre com es fa la web oberta

El llenguatge de marcat d'hipertext o HTML, un dels pilars tècnics fonamentals amb el que està feta la Web que podem navegar des dels nostres ordinadors, és un dels primers llocs per on hauria de començar a aprendre qualsevol persona que vulgui esdevenir un veritable creador de continguts a Internet. Parlem d'una competència TIC tan bàsica, segons es miri, com la d'enviar missatges de correu o manegar un programari d'edició d'imatges. D'uns coneixements que doten de veritable autonomia per a la creació i modificació de pàgines, permetent que l'usuari vagi més enllà de la utilització d'eines ja fetes i pugui manegar amb infinites possibilitats creatives el codi primigeni amb que en Tim Berners-Lee va donar peu a principis dels 90 al que avui coneixem com la World Wide Web.

És per aquest motiu que Mozilla considera com una de les seves prioritats actuals, dins del ventall d'altres iniciatives que ajudin a defensar i reforçar la Web oberta a través del projecte [Drumbeat], que es fomenti tota una sèrie d'eines i metodologies per a l'aprenentatge de com estan fetes les pàgines web. Es tracta de permetre que sota la mateixa filosofia i principis que guien el programari lliure, de transparència i cooperació, els nois i noies a partir dels 10 anys puguin ja comprendre i manegar per mitjà de petites tasques i de manera lúdica aquest llenguatge de gran potencial creatiu. No amb la intenció que de grans siguin totes/es dissenyadors o un altre tipus de professionals vinculats a la Web (tot i que representi una via d'especialització gens desestimable actualment) sinó per sobre de tot per a que descobreixin i aprenguin de manera activa com estan fetes les coses que visiten cada dia amb el navegador, i alhora desenvolupin habilitats i processos cognitius de la manera que proposen teories pedagògiques com el Construccionisme, sota les que s'han desenvolupat projectes com ara el Logo o l'Scratch.

• Breu resum tècnic de les 3 eines i ses possibilitats
• Parlar del hacking i del jam també, com a conceptes importants
• Mencionar el que han fet des de NYCL i el primer test al Citilab
• Esbossar properes passes / plans

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)
• Televall (september)
• Golferichs (mid september, to be confirmed)