Drumbeat Open Video Lab - Day 2

So I have to preface my take on Day 2 at Drumbeat in Barcelona with a little background. About ten years ago, I dared to write a book on programming, on Perl and CGI in particular. And although I think one of my strengths as a technical writer is bringing a fresh perspective to complicated topics, and indeed the book was quite successful and helped a lot of people add interactivity to their web sites, it was not well received by Perl purists who painted me as an interloper, a gasp!, non-programmer.

Of course, it was and is true that I am not a programmer. Indeed, my angle, if you can call it that, has always been to make technology more accessible for regular people, people who may not code for a living, but who are willing to roll up their sleeves and dip into the underpinnings of a project and not just accept what commercial software allows them to do.

I'm inspired by the spirit of The Macintosh Bible, one of my first publishing projects ever (in particular the Spanish version of the 3rd edition) in which Arthur Naiman made it clear that “easy is hard” and that if you dug a little, you could find a million tricks that would make your computing life that much easier. The Maker phenomenon is a newer reincarnation of this same spirit: that we don't have to settle for what they give us, we can open it up, and build a better version. I love that.

At the same time, I have a hard time shaking off the feeling that I'm just an outsider looking in, not a real programmer, not a real hacker.

So, I'll admit it was with some trepidation that I returned to the Open Video Lab yesterday morning, knowing that they wanted us to build a real project, and that they were going to depend a lot on Javascript and the popcorn.js library that they had built previously. Even their focus on HTML5, which was a big part of why I showed up, was a little daunting. (Does everyone imagine that everyone else knows ten times more than they do?)

I found the whole process fascinating. I'm used to working completely alone, in my own office, doing every bit of my projects, from concept to outline to examples to illustrations to layout to copyediting alone. When I don't know something, I go quietly searching for information, without having to tell everyone I work with what it is that I don't know.

Drumbeat, in contrast, was all laid wide open. About 10 of us returned from the previous day, along with two or three new folks. Dave Humphrey got us thinking about the projects we had talked about on Thursday and helped us both focus on what the projects consisted and what we were trying to solve, as well as what skill sets the members of the group had to offer. There were a lot of Javascript and HTML coders as well as a few designers and video production people. I was totally intimidated by the idea of writing actual code with these guys, and at the same time didn't want to lose the opportunity of learning what they knew. I was also unsure I had enough to offer myself, though thankfully I wasn't the only one to say this.

We ended up dividing into two groups. The first, led by Brett Gaylor, wanted to create a jazzier, prettier demo of popcorn.js, a Javascript library that allows you to line up data to particular points on a video timeline, and thus create mashups like the one they showed the day before in which people in the video tell where they're from and this information is used to trigger Google Maps and Wikipedia giving more information on that location.

A Javascript library is a bunch of code written in such a way that it can be used not just for the original project for which it was conceived, but also easily leveraged for other projects. It's an integral element of the programming community that attempts to highlight and save the best code so that people don't have to continually reinvent the wheel.

The second group, which I was a part of, wanted to figure out a way to expose existing metadata, like the title, creator, or date a video was produced, that was associated with a video either right in the page (with RDFa), or with an external XML file, so that people watching the video could actually see information about the video with a single click.

We then spent about half an hour, with Dave Humphrey's helpful facilitation and focus, discussing the different parts of the project: where we would get the metadata, how we would parse that data once we had it, how users would reveal the data, and then what the data would look like once revealed. The most curious part for me, was then dividing up into the groups that would work on each section of the project.

One group took on the task of figuring out how to pull the metadata out of the HTML file. Although I didn't follow them as closely, I'm pretty sure they used some existing RDFa Javascript libraries. The second worked on writing the code that would make a button appear and disappear when the user clicked. They too were working mostly in Javascript. I was in the third group that worked on displaying the found information right on top of the video. We were writing a combination of Javascript (both with Jquery, a larger web-page related library and without), HTML, and CSS.

I think the part that most surprised me is how small the individual pieces of the project seemed at first, and how much they all realized that they weren't really that small, and would take the better part of the day to create, even divided up between the participants as they were. It was also interesting seeing how they wrote the code in a way that they could test it separately, but that it could later fit together with the other pieces. I loved how they really drew on the different strengths of this randomly assembled group of people and made it possible to all work together. There was really good energy in the room.

