updates to day three, especially more specific instructions for annotations activities

jeffreycwitt · jeffreycwitt · commit 59301bf29fe2 · 2018-06-06T09:30:08.000-04:00
diff --git a/iiif-5-day-workshop/SUMMARY.md b/iiif-5-day-workshop/SUMMARY.md
@@ -33,7 +33,7 @@
 - [Annotations, AnnotationLists](day-three/annotations-and-annotation-lists.md)
 - [Collections](day-three/collections.md)
 - [Ranges](day-three/ranges.md)
-- [Search](day-three/search.md)
+<!-- - [Search](day-three/search.md) -->
 
 ## Day Four
 - [Introduction](day-four/README.md)
diff --git a/iiif-5-day-workshop/day-three/README.md b/iiif-5-day-workshop/day-three/README.md
@@ -1,11 +1,9 @@
 # Day Three
 
-## Demos: Uses and Applications of IIIF 
+## Demos: Uses and Applications of IIIF
 
 ## Annotations and Annotation Lists
 
 ## Collections
 
 ## Ranges
-
-## Search
diff --git a/iiif-5-day-workshop/day-three/annotations-and-annotation-lists.md b/iiif-5-day-workshop/day-three/annotations-and-annotation-lists.md
@@ -1,8 +1,33 @@
 # What are annotations
 
