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

Proposta de piulada: #Hackasaurus [link ves.cat] Eines per aprendre com es fa la Web oberta /cc #espurna

Hackasaurus, eines per aprendre com es fa la Web oberta

El llenguatge d'etiquetatge d'hipertext, o HTML, és un dels pilars tècnics fonamentals amb què està feta la Web que podem navegar des dels nostres ordinadors. Per tant, é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 gestionar un programari d'edició d'imatges. Es tracten 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. En definitiva, que pugui tractar amb infinites possibilitats creatives el codi primigeni amb què en Tim Berners-Lee va donar peu, a principis dels 90, allò 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 mitjançant petites tasques i de manera lúdica llenguatges com l'HTML i altres de gran potencial creatiu. No amb la intenció que de grans esdevinguin dissenyadors o cap altre tipus de professionals vinculats a la xarxa (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 desenvolupades recentment dins del projecte Hackasaurus: les ulleres de Raigs X (per veure i remenar el codi darrere de qualsevol pàgina 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 allò que es pot dissenyar amb l'HTML i fer-ho fàcil de replicar). Aquestes eines i llur combinació amb finalitats pedagògiques (per exemple amb aquesta guia didàctica) s'estan posant a prova actualment en una sèrie de proves inicials que, al voltant del concepte de hack jam o trobada de desenvolupadors, es tracta que puguin ser apropiades amb la màxima llibertat possible per part de nens i nenes per tal 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 del Citilab-Cornellà es va dur a terme una primera aproximació a l'ús 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 pàgines web com ara Google, la Viquipèdia o d'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 rerefons. Des d'aquest enllaç podeu accedir a una galeria amb alguns dels resultats.

A continuació estem plantejant la celebració de més sessions introductòries amb altres franges d'edat gràcies a aquest nou sistema d'eines i metodologies avançades per a l'alfabetització digital que és el Hackasaurus. Al mateix temps, anirem localitzant-ho progressivament al català. També seria interessant la possibilitat d'aplicar-ho en altres contextos formatius, com pot ser l'universitari, o en dinàmiques d'apropiació més complertes i que posin en joc més competències, com ara l'escriptura i l'edició d'imatges, juntament 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)