We broke for lunch and I was lucky enough to go off with Mark Boas, who is a web developer who has written a popular Javascript plug-in for dealing with audio called jPlayer. He is based in Italy but also has a Catalan connection, and it was great to talk to him and hear what he's working on.

Back at Drumbeat, we all mostly finished up our individual modules, and then began joining them together. Curiously, that was mostly done via USB stick, as the wifi was intermittent at best. Each time the code was joined, we had to test to make sure that what worked separately now would play nicely with the other person's code. The use of jQuery as well as straight Javascrit was problematic, but not crippling.

Once all the code was together, they connected the last computer to a projector so that we could all see and debug the final project together. At this point, the designer folks jumped in and offered suggestions about positioning and font size. What a collaboration!

There were a few hours left before the Drumbeat-wide presentation of projects at 6pm, so I wandered off to find Nicholas Reville who was talking up Universal Subtitles, which is a great collaborative way to add subtitles to videos to make them more accessible to the hearing impaired and to those who don't speak a given language.

And I also found fellow locals Patrick Davenne and Chris Pinchen who offered me beer and conversation, and we lamented the complete disconnect between the festival and Barcelona itself, among other things.

Then back up to the video lab. Our metadata project was finished but the folks doing the popcorn.js demo were still working furiously. They had taken a video of folks at the conference in five languages, edited and compressed it, translated and added English subtitles with the previously mentioned Universal Subtitles, and then used popcorn.js (I think) to pull in and display tweets from the conference on the page as the video plays. The problematic wifi connection had made it hard for them to stream the video in order to synchronize the subtitles, and I was happy to be useful for a few minutes interpreting so that we could finish up the timing.

Perhaps my favorite moment was when about ten of us were hovering over the person doing the final screencast, trying to figure out why the timecodes were appearing on screen. It was crowd-debugging, and we found the extra space and got it out just in time to finish the capture, and run down to the presentation with USB stick in hand. [link coming soon]

So, I'm still not a programmer, but Drumbeat—and the generous, smart people within—let me have a peek into their world that made it feel that much less intimidating. Sometimes when you don't know how something works you imagine it ten times harder and more complicated than it really is. It's probably time for me to work on sharing that idea—particularly with respect to Javascript—with my readers.

Drumbeat Barcelona - Open Video Lab - Day 1

Thanks to @pdavenne and @cataspanglish and their Barcelona Social Media camp, I happened to meet hear Enric Senabre (@esenabre) give a talk on Mozilla's Drumbeat Festival, held this week in Barcelona. Drumbeat is the Mozilla's foundation to go beyond an open source browser and try to find other parts of life that can be enhanced with open source software. The theme of this week's festival is open education and how to facilitate it with open source software. There are 400 attendees, about 75% of which are from out of the country.

Which means I spent the day in San Francisco, practically, complete with a talk by Aza Raskin, but I'll get to that. It was pretty surreal being surrounded by Americans and English speaking Europeans right in the center of Barcelona.

I opted to spend the day in the Open Video Lab. I wasn't quite sure what that was going to mean, and I think a lot of the people, including the organizers, Brett Gaylor, Dave Humphreys and Ben Moskowitz might not have either. That didn't stop them from skillfully guiding and coaching the group to figure out some hands-on projects to work on.

First, they had us go around the room explaining where we came from and what we were working on. There were a fair number of video producers, web designers, educators, and also some coders. I jotted down a few of the topics that people were either working on or interested in: subtitling videos, teaching digital video, knowledge mapping, video production with minority youth, putting videos online, linking existing metadata with video, management consulting, teaching with video, designing and developing video, screen casting, mixing video with education, producing documentaries, video literacy, jplayer javascript library, media studies, documenting systems, figuring out how things relate, web video projects.

They/We came from the UK, Germany, Minnesota, Barcelona, France, Brazil, Galicia, and Madrid, to name just a few.

Brett and Dave began the workshop by asking us "what is possible with open video" and then showing us a few demos that took advantage of HTML5. There was a page with a video of a whale with an overlaid canvas element that mapped the audio to a visual representation. There was a kung fu video that used the browser to add a shading effect in real time. There were even video games, that mixed 3d, Flickr, Twitter, and rendered right in the browser.

