10 mins of teaching webmaking

Small webmaking events that you can run in 10 minutes are a central part of the Summer Code Party concept. We’re calling these ‘kitchen table hackjams‘. But, really, they are just you sitting with two friends (or two kids, or two parents) doing a very tiny starter web project. The idea is to have fun and learning something.

We started beta testing this kitchen hackjam concept a few weeks back. I did one with my two sons (Tristan is 12, Ethan is 10) and a friend (Rowan, 10). We sat down to play with the LoveBomb prototype, a tool that introduces basic HTML by inviting people to edit a greeting card.

A learned some good things and bad things about the process. Three highlights:

1. It’s possible to do a quick webmaking session with almost zero preparation or notice. I proposed the event and we were doing it five minutes later.
2. You can do alot in 10 or 15 minutes. We’d basically finished the ‘lesson’ in that amount of time. Then two of the kids got bored (my kids) and one of the kids (Rowan) kept tinkering.
3. For older kids especially, relevant content is key. Tristan gave the ‘toy’ content in the LoveBomb at ‘WTF is this?’ reaction. He’s a regular YouTube game commentator. If he was going to learn HTML, he wanted to be making something ‘real’.

At least half a dozen people ran and blogged about their own kitchen table beta tests. Here is a list of postings that I know about:

• Family + kitchen table = hack jam, Lainie DeCoursy
• Kitchen Table Beta-Testing, J Dytrych
• Beta Testing Kitchen Tables, Jess Klein
• Our Hackasaurus Kitchen Table, Peter Rawsthore
• Scaffolding / tips for kitchen table jams, Peter Rawsthorne
• Kitchen Table Beta with Adults, Laura Hilliger
• Initial Distill of Kitchen Table Lesson, Laura Hilliger

If you’re interested, we’re still looking for more testers. There is page on how to run a test. And, also, there is a chance to discuss these on our weekly webmaker calls.

Update. Matt Thompson posted this awesome ‘Webmaker Recipes 101: How to host your own kitchen table hack jam‘ just after this went up. Worth the read.

#mozparty: learning code this summer

This summer, Mozilla will take it’s first stab at teaching about code. ‘Code’ in both the webbiest sense of the word: we want to expose 10,000s of people to HTML, CSS and JavaScript to help them make things on the web. Or, at least, to give them a glimpse of how the web works.

Kicking off on June 23, we’re calling this experiment the Summer Code Party. It’s an invite for anyone who wants to teach — or learn — webmaking to spend a few minutes building something with friends. Like the Product (Red) campaign, it’s a big tent for anyone who shares our goal of a more web literate planet. Tumblr. Girls Learning Code. Soundcloud. CoderDojo. Creative Commons. etc. Over a dozen partners are already signed up.

The most basic version of participation: do a small Hackasaurus project with two friends around your kitchen table or in your living room. Taking a cue from Jess and Atul’s LoveBomb prototype, we’re developing half a dozen small starter projects that will make this easy. Of course, the hope is that people will do this more than once after they’ve tried it — but even a single kitchen table event is a great way to show people how the web works.

In addition to Hackasaurus projects, we will also offer up a collection of DIY web projects from partners. For example, we’re working with Tumblr to develop some well-commented templates that both help people make their Tumblr look cooler and help them improve their HTML and CSS a little. Other partners will be posting their own small projects on our wiki.

Some partners are taking on more ambitious projects under the Summer Code Party banner. For example, Girls Learning Code is hoping to offer a week long summer camp at the Mozilla Toronto office. This will cover HTML, CSS, Python and Scratch. Other partners will simply plug their existing summer code efforts into the Party, sharing out what people are learning and making with people around the world doing similar things.

Which brings me to how this all fits together: everyone will be invited to share out what they’ve made, both online and at a series of local events in September. The best projects will get badges. And the best local organizers and instructors will get an invite to the Mozilla Festival in London to help us figure out how to improve our webmaking tools and grow out our community.

