One.More.Time. Playtesting the Mozilla Webmaker Projects

I am a ____________ Webmaker, and other badges for the Summer Code Party

After last week’s sneak peek into the Web Arcade Projects ,that we have been busy prototyping with all the Learning & Tech Mozillians, the time has come for a sneak peek into the specific Badges for Mozilla’s Summer Campaign.

During the Summer Campaign we are expecting people everywhere who are joining the Summer Code Party to MEET up to MAKE something cool and LEARN how the code.

The badges suggested in the paragraphs below aim to seed a community of practice, celebrate creativity on the open web and showcase the different types and (ever changing) roles one can take upon as a webmaker.  (more on the badge system -and Caine’s arcade- at Carla’s blog)

The Webmaker projects will support a suite of digital and analog badges. In this blog post we will talk about some of the digital badges, which vary from badges awarded by the system when you publish your remixed webpage, to badges that you can email your peers, to badges that you can award to yourself. All badges will be using the Openbadger tools.

I will start with this last one type; a badge that you award to your self. I know this might sound a little bit strange; why would I want to give my self a badge? One could say that sounds like cheating or take it even further and call it straight up self-centered. But bear with me as I give a little bit of background.

The idea came about from talking to friends about what it means to be a “webmaker.” People would get mixed up when I told them that webmakers are not necessarily people who make things with technology, programmers if you will. For me, I argued, being a webmaker is a way of looking at things and an identity that we take upon when being active citizens of the web, and yes it might also mean that you get to learn how to code a bit. (Michelle Levesque who is THE expert has many answers about what it means to be a webmaker on her blog)

So what if I thought there was a self-assessment badge, a badge that called you to fill in the sentence I am a _______ webmaker, a way for you to reflect on your ever evolving identity as an active citizen of the web. 

In classic “play-testing” mode I asked a few friends that were in the Mozilla London offices today, to fill in the sentence above and here is what they came up with; multifaceted webmaker, creative webmaker, novice webmaker, webmaker TROUBLE, girl webmaker.

Enter “The Web Arcade”; teaching basic webmaking skills to teens

A few weeks ago I wrote a blog post about why learning on the web should look like the web. In the meantime I joined Mozilla’s Learning Team and together we have been working on something called “The Web Arcade” part of Mozilla’s Summer Code Party Campaign. The Web Arcade includes a set of projects aimed to youth, that can help anyone get started with HTML & CSS by remixing playful pages full of well… web goodness. 

The tool we are using for “The Web Arcade” is called Webmaker (read Jess Klein’s blog posts to find out more) and it has been build upon @iamjessklein and @toolness    Lovebomb, and is basically a brilliant editor and renderer all in one screen, that allows you to remix and share your web masterpieces with the world. 

When we originally perceived “The Web Arcade” with Jess Klein a few weeks back we imagined it as a series of mini games, what we later came about to calling “projects” specifically designed to scaffold the experience of learning how to code a webpage for the first time. 

Concept Art, in progress

The projects in “The Web Arcade” are designed to provide scaffolded yet open ended learning experiences; learners begin by hacking broken webpages to master basic HTML/CSS coding skills. As they progress in the Web Arcade they start learning about bits of code such as tags, elements and attributes. As they piece those bits of code together they have the choice of moving into more advanced projects, all while hacking webpages to create new ones, constructing theories of how the Open Web works and taking on the role of webmakers. 

Below is a rough sketch of how the system works:

Following this sketch, we started building different projects in the Web Arcade. Here is a sneak preview of what is currently work in progress: (for more projects you can also check out Laura & Jess fantastic blog posts) 

Welcoming Message:

“Enter the Web Arcade to explore the world of the Open Web ; a place made out of serious cats, planking videos and minecraft  empires! The Web Arcade offers a collection of mini games that help you level up your HTML & CSS skills and MAKE your very own web masterpieces.”

1. Project: HTML Card Game
   A creative and strategic card game that blends friendly competition with learning the building blocks of the web! Download and print a stack of game cards to get started.  Gameplay occurs as you strategically mix and match cards your hand to create unique snippets of code and defeat other players’ hands. May the best webmaker win! Learning Objectives: HTML syntax
    