Then they talked about popcorn.js, a Javascript library that Brett (I think) and a crew of students from Canada put together in a week to deal with video with HTML5. They showed us a sample that they had created that day with a video from Drumbeat conference attendees saying where they were from, superimposed on a window that was half Google Maps, half Wikipedia entry for that location.

Then Wendy from Bay Area Video Coalition showed us some of the videos that they're producing, with an eye towards promoting social justice.

Ben Moskowitz showed us a demo of MediaThread, a project at Columbia that allows professors and students to reference, annotate, and cite videos available through YouTube or other sources. It looked really valuable. The code is open-source, but the working project is unfortunately available only to folks associated with Columbia University.

Ben also showed us Pad.ma, an Indian site that catalogs videos with all sorts of different kinds of metadata, including name, title, keywords, and words in the transcript, and then lets visitors search through the metadata for particular videos.

Then it was time for the hands-on section. They showed us the example they had pulled together that morning, referenced above, using the popcorn.js library.

But before we got to the code itself, we talked a little about codecs and video editing tools. There was general consensus that despite the existence of some tools, none really offered the same capabilities as Final Cut.

As for codecs, Ben told us that Theora and webM were both open-source, as opposed to the most prevalent codec, H.264, which required paying licensing fees. He said that in about a year we would all be using webM, a standard developed by Google from vp8, and for which Google had paid the licensing fees for everyone (could that be right?), but that it was not yet well supported, and so recommended using Theora, at least for now.

Theora, though, doesn't work in Safari, so you really have to make more than one video source file available in order to be compatible with Apple-based browsers (including on the iPad).

Then he showed us the HTML5 video tag:

<video id="video" src="..." controls data-timeline-sources="locations.xml">

He said you could use HTML and CSS to format the controls, or use the controls attribute. And that attributes that begin with data- are recognized as extensions to HTML5 and thus will not keep the document from validating.  It works because of the popscript.js script being called. He unfortunately did not get to showing us the locations.xml tag.

He then quickly showed us a little tool that he said he had written in a few hours to gather latitude and longitude coordinates from Google Maps that he could then feed into the mashup.

But then we broke up into small groups and we didn't delve further into the code. I hope we get there tomorrow.

In our breakout group, we talked about metadata, and also touched on individuals' particular issues.

We talked about how there are two different classes of metadata... what I like to call formal (dublin core structured) and informal (tags, keywords, made up by individuals), and how they have different purposes (the former for finding the video itself, the latter for pinpointing bits within the video).

Meanwhile, Dave kept helping us focus in on a particular problem... and we decided it was how to expose existing metadata that was already related to a video. There were a few people who had libraries of video as well as XML structured metadata and wanted to be able to overlay the metadata on the video so that the metadata was revealed in the browser.

The other breakout groups came back, and my very shorthand summaries of what they found were:

Students using video to learn, then go back and watch themselves is different than producing video itself (meta-cognitive)

Need one place to put all files, design matters, generational issue

Tools: learner and teacher tools not necessarily the same

Destroy those boundaries, teacher proposes, students remix and turn on head; said another way: teacher create lesson plan, students mess with it

Then we were treated to this great presentation by Aza Raskin on Prototyping.

How to think about Prototyping and why
Hardest part about software development is the people, convincing them to make something
Must build first 100 miles (prototype), then build resort at end (inspiration)
Value of idea is 0
Unless communicated
You want project to be touchable and feelable
Idea < writeup < mockups < prototype < video
Firefox Panorama, organizing tasks spatiallly
Goal of prototyping is to convince yourself of the idea
   0 You will be wrong first time
   1 Complete prototype in a single day
   2 Make a touchable sketch (don't do everything)
   3 Tight feedback loop (dogfood?!)
   4 iterating solution helps illuminate problem
   5 treat code as throwaway, be ready to refactor
   6 steal design, make beautiful

jqueryfordesigners.com

Pitch your prototype
How does it make THEIR life better?
Be dramatic.

Example: Twitter streamer

And then I went back out into Barcelona!