Buttering Popcorn.js with Templates

When I first stared looking into popcorn.js it seemed like it was all popcorn.  It happened that, at the time, there was a tool called the butter app (which has been updated and renamed to Popcorn Maker) but, in my mind, it was still all this one magical javascript library.  However, as I get more familiar with the project, it seems there are multiple facets to using this tool, so much so that I feel like I need to clarify for myself (and hopefully for the benefit of others) exactly what we are talking about when we say we want to create a presentation using popcorn.js.

Getting our Bearings

There are numerous parts to popcorn, and depending on what you want to do, different parts will be more important to you than others.

Popcorn.js

Two good places to get started with popcorn is http://mozillapopcorn.org and http://popcornjs.org where you will find the following definition:

Popcorn.js is an event system for HTML5 media developers. Think jQuery for video. You can leave the heavy lifting to Popcorn, and concentrate on what you do best: writing awesome code.

I think of popcorn.js as a "timing engine", a script that synchronizes a piece of audio and video to any number of discreet and disparate events.  Just as watching a movie happens over the course of a limited, uninterrupted period of time and just as popcorn is consumed incrementally in little bits of popped kernels at various intervals over the course of that movie, so too does popcorn.js allow a person to incrementally trigger many "little bits" of popped kernels, of events (whether they are text, tweets, maps etc.) at any particular time during the timeline of watching that movie.  For me, this is a great metaphor for describing the overall project and a metaphor which helps me personally to understand the way the different parts of the project fit together.


A person who is interested in contributing to popcorn.js likely will want to customize the way a audio or video file displays in the browser or enable some event to happen that is not covered by existing plugins (such as footnotes, tweets, images, web pages, google maps and more...).  This person is likely to have a good degree of experience with JavaScript and knowledge of APIs and the browser's DOM.

How to get involved with popcorn.js

Ben Moskowitz, the Media Program Lead at the Mozilla Foundation, in his excellent blog post Mozilla Pocorn: How to Get Involved cites these ways where you can start getting involved with popcorn.js:

When paired with specific Popcorn templates, custom plugins can offer sophisticated authoring capabilities to end-users.

More

• How to create plugins
• Mozilla-supported plugins
• Popcorn Base, a starting point for new plugins
• Contribute a plugin

Popcorn Maker

If you are more of an author, a story teller, someone who wants to create an interesting presentation using popcorn but don't want to get into the code unless you have to, Popcorn Maker is a great tool that Mozilla is currently developing.  If you would like to try out the tool in it's early stages, click on the "Try the alpha" button an it will take you here.

Butter

If you are an organization or team of content producers who has very specific needs which would necessitate you building your own version of Popcorn Maker and if you or people on your team have a good degree of experience with 
JavaScript and knowledge of APIs and the browser's DOM, then then getting familiar with butter is for you.


Once again, I'll cite Ben Moskowitz' blog post on How to Get Involved with Mozilla Popcorn.  Here, Ben provides a great description of Butter as well as a list of ways you can start getting involved :

Butter is a software development kit to create HTML5 web apps that time user inputs with media. It's the foundation on which Popcorn Maker is built.
Butter manages track data, saved projects, saved media, user interface construction, publishing, and more.
You are welcome to file a bug report, a feature request, or—even better—to contribute to the project!
To contribute to Butter, join us at our Lighthouse issue tracker. Have a look at the open tickets and feel free to take one. When you're done with a ticket, issue a pull request to the main repository on GitHub.

More

• Butter roadmap
• Make an app with Butter - July

Making a template???

When I first started creating presentations using popcorn, I found it easy to work off existing templates... er I should say "demos" included in the documentation or in popcorn plugin folders.  Like this one, for instance, or this one upon which I based a recent presentation (thanks folks! amazing work).

For me, these demos functioned as templates and allowed me to get up and running quickly doing what I needed to do.

However, in order to clearly define some next steps for how I'd like to continue participating with popcorn.js, I needed to realize that I need to start thinking beyond the plugin demos that I had found so useful, and that if I want to contribute in a way that will be useful to other media creators using popcorn is to start thinking about creating Templates for Butter.

Templates for Butter.  Plugins for Popcorn.  Okay, I can get that.

Without discounting the initial two thirds, this point was driven home nicely at about 23 minutes into this recent presentation by Ben Mozkowitz and Bobby Richter where Ben exhorts developers to:

Make a template!  The really cool thing about Popcorn Maker is that we are going to be some providing starter templates. But this thing isn't going to take off until we have a community of tens or hundreds or even thousands of people writing templates in the same way that you have tens or hundreds or even thousands of people writing WordPress themes.

What a great goal!  And one that I think is not too unrealistic actually.

My next step is to find out how I can begin contributing Butter templates.  I was a little confused as to what a butter template would look like and where exactly are the sample files upon which I would base my work.

Shortly after, in the presentation, Ben briefly describes that:

So, to do this is actually really easy. This is probably the easiest way to get involved aside from testing the app. Making a template, again, is just using regular web technologies like HTML, CSS and JavaScript,  layout the template to look like you want, add any functionality that you think you might need, and then to make it work INSIDE of butter, inside popcorn maker,  you simply use these declarative attributes like data-butter = "media" so every popcorn template needs one piece of media which is going to be the kind of baseline... And it doesn't need the same piece of media, it's just where will this media be on the page...

So if it's just a regular template with a video and then a box for extra context, that div, where you want the video to be is data-butter = "media" and in the interface the user can add their own video to that div.

Target. Anything on the page that's targetable by Butter any div on the page where you want a map to come in , or some flickr to come in, or you want to have anything happen, you simply give it a data-butter = "target"

If there is stuff that you don't want to appear in the finished export use data-butter = "exclude"
If there are things that you don't want to appear in the interface use data-butter = "invisible"

That is basically it.  So, if you want to create a template for Popcorn Maker, you write it using using regular HTML, CSS and JavaScript, you give it some declarative attributes and that's like 90% of the job right there....

So now, My job was to look around and find a template that made use of these declarative attributes.  I'm not sure if this is where people are intending that we look for templates, but after looking here:

http://mozillapopcorn.org:8888/templates/

I found this one template that interests me in particular:

http://mozillapopcorn.org:8888/templates/walking/template.html

And indeed, I found these declarative attributes that Ben had mentioned.

Also, as a test, I decided to see the difference between a Butter template, and the exported presentation:

http://www.diffnow.com/?report=ocqfn

So, this gets me started in thinking about where to begin, where things will end up once the presentation gets exported out of popcorn maker.

Also, it looks like here is where I will find the documentation for all of those declarations that I will need in order to use my template inside Butter:

https://github.com/mozilla/butter/wiki

Well, I certainly have my work cut out for me.  For the next month I'll be adapting one of my existing presentations... (er, one of my presentations that I had originally based off of the hard work of the bright and brilliant folks who created popcorn and popcorn plugins) for use in Butter.

Wish me luck.  I hope to write back and let you all know how it went.