collaborative media annotation with yuma

27
Collaborative Media Annotation with YUMA Rainer Simon Austrian Institute of Technology Mapping the Landscape of eResearch February 23, 2012 | Berlin, Germany

Upload: aboutgeo

Post on 11-May-2015

996 views

Category:

Education


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Collaborative Media Annotation with YUMA

Collaborative Media Annotation with YUMARainer SimonAustrian Institute of Technology

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

Page 2: Collaborative Media Annotation with YUMA

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

Page 3: Collaborative Media Annotation with YUMA

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

The New Oxford English Dictionary

Page 4: Collaborative Media Annotation with YUMA

by Romana Klee CC BY-SA 2.0

Page 5: Collaborative Media Annotation with YUMA

by Flickr user mhiguera CC BY 2.0

Page 6: Collaborative Media Annotation with YUMA

by Wouter Vandenneucker CC BY-SA 2.0

Page 7: Collaborative Media Annotation with YUMA

This is an

annotation!

clipart by www.psdgraphics.com

Page 8: Collaborative Media Annotation with YUMA
Page 9: Collaborative Media Annotation with YUMA
Page 10: Collaborative Media Annotation with YUMA

organize, share and communicate users

information through annotations

Page 11: Collaborative Media Annotation with YUMA

personal metadata?annotations =

Page 12: Collaborative Media Annotation with YUMA

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

Page 13: Collaborative Media Annotation with YUMA

So what is YUMA?An evolution of the LEMO tool

Page 14: Collaborative Media Annotation with YUMA

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

Page 15: Collaborative Media Annotation with YUMA

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

Page 16: Collaborative Media Annotation with YUMA

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

Page 17: Collaborative Media Annotation with YUMA

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

Page 18: Collaborative Media Annotation with YUMA

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

Page 19: Collaborative Media Annotation with YUMA

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

Page 20: Collaborative Media Annotation with YUMA

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!)

Page 21: Collaborative Media Annotation with YUMA

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

Page 22: Collaborative Media Annotation with YUMA

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)

Page 23: Collaborative Media Annotation with YUMA

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/

Page 24: Collaborative Media Annotation with YUMA

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

Page 25: Collaborative Media Annotation with YUMA

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\"." .

Page 26: Collaborative Media Annotation with YUMA

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

Page 27: Collaborative Media Annotation with YUMA

Thank you for your Attention!Questions, please!

http://yuma-js.github.com

27