5 Games With A Hackable Alter Ego

“Hackable Games” is kind of a new (made-up) term that we have been using here at Mozilla for the last couple of months to describe games that like the web itself are hackable by design.  However, as you already know if you are a gamer, “hackability” in games is not something new.

From the early days of Text Adventures and Starcarft to recent hits like Little Big Planet and Minecraft (umm have you seen WesterosCraft this week?) people enjoy modding, remixing and hacking games to make their own versions. 

In this post I will share some games I am currently playing that I find so hackabl-y inspiring. I hope you enjoy playing them and use them as an inspiration to go hack some games yourself.

#1 Twine by Chris Klimas.

Twine is a tool that lets you generate sort of Choose Your Own Adventure games. It has a super simple interface that looks like this;

and is perfect for building narrative based games by twining and un-twining your story parts together. Once you are done you can publish your story as a series of HMTL pages.

But the best part is that you can actually hack HTML, CSS and Javascript into your story parts, just like this;

If you want to get started with Twine Anna Anthropy has shared some awesome tutorials on her site. Meanwhile you should play The Vermin Throne  a great Twine game that came out of last weekends Global Game Jam.

Vermin Throne Photo Credits: PC gamer

#2 Storyteller by Daniel Benmergui

This award winning gem of a game by Daniel Benmergui, who you might also know from I Wish I Were the Moon,  is a puzzle game where you build your own visual stories. This game stands out not only for the elegant comic like way of stitching your stories together but also the smart and funny constraints it gives you to kickstart your game-making; for example each level has a goal like “make a murder of jealousy.”

#3 ROM Check Fail by Farbs

Fellow Mozillian Bobby Richter introduced me to this game last week and it’s concept won me over.  It was like a Hackable Gamers’ dream… if loud and glitchy graphics are your style anyway. ROM Check Fail is a mashup of all your favorite arcade games together randomly alternating between levels. 

#4 Wave Trip by Lucky Frame

Combining music creation with game making is as good as it gets IMHO. In this minimal game you control a mysterious and wonderful geometric astronaut as she travels through worlds of unimaginable beauty and danger, saving her friends through the medium of awesome tunes. 

Meanwhile you can create your own levels just like writing a piece of music.

If you like this sort of games, you should also check out the critically acclaimed and beautifully designed Soundshapes.

#5 Katamari Hack by Alex Leone, David Nufer, and David Truong

In Katamari Hack you roll a ball just like in Katamari Damacy to collect all the text and images in your webpage. (Below I just killed the NYT page)

Similar to the viral KickAss App and the internetz favorite for the week  “New Anonymous Hack Lets You Shoot Up Government Sites with a Nyan Cat Spaceship” , this kinds of games have been super inspiring to me lately- so much that I started doodling around with some ideas here. I love the concept of looking at ordinary web pages through a creative lens and using the web as a game canvas.

I am hoping to start prototyping these ideas soon, meanwhile looking forward to any additions for games with a hackable alter ego in the comments below. Till next time I leave you with a bonus item; this Retro Unicorn Swim game has the bestest & brightest hackable alter ego of them all :)

Mechanics, Dynamics and Aesthetics of Hackable Games

2012: my favorite games

Yup I know - it is 2013 already. But;

a) 2012’s end was just insanely busy with launching Game On.

b) ok fine- i m Greek and I m always a wee-bit late and what can we do, that’s part of my charm :)

c) I rely on the fact that not so many people read this blog and hence the chances of you actually caring for me being late with such a post, are *very* slim.

With all that said, here are my top 2012 games; hope you play them if you haven’t already and that you enjoy them as much as I did.

1. Super Hexagon, Terry Cavanagh

This heart-pounding, minimal, brilliantly addictive game has the power of making you feel like a genius for completing a level - while simultaneously making it brutally painful to miss.

I first played Super Hexagon on my way back from Nottingham’s Game City Festival - where everyone was talking about it. It took me the whole trip back to London (2h) to go past the line level and then about two transatlantic flights to pass the game’s first level, poignantly named “hard”. 

I don’t think I have heard “Game Over” more times in my life than when playing Super Hexagon and despite the small likelihood of me ever passing Hyper Hexagonest I still believe that if I keep trying, one day- I will succeed.

2. Zombies Run, Six to Start

