aggregating media fragments into collaborative mashups ... · • bookmarklets – overlays...

27
Aggregating media fragments into collaborative mashups: Standards and a prototype Philippe Duchesne, HighLatitudes @pduchesne Open Data on the Web - W3C Workshop London, April 23-24, 2013

Upload: others

Post on 14-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Aggregating media fragments into collaborative mashups: !

Standards and a prototype

Philippe Duchesne, HighLatitudes @pduchesne

Open Data on the Web - W3C Workshop London, April 23-24, 2013

Page 2: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

ds  

Background Observation: data curators face issues such as -  not owning referred data

sources -  need only parts of resources

identified by URIs -  need to organize

annotate store exchange!

the result of their curation as! a resource of its own! Remote  resources  

Data  mosaic  

Page 3: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

CrossLinks project is grounded in several use cases: •  Work Context storage and sharing –  Disaster management

•  Story telling –  Data journalism

•  Metadata augmentation –  Digital media archiving

It’s all about stitching together heterogeneous data fragments into meaningful and contextualized patchworks

Background

3  

Page 4: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

1.  Enable identification and linking of fragments of online media resources – Unstructured as video, audio, text, … – Structured as XML, tabular, …

2.  Devise an abstract model and representation format(s) for data mosaics

3.  Implement a platform for authoring, storage, sharing and visualization

Steps

4  

Page 5: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  URI spec leaves the fragment part unspecified

•  Several standardization efforts exist regarding specific mime types – MediaFragments (W3C Recommandation)

•  Focused on temporal (#t) and pixel space fragments (#xywh)

•  Dedicated to audio/video media –  text/csv fragments (IETF Draft)

•  Defines #col,row,cell –  text/plain fragments (IETF RFC 5147)

•  Defines #line

Formalizing fragments

5  

Page 6: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Other mainstream usages

•  #page for PDF resources •  #<id> implicit id fragment used in HTML,

RDF, …

Formalizing fragments

6  

Page 7: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  But no harmonized definition of fragments for all media types

•  Also, need to decouple media types from fragment dimensions – XML, PDF, MPEG, CSV, … ! vs !Text, Time, Spatial, …

Formalizing fragments

7  

Page 8: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Identified dimensions •  Textual –  Line numbers and char offset

•  Temporal •  Pixel space •  Tabular •  Geospatial space – Proposing #bbox

•  Tree path – Proposing #xpath

Formalizing fragments

8  

Page 9: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Id   Text   Time   Pixel   Spa/al   Tabular   Tree  

html   ✔   ✔  

text/plain   ✔  

pdf   ✔   ✔  

video/*   ✔   ✔  

audio/*   ✔  

image/*   ✔  

geo=ff   ✔   ✔  

kml   ✔   ✔   ✔   ✔ !

csv   ✔  

json   ✔  

Formalizing fragments

9  

Page 10: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  Abstract model basically a set of annotations organized in a folder-like structure

•  Annotations can link any resource fragment to another (or to inline content), with – author – semantic type –  free form tags

Data mosaics: representation

10  

Page 11: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  JSON-based encoding – More convenient for browser-based apps – Easier to get acquainted with for target

audience

•  RDF-based representation also available

Data mosaics: representation

11  

Page 12: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Data mosaics: representation

12  

Page 13: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  Triple store •  REST-based interface –  JSON encoding

•  SPARQL endpoint –  fine-grained queries !

of the data mosaics !graphs

•  web portal – Authoring & Management

•  Bookmarklets – Overlays resources !

with annotations

Implementation: Architecture

13  

Triple  store  

HTML5  Pla9orm  -­‐  visualize  -­‐  author  -­‐  publish  -­‐  collaborate  

Bookmarklet  Augment  current  browser  document  with  related  mosaics  

Browser  

HTTP/REST  access  (JSON)   SPARQL  

Page 14: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  Seamless integration in regular browser flow – viewing: offers augmented view on annotated

resources – authoring: helps users capture comments and

train of thought while browsing à browse the annotation graph in a natural way

•  Collaborative annotations – All entities (mosaics, resources, annotations)

have authors and timestamps

Features

14  

Page 15: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Id   Text   Time   Pixel   Spa/al   Tabular   Xpath  

html   ✔   ✔  

text/plain   ✔  

pdf   ✔   ✔  

video/*   ✔   ✔  

audio/*   ✔  

image/*   ✔  

geo=ff   ✔   ✔  

kml   ✔   ✔   ✔   ✔   (✔)!

csv   ✔  

json   ✔  

Supported media and fragments

15  

Page 16: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  Platform meant to be extended – Custom viewers – Extra mime types E.g. YouTube, SlideShare

•  Boils down to implementing – HTML5 portraying – Fragment resolution, display and capture

Customization

16  

Page 17: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Example - Authoring

17  

Page 18: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Example - Authoring

18  

Page 19: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Data mosaics: representation

19  

Page 20: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Example

20  

Page 21: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Example

21  

Page 22: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Example

22  

Page 23: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Example

23  

Page 24: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

Example

24  

Page 25: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  RDF/SPARQL exposure using well-known vocabularies – Open Annotations

•  Proposes a detailed model for annotations, compatible with this project

•  Include visualization-specific config in data mosaics (esp. for CSV)

•  Allow annotations filtering based on author, dates, semantic tags

Future

25  

Page 26: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

•  Some features would benefit from becoming mainstream browser features –  Fragment resolution for supported mimetypes –  Fragment selection

•  Seamless integration of authoring/viewing avoids breaking train of thought à favors engagement and better captures domain knowledge

•  Data mosaics act as exchangeable “mind map” containers, capturing contextual metadata in a domain-specific perspective, for a given use case

Conclusions

26  

Page 27: Aggregating media fragments into collaborative mashups ... · • Bookmarklets – Overlays resources ! with annotations Implementation: Architecture 13 Triplestore HTML5#Pla9orm#

phd [at] highlatitud.es @pduchesne

Thank you

27