Thursday, September 27, 2012

Introducing Webmaker, the Product

As you all may remember from previous posts and announcements, we launched Webmaker, the Brand, a few months ago and built and released some of the core foundations, like Thimble, PopcornMaker and the initial learning projects. All of this existed under the common branding umbrella, but were still stand alone projects, teams and processes and end user experiences. 

As Mark mentioned in his post, over the last couple of months, we’ve been focusing on Webmaker, the Product, not as a major pivot - we’ve been doing this stuff for almost a year now - but really as a new perspective on our work and honing in on core priorities. We’re doing so for two core reasons:

  1. Experience - we want to develop a Webmaker experience that helps people make things that they want to share and learn web skills in the process. The tool or the mechanics of how things work behind the scenes shouldn’t get in the way of the making and sharing experience. This requires a group of people thinking about the experience from that level, stitching together various tools and sites, creating pathways across projects, etc. At the same time, we need to make sure the tools and projects behind that experience are high quality/robust and remain innovative, so we want to have clear foresight into the roadmaps against the Webmaker goals.
  2. Efficiency - we want to make sure that we’re prioritizing things and allocating resources in a way that supports that experience. But this isn’t just internally, we also want to make participation and contribution as easy and seamless as possible - this needs to be designed and supported as a core part of the product.

With all of this in mind, we spent a few weeks drilling into the details and landed on a crisper definition of what Webmaker (the Product) is, who it’s for and how it’s going to roll out and grow. We need some help in gut checking on this to make sure it feels right and that there aren’t any major gaps:

Why Webmaker?

We want to teach people about the web through the web and real technologies. What better way to understand and fall in love with the web, then realize that you can remix it for your own views and opinions and then share it with your networks? And what if in that process, you learned core skills that helped you not only make more things on the web, but changed your attitude in life from just consumption and acceptance, to production and expression? That’s what we are trying to do here, that’s why Webmaker.

What is Webmaker?

Two elements of Webmaker:

  1. Tools - tools that support remixing, making and sharing on the web, while building learning into the process as well. Thimble, Popcorn Maker and X-ray Goggles for now. Game Maker, Mobile later.  [logos]
  2. Starter Projects - projects, challenges, games and content that sit on top of the tools and guide people in making cool shit and provide instructions and learning objectives as well. On Thimble, starter projects are hackable webpages that have some challenge or project that you complete by editing the HTML and CSS code on the left. In Popcorn, starter projects are thematic videos that you can remix, with some skill development baked into the core content of the video.

Who is Webmaker for?

Two audiences for Webmaker:

  1. primary: webmakers - people with something to say, those who want to express themselves and tinker*
  2. secondary: webmaker makers - i.e. educators - those who want to teach other people this stuff, amplify our cause and our reach. We want to build this community, inspire them to teach webmaking and empower them to not only use our content, but remix it and to contribute back.
*A few important pieces here to unpack:
  • with something to say”: we are targeting the current or future Tumblrs of the world - those people who have an opinion, a sense of humor, a cause, etc. We want to help them make things that they care about and want to share with the world. 
  • tinker”: we’ve decided that for now, our target audience is more amateur and playful. So we want to support someone making a webpage to show their love for Lady Gaga, but not necessarily someone who wants to come make their business webpage. Doesn’t mean that someone couldn’t make their business webpage, but we are not explicitly focusing there. Also has implications for the types of service level agreements, domain registrations, etc. we offer.

How will Webmaker roll?


  • Making + learning foundations (mostly done, in progress)
  • Experience design and connections across tools (MozFest)
  • Contribution foundations (end of 2012)
  • User + social features including gallery, collaboration within the tools, etc. (end of Q1 2013)

MozFest is our first big deliverable for Webmaker, and its a really important one since its the place that we can not only show off our stuff, but more importantly, playtest and user test our stuff and our ideas so that we can come out of it with a solid direction and set of priorities for 2013. Here are some of the core deliverables for MozFest (note, this is the high level view, look for a post from our head of software, Chris, on the technical and more minute details):

  • Experience: ship more unified UX, connecting the Webmaker experience across tools and sites
  • Webmaker Badges: launch badges in Thimble. We see badges as a connector between tools and learning experiences, but also between learners and community members. We are starting with badges and associated assessments within Thimble.
  • Projects: build set of ‘real’ projects like portfolios and other things that people will want to make and share, as well as a plan for testing at MozFest
  • Popcorn: ship PopcornMaker 1.0, the first production version that helps people make awesome Popcorn-ified videos.
  • Instructor Community: ship and test hacktivity kits which help provide some hackable curriculum and scaffolding around our tools and content
  • Contribution: initial plan for localization - where to start, who to enlist for help, etc.
  • Engagement: prototype of community-led QA 
  • Open Badges: ship new Badge Backpack UI - the Mozilla-hosted badge Backpack is part of the Webmaker experience
  • Open News: build Thimble and Popcorn starter projects for journalists
  • Hackable games: prototype hackable games in Thimble

