First experiences with Hackasaurus

Supergirl in HackasaurusToday I had about one hour with ten ~15-years-old students. It was not exactly a class: they are coming to the campus during this week to have some exposure to the University life, health care and to IT (I’m at the Telecom School). Before staying with me, recipe they had attended to a class on IPTV, phimosis to a Gymkana with mobile devices, to a demo of WiFi-controlled toy cars. So the stakes were high. Fortunately (for me and for the students), Hackasaurus came to the rescue.

I had learned about Hackasaurus about a week ago, while I was thinking what to show/explain/practice with these students. I really liked the idea of letting them think about how the web is not read-only, but a place to hack, a place to play. So, I tried to design a simple practice session to help them to think in a new way about the web: not as a collection of sites that I have to adapt to, but as a powerful, yet very flexible tool that I can contribute to shape. And it was a enlightening experience for me.

The design of the practice was easy. I first played for a while with the X-Ray Googles, and had a look at the materials in Hackasaurus. They were inspiring, and after less than an hour, I had the sketch for my session.

The session took place in one of the GNU/Linux labs of the ETSIT. Students had fresh user accounts to play with, and they were already somewhat familiar with the Ubuntu 10.04 default desktop (but that that was not a must, except for launching applications and the like). They had no previous experience in programming, in HTML, or almost in anything that is related to the web, except for being (probably intense) users of web services.

The session went like this:GNU/Linux Lab

  • 5 min: Enter into account, launch web browser, launch Vinagre to let them see my desktop from theirs.
  • 10 min: Show them through Vinagre a (slightly) modified Tuenti webpage. Tuenti is a social network similar to FaceBook, very popular among teenagers in Spain. They all were familiar with it, but had some time before figuring out the differences with the original (the obvious one was the url, the subtle one was some text I had changed with the X-Ray Goggles). This led first to some surprise, and then to an interesting discussion on how it was possible.
  • 10 min to try X-Ray Goggles as explained in “Make your first hack in three easy steps“. That included solving some specific problems that some students had.
  • 20 min to install X-Ray Goggles (following instructions in “Installing X-Ray Googles” and use them in Google’s main page. It is simple, it is quick to load, and everyone is familiar with it. We changed the logo, changed some text (using the “basic” remixing interface), and deleted the logo, and the text elements below the seach box (using the “advanced” remixing interface). Then, we shared the results via email. All of this, first done by me in my desktop, then done by the students in theirs, with some little modifications. There were very little specific problems: all of them were progressing at a similar pace. And all of them seemed to enjoy the process, wanting to learn more and more about how to change the web page, and were quite proud of sharing the results of their hacking with each other, commenting them, etc.
  • 5 mins of explanation (using the whiteboard) about the basic structure of an HTML page, some of the most “popular” elements (img, p, h1), and the height and width elements of img. The main problem here was to calm students down for a while. But finally they followed to some extent the explanation.
  • 10 mins letting them freely play for a while hacking any webpage they wanted. I was around, answering questions, and helping those that still had some problem (nothing serious, just a few simple issues that some had missed). This period was definitely too short. 20-25 min. would have been better, so that they could really customize some pages they wanted. Having a list of pages “easy to hack” would have also been a good idea. In some cases, due to elements in CSS, to JavaScript or some other issues, hacking specific elements of a webpage with the little understanding they had was just impossible (and a bit frustrating). Fortunately, entering a webpage, realizing it is difficult to hack, and moving to a new one is a really quick and easy process. Despite the little time, some of the students had time to use their recently acquired capabilities to hack some webpages in the way a teenager may consider fun (probably you understand). Keeping this under control is probably something to do with care next time, because then can very quickly became offensive, even without noticing.

At the end, I had literally to close the lab to have the students leave. Some of them told me this was the best time they had in the University, and some also told me that their entire view about the web had changed. One of them told me that he had discovered that he liked “programming”, something that I had to discuss with him ;-).

All in all, the experience was a great success. I learned a lot about what motivates students of this age, and how they can become really interested in relatively arcane concepts such as the structure and layout of an HTML page, if you have the right tools. And, as I said, over all about how in just one hour, they can have an experience that let them understand the web in a completely different way.

