collaborative media annotation with yuma
DESCRIPTION
Presentation for the Max Planck Workshop "Mapping the Landscape of eResearch", Feburary 22/23 2012, Berlin, Germany.TRANSCRIPT
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