I am not really into Zombie games. Or into gamification apps, that try to motivate you to do everyday routines. But I am very much into running, I do it almost everyday, and a fan of the british Six to Start team which has a knack for great story-telling & pervasive games.

Zombies Run is an ARG- esque mobile game where you run away from zombies while mixing in your favorite playlist. The game’s narrative is genuinely good and the fact that I am running in a park full of happy baby strollers and serene dog walkers while escaping brutal attacks from zombies is well… awesome. 

The game also does a pretty good job of tracking your runs stats if you are into that sort of thing.

3. Turtle Wushu, Invisible Playground

Ok, If you know me you know that I have been obsessed with Turtle Wushu this year. I first played it at the Playpublic festival in Berlin and have been playing it with friends and colleagues ever since. I even made everyone at Mozfest play it.

Turtle Wushu is a mash-up of two other favorite folk games of mine, Joust and Ninja. But it includes tiny plastic turtles from China and results in hilarious gameplay.

A wonderful group game with a subtle narrative (naming your turtle is crucial) which also doubles as a metagame;  my favorite part about it is when people take out their turtle in random moments and challenge each other in an impromptu match of turtle wushu.

As a street games festival organizer, I also have to say that this has been the easiest game to ever setup and run, all you need is tiny turtles and someone to show you the rules. So double kudos to the awesomest Invisible Playground team for it.

4. Dys4ia, Anna Anthropy

Dys4ia is an extremely elegant, moving and honest storytelling game about going through the process of hormone replacement therapy while dealing with the social implications of being transgendered. Aside from being a powerful narrative with impeccable semiotics in it’s graphics and gameplay - Dys4ia is about an experience that is not really dealt with in the medium of games. It is valuable as an empowerment for others to seek more diversity in games and the stories they tell.

5. Journey, thatgamecompany

I am cheating a bit on this, since I first played Journey in a demo Kellee Santiago gave at NYU in March of 2011. But I never finished the game until this summer when I replayed it during a warm and lazy summer night in Athens.

Journey is as effortless and lyrical a game can be. Following an incredibly minimal yet seductive narrative (only one line of text appears throughout the course of the game, that is “Journey” in the beginning) you get lost in a dessert of sand smoothly moving towards the mountain, through eye-watering landscapes. At the end you emerge in a state that is close to having gone through a metaphysical experience.

What I love about Journey beyond the astonishing beauty and serenity it transcends is the way you learn how to do things in the game; not always obvious or easy you slowly navigate Journey’s systems seamlessly and intuitively.

6. Fez, Phil Fish

On the topic of stunning games, the much anticipated Fez was a feast. A mind-boggling puzzle game in a 3D world where you actually explore everything in a 2D view as you turn the world around on an axis to navigate and discover objects. Fez’s puzzles are also super hard to solve (and endless). Like Super Hexagon is has the quality of turning frustration into enjoyment for playing more. And you probably don’t need me to tell you how gorgeous the graphics are. I have never imagined more plush toys and cute t-shirts coming out of a game.

*******************************************************

2012 was a banner year for indie game developers, I am hoping for more of that in 2013 as well as experiencing more games on the web and exploring all the new mechanics and potential it has to offer. I also promise to do more of this sort of thing here on my blog- and write about games I play. Till then, have a happy & game-full new year.

Mozilla Festival; Hackable Games Superblast

So Boom! Mozilla Festival  (Mozfest) just happened. And Hackable Games from being a seed of a somewhat unclear idea went to super blasting with playable prototypes Ravesbourne’s 8th floor. It was three amazing days and my post-MozFest tired brain will do it’s best to capture all that went on in the Hackable Games planet.

Umm… so what are Hackable Games again?

Let’s start with the basics; If you are a gamer, you know that games are awesome interactive experiences. They engage us in hours of obsessing over things like throwing …Angry Birds, shooting Portals in walls and building weird looking Minecraft landscapes. They bring us together online and offline and fuel our imagination in unique ways.

But in their majority games are closed systems. It’s a “play and move to the next game” kind of experience. Not to mention that game platforms such as consoles and phones place anything between the code that makes the game and the game play experience, hidden in a black box of fear (most likely connected to the super brain of the Megazords who made it).

Hackable Games are Open Systems

So what if we looked at the web as an open gaming platform. And what if we looked at games that like the web itself are hackable by design; games that let their players fork the code and customize the assets in order to create new games.