I love this list because you can see how our various projects and programs all start to snap together as part of this Webmaker Product. Still a lot of work to do but its feeling like its moving in a good direction. We would love some feedback and help shaping the next iteration. Key question for now is: Does this make sense to people? What parts are still foggy? Are there any gaps in the narrative?

We are encouraging people to take comments and feedback to the Webmaker list so that the entire community can benefit and respond. I’ll post this to that list as well. 


Monday, August 27, 2012
The traditional methodology for studying innovation in education may have been adequate at a time when only small changes were possible, when in fact one did change an aspect of the mathematics curriculum and keep everything else the same. But we need a different methodology altogether when we envision radical changes in education. Papert, S. (1990). A Critique of Technocentrism in Thinking About the School of the Future. M.I.T. Media Lab Epistemology and Learning Memo. Cambridge, M.I.T. Media Lab.
Monday, August 20, 2012

Webmaker Badges


We’re gonna launch some Webmaker badges at MozFest and some more next year. They will include a variety of badge types and some awesome assessment. Get ready world.

====LRIYW; (Longer, read if you want version)====

We’re building a Mozilla Webmaker badge system - eventually feeding into a larger Mozilla badge system. As I mentioned in my last roadmappin’ post, this is our number one priority from now through MozFest. And it’s WAY more than designing some pretty images, its the skills, assessments, technology, metadata and learning content as well. It’s all underway and here are some of the details, pulled from a presentation I gave on the Webmaker call last Tuesday**.


I think it’s important to explicitly talk about the why or the goals behind the badges. Not only is that important for justifying and explaining why badges are a huge priority for us, but it can also help inform some of our decisions about the types of badges to include, what’s in scope/out of scope, etc.

  • Badges = disrupting a monopoly and putting the control back into the individuals’ hands…it’s what Mozilla does.
  • Defining / driving a Webmaker experience.
    • tying together tools and experiences
    • defining potential learning webmaking pathways
    • defining an architecture of participation and contribution
  • Building fun into the Webmaker experience.
  • Recognizing and tracking learning.
  • Building and formalizing community.
  • Scaling our stuff beyond ourselves.


With those goals in mind, the following is the current set of badges, assessments and tools (types, touchpoints and technology) planned for the first iteration of our badge system.

  • Skill (I can ____, I know ____)
    • mini (I can hyperlink)
    • cumulative (I know HTML Basics)
  • Achievement (I made a _____)
    • mini (I made a webpage)
    • cumulative (I am a webmaker)
  • Participation (I attended an event)
  • Contribution (I hosted an event, I created a project, I added code)




*NOTE: because we are starting with a very small set of explicit ‘hard’ skills, we are awarding the cumulative based on accumulation of the mini badges. Moving forward, we want to expand to a much broader set of skills, including softer skills. We know that moving to a peer assessment model will be very important for adding more review, evidence and mentorship behind the badges. Look for peer review to come early next year. We’ll be asking for your help on designing an effective peer assessment system.







the badges constellations available by the end of this year below.

NOTE: we are still working through the possibilities with Popcorn so there may be another set of skill badges: mini and cumulative reflecting those skills and that learning either in the first iteration or shortly thereafter.


So how are we going to make all of this happen? (answer: very quickly, but more specifically:) 


We are building OpenBadger (OBr), a lightweight badge issuing tool that, despite being lightweight, will do most of the heavy lifting. Specifically, OBr will handle:

  • Badge creation and metadata definition
  • Badge issuing
  • Connection to the OBI

Tool/Site Integrations

In addition, we will be doing some tool and site integration:

  • Building embedded assessments into Thimble and Popcorn
  • Building calls out to OBr within Thimble and Popcorn. For example, when someone clicks publish, issue this badge, etc.


