Designing Augmented Notes

After a week's hiatus from this blog in honor of the success of the pre-release of Songs of the Victorians, I'm ready to get back to providing weekly updates on my digital projects.

First, I'm pleased to report that in the two weeks Songs of the Victorians launched, it has received approximately 710 visits from 545 visitors spanning 5 of the 7 continents, 23 countries, and 282 cities!  I've been thrilled by all the positive feedback I've received.  Thanks to everyone for the support!  I will endeavor to add a new song for each of the next three months.  In the interim, iOS users (iPod, iPad, etc.) can now enjoy Songs of the Victorians as well (previously, the audio file would not play properly on the archive or analysis view).  Please let me know if you have more feedback on the content or design: I'd love to hear your thoughts!

I also have some exciting news about Augmented Notes, my tool that will enable users to make their own site like Songs of the Victorians (read this post for more information)!  Although I don't yet have a release date scheduled for the beta version of the site (that info will hopefully be ready next week), I did make some important design decisions and finish building the first half of the project.  I knew that I wanted to incorporate the logo I designed and wrote about in this post and that I wanted the background image to incorporate music.  I also wanted to use a similar layout to Songs of the Victorians as an implicit way of branding my work and reminding users that Songs of the Victorians is made through Augmented Notes.  Once I found a public domain scan of the manuscript of Franz Schubert's "An Die Musik" (1817), I knew I had found my background image.  The song uses as its lyrics a poem by Schubert's friend Franz von Schober, and is a song in praise of music and its transformative power:  since Augmented Notes facilitates music and text scholarship, this song perfectly encapsulates the project's goals. Here's a draft of the homepage:

When users visit the site, they will upload an mp3 and ogg vorbis version of the audio file of the song (.ogg is necessary for the music to play in Firefox), an MEI file containing the position information for each measure, and pages of the score.  Clicking on the "submit" button will take them to the next page, where the files they uploaded will be used to help users generate the time information for each measure:

The "Set Measures Times" page contains a score, audio file, audio controls, and a bunch of text input fields, each of which corresponds to a measure of music. Users will hit the play button to start the audio file and then hit the "save" button at the end of each measure.  This action will fill in the corresponding input fields with the end time of each measure, and users can hit "previous" or "next" to play the preceding or ensuing measure to refine their time data.  Once each measure time is accurate, users can click the "submit the times" button, which will save the data.  For its beta release, Augmented Notes will then output a zip file that contains all the necessary html, .js, and css files necessary to create a page like the archive page for "Juanita" in Songs of the Victorians.  After that is released, I will also create an excerpt page that lets users customize excerpts for analytical arguments like those seen in the analysis page for "Juanita" in Songs of the Victorians.

I know I still need to tweak the logo to find a better font, but I'd to hear love any suggestions you might have, either for that or for any other component!

Songs of the Victorians is Live!

As of 9:30am EST, Songs of the Victorians (http://www.songsofthevictorians.com) went live!  It's been quite the adventure preparing for this limited release launch, but it's turned out well.  As you can see from the twitter feed, I've received a lot of positive feedback and very generous assistance in spreading the word.  Feel free to leave comments or advice on the project at the end of this post:  I'd love to hear your suggestions!

In the interim, I’ll give you a guided tour of the site and its rationale:

If you’re new to this blog and want to learn more about Songs of the Victorians and its purpose, then check out this “about” page from Songs of the Victorians and this earlier blog post.

Click here if you want to see the archive page for Caroline Norton's "Juanita" or here if you want to read my article on the song, complete with musical excerpts highlighted in time with the audio file.

Go to my "Songs" page to see the other three songs that will be a part of Songs of the Victorians in the next few months.

If you want an explanation behind the design of the home page, check out this post on why and how I modeled it on Victorian sheet music.

If you’ve seen earlier versions of Songs of the Victorians from conferences and are confused by the complete aesthetic change, then read this post about the redesign.

If you want to know what the workflow looks like to put a song into my site, then read my previous blog post.

And finally, if you want to know more about the logo for Augmented Notes on the lower right hand corner of each page, then read this post about the tool I’m building that powers this site (and may some day power yours!).

Thank you again for all your encouragement and support!  Please help me spread the word and write comments below so I can get even more feedback before I release the remaining three songs!  

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!