Games that empower players to become makers of games and learn how to code and design amazing games along the way. As a result we would have games that are closer to what the players like and who they are. We would have more innovative gameplay mechanics and more diverse characters.

Mike Hoye’s story of hacking Zelda so that Link is a girl character and not a boy tells the story best. “I’m not having my daughter growing up thinking girls don’t get to be the hero and rescue their little brothers”

Hackable Games are Learning Engines

If you play games you might also have a hunch about what great learning engines they  can be; Skyrim might seem like it’s just about killing dragons but if you look closer it requires some serious resource management and critical thinking to level up.

By default when playing a game you have to master certain skills in order to advance. Moreover games have their players fail multiple times in order to master such skills through experimentation and tinkering.

Now if you think about it that process is quite similar to the way we learn how to code. We tinker again and again, probably write a bunch of nonfunctional code and eventually master a programming language.

So what if we seized the power of (hackable) games to teach the world how to to code?

Mozilla Festival: #mozgames stories

I have highlighted some stories from MozFest below to give you a glimpse of all that took place during the weekend

Hacking Pong and Amira’s Guinea Pings

Adil and his daughter Amira came to our hackable games station at the Science Fair. Without wasting time Amira sat infront of our Hackable Pong demo and tinkered fearlessly with the code for about ten minutes. Her goal was to make a version of pong featuring her Guinea Pigs; Levi and Prada. Once she found an image of her Guinea Pigs and inserted it into her game she started thinking of the mechanics; you see Levi and Prada are quite playful so multiball pong seemed like the only option.

Team Hacking

One of the awesome things that happened in our zone during MozFest was that participants (of all ages) worked together to build their games. Making a game requires people taking on different roles; in the picture above this team who worked together on a hacked version of pong is play-testing their game. (obviously someone just experienced an epic loss;))

From Cardboard to Screens

