Drumbeat/StoneSoup/HTML hacking

From MozillaWiki
Jump to: navigation, search

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.

What went well :D

  • The initial approach with the hack/collage on the paper magazine (see pic below): it gave the kids a clear idea of what we were going to try afterwards, digitally.
  • Eliciting about what's a hacker and searching images of that: right after some of their answers we moved to the task of searching pics related to 'hacker' with Google Images, what was very useful for showing them the unique URLs of images as something they would need for the exercise.
  • Working in couples: each team was able to decide which page to hack and to solve the tasks of changing images and text quite easily, with only a few needing intense help with that.
  • They got the idea and feeling of hacking webs: although we told them that we were not changing things for real, apart from their browsers, many of them asked how to do it from home and what else was needed for making "real" hacks.

What didn't go so well :(

  • Technical problems when reloading the page: some lost their hacks even twice. Although we told them not to reload the page, when installing and uninstalling the goggles they pressed a link and then could not go back to what they were doing. A kind of special back button or automatic saving of the code would help with that.
  • A few lost interest after the first hack: which on average was fine, but if the activity were longer and with more tasks there could have been more of them (and somehow for future occasions we have to consider what to tell them to do right after that). Even the prize stuff was not enough motivational related to that, but maybe we didn't play with it enough.
  • Points of stress with facilitation: there were two of us for 16 kids, but also another occasional two facilitators from their summer camp. Even then, at some points there were 5 or 6 raising hands at the same time and not enough ability for turning the questions to the whole group (since each team was concentrated on their own page). A role of main facilitator or teacher adding some pauses, commuting from one screen to another with the projector, would have help.
  • Finishing the session with more knowledge: about other hackasaurus tools and code notions. On one hand, we didn't have time nor prepared the session for jumping into the htmlpad, which some of the kids would have liked to play with in order to have URLs for sharing their hacks. On the other hand, explaining how HTML and other codes work on the Internet, as well as its basic structure, was also out of scope that day. A couple of nice and fun looking slides for presenting or finishing the session with that may have helped too to make it more complete.

What was more useful ;)

  • Advices for preparing the session: the tips at http://hackasaurus.org/teachers/ gave confidence and a notion of what is important to do in which order. Even if you don't follow them strictly I think works as a guarantee for knowing where to go and what to check before the session.
  • General usability of the Goggles: is a light and easy to understand interface, even translated to Spanish they didn't need to read that much, since the remixing functionality was showed on the main screen and they got the idea really quickly. The most confusing thing was the raw view of code when selecting an element containing many others, but now I see that's elegantly solved with the "Pretty" view (we missed something like this that day!).
  • Preview functionality when remixing an element: above all, I think when they saw changes at the right part of the screen before pressing "Ok", right after dealing with the piece of code, was that "uhm" moment I think is the most important momentum when learning :)

Gallery

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

Initial collage as starter

revista.jpg

Grover hacks Google demo

coco_Google.png

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

hack_madrid.png

Pocoyo shows up at Justin Bieber's article

hack_pocoyo.png

Barça theme of Google

hack_google_cule.png

Cristiano Patata

hack_patata.png

Hacking a bank's website

HACK_ing.png

The battle of Harry and Minnie

hack_potter_minnie.png

David Guetta's new image

hack_guetta.png

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 un 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 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 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 mateixos qui decideixin quines webs volen modificar i com, i ho facin ajudant-se mútuament, tenint la figura docent 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 aquesta guia didàctica en català, van passar d'entendre el concepte de hackejar amb el collage d'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 seves webs 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, per continuar desenvolupant 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 que s'hi vulguin sumar.

Peça per notícia Citilab

Pendent

ToDo list

Check

Hack Jams

  • Citilab (mid July)
  • Televall (september)
  • Golferichs (mid september, to be confirmed)
  • Ravalnet (to be confirmed)
Retrieved from "https://wiki.mozilla.org/index.php?title=Drumbeat/StoneSoup/HTML_hacking&oldid=346802"