All posts in events

Mozilla Festival 2012: Making, Freedom and the Web

Thrilled to again lead the Mozilla Festival, and a yearly celebration of learning and innovation for and with the web. The event will take place in London, November 9 -11.

We want everyone to tap the full creative power of the web. The Mozilla Festival is a magnet for people interested in learning about — and playing with — the web’s future.” –Mark Surman, Executive Director, Mozilla

Coders, designers, journalists and educators will join with filmmakers, gamers, makers and youth from more than 40 different countries. Together they’ll participate in a series of design challenges, learning labs and fireside chats spread across four floors of the Ravensbourne design and media campus in East London.

Unlike traditional conferences, the Mozilla Festival is on hands-on making and collaboration. It’s “more hack, less yack.” You won’t see slides or sages on the stage. Instead, it’s a big, bustling tent for everyone who shares Mozilla’s vision for a more open, web literate world.

Technology is at the point where learners don’t just use the tools, but make the tools. This happens at places like the Mozilla Festival, where geeks and practitioners get together.” Joi Ito, Mozilla Foundation Board Member, Director of MIT Media Lab

This year’s key themes:

Get involved

Re-posting an article by Matt Thompson.

Hive Berlin Speed Geeking: How’d it go?

The Results

For last week’s Hive Berlin Speed Geeking, we had a solid turnout of 30-40 participants, including a few families. (yay!) For three hours, we hacked at learning stations where participants could hop in and make something.

The event was generously hosted at Supermarkt, a very fitting platform for these kinds of experiments and budding communities. The station leaders came from a range of backgrounds: school teachers, open source contributors, youth program directors, designers, and all sorts in between.

The goal of the event was for these leaders to showcase their offerings and to connect with other individuals and Berlin institutions working at the intersection of learning and digital tools. It’s also an opportunity to find new collaborators or ways to extend existing curricula within the city.

The Stations

The stations we had running were:

  • Art Bots by Ela Kagel of Supermarkt. Wire up a little robot that draws on paper. Learn about electronics and crafts.
  • Learning with Wikis by Twoonix. Set up wikis to organize school activities and educational materials. Learn about collaborative editing.
  • Popcorn as a Marketing Tool by Robert Seibel. Remix live web content into an online video. Learn how to pitch a product using video.
  • Popcorn Maker by Laura Hilliger of Mozilla. Craft interactive media pages using fun templates. Learn how to augment videos with live data and content.
  • Stop Motion Animation by Jan Rooschüz of kijufi Landesverband Kinder- & Jugendfilm Berlin e.V. Film a stop animation video using sets & pieces you design. Learn about film composition and storytelling.
  • Twitteratur by Christine Kolbe. Analyze classic German literature using Twitter. Learn about text analysis and composition in brief form.
  • Thimble by John Bevan of Mozilla. Hack webpages and play short games in a two-pane code editor. Learn introductory HTML & CSS.
  • 3D Printing by The Build or Buy Store in Betahaus. Try out a 3D printer and play with objects made with different materials and techniques. Learn about new ways of manufacture and customization.
  • Editing Wikipedia by Wikimedia Germany. Get started editing Wikipedia by typing a few lines of text and formatting them. Learn about wiki markup and collaborative editing.
  • Send Flowers to the World by Mark Shillitoe. Paint a vase of flowers on an iPad. Learn about different kinds of brush stokes, painting techniques, and composition.

The Next Steps

We closed the event with a discussion about how it went & what participants would like to do next.

The feedback was quite positive. There was helpful advice on explaining the event more effectively (it was hard for several people to know the target audience), and how to get more participants (recommendations for communication channels and partners to bring more young people for next time).

There’s interest in trying similar formats at schools and at educational events in Berlin.

To that end, we’ve started a mailing list. Please join if you’re interested in getting involved. We’ll also keep using the hashtag #hiveberlin.

Wonderfully, the director of Hive New York City Chris Lawrence was in attendance and shared his experience setting up a learning network in NYC. There will soon be a kit to help other cities start Hives and to share ideas across the larger meta-network. Really looking forward to see if Berlin can plug into that.

