Web Components and Mozilla Webmaker
A few days ago, Brett Gaylor posted a Popcorn presentation with some proposed use cases to inform the technical roadmap for Mozilla Webmaker. I’m actually jumping up and down right now because I’ve literally had this blog post (the one you’re reading at this very moment) ready to go for two weeks and the timing couldn’t possibly be better!
The Web is advancing rapidly, and Mozilla is one of the major organizations driving it. In many ways, the web has been moving haphazardly from being document based toward being app based. For this and many other reasons, Mozilla is pushing hard in making sure the Web Platform is mature enough to support a web of apps. So much is happening at once it’s hard to keep track of it all! Nevertheless, I try and do just that. Once a futurist, the trendspotting never ceases!
There are some potential technical converges coming down Mozilla’s pipeline that I think need to happen much much sooner than later. These convergent opportunities lie between Mozilla Webmaker and the forthcoming Web Components model.
The Web Components model is one of the more exciting advancements coming to HTML5. Using this model, web developers will be able to create their own HTML tags thus making the web more extensible. Among its many benefits, Web Components will make it easier to develop Apps because Widgets will be more modular and have greater reusability. This essentially gives everyone the means to prototype extensions to HTML5.
My intent here is not to explain Web Components, but to explore the potential implications for Mozilla Webmaker applications. If you’d like some additional background, are some good resources I’ve found.
The best video I could find!
The shortest video I could find!
Time for Popcorn!
The way Popcorn Maker (a Mozilla product that lets you remix video with web content) currently works is by giving you a library of web content widgets called Events. The app lets you attach Popcorn Events directly to specific points of time in a video file. This is great for when you are doing post-process work on a video, but what if you want to start working on your web content before video editing has been finished? What if you wanted to start working on your web content before you’ve even begun shooting video?
Web Components would give us the ability to define more descriptive anchor points for Popcorn Events than is provided by the single static timeline of a video file. HTML gives us all sorts of <h> tags, <p> tags, <divs>, etc etc that describe spatially rendered relationships within a document. Perhaps it’s time we prototyped some markup for temporal layout.
I don’t know what kind of vocabulary would be best for describing temporal markup, but it strikes me that video production and stage play conventions provide some great inspiration. Imagine tags for segmenting time into sections such as <act></act>, <chapter></chapter>, <scene></scene>, and <commercial>. We could also have tags to describe the <transitions> between <scenes>.
Note that our markup vocabulary might go in a completely different direction if we used musical notation as our inspiration. These are artistic and technical questions for a future date.
If we were to create this kind of markup, how might we utilize it? Temporal markup would open up new avenues for development of Popcorn Maker toward professional application across the life-cycle of a production. It would allow us to segment media into discrete temporal segments so that we could manipulate groupings of events relative to one <scene> or another rather than relative to the beginning of a video. I think this could be a powerful way to develop the ideas Brett Gaylor proposes such as creating indexes (dvd style or otherwise), sequencing, and keyframing.
Furthermore, Web Components could help us create tools to for the flexible organization of Popcorn Events before even entering the Popcorn Maker editing interface.
Use case: Air Mozilla
Here’s a use case I really really really want to see happen: Popcorn for live video!
Mozilla has a weekly all-hands meeting that is streamed and archived by the Air Mozilla team. Each meeting has an agenda accessible via the Mozilla Wiki. Imagine if each meeting’s agenda was compiled with temporal markup. Let’s call this hypothetical app ‘Popcorn Agenda’.
Every item added to the Popcorn Agenda would be transformed into a Popcorn Event. People who are scheduled to speak could have a Popcorn Event linking to their appropriate online profile, while projects they are discussing could have relevant links prepped to pop up throughout the live video stream. If a speaker has a slide deck, these slides could also be added as Popcorn Events. When a meeting is set to begin, the live video feed would start streaming through an app we’ll call ‘Popcorn Streamer’.
Popcorn Streamer takes the content from Popcorn Agenda and layers it on top of the live video stream. Because meetings never run according to schedule, the Air Mozilla team could use Popcorn Streamer to manually step through Popcorn Events to make sure they align with what’s actually happening during the meeting. Once the meeting has ended, the video can be archived online with all the Popcorn annotation work having been done up front.
One of the questions in my mind regarding Mozilla Webmaker is how to bridge the gap between learning the web, and advancing the web. We don’t want to just make learning the web stack more accessible, we also want to make the deliberative processes by which the web evolves more accessible. When combined with Mozilla Thimble and MIT Media Lab’s Scratch, I believe Web Components could play an important role in making this happen.
Right now, Thimble is a simple tool for creating and hacking away at simple Web pages. What if we were to throw Scratch into the mix? Looks like we’re already exploring this direction! Awesome! Now, what if Thimble were to take a page from Popcorn Maker and generate embeddable content? What if this embeddable content was structured through Web Components?
Use Case: a Thimble Widget Directory
Imagine a directory of the best reusable web elements created by and for Webmakers everywhere. Actually, there’s no need for imagination here because just a few hours ago Mozilla’s X-tags team launched a new version of their project site which includes an X-tags Web Components Registry. You might consider this a prototype for a Thimble Widget Directory. I propose the scope of the X-tags project should be expanded beyond the scope of infrastructure for FirefoxOS development to really turbocharge Webmaker programming.
For the bonus round, here’s an idea for X-Ray Goggles: A tool for content collection. Beyond mere poking and prodding web pages to see what makes them tick, X-Ray Goggles could become a mechanism for collecting Web Component powered widgets for reuse in Mozilla Thimble and Popcorn. This could turn learning web development into, well.. a collecting game experience not unlike Pokemon or LittleBigPlanet! There are some potential content ownership issues here, but perhaps this would be an opportunity to start discussing how infrastructure for attribution might fit into the Webmaker mix.
If I had to offer some advice to the lizard, it would be to throw more resources at the X-tag project team so that they can collaborate closely with the various Webmaker software development teams. Web Components may not yet have landed on the web proper, but I think it’s imminent enough that Webmaker roadmapping efforts will be made much stronger by starting to take them into account now.
As an aside, I think exploring the synergies between Webmaker and Web Components at this early point could help create some strategic clarity in the longterm (2014+) relationship between Mozilla Webmaker and the Mozilla Developer Network. Webmaker should evolve into a platform that gives learners pathways toward many forms of creativity on the Web. One of these pathways clearly leads deep into app-land.