The past summer was huge for Webmaker: our newly redesigned site began to operate as a central hub for all our tools; the integrity of our site was tested at 1600 separate events around the world; 30,000 users signed up and we quickly learned where our weak spots lay. And then John Cusack told a million people to break the web with us
On August 12th, the webmaker.org product team joined folks from the communications and mentor teams of the Mozilla foundation for 4 solid days of building. The framing of the week was a follow through on our current development sprint - David Humphrey outlined our goals in his “Nine Weeks” blog…
This weekend my family and I went for a walk and my daughter Layla asked to take our DSLR camera. It’s a Canon with a 3/4” CCD, so the 50mm lens we had on it actually shoots more like a 70mm lens. For the non-photographers out there, this means that everything is a bit more zoomed in than normal, and the focus is very selective.
She wanted to take pictures, and I was skeptical whether she’d be able to work with a long lens - it meant that you couldn’t be too close, and normally with portraiture lenses you have to put some thought into composing images. Layla is 4 1/2.
I love the photos she took. The shallow depth of field and focal length make it immediately obvious what caught her attention - the lines of a twig, the colour of a leaf, the light catching on a fern.
My daughter turned 4 a few months ago. We were musing over how to ask family not to give too much: we’re uncomfortable when she receives a lot of gifts. We don’t want to be ungrateful, so we experimented with asking people to give her $4. We’d then talk with her about saving a 1/3 of the money, spending 1/3, and donating a 1/3 to a charity.
Tonight we discussed what she’d like to do with the 1/3 she’d give to charity. We’d discussed inequality before - and she said she’d like to give the money to kids who needed it. We talked about places in the world at war, and how the kids in those countries suffered. We talked about Syria. And I thought of Bassel.
Bassel Khartabil is a contributor to open source projects. He is a developer. He’s a tinkerer. He’s help build two projects that have had a profound impact on my life: Creative Commons and Mozilla. And for over a year, he has been detained in a Syrian prison - arrested by the government in a mass roundup in Damascus.
Bassel had arranged a screening of my documentary, Rip, in a Damascus hackerspace. We’d exchanged a few emails. I had a chance to meet him in 2011 in Seoul at a Creative Commons gathering, and was very impressed by him. Humble, generous, intelligent. We discussed a potential collaboration - we chatted and explored Seoul. I snapped this picture of him. I had forgotten about this picture and found it on my computer in a backup of cell phone pics.
Bassel’s curiosity is the same as mine and my colleagues at Mozilla. He has a family. I am grateful to him, and upset that he remains in prison for being a hacker and an independent thinker. I feel for his friends and family, and hope that the web he helped build can help in its way to dismantle regimes such as Assad’s.
Layla donated a third of her birthday money to children in Syria with savethechildren.com. Bassel, we hope you are ok.
Does it matter that what you’ve achieved, with your online special and your tour can’t be replicated by other performers who don’t have the visibility or fan base that you do?
Why do you think those people don’t have the same resources that I have, the same visibility or relationship? What’s different between me and them?
You have the platform. You have the level of recognition.
So why do I have the platform and the recognition?
At this point you’ve put in the time.
There you go. There’s no way around that. There’s people that say: “It’s not fair. You have all that stuff.” I wasn’t born with it. It was a horrible process to get to this. It took me my whole life. If you’re new at this — and by “new at it,” I mean 15 years in, or even 20 — you’re just starting to get traction. Young musicians believe they should be able to throw a band together and be famous, and anything that’s in their way is unfair and evil. What are you, in your 20s, you picked up a guitar? Give it a minute.
Background: Webmaker as a community of craft
There’s been broad consensus in the Webmaker community that building a community of practice and enabling users to share their work is an important part of the Webmaker formula.
So in 2013, Webmaker.org will evolve to be a place where users are watching, remixing, and creating their own piece of the web - acquiring web literacies, including media production, HTML, and analytic skills as they go.
We’ll build an information architecture and user experience that creates opportunities for our users to make something from the moment they arrive on our site. We want it to be immediately clear that this is a place to “get your hands dirty”. Part of how we’ll get there is by featuring great content made with our tools.
On Webmaker, you’ll be able to watch an artful presentation similar toNPR’s 2012 Musicians in Memorium, and then make your own. You’ll be able to string your favourite YouTube videos together in your own “Top 10 list”, and then have your friends leave media production tips on your work. You’ll be able to make audiovisual memes and mashups on your phone. And you’ll earn digital literacy badges to represent the skills you’ve picked up along the way. All of this will be presented as a consistent, unified, and seamless Webmaker experience.
To get here requires an evolution of how we think of “tools” and “projects”, as well as our product design process.
On the tools side, we will begin to merge our web apps together. We want users to have a “Webmaker” experience, rather than separate Thimble, Popcorn, and OpenBadger modalities. These code bases and projects won’t go away - Webmaker.org will simply become a “client” of the great foundational open source projects we’ve created over the past 2 years. The recent demo of Webmaker X (see screencast below, and Doug Belshaw’s excited blog post here, as well as Lyre’s breakdown on how MarkupAPIs could be a game changer here.)
On the projects side, we need to focus all of our activities towards building a community of craft. An essential aspect of getting there is a robust way to showcase the work of these communities. Building galleries of user’s work and robust user profiles/portfolios will be a key priority in Q1.
We’ll need more nuance around what we consider a “project”. As a baseline, a project is a templated piece of content that invites you to contribute, reshape and remix/hack it. A video that needs an extra shot from you, a media rich web page whose meaning is changed when you hack the source code. Iterating on the FORM of these projects is a critical next step for Webmaker.
One of the ways we’ll do this is by leaning on our excellent partnership development team. Engagements with the Born This Way Foundation, explorations into the Mars Explorer mission, comedy hack days, and Cloud Filmmaking experiments are already underway. Our partnership process will start with editorial strategy and content. Our criteria will be: “what is magnetic, and will draw people in? What would be fun or satisfying to watch, remix or make in Webmaker?” We’ll let these efforts be part of an agile development process that can have a direct influence on the development of our platform.
We’ll also build the capacity for anyone to build projects - ensuring that we aren’t a bottleneck to the infectious energy of the Webmaker community will be something we bake into our work on user galleries in Q1. The entire Webmaker effort is built from “innovation at the edges” - Hackasaurus, WebMadeMovies/Popcorn, Open Badges, MoJo/OpenNews - these are all community inspired efforts that have not only had influence on our product: they’ve built it’s foundation. The Community Learning group will make sure this happens as often in 2013 as it’s happened over the last several years.
Mozilla staff will also work to innovate projects and content-types - David Ascher is leading an initiative to reboot Mozilla Labs, and within that structure we hope to see forays into games and other types of content that will eventually feed back into Webmaker. I’m also looking forward to having staff team members who can quickly make things with our tools to test out theories, engage new audiences and keep the site fresh.
Finally, it’s clear that we also need projects that address very specific parts of our Web Literacies framework. Our information architecture shouldn’t put these into a “learning ghetto”, setting them aside from interest lead projects, but we ought to be clear to our users that there is a pathway to learning specific skills. We’ll continue to build on the good work that’s been started in this area already - many of the projects currently found on Webmaker.org fall nicely into this category of project, and we’ll keep iterating, testing and improving how we teach these skills.
Webmaker roadmap 0.1
Attached are public links to the Webmaker roadmap. As you’ll see, we want to phase these improvements in over time in an agile fashion. We want to make sure we’re still seeing gradual improvement to our existing platform, while setting a goal of transitioning to these proposed changes at the end of Q2 2013.
View as slideshow
This slideshow explore:
Our current challenges, and the solutions to these challenges
Some proposed designs to address these challenges
A detailed look at 5 releases of the Webmaker platform in the first 2 quarters of 2013
For our first week back to work, a small group of MoFos met for a few days of offsite. Knowing that 2013 is going to be a year of enabling creativity, we thought it would be suitable to meet at the Art Bar of the Gladstone hotel. Our goal was to create several prototypes of new functionality in Webmaker that would help users create new types of content. Here are the demos.
note: hit the full screen button if you need to look at text.
WebmakerX (Bobby, Atul)
Live branch: http://webmakerx.toolness.org/#/bpzokgjb
what is it?
Combines Thimble and Popcorn Maker interfaces
what it means for us technically:
Implements Popcorn.js as Data attributes within HTML elements
exposing popcorn functionality through markup (instappopin) and providing a GUI layer
Markup API is declarative so its very “human readable”
Popcorn projects are published in thimble, its an elegant combination of our code bases
what it means for the user:
You can see popcorn code while you author
We can merge the experience of creating the layout and HTML with authoring the timeline
You can control your entire media production process from start to finish, using either code or a GUI
You can learn to code while making cool, time based media
In this year that is now ending, I had the privilege to work with an amazing crew to create Popcorn Maker. To say that I’m proud doesn’t really sum it up: of course I am proud, but mostly I feel grateful. I don’t think I realized how ambitious we were until halfway through this summer, when we REALLY needed to put the pedal to the metal in order to pull it off. In hindsight, a lot could have gone wrong, and a lot was on the line, so it’s with no small measure of gratitude to my colleagues, to the fates, and to everyone’s extraordinary effort that I’m ending 2012 feeling like we did exactly what we set out to do.
I remember feeling this way when finishing films as well - a certain euphoria and exhaustion, and a sense that the the work only really starts when you release something out of your internal group and into the world. It strikes me that all things worth doing are hard (at least for me). So as I look to new challenges and opportunities in 2013, I wanted to list out what I feel is a Survival Guide For Directors ™. All of these ideas owe to directors that I’ve learned from personally, or through writing (Rands, for example).
PICK GREAT COLLABORATORS
Software and Media Production are both collaborative crafts. As a director, you’re only one member of a team. Your job is to help people do their job well, remember why they’re doing it, and keep all eyes on the prize. Pick people who you know have crossed the finish line, or for whom this is a first chance to do something great. Try and ensure they have as much stake and opportunity in the project as you do.
OWN A FEATURE…..
Whether you’re recording sound, editing the footage, writing some HTML or pitching in on design, you need to bring some part of this to conclusion with your own hands. Not only does it set the right tone, but it grants you an understanding of the team’s challenges that you don’t get by delegating. Particularly if you’re embarking on a new subject area or technical approach, respect your collaborators and spend some time understanding their world.
….BUT GET OUT OF THE WAY
Since you’ve picked great collaborators, let them be great. Give them a sense of the vision, but let animators run wild. Let designers surprise you with an unexpected innovation. Remember your developers need time to bake a feature and that they’re as or more creative than you. Let your sound editors create brilliant juxtapositions you just don’t have the talent to dream up. Your job after all is to look after the audience, so do them the favour of letting artists be artists.
TRUST YOUR GUT…
Especially on projects with a long time horizon, everyone is going to have an answer when something goes wrong. Oh, and something always goes wrong. If something feels like it’s the wrong approach. or too easy of a solution, or not quite right - it probably is. You’ll need lots of advice, but learn to trust your own.
…BUT BE FLEXIBLE
You’ll never work on a project that turns out exactly like the original idea, so learn to adapt when real life steps in. A team member may leave, a documentary subject might change due to current events, you might run out of time or money. You’ll need to cut features, change your narration, change your story or your product. Remember that the proposal or slide deck you created at the start of this is just a thought experiment - the real test is whether it can actually exist in the world, and sometimes no amount of brute force or late nights can produce something that isn’t meant to be.
…JUST NOT TOO FLEXIBLE
At the end of the day, what drives things to the finish line is vision. It might need to change, but everyone needs a picture in their mind of what you are building together, who it’s for, and why the world will be better when it arrives. So as you adapt to reality, make sure that you and your team aren’t building something that they wouldn’t have signed up for. That way mediocrity lies, and that is cancer. Encourage an environment of peer review and critique, so calling something out as being not up to snuff doesn’t feel personal.
TAKE YOUR TIME WITH THE CREDITS
Have someone read them over. You never get in trouble for thanking anyone, ever.
And above all, don’t be a jerk. Life is too short. When you work in software or movies, generally everyone is there because they love it. Don’t be the person that changes that. Instead, be as light of a touch as humanly possible , help everyone get the job done, be a bullshit umbrella and fight like hell for your team.
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.
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.
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!
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:
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.
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.
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.
I’ve been working on and off for many months on a video to explain Mozilla to the uninitiated. The home for the video is now on the Get Involved page of the mozilla.org site, and I’m excited that it will be part of a process for getting people excited about pitching in at Mozilla. You can watch it below: mega hats off to Rainer Cvillink, Mozilla’s in-house video wizard, for all the great camera work, and to Jenn Strom for editing and motion grapnics.
Everyone is still recovering a bit from Buttercamp. Anna Sobiepanek beat us all to it with a great recap of the event, but let me say how thankful I am for the extraordinary effort the participants put into the day. We learned a lot about how to do events like these, and definitely left wanting to do more.
As Anna mentioned in her blog, our biggest lessons were a) the need for designers to be present, and b) that we should probably do these over two days. Scott Downe benefited from teaming with Zach Liberman, and mentioned that 2 developers are crucial for a team, so that if one struggles with a blocker, the other can forge ahead. Well noted.
Note: these demos will all require a modern browser, may not work for you at all, and are the product of one day’s work. GML + Popcorn:
To have popcorn events appear in specific locations on a full screen video, Brian Chirls wrote a popup video plugin. Video events that appear cause the main video to lower volume and loop. http://code.chirls.com/buttercamp/
Kapor Center Mural Unveiling
Trevor Parham used Butter initially for data entry, but then decided to focus on CSS and layout to create this compelling use case for popcorn: an annotated version of a recent event at the Kapor Center. http://kaporcenter.org/files/video/
A modified version of PatternSketch, which controls videos via popcorn to create a video remix machine. http://www.tubeyloops.com/tubeyloops/
note: use keyboard keys Q W E R to control video.
Thomas Allen Harris
I’m very happy to announce that Bobby Richter is joining the Web Made Movies team as Creative Technical Lead. Already a Mozilla contributor, having worked with the #audio team on a variety of demos and libraries, Bobby is joining us to, as he writes on his about page, “make Web Made Movie’s ideas tangible as quick as possible”. Bobby’s job will be diverse: contributing to the popcorn.js community, advancing the Butter platform, and helping to create magnetic productions as outlined in our 2011 goals.
Bobby brings a range of experience – from helping to create the NFB’s award winning Out My Window, to a stint at Electronic Arts, Bobby has both skill and experience that all of us on the media team are thrilled to have among our nascent group.
Say hello to Bobby over at his blog, and you can find him on irc.mozilla.org in the #popcorn channel as “richter”, or sometimes under has super hero name, secretrobotron. Welcome, Bobby!
1) Exercise caution when giving 12 high school students access to an etherpad that is projected against a wall
2) The Bay Area Coalition (BAVC)’s Factory program for youth is srs bizness
Mozilla has partnered up with the Bay Area Video Coalition and Zero Divide to implement the technologies coming out of Web Made Movies into the current curriculum of The Factory, a video collective for motivated youth in the Bay.
Ben Moskowitz and I came to meet members of the collective, and were joined by our Mozilla colleagues Atul Varna and Lukas Blakk. Lukas had recently been working with teenage girls at the Dare 2 B Digital Conference, addressing the gender gap in computer science, and Atul has been working on the Hackasaurus project with Drumbeat, a set of tools to encourage kids to hack the web. The 2 days at BAVC were for us a way to test some of our thinking about “web literacy”, to test the Butter authoring tool, and to meet the youth at BAVC. We were hoping that they’d understand what we were banging on about after the two days and would be inspired to bring a hacker ethic to their projects.
Our first excercise was to wake the HACKASAURUS. Everyone checked out the X-Ray Goggles, a fantastic tool that lets you see how a web page is put together, and modify elements of it. Paired with HTMLpad.org, which renders HTML typed into an Etherpad of the same name (try it - its awesome), the Hackasaurus tools teach the user that the web really is made up of many simple parts. To help visualize things, students printed out their favourite websites, cut them up, pasted them back together, and re-created their cutups in HTML. Its a great basis on which to start playing with popcorn.js - it puts one in the mindspace to consider “how can I hack this video?”.
Fortunately, our friends at Bocoup had pushed some last minute changes to Butter, the authoring tool for popcorn, and it was ready enough to be tested by the group. We loaded up one of their productions from last year, “The List”, which was a dramatization of the military recruitment that happens when students take standardized tests. There was a lot of factual information in the video, so it was a perfect test bed for popcorn.
The students formed groups and each took a section of The List and pulled it into Butter. They added semantic data, some hacked with Ben a method for displaying images on top of the frame, others linked to an HTML page that let users opt-out of recruitment, others brought in photos from flickr, articles from Wikipedia and maps of their school on Google Maps. Lukas wrote a quick script that would chain the videos together, and then we had a screening at the last minute!
You can watch the completed movies here - keep in mind these were created in two hours by a group that had never written any HTML, so we were well impressed.
One of the great things that came out of the workshop was a huge list of bugs for popcorn and butter created by the students that we can now bring back to the development community. We’re looking forward to coming back in April and working with The Factory through till the fall!
Along with my other colleagues at Mozilla, I’ve been doing a lot of work lately thinking about what the rest of 2011 holds. It’s been great to read posts by Ben Moskowitz, Phillip Smith and Nathaniel James as they describe and forecast their work on the Knight/Mozilla Technology Partnership. It’s painting a great picture of Mozilla’s commitment to transforming media and journalism - I thought I’d share my plans as well in the video above.
This past week, I was fortunate to be part of a great collaboration between Mozilla and the PBS Newshour team, creating an annotated version of Barack Obama’s State of The Union Speech using popcorn.js. While the demo itself is fairly humble, its actually quite an accomplishment given that we had only met the Newsroom staff the day of the speech during a meeting at the Corporation For Public Broadcasting. I think the Newshour team experienced the power of the open web first hand - a talented group of developers were able to collaborate quickly and produce something of high quality (not unlike a tv newsroom). So much so that we’ve begun a conversation on PBS to use popcorn.js in all of their future analysis.
The whole experience was a great example of the kind of innovation that we’re trying to foster with Web Made Movies: video producers come up with new use cases for technology , and the resulting code is put in a repository for future use. It’s proof that HTML5 video is a great space to be exploring.
January 25th, 2011
Washington, DC: Ben Moskowitz, Nicholas Reville, Geoffrey MacDougall and myself are pacing around a presentation room at the Corporation for Public Broadcasting. We’ve come to express why we think there is natural alignment between public media and the open web.
A little bleary from travel, a previous day of meetings, and bad breakfast joint coffee, we meet a room full of people involved in American public media - PBS affiliate stations, the PBS Newshour team, National Public Radio, and others.
We felt the presentation went well - the room was definitely thinking about the possibilities present in popcorn, and immediately grasped the advantage of adopting Universal Subtitles.
After the speech, PBS Newshour correspondent Hari Sreenivasan remarked how they wished they had it for the State of The Union address. “Isn’t that tonight? Someone asked” Hari nods. A wireframe is sketched out.
We’re with Travis Daub, the Newshour’s digital producer. He’s on the phone getting the run down on when the video of the president’s speech will be on Youtube. He says midnight, and analysis will come in throughout the evening These news people stay up all night, too!
Robert Bole for the Corporation for Public Broadcasting orders some Chinese food.
75% of the code necessary to convert PBS’ annotation system to popcorn. The wireframes are posted. Its gonna pull in twitter, have chapter selectors, wash your car, and email Obama. This is going to be easy. Lets watch the speech.
Travis starts uploading the video.
Snag. The encoded video doesn’t have audio. Travis will have to start again, and do it twice for browser compatability. Ouch. The video is so long that the encoding process is painful.
New snag. Servers seem to be failing.
Multiple snags. Grumpiness sets in. Travis valiantly posting new versions. Popcorn hackers have the analysis working with a dummy video - just waiting for the pieces to come together.
The pieces are not coming together. The night is called.
The next day
A snow storm, a train travel, multiple taxis and subways, a hamburger at a breakfast spot - next thing you know its midnight again. Is it working yet? No, it is not. Inconsistencies in the transcript. Hotel Wifi killing us. Must sleep.
With a final push, and additional work in the morning, the bugs are ironed out. Vanessa Dennis at PBS Newshour adds styling and pushes to their blog on the front page. My favourite quote from theirblog:
“The Web is changing, and we at the PBS Newshour are changing with it through experiments like these.”
Experiments like these can be exhausting, but the thing I love about working with Mozilla is that we make change by building things. It feels great that Web Made Movies is really starting to accomplish this.
The goal for butter is that anyone with a video anywhere on the web can build HTML5 video pages that incorporate other elements of the web – allowing non-developers to create what my fellow Mozillian Tristan Nitot has dubbed “Hypervideo”.
In the new version of popcorn (its only version 0.2, so still a ways to go), we are moving all of the functionality from the previous version into plugins. This is a timely step towards a more open infrastructure that will allow any developer to write a plugin that will work with popcorn.js, and then by extension, Butter. So while the first plugins we have developed are for popular sites and services such as twitter, flickr and wikipedia, now anyone can create a plugin to support identica, open street maps, or whatever new thing the web churns out tomorrow. We have big plans for butter, and as we progress towards a 1.0 release in 2011 there will be much more functionality.
Check out our evolving project scope on our etherpad.
We have a goal for popcorn to be part of an open media ecosystem – a great web app and development platform that creators can add to the growing list of HTML5 tools that are available to them. We’ve been very inspired by projects like processing.js and Universal Subtitles that illustrate the advantages of federated and collaborative systems for creating culture that is truly OF the web. We are very early in that process and of course could use all the help we can get!
One of our next goals is to make it more clear how contributors can get involved – the best page for this is at www.webmademovies.org, where you can join our mailing list, talk in IRC or pick up a bug on our Lighthouse issue tracker.
On a personal note, this has been a great learning experience for me, as I’ve seen the power of the open web play out in realtime – a seed of an idea (what if a video could trigger events in a web page?) gets a proof of concept demo, which is turned into a library, which is now being turned into a product that we hope a lot of people will get behind. It’s been inspiring to see students from Seneca College working side by side with seasoned professionals towards a goal that will benefit the web, and makes me happy to be part of Mozilla.
Last week, in collaboration with David Humphrey, I ran the Video Lab at the Mozilla Drumbeat festival in Barcelona. I’m still recovering, so this post is a bit late, but a week has actually given me some perspective on why events like this are necessary crucibles for innovation.
Everything we’ve achieved so far within the Web Made Movies project has been the result of intense collaboration over a short period of time. The popcorn.js library was created in a span of only two weeks, with half of this time devoted to creating our first demo (screen capture embedded below).
The forcing function of this demo was the Mozilla Summit - a gathering of the entire Mozilla community in Whistler, BC. It really opened my eyes to the degree to which demos drive the developer community - showing our demo at the summit was the moment we moved from “hand waving arty types” to “people actually trying to do something” in the eyes of the developers in the room. This will be crucial as we begin to move from “demo or die” mode towards shipping software.
Our next event was the Open Video Conference in New York. In the run up to this event, we knew that we were meeting with folks from the Public Broadcasting community in the US, so we wanted to show how open video technologies have a competitive advantage in that they can be quickly iterated upon. So Scott Downe and Anna Sobiepanek created two quick demos - one of a test integration between popcorn.js and Universal Subtitles (video below), and Lev Feels Fine, a an experiment in data-driven narrative.
In the run up to the Barcelona event, we knew we needed to think about how the open video tools we were developing could be used in education. I knew that Mark Surman’s son Tristan made video tutorials for video games, so I asked him and Mark for a “video book report” around a novel he was currently reading, and then we layered popcorn.js on top of his video - see the results. It was a great penny-drop for many people, illustrating how the web could be a canvas for students to create their own multi-media essays and reports.
When David and I arrived in Barcelona, we knew we’d have to show something on the first day to get people thinking. So we recorded some video of the people who we’d shared a “space wranglers” meeting with in Plaza del Ángel and asked them where they were from. David went back to his hotel to recover from jet lag, but hacked together a demo that mashed the video with Google Maps and Wikipedia (video version below).
Our mission was to create something while in Barcelona - a lofty goal for these types of events, and one that depended on a delicate mix of developers, filmmakers, designers and educators showing up. As luck would have it, they did!
Over our first day we had an overview of HTML5 video technologies, and split into several breakout groups to brainstorm what we could build in our second day. We also had a visit from Aza Raskin, the creative lead for Firefox at the Mozilla Corporation, who did a talk he called “How to prototype and influence people”. It was fun and drew a pretty big crowd. The talk is below, and was picked up by BoingBoing after the conference, which was fun.
So after some facilitation, it was decided that we would work on two projects: A meta-data demo that overlays Dublin Core data on to videos (requires Firefox 4 beta or nighties), the creation of which was certainly influenced by the fact that so many librarians and academics at the conference were expressing the lack of tools like this.
Our second creation was a short web made movie exploring the Future Of Education. The video was shot before lunch, edited, then layered with the twitter hashtag #futureofeducation (which didn’t exist the day before), and javcascript and css was hacked to overlay images from the evolving #drumbeat flickr hashtag. It isn’t exactly what everyone imagined (when does that ever happen anyway?), but remains a great outcome and a compelling piece of content by any standard.
I know both projects will continue to be improved by this talented group that came together to hack, create, play and collaborate.
And as far as forcing functions, for me it has reinforced a need to improve the popcorn.js library, to create documentation, more demos, better code, to not loose sight of the artistic component of our project, and to have more events like these. The event has encouraged me to publish more, to find new collaborators, to advance the state of Open Source Cinema, to develop new forms and new languages, and to follow through on the promise of Web Made Movies - to bring developers and filmmakers together in a collaborative environment. Stay tuned for our next forcing function: 2011.
Galiano is amazing minus one fact: it has spotty Internet coverage. DSL and cable only cover the southern end of the island, where the population is most dense.
I live in the middle of the island. The only pre-existing option then is dialup (not an option) or 3G. However, as I soon discovered tethering my phone, the speeds aren’t great and my 6gb/month cap would quickly expire with only basic browsing.
I knew a third option existed - Gulf Islands Wireless, a company that was recently sold to a man named Sigfried Luft (note - Sig has since relaunched the service as Beacon Wireless). I tracked him down, called him up, and he was sitting on my porch a day later after driving over in a boat from Saltspring. And he brought an antenna.
Attached to that antenna is an awesome little unit called a Bullet from Ubiquity Networks. Believe it or not there is a computer running Linux inside that.
He showed me some photos of the transmitter on Mount Bruce - island style ISP, mon!
Sig took it up to my balcony and pointed it towards Mount Bruce on Saltspring Island, right across Trincomali Channel. Unfortunately, it being foggy, we could not see the mountain.
My cousin Justin stopped by, a fellow geek, and gave Sig some instruction on the finer points of crimping Cat5 cable. Justin does satellite and network installs throughout the Gulf Islands.
Hooked it all up.
Plugged it into Sig’s MacBook - you can access the bullet’s interface through the browser (Sig was unfortunately using Safari - I forgave him).
Getting a decent signal at -72 db (we were shooting for -65, the lower the better).
We did not obey regulatory power.
Holy shit we’re on the Internet. Awaiting the moment of truth….
5mb/s down! 3mb and change up! That’s better than I had in Montreal! Huzzah!
Fog settled later in the day - the signal is coming from that mountain over there.
Of course, we know that this demo by itself has limited emotional and narrative impact - but as with everything in the Web Made Movies project, our idea is to experiment at the fringes, hoping that other filmmakers and developers will both build on our work, but also bring their own projects and ideas into our lab-in-progress. Please do contact us if this sparks an idea that you would like to pursue. We’re open :)
From early on in the popcorn.js process, we’ve been imagining BUTTER - an easy way for non-coders to be able to add metadata to their videos. Currently, popcorn.js uses an external XML file (though we’ll be switching to JSON in our next releases). Neither of these formats are reasonable for lay video creators to use, so discussion of a front end has been in the works for months.
However, looking at the amazing work done by the Participatory Culture Foundation on Universal Subtitles, we thought this interface would be great to experiment with, and so they were nice enough to add support for metadata in the language drop down on their staging site. Scott Downe and Adam Duston are responsible for this early work, which you can see a screencast of below.
Web Made Movies hack day at Open Video Conference!
As the Open Video Conference in New York draws closer (Oct 1-3), we’re excited to announce our hack day on Sunday October 3rd.
The Web Made Movies hack day is a chance for filmmakers, developers and anyone interested in creating Open Video to turn the inspiration of OVC into action.
Are you a videomaker?
Its a great opportunity to meet with people who can help you explore the potential of HTML5 video – for instance, applying the Popcorn.js video library to your videos to pull data from flickr, twitter, wikiPedia and Google Maps into your video experiences.
Are you a software developer?
Meet with the folks who have created the Popcorn.js library and brainstorm how to improve and expand its scope. Meet with like-minded developers who need help or have some to offer. Learn and teach.
We’ll be featuring a series of short talks and presentations that will spark your imagination and have you leaving the OVC weekend with some concrete next steps to apply to your future work. And we will have lots of coffee during, beer afterwards, and some pioneers of internet video hanging around.
We wanted to create something that presented a dynamically generated video based on who was watching, and that created different meaning from different juxtapositions of shots.
This reminded me of the Kuleshov effect - the famous experiment by Russian film theorist Lev Kuleshov, in which he proved that meaning was created in cinema through montage.
Kuleshov took a shot of a man staring at the camera, which was devoid of emotion. He then made 3 sequences where he spliced a bowl of soup, an attractive woman, and a child in a coffin, followed by a shot of the same man.
When showing the 3 sequences to audiences, he found that despite the expressionless face of the man, they perceived him to be hungry, lustful or sad, depending on which shot was placed in the middle. Thus, he declared, the meaning of individual shots and sequences was changed by whatever preceded or followed them. It was an extremely influential finding.
Seeing as Web Made Movies is about seeing what happens when we mix the traditions of cinema (time) and the traditions of the web (hypertext), Dave and I wanted to experiment with how this experiment would be different in the context of the web.
I though it would be fun to mash this experiment with the ethos of We Feel Fine, a human emotion experiment by Jonathan Harris and Sep Kamvar that presents web visitors with visualizations of the worlds’ emotions by gathering data from searches and blogs.
So I mocked up a wireframe that you can see below, and I’m looking for some feedback on how it could more meaningful riff of these two experiments. In the example below, the user is asked for their twitter account, as well as their location.
The demo would then build a unique sequence of 3 shots that would be tailored to the users emotions. The first image would be a shot of a face, staring similarly to Kuleshov’s actor, which would be either sad, happy or angry. Which emotion appeared on the actors face would be determined by how often the twitter user mentioned those emotions in their twitter stream of the last month (or so). The second image would be pulled from flickr - from a search of an emotion (you can see that interesting results, for instance, can be found be a flickr search of "sad".
The third image would be the same as the first.
The music would be chosen from a sampling of 10 songs (or so) which would be categorized based on emotion. The chosen song would correspond to whatever the “world” was feeling, which would be transmitted from We Feel Fine’s API.
The background of the page playing the video would be influenced by the weather in the users location - if it was rainy, it would be dark, sunny would be bright, and so on. Potentially we could also throw in some weather effects via something like processing.js.
Finally, the user would be asked to categorize the emotion of the video. This would be added to a third page, which would provide a grouping of the emotions similar to the 9 elements demo (only works in FF 3.6, not FF4). Users can then preview the different videos that were generated for others.
So it doesn’t feel quite right yet, but we’re thinking we might start and see where it gets us. But could really use some feedback on how this experiment could feel more true and more, well, meaningful. The wireframe draft is below. Comments here most appreciated.
In creating our first demo for popcorn, we gathered footage from projects like Grassrootsmapping.org and The Village Telco to create the final video. However, we only used small snippets, so I took some time to edit down longer versions of each.