For now, there are three ways to get involved: 1) Put your name of the list of people who want run a small code party at home or in a cafe; 2) Sign up as a partner or collaborator; and 3) Put yourself on the volunteer list for our June 23 and 24 kick off event. Or, if you want to get even more involved, join one of our weekly Webmaker conference calls. They happen every Tuesday.

Would love to hear ideas, reactions and partner leads. This should be fun.

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.

A big tent for teaching tech

Last Saturday’s Hive Toronto HackJam confirmed something for me: one of Mozilla’s biggest opportunities is building a big tent for people teaching web making. This includes teaching things like Hackasaurus and PopcornMaker that we’re building. But it also includes people teaching Scratch, Ruby, Python and even hardware tinkering. We’re all trying to build the same ethos and teach many of the same skills.

Photo by Jon Lim

Similar to the Hive Tokyo Pop-up, Toronto had a mix of Mozilla and non-Mozilla stations kids could take part in. Hackasaurus and PopcornMaker from the Mozilla side. Scratch, paper-prototyping, Python and PlayLab. We had 50+ kids, 40 parents and 25 volunteers gathered together for 3 hours at the Toronto MozSpace.

As with the Scratch + Hackasaurus mash-up in Tokyo, Toronto saw good collaboration and reinforcement amongst the different groups teaching. Some kids moved easily between the diverse stations (coding vs. physical). Others found their passion or their level (basic to intermediate) and stuck with it for the full time. It wasn’t a competition between the stations: it was the creation of an integrated experience for all the kids who had shown up.

This isn’t surprising. Hive NYC is already a model of how diverse organizations and technologies snap together into a learning experience bigger and more exciting that anything that a single org could do. The interesting part is that we’ve now done this in three new cities: London; Tokyo; Toronto. And, in each, we’re finding the same willingness to play beyond turf and build a new way of teaching using the ethos and technology of the web.

Photo by Jon Lim

What does this mean for Mozilla? It means Mozilla needs to focus equally on building our own making and learning tools and on helping out others who are teaching web making.

Much of Mozilla’s learning work right now is focused on building new tools and curriculum that help people learn while making things on the web. Hackasaurus and PopcornMaker are the big bets. And, for certain, these are some of the most valuable things we could doing right now. People want and will use the things we’re building.

But Mozilla also needs to figure out who else is teaching web making and how we can help them. As Michelle L. and I outlined in our London talk last month, we’re already reaching out to people like CodeNow, Ladies Learning Code and Young Rewired State. But there are dozens — maybe even hundreds — more groups like this around the world. We need to reach out to them broadly.

With this aim in mind, Michelle is in the early stages of building up an instructor community for groups teaching web making. We’re also looking for ways to get groups like this involved in defining the tools, curriculum and badges we build. We want to accelerate the web making and teaching work that people are doing at the local level everywhere — we need to make sure what we build serves that end.

Photo by Jon Lim

Which is all to say: the Hive events we’ve done over the last few months make it clear to me that we can build ‘a cohesive learning offering for web makers’ (our goal for 2012) that mashes up what we’re building with the tools and talents of others. This, of course, is how the web works. It’s important to remind ourselves that Mozilla needs to work that way, too.

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.

Re: public of the web

Inspired by Dave Parry, my friend Andrew said: “We are no longer just seeing the power of the public internet. We are now seeing the rise of the internet public.” It was a bit of an ‘aha!’ moment for me.

SOPA protest pic via Clay Williams

It’s been amazing to watch the push back against SOPA in the US and ACTA in Europe over the past few months. And, of course, to have witnessed the Arab Spring. The people behind these events didn’t just use the internet to amplify voices: they were the voice of the internet speaking. And, at least with SOPA and ACTA, the message itself was about the internet and what it stands for. This is new. And good.

I’ve always believed the internet is something special. Not just something to use and build on, but also something to stand up for.

As Joi Ito said in the New York Times a couple of months back: “The Internet isn’t really a technology. It’s a belief system, a philosophy about the effectiveness of decentralized, bottom-up innovation.” This vision of the internet has motivated me for a very long time. It’s what brought me to Mozilla.

