Presentation for the Max Planck Workshop "Mapping the Landscape of eResearch", Feburary 22/23 2012, Berlin, Germany.

1. Collaborative Media Annotation with YUMA
Rainer Simon
Austrian Institute of Technology
Mapping the Landscape of eResearch
February 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
2

3. annotation ˌa
-nə-ˌtā
-shən
a note by way of explanation or comment added
to a text or diagram
The New Oxford English Dictionary

4. by Romana Klee CC BY-SA 2.0

5. by Flickr user mhiguera CC BY 2.0

6. by Wouter Vandenneucker CC BY-SA 2.0

7. clipart by www.psdgraphics.com

10. users
organize, share and communicate
information through annotations

11. annotations =
personal metadata?

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

13. So what is YUMA?
An evolution of the LEMO tool

14. So what is YUMA?
A technology demo: Social Semantic Media Annotation
for images, maps, audio and video in your Browser
Core Components for the European Digital Library
www.europeanaconnect.eu

15. Semantic Annotation?
Annotate Media with links to controlled vocabulary
terms or semantic resources on the Web

16. YUMA/EuropeanaConnect Tech Demo Screencast
http://vimeo.com/21798530

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

18. Meet yuma.min.js
A simplified, portable user interface to YUMA that enables
annotations in existing pages with a few lines of JavaScript
 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

19. Live Demos of yuma.min.js at
http://yuma-js.github.com/demos.html

20. Getting Started | Adding YUMA to your site
(Analogy: adding a Web map to your page using the Google Maps API works similarly!)
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

21. 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

22. Nuts and Bolts | Architecture & Technology
1
Static Resources Annotation Data
JavaScript Java Web Application
CSS Apache Tomcat
Relational Database
JSON(P)
1 Google Web Toolkit http://code.google.com/webtoolkit/
22

23. Data Interoperability | OAC RDF Vocabulary
oac:Annotation
oac:hasBody oac:hasTarget
Annotation Body W3C Media Fragment URI
Open Annotation Collaboration
http://www.openannotation.org/spec/beta/
23

24. Data Interoperability | OAC RDF Vocabulary (Replies)
oac:Reply
oac:hasTarget
oac:hasBody
Annotation Body oac:Annotation
oac:hasBody oac:hasTarget
Annotation Body W3C Media Fragment URI
24

25. Data Interoperability | OAC RDF Vocabulary (RDF Sample)
@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"." .
25

26. 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 Moderation
26

27. Thank you for your Attention!
Questions, please!
http://yuma-js.github.com
27