As I mentioned above, we are pushing towards MozFest for an initial release, but we are already thinking about the follow-up releases and where we ultimately want to get to. So the roll out looks something like this (although everything is subject to change and wide open for comments/suggestions). More detail on the follow up releases to come in separate posts.


  • November 9-12 in London - don’t miss it!)
  • All of the above, first iteration of the badge system

March 2013

  • More badges and skills covered
  • Peer assessment 

Summer 2013

  • Levels
  • Pathways (including non-Mozilla options)
  • Dashboard, goal-setting, portfolios


So that’s the current plan. We would love feedback and suggestions on how to improve the first iteration of the badge system, as well as ideas for the follow-up releases. Let us know!


**Full presentation from Tuesday’s call

***Also, see posts from Jess and Chloe for more details.

Friday, July 6, 2012

What the Numbers are Telling Us

We’ve been rolling things out in a big way and in my opinion, it would be a huge fail if we didn’t use this momentum, attention and summer code partyin’ to learn something about the stuff we’ve built - specifically for me and my team, about the learning projects. Enter The Survey. We have a survey that is available upon completion of a Thimble project* that asks some pretty basic questions about level of previous experience, fun, learning and if/where people got stuck. It’s not meant to be the most robust thing ever, but instead to do some temperature gauging during this first wave of users/learners.

*Note: we have another version of the survey (duplicate except for the word “Thimble”) for the DIY projects, which are the projects that point people out to different sites or tools. But so far, there are very few reposes there (~8) so this analysis is focused on the Thimble projects.

We have almost 150 responses so far, which is way lower than the estimates of folks using Thimble so far (more in the thousands), but not a bad response rate given that the survey link is a little awkwardly presented - right under the copy-your-link-to-your-finished-project field in the ‘Publish’ flow. 

Here are some highlights on what the numbers are telling us so far…


1) We’ve gone global

People are doing projects all over the globe. From the event registrations, we knew that we had events in 67 countries across the summer, but pretty cool to see this much activity in just a couple weeks.

2) Lots of existing experience.

We have a pretty even distribution of webmaking experience so far, with a slight advantage to those with more experience. This is a bit surprising since the Thimble projects are more targeted at entry level to intermediate, but its likely that some of this is due to the fact that we also just launched Thimble and have a bunch of people that are exploring it just to check it out. I’d also love to believe that there are mentor/facilitator/instructor type of people checking it out for the purposes of using it to teach other people these skills, but that question didn’t make this round of the survey (hindsight!!), so we’ll get those numbers in version 2.0. See below for a cross tab analysis of how this factor influenced other ratings.

3) Fun!

A whopping 74.8% thought that the project was fun and of that 39.4% said super fun. We are aiming for personally engaging, interest-based experiences so the sense of fun is an important piece. 

4) There was perceived learning.

63% reported some learning, with 25% reporting that they learned a lot. This is, of course, self-reported learning, not hard-core assessed learning* - but at this stage, again, to gauge the temperature of people’s experiences, I would say this is a pretty solid number, especially given that fact that over 50% came into the project with some or a lot of webmaking experience.

*Note: On the hard-core assessed learning: 1) we are building in more assessments that will use the work as evidence to validate that certain skills are demonstrated; but 2) all that said, again, ultimately we are after interest-based webmaking with some learning that happens in the process, so if people are engaged and able to make the things that they want to make, then I would call that a success without all the pre-post data hubbub…but we’ll do some of the latter as well next year.

5) People reported getting stuck.

One of our core design principles is to design for graceful failing - or said another, more direct way, don’t let people fail. By the numbers, it would appear we are there yet since 50% of people reported getting stuck. However, looking through the explanations, while there were a few that were overwhelmed by the code, it seems like most people were able to work through their stuck point:

"The </body> and </html> codes were missing and the webpage was showing errors and did not want to complete the project successfully. I figured it out at the end."

"I didn’t put an end bracket in the right place for the hyperlink.  Which is good, because it meant that I had to go back and figure out why it wasn’t working."

"In the beginning.  I had to read more carefully than just skim read."

That’s actually pretty promising then, because the projects were challenging but the learner had enough to solve the problem. It shows trial and error and tinkering which are also really important aspects to our learning philosophy.

There was a trend of ‘stuck’ responses about the publish feature which we need to investigate some more. Right now, when you click “Publish”, you get a URL which you can copy and share through Twitter, Fb, email, whatever but that doesn’t seem to be resonating with everyone. Responses included “I don’t think the publish worked right for me” and “Copy and paste WHERE??”. Apparently some people don’t understand that flow. So we’ll look into that more. 

