A scouting movement for the web

I’ve been thinking about ‘a scouting movement for the web’ for a while: a practical movement focused on skills, creativity and the internet. I finally got around to doing a talk on this idea at last week’s TEDx Seneca. Here is a video of the talk:

The talk starts with a question: what was the most important social innovation that scouting gave to the world? Answer: civilian camping. Before Baden Powell, only the army camped. Camping was strictly for professionals.

A century later, camping is a mainstream amateur activity. Powell met his ultimate goal: he skilled up millions of urban young people as a way to connect them back nature. But he also turned whole generations of people into joyful campers and stewards of the environment.

Imagine if we could do the same with coding and the web? A 100 years from now, we could have a world where making and coding online are a mainstream amateur activity. There would still be professional coders, of course. There always will be. But a huge number of the people making apps, tinkering with robots and writing code would be doing it for the joy of it. Or as a part some other vocation. Or, because they simply wanted to help take care of the web.

There are many practical and immediate reasons to want to teach web making. Skills and jobs and so on. But encouraging creativity and stewardship of the web are equally important. Scouting shows us that building a movement around ideas like this — and teaching a particular skill and technology to whole generations — is very much within the realm of the possible.

PS. Phillip Toronne wrote a piece in Make Magazine on Scouting 2.0. Some good and related thoughts in there.

HTML5 = new world of hackable games

I believe HTML5 will create a new class of games: webbish games that, like the web itself, are hackable by design. These games will let you pull assets and data from across the web into your game world. And, they will let you remix, fork and share to your heart’s content. The result will be fun for people who like games — and huge potential for webmaking and learning.

The first glimpse I got of this was Jono Xia’s RunJumpBuild, a very simple side scroller level editor. While RunJumpBuild is rudimentary at this point, it shows an important idea: web games can pull anything with a URL into a game. A picture. A sound. A video. Data. RunJumpBuild is designed to let people create game levels that are made up of the web.

This may sound like no big deal. This is how millions of everyday web pages already work: displaying an image from Flickr; embedding a video from YouTube; pulling in Twitter and RSS data. But, just like movies, most games don’t work this way. Games tend black boxes, firewalled off from the social and creative assets of the web. IMHO, this is a missed opportunity for fun and creativity.

The other thing we’re starting to glimpse is games where ‘the web is the level editor‘. Of course, hackable games are nothing new. There is a long history of game modding. However, most modding uses level editors designed for a single game or game engine. HTML5 games will change this: the web programming stack (HTML, CSS, JavaScript) will become a universal level editor.

Enchant.js is an early example of this. It’s a rudimentary JavaScript framework for making 2D games. What’s notable is the invitation to ‘fork’ that is included in all the sample games. Press the ‘fork’ button and you get pushed into an editor that lets you work with the HTML, CSS and JS code that makes up the game.

While these developments are nascent at best, I believe they hold great potential for Mozilla’s webmaking work and for our efforts to promote HTML5 games through our app store. At the webmaking level, the potential is obvious:

• Games are where the people are
• Hackable games can teach people basic web mechanics
• -> e.g. a URL is how the web knows where things are
• They could also teach HTML / CSS / JS to non-programmers
• -> games = motivation to learn the ‘universal level editor’

With this in mind, we’re starting a number of HTML5 game experiments as part of our webmaking work. The most significant is Gladius, a game engine which uses the web’s most popular 3D game libraries. We’ll use Gladius to build sample games with a web native level editor as a way to test out the ‘hackable web games’ idea. We’re also considering hackable game experiments built around basic 2D game archetypes and learning-oriented game experiences using Processing.js. All of this is in very early stages of development.

Obviously, there are a bunch of big design questions that will come with this work. How do you use content from across the web to add fun and playability into a game? How do we create simple UX to onramp people who have never edited HTML / CSS / JS before? And how do you layer in the learning angle? The good news is we have many of the same questions with Hackasaurus and Popcorn, so we’ve got a head start.

As an example: we’ve already done alot of work with Popcorn to build an ecosystem of plug-ins that pull services and data into a web native video production. We have plugins that make it easy to throw Twitter, Flickr or GoogleMaps into or around your video. We should do the same with games.