Thanks again to everyone who participated! Keen to see where we go next.

Poplab! Introduction to Popcorn Maker

This week, Laura Hilliger and I held an Introduction to Popcorn Maker workshop at Supermarkt, the lovely community space in Berlin, Wedding.

Based on the participants’ feedback, they really enjoyed it and learned a lot. If you’re so inspired, please feel free to build on this agenda, host your own intro to Popcorn Maker, and tell us how it went!

Here are our agenda notes:

Learning Objectives

By the end of the four-hour workshop, participants will be able to:

  • Augment video on the web
  • Remix web content
  • Understand basic information architecture & procedural storytelling
  • Be familiar with Story Vision Tech (SVT)
  • Plan a simple web native story

Agenda

Go around — (5min)

  • Name
  • What are you working on?
  • What do you want to get out of this?

Spectogram — (15min)

  • Interaction adds value to a story.
  • A story always has a beginning, middle, and end.
  • A film made for and with the web can win an Oscar.

X-Ray Goggles — (30min)

Discussion: Intro to the Open Web — (20min)

  • Hackability
  • View Source
  • Standardization

Thimble Projects — (30min)

Break — (15min)

  • Grab a coffee.
  • We did a version of Hack the Robot Dance here to get people’s energy back up.

Intro to Popcorn and Web Native Film — (10min)

  • Show demos
  • Explain dynamic data
  • Web standards
  • Hackable and remixable
  • Visual interface vs .js library
  • Not replacement for video editing software
  • More resources

Popcorn Maker Project I: Robots (procedural storytelling) — (30min)

Popcorn Maker Project II: Remixing using the Popup template — (15min)

Next: Give participants two options: in smaller groups, either learn about planning a web native story, or continue hacking on template projects.

Path 1: Planning a web native story — (30min)

  • Paper prototype a web native story using Story Vision Tech (SVT).
  • Sketch storylines and wireframe as much as possible.

Path 2: Continue hacking on templates — (30min)

Feedback & Share What You Made — (10min)

Speed Geeking! August 26 with Hive Berlin

** Update:** A lot of key people have requested to reschedule the speed-geeking because of holiday travels. Since we want to pull this off with the right people in the room, packed and buzzing, we’ve decided to host the event on August 26. All the other info remains the same.

Speed Dating for Geeks! Get to know about 5+ topics in under an hour.

We’re hosting a speed geeking session on July 22 with Hive Berlin at Supermarkt in Berlin, Wedding from 1300 – 1500h.

This is a rapid-fire format aims to:

  • Showcase learning opportunities in the city
  • Get to know fellow educators and hackers
  • Play with new tools and concepts

And as a station host, you’ll get to share your project with a larger audience, gather feedback, and get really good at speaking quickly and clearly.

What is Speed Geeking?

The setup will be 5 or more tables in a circle in the room.

  • Each table will have a station host, who will present their project using flip charts, a few slides, screen grabs, whatever — in five minutes or less.
  • We’re thinking: get an Arduino to blink, remix a website, record a sound, edit a web video, hack a toy. Something fun, hands-on and educational.
  • Participants rotate among the speed geek stations in small groups. Every five minutes, you’ll hear about another topic. This provides a way to learn about a broad range of projects very quickly.
  • And the end of a full rotation, we’ll turn the floor over to open hacking. You can go back to your favorite station(s) and dig in more.
  • Afterward, we’ll regroup, share what we made, and talk about how it went.

Why should I come?

It’ll be a fun Sunday affair where you can learn something, meet new people, and share what you’re passionate about.

We plan to iterate on event formats like these and build towards a learning network in Berlin. Whether you’re interested in the bigger Hive network plans or not, you are very welcome to come play, make and hack with us.

How do I get involved?

  • Would you like to attend? It’s free! For kids and grown-ups alike.
  • Would you like to host a station? 3 hour time commitment max!
  • Have an idea for something else? Email michelle – at- mozillafoundation – dot – org