2. Project: Map of the Web Arcade!
   This is the first project in the Web Arcade, a Map to guide you through your adventures. Not all the locations on the map though have a name and certain things look broken! Uh-Oh! Your goal in this project is to activate the map and even add your own flair to it. Get familiar with the syntax behind HTML by closing any open tags <> </> or fixing broken links that are missing a ” or two “”. Upon activating the map you reveal certain links that show you new projects. 
   Learning Objectives: <>, </>, what is a tag, how to open and close tags, what is an element.
    
   The Map Missing closing tags and links 
    
   Map of the Arcade ready to be edited in the Webmaker tool
   
   Map of the Arcade with fixed links
   
   Map of the Arcade hacked and personalized
    
3. Project: Passport-O-Matic: A unique blend of HTML agility,CSS and firepower. YOU are no ordinary character. Your goal in this project is to MAKE your undercover passport in order to explore the arcade defeating every challenge with your self-esteem and special powers. Learning Objectives: <title> <head> <body> <p> <img> <align>, src, privacy , CSS
    
4. Project:  The Bread Cat Bakery: The Bread Cat Bakery is throwing a party. Unfortunately the only attendees are undercover Serious Cats. Bummer! Your goal in this game is to change the <img> and <a> tags to include whoever YOU think belongs at  this party. Did someone say Brony? Learn about attributes such as src to make sure there is no undercover surprises this time around. Learning objectives: linking, <a href=”..”> </a>, src attributes, elements
    
5. Project: Open Webville: The Fantastic Open WebVille isn’t just your run-of-the-mill “Ville”. You see, it’s managed by Madame Lille a recent alumnus from the School of Farming, a former politician who is relaunching her career in a new direction so she can focus more on velvet bird painting and organic producing. In this project Madame Lille has started putting together a guide book for Open WebVille. Use your superstylin’ ways and HTML dexterity to hack her guidebook and help her fill it in. Learning objectives: what is the Open Web, <a href=”..”> </a>, src attributes, elements, <title> <head> <body> <p> <img> <align>, CSS.
    
6. Advanced Project: Internet Famous: Use your HTML and CSS swagger to mix and match elements to make a webpage featuring a meme to conquer all internet memes. Let your inner serious cat or Ryan Gosling hey girl shine  and claim your Webmaking powers by posting a video of how you did it. Learning objectives: synthesizing all previous HTML &CSS, design thinking and open web skills.
   
   Internet Famous Project ready to be hacked and become famous
   
   
   Internet Famous Project in the webmaker tool
    
7. Advanced Project: Web-structable. Have you always wondered “why people don’t get hand turkeys right? or why it is hard for some to sleep at night? (rhyme)” Well the time has come for you to make your contribution to the world of the open web and create a fine webpage tutorial using your HTML & CSS wisdom. Learning objectives: synthesizing all previous HTML &CSS, design thinking and open web skills.
   
   Web-structable Project ready to be hacked
    
   Web-structable Project in the Webmaker Tool
   
   Well that is where we are for now, I am imagining there will be plenty of iteration going on as these mockups become working prototypes, as we come up with badges and as we keep testing our work in the following weeks. Till then please check our  Flickr pool and Wiki for updates, and leave your feedback in the comments :)

Assessment and the Web; an illustration

For the past months I have been researching innovative approaches to “assessment” on the web; I have read a lot of articles and papers (I even helped write one), listened to many people talk about it and argue over it, and have come to one conclusion; Assessment has more first and last names than a secret agent in international missions; There is embedded assessment, formative assessment, evidence based, peer assessment, game based assessment (a personal favorite) stealth assessment and self assessment, the list goes on. As a result when discussing online assessment there is one thing that becomes very clear; nobody is quite sure what it really means! Which I personally think is a good thing, since I feel that when designing assessment for the web we should look at many different theories and apply whatever pieces fit the best. However, being the visual type I couldn’t help but draw a small illustration of assessment and the web. Let me know if you found it helpful!

Davidson, C. N. (2011). Now you see it: How the brain science of attention will transform the way we live, work, and learn. New York: Viking.

Educause (2011). Deeper Learning: Resources. Retrieved from  http://www.educause.edu/Resources/Browse/Deeper%20Learning/31407

Gibson, D. (2009). Designing a computational model of learning. In R. Ferdig (Ed.), Handbook of research on effective electronic gaming in education (2nd ed.). Hershey, PA: Information Science Reference.

