Badges: Level Up your Webmaking Skills

Badges are huge topic in the digital media and learning world and something that I have been working with in some form ever since I have entered into the realm of educational technology. To be honest, I have struggled with my feeling towards badges, that is to say, assessment for skills that you aren't always given credit for.

The Mozilla Open Badges Project describes badges on their wiki:

Badges give you public recognition for your skills, achievements and learning beyond the classroom -- unlocking job and educational opportunities.

The reason that I struggle is that I am concerned that badges allow you to formalize something that is blissfully informal. One example of my fear around this was when I was in Barcelona at the Learning, Freedom and the Web festival. My colleague Jack Martin and I participated in this local learning incubator where we told a story with twitter. It was a fantastic and fun day and we loved what we made just as much as we did making it. However, after the activity was over, a learning assessment team came over during our presentation of our story and gave us badges for our story. It somehow cheapened the experience that Jack and I had and sort of reminded me that, yeah this was about learning and grading-not the fun experience.

Ok, now that I have that off my shoulders- I find the idea of using badges to assess web design skills intriguing. Many web designers and developers learned webmaking skills in informal settings- hanging out with friends, navigating the web on their own, tinkering with blog sites. However, theses skills equate to real life work competencies that often need to be proven in some form when you are applying for work (for example). What if there WAS a way to say, bring along some form of street cred and accreditation into your interviews along with your portfolio?

So with all of this enthusiasm, and mild trepidation- I started to look at the learning objectives for Hackasaurus and, with the help of Matt Thompson and Atul Varma, started to answer the question: if Hackasaurus had a system for badges what would the badges look like?

Essentially I came up with 5 core badges and then 3 "level up" badges. The level up badges are really geared towards refinement and mastery, whereas the core badges are a compilation of hard and soft webmaking skills. These badges can be mapped to a structured and scaffolded curriculum, or be achieved in a more organic (non-linear) way. What will be an interesting mechanic for the project is the dissemination of the badges. Right now, we are thinking that a learner can acquire a badge physically in a design jam or online through some sort of self guided experience

The badges I came up with are described here. It's just a barely baked idea, and Atul, Matt and I are really just starting to tinker with how badges could support the learning experience. We won't be actually implementing this online for a little bit, however, I would love to hear your thoughts on how this maps to the learning outcomes and if you have any other ideas. The Tuesday Hackasaurus community call will focus on badges. Join us if you have the time.

Learning Objectives for Hackasaurus

While many people speak about how Hackasaurus is an open source development project, I think that it is important to note that this is an open educational resource project (OER) as well. What is particularly challenging and stimulating about the work that I do is that I am integrating ideas and creative thinking of both technologists and educators on a daily basis.

The project was birthed out of conversations between Mozilla and The Hive Learning Networks in New York and Chicago. Some of the initial test beds for the project were the New York Pubic Library, The Chicago Public Library YouMedia and the New York Hall of Science. The Hive involvement in the project is still strong and we have more contributors including the Digital Youth Network, Eyebeam, The National Writing Project, the Institute of Play and Mouse, as well as many international contributors, including Brussels, Barcelona, the United Kingdom and Nigeria. The strong involvement of these organizations as well as individual educators who have volunteered their time and energy towards Hackasaurus helps to strengthen the design of the tools as well as the curricular aspects of the project.

The development team of the project and the learning experience team worked together to iterate on defining the learning objectives for the project. I am sharing with you a bit of our thinking around this because I feel that it is truly interesting to see how our project has evolved over the past year as well as where we believe that we are headed.

We initially came up with a set of learning objectives that we know we are currently satisfying with our tools and design jams. The objectives sketched out here more or less fit into three categories: browser basics, web making basics and tool basics.


We then started to develop out what our aspirational learning objectives are for the project. This included everything from being able to code websites to understanding what ethical web making means. One area of particular interest was defining what we mean when we talk to teens and tweens about the open web, which one participant on our open web etherpad described as:

