The workshop begins with a hands-on session with manuscripts from the Beinecke collection before moving into hands-on work with using local images, annotation, and applying IIIF to projects.
Last updated
Was this helpful?
Everybody gets a manuscript!
Compare manuscript to facsimile
Compare manuscript & facsimile to current Yale environment
What do you see in your physical manuscript that can't be experienced in the digital?
Conversely, what does the digital enable that is difficult with the physical object?
We're going to work from the Mirador downloads we edited yesterday. If you remember, you opened the example.html file in your text editor in order to update which manuscripts were pre-loaded in your Mirador instance. Today, we're going to configure Mirador to start with a side-by-side comparison.
First: We're going to make a copy our example.html file. We can do this by saving example.html as comparison.html , for instance.
Now, working in your text editor with comparison.html, we are going to edit a few lines in the configuration. As we start, you should see a part of the html that looks like this:
We want to first change the layout. In the example above, 1 x 1 means we have a single window when Mirador opens. Let's change that so that we have a side-by-side comparison by editing layout: "1x1" to layout: "1x2". Save your file, and open it in your browser. You should see something like this:
While that is a lovely page, it would be even better if you had a comparison set up in advance like this:
In order to do this, we have to add some additional code at the bottom of the html file. In your comparison.html file, somewhere around line 72, you should see something like this:
the windowObjects: [ ], section is what we're going to edit. In order to get the Chaucer example above, we'll edit that line so that it looks like this:
We're not quite done yet, because we have asked Mirador to open two manifests it doesn't know about yet - that is, the loadedManifest manifests are not in our general list of manifests for this Mirador instance. Let's add those in as well:
Save your file, and let's look at it in the browser again, you *should* see this (if you don't, shout!):
You can experiment on your own with different aspects of configuration (try setting up a 3 or 4 object comparison, for instance, or compare pages from within the same manuscript).
To save annotations, you need to have an annotation server OR you need to be able to create static annotation lists and serve them (like you did with manifests).
Load an object into the Mirador instance
Crop a region of interest
Copy the crop URL and open in a new tab of your browser
To create a static Annotation List
Let's all use the Chrome browser to make this a more uniform experience
Load in a manuscript you want to work on
Make a test annotation on an image from your manuscript
Open the Chrome Developer Tools
6. Now we're going to look the Application tab and the local storage information
7. Each one of these annotations contains information about the region of interest, the text of the annotation, and the canvas to which the annotation belongs.
In the list above, we have a container with an @id similar to the manifest we created yesterday. Within that container is a list of resources each of which is an annotation, like the one you saw in Mirador above. To manually create your annotation list, copy an annotation from Mirador and paste into the resources section, then update the @id to be the location where your file will live (again, just as we did with manifests yesterday).
The final step is to point to your annotation list from your manifest using the otherContent property as here:
While it is perfectly possible to create lots of annotations this way, it is certainly not a lot of fun or an efficient use of your time. Instead, it is preferable to use an annotation server.
I'm going to be honest - this can be a bit of a pain. There are two approaches we will look at: the first is a SimpleAnnotationServer developed by Glen Robson, the IIIF Technical Director; the second is a suite of tools for annotation developed by Niqui O'Neill at North Carolina State University.
Extract (unzip) sas.zip
In your terminal, cd into the newly-created sas directory
Run the SimpleAnnotation server by the following command:
You should see an instance of Mirador
Navigate to an item and make an annotation. Does it save? If not ask for help
You should see a long blob of JSON containing your annotations (NB: this will get longer and longer as you create more annotations)
These can be copied into a AnnotationList using the template we looked at above, stored, and then added to a manifest.
Glen has also provided a script to allow you to download pre-cooked Annotation Lists. More on that here. If we have time, we may cover this in the workshop.
Now you're getting fancy
If you have successfully created a bunch of annotations and want to
You’ve got projects, you’ve got IIIF and Mirador… GO!
Go to
Note: Mirador can use plugins - this one was developed at the Bavarian State Library. Instructions for creating a Mirador instance with the cropper are here:
View
Structure of an Annotation List (see )
Let's start with again
Go to and download sas.zip
Navigate to
Navigate to
To see only the annotations on a specific canvas, you can limit by searching on the Canvas ID you're interested in as in this example:
If you are wanting to explore more in this vein, the NCSU Annotation Suite is a powerful set of tools for telling stories with your annotations. We may not have time to cover this in the workshop, but the tools and installation instructions can be found here:
Another option is to run a desktop version of Mirador with annotation storage bundled in:
