Making tools for webmakers

We want everyone to tap into the full creative power of the web. That’s the point of Mozilla Webmaker. Part of  this is about people: building a global community of webmakers. But another essential element is building tools that both invite people to make cool things on the web and that help them learn how the web works. Last week, we released early versions of two of these tools: Thimble and Popcorn. This post offers background on these tools plus musings on next steps.

A month or two back, Free Software Foundation Chief Counsel Eben Moglen said: “We made the web easy to read, but we didn’t make the web easy to write. Facebook took advantage of this gap.” This is a useful way to look at the challenges the web now faces.

Over a billion people are now on social networks. They use these networks to create and share (awesome!). But they do so only on the terms social networks offer them. Most people have neither the tools nor the skills to tap into the unbounded creative potential of the web (e.g. I want to change how this app works, let me hack it). This seems like something worth fixing.

The goal of Mozilla Webmaker is exactly this: to move people from being users of the web to being makers of the web. While part of this move is about new skills and attitudes, another part has to be about tools and content. Specifically: tools and content that make it easier to create using the full power of the web. Easier to customize a blog template. Easier to add a data layer to a video. Easier to hack a game. And so on. As Mozilla begins to build tools like this, I see three big buckets of things we need to get done:

  1. Build a foundation: Thimble + Popcorn as way to test our making + learning thesis (2012)
  2. Build with the community: add in badges, get community adding content and code (2012+)
  3. Make the app world hackable: add in JavaScript, game hacking, app hacking (2013+)

Of course, this isn’t just about Mozilla: we’re already working with Tumblr, Codecademy and many others who are also building tools that encourage making and learning. But Mozilla does have a clear role to play here, especially around tools that build in the design principle of ‘making as learning’ from the beginning. This is our focus.

Step 1 – Build a foundation

Quickly ship tools that test our webmaker thinking: this was our plan with Thimble and Popcorn. Earlier this year, we agreed we needed to try out our ‘people learn by making’ thesis soon and in the real world.

With this in mind, we designed very simple tools with a collection of ‘hackable’ projects at the centre. Each project is a web page or interactive video template that gives people a) a starting point for making something and b) instructions that help you learn while making.

In Thimble, for example, each project is a single, simple HTML page. All pages include code comments that suggest what part of the page you might hack and what techniques to use. Eg. <!– This is a comment. These comments tell you what to do. The next section is a <H1> header. Edit the text within the header tags to change what words are on the web page. –> Thimble currently includes about a dozen making + learning templates that teach basic HTML and CSS while letting you make a meme, kill zombies or remix an animal from the London Zoo.

In Popcorn, the focus is much more on learning the mechanics of the web while also learning how to tell stories in new ways. The core element of a Popcorn project is a video wrapped in an HTML page template. You are invited to tell your own story by manipulating the video and the template. For example, with the Robots template, you design your own Robot invasion movie by adding in Google maps (learn how APIs work + target the robots at your home town), by changing the words the robots say (learn about variables and speech synthesis), or by adding in pictures of people and places the robots will target (learn about links and embedding). Similar templates exist where you can make your own web newscast or create a VH1-style pop up layer on top of your video.

Popcorn and Thimble share a common design philosophy. They start from the premise that remix and making are central to how people have always learned the web. The web is an open, view source world where it’s easy to see a technique in action and then copy it. We’re trying to make that even easier and more explicit by offering tools and pre-made projects that help people learn by making. We think this approach is especially promising for the 1 billion+ people on social media who clearly like to express themselves on online but have no plans of becoming a capital P ‘programmer’. For these people, the starter content we’re offering will be much more important than the tools themselves.

Our goal for this 1st step in the Mozilla Webmaker tool roll out: test this making + learning thesis. See if people like what we’ve made so far. Evaluate whether they are learning anything and what they are learning (see ‘badges’, below). We’ll do this testing and evaluating over the next six months while also shipping improvements plus new content for Thimble and Popcorn.

Step 2 – Build with community

Our next big priority needs to be building Mozilla Webmaker with a community. There are two parts to this: a) building basic tools that offer value to people who want to make, learn or teach and b) creating an architecture of participation that makes it easy for people to contribute content and code. We’ve already started on a) (see above), now we need to get moving on b).

We’ve got a few early wins. Some of the best Thimble projects came from the hack jam we held with NESTA in London about a month ago. Popcorn already has a base of open source code contributors. And, of course, we’ve got well over 500 people who have stepped up to organize a #mozparty this summer. These are big contributions already.

What we don’t yet have is a systematic way for more people to get involved, especially on content, code and localization. As an example: we want to get to a place where large numbers of people contribute Thimble and Popcorn projects for other people to make / learn on top of. I believe that this sort of community-made content will be key to the growth of Mozilla Webmaker. Unfortunately, we don’t have a good way for people to do this yet.

As a first step towards fixing this, we’re going to create an easy way for people to propose Webmaker.org and Thimble content simply by posting it to a Mozilla wiki. We’re working on the specifics right now, but the ideas is that people can review / refine / discuss stuff there, and then we can port the best stuff to our main sites when it’s ready. Obviously, we need something easier and more robust over the longer term: a gallery or repository where anyone can post content ideas into the Mozilla Webmaker universe. We also need easier ways into the code side of our projects. These are both things we’re thinking through with the aim of making progress this year. We’re very open to your ideas.

