Planting seeds for webmaking

Mozilla Webmaker takes its first big step this weekend: asking people to help out. And, just as important, asking how we can help others working for the same cause.

Mozilla’s Summer Code Party kicks off on Saturday, June 23. Our ask is simple: teach someone how to make something on the web. This could be teaching your kids basic HTML with Thimble or Tumblr. Or it could be learning JavaScript with friends on Codecademy or at a CoderDojo. The only thing that matters is that you are making and learning with friends.

Why? Because getting together with people to make and learn is essential if we want to build a generation of webmakers. It will fuel the community we need to reach our big goals. And, more immediately, getting people together will help Mozilla figure out how to work well with partners and to identify potential community leaders (is this you?).

The good news: many of you have already stepped up to help. There are already 394 Summer Code Party meetups and events in 320 cities and 67 countries scheduled for this summer. And, if all goes well, people will continue to do more and more events over the course of the summer.

Also, we’ve had a great response from partners who share Mozilla’s philosophy and goals: helping people learn how to create cool and powerful things on the web. Tumblr. CoderDojo. The London Zoo. Codecademy. Young Rewired State. Creative Commons. The San Francisco Public Library. NESTA. DoSomething.org. Code for America. Campus Party. And dozens more.

We’re stoked to have these partners are involved, and we also hope we can help them by connecting them to new communities and promoting their work. Helping partners succeed is critical to the success of Mozilla Webmaker overall.

Of course, we’re still just planting our first seeds this weekend. Mozilla’s Webmaker tools are still very basic (I’ll say more about our long term plans soon). And, we’re still in the early days of figuring out how to organize the community around our making and learning goals. But you have to start somewhere. You have to plant seeds.

Which leads me to a second ask: help us grow these seeds. Mozilla Webmaker is premised on the belief that we can build a global community of people who share our goals. We chose Summer Code Party as our first big step because we know we need to start building this community early: to figure out how to organize things; what tools people need; and how we can help others working on similar projects. So, jump in. Push us. Help out. Ask for help. Also, be patient. Growing things takes hard work from alot of people. And it takes time.

Mozilla Thimble preview

Later this month, we’ll be releasing Mozilla Thimble. Thimble is a simple web page editor combined with a series of ‘projects’ that help you learn the basics of HTML and CSS. The idea is to get people to learn basic web coding by just diving in and making something. Thimble projects make that easier by giving people guidance and a head start.

Thimble will go live just in time for our Summer Code Party campaign that kicks off on June 23. We want people using Thimble at their ‘kitchen table’ events, so I thought I should give people a preview of what’s coming.

The first thing you’ll see is a gallery of Thimble projects. The initial projects are designed to grab the interest of 8 – 14 year olds and to invite them to start making. We’ll be rolling out projects for older teens and adults later in the year.

As a part of this ‘interest grabbing’ approach, a number of the projects have been developed by organizations that already work with young people. This one is from the London Zoo. It teaches basic HTML and a bit about endangered species at the same time.

The Thimble interface itself is a simple side-by-side web page editor based on Code Mirror. The left pane is the code, and the right pane is the page preview rendered in real time.

The project pages are a mix of instructional comments and actual page elements. In the London Zoo Awesome Animal Builder project, the aim is to create your own species by combining image files from real endangered species that the Zoo wants you to learn about.

Here I was able to change the background of my species picture by changing the CSS class. As the code comments explain, I can choose between ‘ocean, rainforest or desert.’

If you’re new to HTML and CSS (that’s who this is aimed at), we’ve put in a bunch of features designed to help you if you get stuck with tasks like this. For example, you can click on any tag to get info on what it does.

Also, we’ve included pop-up hints that help you figure out what the right syntax is for a particular element.

After changing my CSS class (above), I then started moving different PNG files from different species into the frame with the question marks at the top of the page. These files are all given to me lower in the page along side info about the real endangered species. All I have to do is cut and paste the image URLs in order to build my animal.

And, voila! After moving a few more image URLS I now have a completed animal. I’ve also learned a) how headline tags work in HTML, b) the idea that CSS can be used to change the look of a major element of a page and c) that images in a web page are just references to a file somewhere on a server.

These may sound like small things to learn — but it’s exactly these small things we want people to start with. There are other projects in the gallery that deal with more advanced HTML and CSS topics. And, in a later release, anyone will be able to submit a project page to teach whatever aspect of web development tickles their fancy. Our hope is that Thimble can become a ‘Wikipedia of webmaking lessons’, which would be an awesome resource for the world to have.

Of course, our Mozilla Webmaker ambitions are much bigger than just teaching HTML and CSS. PopcornMaker will be a major resource for helping people make and learn about interactive video on the web. And, later this year, we’ll start experimenting with ways to teach people Javascript, most likely through game modding and making.

Early next week, we’ll release a preview version of Mozilla Thimble to people who are organizing Summer Code Party events. Most of these events are small and short — just you at your kitchen table or in your living room teaching two or three people a bit about how to code for the web. If you want to organize an event like this (and see the Thimble preview), sign up here on the Mozilla Webmaker events site.

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.

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.