Why does this matter? Because much of the HTML5 talk today treats games like a black box — using things like Google’s NaCl to port existing C++ games to the web. This is similar when we first started Popcorn, a time when the web was seen simply as a distribution channel for a black boxed video. Now we’re starting to show that video on the web can be about something totally new. We can do the same with games: to seed a whole new class of games that are actually designed from the ground up to work like the web, and that are more fun because of this.

Rumour has it that Dan Mosedale, Alan Kligman, Bobby Richter and Rob Hawkes are going to be blogging about some of our plans in this area in coming days. So watch for that. Also, if you know other examples of hackable HTML5 games please let us know about them. We want to work with any and all people who are exploring this space.

PS. Yes, there is a typo in the word ‘learning’ in the diagram above. That’s part of my charm.

Michelle + I explain web making

Want to know what we mean by web making? Or why you (and Mozilla) should care? Michelle Levesque and I did this 20 minute talk at last month’s Learning Without Frontiers conference to answer these questions:

One thing that’s worth pulling out of our slides is the definition of ‘web maker’:

a web maker is anyone who makes things using the open ethos and building blocks 
of the web

I’ve been using this definition for many months now, but it often seems to fly past people. I want to underline it here as this web maker audience is central for all the learning programs Mozilla is developing this year.

If you want more info — or if wonder what I mean by the ‘open ethos and building blocks of the web’ — there are lots of old posts by Mitchell, myself and others that unpack this general topic. Here are a few:

• Describing Mozilla. (Mitchell)
• What makes the web better? (me)
• Describing the open web. (Mitchell)
• Open web definition for drumbeat.org. (me)
• Kids and the open web. (Atul)

You see the pattern in these posts: a) open ethos = transparency, decentralization, participation, remix + b) building blocks = HTML, CSS, Javascript, open source tools and libraries. In my books, anyone who uses this ethos and these tools to make things on the web is a web maker.

PS. here is a PDF of the slides from the talk Michelle and I did. Can also send Keynote to anyone who wants to use these.

Getting practical on web makers

Big dreams need practical plans. Late last year, we agreed that ‘building a generation’ of web makers‘ should be one of Mozilla’s main goals for 2012. For the last six weeks, people across the Mozilla team and community have been digging into the question: where do we start? I’m writing this post to update people on the plans that are coming out of this.

Concrete ‘web maker’ planning started with the Mozilla Foundation board meeting in mid-December. At that meeting we agreed on the following broad goal for 2012:

Roll Mozilla’s best software and learning resources into a simple ‘kit’ for web makers.

The idea here is that we want to create a single offering — or at least a brand — for people who want to learn and make things with Mozilla. This should roll up things like Popcorn, Hackasuarus, etc. into something easy to comprehend and get involved in.

At the same board meeting, we agreed on five more specific 2012 goals that our web making initiative. They are:

1. Grow our learning programs for teens, journalists, filmmakers.
2. Ship great software that invites making + learning.
3. Build badges and ‘recipes’ to teach web maker skills.
4. Create web sites and events that drive participation.
5. Tell the Mozilla story well, inspire people.

You can see a list of detailed objectives for each of these goals listed here on our 2012 goals wiki page. We will be reviewing and evolving these objectives throughout the year.

As noted above, the plan with all of these goals is to build on our strengths: Popcorn; Hackasaurus; Open Badges; Hive; OpenNews; Mozilla Festival; and so on. Mozilla team and community members have been working on roadmaps that lay our practical plans and tie projects back to our overall goals. Here are the most advanced of these roadmaps:

• PopcornMaker roadmap and blog posting
• Web maker curriculum roadmap and blog posting
• OpenBadges roadmap
• HiveNYC plans – blog post and etherpad
• OpenNews 2012 plans blog post

All of these projects are making great strides — but they all need help as well. We need to people to write, code, test and promote what we’re building. If you’re excited by our web maker vision and want to get involved, you should join one of our weekly open community calls. Or, track Matt Thompson’s weekly round ups of web maker activity and then dive in when you see something specific you are interested in.

 PS. Here are the slides from the December board meeting that I mention above. They also include a review of our work in 2011. If people are interested, I can do a screencast of these slides to give more details. Just let me know.

