Collaborative Media Annotation with YUMA

Collaborative Media Annotation with YUMARainer SimonAustrian Institute of Technology

Mapping the Landscape of eResearchFebruary 23, 2012 | Berlin, Germany

2

1. Background Annotation? Attempting a definition (as applied in YUMA) EuropeanaConnect & the YUMA Social Semantic Annotation Tech Demo The YUMA Open Source project

2. Meet yuma.min.js! Features & Getting Started Demos Storing annotations: yuma4j

3. Nuts and Bolts Architecture & implementation technologies Data Interoperability: OAC and Linked Data

4. Outlook and Future Work Planned Features

annotation \ a-n - tā-sh n\ˌ ə ˈ əa note by way of explanation or comment addedto a text or diagram

The New Oxford English Dictionary

by Romana Klee CC BY-SA 2.0

by Flickr user mhiguera CC BY 2.0

by Wouter Vandenneucker CC BY-SA 2.0

This is an

annotation!

clipart by www.psdgraphics.com

organize, share and communicate users

information through annotations

personal metadata?annotations =

So what is YUMA?The YUMA Universal Media Annotator(a recursive acronym)

So what is YUMA?An evolution of the LEMO tool

So what is YUMA?A technology demo: Social Semantic Media Annotationfor images, maps, audio and video in your Browser

Core Components for the European Digital Librarywww.europeanaconnect.eu

Semantic Annotation?Annotate Media with links to controlled vocabularyterms or semantic resources on the Web

YUMA/EuropeanaConnect Tech Demo Screencasthttp://vimeo.com/21798530

So what is YUMA (after eConnect)?A new & ongoing Open Source project.The best parts from the tech demo, easy to (re-)use!

Meet yuma.min.js

Support for Images DeepZoom images (in combination with Seadragon AJAX viewer) Zoomify images and Web maps (in combination with OpenLayers)

Free-text annotation Box-region selection “Facebook-like” comment threading

OpenID Login

Support for Audio and Video under development

18

A simplified, portable user interface to YUMA that enablesannotations in existing pages with a few lines of JavaScript

Live Demos of yuma.min.js athttp://yuma-js.github.com/demos.html

Getting Started | Adding YUMA to your site

1. Include the yuma.min.js JavaScript file in your page<script type="text/javascript"

src="yuma.min.nocache.js"></script>

2. Include the CSS style sheet (or create your own GUI style!)

<link rel="stylesheet" type="text/css" href="css/yuma.min.css" />

3. Add a few lines of JavaScript to attach YUMA to elements on your page

new YUMA.ImageAnnotationLayer('myAnnotatableImage');

20

(Analogy: adding a Web map to your page using the Google Maps API works similarly!)

Storing Annotations | yuma4j

Option 1: Store Annotations at our yuma4j Server Requires one line of configuration in yuma.min.js Search (OpenSearch API under development) RSS (Feeds on Global Timeline, Annotated Objects, Users) RDF Export & Publishing

Option 2: Install your own yuma4j Annotation Server Storage in your relational database All other yuma4j features (search, RSS, RDF) available as well

Option 3: Roll your own Solution Annotations are simple JSON datastructures Provide your own HTTP API (integrated with your login infrastructure etc.) Documentation underway…

21

Nuts and Bolts | Architecture & Technology

22

Static ResourcesJavaScript

CSS

1

1 Google Web Toolkit http://code.google.com/webtoolkit/

Annotation DataJava Web Application

Apache TomcatRelational Database

JSON(P)

Data Interoperability | OAC RDF Vocabulary

23

oac:Annotation

Annotation Body

oac:hasTargetoac:hasBody

W3C Media Fragment URI

Open Annotation Collaborationhttp://www.openannotation.org/spec/beta/

Data Interoperability | OAC RDF Vocabulary (Replies)

24

oac:Annotation

Annotation Body

oac:hasTargetoac:hasBody

W3C Media Fragment URI

oac:Reply

oac:hasTarget

Annotation Body

oac:hasBody

Data Interoperability | OAC RDF Vocabulary (RDF Sample)

25

@prefix oac: <http://www.openannotation.org/ns/> .@prefix dcterms: <http://purl.org/dc/terms/> .

<http://dme.ait.ac.at/yuma4j-server/api/annotation/301>a oac:Annotation ;dcterms:created

"2012-01-25T14:30:29.813Z"^^<http://www.w3.org/2001/XMLSchema#dateTime> ;dcterms:creator "guest" ;dcterms:modified

"2012-01-25T14:30:29.813Z"^^<http://www.w3.org/2001/XMLSchema#dateTime> ;oac:hasBody <http://dme.ait.ac.at/yuma4j-server/api/annotation/301#body> ;oac:hasTarget

"http://yuma-js.github.com/images/640px-Hallstatt_300.jpg#xywh=pixel:438,86,116,118" .

<http://dme.ait.ac.at/yuma4j-server/api/annotation/301#body>a oac:Body ;<http://www.w3.org/2000/01/rdf-schema#label>

"This is the late-gothic church \"Maria Himmelfahrt\"." .

yuma.min.js | Roadmap…

Documentation & Outreach Tagging

Thesaurus terms Free tags Linked Data entities (DBpedia, Geonames, LinkedOpenGeoData)

GUI Design & Usability enhancements Flexibility

Offline storage Bookmarklet “Plugin API” Explore synergies with other annotation tools (Web/HTML)

Distributed Moderation26

Thank you for your Attention!Questions, please!

http://yuma-js.github.com

27