Until recently, it felt like the group of people who cared about the Internet as philosophy was relatively small. I personally know hundreds of people who spend every day evangelizing the open ethos of the internet. I’m one of them. The thing is: none of us have had much luck getting sizeable numbers of people excited or engaged. We’ve all tried. But the idea of an ‘open web’ or ‘internet ethos’ has always been too abstract get people to prick up their ears.

This seems to be changing. We are seeing the rise of the internet public: a movement or constituency that is both of the internet and about the internet.

The Facebook signs in Tahrir Square were a first glimpse of this. In some ways, these signs were a small footnote in a bigger political change in the Arab world. But they also point to the fact that the internet is more than just a part of the story — it is itself a story to pay attention to.

The massive public push back on SOPA and ACTA show this more starkly: there is a broad public passion for and connection to the internet. People are saying: ‘the open internet and the way it connects us is a central part of the world we want to build.’ In this story, the internet isn’t only a disruptive tool that helps bring about democracy where it doesn’t exist, it’s also represents a vision of decentralized, bottom up society in it’s own right.

This part that feels new and different. ‘The internet as philosophy’ no longer feels so abstract. As an example of how things have gotten more concrete, the internet public has quickly and dramatically changed the discussion on both SOPA and ACTA. Both seemed destined for quiet approval just a few months ago, now SOPA seems to be dead or ACTA is under extreme public scrutiny.

Importantly, people with real power are listening and internalizing to this conversation. A White House response to SOPA petitions said:

“Across the globe, the openness of the Internet is increasingly central to innovation in business, government, and society and it must be protected.”

and

“Proposed laws must not tamper with the technical architecture of the Internet through manipulation of the Domain Name System (DNS), a foundation of Internet security.”

Note what’s happening here: the leaders of a major economic power are espousing the importance of an open internet. They are also calling out the protection of a key technical building block upon which the open platform and philosophy of the internet are built. Similar things have happened in Europe around ACTA. This is both important and unprecedented.

At Mozilla, we’ve been talking about what to do next on SOPA and ACTA. This is important. But I believe there is a bigger question: how can Mozilla fuel, bolster, cheer on and be a part of this rising internet public? The world we’ve imagined may be just around the corner: a world where the ethos of the web is a conscious part of how huge numbers of people approach their lives, their work and their government. This is a the world I want to live in.

I’m going to think and write about all this some more. Partly in the context of SOPA and ACTA. But also in relation to building a more web-literate society — teaching tens of millions more people how the web works and how to code. Any thoughts you’ve got would help.

PS. A tip of the hat to Dave Parry for his ‘It’s not the Public Internet, It is the Internet Public.‘ post. I’ve gone in a slightly different direction, hopefully in a way that’s complimentary .

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.

Branding at Mozilla community events

The Mozilla Japan team did a great job at branding at the recent Hive Tokyo Pop-up. In particular, they a) made a typical cafe look like a Mozilla space while also b) giving community projects a good way to explain themselves with hackable signs. It impressed me enough that I wanted to share.

The core asset was a poster-sized glossy foam core board with Mozilla branding around the edge and a big whiteboard space in the middle:

For people who don’t do events, this may seem like no big deal. But it’s huge. At something like a Mozilla Festival Science Fair, these posters let presenters tell their own story while still using a single brand to pull together the whole event. Here are a couple of signs from the event:

In addition to these poster boards, Mozilla Japan also did a good job of general signage and small elements that pulled the space together in a cohesive way. They even had small event signs to cover over the cafe’s own signage (didn’t get photo). A nice touch!

We should emulate some of this stuff for our community event spaces at Mozilla offices. I’m going to investigate building up a set of materials like this for the Toronto office at the start using generic Mozilla branding. We should also investigate for community events we do in cities around the world. We’ll probably also do some stuff like this for the Mozilla Science Fair at MacArthur’s DML conference in San Francisco.

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.