Hack-a-Scratch-a-Saurus

Like many people, I’ve admired MIT’s Scratch for a long time. It’s a tool that makes it easy for kids to create simple games and animations. And, by design, it teaches some of the basics of programming and computational thinking along the way.

This approach is very much like Mozilla’s own Hackasaurus: invite kids to make something that excites them, and learning into the technology they are using to do the making. In fact, the Scratch approach really informed the ‘making is learning’ design philosophy that’s at the core of the webmaker work we’re doing at Mozilla this year.

Which is all to say, I see Scratch and Hackasaurus as cousins. And, as cousins, I think there is a great opportunity play together — for both to feed into the bigger picture goal of teaching and inspiring millions of new webmakers.

We did a first experiment in putting Scratch and Hackasaurus together at the Hive Tokyo Pop Up a week ago. The Tokyo Scratch community plus a handful of Mozilla people ran a combined workshop where kids used both tools to create a Scratch web page mash up. Concretely, we combined three things:

• Step 1. A short Scratch workshop where kids created simple animations and uploaded them to the Scratch gallery site.
• Step 2. A basic Hackasaurus Xray Goggles lesson where kids learned how to remix text and images on a web site.
• Step 3. A ‘be a famous game designer’ exercise where kids embedded their Scratch movie into their favourite gaming web site.

The whole thing took only an hour, so it was necessarily very simple and limited. But it still built two important web making concepts — ‘the web is lego that you can take apart and remix’ and ‘the basics of telling a computer to do something’ — into a single hour. And the kids seemed to have fun. A number of them kept hacking for an hour after we’d finished the initial session.

Of course, the experiment was not without hickups. In fact, we had to iterate the process three times to get to what I described above. In the first two sessions, the Hackasaurus and Scratch teams taught separately and tripped over each occasionally. It was only in the third round where we had one Scratch and one Mozilla person teaching side by side in each session, which worked well.

I’m not sure where this goes. We might want to do the exact same thing again, especially if we can build local Hackasaurus communities in places where Scratch is also strong. Or, we might use as fuel to brainstorm a more ambitious vision of how Scratch and Hackasaurus can play together. Where ever it goes, it was a fun and good first step.

PS. Huge thanks to the Scratch Japan community for having the trust to try this experiment. I was both grateful and impressed. You and your team really rocked!

PPS. Kudos also to famous ‘Mexican’ wrestler Chris Lawrence for awesomely MC’ing the event.

Every event is a laboratory

This weekend’s Hive Pop Up Tokyo reminded me that every event is a laboratory. Events are a great places to test our products and our ideas. They provide a chance to iterate quickly, improving our products fast. And, they can be a pipeline for new ideas. This kind of labby goodness is one of the reasons I’m committed to do more and better Mozilla learning events this year.

The Hive Pop Up format offers a particular kind of lab: one where you bang different products and ideas together. Format-wise, it’s a mash up of a workshop and a science fair. Building on MacArthur Foundation’s Hive learning network concept, the event recipe is:

1. Find six to ten groups that teach some kind of web making lesson.
2. Set up shop in a big room for a day on weekend or school holiday. Give each group their own area.
3. Invite young people who are keen to play and make with technology. Schedule them in waves / cohorts (e.g. 3 hours).
4. Quickly intro the kids to each program, then let them move to whichever stations they like, making and learning as they go.
5. Watch for patterns. Take notes. Have fun.

We’ve  done two of these now. One in London, another in Tokyo. Both of them have focused on late primary and middle school kids, but you could do this for older ages too.

Apart from the actual fun and learning that goes on (that’s our actual goal and also why the kids showed up), the Pop Ups provide and opportunity for experiments, pattern recognition and quick improvement of our learning offerings.

One experiment we ran in Tokyo was to combine Mozilla’s basic Hackasaurus lesson with a short workshop on  MIT Media Lab’s Scratch. I’ll do another post detailing this, but bottom line is that we found a way to mash these two things together: the kids ‘busted a hack’ by embedding their Scratch game in their favourite gaming web site. The kids seem to enjoy this. A bunch of them kept working on these pages for an hour after we’d wrapped up the session.  More importantly from a lab perspective, we found a way to combine two important web making concepts — ‘the web is lego that you can take apart and remix’ and ‘the basics of telling a computer to do something’ — into a single hour.