A massive hit during the festival was the cardboard cabinets that were used for displaying the hackable games. It was great to have both digital and analog merging during our game jam, with participants of all ages hacking and building together.  The ARMCADE project (picture#2 above) was one of the favorites of the closing science fair.

Prototyping Interest driven games

Another great outcome of MozFest was that participants prototyped games connected to their own interests. From the Cats & Cheezburgers which took over the Hackable Games Jam, to Alejandro @OmeGak ‘s CERN hack of BrowserQuest turned ParticleQuest ,  to Matteo Mennapace’s energy efficient PAC-MAN to Greg Trefry’s sports, to the awesome Craftyy and PlayMyCode games to Mind Candy’s Mash Up… youth and adults together, took inspiration from their own interests and made new games.

Spreading the “Hackability” Virus 

A weekend after the festival I got an email from Santeri who was running the epic Minecraft EDU station (with custom outfits as seen above);

“I’m not sure was this because of MozFest - I think so - but we just came up with a neat idea for the edu. Our Madrid team just started to work around the programming toolset and now there’s one particular feature we want to add: a “hacking” tool. With the hacking tool you can right click anything in the game and access it’s code. Let’s see how
deep we’ll go with this, but if it works, it’s going to be a w e s o me.”

His email moved me and pretty much sums up why I love Mozfest; its a place for people to tinker with new ideas and take them back to their communities to make them their own.

So what’s next?

In the months to come we will be building our community through Game Jams, and the Game On competition. We will also be prototyping demos and tools of hackable games figuring out what hackability in games means and the learning interaction behind it.  So if you are interested stay tuned at #mozgames for moAr :)

=======================================
Special shout out to the awesome Michelle Levesque who is as best a wing woman can get and who helped co-wrangle the space and to all the facilitators and volunteers who blew everyone’s mind during mozfest with their creativity and (unstoppable) energy.

Photos by MozillaEU, Paul Clarke and Matteo Menapace.

Game On Competition; Build the next generation of web-based games

We are asking you to use bleeding edge Web technologies to invent new game mechanics, create new story lines, engage diverse audiences, introduce aesthetically challenging content.

• Make browser-based mobile games, hackable gamesand games for learning
  
• Win a trip to the Game Developers Conference  to meet industry pioneers.
• Have your completed game featured in Mozilla’s Marketplace.
• Submissions open on December3, 2012 and close February 20, 2013. For more info and updates stay tuned here.

We hope  hackable games will be fun for people who like games — and a huge potential for webmaking and learning. -Mark Surman

Don’t just play videogames: why you should hack them to make your own

A few months back Mark Surman wrote a blog post about the potential of HTML5 & the browser as the new platform for hackable games; “These games will let you pull assets and data from across the web into your game world. And, they will let you remix, fork and share to your heart’s content. The result will be fun for people who like games — and huge potential for webmaking and learning.”

Sketch by Mark Surman

I am *very* excited to say that we have kicked off this initiative here at Mozilla under the headline Hackable Games Lab; A virtual lab to create, tinker, and play with games that use the web as a platform and like the web itself, are hackable by design. 

Photo by MozillaEU

But before we go deeper into what we will be doing in the Hackable Games Lab at Mozilla, let’s take a step back and talk about why you should not just play video-games; why you should hack them to make your own.

Growing up I used to spend my afternoon playing with my friends in the (car-free at the time) streets of our Athenian neighborhood.  We would all meet when done with homework (or pretending to anyway) and play different versions of hide and seek, capture the flag and hopscotch. The one game though that we all loved to play again and again was tag, especially customized for different times of the day and seasons. There was the after dark version of tag, an especially adventurous game played in the one empty lot of the neighborhood, that looked especially creepy at the age of seven. Then there was my personal favorite; water tag, the perfect game for a hot summer day (which was practically EVERY day, during the Greek summer).

And then it was Christmas of 1989 and everyone in my neighborhood got a Gameboy as a gift.  Thank god I got one too, otherwise it would have been a struggle to fit into what was our new daily routine; still meeting after school but this time to play endless hours of Tetris, Super Mario Land and Final Fantasy Legend. Final Fantasy was definitely my favorite one that year, since I loved the role playing aspect of it and the fact that you had choices in the game. Also there was a forbidden love story involved which I could relate to as a teenager. I remember wishing I could customize my character or add new worlds to the game. This seemed impossible at the time; sure making my own version of tag was a nobrainer, but making my own version of Final Fantasy Legend? oh god no! In my mind that was a sacred task left to god like Japanese Legends- indeed-. 

Photo by Claudio Midolo

Fast forward years later, and I was working at Institute of Play in NYC teaching 6th graders game design at Quest to Learn; one of the first activities we did together at the time was to draw a storyboard that would answer the question; “What are the steps a game designer takes to make a new game? “. The goal of the activity was for the kids to theorize on the process of game creation, preparing them to go through it themselves. Looking at their storyboards at the end of the activity, I remember that what hit me was the way the students depicted the game designers; like me at their age, most of them had drawn this image of a game designer being something close to a god looking character. Also in all 60 drawings of them, the game designer was a guy.

Unlike my 8 year old self though who would have never even conceived as possible or even *real* the career of a game designer; the Quest to Learn kids took on the identity of game creators throughout the year - boys and girls with equal passion- by eventually making their own full fleshed games. However, for the majority of youth who has never taken a game design class or has met an actual game designer (do they really exist?) moving from players of games to actual makers of games seems like a giant leap. So giant it remains inconceivable.

I will make the argument at this point, that we are at a pivotal point were this perception of game development being something immensely hard to achieve as a young person is  changing; and there are many reasons for this shift:

One is that more and more mainstream games include mods and level editors, such as the giga hits Little Big Planet and Minecraft that only prove how much players like to be creators of their own game world.

Screenshot of the Little Big Planet 2 editor by @kirkhamilton

Then languages like Flash and Python make it really easy to build your own simple mini games. Even the public perception of videogames as an evil medium, a waste of time as it is often put, is seeming to change; a whole new movement of using games for learning, involving many policy makers has put front and center the 21st century skills youth has to gain by making their own games.

Finally, projects like Scratch, PlaymyCode, and Mozilla’s BrowserQuest, Gladius and Bananabread open up a whole lot of potential in terms of re-imagining play as an open system and the web as a platform in its own means.

Building on this momentum we are introducing the Mozilla Hackable Games Lab to:

Empower more people involved in digital making and building on our Webmaker initiative move them from players to makers of games.

Introduce the web as the new game platform; a space that allows us to develop new, innovative games and mechanics that we cannot even imagine yet.

Level up the programming skills we are currently teaching with Thimble and introduce languages like Javascript, as well as support the development of systems and design thinking skills that game design so nicely embraces. We also want to provide more interest-based intro points into webmaking, that is accessible and appealing to a broader audience; everyone loves games!

Build a community of teachers and grassroots instructors advancing the work around web and game literacies.

Foster diversity in games for different audiences. Although the audience for gaming has expanded out significantly, the  diversity of those actually making the games has yet to follow. What we want is to give that audience the power to make games that represent who THEY are and what THEY like.

And finally create consumer-grade tools and applications that make it easier for anyone to create games on the web.

I am flying to Toronto this week for the Mozilla All Hands and I am sure I will be writing plenty of updates soon about all the Hackable Games Lab soon-to-be-launched quests; including a Game Arcade at Mozfest and the sequel of the successful Game On competition that Mozilla Labs run in 2010.  Meanwhile here is the full prezi that I plan to give at All Hands and you should feel free to drop in our next Hackable Games Call on the 19th of September at this Etherpad.

And since today is the 46th anniversary of Star Trek, I leave you with an appropriate group picture of the Hackable Games Lab crew.

Robots! Localization! Future Libraries Mozparty in Greece!

One of the (endless, really) reasons I love my job at Mozilla is that it is driven by a global community of webmakers from places that range from Nigeria, to Australia, to…Greece! During our Summer Code Party we have seen this community in action organizing Mozparty events in more than 70 countries. In that spirit, it was especially exciting for me to see an event organized in my home country of Greece- by an inspiring project called Future Libraries.

Funded by the Stavros Niarhos Foundation Future Libraries is part of an initiative that aims to bring youth together to tinker with media and technology, become makers and grow a community of connected learners.

What makes the collaboration with the Future Library in Veria, Greece unique ( aside from my obvious enthusiasm for working with Greek educators) is that it was an opportunity for our Learning Team to localize and integrate Thimble content to an interest driven event.

When we first started talking with George Bikas, one of the superstar mentors at the library, he explained to us that he had planned a Robotics workshop and was looking to integrate a Thimble activity in his curriculum. Together we chose to hack the Make your own web-based “how-to” Thimble project and adapt it to what he wanted to do.

Thimble’s Make Your Own Web-Based How To, localized in Greek

A few days later, we had a Greek version, simply made by directly editing into Thimble in order to translate the comments and fonts, then publishing and using that link as a new project (Check it out here). Pierros a MozRep from Athens (also known amongst the Learning Team as “The Awesome Pierros”) who was vacationing close to Veria (extra MozRep points of incredible commitment) came to help George with the facilitation. A great week of making followed with the kids creating tutorials for others on how to assemble their own “professional” as they stated robot.

Robot Maker in action, Picture by Veria Public Library

One of the tutorials made by the youth who participated

In the next months we will be working closely with George and Dimitris from Future Library as the Hive Pop-Up in Athens will also start taking shape (more exciting Greek stuff there). In the meantime, this is an inspiring story for our community on how we can easily localize content to make it relevant and accessible to local communities. Also as we are designing new Thimble projects it is good to keep in mind ways to include modular projects like the above one, that can be easily included in an interest driven curriculum.

And if it’s not all Greek to you, you can check some of the links below from the webpages the kids made, kindly collected by George.

https://thimble.webmaker.org/p/p9b
https://thimble.webmaker.org/p/p9c
https://thimble.webmaker.org/p/p9m

We are all made of stars; designing constellations for mozbadges

A few weeks ago we talked about Alchemy as a metaphor for designing the mozbadges assessment system. Now that we have reached the middle of August and that the perspective of spending a few days away from the big city to enjoy say Mediterranean waters and a sky full of stars, it seems like a good time to write about constellations - as one should. Constellations of badges that is. In specific, I will share in this post some sketches and ideas for what Mozbadges we want to release in the course of the next year- and yes they look like constellations.

Why constellations you might ask? Well aside from being inspired by summer escapades and the fact that I played A LOT of Skyrim this past winter- we always describe web literacies in the Learning team as a system; A system of interconnected and ever-evolving skills. A system with many entrance points and different pathways to mastery. One defined by the learners’ choices and what the community values as important. A system that in my head looks like a constellation of badges.

Skyrim Skills Constellation, Image by Eric Guzman

Enough with the dreamy part of the post and time to get into specifics; we are imagining three release phases for rolling out Mozbadges. In the sketches below I will show some first ideas of how the system will evolve throughout each phase (low, medium and high bar). Then I will guide you through the mozbadges that we are considering for the first “low bar” phase.

So, first thing first; in the “low bar” we are designing a constellation of stealth (automatic) mini badges issued through Thimble & Popcorn, that accumulate to lightweight skill badges like a badge recognizing HTML mastery. Additionally we are suggesting peer badges that can be issued directly from one peer to another via email. The web literacy track that we are assessing through this phase is “Author”. (Check Doug’s post for more on the other tracks)

Below an image illustrating the constellation (click here to see it bigger on Flickr)

For the next phase, what we call “medium bar”, we are designing a constellation of stealth (automatic) mini badges that are issued through Thimble and Popcorn, that accumulate to bigger skill badges recognizing for example CSS & HTML mastery. These badges will accumulate in different levels, will be assessed by peers through endorsements and rubrics and will connect to a big web literacy badge such as the Owl (Authoring) badge (see below) and the Dolphin (Exploring) badge.

Below an image illustrating the constellation (click here to see it bigger on Flickr)

For the last phase, what we call “high bar”, we are designing a system of different constellations made of stealth (automatic) mini badges, peer assessed skill badges  and web literacy badges . Those badges are connected and once a learner obtains a series of them she unlocks new learning pathways. During this phase we will design assessments for all the web-literacy tracks (Authoring, Exploring, Building, Communicating,Protecting).

Below an image illustrating the constellation (click here to see it bigger on Flickr)

Now that you got a glimpse of the big picture for each of these phases, you can also read below to get a better idea for the specific mozbadges that we are considering creating for the “low bar” phase. 

*Alert: these are presented in working format, they are preliminary ideas and names for mozbadges subjected to iteration and community input. Please be oh so kind and leave your feedback in the comments at the end.

MINI BADGES: These are issued through Thimble & Popcorn, to provide the learner with dynamic feedback as they go and have small value in the ecosystem.

In this category, here are some sample mozbadges;
General badges
1) #icanfixstuff
    •    What is it: a badge that recognizes fixing broken code (i.e. Map of Arcade)
    •    How do you get it: a user fixes syntax errors such as open tags etc.and gets this badge on publish/ validation