Analyzing the experience, some of the factors that lead to the success were, in my opinion (and maybe not in this order):

  • It is fun! They learn, the acquire new capabilities, but about all they get some fun. And they understand this can be a tool for having more fun during the following days. This is really important, and maybe the core of a viral dissemination.
  • It works in (almost) any webpage, at least to some extent. This means once they know how to work with X-Ray Goggles, they can select the webpages they want, which is much better than me selecting them (because it is difficult to be sure of they likes and dislikes). And the experience seems more real: since the work with true webpages, the have the feeling they are really changing the web (although at the same time they realize that they are really doing modified copies).
  • Learning is really fast. “Installation” of the tool is really simple. This means they can start doing things right away.
  • Students have enough instructions. Even having into account that the tool is really easy to use, the bits needed to start are clearly explained. This amounts to about two pages to start rolling, but that really simplifies start rolling.
  • The hacks they do are persistent. If they have the url, they can come back later, and they are there. They can show them to their family or friends in the own computer.
  • They can also share the webpages they modify. I guess this is really important, since that’s a very good incentive for them. Being able to show to their social network how they can hack webpages, and sharing funny hacks this way proved to be rewarding enough for them. In fact, I didn’t use badges, nor it seemed they needed them. Their badges were their hacks.
  • Despite their interest in having fun, the experience also leaded to a lot of explanations and open questions, specially for those students more interested or motivated.
  • This group came from a bilingual school, but in any case, having most of the information in Spanish (which was the language we were using) simplified things a lot. In other, non-bilingual cases, this could be of paramount importance.

I also found some little problems, which maybe are worth mentioning:

  • Despite Mozilla being the promoter of the Hackasaurus, I found that it didn’t work with the Mozilla that came with our Ubuntu. That’s probably reasonable, because it very old by free software standards (two years is too much, I know). But it worked with a Chrome of the same age. And it has some (very little) glitches with my shiny 12.0 Firefox: in the “C” panel, I don’t see the option for committing my changes (in fact, I thought there was no button for that, until I saw it in chrome).
  • It hanged, although just very few times (like twice in all the session, which included probably more than 100 individual cases). When hanging, it seemed the browser was not responsive, even to the movement of the mouse. I’m not sure if that’s a bug in the version of Chrome we used, but that’s likely.
  • Some urls in the resources for teaching don’t work. Now, I remember and, but maybe there were some others. I used for a webpad, which was useful for letting themselves collect the urls to their hacks in a single place. For doing some more advanced work, such as building their own webpage, having a resource to store it and being able of coming later to go on with their work would be great.
  • Some details are a bit difficult to explain (such as background images, difference between HTML and CSS, etc). I couldn’t enter into them, and it is difficult to relate them to what they see with X-Ray Goggles. But well, I had just one hour, and the tool is not intended for everything…
  • There is little documentation (or I found little documentation) about “C” option, which is indeed very interesting.
  • The preview, when remixing, doesn’t always work. But this was not a big issue.
  • A growth path is needed: better info to understand basic HTML elements, how they are nested, their main attributes. Something to go on this line when they understand the basic stuff.

After the experience, I have also found that it would be great to have explanations (maybe screencasts, maybe schemes, maybe annotated HTML) of the structure of popular webpages, so the students can try (and understand) those by themselves, once the time with the teacher is over.

Well, this is all for now. I plan to keep using these nice tools for other experiences.

Update (2012-03-28):

If you are interested in having more details about Hackasaurus, and eventually collaborate with the project, you can have a look at their Wiki pages.

BTW, yes, I do know about other tools for browsing and editing HTML and CSS source code, including browser extensions such as Firebug. They are nice, and I’ve been using them with students for years. But no, they are not the same. At least when you want to introduce HTML and how to work with it to young people not previously exposed to programming tools in a short timeframe. If you think those are enough, you really should check out Hackasaurus. And please, let me know if you don’t change your mind after that (I did).

Add a Comment Trackback

One Comment

  1. Excellent tale of your experiment ! Thanks for sharing this.

Add a Comment

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 205,265 bad guys.