MozillaWiki - User contributions [en]

Drumbeat/StoneSoup/HTML hacking/Moodle course

2011-09-06T16:52:12Z

Esenabre: /* Recursos */

'''Títol del curs:''' Hackasaurus a l’aula: com apropiar-se i construir webs
'''Destinataris:''' professorat de primària i secundària
'''Requisits:''' maneig bàsic d’Internet
'''Durada:''' 15 hores

== MÒDUL 0: Presentació ==

=== Treball al fòrum ===

Presentació dels participants i expectatives del curs:

* Qui som? D’on venim? En quins contextos educatius treballem?
* Com treballem la web i les possibilitats de ser creatiu a l’aula?
* Quina experiència com a creadors de continguts tenim? I quina tenen els nostres estudiants?
* Quines webs coneixem i fem servir? Quines els nois/es amb qui treballem?

== MÒDUL 1: Hackejar la web? ==

=== Recursos ===
* L’[http://es.wikipedia.org/wiki/%C3%89tica_hacker ètica hacker] i vocabulari associat
* La competència digital i les possibilitats creatives del codi
* Què és l’[http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language HTML] i estructura bàsica de les [http://ca.wikipedia.org/wiki/P%C3%A0gina_web webs] i l’arquitectura d’[http://ca.wikipedia.org/wiki/Internet Internet]
* Teories d’aprendre fent i [http://ca.wikipedia.org/wiki/Construccionisme construccionistes] ([http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo logo] i [http://ca.wikipedia.org/wiki/Scratch_%28llenguatge_de_programaci%C3%B3%29 Scratch])

=== Fòrum ===
* El concepte de hacker
* Opinió sobre els documents
* Debat usuari versus creador a la Web

=== Tasca ===
* Document de reflexió: quins conceptes és important treballar a l’aula?

== MÒDUL 2: Juguem a canviar-ho tot==

=== Recursos ===
* Història del projecte [http://hackasaurus.org/ Hackasaurus]
* Tutorial de les [http://htmlpad.org/hackasauri/ ulleres de rajos X]

=== Fòrum ===
* Dubtes tècnics, consultes i detecció conjunta de webs a hackejar

=== Tasca ===
* Entrega d’una web hackejada (captura de pantalla)

== MÒDUL 3: Modifiquem una web plegats ==

=== Recursos ===
* Conceptes bàsics d’una plana web: estructura i creació
* [http://htmlpad.org/ HTMLpad], escriptori de webs en temps real
* [http://hackbook.hackasaurus.org/ Hackbook]: llibre d’estil i hacks

=== Fòrum ===
* Coordinació per a la creació d’una web modificada conjunta
* Dubtes tècnics i consultes sobre les eines

=== Tasca ===
Aportacions en alguna part significativa de la web modificada

== MÒDUL 4: Projecte de sessió hacker per a l’aula ==

=== Recursos ===
* La competència digital
* [http://htmlpad.org/profesauri/ Guia per a l’aula]
* [[Drumbeat/StoneSoup/HTML_hacking#Gallery|Exemples de sessions]]

=== Fòrum ===
* Debat sobre l’aplicació didàctica de Hackasaurus

=== Tasca ===
* Unitat didàctica completa on els alumnes hagin de hackejar o fer un web, seguint el currículum oficial i un temari concret

== MÒDUL 5: Mira què hem fet! (opcional) ==

=== Fòrum ===
* Intercanvi de links sobre els projectes dels participants i debat (depèn de dates i durada del curs)

== MÒDUL 6: Avaluació final ==

=== Fòrum ===
* Feedback i debat sobre evolució del curs i aplicació pràctica del que s’ha après.

=== Tasca===
* Document de valoració del que han après, de com usaran l’eina en el futur, opinió del curset, comentaris finals, etc.

Drumbeat/StoneSoup/HTML hacking/Moodle course

2011-09-06T16:50:48Z

Esenabre: /* Recursos */

'''Títol del curs:''' Hackasaurus a l’aula: com apropiar-se i construir webs
'''Destinataris:''' professorat de primària i secundària
'''Requisits:''' maneig bàsic d’Internet
'''Durada:''' 15 hores

== MÒDUL 0: Presentació ==

=== Treball al fòrum ===

Presentació dels participants i expectatives del curs:

* Qui som? D’on venim? En quins contextos educatius treballem?
* Com treballem la web i les possibilitats de ser creatiu a l’aula?
* Quina experiència com a creadors de continguts tenim? I quina tenen els nostres estudiants?
* Quines webs coneixem i fem servir? Quines els nois/es amb qui treballem?

== MÒDUL 1: Hackejar la web? ==

=== Recursos ===
* L’[http://es.wikipedia.org/wiki/%C3%89tica_hacker ètica hacker] i vocabulari associat
* La competència digital i les possibilitats creatives del codi
* Què és l’[http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language HTML] i estructura bàsica de les [http://ca.wikipedia.org/wiki/P%C3%A0gina_web webs] i l’arquitectura d’[http://ca.wikipedia.org/wiki/Internet Internet]
* Teories d’aprendre fent i [http://ca.wikipedia.org/wiki/Construccionisme construccionistes] ([http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo logo] i [http://ca.wikipedia.org/wiki/Scratch_%28llenguatge_de_programaci%C3%B3%29 Scratch])

=== Fòrum ===
* El concepte de hacker
* Opinió sobre els documents
* Debat usuari versus creador a la Web

=== Tasca ===
* Document de reflexió: quins conceptes és important treballar a l’aula?

== MÒDUL 2: Juguem a canviar-ho tot==

=== Recursos ===
* Història del projecte [http://hackasaurus.org/ Hackasaurus]
* Tutorial de les [http://htmlpad.org/hackasauri/ ulleres de rajos X]

=== Fòrum ===
* Dubtes tècnics, consultes i detecció conjunta de webs a hackejar

=== Tasca ===
* Entrega d’una web hackejada (captura de pantalla)

== MÒDUL 3: Modifiquem una web plegats ==

=== Recursos ===
* Conceptes bàsics d’una plana web: estructura i creació
* [http://htmlpad.org/ HTMLpad], escriptori de webs en temps real
* [http://hackbook.hackasaurus.org/ Hackbook]: llibre d’estil i hacks

=== Fòrum ===
* Coordinació per a la creació d’una web modificada conjunta
* Dubtes tècnics i consultes sobre les eines

=== Tasca ===
Aportacions en alguna part significativa de la web modificada

== MÒDUL 4: Projecte de sessió hacker per a l’aula ==

=== Recursos ===
* La competència difital
* Guia per a l’aula
* Exemples de sessions

=== Fòrum ===
* Debat sobre l’aplicació didàctica de Hackasaurus

=== Tasca ===
* Unitat didàctica completa on els alumnes hagin de hackejar o fer un web, seguint el currículum oficial i un temari concret

== MÒDUL 5: Mira què hem fet! (opcional) ==

=== Fòrum ===
* Intercanvi de links sobre els projectes dels participants i debat (depèn de dates i durada del curs)

== MÒDUL 6: Avaluació final ==

=== Fòrum ===
* Feedback i debat sobre evolució del curs i aplicació pràctica del que s’ha après.

=== Tasca===
* Document de valoració del que han après, de com usaran l’eina en el futur, opinió del curset, comentaris finals, etc.

Drumbeat/StoneSoup/HTML hacking/Moodle course

2011-09-06T16:49:56Z

Esenabre: /* Recursos */

'''Títol del curs:''' Hackasaurus a l’aula: com apropiar-se i construir webs
'''Destinataris:''' professorat de primària i secundària
'''Requisits:''' maneig bàsic d’Internet
'''Durada:''' 15 hores

== MÒDUL 0: Presentació ==

=== Treball al fòrum ===

Presentació dels participants i expectatives del curs:

* Qui som? D’on venim? En quins contextos educatius treballem?
* Com treballem la web i les possibilitats de ser creatiu a l’aula?
* Quina experiència com a creadors de continguts tenim? I quina tenen els nostres estudiants?
* Quines webs coneixem i fem servir? Quines els nois/es amb qui treballem?

== MÒDUL 1: Hackejar la web? ==

=== Recursos ===
* L’[http://es.wikipedia.org/wiki/%C3%89tica_hacker ètica hacker] i vocabulari associat
* La competència digital i les possibilitats creatives del codi
* Què és l’[http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language HTML] i estructura bàsica de les [http://ca.wikipedia.org/wiki/P%C3%A0gina_web webs] i l’arquitectura d’[http://ca.wikipedia.org/wiki/Internet Internet]
* Teories d’aprendre fent i [http://ca.wikipedia.org/wiki/Construccionisme construccionistes] ([http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo logo] i [http://ca.wikipedia.org/wiki/Scratch_%28llenguatge_de_programaci%C3%B3%29 Scratch])

=== Fòrum ===
* El concepte de hacker
* Opinió sobre els documents
* Debat usuari versus creador a la Web

=== Tasca ===
* Document de reflexió: quins conceptes és important treballar a l’aula?

== MÒDUL 2: Juguem a canviar-ho tot==

=== Recursos ===
* Història del projecte [http://hackasaurus.org/ Hackasaurus]
* Tutorial de les [http://htmlpad.org/hackasauri/ ulleres de rajos X]

=== Fòrum ===
* Dubtes tècnics, consultes i detecció conjunta de webs a hackejar

=== Tasca ===
* Entrega d’una web hackejada (captura de pantalla)

== MÒDUL 3: Modifiquem una web plegats ==

=== Recursos ===
* Conceptes bàsics d’una plana web: estructura i creació
* HTMLpad, escriptori de webs en temps real
* Hackbook: llibre d’estil i hacks

=== Fòrum ===
* Coordinació per a la creació d’una web modificada conjunta
* Dubtes tècnics i consultes sobre les eines

=== Tasca ===
Aportacions en alguna part significativa de la web modificada

== MÒDUL 4: Projecte de sessió hacker per a l’aula ==

=== Recursos ===
* La competència difital
* Guia per a l’aula
* Exemples de sessions

=== Fòrum ===
* Debat sobre l’aplicació didàctica de Hackasaurus

=== Tasca ===
* Unitat didàctica completa on els alumnes hagin de hackejar o fer un web, seguint el currículum oficial i un temari concret

== MÒDUL 5: Mira què hem fet! (opcional) ==

=== Fòrum ===
* Intercanvi de links sobre els projectes dels participants i debat (depèn de dates i durada del curs)

== MÒDUL 6: Avaluació final ==

=== Fòrum ===
* Feedback i debat sobre evolució del curs i aplicació pràctica del que s’ha après.

=== Tasca===
* Document de valoració del que han après, de com usaran l’eina en el futur, opinió del curset, comentaris finals, etc.

Drumbeat/StoneSoup/HTML hacking/Moodle course

2011-09-06T16:49:06Z

Esenabre: /* Recursos */

'''Títol del curs:''' Hackasaurus a l’aula: com apropiar-se i construir webs
'''Destinataris:''' professorat de primària i secundària
'''Requisits:''' maneig bàsic d’Internet
'''Durada:''' 15 hores

== MÒDUL 0: Presentació ==

=== Treball al fòrum ===

Presentació dels participants i expectatives del curs:

* Qui som? D’on venim? En quins contextos educatius treballem?
* Com treballem la web i les possibilitats de ser creatiu a l’aula?
* Quina experiència com a creadors de continguts tenim? I quina tenen els nostres estudiants?
* Quines webs coneixem i fem servir? Quines els nois/es amb qui treballem?

== MÒDUL 1: Hackejar la web? ==

=== Recursos ===
* L’[http://es.wikipedia.org/wiki/%C3%89tica_hacker ètica hacker] i vocabulari associat
* La competència digital i les possibilitats creatives del codi
* Què és l’[http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language HTML] i estructura bàsica de les [http://ca.wikipedia.org/wiki/P%C3%A0gina_web webs] i l’arquitectura d’[http://ca.wikipedia.org/wiki/Internet Internet]
* Teories d’aprendre fent i [http://ca.wikipedia.org/wiki/Construccionisme construccionistes] ([http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo logo] i [http://ca.wikipedia.org/wiki/Scratch_%28llenguatge_de_programaci%C3%B3%29 Scratch])

=== Fòrum ===
* El concepte de hacker
* Opinió sobre els documents
* Debat usuari versus creador a la Web

=== Tasca ===
* Document de reflexió: quins conceptes és important treballar a l’aula?

== MÒDUL 2: Juguem a canviar-ho tot==

=== Recursos ===
* Història del projecte Hackasaurus
* Tutorial de les ulleres de rajos X

=== Fòrum ===
* Dubtes tècnics, consultes i detecció conjunta de webs a hackejar

=== Tasca ===
* Entrega d’una web hackejada (captura de pantalla)

== MÒDUL 3: Modifiquem una web plegats ==

=== Recursos ===
* Conceptes bàsics d’una plana web: estructura i creació
* HTMLpad, escriptori de webs en temps real
* Hackbook: llibre d’estil i hacks

=== Fòrum ===
* Coordinació per a la creació d’una web modificada conjunta
* Dubtes tècnics i consultes sobre les eines

=== Tasca ===
Aportacions en alguna part significativa de la web modificada

== MÒDUL 4: Projecte de sessió hacker per a l’aula ==

=== Recursos ===
* La competència difital
* Guia per a l’aula
* Exemples de sessions

=== Fòrum ===
* Debat sobre l’aplicació didàctica de Hackasaurus

=== Tasca ===
* Unitat didàctica completa on els alumnes hagin de hackejar o fer un web, seguint el currículum oficial i un temari concret

== MÒDUL 5: Mira què hem fet! (opcional) ==

=== Fòrum ===
* Intercanvi de links sobre els projectes dels participants i debat (depèn de dates i durada del curs)

== MÒDUL 6: Avaluació final ==

=== Fòrum ===
* Feedback i debat sobre evolució del curs i aplicació pràctica del que s’ha après.

=== Tasca===
* Document de valoració del que han après, de com usaran l’eina en el futur, opinió del curset, comentaris finals, etc.

Drumbeat/StoneSoup/HTML hacking

2011-09-06T09:01:03Z

Esenabre: /* ToDo list */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*Translate to Spanish & Catalan <s>http://hackasaurus.org/goggles.php and what's needed at https://github.com/hackasaurus/webxray </s>
** <s>Also details for teachers and other facilitators at http://etherpad.mozilla.com:9000/jammin</s>
** Also http://netfools.com/puzzle/ and http://toolness.github.com/hackasaurus-parable/ and move it to an htmlpad
**''Sketch out localization strategy & implications with Atul''
*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 (<s>Citilab</s> & 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 (underway)
*Spread the initial results through local channels and educational nodes
** Tweets to: @espurna @educacontic @CCCBeducacio @rosasensat
** Teachers course at [[Drumbeat/StoneSoup/HTML_hacking/Moodle course|Moodle]] (for Catalan teachers)

== Check ==

* Each Thursday (9pm Barcelona): http://etherpad.mozilla.com:9000/Hackasaurus-community-call
* Also plans at:
** http://etherpad.mozilla.com:9000/Hackasaurus-glroadmap
** https://wiki.mozilla.org/Drumbeat/Hackasaurus/Roadmap
** http://etherpad.mozilla.com:9000/Hackasaurus-eventroadmap

== Hack Jams ==

* <s>Citilab (mid July)</s>
* Televall (september)
* Golferichs (mid september, to be confirmed)
* Ravalnet (to be confirmed)

Drumbeat/StoneSoup/HTML hacking/Moodle course

2011-09-05T10:53:24Z

Esenabre: Created page with "'''Títol del curs:''' Hackasaurus a l’aula: com apropiar-se i construir webs '''Destinataris:''' professorat de primària i secundària '''Requisits:''' maneig bàsic d’Inte..."

'''Títol del curs:''' Hackasaurus a l’aula: com apropiar-se i construir webs
'''Destinataris:''' professorat de primària i secundària
'''Requisits:''' maneig bàsic d’Internet
'''Durada:''' 15 hores

== MÒDUL 0: Presentació ==

=== Treball al fòrum ===

Presentació dels participants i expectatives del curs:

* Qui som? D’on venim? En quins contextos educatius treballem?
* Com treballem la web i les possibilitats de ser creatiu a l’aula?
* Quina experiència com a creadors de continguts tenim? I quina tenen els nostres estudiants?
* Quines webs coneixem i fem servir? Quines els nois/es amb qui treballem?

== MÒDUL 1: Hackejar la web? ==

=== Recursos ===
* L’ètica hacker i vocabulari associat
* La competència digital i les possibilitats creatives del codi
* Què és l’HTML i estructura bàsica de les webs i l’arquitectura d’Internet
* Teories d’aprendre fent i construccionistes (lego i Scratch)

=== Fòrum ===
* El concepte de hacker
* Opinió sobre els documents
* Debat usuari versus creador a la Web

=== Tasca ===
* Document de reflexió: quins conceptes és important treballar a l’aula?

== MÒDUL 2: Juguem a canviar-ho tot==

=== Recursos ===
* Història del projecte Hackasaurus
* Tutorial de les ulleres de rajos X

=== Fòrum ===
* Dubtes tècnics, consultes i detecció conjunta de webs a hackejar

=== Tasca ===
* Entrega d’una web hackejada (captura de pantalla)

== MÒDUL 3: Modifiquem una web plegats ==

=== Recursos ===
* Conceptes bàsics d’una plana web: estructura i creació
* HTMLpad, escriptori de webs en temps real
* Hackbook: llibre d’estil i hacks

=== Fòrum ===
* Coordinació per a la creació d’una web modificada conjunta
* Dubtes tècnics i consultes sobre les eines

=== Tasca ===
Aportacions en alguna part significativa de la web modificada

== MÒDUL 4: Projecte de sessió hacker per a l’aula ==

=== Recursos ===
* La competència difital
* Guia per a l’aula
* Exemples de sessions

=== Fòrum ===
* Debat sobre l’aplicació didàctica de Hackasaurus

=== Tasca ===
* Unitat didàctica completa on els alumnes hagin de hackejar o fer un web, seguint el currículum oficial i un temari concret

== MÒDUL 5: Mira què hem fet! (opcional) ==

=== Fòrum ===
* Intercanvi de links sobre els projectes dels participants i debat (depèn de dates i durada del curs)

== MÒDUL 6: Avaluació final ==

=== Fòrum ===
* Feedback i debat sobre evolució del curs i aplicació pràctica del que s’ha après.

=== Tasca===
* Document de valoració del que han après, de com usaran l’eina en el futur, opinió del curset, comentaris finals, etc.

Drumbeat/StoneSoup/HTML hacking

2011-09-05T10:43:52Z

Esenabre: /* ToDo list */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*Translate to Spanish & Catalan <s>http://hackasaurus.org/goggles.php and what's needed at https://github.com/hackasaurus/webxray </s>
** <s>Also details for teachers and other facilitators at http://etherpad.mozilla.com:9000/jammin</s>
** Also http://netfools.com/puzzle/ and http://toolness.github.com/hackasaurus-parable/ and move it to an htmlpad
**''Sketch out localization strategy & implications with Atul''
*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 (<s>Citilab</s> & 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 (underway)
*Spread the initial results through local channels and educational nodes
** Tweets to: @espurna @educacontic @CCCBeducacio
** Teachers course at [[Drumbeat/StoneSoup/HTML_hacking/Moodle course|Moodle]] (for Catalan teachers)

== Check ==

* Each Thursday (9pm Barcelona): http://etherpad.mozilla.com:9000/Hackasaurus-community-call
* Also plans at:
** http://etherpad.mozilla.com:9000/Hackasaurus-glroadmap
** https://wiki.mozilla.org/Drumbeat/Hackasaurus/Roadmap
** http://etherpad.mozilla.com:9000/Hackasaurus-eventroadmap

== Hack Jams ==

* <s>Citilab (mid July)</s>
* Televall (september)
* Golferichs (mid september, to be confirmed)
* Ravalnet (to be confirmed)

Drumbeat/StoneSoup/HTML hacking

2011-09-05T10:41:04Z

Esenabre: /* ToDo list */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*Translate to Spanish & Catalan <s>http://hackasaurus.org/goggles.php and what's needed at https://github.com/hackasaurus/webxray </s>
** <s>Also details for teachers and other facilitators at http://etherpad.mozilla.com:9000/jammin</s>
** Also http://netfools.com/puzzle/ and http://toolness.github.com/hackasaurus-parable/ and move it to an htmlpad
**''Sketch out localization strategy & implications with Atul''
*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 (<s>Citilab</s> & 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 (underway)
*Spread the initial results through local channels and educational nodes
** Tweets to: @espurna @educacontic @CCCBeducacio
** Teachers course at Moodle

== Check ==

* Each Thursday (9pm Barcelona): http://etherpad.mozilla.com:9000/Hackasaurus-community-call
* Also plans at:
** http://etherpad.mozilla.com:9000/Hackasaurus-glroadmap
** https://wiki.mozilla.org/Drumbeat/Hackasaurus/Roadmap
** http://etherpad.mozilla.com:9000/Hackasaurus-eventroadmap

== Hack Jams ==

* <s>Citilab (mid July)</s>
* Televall (september)
* Golferichs (mid september, to be confirmed)
* Ravalnet (to be confirmed)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T18:14:49Z

Esenabre: /* Hack Jams */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*Translate to Spanish & Catalan <s>http://hackasaurus.org/goggles.php and what's needed at https://github.com/hackasaurus/webxray </s>
** <s>Also details for teachers and other facilitators at http://etherpad.mozilla.com:9000/jammin</s>
** Also http://netfools.com/puzzle/ and http://toolness.github.com/hackasaurus-parable/ and move it to an htmlpad
**''Sketch out localization strategy & implications with Atul''
*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 (<s>Citilab</s> & 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 (underway)
*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
** https://wiki.mozilla.org/Drumbeat/Hackasaurus/Roadmap
** http://etherpad.mozilla.com:9000/Hackasaurus-eventroadmap

== Hack Jams ==

* <s>Citilab (mid July)</s>
* Televall (september)
* Golferichs (mid september, to be confirmed)
* Ravalnet (to be confirmed)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T18:14:00Z

Esenabre: /* Check */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*Translate to Spanish & Catalan <s>http://hackasaurus.org/goggles.php and what's needed at https://github.com/hackasaurus/webxray </s>
** <s>Also details for teachers and other facilitators at http://etherpad.mozilla.com:9000/jammin</s>
** Also http://netfools.com/puzzle/ and http://toolness.github.com/hackasaurus-parable/ and move it to an htmlpad
**''Sketch out localization strategy & implications with Atul''
*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 (<s>Citilab</s> & 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 (underway)
*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
** https://wiki.mozilla.org/Drumbeat/Hackasaurus/Roadmap
** http://etherpad.mozilla.com:9000/Hackasaurus-eventroadmap

== Hack Jams ==

* Citilab (mid July)
* Televall (september)
* Golferichs (mid september, to be confirmed)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T18:13:02Z

Esenabre: /* ToDo list */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*Translate to Spanish & Catalan <s>http://hackasaurus.org/goggles.php and what's needed at https://github.com/hackasaurus/webxray </s>
** <s>Also details for teachers and other facilitators at http://etherpad.mozilla.com:9000/jammin</s>
** Also http://netfools.com/puzzle/ and http://toolness.github.com/hackasaurus-parable/ and move it to an htmlpad
**''Sketch out localization strategy & implications with Atul''
*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 (<s>Citilab</s> & 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 (underway)
*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)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T17:18:29Z

Esenabre: /* What was more useful ;) */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T17:16:47Z

Esenabre: /* What didn't go so well :( */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 biggest, most important momentum of 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T17:16:03Z

Esenabre: /* What went well :D */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 them, 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 biggest, most important momentum of 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T17:15:41Z

Esenabre: /* What went well :D */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 things''': 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 them, 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 biggest, most important momentum of 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T17:06:27Z

Esenabre: /* What was more useful ;) */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 much help with that.
* '''They got the idea and feeling of hacking things''': 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 them, 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 biggest, most important momentum of 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 ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T16:57:45Z

Esenabre: /* What didn't go so well :( */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 much help with that.
* '''They got the idea and feeling of hacking things''': 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 them, 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
* General usability of the tool
* Preview functionality when remixing an element

=== Gallery ===

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

==== Initial collage as starter ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T16:56:27Z

Esenabre: /* What didn't go so well :( */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 much help with that.
* '''They got the idea and feeling of hacking things''': 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 them, 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.

=== What was more useful ;) ===

* Advices for preparing the session
* General usability of the tool
* Preview functionality when remixing an element

=== Gallery ===

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

==== Initial collage as starter ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-08-04T16:49:33Z

Esenabre:

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 much help with that.
* '''They got the idea and feeling of hacking things''': 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.
* '''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 them.
* '''Points of stress with facilitation''': there were two of us for 16 kids, but also another occasional
* Finishing the session with more knowledge: about other hackasaurus tools and code notions

=== What was more useful ;) ===

* Advices for preparing the session
* General usability of the tool
* Preview functionality when remixing an element

=== Gallery ===

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

==== Initial collage as starter ====

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

====Grover hacks Google demo====

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

==== Pocoyo shows up at Justin Bieber's article ====

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

==== Barça theme of Google====

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

====Cristiano Patata ====

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

==== Hacking a bank's website ====

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

==== The battle of Harry and Minnie ====

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

==== David Guetta's new image ====

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-07-20T08:05:35Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-07-20T08:03:31Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-07-20T08:01:57Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesauri/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 ==

*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)

Drumbeat/StoneSoup/HTML hacking

2011-07-20T07:58:19Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesaurus/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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)

Drumbeat/StoneSoup/HTML hacking

2011-07-20T07:55:58Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesaurus/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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)

Drumbeat/StoneSoup/HTML hacking

2011-07-20T07:55:11Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesaurus/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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)

Drumbeat/StoneSoup/HTML hacking

2011-07-20T07:41:46Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/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 [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, allò que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_obert Web oberta] a través del projecte [https://www.drumbeat.org/ Drumbeat]— és 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines desenvolupades recentment dins del projecte [http://hackasaurus.org/ Hackasaurus]: [http://htmlpad.org/hackasauri/ les ulleres de Raigs X] (per veure i remenar el codi darrere de qualsevol pàgina web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://htmlpad.org/profesauri/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesaurus/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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)

Drumbeat/StoneSoup/HTML hacking

2011-07-19T08:10:00Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/hack_guetta.png

==Outreach==

=== Post per Mozilla.cat ===

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

El llenguatge de marcat d'hipertext o [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, al que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_oberta la Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines dins del projecte [http://hackasaurus.org/ Hackasaurus], desenvolupades molt recentment: [http://hackasaurus.org/goggles/ les ulleres de raigs X] [cal link en català] (per veure i remenar el codi rera qualsevol plana web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesaurus/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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 per a l'alfabetització digital diguem que "avançada" que és el Hackasaurus, alhora que localitzant-ho al català progressivament. També és interessant 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)

Drumbeat/StoneSoup/HTML hacking

2011-07-19T08:06:20Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/hack_guetta.png

==Outreach==

=== Post per Mozilla.cat ===

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

El llenguatge de marcat d'hipertext o [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, al que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_oberta la Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines dins del projecte [http://hackasaurus.org/ Hackasaurus], desenvolupades molt recentment: [http://hackasaurus.org/goggles/ les ulleres de raigs X] [cal link en català] (per veure i remenar el codi rera qualsevol plana web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesaurus/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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)

Drumbeat/StoneSoup/HTML hacking

2011-07-19T08:05:51Z

Esenabre: /* Post per Mozilla.cat */

== Hackasaurus at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years old. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles] (more exactly, its [http://htmlpad.org/hackasaurio/ 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 [http://www.google.com/search?q=hacker&hl=en&client=ubuntu&hs=K95&channel=fs&biw=1760&bih=808&prmd=ivnslb&source=lnms&tbm=isch&ei=AWAgTrztIMyUOu-7jaUD&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CB0Q_AUoAQ 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 ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/hack_guetta.png

==Outreach==

=== Post per Mozilla.cat ===

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

El llenguatge de marcat d'hipertext o [http://ca.wikipedia.org/wiki/Hyper_Text_Markup_Language 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 [http://ca.wikipedia.org/wiki/Tim_Berners-Lee Tim Berners-Lee] va donar peu, a principis dels 90, al que avui coneixem com la [http://ca.wikipedia.org/wiki/World_Wide_Web 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 [http://ca.wikipedia.org/wiki/Web_oberta la Web oberta] a través del projecte [https://www.drumbeat.org/ 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 [http://ca.wikipedia.org/wiki/Programari_lliure 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 [http://ca.wikipedia.org/wiki/Construccionisme Construccionisme], sota les que s'han desenvolupat projectes com ara el [http://ca.wikipedia.org/wiki/Llenguatge_de_programaci%C3%B3_Logo Logo] o l'[http://ca.wikipedia.org/wiki/Scratch_(llenguatge_de_programaci%C3%B3) Scratch].

Concretament, aquests objectius pedagògics es materialitzen de moment en tres noves eines dins del projecte [http://hackasaurus.org/ Hackasaurus], desenvolupades molt recentment: [http://hackasaurus.org/goggles/ les ulleres de raigs X] [cal link en català] (per veure i remenar el codi rera qualsevol plana web), [http://htmlpad.org/ l'htmlpad] (per a crear i pujar al moment i sense necessitat d'FTP una pàgina) i un [http://hackasaurus.org/hackbook/ 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 [http://newyouthcity.com/ New Youth City Learning Network], el darrer dia 15 de Juliol dins la programació del [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu Tecnoestiu] del [http://www.citilab.eu/ 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 [http://marianao.net/ Fundació Marianao]. Durant la sessió, adaptant [http://htmlpad.org/profesaurus/ 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'[https://wiki.mozilla.org/Drumbeat/StoneSoup/HTML_hacking 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)

Drumbeat/StoneSoup/HTML hacking

2011-07-19T06:53:58Z

Esenabre: /* Post per Mozilla.cat */

Drumbeat/StoneSoup/HTML hacking

2011-07-18T17:59:23Z

Esenabre: /* Post per Mozilla.cat */

Drumbeat/StoneSoup/HTML hacking

2011-07-18T17:52:38Z

Esenabre: /* Post per Mozilla.cat */

Drumbeat/StoneSoup/HTML hacking

2011-07-18T17:42:37Z

Esenabre: /* Post per Mozilla.cat */

Drumbeat/StoneSoup/HTML hacking

2011-07-18T08:05:14Z

Esenabre: /* Post per Mozilla.cat */

Drumbeat/StoneSoup/HTML hacking

2011-07-18T08:00:43Z

Esenabre:

Drumbeat/StoneSoup/HTML hacking

2011-07-18T07:54:51Z

Esenabre: /* Post per Mozilla.cat */

Drumbeat/StoneSoup/HTML hacking

2011-07-18T07:52:19Z

Esenabre: /* Post for Mozilla.cat */

Drumbeat/StoneSoup/HTML hacking

2011-07-18T07:51:47Z

Esenabre: /* ToDo list */

Drumbeat/StoneSoup/HTML hacking

2011-07-18T06:49:50Z

Esenabre: /* Hack Jams */

Drumbeat/StoneSoup/HTML hacking

2011-07-16T17:53:42Z

Esenabre: /* Hackasaurus at Tecnoestiu @CitiLab */

Drumbeat/StoneSoup/HTML hacking

2011-07-16T17:52:16Z

Esenabre: /* Hackasaurus at Tecnoestiu @CitiLab */

Drumbeat/StoneSoup/HTML hacking

2011-07-15T15:51:11Z

Esenabre: /* Hackasaurus at Tecnoestiu @CitiLab */

Drumbeat/StoneSoup/HTML hacking

2011-07-15T15:50:13Z

Esenabre: /* Hackasaurus at Tecnoestiu @CitiLab */

Drumbeat/StoneSoup/HTML hacking

2011-07-15T15:27:24Z

Esenabre: /* Hacks at Tecnoestiu @CitiLab */

Drumbeat/StoneSoup/HTML hacking

2011-07-15T15:26:55Z

Esenabre:

== Hacks at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years. They worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles].

We started by seeing first an analogy with "hacking" a paper magazine (pasting some images in a kind of collage) and then went straight to a live demo of Grover as a Google logo and some other minor but funny changes on the popular search engine.

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

=== Initial collage as a starter ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ===

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

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

http://www.estigmergia.net/fotos/hackasaurus/hack_madrid.png

=== Pocoyo shows up at Justin Bieber's article ===

http://www.estigmergia.net/fotos/hackasaurus/hack_pocoyo.png

=== Barça theme of Google ===

http://www.estigmergia.net/fotos/hackasaurus/hack_google_cule.png

=== Cristiano Patata ===

http://www.estigmergia.net/fotos/hackasaurus/hack_patata.png

=== Hacking a bank's website ===

http://www.estigmergia.net/fotos/hackasaurus/HACK_ing.png

=== The battle of Harry and Minnie ===

http://www.estigmergia.net/fotos/hackasaurus/hack_potter_minnie.png

=== David Guetta's new image ===

http://www.estigmergia.net/fotos/hackasaurus/hack_guetta.png

== 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)

Drumbeat/StoneSoup/HTML hacking

2011-07-15T15:19:08Z

Esenabre:

== Hacks at Tecnoestiu @CitiLab ==

Today we had a hack jam session at [http://www.citilab.eu/ Citilab]'s [http://tecnoestiu.projectescitilab.eu/ Tecnoestiu project], with 16 kids from a summer camp at [http://marianao.net/ Fundació Marianao], from 10 to 12 years, who worked in pairs changing images and texts of several webpages using the [http://hackasaurus.org/ Hackasaurus] [http://hackasaurus.org/goggles/ X-Ray Googles]. We started by seeing first an analogy with "hacking" a paper magazine (pasting some images in a kind of collage) and then went straight to a live demo of Grover as a Google logo and some other minor but funny changes on the popular search engine. We'll have videos and pics soon, but here's a short gallery of some of the best hacks (in Spanish still).

=== Initial collage as a starter ===

http://www.estigmergia.net/fotos/hackasaurus/revista.jpg

=== Grover hacks Google demo ==

http://www.estigmergia.net/fotos/hackasaurus/coco_Google.png

== 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)

Drumbeat/StoneSoup

2011-07-05T10:14:04Z

Esenabre: /* ToDo list of the project */

<section begin="summary" />{{RoadmapSummary
|icon=stonesoup.jpg
|pagelocation=Drumbeat/StoneSoup
|pagetitle=StoneSoup Project Page
|owner=Enric, Laia, Alina, Maria, Toni
|updated=April 2011
|status=Draft
|description=Share your activity source code (towards an Open Web learning video-toolkit)
}}<section end="summary" /> __NOTOC__

== What's the StoneSoup concept? ==
<div align="center">
'''Detailed steps''' for new '''Open Web learning activities'''
<big>'''+'''</big>
'''HowTo in video format''' (using [http://popcornjs.org/ popcorn.js] for loading details)
<big>'''+'''</big>
Platform for '''sharing''' tested activities that work and engage
</div>

* '''We're working on our [http://www.mozilla.cat/drumbeat/stonesoup/ 1st video demo!] It's based in the [[Drumbeat/StoneSoup/Write_with_a_satellite|write-with-a-satellite]] and the [[Drumbeat/StoneSoup/Virtual_walkshop|Virtual_walkshop]] activities.''' [http://universalsubtitles.org/en/videos/Aa0w8zkz836s/en/ Subtitled in English here]

* [http://en.wikipedia.org/wiki/Stone_soup More info about the StoneSoup concept origin]
* [[Drumbeat/events/Festival/Barcelona/OpenRaval|Previous experience related to the project]]
* [[Drumbeat/StoneSoup/Minutes|Community call and meetings minutes]]

__TOC__

== Five dance steps ==

# Identify cool Open Web tools (fresh and stable)
# Design new learning activities with them (the open source way)
# Test and document sessions (releasing early & often)
# Publish online (video and documentation on the background)
# Spread the word, invite to test, integrate feedback

== Initial questions ==

* What is happening or can be done in informal learning scenarios when it comes to '''mixing youth and digital tools with Open Web''' resources and philosophy?
* Which type of activities (in terms of '''new practices''') can be shared, tested and defined among different institutions and actors locally, but also worldwide?
* How can youth engage with '''digital resources and collaborative methodologies''' in order to have fun, learn and be creative at the same time?
* When and how can formal learning institutions adopt '''innovative approaches with ICT in scalable ways''', especially secondary schools?
* How can we consolidate and define the benefits of computational, connective and social thinking, as strengthened by the Open Web?
* How to apply in terms of T2T (teacher to teacher) the best '''philosophies of open source collaboration'''? (Release early and often, distributed debugging, commenting code, etc).

All of these questions point to a certain '''lack of shared practices''' among education-oriented institutions when it comes to taking full benefit from significant learning contexts and exploring the possibilities offered by '''networked tools and web-inspired open methodologies'''.

Addressing this gap requires a well defined strategy and map of alliances, as well as a '''practical/open toolkit''' of learning activities (which could be used at any time by anyone) and a rigorous process of observation and independent evaluation (in order to improve design and effectiveness).

A modest, '''initial prototype''' for such a strategic toolkit was created and tested during the last November 2010 [[Drumbeat/events/Festival/Barcelona/OpenRaval|OpenRaval]] meeting, which took place right after the 1st [[Drumbeat Festival]] in Barcelona. We consider this an important starting point for the development of a series of shared practices with similar goals.

Intended audience for these materials is both '''formal and informal learning practitioners''' with an interest in using open web technologies to teach Open Web values. These shared practices would represent a collection of '''curricular modules that could be used singly or together''' to reinforce both Open Web skills and values by learning practitioners.

==Core ideas==

* Internationally-recognized Open Web educational '''video-repository''' for instructors.
* Let's share the idea, steps, instructions, performance, output and feedback (aka "'''source code'''") of innovative learning activities connected to the Open Web. Repository would also act as separate, but connected, node of larger Drumbeat social network.
* "Connected to the Open Web" means using it as a tool for learning: as a primary resource, mechanism of communication and/or final output. Repository would encourage '''open-source approach to modules''' with clear path of additions, remixes to originals.
* Initial '''visual learning emphasis''' to reinforce synergy with other video-based Drumbeat Projects
* Rather than long text with lots of stuff we use '''visual language''', connecting it to '''deeper layers of information''' when needed. Video acts then as a first, easy approach to the activity values.
* Each activity has to be '''tested, videorecorded and published''' online in order to be a part of this modular '''system of video HowTos'''.
* Rather than on high quality, each video focuses in the same sequence of explanations in order to become a standard. '''Lowcost equipments''' should be consider: a handycam, a mic and a easy free software for video editing...
* Builds on notion of YouTube-type '''instructional videos''', but organized for open source instruction.
* For formal education it's really important to connect these activities with the '''different subjects curricula''' (eg: basic competences in secondary schools).

== First modules to share==

These are the first series of modules for a broader '''curriculum of "Open Web" basic skills'''. They should '''work independently or be replicated''' in an structured order of sessions, where are complemented with either code "jams" or other type of instructional sessions.

=== Geolocation ===

# [[Drumbeat/StoneSoup/Write_with_a_satellite|Write With a Satellite]] (using [https://www.drumbeat.org/en-US/projects/maquina-descriure-de-googlemaps/description/ the Cartographic Typewriter] and [https://addons.mozilla.org/es-ES/firefox/addon/pixlr-grabber/ Pixlr Grabber]) | [[Drumbeat/StoneSoup/Escriu_amb_el_món|Catalan version]]
# [[Drumbeat/StoneSoup/Virtual_walkshop|Virtual walkshop]] (using [http://maps.google.com/help/maps/streetview/ Google Street View] and [https://addons.mozilla.org/es-ES/firefox/addon/pixlr-grabber/ Pixlr Grabber])

=== Coding ===

# [[Drumbeat/StoneSoup/Scratch_hacking|Scratch hacking]] (using [http://scratch.mit.edu/Scratch Scratch ])
# [[Drumbeat/StoneSoup/HTML_hacking|HTML hacking]] (using [http://hackasaurus.org/ Hackasaurus tools])

=== Commons ===

# [[Drumbeat/StoneSoup/Digital_gymcana|Digital gymcana]] (using [http://en.wikipedia.org/wiki/QR_code QR codes])
# [[Drumbeat/StoneSoup/Remixing_for_Wikipedia|Wikipedia loves monuments]] (using [http://commons.wikimedia.org/ Wikimedia Commons])

=== Digital narratives ===

# [[Drumbeat/StoneSoup/Your_vision|Your_vision]] (using [http://www.citilabpro.eu/vision/ Vision tools] and [http://www.universalsubtitles.org/ Universal Subtitles])
# [[Drumbeat/StoneSoup/Microbook creation|Microbook creation]] (using [https://www.drumbeat.org/en-US/projects/open-web-publishing/ Open Web Publishing])

=== Extra ===

# [[Drumbeat/StoneSoup/StoneSoup_HowTo|StoneSoup HowTo]]
# Course at the P2PU about this type of activities' implementation?

=== Other possibilities ===

* Find the Shortest Path (with Wikipedia)
* Be a Goodwill Reporter (video reporters)
* Contribute to Frikipedia (funny commons)
* Print Hard Things (with 3d printers)
* Teach the Teacher (video presenting/editing)

[[Drumbeat/events/Festival/Barcelona/OpenRaval#Activities_to_develop.2Ftest.2Fremix.2Fshare|Additional details here]]

==ToDo list of the project==

* Present project at the II Simposi d’Innovació Educativa INNED2 (september) http://inned2.wordpress.com/inscripcions/
* Define partners at local and international levels, mid and long term.
* Initial description of the other activities to document as an "Open Web basic skills" curriculum [[Drumbeat/StoneSoup#First_modules_to_share|here]].
* Tools for facilitating the communication (eg. social media but also regular meet-ups/jams) and community facilitators (people from other communities - dynamizers).
* Translate wiki contents and subtitles to Catalan and Spanish
* Get a nice logo for the project: a soup pot of code/tags?
* Plug-and-play approach: as a repository should have sections for complete newbie teachers anywhere in the world (project of translation as well as dissemination), as well as general instructable for facilitating, etc.
* Integrate this project also in the [https://www.drumbeat.org/ Drumbeat platform].
* Work on outreach metaphors like "steal this code" or differences between shoelaces and velcro.
* Add layers of theory and good reasons like [http://lab.softwarestudies.com/2011/04/new-article-by-lev-manovich-there-is.html Manovich] or [http://en.wikipedia.org/wiki/Seymour_Papert Papert]
* Guiding Open Web Values, connect it to the [http://www.mozilla.org/about/manifesto.en.html Mozilla Manifesto] and be plugged into that as much as possible.
* Engage local/global communities of teachers/facilitators, like the ones form http://digitalorchard.wordpress.com/ or http://www.educat1x1.cat/
* Get to use a [http://groups.google.com/group/web-made-movies-working/browse_thread/thread/a8b671b63058b5cb open online chromakey].
* Better embed experience with videos with subtitles in popcorn.js (now language selection needs scroll)
* <s>Get minimum resources for a first set of 10 activities (design, facilitation, documentation and web publishing)</s>
* <s>Identify venues, groups of learners, facilitators for upcoming activities </s>
* <s>Identify what's under development like now. Tools like popcorn.js, Booki, Universal Subtitles, Hackasaurus, Google Maps typewriter, etc. What's being cooked at the moment?</s>
* <s>Help solving the [https://webmademovies.lighthouseapp.com/projects/63272/tickets/376-problems-with-the-webpage-plugin-and-mediawiki-anchors popcorn-js bug with anchors #]</s>.
* <s>Define 5 dance steps for the project, in order to communicate it easier from the Drumbeat/Mozilla POW.</s>
* <s>Define budget and distribute resources for sessions in a scalable way (considering preparation, facilitation, video production and final documentation/implementation).</s>
* <s>Create a [http://www.mozilla.cat/drumbeat/stonesoup/ pilot] with video and instructable details in the background</s>
* <s>Test, present it at [[Drumbeat/DML_science_fair|DML conference]]</s>
* <s>Engage with other communities of practice to generate both tools and ideas for the activities design: Vision, Wikipedia, Scratch, Booki, Hackasaurus have been contacted and may join in sharing.</s>

For each module specific ToDo list please check inside the links at the section above.

==Roadmap==

* February/March 2011: Documentation demo, partners identification
* April/May 2011: Activity designs and preparations
* May/June 2011: Activity testing, observation and recording
* June/July 2011: Postproduction and online documentation
* September/November 2011: Results study, paper/article, output presentations

==Orientative sequence==
''To be defined in the first video pilots''

The time average for each video is 5 minutes, used for ensuring the concrete recording of the following parts (some from facilitator to camera, some taken live from the activity itself when performed).

# Activity presentation
# Main goals
# Eliciting/Questions
# Instructions
# Performance overview
# Output presentations
# Final feedback

==Facilitators==
Ideally activity designers themselves, otherwise teaching staff from Citilab or other partners.

* Enric (StoneSoup)
* Maria (Citilab)
* Laia (Amical Viquipèdia)
* Alina M. (Mozilla / Softcatalà)
* Toni H. (Mozilla.cat and Softcatalà)
* ...

==Process for each video==
''Aka stones, aka modules :)''

# Activity draft (new or already useful designs)
# Validation from experts (ideally academic partners)
# Online publishing of main text elements (idea, instructions, etc)
# Scheduling with learners and partners (looking for diversity)
# Record session planning (ensuring both learning activity and good video production)
# Activity execution and recording (with facilitator-only shots apart)
# Video postproduction (remixing and cutting)
# Output materials publishing (in order to get URLs)
# Module subtitulation, linking and publishing (in blog, with Univ. subtitles and popcorn.js)
# Spread and community sharing (via Social Media)

==Resources needed==

=== Online ===

* Website/blog (for publishing videos, news and link Social Media)
** www.mozilla.cat/drumbeat ; also, a project page on www.drumbeat.org;
* Drumbeat and Mozilla wiki page (for activities drafts and modules)
* Discussion group (A Google one would do)
** the current drumbeat-barcelona list, but indeed a google group would be better;
* IRC Discussion Channel
** irc.mozilla.org - #drumbeat-barcelona ;

=== Hardware ===
* Laptops
* Portable screen(s)
* Handy camera
* Mic(s)
* Portable chroma set

=== Software ===
* Open tool for video postproduction
* Universal subtitles
* Popcorn.js

== Previous related experiences ==
* OpenRaval: https://wiki.mozilla.org/Drumbeat/events/Festival/Barcelona/OpenRaval
* ACTIC: http://actic.citilab.eu/
* Breakout: http://boc.citilabblog.com/
* Viquipèdia workshops: http://www.viquimedia.cat/viqui/Categoria:Actes
* InvenTV: http://inventv.wordpress.com/

== Partners==
''Some listed here from OpenRaval need to be reconfirmed''
* Mozilla Foundation
* Citilab-Cornellà
* Vision (hub of European partners)
* Casa Golferichs
* UOC's eLearn Center
* STSI - Generalitat de Catalunya
* Booki
* Amical Viquipèdia
* CCCB Lab
* New Youth City Learning Network

Drumbeat/StoneSoup

2011-07-05T10:12:21Z

Esenabre: /* ToDo list of the project */ updating

<section begin="summary" />{{RoadmapSummary
|icon=stonesoup.jpg
|pagelocation=Drumbeat/StoneSoup
|pagetitle=StoneSoup Project Page
|owner=Enric, Laia, Alina, Maria, Toni
|updated=April 2011
|status=Draft
|description=Share your activity source code (towards an Open Web learning video-toolkit)
}}<section end="summary" /> __NOTOC__

== What's the StoneSoup concept? ==
<div align="center">
'''Detailed steps''' for new '''Open Web learning activities'''
<big>'''+'''</big>
'''HowTo in video format''' (using [http://popcornjs.org/ popcorn.js] for loading details)
<big>'''+'''</big>
Platform for '''sharing''' tested activities that work and engage
</div>

* '''We're working on our [http://www.mozilla.cat/drumbeat/stonesoup/ 1st video demo!] It's based in the [[Drumbeat/StoneSoup/Write_with_a_satellite|write-with-a-satellite]] and the [[Drumbeat/StoneSoup/Virtual_walkshop|Virtual_walkshop]] activities.''' [http://universalsubtitles.org/en/videos/Aa0w8zkz836s/en/ Subtitled in English here]

* [http://en.wikipedia.org/wiki/Stone_soup More info about the StoneSoup concept origin]
* [[Drumbeat/events/Festival/Barcelona/OpenRaval|Previous experience related to the project]]
* [[Drumbeat/StoneSoup/Minutes|Community call and meetings minutes]]

__TOC__

== Five dance steps ==

# Identify cool Open Web tools (fresh and stable)
# Design new learning activities with them (the open source way)
# Test and document sessions (releasing early & often)
# Publish online (video and documentation on the background)
# Spread the word, invite to test, integrate feedback

== Initial questions ==

* What is happening or can be done in informal learning scenarios when it comes to '''mixing youth and digital tools with Open Web''' resources and philosophy?
* Which type of activities (in terms of '''new practices''') can be shared, tested and defined among different institutions and actors locally, but also worldwide?
* How can youth engage with '''digital resources and collaborative methodologies''' in order to have fun, learn and be creative at the same time?
* When and how can formal learning institutions adopt '''innovative approaches with ICT in scalable ways''', especially secondary schools?
* How can we consolidate and define the benefits of computational, connective and social thinking, as strengthened by the Open Web?
* How to apply in terms of T2T (teacher to teacher) the best '''philosophies of open source collaboration'''? (Release early and often, distributed debugging, commenting code, etc).

All of these questions point to a certain '''lack of shared practices''' among education-oriented institutions when it comes to taking full benefit from significant learning contexts and exploring the possibilities offered by '''networked tools and web-inspired open methodologies'''.

Addressing this gap requires a well defined strategy and map of alliances, as well as a '''practical/open toolkit''' of learning activities (which could be used at any time by anyone) and a rigorous process of observation and independent evaluation (in order to improve design and effectiveness).

A modest, '''initial prototype''' for such a strategic toolkit was created and tested during the last November 2010 [[Drumbeat/events/Festival/Barcelona/OpenRaval|OpenRaval]] meeting, which took place right after the 1st [[Drumbeat Festival]] in Barcelona. We consider this an important starting point for the development of a series of shared practices with similar goals.

Intended audience for these materials is both '''formal and informal learning practitioners''' with an interest in using open web technologies to teach Open Web values. These shared practices would represent a collection of '''curricular modules that could be used singly or together''' to reinforce both Open Web skills and values by learning practitioners.

==Core ideas==

* Internationally-recognized Open Web educational '''video-repository''' for instructors.
* Let's share the idea, steps, instructions, performance, output and feedback (aka "'''source code'''") of innovative learning activities connected to the Open Web. Repository would also act as separate, but connected, node of larger Drumbeat social network.
* "Connected to the Open Web" means using it as a tool for learning: as a primary resource, mechanism of communication and/or final output. Repository would encourage '''open-source approach to modules''' with clear path of additions, remixes to originals.
* Initial '''visual learning emphasis''' to reinforce synergy with other video-based Drumbeat Projects
* Rather than long text with lots of stuff we use '''visual language''', connecting it to '''deeper layers of information''' when needed. Video acts then as a first, easy approach to the activity values.
* Each activity has to be '''tested, videorecorded and published''' online in order to be a part of this modular '''system of video HowTos'''.
* Rather than on high quality, each video focuses in the same sequence of explanations in order to become a standard. '''Lowcost equipments''' should be consider: a handycam, a mic and a easy free software for video editing...
* Builds on notion of YouTube-type '''instructional videos''', but organized for open source instruction.
* For formal education it's really important to connect these activities with the '''different subjects curricula''' (eg: basic competences in secondary schools).

== First modules to share==

These are the first series of modules for a broader '''curriculum of "Open Web" basic skills'''. They should '''work independently or be replicated''' in an structured order of sessions, where are complemented with either code "jams" or other type of instructional sessions.

=== Geolocation ===

# [[Drumbeat/StoneSoup/Write_with_a_satellite|Write With a Satellite]] (using [https://www.drumbeat.org/en-US/projects/maquina-descriure-de-googlemaps/description/ the Cartographic Typewriter] and [https://addons.mozilla.org/es-ES/firefox/addon/pixlr-grabber/ Pixlr Grabber]) | [[Drumbeat/StoneSoup/Escriu_amb_el_món|Catalan version]]
# [[Drumbeat/StoneSoup/Virtual_walkshop|Virtual walkshop]] (using [http://maps.google.com/help/maps/streetview/ Google Street View] and [https://addons.mozilla.org/es-ES/firefox/addon/pixlr-grabber/ Pixlr Grabber])

=== Coding ===

# [[Drumbeat/StoneSoup/Scratch_hacking|Scratch hacking]] (using [http://scratch.mit.edu/Scratch Scratch ])
# [[Drumbeat/StoneSoup/HTML_hacking|HTML hacking]] (using [http://hackasaurus.org/ Hackasaurus tools])

=== Commons ===

# [[Drumbeat/StoneSoup/Digital_gymcana|Digital gymcana]] (using [http://en.wikipedia.org/wiki/QR_code QR codes])
# [[Drumbeat/StoneSoup/Remixing_for_Wikipedia|Wikipedia loves monuments]] (using [http://commons.wikimedia.org/ Wikimedia Commons])

=== Digital narratives ===

# [[Drumbeat/StoneSoup/Your_vision|Your_vision]] (using [http://www.citilabpro.eu/vision/ Vision tools] and [http://www.universalsubtitles.org/ Universal Subtitles])
# [[Drumbeat/StoneSoup/Microbook creation|Microbook creation]] (using [https://www.drumbeat.org/en-US/projects/open-web-publishing/ Open Web Publishing])

=== Extra ===

# [[Drumbeat/StoneSoup/StoneSoup_HowTo|StoneSoup HowTo]]
# Course at the P2PU about this type of activities' implementation?

=== Other possibilities ===

* Find the Shortest Path (with Wikipedia)
* Be a Goodwill Reporter (video reporters)
* Contribute to Frikipedia (funny commons)
* Print Hard Things (with 3d printers)
* Teach the Teacher (video presenting/editing)

[[Drumbeat/events/Festival/Barcelona/OpenRaval#Activities_to_develop.2Ftest.2Fremix.2Fshare|Additional details here]]

==ToDo list of the project==

* Present project at the II Simposi d’Innovació Educativa INNED2 (september) http://inned2.wordpress.com/inscripcions/
* Define partners at local and international levels, mid and long term.
* Initial description of the other activities to document as an "Open Web basic skills" curriculum [[Drumbeat/StoneSoup#First_modules_to_share|here]].
* Tools for facilitating the communication (eg. social media but also regular meet-ups/jams) and community facilitators (people from other communities - dynamizers).
* Translate wiki contents and subtitles to Catalan and Spanish
* Get a nice logo for the project: a soup pot of code/tags?
* Plug-and-play approach: as a repository should have sections for complete newbie teachers anywhere in the world (project of translation as well as dissemination), as well as general instructable for facilitating, etc.
* Integrate this project also in the [https://www.drumbeat.org/ Drumbeat platform].
* Work on outreach metaphors like "steal this code" or differences between shoelaces and velcro.
* Add layers of theory and good reasons like [http://lab.softwarestudies.com/2011/04/new-article-by-lev-manovich-there-is.html Manovich] or [http://en.wikipedia.org/wiki/Seymour_Papert Papert]
* Guiding Open Web Values, connect it to the [http://www.mozilla.org/about/manifesto.en.html Mozilla Manifesto] and be plugged into that as much as possible.
* Engage local/global communities of teachers/facilitators, like the ones form http://digitalorchard.wordpress.com/ or http://www.educat1x1.cat/
* Get to use a [http://groups.google.com/group/web-made-movies-working/browse_thread/thread/a8b671b63058b5cb open online chromakey].
* <s>Get minimum resources for a first set of 10 activities (design, facilitation, documentation and web publishing)</s>
* <s>Identify venues, groups of learners, facilitators for upcoming activities </s>
* <s>Identify what's under development like now. Tools like popcorn.js, Booki, Universal Subtitles, Hackasaurus, Google Maps typewriter, etc. What's being cooked at the moment?</s>
* Better embed experience with videos with subtitles in popcorn.js (now language selection needs scroll)
* <s>Help solving the [https://webmademovies.lighthouseapp.com/projects/63272/tickets/376-problems-with-the-webpage-plugin-and-mediawiki-anchors popcorn-js bug with anchors #]</s>.
* <s>Define 5 dance steps for the project, in order to communicate it easier from the Drumbeat/Mozilla POW.</s>
* <s>Define budget and distribute resources for sessions in a scalable way (considering preparation, facilitation, video production and final documentation/implementation).</s>
* <s>Create a [http://www.mozilla.cat/drumbeat/stonesoup/ pilot] with video and instructable details in the background</s>
* <s>Test, present it at [[Drumbeat/DML_science_fair|DML conference]]</s>
* <s>Engage with other communities of practice to generate both tools and ideas for the activities design</s>: Vision, Wikipedia, Scratch, Booki, Hackasaurus have been contacted and may join in sharing.

For each module specific ToDo list please check inside the links at the section above.

==Roadmap==

* February/March 2011: Documentation demo, partners identification
* April/May 2011: Activity designs and preparations
* May/June 2011: Activity testing, observation and recording
* June/July 2011: Postproduction and online documentation
* September/November 2011: Results study, paper/article, output presentations

==Orientative sequence==
''To be defined in the first video pilots''

The time average for each video is 5 minutes, used for ensuring the concrete recording of the following parts (some from facilitator to camera, some taken live from the activity itself when performed).

# Activity presentation
# Main goals
# Eliciting/Questions
# Instructions
# Performance overview
# Output presentations
# Final feedback

==Facilitators==
Ideally activity designers themselves, otherwise teaching staff from Citilab or other partners.

* Enric (StoneSoup)
* Maria (Citilab)
* Laia (Amical Viquipèdia)
* Alina M. (Mozilla / Softcatalà)
* Toni H. (Mozilla.cat and Softcatalà)
* ...

==Process for each video==
''Aka stones, aka modules :)''

# Activity draft (new or already useful designs)
# Validation from experts (ideally academic partners)
# Online publishing of main text elements (idea, instructions, etc)
# Scheduling with learners and partners (looking for diversity)
# Record session planning (ensuring both learning activity and good video production)
# Activity execution and recording (with facilitator-only shots apart)
# Video postproduction (remixing and cutting)
# Output materials publishing (in order to get URLs)
# Module subtitulation, linking and publishing (in blog, with Univ. subtitles and popcorn.js)
# Spread and community sharing (via Social Media)

==Resources needed==

=== Online ===

* Website/blog (for publishing videos, news and link Social Media)
** www.mozilla.cat/drumbeat ; also, a project page on www.drumbeat.org;
* Drumbeat and Mozilla wiki page (for activities drafts and modules)
* Discussion group (A Google one would do)
** the current drumbeat-barcelona list, but indeed a google group would be better;
* IRC Discussion Channel
** irc.mozilla.org - #drumbeat-barcelona ;

=== Hardware ===
* Laptops
* Portable screen(s)
* Handy camera
* Mic(s)
* Portable chroma set

=== Software ===
* Open tool for video postproduction
* Universal subtitles
* Popcorn.js

== Previous related experiences ==
* OpenRaval: https://wiki.mozilla.org/Drumbeat/events/Festival/Barcelona/OpenRaval
* ACTIC: http://actic.citilab.eu/
* Breakout: http://boc.citilabblog.com/
* Viquipèdia workshops: http://www.viquimedia.cat/viqui/Categoria:Actes
* InvenTV: http://inventv.wordpress.com/

== Partners==
''Some listed here from OpenRaval need to be reconfirmed''
* Mozilla Foundation
* Citilab-Cornellà
* Vision (hub of European partners)
* Casa Golferichs
* UOC's eLearn Center
* STSI - Generalitat de Catalunya
* Booki
* Amical Viquipèdia
* CCCB Lab
* New Youth City Learning Network

Drumbeat/StoneSoup/HTML hacking

2011-07-04T13:08:05Z

Esenabre: /* ToDo list */

== 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)

Drumbeat/StoneSoup/HTML hacking

2011-06-28T19:50:05Z

Esenabre: /* ToDo list */

== ToDo list ==

*Translate to Spanish (Catalan too later on) 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 Spanish (Catalan too later on)
*Spread the 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)