"It's better to teach kids how to tie their shoelaces (an "open" skill needed for making knots, useful for many other purposes) vs just making them use shoes with easy Velcro fasteners (which is also much less challenging for developing fine motor skills)."

This process was really interesting because it was a mix of the technical side of building for the web with the emotional side of creating- that is, acknowledging that humans are crafting the web and thus, have a responsibility to themselves and others to understand the power of their medium. Finally, and this was probably the most difficult part for us, we started to list what are NOT our learning objectives. Yeah, this list is probably too short, but I think that it is a good place for us to begin. Ultimately the learning experience that we are interested in supporting is that of a web maker, someone who is thinking of the web as a place for designing, crafting, challenging and coding, which allowed us to remove some of the other areas that are tangentially associated with the work we do, but are not our direct focus.

The initial frontier: Hackasaurus Training Missions

Last week, Atul Varma, David Humphrey and I took some time to think about crafting specific missions or quests that were directly mapped to initial interactions or skills that can be acquired when using the Hackasaurus X Ray Goggles. These training missions are being thought of as a way to introduce a new user to the "Hackasaurus" experience (no relation to the Jimi Hendrix Experience). Here is a little summary of our prototyping session.

The first thing that we did, was list the basic kinds of interactions that we know teens either have or that we would like them to have with the goggles:

Some of these interactions are really for advanced users. For example, ascending or descending to parent/child elements is something that really gets users to start to explore the Document Object Model (DOM), however isn't learned on the first day or hour with the tool. We also thought about more "hackable" interactions, or ways that teens could start to explore code- without actually knowing any code (ie- hacking javascript code without know how to program). As a result we came up with 4 concepts for training missions using the X-Ray Goggles.

Prototype 1:
Skill: Learn how to read and edit links
The idea for this sketch is that you can edit a link. So here, you have three animal links that connect to wikipedia entries, except the link for cat goes to an ugly dog- so the user will have to change that link using the goggles

Prototype 2:
Skill: Learn how to delete an element
The idea here is that the ball is moving around the frame (which has kind of a Super Mario Brothers set) and the goal is to get the ball into the basket which cant be done until you delete the div of the bar that is blocking the basket, using the goggles of course.

Prototype 3:
Skill: Learn how to edit javascript
This sketch shows this idea about kind of creating a "pinball" effect by increasing a value in javascript. The idea is that even if you don't know everything about javascript, you can hack it to make it work for you. When you increase the value to the correct amount, the ball will fly to the "pow" or portal button that takes you to the next training mission.

Prototype4:
Skill: Learn how to use CSS
This sketch shows that a user can use css to create an avatar . The idea would be that using the goggles with the CSS functionality (and even html editing) you can either reposition the objects to cover the avatar body and/or add your own elements to personalize it.


In the future at some point, we will prototype these using the repository on GitHub that Atul made for Hacker Parcours and game like creations.

Storyboard for Hackable Comic

As I mentioned, last week I worked with Anna Debenham and some local tweens from Toronto on this hackable comic idea. We prototyped a simple storyboard for what could be the intro to the comic- how the main character (currently Sue) acquires her superpowers of hacking the world wide web for the good of the world.

I drew up the comic and played around quite a bit with navigation (horizontal vs vertical vs ZOOM). Additionally, we started to think about how we could incorporate actual hacking in the comic. There is a moment for activating the goggles and a sketch about how one of the characters is saved by the deletion of an element using HTML.

Here is my mock up (pulled together using Photoshop stitching):

Click on the image and go to Flickr for the best viewing. I annotated the flickr version with tons of notes to explain both the story and the interactivity.

What the Hackasaurus team does on our day off

Atul, Anna and I are in Toronto for a Hackasaurus team design sprint to beta. Yesterday we took some time to relax. Wondering what the Hackasaurus team does when we have a day off? We went to the Royal Ontario Museum- and spent some time with the dinosaurs (of course)