Halavais, A. (2012). A genealogy of badges: Inherited meaning and monstrous moral hybrids. Information, Communication and Society 15(3), 354-373, doi: 10.1080/1369118X.2011.641992

Schwartz, D. L., & Arena, D. Choice based assessment in the digital era. Stanford University School of Education August 2009. Retrieved from http://aaalab.stanford.edu/papers/ChoiceSchwartzArenaAUGUST232009.pdf

Star, S. L. (2010). This is Not a Boundary Object: Reflections on the Origin of a Concept. Science Technology And Human Values, 35(5), 601-617. Sage Publications, Inc. doi:10.1177/0162243910377624

Learning online; Nyan cats and other web-animals

There are many things I love about the web. One of them (naturally) is cats.

So when last week this video  called “Catsplosion” - showing how you can make a cat fountain in Minecraft - (extract below) hit my radar it got me ( and many other Minecraft fans) really excited (and partially dizzy).

“271kochu created a “fountain of cats” in Minecraft by building a structure that extended to the top of the world, then exploiting the game’s simple flocking rules for virtual cats to entice the sprites to form a never-ending fountain that is a joy to behold.” from boing boing

271kochu’s video not only displayed a hilarious cat fountain (purring effect included) but also went through explaining to others how they can build a cat fountain in Minecraft themselves. As a result there have been different style cat fountain videos posted on youtube this week and some intense discussion involving terms like “despawning” (cats in outter space).

There are about 365,000 Minecraft tutorials on Youtube, some of them better than others, guiding you step by step through building your way through the game. The catsplosion video is pretty unique in that it also stands as joke by itself making the video appealing to (cat loving) audiences outside of the Minecraft community.

So what is it with cats? and how did they find their way to a blog post about online learning? Well… I have been thinking about learning online (ALOT) these past months due to the work I have been doing over at School of Webcraft and p2pu.org . This is an exciting time for (online) learning, especially with open initiatives such as MITx and Standford online courses as well as all the startups in the field; from Skillshare to Khan Academy. Despite all this happening, for me there is still a big problem with learning on the web; it doesn’t look like the web (which in turn, looks a lot like a catsplosion).  

Let’s begin by acknowledging that one of the problems with learning online is that it looks too much like learning offline; there are “courses” and “teachers” and “students.” And there are some brilliant “courses” and “teachers” and “students” out there, but at the same time the web does not look like a classroom; it is ruled by different norms and motivations. As a result learning online is often not engaging (unless its a Vi Hart tutorial) ,doesn’t scale (really scale, like in a catsplosion way) and there is a challenge, when it comes to assessing different types of learners (even if you are Codeacademy).

Now back to cats, and the webs’ most famous cat in particular.

The original Nyan Cat video has been viewed 66,747,131 times. A 100 hour version of it has been viewed 5,215,054 times- which is hard to believe but there you go- and there are around 4,000 remixes, including 168 flag versions of Nyan Cats (here is a hilarious greek one  in tribute to my motherland) and some versions of a cat looking at a cat looking at a Nyan Cat video.

So what is it about (Nyan) cats? Well for starters there is something relatively bizzare about them. Its a sense of humor that resonates with us regarding anything weird on the internetz. Moreover there is playfulness in engaging with these videos. As a viewer you take on a silly mindset and follow along the narrative of a tart looking cat with a rainbow flag flying into space - because within that context its really exceptionally engaging. So what if online learning had a sense of web-infused humor? what if it was playful and hilarious at times.

The other thing with cats, is that clearly their appeal has a massive scale. You tube has a nice function where you can see the stats for each video, including when it picks up traffic. It’s especially insightful when it comes to viral videos. The Nyan Cat for example otherwise known as Pop Tart Cat was posted as a gif animation on the daily comics site LOL-COMICS run by illustrator Chris Torres on April 2nd, 2011. On April 5th the animation was posted on Youtube by saraj00n  but it was only till April 12th, when the popular show Tosh.0’s blog linked to it that it became viral. (more on all the Nyan cat history here )

So what if online learning went viral? what if sharing and curating content were part of the actual learning process.

