This project contains template files for use in an oral history project for a digital history class, ”History & Its Publics in a Digital Age”. Hopefully they will allow students in the class – or anyone else – to very quickly hand-build a small oral history website around a single interview. For more information you can check out the project assignment and my explanation of popcorn. The latter post links out to two JSBin pages that we use to explain to the class how the projects work.
The project relies on three specialized external libraries:
- Popcorn, which allows events in a webpage to be synced to the playback of a media element;
- SIMILE Timeline, which enables the display of events in a timeline (it’s an old and somewhat clumsy framework, and should perhaps be replaced by something like TimelineJS);
- Tabletop, which is used to feed data from a Google spreadsheet directly into both of the above frameworks, so that events don’t have to be coded directly in Javascript.
We link to the external Timeline scripts, but include the Popcorn and Tabletop scripts directly in the project – Tabletop because it’s just hosted on Github, and popcorn because the version hosted at popcornjs.org doesn’t work with file:// links, so we have to modify it very slightly.
The project template itself is actually quite simple.
- index.html includes a very simple layout for an audio element & one popcorn target, with css contained in assets/css/style.css. The popcorn instance is initialized in assets/js/project-popcorn-data.js, which loads popcorn events from a Google spreadsheet.
- You should create your own spreadsheet for your project, by visiting the example spreadsheet and choosing “File –> Make a Copy” from the Google Docs menu. The spreadsheet contains fields that you should use with the text,footnote, image, or Google Maps plugins; if you want to use other plugins, add the fields you need for them. Some events (like the OpenMap plugin) have a sufficiently complex format that it won’t be easy to create the event from a single spreadsheet sheet; in that case you can add the event manually in project-popcorn-data.js, or work out a more complex formula for individual cells (if you end up doing that, please let me know so I can include the examples!).
- student-essay(1,2,3).html are nearly-identical templates for timeline/essay pages, which comprise the second part of the assignment in our class. They reference other sheets in the same spreadsheet, and feed the data to SIMILE Timeline instead of Popcorn. In the future I expect to switch to another timelining tool – again, if you modify the template to do something different please let me know so I can incorporate your work.
- both parts use Tabletop to pre-process the Google spreadsheet data, because the actual Google feed is somewhat convoluted. Thanks to the Popcorn dev list for pointing me to this incredibly useful tool.
- A couple of media files are included in assets/audio and assets/images. They greatly increase the project’s download size, but I include them anyway so that the project will work out of the box.
I hope other people will try this out – contact me directly or file an Issue if you have questions!