6) Cross Tab == Cool

Of the people with no webmaking experience:

  • 70.9% reported having at least some fun, with 41.9% reporting a lot of fun.
  • 66.6% reported at least some learning, with 43.3% reporting learning a lot.
  • Only 10% (3) reported not learning anything at all.
  • 58.1% reported getting stuck.

Of the people with some webmaking experience:

  • 86% reported having at least some fun, with 43% reporting a lot of fun.
  • 68% reported at least some learning, with 15% reporting that they learned a lot. 
  • Notably, 0% reported not learning anything at all.
  • 36% reported getting stuck.

Of the people who came in with a lot of webmaking experience:

  • 34% though it was super fun, and 65.8% reported that it was at least kind of fun.
  • 48.7% reported some learning with 23.1% reporting that they learned a lot.
  • 35% reported that they didn’t learn anything at all.
  • 56% reported getting stuck.

6) Some great suggestions

How to make it more fun:

"More animal parts."

This was the number one request. The Zoo was definitely one of the most popular projects and people wanted more options to create more animals. I’ll take that as a notch on the side of ‘this was fun and engaging’. Also points to needing more projects with rich content and topics like this one. 

"When a project asks you to replace one image with another, it would be helpful if it supplied some links to alternate images."

This is an interesting suggestion. On the one hand, its a great idea and something that’s relatively easy to do, but on the other hand, again, part of the learning experience, and of web literacy as a whole, is being able to use the Web to find things that are interesting to you. I think what we definitely can do is provide better instructions on places to find images, how to properly attribute them, etc.

"More cat integration."

Well, duh.

How to foster more learning:

"Maybe a toolset of html elements and drag and drop as well for different html elements."

There were a handful of comments around this same topic of making it more WYSIWYG like or drag and drop. We intentionally built it this way, so that it is exposing the real code and learners/makers have to get their hands dirty in the code to make something. I think the potential for learning relevant webmaking skills is greater working with the real code…that said, we have to balance that with ensuring that the barrier is not too high. We are planning on doing some experiments with some different approaches with different abstractions with our DIY (read:non Thimble) projects later this summer.

"Maybe give the user an end result to aim for.  Can you make your document look like this [screen grab]  or create a page with a story or something and they have to create the next page."  

This is a good suggestion and we’ll consider it moving forward.

"The explanations when you click "read more" are WAY above a beginning coder’s head."
This is great insight - we’re pulling the hints from the MDN, which is awesome, but typically targeted at web developers. So we’ve started a “simple MDN" to start to write more basic descriptions. This is a community project - jump in and help out!


  • We’re on the right path - the projects (+ Thimble), and thus this approach to learning, are providing some engaging and fulfilling experiences for a majority of people. 
  • Even though some of the feedback pointed to Thimble and the projects being too advanced for beginners, the numbers show that they reported the same amount of learning as those with some experience. The beginners reported it being a little less fun and got stuck a little more, but 43% reported learning a lot. I think even though the projects might feel overwhelming b/c of being dropped into the code, it seems like it was actually beneficial for people in terms of learning.  We’ve already started working on making Thimble even more accessible to entry level folks by integrating the X-ray Goggle functionality (you can now click on the right side preview pane and see things highlighted in the code on the left) and creating some more starter projects that focus on one or two elements at a time. It’s also worth noting though, that a lot of people with some and a lot of webmaking experience also reported learning and fun. I would guess that number would go up even more if (when) we have templates that are more targeted to various audiences and skill sets. So we’re on to something here. 
  • We need more projects that provide more interest-based access points for people - things like the Zoo project with rich content and compelling topics. We really want the community’s help with this so if you have an idea for a Thimble project, tell us about it.
  • We need more help and hints baked into the projects so that the barrier to entry is lower and less people can get stuck. 
  • We need to revisit the Publish flow to make that work for more people and (bonus!) use it as a teaching moment for those not used to sharing things on the Web.
  • We need more cats.


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.


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.


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. 


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:


Tuesday, June 19, 2012

Mozilla Foundation Launch Codes

We’ve been a little busy here at Mozilla Foundation, as you may have noticed 1) by my radio silence on this blog but more importantly, 2) by the series of huge launches from us. 

Here’s a guide to the awesome projects and initiatives we’ve launched in the last 2 months, with links to find out more or get involved (your very own Mozilla launch codes!):


