Tag Archives: summer campaign

Webmaker Recipes 101: How to host your own kitchen table hack jam

Posted on by
1

How can we make coding and webmaking a family affair?

As part of Mozilla’s big Summer Code Party (kicking off June 23), we’re inviting the world to host teach-ins and learning events. Everywhere. At their local library, at partner events, at Mozilla offices, and with small groups of family and friends around their own kitchen table.

Recipes for webmaking: testing the “Kitchen Table” event kit

the new "Kitchen Table event kit" prototype

This new Kitchen Table Event Kit is a draft “how to” for hosting your own kitchen table hack jam. We invited you to help prototype and test it in preparation for going big this summer, using Mozilla webmaking tools like Hackasaurus and Popcorn.

8-year-old Amelia liked remixing images and text to create her own web page

More than fifteen awesome groups of families and friends got together to test it out — from five-year-olds making web pages about snails with their dad, to adult friends getting together for a “mimosas and making” party.  Here’s what we learned together.

What was your favorite moment?

Here’s what our brave beta testers said was their favorite part of the experience:

  • “The SQUEAL when my friend first hacked Google.”
  • “When my mom replaced an image of a chocolate chip cookie on a webpage of a  kitchen table with an image of matzo so it was kosher for passover.”
  • “When (5 and 6-year old) Lucas and Kai saw themselves in a web page with their freshly captivated snail, they so began to get the idea of how info gets into the web.”
  • “Watching my boyfriend and my mom work on something together.”
  • “When  my friends started ignoring me completely so that they could make their  remixes more remixy. I was talking about something and they were like  ‘What?’”

What we learned:

  • People enjoyed the format. But sometimes found it awkward to get out of a traditional “teacher” role.
  • Keep the activity asks simple. But be familiar with the specific skills and interests of participants.
  • Grow a leadership community of people who’ve done the events and can support others.
  • Make it interest-based. Start with something people are already interested in. Or a web site they use all the time and are familiar with — then have them take it apart and remix it with the X-Ray Goggles.

What we’ll do to improve:

  • Continue to refine the Kitchen Table Event Kit. Polish it up for our May 15 announcement bout the campaign.
  • Create clear communication channels for hosts. Before, during, and after events.
  • Provide more simple learning projects and curriculum.  Offerings that help people find activities that fit their interests.
  • Smoother “share” functionality. Create a gallery of hacks and completed projects, so you can see what others made.

Going deeper: your analysis and feedback

There’s lots more great analysis and feedback from our testers, with take aways from:

Get involved

 


Meet the “Web Arcade:” hackable games that teach the web

Posted on by
3

Mozilla’s big upcoming Summer Campaign is all about making it easy and fun for anyone to learn basic coding and webmaking.

To that end, the Mozilla Webmaker community has been hard at work on curriculum, learning missions and starter projects — including a new “Web Arcade” packed with hackable missions and games.

Mini-games that bake in HTML and CSS

“Enter the Web Arcade to explore the Open Web, a world of serious cats, planking videos and minecraft  empires. The Web Arcade offers mini-games that help you level up your HTML and CSS skills — and MAKE your very own web masterpieces.”

As Jess, Laura and Chloe explained in yesterday’s Mozilla Webmaker call, the arcade includes mini-games like:

  • “Make Me Pretty.” Update ugly webpages. Go back in time to 1999 — and update ugly pages for today’s web. Read about it. Or try it out now.
  • “Internet Famous.” Use your HTML and CSS swagger to mix and match elements, creating an internet meme to conquer all internet memes.
  • SansComic Killer. Format this typography — please!
  • Webstructable. Make your own tutorial, sharing what you’ve learned.

Get involved

Announcing Mozilla’s Summer Campaign: May 15

Posted on by
1

Prepping for May 15 blastoff. We’re working up to a big public announcement around Mozilla’s upcoming summer campaign. D-day is Tuesday, May 15. The party itself will kick off June 23.

Mozilla’s Summer Code Party: June 23 – Sep 23

  • What? MEET up, MAKE something cool and LEARN how the code behind the web works.
  • When? June 23 – Sep 23, kicking off with a Global Weekend of Code.
  • Where? Anywhere. Your kitchen table. Your office. Your local library.
  • Why? We believe everyone should know how to create and code on the web.
  • How? Organize a meet-up. Volunteer to teach. Or become a partner.

Pre-flight checklist:

Host your own Summer Code Party event

More polished event “How Tos” are on the way for May 15. In the mean time:

Code is all around us

Posted on by
6

What do we think about when we think about “code?” Many of us think something like this:

Alien. Intimidating. Gobbledygook. Maybe even vaguely sinister, like The Matrix. Something that says: this is not for you.

Whereas, for the Mozilla Webmaker project and our Summer Campaign to teach the world to code, we want people to imagine code more like this:

Or this:

Or maybe this:

In other words: code as something all around us. Warm. Human. Poetic. Not some scary bunch of geeky gibberish that only anointed high priests understand.

We want to show code and webmaking as revealing the patterns and hidden dimensions of everyday life. Swirling all around us. Like everyone’s second language.

The web as literacy. Code as everyone’s second language.

Code and webmaking as literacy — rather than just a professional skill. For a general audience of everyday people who have mostly never touched code before (teachers, youth, journalists, filmmakers, your mum), we want to employ a visual language that treats code less as math and mechanics and scary algorithms — and more as magic pixie dust. Or a maker’s language that can turn your big ideas into reality.

Once you see code as something that makes up your everyday world, you can begin to start using it yourself. To make something amazing, or bend the rules of everyday (digital) reality.  Moving from passive consumer of other people’s stuff to active creator of your own.

The hidden patterns and algorithms of everyday life

This opening to “Stranger Than Fiction” isn’t about code per se — but it perfectly captures the spirit we’re after. Revealing the hidden patterns and algorithms of everyday life.

The web as a maker’s world — NOT a series of tubes

Other visual examples of the web often try to depict it as a network or ecosystem. The challenge with this approach is that it emphasizes the pipes and tubes and tech — instead of the human dimension, and the web as a maker’s world.

Not this.

How do we apply this idea of “everyday code” in our visual language, branding and videos? As we think more about how to visually tell our Mozilla Webmaker story, we want to move away from abstract depictions of “the web” and instead emphasize the human dimension.

We want to tell stories about real people and Mozilla community members making amazing things. Passing and sharing them with others through a combination of maker spirit, open collaboration, and building the future they want together. Using real code to build big ideas.

Not this really, either

Seeking your examples: what else is like this?

I’d like to ask your help in collecting more examples like these. Images, web sites, memes, concrete examples — anything. Examples of:

  • Code as poetry. Code as a language for saying something more simply or elegantly than could be expressed otherwise.
  • Code as meme. Like “Movies as Code” Or “Programmer Ryan Gosling.”
  • Code as expression of the everyday world. In places we don’t ordinarily think of it: nature. An alarm clock. Your car.

What other sites or examples should we be looking at? I’m new to this world, and would love to learn from your favorites. Please share links as comments here. We want to collect memes and examples that can help inspire this style guide for our “Meet the Webmakers” video series.

We like the direction — but want to insert more real code into the mix, and slip in references that real developers will appreciate. So what examples would you include for inspiration? I know you’ve got them…