There were more wins from the ‘many learning experiments loosely joined’ experience of Hive Pop Up Tokyo. We learned about a cool paper-protyping-for-interface-design Firefox add on called Domova that Keio University and Mozilla Japan have created. This is something we can roll into other learning events. We had a chance to see Jono’s Run Jump Build HTML5 side scroller in the wild as something kids were excited to play with (thanks, Jono!). We flagged the idea of mashing up Run Jump Build w/ the SVG animation elements of Mozilla Japan’s ParaPara. And, we identified a number of improvements for both the Xray Goggles and the Hackasaurus curriculum. Phewph. Lots of good and meaty stuff.

Not every Mozilla learning event should be a Hive Pop Up. In fact, the most important thing we can do right now is package up the basic Hackasaurus Hackjam so lots of people can be running those in their own local community. But we definitely should do a few more Pop Ups this year: they offer a rich way to test out our thinking and bring new ideas. These are both things we need as we critically need as we solidify our webmaker learning offerings in 2012.

PS. Hugest thanks to the Mozilla Japan for taking the leadership to make Hive Pop Up Tokyo happen. Special thanks go to Tetsuya Kosaka who really rocked it as organizer and thought partner. I look forward to doing more stuff like this with all of you in future.

Happy New Year Mozilla. I’m excited!

As 2012 begins, I’m excited to be part of Mozilla. I’m excited about our plans to teach and equip millions of webmakers. About the open web apps technology we’re releasing. And about all the renewed energy around Firefox. In fact, I’m more excited about being part of Mozilla than I’ve been in years. And more proud.

When I first got involved Mozilla three years ago, there was already much to be proud of. Here was a global community of people who had not only won hearts of millions with an open source browser, but that had also helped save the web in the process. This was something huge.

However, the web has changed since then. It faces new challenges. The biggest of these challenges snapped into focus for me in 2011: we’re moving from a world where the web is an open and exciting platform where anyone can make anything to a world of elegant consumption shaped by just a few big players.

My excitement is rooted in Mozilla’s plans step up to this challenge in 2012: we’ve got new ideas — and new code — that can stem this tide.

Mozilla’s apps initiative is a good example: we’re building technology designed to open up the app marketplace, making it easier for anyone create, share, use, modify and sell apps using standard web technology. If we succeed, we have a chance to move beyond a world controlled by a few app vendors to one that’s much more like an open bazaar. And, we also get a world of apps based on the same standards and ‘view source ethos’ that the web was built on in the first place. This will be a radical shift.

Possibly just as radical is Mozilla’s webmakers initiative: an effort to move millions of people from using the web to making the web. As a starting point, we’re making software like PopcornMaker and running grassroots learning labs like Hackasaurus, both of which help everyday content creators learn basic web programming skills. Ultimately, we imagine a world where mainstream video and social network sites are built with software that also teaches how the web works, and then invites you to remix it. As the Mozilla Manifesto says, we want a world where everyone is in control of their internet life, where everyone is a webmaker. A big part of Mozilla’s 2012 will focus on build this world.

And, of course, there is much to be excited about in relation to Firefox, especially on mobile. I felt this yesterday as I (finally) updated my very old Firefox for Android to a recent nightly build. The tab experience. The search. The speed. It was all awesome. Which, of course, are nice things to say about a piece of software. But there is bigger meaning: for the first time ever I was actually enjoying the experience of using regular web pages on my tablet. Making sure the mainstream of the web is pleasant to use on mobile sounds like a no brainer, but it’s actually a radical yet difficult mission in a world increasingly oriented to apps. Firefox is taking on this mission.

Of course, these are only three of the things that have me excited. David Ascher, Dan Sinker and Glynn Moody have written about other emerging Mozilla initiatives. And there are many more in the works. The main point here is not Firefox + webmakers + apps: it’s that the Mozilla community is stepping up to the challenges faced by the web in 2012 with new and concrete ideas. And, as a community, we’re doing this with more force and enthusiasm than ever. It’s going to be an exciting year.