Wednesday, June 27, 2012

Weekend of Learning

Last weekend, we launched the Mozilla Summer Code Party with the Global Weekend of Code, which was a resounding success. Over 100 events across over 30 countries, with over 1000 people learning to code. And there are at least 4x as many event scheduled for the rest of the summer. Now that’s a party.

Most of the partiers used our new webmaking tools: Thimble and Popcorn Maker. As I’ve talked about before, we have developed a number of projects and templates that sit on top of these tools and give learners an interest-based access point into some webmaking of their own, and of course, some learning in the process.

My role last week was on the Party Squad, monitoring the social medias and retweeting / posting / sharing all the awesome stuff that came through. It was an inspiring place to be in - just amazing to see all of the webmaking that was occurring. I wanted to reshare a few of the projects here. I know you’ve probably seen them all via our constant stream of blogs, tweets, posts, etc. last weekend but it’s worth taking the time to dig a little deeper to expose the learning that’s actually occurring underneath. 

Sell it!

Source / Built from the HTML Wrangler Project

This one may seem simple at first - it was built from what’s intended to be an entry level project for people that are total newbies to HTML and might be intimidated by a lot of code right away. The project introduces the basic concept of tags and comments, and then some text handling tags like <p>, <h1>, <h2> and linking. So there is actually a lot going on in there. And this maker not only mastered these HTML basics, but also added in text that was relevant and interesting to him/her, so that it became something that s/he made that mattered. And learned some HTML in the process.

Map

Source / Built from the Hack a Map project

This is another entry level one that requires the learner to fix a bunch of issues in the code. The fact that you see the page without big errors or floating <’s means that the maker successfully fixed all the issues. This requires you to understand the concept of open and close tags and other HTML syntax details, and then also introduces you to images and text handling. This particular maker decided to add a video to the page. The caption says “i put up this video cuz i figurd that lots of people would like it”. *smile* Thimble currently requires that videos be handled through iframes (because of security issues with the <video> tag) so this wasn’t a super easy thing to figure out how to do. It’s possible the maker pulled it from another project, but isn’t that the beauty of the Web? Of course, there are design aspects like how to surface the video above the map images, but that wasn’t a core part of this project and the maker was still able to hack it to add his/her own content. 

Bakery Bash

Source / Built from the Bakery Bash project

This project focuses on image handling, and helps makers learn the <img> tag, how to find and use image URLs and how to resize images, all under the theme of creating an invitation list for an awesome party with Loaf Cat. (If you don’t know Loaf Cat, ask the internetz) Makers are also asked to work with hyperlinks and link out to secret guests that will attend as well. This particular maker made this his own by using pics of NBA stars and cartoons (and a tomato?) and linking out to super heroes and characters. S/he even hunted down and edited the intro message to read “Porta Pottys Rock”. Silly? Yes. Legitimate HTML skills and interest-based making? Absolutely.

A New Creature

Source / Built from the London Zoo’s Awesome Animal Builder project

This is one of my favorite projects - it’s by the London Zoo and it asks makers to read about several endangered species and then create their own creature by moving HTML images around, and then wranglin’ text and lists to describe the new creature. There’s a lot on the page too, so you have to get comfortable sorting through the code to find the parts you want to move around and edit. And on top of all the awesome webmaking skills required, there are some great learning opportunities around conservation and biology. You can see here that the features and description of the new animal are pulled together from features of the real animals themselves, so the maker was internalizing those details about the real animals and mashing them together for the new creature.

TMNT Zombies

Source / Built from the Get Off My Lawn! project

This one is worth calling out because it requires some pretty advanced CSS positioning. The game involves using %, em and pixels in CSS to move objects to block zombies that are invading your lawn. Not only did this maker demonstrate positioning skills by moving everything to the bottom right corner, but also hacked the game completely and swapped out the zombie images for images of their own. I think some of the most compelling learning/making that we’ve seen is people that not only complete the challenge, but completely hack the process and page to make it something that they care about. Brilliant.

Gallery

Source / Built from ??

This one was just awesome. One of the things on the Thimble roadmap is a gallery so that people can share the things they built with other webmakers. Well this particular enterprising maker just used Thimble to build their own gallery highlighting the links out to the projects that their group made. It’s meta and it’s awesome. Maybe they started with a project and made it from there, made they just used the plain ol’ editor. Doesn’t matter how they got there at all, they knew enough or were able to hack together enough to make a page that suited their needs. Did I mention that I love the Web?

Robot Popcorn! (mmmmmm)

Source / Built with the Popcorn Robots template

Popcorn is our awesome web native film hacking initiative/technology/tool set and we just released an early version of Popcorn Maker that let’s makers build stories through video augmented by information that is relevant to them/their story. In this video, the maker adds a map of London and some pictures of their own, as well as some pop-up captions as the story progresses. This template also allows you to add comments that the robots will read in a robot voice. Very fun, but also some heavy duty skills required around video wrangling, open video, procedural storytelling, storytelling in general, information gathering and curating, etc. I particularly love that the maker started with a screen that says “I have no idea what I’m doing” and yet was able to add a bunch of personal touches and hacks to the video. 

Summary

So in summary, despite some of the surface simplicity of some of the projects, there is a lot of learning and web literacy behind them. I think we should be pretty proud of that. Of course, we don’t yet know what level of skills people are coming in with, and we hope to build more of that into the experience so that we can truly measure the learning. Anecdotally, we heard lots of people say “I am learning so much” and “I can’t believe I just did that”, and we have some basic survey results that I need to analyze and share soon. But above and beyond that, its hard to say right now how much people learned in a traditional pre/post kind of way…but from my viewpoint, we got 1000+ people engaged in making stuff about things that they care about online, and demonstrating a lot of webmaking skills in the process. I’ll call that a victory.

And with that, I leave you with this:

Source