2) #andanotherthing
    •    What is it: a badge that recognizes adding explanatory comments into a page
    •    How do you get it: a user adds new comments in the page and gets this badge on publish/ validation
3) #icanspeakyourlanguage
    •    What is it: a badge that recognizes adding/editing accessibility content to a page
    •    How do you get it: a user adds/edits tags that ensure accessibility for hearing (transcripts, volume options), vision (descriptive alt text tags, type size), mobility (large links) and gets this badge on publish/ validation

HTML mini badges
4) #imagemaker
    •    What is it: a badge that recognizes adding an image/ using the <img> tag into a page
    •    How do you get it: a user adds a new <img> tag or changes the link within the code
5) #mediamaker
    •    What is it: a badge that recognizes adding/editing an <i frame> into a page
    •    How do you get it: a user adds/edits a new <i frame> tag and gets this badge on  publish/ validation
6) #audiomaker
    •    What is it: a badge that recognizes adding/editing an <audio> tag into a page
    •    How  do you get it: a user adds/edits a new <audio> tag and gets this badge on  publish/ validation
7) #editor
    •    What is it: a badge that recognises adding/editing an <p>, <h1> into a page
    •    How do you get it: a user adds/edits a new <p>, <h1> tag and gets this badge on  publish/ validation
8) #hyperlinker
    •    What is it: a badge that recognizes adding/editing a <a href> into a page
    •    How do you get it: a user adds/edits a new <a href> tag and gets this badge on  publish/ validation