Public beta of the Open Badge Infrastructure.

The OBI is the core technical ‘plumbing’ to support an ecosystem of badges as alternative credentials for lifelong learning. It’s a mouthful and its awesome. “Public beta” means a publicly available, critical feature complete solution. Over a hundred independent badge issuers are already plugging in. The Open Badges work supports Mozilla’s wider goal of making the Web as awesome as possible and helping people benefit from it. A badge ecosystem supports learning that looks like the Web - open, distributed, customizable, personally navigable - and happens across the Web, by creating a recognition system that can help learners tell a more complete story about their skill set, and in turn, get real results like jobs, credits and other opportunities. Check out my previous entries for more nuance on Open Badges.

Previous post with more info.

Earn your first badge! Set up your Backpack. Launch code


Webmaker Initiative.

Our goal: build a generation of webmakers who have the skills and passion to be makers on the Web and of the Web - instead of just consumers. You’ve heard me and my colleagues talk about this for awhile now, but now its a top level Mozilla initiative - it’s even available in the “tabzilla” - the Mozilla dropdown menu across all Mozilla sites!

Launch code


Mozilla Summer Code Party.

In line with the Webmaker Initiative, we launched our first big push for webmaking - the Mozilla Summer Code Party. It’s a summer-long, planet-wide webmaking and learning party, kicking off with the Weekend of Code where thousands of people will host events, make cool stuff on the Web and learn webmaking skills together in the process. You should definitely party with us - you can host your own event, join one of the hundreds of events other folks are hosting or just do some learning projects on your own or with a few friends. Let’s par-tah!

Party like its summer 2012. Launch code

More info on our wiki

Mozilla Ignite.

What would you do with the Internet of the future? Mozilla Ignite challenges us to come up with app ideas for a 1Gbps network - and there is $500,000 in prize money. It’s Webmaking on a whole new level. Later this year: You can plan to see some learning content from us around some of the awesome technologies and practices relevant to this advanced webmaking.

Launch Code



(Formerly called WebpageMaker) Thimble is our new 2 pane editor tool that helps people make things on the Web and learn HTML, CSS and other webmaking skills in the process. Thimble allows you to write and edit code in the left hand pane and see it immediately rendered in the right hand pane. And we’ve built handy js libraries that capture errors in the code, and leverage Mozilla Developer Network content as helpful hints on all the tags. Coming soon to Thimble: badges and a gallery of published projects as well. The Thimble development team is nothing short of superheroes - our own Avengers - huge kudos to them for creating a kick a$$ tool in a very short amount of time. 

Use the editor. Try out a Thimble project. Launch code

More on thimble from Mark

More on Thimble from Matt on the Mozilla blog

The new website to support the Webmaker initiative and the upcoming Mozilla Summer Cody Party. We are a wiki and etherpad culture so to have a core polished website like this, you know we must mean business. This site will definitely grow to support more of the work we’re doing but you can use it now to find projects (see below), tools like Thimble, and events. Yay Team Ross+Andrew and Team Engagement!

Launch code

Webmaker Learning Projects.

We’ve built a bunch of learning projects to help you find interesting and personally inspiring things to build, while scaffolding the learning and webmaking skill development. All of the projects are one page learning challenges and they come in two flavors: Thimble projects and DIY projects. Thimble projects sit on top of Thimble and are hackable learning challenges that allow you to edit the code in the left pane to complete the challenge, while seeing your changes immediately rendered on the right pane. You can publish and share your creations as well. (And don’t forget to give us some feedback so we can make more and better projects - there’s a survey link in the Publish dropdown). DIY projects are similar, but are learning challenges that use other tools or take you to other sites to build stuff. All the projects are available here.

You’ll notice that there are some projects by Mozilla, but a bunch of projects by other folks like the London Zoo, Tumblr, New York Public Library and P2PU. That’s the idea here - we want to create a movement and we can’t do it alone, so the goal is to have some Mozilla content, and some Mozilla tools but to pull together content and tools from all the other awesome people and organizations that are already teaching webmaking in their own flavors. So you can expect more projects from more folks as we go. And if you have an idea right now, you can submit it here.

You may have noticed that I have a little more to say about this one - that’s because it is near and dear to my heart. My team is brilliant, mindblowingly creative and super productive, so huge applause to them for building and wrangling some pretty cool initial stuff. More on these projects to come in another follow up post b/c I just can’t stop talking about them.

