Your SlideShare is downloading. ×
Collaborative Media Annotation with YUMA
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Collaborative Media Annotation with YUMA


Published on

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

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

Published in: Education, Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Collaborative Media Annotation with YUMARainer SimonAustrian Institute of TechnologyMapping 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 project2. Meet yuma.min.js!  Features & Getting Started  Demos  Storing annotations: yuma4j3. Nuts and Bolts  Architecture & implementation technologies  Data Interoperability: OAC and Linked Data4. Outlook and Future Work  Planned Features 2
  • 3. annotation ˌa -nə-ˌtā -shəna note by way of explanation or comment addedto 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
  • 8. usersorganize, share and communicateinformation through annotations
  • 9. annotations =personal metadata?
  • 10. So what is YUMA?The YUMA Universal Media Annotator(a recursive acronym)
  • 11. So what is YUMA?An evolution of the LEMO tool
  • 12. 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 Library
  • 13. Semantic Annotation?Annotate Media with links to controlled vocabularyterms or semantic resources on the Web
  • 14. YUMA/EuropeanaConnect Tech Demo Screencast
  • 15. So what is YUMA (after eConnect)?A new & ongoing Open Source project.The best parts from the tech demo, easy to (re-)use!
  • 16. Meet yuma.min.jsA simplified, portable user interface to YUMA that enablesannotations 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
  • 17. Live Demos of yuma.min.js at
  • 18. 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
  • 19. Storing Annotations | yuma4jOption 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 & PublishingOption 2: Install your own yuma4j Annotation Server  Storage in your relational database  All other yuma4j features (search, RSS, RDF) available as wellOption 3: Roll your own Solution  Annotations are simple JSON datastructures  Provide your own HTTP API (integrated with your login infrastructure etc.)  Documentation underway… 21
  • 20. 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 22
  • 21. Data Interoperability | OAC RDF Vocabulary oac:Annotation oac:hasBody oac:hasTarget Annotation Body W3C Media Fragment URIOpen Annotation Collaboration 23
  • 22. Data Interoperability | OAC RDF Vocabulary (Replies) oac:Reply oac:hasTarget oac:hasBodyAnnotation Body oac:Annotation oac:hasBody oac:hasTarget Annotation Body W3C Media Fragment URI 24
  • 23. Data Interoperability | OAC RDF Vocabulary (RDF Sample)@prefix oac: <> .@prefix dcterms: <> .<> a oac:Annotation ; dcterms:created "2012-01-25T14:30:29.813Z"^^<> ; dcterms:creator "guest" ; dcterms:modified "2012-01-25T14:30:29.813Z"^^<> ; oac:hasBody <> ; oac:hasTarget ",86,116,118"<> a oac:Body ; <> "This is the late-gothic church "Maria Himmelfahrt"." . 25
  • 24. 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
  • 25. Thank you for your Attention!Questions, please! 27