Pre-Release Prep: TEI, Design, and Templating through Pictures

It's been another busy week for Songs of the Victorians! Because the sneak-peek reveal is A WEEK FROM TODAY(!), I spent this weekend doing some substantial revisions, and to demonstrate all these changes and revisions, I will inundate you with pictures that cover the entire process.

First,  I converted my essay on Caroline Norton's "Juanita" (read about it here) into TEI, the standard XML markup for texts.  I had written it as a Word document, but I didn't want to spend ages painstakingly copying and pasting or retyping everything, so I was thrilled when I stumbled across http://www.tei-c.org/oxgarage/#, a very useful tool that converts Word documents, excel spreadsheets, and even power point slides into valid TEI P5! Of course, it made a few mistakes (for example, it marked lines of poetry as individual paragraphs), but I was able to easily fix them and produce this:

I decided not to use XLST to transform the XML to HTML and instead to use pyquery (a library similar to jQuery but for Python), and, with some extensive css styling, was able to produce this for the analysis page:

The next step was to correctly link up the audio file with the score so each measure is highlighted in time with the music.  I had already used MEI (xml markup for music) and pyquery to preserve and extract the relevant measure positions, so I only had to add measure times to the system. I did this with the help of a portion of my tool Augmented Notes, which I'll start talking about more after the sneak-peek reveal. To use its "time edit" function, I started the audio file playing, and then hit the "save" button at the end of every measure. Hitting the save button fills each text input on the right hand side of the screen with the precise time for the end of the measure:

Time Edit Functionality with Michael William Balfe's "Come into the Garden Maud"

I then saved this information as JSON data, and then all the components for the archive page were complete!

I had spent a lot of time trying to figure out how to redesign the archive page.  In the original incarnation of the project, I included thumbnails of each page of the score and a button that would pop up a much higher resolution image of the scan as well as the audio file and normal-sized score, but I wasn't quite satisfied with the look.  The thumbnails made the page too crowded and deemphasized the score and audio, which were the whole point of this page:

For my new design, I removed the thumbnails and the "click for larger version" link and instead made the score itself larger so my users could see it more clearly. I also centered everything to give it greater emphasis.

In case you're wondering what the measure highlighting looks like, here's a video of it for Norton's "Juanita":

The final step was to use Mako, a Python-based web templating language, to make my site generated dynamically.  Originally, the analysis and archive pages had lots of unnecessary overlap in the code: the header and footer information appeared on each page.  With Mako, I could make one template with all the common information between pages, and then invoke that template on those pages.

A week from now, the Juanita page will be live! For next time, I'll blog about my attempts to publicize the release and about building the musical excerpts for the analysis page!