Project Launch Codes

Early Version of PopcornMaker. 

We’re starting to build our platform of making tools with Thimble, which I already talked about and now PopcornMaker which helps you build awesome Popcorn-ified videos. PopcornMaker features a bunch of awesome out-of-the-box templates to guide your work and help you learn about Popcorn and a bunch of webmaking skills in the process.

This is a much anticipated launch - 1.0 is coming later this year but you can play around with an early preview version now. Launch Code

Popcorn Maker


The Weekend of Code.

The kickoff weekend of the Mozilla Summer Code Party. It’s a worldwide party, people, and thousands of people across the globe will be making things and learning skills together this coming weekend. We’re bringing some projects, tools and some friends - you bring some friends of your own, your creativity and maker-y-ness, and some chips and dip.

Get involved! Party with us! Launch Code


Sleep…and more learning, partying and strategizing.

July will bring some well deserved reprieve for my team. We’re pooped. That said, the Summer Code Party will still be going strong, and we’ve got a few strategy sessions to start planning for our next wave of awesomeness. So make sure to give us feedback on your experience with everything over the next few weeks so we can feed that back into our roadmap for the rest of the year.


Open Badger and Alpha Webmaker Badges.

What could make our learning offerings and pathways better? Well, badges of course - a way to get recognition for the skills you develop while making stuff online. So we are building some alpha Webmaking badges that will be aligned with projects and sharing of the things that you make over the summer. And since we need to build the tool to handle the badge creation, badge issuing and connection to the OBI, we’re releasing that to the public as well, as a lightweight badge issuing tool and set of js libraries to make badge issuing easy for you. It’s the next stop on the badge train.

More Info



Mozilla Badge System.

Why stop there? Our ultimate goal is to have learning pathways for all of our webmaking skills - with earnable badges for each skill, as well as levels across the skills. And the broader Mozilla has a bunch of ideas for badges for contribution and engagement as well. So that’s all going to roll up into an awesomely supercharged Mozilla Badge System with interest-based learning and contribution opportunities with job-relevant badges behind them.

More stuff.

I am sure there will be more. We are not ones to sit around idly and the creativity and innovative nature of my awesome colleagues, as well as their uncanny ability to build things at light speed, means I am sure there will be lots of cool stuff before 2012 ends.

*As you can see, there’s been a lot going on, so I’m sure I’ve forgotten to mention something else. Let me know and I’ll update as needed.

Way to go all! Celebration
Friday, May 11, 2012
So I think the number one task has to be to really create spearheads, nuclei of change where we can really demonstrate that something really different can be done – something not improvement, but radically different. Papert, S. (2000) Keynote Address at CUE Conference. Palm Springs, CA.

Where’s the Web?

I’ve been re-immersed in the digital literacy world lately and have seen lots of different ideas and projects that get kids interacting with technology. I also recently subscribed to the Daily Papert and have been enjoying my daily dose of constructionist genius*.

But it has gotten me thinking about something missing from the conversation: The Web. The messaging is often SO similar to ours - interest-based learning, teaching kids to make, authentic assessment, customized pathways/experiences, programming to help make abstract concepts concrete, etc. - we are all telling similar stories and are after similar goals, which is awesome - but most of the practice and implementations we see are using closed technologies and systems. We see this all the time in the digital literacy and teach-people-to-code space. Learning providers use heavy programming and engineering technologies - or fake, sandboxed learning languages - and spend tons of money and resources to create (often impressive) tools and environments to scaffold the learning, but without broadly applicable understanding at the end. Where is the Web? Where are the open technologies and standards that learners can go on to use across the Web today? Not there. There are entrenched policies and proclivities, and probably a lot of unawareness, that guide people down these closed/sandboxed paths. But the Web is definitely missing and I think that limits the power of a lot of the innovation. 

I <3 the web

Why you should consider the Web.

  • The Web is THE platform for learning right now. In fact, it can be THE platform for almost everything these days. There is SO much opportunity for learning across the Web and we have an obligation to teach people things that will matter for them beyond individual projects or learning experiences. Web literacy is a top level literacy at this point for the general public. 
  • The Web is THE model for the types of learning that we all clearly believe is the future of learning. Transparent, open, accessible, multi-pathway, participatory, etc. these are all principles behind the Web, and behind the learning innovation that we all care so much about and are investing so much time and effort into making happen.
  • The Web is THE THING that we can make on, learn from, etc. We can build stuff on the Web, as part of the Web. Learners can view source and hack on web pages or videos, etc. There is so much content that is part of the Web that we can leverage, or contribute to, that can support learning and making of all kinds. 