+Annotations relate an object ("resource") to another object ("on").
+The nature of that relationship can be of various types.
+Treating the annotation itself as a resource allows describe and category the nature of that relationship.
+
+## Example Annotation
+
+```json
+
+{
+  "@type": "oa:Annotation",
+  "motivation": "sc:painting",
+  "resource":{
+    "@id": "http://example.org/iiif/book1/res/tei-text-p1.xml",
+    "@type": "dctypes:Text",
+    "format": "application/tei+xml"
+  },
+  "on": "http://example.org/iiif/book1/canvas/p1"
+}
+
+```
+
+## What are annotationsLists?
+
 See Specification Chapter:  [http://iiif.io/api/presentation/2.1/#annotation-list](http://iiif.io/api/presentation/2.1/#annotation-list)
 
-## Example
+Annotations are simply lists of annotations grouped together.
+They can be re-used by any application that wants to retrieve them.
+
 ```json
 {
   "@context": "http://iiif.io/api/presentation/2/context.json",
@@ -34,11 +59,6 @@ See Specification Chapter:  [http://iiif.io/api/presentation/2.1/#annotation-lis
 }
 ```
 
-## What are annotationsLists?
-
-Annotations are simply lists of annotations grouped together.
-They can be re-used by an application that wants to retrieve them.
-
 That can also be linked to manifests so that a viewer can bring them together in one cohesive experience.
 
 ## Embedding an annotationsLists in a manifest
@@ -80,63 +100,90 @@ That can also be linked to manifests so that a viewer can bring them together in
 
 What is an annotation store? An annotation store is just a database designed to ingest data structured according to the Open Annotations (or Web Annotations) specifications.
 
-There are lots of them. You can make your own or use one that has been made by someone else.
+There are lots of them annotation stores. You can make your own or use one that has been made by someone else.
 
 ## Local Storage as an annotation store
 
-Because an annotation store is nothing other than place to store raw data
+Because an annotation store is nothing other than place to store raw data,
 even your browser's local storage can function as an annotation store.
 
-### Activity
-
-Turning on annotations in Mirador
-
-* Open the index.html page of a mirador instance.
-
-* Add the follow key value pair to the configuration of options of your mirador instance.
+### Activity: Configuring and Running Mirador
+
+To begin working with annotations, we're going to start going a little bit deeper the image viewer. We're going to begin look at how to download Mirador and configure your personal instance of Mirador so that it supports advanced features, like annotations.
+
+1. Download the Mirador Zip File to your Desktop [https://github.com/ProjectMirador/mirador/releases](https://github.com/ProjectMirador/mirador/releases)
+  * Or download directly from here [https://github.com/ProjectMirador/mirador/releases/download/v2.6.0/build.zip](https://github.com/ProjectMirador/mirador/releases/download/v2.6.0/build.zip)
+1. Unzip the Mirador Package. It will probably be a folder called "build".
+1. Change the name of the folder to "Mirador"
+  * `$ cd ~/Desktop`
+  * `$ mv build Mirador`
+1. Now open the Mirador Directory in Atom.
+1. Open the file called `example.html`
+  * The example.html provides a basic example of a html that runs the Mirador applications.
+  * Line 19 loads in the core application
+  * Line 23 begins the configuration of this mirador instance
+  * For example lines 27-71 indicate the manifests that Mirador should load with on default
+  * With respect to annotations, lines 73-76 are the subject of our current interest.
+  * The proper `annotationEndpoint` tells Mirador where it should save annotations.
+1. Double check to make sure your instance of Mirador has the following configuration at lines 73-76
   * `"annotationEndpoint": { "name":"Local Storage", "module": "LocalStorageEndpoint" }`
-* A module then has to be build (the LocalStorageEndpoint) using distinct set of functions that mirador knows how to call [See https://github.com/ProjectMirador/mirador/blob/develop/js/src/annotations/localStorageEndpoint.js](https://github.com/ProjectMirador/mirador/blob/develop/js/src/annotations/localStorageEndpoint.js).
+  * Note: A module then has to be build (the LocalStorageEndpoint) using distinct set of functions that mirador knows how to call [See https://github.com/ProjectMirador/mirador/blob/develop/js/src/annotations/localStorageEndpoint.js](https://github.com/ProjectMirador/mirador/blob/develop/js/src/annotations/localStorageEndpoint.js).
   * This module includes functions like search, deleteAnnotation, updateAnnotation, createAnnotation, getAnnotationList, etc.
   * Each annotation server might have different ways of deleting, updating, creating an annotation thus mirador needs this extra module to know what kind of action to perform.
-* Now that the localstorage module is turned on, go into Mirador and makes some annotations.
-* After you've made some annotations, view them in local Storage
+1. Now that the localstorage module is configured, open Mirador in your browser
+  * In your Mirador directory run `$ http-server` and then navigate to http://localhost:8080/example.html
+  * Or in your browser, open the example file directly, Files->OpenFile-> locate the example.html file
+1. Tell Mirador you want to see Annotations by click the "comment bubble" near the top left corner.
+1. Make some annotations
+1. Now export your annotations from your browsers local storage.
   * Open the developer tools in the Chrome Browser
   * Go to "Application"
   * View "Local Storage" in the left hand column.
-* Copying the information from you browsers local storage is the most primitive way of *Exporting* your annotations.
+1. Copy the information from you browsers local storage and past it in Atom.
+  * This is the most primitive way of *Exporting* your annotations.
 
 ### Questions and Reflections
 
 * What are some of the limitations of using your local storage as a store?
 * What kind of store/database will allow us to overcome those limitations?
 
-## Setting up a Remote Local Storage
+## Configuring Mirador to Use a Remote Annotation Store
 
-There are several kinds of annotations stores that can be used.
+There are several kinds of remote annotations stores that can be used. We're going to use a Rails based annotation store called "Annotot" developed by Jack Reed.
 
 ### Activity
 
+1. Update the mirador annotation endpoint configuration to following:
+    ```json
 
-* Download the Rails Annotation Server
-  * Download from github (git clone ...)
-
-* Run your rails server
-  * either with `rails server`
-  * `docker compose up` or `docker run rails annotation server`
-* Add the annotot module to mirador
-* Rebuild mirador
-* Update the mirador annotation endpoint configuration
-* "annotationEndpoint": {
-            "name": 'Annotot',
-            "module": 'AnnototEndpoint',
-            "options": {
-              "endpoint": "http://localhost:3000/annotations"
-            }
-          },
-* Now make some annotations in mirador
-* Now view those same annotations apart from mirador at http://localhost:3000/annotations/lists?uri=<cavasid>
-* Now you've exported your annotations and free to use them anywhere else.
-* So let's use them somewhere else
+    "annotationEndpoint": {
+      "name": "Annotot",
+      "module": "AnnototEndpoint",
+      "options": {
+        "endpoint": "http://ras.scta.info/annotations"
+      }
+    }
+    ```
+1. Since this annotation store works differently than localstorage, we can expect that Mirador out of the box knows how to talk to it. So we have to provide Mirador with API hook, just as we saw above was supplied for local storage.
+1. Download the Annotot API Hook  
+  * [https://github.com/mejackreed/annotot/blob/master/app/assets/javascripts/annotot/annotot_endpoint.js](https://github.com/mejackreed/annotot/blob/master/app/assets/javascripts/annotot/annotot_endpoint.js)
+  * or directly from here [https://raw.githubusercontent.com/mejackreed/annotot/master/app/assets/javascripts/annotot/annotot_endpoint.js](https://raw.githubusercontent.com/mejackreed/annotot/master/app/assets/javascripts/annotot/annotot_endpoint.js)
+1. Save the file in your Mirador Directory
+1. Import the file into your example.html file
+  * add `<script src="annotot_endpoint.js"></script>` below `<script src="mirador/mirador.min.js"></script>` (this should be found around line 19)
+1. Refresh Mirador
+1. Now make some annotations in mirador.
+  * Because we are all using the same remote server, we should be able to see each others annotations. Let's try it.
+1. Open the the following manifest with a picture of our class.
+1. Annotate yourself in the image.
+1. Navigate away and then back to the image to refresh the annotations. As other make annotations, you should see their annotations as well.
+
+
+<!-- ## Reusing your annotations from an annotation store
+
+1. Now view those same annotations apart from mirador at http://ras.scta.info/annotations/lists?uri=<cavasid>
+1. Now you've exported your annotations and free to use them anywhere else.
+1. So let's use them somewhere else
   * Go to back to your custom project and use jquery to make a request for those annotations
   and display them on your page like so:
 
@@ -146,4 +193,4 @@ There are several kinds of annotations stores that can be used.
     console.log(data);
     //do something with that data
     });
-  ```
+  ``` -->
diff --git a/iiif-5-day-workshop/day-three/collections.md b/iiif-5-day-workshop/day-three/collections.md
@@ -2,33 +2,37 @@
 
 ## Description
 
-#### Collection Tree Navigator for Mirador
+Collections are away to organize manifests into groups, allow us the ability to share groups of manifest with a single URL.
 
-This feature came about to address the need of showing objects in nested collections to ease navigation and avoid server slow-down. Collection-level manifests are often very large and can contain many sub-collections within them. As such, it became important for users to navigate through collections easily and without losing context.
 
-See the code for Collection Tree [here](https://github.com/utlib/mirador/tree/develop_collection_tree_lazy)
+## Collection Tree Navigator for Mirador
 
-Allows users to:
+The collection tree navigator for Mirador came about to address the need of showing objects in nested collections to ease navigation and avoid server slow-down. Collection-level manifests are often very large and can contain many sub-collections within them. As such, it became important for users to navigate through collections easily and without losing context.
+
+The aeature allows users to:
 
 - View entire collections with sub-collections in a tree structure on manifest selection panel
 - Easily navigate across collections
 
-Demo
-
-You can view Mirador advanced features [here](http://projectmirador.org/demo/advanced_features.html)
-
 
 ## Activity
 
-Let's create your own collection
+Let's create your and serve your own collection
 
-* Find at least five manifests and organize them into a collection, following the IIIF guidelines
+1. Find at least five manifests and organize them into a collection, following the IIIF guidelines
   * [http://iiif.io/api/presentation/2.1/#collection](http://iiif.io/api/presentation/2.1/#collection)
-* Then configure mirador to load a collections
-  * `"data": [
-      { "collectionUri": "https://scta.info/iiif/scta/collection"}
-    ]`
-* Configure mirador to allow to browse your collection by changing the manifestsPanel module to the CollectionTreeManifestsPanel"
-  * `"manifestsPanel": {
-      "module": ""CollectionTreeManifestsPanel",
-      }`
+1. Save your collection as `mycollection.json` in the `myManifests` folder on your Desktop.
+1. Server your manifests and collections with `$ http-server --cors`
+1. In the `example.html` file in the Mirador directory file configure mirador to load a collection.
+    ```json
+    "data": [
+      { "collectionUri": "https://localhost:8080/mycollection.json"}
+    ]
+    ```
+1 Configure mirador to allow to browse your collection by changing the manifestsPanel module to the CollectionTreeManifestsPanel"
+
+    ```json
+    "manifestsPanel": {
+      "module": "CollectionTreeManifestsPanel",
+      }
+      ```
diff --git a/iiif-5-day-workshop/day-three/ranges.md b/iiif-5-day-workshop/day-three/ranges.md
@@ -4,9 +4,9 @@ Ranges allow us to provide nuanced navigation for object represented as a manife
 
 ## Activity
 
-* Find and download a manifest
-* Add a "structures" field to the manifest and then add ranges at least two levels deep following the IIIF specification
+1. Find and download a manifest
+1. Add a "structures" field to the manifest and then add ranges at least two levels deep following the IIIF specification
   * [http://iiif.io/api/presentation/2.1/#range](http://iiif.io/api/presentation/2.1/#range)
-* Change the id of your manifest to match the url from which it will be served (e.g. localhost:8080/mymanifest.json)
-* Serve your manifest
-* View your manifest in mirador and navigate the resource via your ranges.
+1. Save your modified manifest as `manifest-with-ranges.json` in the `myManifests` folder on your Desktop.
+1. Server your manifests and collections with `$ http-server --cors`
+1. View your manifest in Mirador and navigate the resource via your ranges.