Atul loves looking at fossils!

This is the icon on the displays to show when to use the audio tour. Pretty awesome, right?

Anna and I were quite fond of the big dinosaurs. Rawr

Although there were no Hackasaur sightings, we have informed the paleontologists that they should start researching around the new Mozilla office stomping grounds- just in case.

Hackable Comics

This week at the Mozilla offices, we have been participating in a game design sprint to explore using the Hackasaurus tools as controllers for game play as well as building some games with integrated learning experiences. My colleague, Atul Varma, has already created a prototype for what I think could become kind of a mad libs + a choose your own adventure. It is a fantastic vehicle for us to teach learners how to use the tools as well as guide them through some very basic lessons in hacking html. Ever since I saw his Parable of the Hackasaurus, I have been inspired to create a hackable html5 comic.

But, maybe I should take this back a notch and talk about me and my relationship with comics. I love stories and in particular I love stories that are told in visual form. I read and collect children's books. I liked comics that I saw in newspapers, but it wasn't until I was really about 16 that I found them meaningful to me. As a grown up, I am an avid reader of graphic novels and I love anime and thus, can often be found attending comic con or geeking out at comic book stores. Whenever I was asked as a teenager what I wanted to be when I grew up- I said a children's book illustrator. Eventually my aspirations extended into comics. However, as I matured as an artist, I really started to become involved in designing interactive spaces and I just couldn't figure out how that factored into my comic/childrens book dream. I always keep around a sketch book, where I doodle little comics and drawings about my life- but I have never felt that it was a place for me to really share with others. I think that I made this distinction because to me, comics are personal spaces that you explore on your own and appreciate in the quietness of your own world.

doodle from my Israel sketchbook

However, my thinking about this started to change as I saw the possibilities of HTML5 and comics. Disney's Tron: Legacy interactive comic is absolutely beautiful and for me, it was a moment where my two worlds collided. Working on the computer, is a personal thing for the most part. You have your screen, and keyboard, and the path in the world wide web that you choose to explore is yours alone. The intimacy of reading the comic in the bookstore corner was somehow retained in the html5 experience. In the past when I have tried to get into reading comics online,the scrolling, the screen display, everything just seemed like it was just copying and pasting the comic from print to online and it wasn't translating. However, with these new HTML5 comics, like Tron and Never Mind the Bullets, the medium of the comic have been taken to a new level. While these initial experiments with html5 are really dabbling with interactivity, I think it is worth noting some of the interactions that make the experience unique to the medium.

With a web- based comic, you have the ability to expand on what it means to represent a non- linear narrative. This can be done in a truly clever way, by zooming into and linking to elements and really exploiting the nature of the web. I can think of endless possibilities in terms of breaking frames and giving the reader/user the opportunity to engage with the crafted comic world in a new way. Finally, something that is uniquely exciting about HTML5 (as opposed to Flash) is that content being developed can be remixable and hackable, allowing you to essentially insert yourself into the story and in effect, connect with the content in a more meaningful way. This possibility highlights the potential for the reader to become not just a user- but a player, conspirator, a dreamer and a maker.

I am working on creating a hackable comic prototype this week. So far I have just drafted a few frames of the narrative and in collaboration with my colleague Anna Debenham, have sketched out a few scenarios that give you the power to exploit the unique affordances of this interactive medium.

This week we tested the idea on a bunch of tween game designers who were helping the Hackasaurus team come up with game like ideas for the project. The feedback that we received about the comic was fantastic and I am really motivated to move forward.

If you are interested in learning more about Hackasaurus, or are interested in our work around gaming, and play- please visit the Hackasaurus website

Hackasaurus Cheat Sheet

Sometimes you need a little something something to remind you which keys do what when you are using the Hackasaurus goggles. I pulled together this little cheat to have beside you as you are remixing websites with the Hackasaurus tools.