9) #todoer
    •    What is it: a badge that recognises adding/editing <ul>, <ol> and <li> into their code
    •    How do you get it: a user adds/edits a list and gets this badge on  publish/ validation

CSS mini badges
10)#superstylin
    •    What is it: a badge that recognizes adding/editing the <style> section of a page
    •    How do you get it: A user gets this when they change one or more of the following; the positioning values, hex numbers/color, fonts/sizes.

11) #codecontainer
    •    What is it: a badge that recognizes adding/editing a <div> into their code
    •    How do you get it: a user adds/edits a <div> and gets this badge on  publish/ validation
12)#firstclass
    •    What is it: a badge that recognizes adding/editing a <class> into their code
    •    How do you get it: a user adds/edits a new <class> and gets this badge on  publish/ validation

Popcorn mini badges
13) #mediaaggregator

Achievement mini badges
14) #Imadeathimbleproject
    •    What it is: a badge that recognizes publishing a Thimble project
    •    How do you get it: A user gets this when they publish a project. The badge could be associated to a specific project i.e. #mememaker #bakerybasher

15) #Imadeapopcornproject
    •    What it is: a badge that recognizes publishing a popcorn project
    •    How do you get it: A user gets it when they publish a project in popcorn

CUMULATIVE BADGES; These are stealth (automatic) accumulative badges issued through Thimble & Popcorn. They hold higher value in the constellation.