How to build the Web into these conversations / learning experiences.

This requires a bigger conversation and some deeper thinking but I think there are a few easy wins:

  • Start (even end) with the Web stack (HTML, CSS, JS). These are much more powerful than you may think. These are the core technologies on the Web and someone with a little bit of understanding can do a lot on the Web, and someone well versed can make some pretty powerful stuff. Getting kids making things on the Web gets them one step closer to web literacy which is becoming more and more important and necessary in today’s world. The Web is where it’s at people and we have the opportunity to not only move folks from simple consumers to producers and active participants, but prepare them for success in a wide (HUGE!) range of jobs, not JUST engineering or programming. 
  • Use Web technologies to build the scaffolded environments. You can do almost anything these days with open Web technologies. Then your work becomes more accessible to folks, and possibly more interchangeable or plug-and-play with other tools, works better or more aligned with and across the Web and possibly advances the technologies and standards. We all benefit if we are leveraging the same underlying components.
  • Consider opening up the back door.  Open up the code! Now, this isn’t always possible for folks but when it is, its a really powerful thing. Suddenly your tool or content can take on a life of its own through community remixes, forks, etc. The learners themselves can hack the tools to make it do something better or more advanced. That’s the ultimate pinnacle for learning, afterall, to have someone not only understand and use the stuff you’ve created, but actually take it the next step further. 
  • Bake in sharing at the core. Help learners share their work and encourage remixing and repurposing of that work. The Web makes this possible and pretty darn easy. We all know transparency in learning is valuable, and we even spent some time talking at a recent conference about the rash of research lately (which I still need to look up) on the benefits of letting learners see the work of others for their own learning (ahem, view source, ahem). Lots and lots of options for and opportunity through openness and transparency. 

I am sure there are more ways, and I would love to hear about them! Let’s do this together!


* To cut Dr. Papert a bit of slack, he was writing about this stuff before personal computers, let alone the Web. I’d love to have a conversation with him today about how he would leverage the Web for his work. 

Saturday, April 28, 2012

JISC webinar on Web Literacy

MichelleL and I gave a presentation on our webmaker / web literacy work through JISC last Friday. 

On webmaking and the Web:

  • We want to help people understand that the Web is like Legos - you can build original things, take things apart or remix them, create and weave stories and narratives around your creations, etc.
  • Part of this is about making learning fun and relevant again, but its more than that. Webmaking skills are important life skills.
  • Why is the Web such an important part of this:
    • The Web is a platform for learning
    • The Web is a model for learning  - transparency, openness, access, collaboration, participation
    • The Web is the thing we can build and learn with
  • Why is webmaking important? I’ve written about this before so check that out for more (also, the Web is about interconnectedness of information and pathways…win!)

Favorite slides (adapted from a Mark Surman presentation):

On The Skills:
  • Mozilla is building learning content, badges and software to scaffold webmaking and learning. But a critical part of that is really understanding or enumerating what webmaking means from a skill perspective. 
  • So after a bunch of research, including interviews, focus groups and first hand experience, we are proposing an initial definition of web literacy. Kudos to MichelleL who drove this work. 
  • We didn’t dive in to all the skills but the parts to highlight are that:
    • There are 25 of them, and only a few of those cover what some may call ‘coding’. This is not about programming, but a general literacy, with a combination of hard and softer skills.
    • The skills are currently grouped in columns reflecting skills needed to: navigate or consume the Web, create lightweight content and contribute on the Web, share and participate, build more advanced things on the Web and protect yourself and your content.
    • Most importantly, this is still in alpha or request for comments form - we definitely want feedback. And we know this will evolve anyway - both because once we are really using this definition, we will learn things that we can feedback into it, but also because the Web itself evolves.

We got some good questions including:
Doesn’t all content eventually become something owned by Google, Facebook or YouTube at this point?
This was an great question with lots of subcurrents so the answer was manyfold as well:
  • Part of this is about teaching people how to control their own content, understand things like ownership and privacy on the Web, be able to make informed decisions about where and how they share their stuff.
  • Part of this is about empowering people to not be confined to CMSs, proprietary technologies or forms for building and sharing things and thus demand more openness.  If we are all demanding more openness and Web technologies, the big companies will follow. We’ve already seen it start to happen with YouTube (from Flash and proprietary technologies only, to supporting WebM and HTML5). We will see more of this.
