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

Outreach

Post per Mozilla.cat

Hackasaurus, eines per 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 web, 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 es fa la 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 llenguatges com l'HTML i altres 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.

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines dins del projecte Hackasaurus, desenvolupades molt recentment: les ulleres de raigs X [cal link en català] (per veure i remenar el codi rera qualsevol plana web), l'htmlpad (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un llibre de hacks (que mostra tot el que es pot dissenyar amb HTML i fer-ho fàcil de replicar). Aquestes eines i llur combinació amb finalitats pedagògiques [cal link en català] s'estan testejant actualment en una sèrie de primeres proves que al voltant del concepte de hack jam o trobada de desenvolupadors, tractant que siguin apropiades amb la màxima llibertat possible per part de nens i nenes per a que siguin ells qui decideixin quines webs volen modificar i com, i ho facin ajudant-se mútuament i tenint la figura docent més com a orientador i facilitador.

En aquest sentit, a banda de les primeres sessions que s'estan duent a terme principalment a Nova York, de la mà del New Youth City Learning Network, el darrer dia 15 de Juliol dins la programació del Tecnoestiu Tecnoestiu del Citilab-Cornellà es fa dur a terme una primera aproximació a la utilitat de l'eina, amb un grup de setze nens i nenes d'entre 10 i 12 anys, provinents del casal de la Fundació Marianao. Durant la sessió, adaptant una guia didàctica ja creada [cal link en català], van passar d'entendre el concepte a través de l'exemple de modificar amb la tècnica del collage una revista, fins a retocar ells mateixos les imatges i textos de diferents planes web com ara Google, la Viquipèdia o de altres entitats, dins de cadascun dels seus navegadors. Posteriorment van poder compartir els resultats entre ells i presentar-los davant una càmera amb les pàgines hackejades de rerafons. Des d'aquest enllaç podeu accedir a una galeria amb alguns dels resultats.

A continuació estem plantejant la celebració de més sessions de prova i introductòries amb altres franges d'edat, amb tot aquest nou sistema d'eines i metodologies que és el Hackasaurus, alhora que localitzant-ho al català progressivament. També la possibilitat d'aplicar-ho en altres contextos formatius com l'universitari, o en dinàmiques d'apropiació més complertes i que posin en joc més competències com ara l'escrita i la d'edició d'imatges amb la col·laboració d'altres institucions i iniciatives actives a la xarxa.

Peça per notícia Citilab

Pendent

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)