In this category, here are some sample mozbadges;

1) HTML Basic
    •    What  is it: a badge that recognizes understanding of various HTML tags and syntax.
    •    How do you get it; A user gets this when they have received a combination of X number of the HTML mini badges above.

2) CSS Basic
    •    What  is it: a badge that recognizes understanding of CSS syntax.
    •    How do you get it; A user gets this when they have received a combination of X number CSS mini badges.

3) Storytelling
    •    What  is it: a badge that recognizes understanding of telling a story through video.
    •    How do you get it; A user gets this when they have received a combination of X number of the Popcorn mini badges.

4)#Iamawebmaker
    •    What  is it: a badge that recognizes publishing x projects
    •    How do you get it: OpenBadger tracks the achievement mini badges you’ve gotten and once you’ve earned x #, you are issued the #iamawebmaker badge.
  
PARTICIPATION/ CONTRIBUTION BADGES: These are manually issued badges through OpenBadger recognizing participation and contribution in the community.

1) #mozpartylegend
    •    What is it: badge for being part of the community
    •    How do you get it: Mozilla issues through OpenBadger based on email address (manual), you claim through OpenBadger with claim code

2) #mozpartymaker
    •    What is it: badge for participating in a SCP or other webmaker event
    •    How do you get it: Mozilla issues through OpenBadger based on email address (manual), then you claim it through OpenBadger with claim code.

3) #mozpartyhost
    •    What is it: badge for being part of the community
    •    How do you get it: Mozilla issues through OpenBadger based on email address (manual), then you claim it through OpenBadger with claim code

======================================================
Meanwhile, if you want to get a full on blast presentation, Erin and team will be guiding you through the mozbadges plan in tomorrow’s Mozilla Webmaker Community Call. You should also most DEFINITELY check Jess’s post including a brilliant cover of Lionel Richie’s “Hello” explaining how this is going to work in Thimble as well as how it fits in the grand Open Badges scheme. 

So- if you made it thus far in the post, you deserve the theme song for today performed by Moby, a favorite choice for a starry summer night.

ps. A special dance of thank you goes to Carla for taking a first stab at wordsmithing the badge names above as well as Sean Martell for letting us use his badge artwork.

Ich bin ein (Pfannkuchen) Berliner and other (Open Web) Thimble tales

Last week I flew to Berlin to work with the Peer to Peer University (P2PU) folks out of their pop-up office at the (amazing) Agora Collective co-working space. I also learned how to pronounce “Pfannkuchen” and discovered Club Mate, the absolute drink against heat and long working hours.

My focus for the week was to develop and play-test a set of Mozilla Thimble projects that teach youth best practices about using Open Web resources, in collaboration with  Jane Parker from Creative Commons as part of the newly launched P2PU School of Open. (Find out what went on the rest of the week with School of Open here.)

But first a bit of background; During the past two months we have created a variety of projects in Thimble ranging from mini games and internet campaigns to tutorials and awesome animal builders. For this project me and Jess Klein tinkered with the idea of a playful narrative, almost like a hackable comic strip under the title “Open Webville.”

Our  learning goals were;

a) get a better understanding of how to use open materials, such as CC licensed images, videos and songs.

b) Takeyour first steps in creating your own open licensed content.

c) Teach others how to do  a) and b)

But the question remains; Open Webville! Qu’est que c’est?

The Open WebVille isn’t just your run-of-the-mill “Ville”. You see,  it’s managed by Madame Lille a former french politician and robot who is relaunching her career in a new  direction so she can focus more on velvet bird painting, organic  producing and protecting the Open Web.

In this series of Thimble projects your goal is to help Madame Lille by visiting various location in the town such as an Art Gallery, a Movie Theater and a Disco and contributing open content such as CC licensed images, videos and songs. Moreover you are asked to put together a guide book for Open WebVille to help others understand how to use open materials.  By the end of your adventures, you have to contribute your own open creation to Open Webville.