See you on July 22! #hiveberlin

Images by Jon Lim with Hive Toronto

How to Host a Kitchen Table Event

Just grab a few friends, a laptop, and something to hack on together!

Prepared for Mozilla’s Summer Code Party.

London Learning Jam

How would you teach something about the web using a game?

This was the design brief we gave a talented group of educators, designers, and developers last week at the Mozilla London Learning Jam.

Our thesis is:

  • Use game-like mechanics to encourage learning and making
  • Hack on real code, not rely on training-wheels
  • Meet learners at their interests with tools that help them express themselves

Thimble

We built a framework to make it easy to create new games. It’s a two-pane editor called Thimble.

One side has code and short comments to explain what to do. The other side has the rendered website, which updates after every change you make to the code, so you can see how the snippets connect.

We used the Thimble framework to hack on new games and playtest them with adults and kids.

New Games

During the first two days of the learning jam, we broke into groups to design the learning games. Some groups came with a brief in mind, others found their way using paper prototyping and talking through what they’d like to make.

I was thoroughly impressed by the creativity and thoughtfulness of the new games:

  • The Animal Builder by the London Zoo. Mix and match animal body parts to create hybrid animals. Learn HTML & CSS.
  • Wickedpedia by Steve Bunce (Open University) and Oliver Quinlan (Plymouth University). Edit celebrity Wikipedia pages. Learn hyperlinking, generating content.
  • Supporter 2 Reporter by Radio Waves. Create your own blog to report on sports such as Olympics. Learn blogging, layout, curation, branding.
  • Get off my Lawn by The Guardian and Goldsmiths. Clear the zombies away from your garden lawn. Learn CSS positioning.
  • Bunnies by Ben O’Steen. Save the bunny from danger by putting it in a safer environment – or worse! Learn HTML Basics, images, CSS positioning.
  • Cube by Laurian Gridinoc. Create a 3D Cube. Learn CSS and trigonometry.
  • Readability by Doug Belshaw. Make the text on your webpage legible. Learn HTML and typography.

What makes a good learning game?

We playtested the new games twice: once with a group of educators, policy-makers, funders and activists and the next day at CoderDojo London with about 15 kids.

Check out what the kids made!

The feedback from both rounds was incredibly helpful. My biggest take-aways were:

  • The comments in the code can be instrumental in making an effective learning experience. The Zombie game did a fantastic job both setting up the code to apply your learning and to prompt you using simple comments.
  • Give a clear mission. Some of the games had brilliant premises, but did not communicate upfront what their purpose was. When you start a game, you should know immediately what the goal is and what you’re expected to do.
  • Prompt creativity, but plan some backups. In games like Make Your Own Meme, participants said they felt pressure to be creative and didn’t know what to write. If we had more defaults or recommended images pre-loaded and commented-out, you could easily toggle in new content without much hassle.
  • Show what others have made. A key feature rolling out next for Thimble is a gallery. I think this will go a long way in encouraging users and showing what’s possible with the tool.
  • Work in pairs. Another tested thesis of ours is the power of working together. I found during the playtesting that teams hacking on the same games benefited greatly. They began to teach each other things and be inspired by one another.

What next?

We’re rolling in this feedback into the next release of Thimble. In future versions, it’ll also be easier to create new games and to share hacks.

The learning & making kicks into high gear this summer, starting June 23 with the Summer Code Party. We invite you to get together with family & friends and teach other the web using these games & whatever you like. You can also think about a hack jam to build even more games.

And there will certainly be a component of these tools & games at this year’s Mozilla Festival. We’re bringing some of the best people and projects to London to showcase what they’ve done over the summer — so dive in, and also give us feedback about what we can improve, what you’d like to see, etc.

Thanks!

We had a lot of fun, and this event won’t been possible without a number of great people.

Firstly, a huge thanks to NESTA in particular Amy Solder and Mark Griffiths for supporting the event and paving the way with key organizing.

