Nuts and Bolts: Movingpaper

January 29th, 2010 at 04:00pm Josh

So the Moving Paper cut animation website has been running for a few weeks now – if you haven’t looked at it yet, you should definitely go and take a peek, because we’ve received some really fantastic stuff. This project represents something of a milestone for MAD in that we were able to build a fairly sophisticated video-sharing and social-networking site in about three weeks with a budget that was basically non-existent. For many years, the tools required to create projects like moving paper were simply out of reach for most organizations, let alone most non-profits and cultural organizations. I am pleased to say that this is now not the case, and it is even true that you don’t need to be a serious programmer in order to take advantage of some of the resources that are out there.

In that spirit, I wanted to walk though how we built the Movingpaper website in broad terms, with the hopes that it is hopeful for someone out there working on a similar project.

1. Project Planning
So, first things first, we laid out some broad goals. We knew we wanted visitors to be able to post their own videos, view and vote on the videos of others. We also wanted some basic web 2.0-ish features, like content tagging, commenting and personal profiles. We knew that we had basically no budget for hosting, so certain features were discarded out of hand. The biggest feature we knew that we couldn’t accommodate was transcoding – there was no way that on our $8/month hosting plan we’d have the processing power to convert submissions from whatever to our display format, and I wasn’t confident in my ability to set that kind of system up given a project timeline of three weeks. So, from the beginning, I suspected we’d be relying on one of the big video sharing sites (YouTube) to do the heavy lifting for us.

2. Content Management
Full disclosure: I’m a big fan of open source software from a philosophical stand point, and I’d been looking for an excuse to play around with the Drupal PHP-based content management system in particular. I knew that the Indianapolis Museum of Art had built the fabulous Art Babble in Drupal, so I was sure that the system could accommodate our needs technically. And so there was nothing left to do but jump in.

2.5 Design
Concurrent to the investigation of Content Management Systems, I asked one of our freelance designers (Jessica Mezyk), to come up with a design. Miraculously she was able to come up with a static design in Photoshop for the site in about three days. We were all pretty pleased with it, and so we quickly made a few minor edits and then proceeded. I then translated these static designs into plain old html and css.

3. Customizing Drupal
Drupal is largely a module based platform – Drupal core provides you with the ability to create basic content and make it appear in a limited way on a website, but to do anything really cool, you have to add on to it. I chose to use the most current stable major release (6.x), and quickly began downloading a wide variety of modules. Some of the most important:

• CCK / Views – CCK and Views allow you to create customized content types (like ‘Post a Video’) with custom fields, and Views lets you parse that information and display it any way you want. These are pretty much required for any Drupal install.
• emfiled – Emfield (Embedded Media Field) allows you to create a field for posting video / audio content from about 30 different content sites. In our case, emfield gave me the ability to create a field that receives a youtube URL, pulls a thumbnail image automatically, and then places that video onto a page for viewing. Very cool stuff.
• ddblock and nodequeue – The neat little featured video widget on our front page comes courtesy of ddblock (Dynamic Display Block), and nodequeue feeds it a list of individual videos to display. ddblock is a great module, but a little tricky to customize – in the end I had to modify the core module code to allow the little hole punch graphics below the image, but since this is a short-term project, I decided that this little hack wasn’t that big of a deal. With the addition of nodequeue, changing the featured content is just a matter of adding or removing items from the a particular node list.
• workflow – This one was a little tricky. We knew that we wanted visitors to be able to submit their own videos, but that we didn’t want those videos to become public before we had a chance to review to make sure that they complied with our submission guidelines. The workflow module allows for exactly that – you can create particular roles that can move content through an arbitrary workflow in an arbitrary order. Our setup is really simple – we have three steps: content creation, submit for approval, and approved. Anyone can create content and submit for approval, but only I can approve that content to appear online. Seems simple enough, but I added the workflow module late in the game, after I had built 80% of the rest of the site, and it kind of took over. I really only wanted workflows applied to the ‘Submit a video’ type, but for some reason I now have to put everything through this approval process, including the static pages like the front page and submission guidelines pages. It’s a bit of a pain, but not a huge deal, and I ultimately decided to live with it.
• fivestar – Fivestar is the easiest, most straightforward module I’ve used. If you want to allow voting on content, use fivestar – it just works

4. Theming
With the content pretty much laid out, it was time to make Drupal look like the static design created in step 2.5. This turns out to pretty simple, I found the admin_menu Drupal module really useful, and the Firefox Firebug is invaluable. Special mention goes to the devel module – the ability to click on any portion of the page to see which code is generating which output is ridiculously helpful. Starting from the template provided in the Drupal Zen theme , it was relatively straightforward to translate the static pages from 2.5 into dynamic Drupal pages. Of course, clean, standards-compliant XHTML and CSS make things a lot easier – honestly, creating a custom drupal theme took only a few hours, and as far as I know, it works across a wide variety of platforms and browsers.

5. Launch and after
So at a certain point, my coworkers told me I had to stop perfecting and release the thing. And so I did. The first couple of days I definitely had some anxious moments – I’m probably personally responsible for a few thousand page views incurred as I confirmed that the site hadn’t crashed. But, it never did – it’s been 5 weeks, and we haven’t had a major, or even a minor problem (I’m knocking on wood). I chalk this up to Drupal, and to the fact that we were able to keep our project goals fairly modest. Also, the backup_migrate module that I installed the day after we launched made me rest a little easier – it really is very easy to automate backups and restore from those backups, provided that your module setup is the same from backup to restore.

My not-so-secret side-goal with this project has been to evaluate module as a potential replacement for the current CMS we use for the main museum website at madmuseum.org. Am I ready to undertake this project? Yes, but not without some serious support. The Drupal community is great (the maintainer of ddblock and I had an ongoing conversation over a problem I had, for instance), but for a high-profile, high-requirement site like the main museum site, I think I’d have to have a real timeline and budget, real provisions for testing, and I’d probably want to clean up some of the rough edges I encountered this time around (like with workflow). With that said, I think it’s nothing short of miraculous that we were able to put this site up in so short a period of time – a few years ago, it simply would not have been possible. It’s clear to me that Drupal represent serious competition for any number of custom, proprietary content management systems, and I heartily encourage anyone interested in this kind of project to give it a try. Really.

So, in summation, yay Drupal! And go watch some of our videos!

Entry Filed under: museum tech