Below screenshots, summaries and test links for each of the three Thimble projects

Art Gallery in Open Webville; Madame Lille is a robot with a knack for the arts who has recently opened her own Art Gallery in Open Webville. Her passion is collecting velvet bird paintings but she is looking to expand her collection; In this project you will help her fill in her Art Gallery with images of your choice. Mais attention! the images you choose need to be under a Creative Commons License.

Project test link here: https://webpagemaker-dev.allizom.org/en-US/projects/dropbox/gallery/edit

Cinema in Open Webville; One of the most popular spots in Open Webville is the Cinema! Madame  Lille  wants to bring to the citizens of her town some new screenings from the  Web. Can you help her find a good clip from Le Web?It can be anything  you want a music clip, a film trailer or even a minecraft video. Just  remember to give attribution to the creator. Oh oui, and you will have  to show the rest of the Open Webville how to upload their own clips by filling the guidebook section of the page so  they don’t have to watch the same screening forever! That would be “quel domage”!

Project test link here: https://webpagemaker-dev.allizom.org/en-US/projects/dropbox/cinema/edit

Disco at Open Webville: What  a great day you had so far in Open Webville. You visited the Art  Gallery and then watched a movie at the Cinema. It is time for some  dancing! Welcome to Open Webville’s very own disco. Rumor has it that  you are an incredible DJ, can you play the next song?  And don’t forget  to credit the creator and fill in the guidebook with tips so the rest of  the citizens of Open Webville can take the decks too!

Project test link here: https://webpagemaker-dev.allizom.org/en-US/projects/dropbox/disco/edit

We also created a (draft) version of a course that incorporates these projects at the P2PU School Of Open that you can check out here https://p2pu.org/en/groups/open-webville/ . Once we have the final working links we hope to attach badges and peer assessments to the course. ( Check out some of the badges we begun discussing at this etherpad )

If you have followed this blog, you know by now that as Mozillians we are all about working in the open, prototyping fast and play-testing our projects in order to integrate feedback and iterate based on the input we get from the community.

So naturally we concluded our project with a School of Open Mozparty at the Agora Collective to playtest the Open Webville projects.

Despite the rainy weather a good group of people showed up ready to create something in the open web and eat some Pfannkuchen Berliners (obviously).

The energy around the table was great and we got some feedback for improving the Open Webville Thimble projects.

Also the hacks were really imaginative, with this Open Webville Disco shown below being priceless; it is featuring our beloved Bakery Bash dancing cat gif and David Hasselhoff, courtesy of Michelle Thorne. Also it was great to see people using Thimble to code a webpage from scratch.

We also included an ice-breaker dancing activity at the beginning of the mozparty to get people to know each other and introduce them to the concept of the open web. The activity was based of the game zip-zap-zoom and Jess Klein’s Hack a Dance extravaganza.

Here is a version of the rules;

1. Make a circle and start the music (we used Call Me Maybe due to Mozilla Foundation IRC obsession over the best remixes of that song last week)
2. The goal of the game is to pass dance moves around the group. To make things harder, you can only pass a move using the instructions “Zoom” or “Zap.”
3. “Zoom”= copy the move exactly as a person next to you has performed it
4. “Zap”  = remix the move that a person who is sitting across you has performed
5. The game is played in two rounds; the first round is played using Zoom and then Zap until everyone is dancing
6. In the second round, ask everyone to get a coin or something valuable in their hands. Then designate one person to perform all the dance moves.
7. Each time a player wants to either Zoom or Zap that person, they have to give them money or the valuable object of their choice. 

The goal during this activity was to make the participants reflect on the difference between the experience of being able to use openly and freely each others creativity versus a copyrighted and closed experience.

In conclusion, this was a great prototyping and play-testing experience with participants enjoying making things on the web using different Thimble projects and us gathering valuable feedback that we will be incorporating on the next iteration.

In the meantime extra thanks go to the “always on top of everything” Michelle Thorne and Bekka Kahn for their support during the mozparty event, to the “School of Open musketeers” Jane Parker, Pieter Kleymeer & Molly Kleinman  for their input and inspiration as we developed the content and activities, to the “fast and furious” Laura Hilliger who helped code the projects, to Francesco Ferrante for providing me with inspiration when drawing Madame Lille and of course the wonderful P2PU community who I was lucky to get to hang out with for a week.