A shoutout to all the hack jam and playtesting participants. Congrats to Alaistar Davies, Mark Riches, Laurian Gridinoc, William Duyck, Allan Callaghan, Doug Belshaw, Ian Usher, Oliver Quinlan, Ben O’Steen, and Steve Bunce for making cool new games.

Thanks to CoderDojo London, especially Andy Kent, for letting us play together.

Thanks to Jess Klein, Chloe Varelidi, Erin Knight, Laura Hilliger and Andrew Hayward for their hard work on the learning missions, Thimble, and leadership at the jam.

Lovebomb to Allen Gunn for facilitating, to John Bevan for inviting such great people, to Ravensbourne for hosting us, Paul Clarke for the photos, and to Mark Surman for the vision of how we can all learn and make on the web together.

Images by: Paul Clarke and Oliver Quinlan

Mozilla Popcorn Learning Lab in London

Next up in the round of event recipes, Brett & I wrote up a Popcorn learning lab.

Since publishing the Popcorn hack jams how-to, we’ve been in touch with film festivals, coder communities, and video labs from all over about running events about Popcorn.

Skill up the community

At the moment, we’re still in a resource-crunch. Even though we can help event organizers to plan and facilitate their hack jam, there’s a shortage of people who know how to use Popcorn.

The options we currently have are:

  • fly around Team Popcorn, based primarily in North America
  • or, skill up web developers the world over, empower them to code and facilitate, and reward core contributors with trips to cool places like Cannes and Cape Town.

The more we can train the trainers, the more we can scale these open projects.

Test Round in London

To test out the recipe and grow the European community, we’re throwing a learning lab on Sunday, March 25 in London.

We’re looking for Javascript developers and filmmakers bold enough to dabble with code. Drinks, code, and good ideas are in the mix at this one-day event led by the Mozilla Popcorn team. Please sign up to join!

Want to know what we’ll do in London, or how to host your own Popcorn learning lab? Read our howto.

HowTo: Mozilla Popcorn Learning Lab

Popcorn Learning Lab

A Mozilla Popcorn Learning Lab is an event to introduce developers and filmmakers to Popcorn.js, an HTML5 javascript library that integrates the web into media production.

Participants will create plugins, hack templates, and code a demo that easily remixes web content into video, using open tools and collaborative design.

You can organize a learning lab with this guide! (A huge shout-out to Julia for translating this into French)

Why Popcorn?

Well, besides it being fun Javascript library to play with, it’s a powerful tool to create web-enabled video. Christian Heilmann did a great job describing its strengths and opportunities:

  • Video is typically hard to edit and change
  • Video is often a black, unindexed hole on the web
  • Separation allow for easier maintenance, enhancement, accessibility, and discovery
  • HTML5 video is just another page element
  • The timestamp is the glue
  • Tap into the real-time web using Popcorn.js

Demos also speak loudly about Popcorn’s possibilities. Take a look!

What

Participants will get their hands dirty by sharing hacks and peer-reviewing projects. Demos from the Popcorn community provide inspiration and running code to build from.

The motto: Learn by sharing and making!

Learning Labs can be hosted in partnership with Mozilla, who provides facilitation experience and extensive knowledge of the software, and by community members versed in Popcorn.

Mozilla will work with partners to ensure participants leave with a deeper understanding of Popcorn’s possibilities and how to teach others.

Learning Labs can also be self-organized following this handy guide!

Who

Teams consist of:

  • Web developers skilled in Javascript
  • Bold filmmakers wanting to play with cod
  • Experienced Popcorn.js contributors

Small teams of web developers are paired with experienced contributors. Facilitators and web designers are also key roles at the learning lab.

How

Pre-Learning Lab Engagement

Mozilla and partners contact Popcorn community members, Javascript developers, and filmmakers in the area. Through lightweight interviews with sampling of participants, the organizers calibrate the skill levels and interests of the group, fine-tuning the agenda around what people want to learn and make.

Agenda

All the participants and facilitators meet for a group demo. Popcorn contributors walk through the basics of the Javascript framework, highlighting use cases and possible avenues of development.