How do you plan to recognize these skills?
Badges! We are developing a webmaker badge system that will recognize development of these skills, motivate learning and help create pathways for people to become webmakers and level up. 
There are no mention of Web 2.0 tools in your skills. How do you see this fitting in with Web 2.0 tools?
We are not focused on specific tools and technologies, other than some of the basic open Web building blocks like HTML, CSS, JS. We want to teach conceptual and social skills that can then be applied or layered on whenever someone is using one of the millions of Web 2.0 tools/platforms out there like Twitter or Facebook. 
How does this map to computer science requirements / pathways?
We are not focused on making more engineers - we are focused on a more general literacy that can be relevant and important in everyone’s lives. That said, there is some work going on to look at this link. Andrea Forte, from Drexel, is looking at how early webmaking experiences translate to entry level computer science curriculum and requirements. Again, these skills are a big deal across the board. ;)
JISC recorded the session and should be posting [update 4/30] has posted a link next week so check back or watch on the Twitter
Friday, April 20, 2012

Hacker Literacies

The ignite talks from this year’s DML Conference are posted. I wasn’t able to get to the Ignite talks at the conference due to the inevitable impromptu side meetings that always pop-up (which is kind of the beauty of conferences like these). 

But in perusing them this morning, one that caught my eye was Rafi Santo from Indiana University talking about Hacker Literacies. There is a lot here that aligns with our thinking and goals around webmaking and web literacy, so I wanted to dig in a little further.

Highlights (transcribed from the video so with some paraphrasing): 

We are not talking about hacking like “breaking into banks and stealing credit card numbers”, but “what I am talking about is a certain kind of technological industriousness - a maker disposition that’s tied to innovation and creativity.

Again, this is very much aligned with our concept of webmakers and web literacy. These skills are more about building a webpage or knowing how to code but about an approach to learning and to exploring the world. Rafi called this “technological industriousness”. John Seely Brown coined the phrase “entrepreneurial learner” - its all about a sense of ownership, control and empowerment…over technology and the Web, over learning and the pathways we take (and choose!), and over our lives in general. I know, its mind blowing stuff. 

All technology is political. All technology is made by people and people are political and those politics get baked right into the technologies when they design it whether they like it or not….What a hacker understands is that technology is malleable and if it doesn’t line up with our values, we can change them.

Again, it comes back to this idea that we are talking about something bigger here. The individual skills add up to way more than just the sum, but an approach to everything in life. It’s about moving people from consumption to production, not just so that they can make things (although that’s cool too), but so that they don’t take things for granted, or accept things as they are. So that they don’t just remain oppressed, but understand that they have a voice, they have a channel for that voice and they can change things. 

The Internet [read: Web] was not an accident. All the things that we like about it - the openness, transparency, participatory culture - these things were by design. 

YES. The Web is awesome for so many reasons and we should use it - both as a medium for connecting people, empowering people, helping them build things…but also as a model for what we are trying to do here. Open up education/learning, allow for the emergence of many pathways and connections, make learning and assessment a transparent experience and exploration and connect learners together at web scale.

Digital literacy is about empowerment through technology. Hacker literacy is about empowerment in relation to technology. 

This is pretty deep. I had to stop and think about this for awhile. But it’s really powerful. I think it’s both a leveling up thing, and a literacy thing. Leveling up: I think we probably need to start with some of the technology as the medium, but we shouldn’t just stop there, at the what-I-can-do-with-them-stage, but use that as lessons about a broader sense of what’s possible across technology and in our lives in general. Literacy: he talks about these as hacker literacies, we talk about web literacies - the word literacy is in there intentionally. Again, its not about just a few hard skills, but a broader set of competencies that stitch together for possibility and opportunity. And many argue that these literacies should first order literacies like reading and writing…I definitely think we are moving in that direction. 

Finally, Rafi’s marching orders are below, with my commentary:

  1. position kids as designers and makers of technology (= webmaking. check.)
  2. talk with kids about relationship between tech and values (help them understand intentions, biases, etc. - this comes back to the idea of moving us out of ‘elegant consumption and acceptance, and approaching the world with a sense of “I can change this if I want/need to” which is part of this newer literacy)
  3. integrate hacker literacies into digital literacies (see above)
  4. embrace hacking everywhere - everything should be hackable (yes! hack the planet!)