We also need a way to see who’s who in the community: to know what people are working on; to find people with particular skills; to find people with similar interests. This starts with simple communications tools like the new webmaker mailing list and the #mozparty Twitter hashtag. But we need something more robust and something that works across alot of platforms if we want Mozilla Webmaker to scale.

This is where Mozilla Webmaker badges come in. By the end of 2012, we plan to offer badges to recognize the skills that people have learned and that recognize contributions to the community. The skill badges will include things like “I understand HTML basics” and “I’ve helped 5 friends learn CSS”. We’re still working out the specifics. The contribution badges will recognize those who have helped others and those who have contributed learning content and code. This will give people within the Webmaker community an easy way to signal each other — to know who knows what and who is into what. More importantly, it will also give people a way to show what they learned and for us to monitor what and whether people are learning.

We’re starting work on this 2nd step right now, building a more systematic architecture of participation in parallel with our efforts to test and improve our first set of tools.

Step 3 – Make the app world hackable

Our third big step for Mozilla Webmaker tools has to be ‘teaching real programming‘ — getting people to the point where they can create or remix a game, app, etc. We chose to start Mozilla Webmaker with a focus on HTML and video so we could test our making and learning thesis using basic content that almost anyone on the web can make. But, our ultimate goal is to let people control, configure and create all corners of their digital lives. Games. Apps. Social networks. Civic participation sites. Science projects. And so on. At some point, that means teaching programming, or making programming easier to do.

It’s in this last phrase where one of our big questions sits: do we teach ‘real code’ like JavaScript, or do we adopt / develop a simple tool for producing JavaScript etc. like Meemoo or Blockly?

Our plan for 2012 is to explore both paths. We’re working with Codecademy to get their content on Webmaker.org and to encourage people to use their courses as part of #mozparty. This gives people a ‘learn real code in the abstract’ option. We’ll likely do the same with Meemoo, Blockly and other promising tools: write them up on Webmaker.org; encourage people to use them; and then ask people to feedback on what they observed. This is a good way to promote the work of allies who also want to teach the world to code while at the same time investigating whether there are gaps a tool like Thimble++ could play.

There are already a couple of places where I think Mozilla-made tools — and Mozilla’s learning philosophy — could add value in the ‘learn programming space’. One opportunity is in the realm of hackable games: HTML5 games which are designed from the ground up to be modified. People could be invited to change the game mechanics and or to bring in content from across the web. E.g. imagine grabbing your friend’s picture from Facebook and mapping it onto a rock in Angry Birds. Another opportunity is in mobile apps, especially those designed for rich on-the-fly HTML5 content creation. Eg. imagine a Popcorn-enabled Boot-to-Gecko phone that pulled in all kinds of contextual content and data on the fly, feeding a ready to edit package of content back to your laptop via the web. We’ll explore ideas like these this year at a blue sky and maybe even prototyping level to see what’s possible.

My guess is that this 3rd step in the Mozilla Webmaker tool effort won’t really move into high gear until early 2013. There are a number of experiments planned for later in 2012, but these are mainly about seeing what’s possible and giving us enough insight that we can develop a solid roadmap for our work in this space.

Admittedly, this is a pretty big dream. Mozilla Webmaker is ambitious on purpose. We need this kind of ambition if we want a world where we all understand and can shape our digital lives.

But we also need a plan to turn ambition into reality. We made the beginnings of a plan when we launched Mozilla Webmaker earlier this year (you can read it here). I’ll post a review of where we’re at with this plan sometime in later July, including how what we’ve learned from tools like Thimble and Popcorn is helping us evolve the plan.

In the meantime, there is one thing we know for sure: Mozilla is way too small to take on the Webmaker vision on its own. As I said above, we need to a) figure out how we can provide something valuable to others who want to teach the world to code and b) get at least some of these people working with us directly to create the tools, content and community for webmakers. Finding ways to work with people who share our vision (is this you?) is the number one priority of the Mozilla Webmaker team right now.

Which leads me to two closing asks: let us know if any of the work we’re doing on Mozilla Webmaker tools can help you + let us know if you want to help. It’s not always easy to find your way in. We know that and can help. The best place to start is on the Webmaker mailing list or our weekly community conference call. You can also just post a comment here or send me email. Just show up, put up your hand and say ‘I want help / how can I help?’ Someone on the Mozilla Webmaker team will be there to help you figure it out from there.

Comments

  1. openmatt replied on | Reply

    What an epic post! Love it, Mark. Hoping we can discuss in depth in the next Webmaker community call, amongst other places. https://wiki.mozilla.org/Webmakers/Community_Calls

  2. Alex Vincent replied on | Reply

    I’m interested, of course. I’ve been trying to build better tools to write the Web for a long, long time. But I may be losing touch with what people need…

  3. emmairwin replied on | Reply

    Love all of this – a pretty big dream, worth shooting for.
    Excited about this:
    Our third big step for Mozilla Webmaker tools has to be ‘teaching real programming‘ – getting people to the point where they can create or remix a game, app, etc.

    I see that as an end goal as well. Kids, youths – (me too) want to know how to manipulate the technology right in front of them, whatever that may be. My oldest daughter has tired of hacking, and wants to animate, make things ‘do stuff’. I think BTG could fit in somewhere down the line in this capacity as well.

    All exciting – thanks for the update post.

  4. Andy replied on | Reply

    Mozilla has always been on the top of my friends list when anything regarding development has come up. It’s because it’s built by a dedicated community effort, not employees locked up in Microsoft’s basement.

Add a Comment