Taking Stock

  • The End is Nigh!!
  • Assignment 4: Planning return ~ Friday/Saturday
  • Assignment 5: Required for everyone (!!)

Oral History Assignment

  • intellectual goal: think hard about nature of oral history, and how to use digital media effectively
  • technical goal: think more about working with non-textual media, about HTML structures, and about APIs (monsters in the deep)

Before Going Further: Update Repos

git push # super important, do this first!!!
git remote add upstream https://github.com/DigitalHistory/advanced-topics.git
git fetch upstream master
git checkout -b update-attempt 
git merge  upstream/master
# if that all works (it should)
git checkout master
git pull upstream master

What the heck is this?

  • Popcorn: media “events” framework for audio & video annotation
    • developed by Mozilla for about 5 years before it was orphaned.
    • perhaps being revivified
    • keeps track of media playback, and renders specified web content between start and end timecodes.
    • for us: turns audio file into a kind of imovie-style slideshow except that the “slides” are arbitrary web content instead of photos.
    • in particular, can include google maps, wikipeida pages, and some other types of content.

Popcorn framework

  • Library-Plugin framework
    • main library tracks media element, renders content
    • plugins generate html to feed to main
    • every “event” (or “slide”) is generated by calling a plugin with a JS object as parameter. cf. line 42 of popcorn-data-from-google.js to see how this works

Plugin Structure

Google sheets: API Power

Line 16 in js/~popcorn-data-from-google.js:

  • uses Google JSON API, which represents each spreadsheet row as a JSON object
  • column headers as property names
  • script iterates through rows & invokes appropriate popcorn plugin for each row, w/ column values as plugin parameter properties
  • if you use some other plugin that I haven’t mentioned, you may need to add a column!

Tabletop: small interpreter demon

Getting Started: First, Copy Spreadsheet

(other way) Spreadsheet URL

  • Replace ONLY THE PART BTWN d and /pubhtml with the spreadsheet “key” from yr new sheet

Run server

cd advanced-topics-yr-name
npm install 
npm run server &

Open in browser

firefox localhost:8080/oral-history

use DevTools to look for errors


Error Sources

  • bad spreadsheet URL
  • bad time codes etc. in spreadsheet
  • JS syntax errors in popcorn-data-from-google.js
  • JS syntax errors in index.html

Good and Less Good Annotations

  • Add context/info
  • clarify
  • Comment

“Seek” function

<a href="javascript:seek(75)">seek to 1:15</a>