In the first hacking session, depending on technical skill, participants choose to:

  • play with Popcorn Maker — an authoring environment for interactive video — and turn a video interactive.
  • or dive into coding a plugin, a powerful way to bring in another service, like Flickr, OpenStreetMap, DocumentCloud or many others, to respond to video.

After busting a hack, the group shares back what they made. Participants give feedback, file bugs, offer help, and note ways to improve the experience.

In the second hacking session, you can:

Participants code their project, giving feedback and checking in with more experienced contributors if they get stuck.

At the end of the day, a screening and party is held. Each group demos their final code, evaluates the process, and celebrates all the hard work.

Afterward, participants sign up for activities they’re interested in: joining upcoming events, contributing code to Popcorn.js, teaching other developers, or just staying informed about the project.

Resources

  • At least one computer per team.
  • Video-editing software as well as a fast, modern browser.
  • Popcorn.js installed.
  • Video files for each demo.
  • Reliable wifi.
  • Power outlets.
  • Projector with suitable adapters
  • Meals – events should be catered
  • Amenities such as coffee, water, and snacks.
  • Travel support to the learning lab, where needed.

Case Studies of Popcorn Events

Independent Television Service (ITVS) + Mozilla, San Francisco. http://www.wired.com/underwire/2011/10/coders-filmmakers-popcorn/all/1 Video: http://mozillapopcorn.org/the-living-docs-hack-day/

“ButterCamp”, NYC, March 2011. http://mozillapopcorn.org/videoblog-buttercamp/

Mozilla Festival, London. November 2011. http://mozillapopcorn.org/what-we-made-at-mozfest/

Photos: CC BY-NC-SA by Jonathan Mcintosh

Mozilla Event Menu: Testing Continues

It’s been really helpful to hear feedback from colleagues & the community about the Mozilla Event Menu (see Version 0.2), and here’s a shoutout to Gianfranco for his thoughtful input & article about the menu on Conference Basics!

Version 0.3

Rolling in the feedback, the latest version of the event menu is simpler still:

(PDF)

We decided to go for the Holy Triple. The menu should be streamlined and simple. There are places to share all the other crazy formats in development (see below), but when people come to Mozilla for the first time, having clear calls to action help.

The new menu now contains three event types: meet-up, learning lab, and hack jam.

Importantly, we removed the fireside chat from the core offering. I think this decision is keeping with our philosophy of interactive events (you’ll have more decentralized conversations at a meet-up than in a fireside chat). Plus we continue to face technical challenges to online discussions.

We also omitted the Mozilla Festival, as it’s not (at least at this time and in its current format) an event that an organizer would come across and run on their own.

Other changes in this version include a clearer call to action: “What do you want to organize?” and an invitation to hack the menu. We always planned for the menu to be bendable to suit an organizer’s appetite, but including an explicit invitation to do so is more with the Mozilla spirit and hopefully helps people see this tool as a guide, not a prescription.

With William Quiviger from the Mozilla Reps program, we talked about iconizing information like prep time, participant size, and estimated cost. I still think this is smart information to include, but failing good design, I wasn’t able to work it in without distracting from the menu. Perhaps the next version can play with those elements.

Very keen to hear your thoughts on this!

Mozilla Menu Extras

Seeing the success of the Hive Pop-Ups, most recently in Tokyo and forthcoming in Toronto, we’ve talked about how to better offer additional event formats that may not be our core calls to action, due to complexity, resources required, and other reasons, but still very powerful and templatable.

I see these as advanced formats, or in keeping with the menu metaphor, “extras” that can spice up a meal. There is a huge opportunity to develop resources & communities of practice that drive these formats as well, and therefore, here’s a cut at the Mozilla Menu Extras:

(PDF)

The extras include: fireside chat, idea jam, science fair, pop-up, and the Mozilla Festival.

What do you think?

Where from here?

We’re continuing to collect feature requests for an online event platform as well as conducting an audit of 3rd party event sites.

