Following on some great posts by David Humphrey, I’ve used Popcorn Maker to post some thoughts around the direction we’re headed with Webmaker content.
This post is meant to provide some specificity to the 2013 Webmaker goals wiki. In this wiki, we’ve identified “webpages that move” created via tools that “make it way easier than it is today to mix your phone, web and social media content together into a compelling, moving collage that you can share with friends” as the core of the Webmaker experience next year.
This type of content exists in the wild, and in particular the Popcorn.js community has created some fantastic examples of these types of web pages. With a combination of Popcorn Maker, Thimble and the X-Ray Goggles, we’re poised to let anyone make these media-rich experiences.
I’ve put these content types into three categories, and I’m keen for feedback:
The Audio Slide Show Movie from the cloud The Procedural Story
Please leave some comments - in my next post, I’ll explore how we can build social into the experience of making and learning with our tools.
On Friday, I had the pleasure of visiting a local Mozillian (a Mozilla community member) in my home city. I live in Victoria, BC, which is home to a small but passionate tech community. Despite this, I often feel like where I live and what I do are often very separate. So it was with a lot of pleasure that I met with Emma Irwin for lunch to debrief on the #Mozparty event she ran this summer. Emma lives in Sooke, which is near Victoria, but commutes in for her job. We ended up covering a lot of ground, and also discussed her plans to hold a popcorn event this fall (yay!) and about how to build the Webmaker community generally.
I should also say that Emma is a Mozilla Rep (or Remo). The Mozilla reps program “…provides a simple framework and a specific set of tools to help Mozillians to organize and/or attend events, recruit and mentor new contributors, document and share activities, and support their local communities better.” This was a learning experience for me - I’ve had the pleasure of knowing some Mozilla reps from previous Mozilla events, but this was the first time I was meeting another Mozillian “in the wild” so to speak. I wasn’t at an event, I wasn’t at an office, I was privileged to speak with someone who was volunteering their valuable time towards the same mission that I’m employed to serve. Emma is a busy mother, with a full time job, who has volunteered for many other causes, and was choosing to spend an increasing amount of time with the WebMaker initiative. Listening was important here :)
My colleague Benjamin Simon had created a simple form and asked me and my co-workers to poll people who had hosted events. Emma had a blast running her event - she had a few great volunteers help her - their blogs are pretty great testaments to the fun and learning that participants got out of these events. She also had a lot of suggestions of how things can get better.
Here is what Emma had to say:
How did she see her webmaking experience level before the event?
Emma has been a developer for about 12 years, so she has a very advanced level of web literacy. She is also frequent volunteer and community organizer. She works for Royal Roads University as a developer - she isn’t an instructor but has many colleagues who are. Royal Roads offers a lot of distance learning so the subject matter is in the air she breathes. Note: I think we could tweak this section of our survey to better indicate how people self identify - an instructor, developer, artists, etc.
How helpful did they feel our projects/tools were (or did they use something else)?
Very helpful - Emma had been following the Hackasaurus project before it was folded into the webmaker initiative, so was familiar with X Ray Goggles and based her event around that. She used this as a starting point, and moved to Thimble afterwards
Did they feel like their guests learned very much?
Yes - Emma felt everyone learned quite a bit.
What could be improved with materials/explanations/tutorials? X-Ray Goggles:
The decision to remove the publishing functionality from X-Ray Goggles for the summer campaign was hard on Emma’s event. They simply weren’t prepared for it, so had to scramble a bit to explain to their kids. The reasons why were understood, but hadn’t been well communicated.
Thimble:
Emma reported that almost everyone felt the tooltips were too close to the mouse - they confused the kids. She felt they should be in one place - almost all kids struggled with this.
She also felt there were way too many comments in the projects. They didn’t make sense to her learners - they were too meta and the number of them distracted her impatient participants (who were 9-14 years old).
The different methods that webmaker.org and Thimble displayed projects was also confusing, and sometimes took away from the event. Since projects were only sorted by difficulty within webmaker.org, she found herself accidentally asking a kid to do a project out of their league. All kids love Zombies but that particular task was actually hard. They were moving fast and would have rather been troubleshooting something else.
What could be improved with materials/explanations/tutorials?
Emma found the reference material she found on P2PU helpful, but that it was bit “scattered”.
What could be improved with the event platform?
Emma had already filed a bunch of bugs on the event platform (note: I tried to find Emma’s bugs on Bugzilla and the Webmakers issue tracker and couldn’t - makes me wonder where she filed them and suspect our process for that could be much better). She could not, and still doesn’t think she knows how to, edit an event she has submitted. update:As Emma notes, she filed her bugs here, and it looks like they were quickly fixed. She didn’t know this, though, so seems there is some disconnect there.
Anything else?
A few other very helpful insights I gleaned from this rock star contributor:
Emma told me that #1 challenge to hosting the event was explaining it to people. Whether it is explaining “hacking” to explaining the nomenclature of the events, ie a “kitchen table is this. A pop up is that”, to webmaking generally - every single step of the process involves an explanation. We should try, when we can, to just use plain speak. Emma has been working through these issues on her blog.
Emma led with the XRay goggles - and based on some slides that the Hackasaurus team had published, she remixed these for her local event. See her remixed slides here. This gave her a way to spin the event to her local context, her volunteers, etc. She had confidence rolling into the event because she had actually taught with the XRay Goggles before and had given a lot of thought as to the best way to explain them.
Emma had actually taught with the XRay Goggles in schools - it struck me that this was a great event type - the school visit. She shows up with her laptop, gives some fun slides, and they hack for a bit. Though she reported principals and other teachers being uncomfortable with allowing her into a classroom to teach kids how to hack…
Something notable she reported is that when she described her job (a programmer) lots of kids lit up and asked how they could do that. Emma is obviously proud of her work and enjoys it, and this resulted in the kids showing an interest in that as a career. She has anecdotal reporting that the kids were doing the activities at home.
Finally, one thing Emma noticed was that her age range was too broad - she had kids from 9-14, and found that the younger ages trailed off at one point or another during the day. She’d have closer age ranges, such as 11-13, for next time.
Speaking of next time - I’m pretty excited that Emma has another event coming up, this time using Popcorn. Luckily I’ll be able to attend, so if you are like Emma and I and live in the Victoria area, please come by!
This is a detailed post that has been a long time coming. In summary:
Popcorn has achieved a lot in the last 5 months
We’re discovering that our template model is creating too much complexity
We’re realizing that Popcorn is a powerful media literacy tool
We’re increasing our focus on Popcorn Maker as a remixer
Over the last 5 months, the Popcorn team has been busy. While expanding our focus from Popcorn.js to include the Popcorn Maker app, wehaveshipped7releases, closed over 835 tickets, been featured on the mainstage of TedGlobal, ran hack days at North America’s twolargest documentary film festivals, had a brand and UX review by the best in the business, created an educational curriculum for young people, and shipped a new version of our web app. The team has grown - Bobby Richter has been joined by developers Jon Buckley, Scott Downe, and our UX intern Kate Hudson who has become a leader in the project. Our collaboration with the Center for the Development of Open Technology has continued - David Humphrey has taken an increasingly active role in the engineering leadership at the Mozilla Foundation, and new researchers have joined our core contributors there. Its been a heady several months. Luckily we’ve had a few cakes to celebrate our release, or we might have gone crazy.
Let people create great delightful interactive video experiences - quickly
Always stay human readable: HTML, CSS and JS.
Let users walk away with the source and hack it.
…and importantly, encourage the maximum amount of flexibility and generativity*.
* For those unfamiliar with this term, generativity refers to a given system’s ability to foster innovation. As Jonathan Zittrain describes it: “Generativity is a system’s capacity to produce unanticipated change through unfiltered contributions from broad and varied audiences”.
Essentially - innovation without permission. If you had to pick a sentence that describes what gets everyone up in the morning at Mozilla, that would probably be it. (or in Latin: “innovatio sine licentia”).
For Popcorn Maker, we saw the potential for generativity withinin templates. We imagined templates would be the vehicle that would let new contributors create an infinite variety of different interactive video experiences - essentially a video app factory. By creating a base template, we would invite webmakers to modify these templates, submit them to us, and create a virtuous circle of invention and creativity.
What we’re learning
With the launch of Mozilla’s Summer Code Party, a series of events designed to kickoff the webmaker program, we are in a great place to test our assumptions and see how people are using the app. We’ve learned a lot, but two things I want to call out:
Generativity generates complexity
Popcorn is an interest based learning tool
1- Generativity generates complexity
When we imagined the innovation that templates would foster, we didn’t (but probably could have) imagined the engineering problems that would emerge as a result. Each template created a chain reaction of bugs, Quality Assurance problems, and testing issues. To ship the 4 templates we created for the summer campaign, we ended up playing whack-a-mole with bugs and features began to slip.
A case in point is the Robots template that we produced for Storycamp. Our process worked like this:
The storycamp team (Laura Hilliger, Ben Moskwoitz, Jacob Caggiano, Kate Hudson and I) decided we wanted to teach students “procedural storytelling” - that a story can be told by changing a set of variables
I created some content by remixing video from the Internet Archive
Kate created a template that would allow learners to remix this content by adding popcorn plugins - change the google maps plugin and the robots invade your home town, change the flickr plugin and they’re pursuing different humans. Most popular - a new popcorn plugin that used speak.js to allow you to make the robots say whatever you want. Fun!
The problem started when this new template begun crashing browsers. Turns out that each time the robot talked, it actually needed to start a new computing process in the web browser to transcode a new audio file. Each time the bloody robot would talk, 300 mb of RAM was being used up! Slower computers fell to their knees. Solutions were proposed, teeth were gnashed. (note: this was our implementation, not the fault of the very cool speak.js library).
We ran into problems with our manual tests. Could you swap in youtube? Would that work on export? Turns out that CSS animation is crashing Firefox. Is it crashing Chrome? Omygod have you seen this in Safari?
you get the picture.
Now, the Robots template is an extreme case - synthesized speach was never in our roadmap! (and Bobby probably could have told us that was going to crash the browser). Yet we realized that since the most primary part of our web app was essentially boundless (authors could include any JS, any HTML, any CSS), it was going to infringe upon our ability to ship the rest of the features we wanted and do proper QA. We needed to find another way to keep the system open ended and generative, while still allowing us to ship.
#2 - Popcorn is a great learning tool
Since the Mozilla Summer Code Party would be a coming out party for Popcorn Maker, we were pretty nervous when 50 or so kids assembled, ready to use the app. I filmed them using it:
A few things became apparent right away:
Kids get it. Aside from a few annoying papercuts (timeline zoom, our event editor),they found the interface intuitive
They got the idea of mixing video with web content. To the point that they didn’t understand why we thought this was cool :)
They got excited when we let them work with existing Youtube content. They (naturally) thought their project was cooler when it was based on their favourite pop star or TV show
It got me thinking - while Popcorn has always been positioned as part of the Webmaker family, we’ve assumed that Thimble would be the primary learning tool. “We’re having a code party here - we need people writing HTML!”
It was clear at the Toronto event, though, that there was some pretty interesting learning going on. While the kids naturally took to remixing using video, it was definitely the case that none of them had ever used a web app to combine video and 3rd party APIs before.
Looking at the first draft, its clear that Popcorn does address many of these proposed literacies. I circled the literacies I felt were relevant to using Popcorn Maker.
Of course, there’s a fine line between which literacies we depend on vs which ones we teach - but clearly Popcorn addresses many of the “soft skills” of webmaking. And it raises for me a central point of this whole initiative - we aren’t only teaching people to code - we’re teaching people how to express themselves on the web. I’ve never been a coder, but you’re damn straight I’m a webmaker. We need to make sure our tools address not simply how to right semantically accurate HTML and CSS, but that they make you understand that the web is a malleable thing.
“Mozilla believes it’s crucial that we give people the skills they need to understand, shape and actively participate in [the web] instead of just passively consuming it.”
Douglas Rushkoff sums this up in the nice (and gleefully bombastic) turn of phrase “program or be programmed”.
Watch this clip from my 2008 documentary Rip! A Remix Manifesto - Mark Hosler of Negativland sums up culture jamming - you can stop after Mark raises his fist :)
Hosler’s desire to remix media, to participate in culture rather than consuming it, is the same impulse that led Atul to create the X-Ray Goggles. Whether you’re remixing a commercial or hacking the HTML of the New York Times, you’re reflecting on why and how a piece of media is being crafted. And both are a path towards creating your OWN media - to be a participant.
“OMG!!!!!!! That is totally awesomeeeeeeee!!!!!!! ,…the reason i why i love this tools is freedom to select videos which resembles regional cultures, we can experiment with our local videos and make learning easy,interesting and entertaining.”
Popcorn Maker as remix app
Looking at the kinds of creations people have created with Popcorn through this remix-as-learning lens, we realized that the most successful projects have in fact been remixes. A few examples:
TEDGlobal Demo
Ryan Merkley, our COO at the Mozilla Foundation, demo’ed Popcorn at Ted Global using a custom newscaster template. He created a mock newscast that drew dynamically from Google Maps, weather information, and flickr.
These creations all had a few important things in common:
They’re created by combining media from across the web - including 3rd party APIs
They’re relatively quick to make
They completely fill a constrained, rectangular layout
These similarities led to some important decisions with regards to the direction of our app.
To further highlight Popcorn as a learning tool, and to evaluate how it’s used by casual webmakers, we’re aiming to host the app at webmaker.org as soon as possible
we’re rethinking the interface to make it dead simple for people to quickly remix their favourite videos. Rather than a nice to have, support for hosting sites such as youtube become high priority
we’re focusing on one universal layout/template, and ensuring all of our popcorn plugins work with this new layout. This will simplify our development, speed up QA, ensure that popcorn creations work embedded in 3rd party sites, and reduce odd interface requirements such as target areas and certian plugins only working with certain templates.
Taking a cue for our colleagues in the thimble app, we’ll also replace “templates” with “projects”, which are essentially pre-populated starter content that demonstrates how to use the app in a creative way, and which invite the user to jump in and remix. We think that THIS is where the generativity lies - showing people different and creative ways to use our app, and providing them with starter content that lets them get to work immediately. It is also a key goal of the Mozilla Foundation in 2012 to provide easy ways for contributors to get involved in our projects - this will help.
We’ve updated our roadmap to reflect these new priorities. The best place to interface with our roadmap is via individual milestones in our Lighthouse issue tracker:
meme ( /ˈmiːm/)
“an idea, behavior or style that spreads from person to person within a culture.”
“A meme is an idea that behaves like a virus—that moves through a population, taking hold in each person it infects.” - Malcolm Gladwell”
We need Mozilla Popcorn to become a virus.
Hear us out here.
In our early iterations of Popcorn Maker, we’ve been tackling the problem of how to make it easy for non-programmers to create Popcorn experiences. It remains the central focus of the project, and we’ve fleshed out our User Stories to imagine the full experience that a user might have. Ben has described these stories in a recent blog post.
During our Popcorn Maker sprint, we put a lot of thought into imagining how our users’ creations will get shared and disseminated on the web. Ben has blogged about how Popcorn.js is a gateway drug to learning JavaScript (Also of the good sort. Stay with us). Similarly, we want Popcorn Maker to be a tool for injecting the Maker meme onto the web.
Fork my meme
To do this, we’ll need to do a few things. First, we need to make it easy for Popcorn makers to embed their creations on their own blogs, Tumblrs and websites. This means offering <iframe>embeds.
More interestingly, we want to give viewers the ability to fork others’ Popcorn productions. If you’ve watched Jonathan MacIntosh’s Buffy Vs Edward pop-up video remix, for example, wouldn’t you love the ability to easily clone his creation and add to it?
Each Popcorn creation needs a post-roll that offers viewers the ability to 1) Replay, 2) Share and embed, and 3) Fork this creation.
Popcorn Gallery
To build WordPress-like community scaffolding, we need the ability for every single creation to be made available in the Popcorn Gallery. When users choose to [Share] from Popcorn Maker they have an option to share to the Gallery that is checked by default.
While the Gallery will favour our default templates, it will become a jumping off point for new creators to get started with Popcorn. It will solidify the notion that creating on the web is generative. The act of creation will start by building on someone else’s work.
We think Popcorn will be a good bug to catch. Like getting the chicken pox when you were a kid. Or maybe more like taking an interest in photography. We’re sure this is the right metaphor.
Note: knock knock jokes, box stores and lolcats were all considered as alternatives while titling this post. Go meme or go home.
In 2004, I won a pitching contest at the Banff TV festival, for the film that would eventually become Rip. It was called the “New Players Pitch”, and the prize was a bunch of film from Kodak. I got a whole bunch of 16mm, which I used for some sequences in Rip, and a whole bunch of Super8. I used the Super8 on various experimental things, but a box of Kodachrome (K40) sat around in the fridge at EyeSteelFilm for years and years.
Kodak discontinued making the stock a few years back, and then eventually outsourced development to a shop in Kansas. Dwayne’s Photo announced they would process the last roll at the end of 2010. Knowing all this, I dug out the last roll just before I moved away from Montreal last September, and filmed a day with my daughter Layla in the park. I forgot I had done that, and sometime around the middle of December found the roll, and rushed it Fedex to Dwayne’s.
As far as I know, Layla is the last kid on Kodachrome.
Unfortunately, the film got pretty degraded in that crummy fridge, and so it isn’t the full Kodachrome glory, but I still love the look of the stock and will really miss it.
0.2 - Ghostbusters
0.3 - Breakfast Club
0.5 - Pulp Fiction