Finally, wether its Nyan cats, breading cats or catsplosions, one great thing about the web is that you can remix it and make it your own. The (great-er) thing about that, when it comes to video memes, is that people make remixes of an original meme really well - sometimes even better than the original ones. They spend time and put a lot of effort to add a new perspective, a new punchline and get assessed by the number of views, shares and likes that come along with the endorsements of their peers. So what if assessment was embedded within what people make on the web? within the remixes they post and the reputation they gain. 

Before you get all catted-out, what I m trying to get to in the post is that we have an opportunity here to do things differently, we don’t have to follow the (out-of date) classroom model when it comes to learning online. We can make learning on the web look like the web. And if that involves your occasional web-animal, so be it.

Reaching the end of these lazy Saturday scriblings, I leave you with another bunch of famous web-animals. Till next time-brohoof!

Athens Plaython; playing street games in a broken economy

2011 was a year of many changes in my life; firstly I switched jobs and went from working in a school to working in the field of online learning. Then I switched continents and went from being a devoted Brooklynite to splitting my time traveling between Europe and the US. But most importantly I launched a project called “Athens Plaython” in my hometown of -yes you guessed it right-…Athens, Greece, after seven years of absence (1 week long vacations dont really count), due to me living abroad.  So this blog post will be dedicated to that project and all the great things related to look forward in 2012.

First a bit of background; as you probably already know Greece has been in the middle of an international financial turmoil, often making headlines this past year -yes people take a very concerned look these days when I tell them I am Greek. Truth is things are not as melodramatic as the international press tends to depict them, but the morale is indeed low and the streets are often flocked with angry protesters marching against the austerity measures. So when me and my very talented friend Artemis Papageorgiou started discussing this past summer about working on a project together, doing something playful and FUN in the streets that are often flooded with demonstrations, was the first thing that popped into our mind. 

Following the footsteps of our friends at Come Out And Play in NYC and SF but also groups like Invisible Playground in Berlin, Hide and Seek in London and IgFest in Bristol we decided pretty much in a day to start our own street games festival in Athens- with a twist; not only have a group of awesome big sized games for Athenians to play, but also include a set of workshops that will help youth and adults design their own city sized games & learn about new technologies. 

In typical game design fashion we decided to “play-test” our idea and planned a quick launch in November to test peoples response. We invited friends from NYC, Finland and Athens to showcase some of their best games, mixed in DJ’s from Athens’ hippest indie radio station, partnered with the citys’ best online city guide and included a set of workshops for kids… et voila (many sleepless hours later) we had what you would call a “working prototype” within 2 months of planning! And it looked like the video below…

Around 1000 people attended our event from all kinds of backgrounds and ages, notably playing non-stop for four hours, filling up the space, mind you - during the evening of a highly anticipated soccer game between the two major leagues in the country. Big part of the reason was the great games we had the honor to host; from Gigantic Mechanic’s Shadowplay, to Kaho Abes’ Hit Me, to Christos Iosifidis & Douglas Wilson  Joust, to Eleni Savidou’s Moustag to Brendon Trombleys’ and Maria Mavroudis’ “Pickpocket”. We also included a workshop for kids in the mix (which sold out that week), were along with their parents, kids designed games for their city and learned how to use conductive materials and LED lights to build a basic circuit.  Moreover a bunch of 15 superhero volunteers helped us with everything that had to do with running the event to keeping our cool when things went wrong.

After all was done and we could take a deep breath and start focusing on a bigger festival to launch in September 2012, an unexpected set of good news arrived; we got an award for placing second in a competition organized by the local TEDxAthens conference, where we got to present our idea in a five minute (very stressful) talk. Once again it was amazing to see people’s positive response to games and it only encouraged us to keep “playing”. With that said, one of my favorite moments of the day was playing “Ninja” with a bunch of TEDxsters, one of them wearing a broken leg cast - who remained undefeated till the last round!

To sum up, our goal upon launching the project was to introduce a platform for the local community to come together through playing, interacting and learning. It was our attempt of proposing a lifestyle infused and surrounded by playfulness as a means to improve our everyday encounters and urban experiences. We asked Athenians to get out on the streets and re-imagine their cityscape, use a bench as their headquarters, play with projections on the walls and draw moustaches on their faces. And they did it! In the months to come our tiny team will be growing, we will be seeking more funds to build our festival the way we want it and most importantly; dear Athens we look forward to playing with you more :)