There will also be a sprint at the end of the month in San Francisco to 1) wireframe our online event presence and 2) create a punchlist of resources for event organizers.

In the meantime, Laura Hilliger is leading efforts to adapt the Hacksaurus Hacktivity Kit and our event resources to P2PU. The platform is home to a learning community that could help share and vet these resources, plus build in the peer-to-peer mentoring model we hope to grow towards. Laura is also thinking deeply about how to overlay Mozilla’s webmaker curriculum onto the event menu, which is quite exciting.

As this loooong post shows, there are lots of places where the input from experienced organizers and community members would really help focus and improve these efforts. We’d love to hear from you if this is on track, and if these tools help serve your needs!

Feature Requests for Webmakers

As part of the on-going efforts to help webmakers the world over build & learn together, we’re collecting specs for event infrastructure. The Mozilla event menu is a piece of this, guiding community members to the event formats that best suit their needs and interests.

Once they’ve decided on an event type, organizers need a simple way to write up the event, spread the word, communicate with participants, and track outcomes.

Feature Requests

Thanks to conversations with Ben Simon, Jess Klein, Ross Bruniges, Matt Thompson, and others, we’re getting crisper on what features are essential to the Mozilla event infrastructure.

As an initial strawman, I proposed these features:

  • super simple event creation & categorization
  • localization-friendly
  • easy & secure data portability
  • good developer APIs
  • participant email capture and ability to mail them

I also think payment support is important, but not essential. At first, I argued strongly for it, because some organizers may need to recoup costs. But perhaps this is addressed by clearer sponsorship options and encouragement to use additional payment services, rather than a core requirement of our event infrastructure.

Another bonus feature is if the tools are already widely used and familiar to our communities. I think this is important for ease-of-use and discovery. For example, my friend Johannes uses Lanyrd to explore interesting upcoming events. Just yesterday he booked tickets to a festival he just discovered on Lanyrd that day. This suggests that if we don’t use popular listing sites, we miss out on potential participants. At the very least, strategic cross-posting should be encouraged.

Ben Simon has written an excellent post in response to the feature requests strawman. In it, he argues for these additional functions:

  • Ability for event organizers to organize over time: Communicate with participants before & after an event, plus allow sign-ups for single instances & repeated events
  • Groups: Search & find relevant events by geography, theme, skill level, etc.

Both of these are right on the money in terms of what we want our event infrastructure to support.

Prioritizing

Big questions we have now are:

  • Are the above features the most important?
  • Are we missing any?
  • And, once the list looks right, how to we deploy/build the infrastructure?

Over the coming weeks, I’m hoping to chat with people who’ve already organized events like the talented Heather Payne in Toronto (check out her upcoming Hive Toronto Pop-Up), Mozilla Kenyans Cliff Argwings & Alex Wafula and Product Dundee’s Jon Rogers & Mike Shorter, as well as people who’ve expressed interested in hosting something like Nick Doiron from CodeforAmerica, Christian Villum from Platform4, and Henrik Sandklef from FSCONS.

I’d like to get feedback on whether we’re prioritizing the right features and what would be helpful for them in future events.

There is also a big effort at the Mozilla Corporation to improve their event infrastructure, and we should definitely sync up & share solutions as much as possible.

3rd Party Audit

In parallel, we’re preparing for an audit of 3rd party event sites.

Considering there are companies that spend all of their time building event platforms, I argue that we should use those services, insofar they meet our needs, rather than coding something from scratch and maxing the bandwidth of our software team.

Ideally, the 3rd party site will feed into make.mozilla.org, a yet-to-be-coded aggregator for all the Mozilla webmaker activities.

On the list to investigate:

  • Lanyrd
  • Eventbrite
  • Meetup
  • 350.org
  • Controlshift (still being built)
  • BlueStateDigital (which we currently use for some events and for Mozilla’s membership program)
  • also the Mozilla wiki, Where is Mozilla? and other in-house solutions

What other event sites do you really like? What do you use or see other people using well?

Images by Cyberdees from the Knight-Mozilla Hack Jam in Dundee.