SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Building an Open and Persistent Annotating System Abdulla Alasaadi			Michael L. Nelson Computer Science Department Old Dominion University
Introduction Annotation is a regular activity practiced by scholars while reading [books or articles] [Webpages] Webpage, Image, Text, Video, etc…
Annotation
Web Annotation Web Annotation can be used by scholars or web-users to share information about certain resources or topics. Existing Annotation systems: Need Client side script to create and view the annotations. The Annotea LEMO
Time Time of the annotation: Resources may: Move   [location] Change [updated]  Disappear
Annotation Open and Independent   The focus on sharing annotations.  Persistent   Readable at anytime.  Archived [Targets and Annotation body]
Resources Archiving What if the Resource doesn’t have a memento?! We will not be able to view the annotation when the original resource move.  Push all related resources to the Archive . In this case, we make sure that, all resources are archived and persistent.
 Uniform Time Annotations
2010-12-20T04:46:10-00:00  Uniform Time Annotations
 * Annotation Body can have more than one media-type.
Media types Annotate by image Annotate by video Annotate by Text
Open and Independent  The annotation should be retrieved by the browser without the help of any extra plugin or adds-on. SVG [Scalable Vector Graphs] used to represent the annotations.  SVG is a Text-based Markup language written in XML Supported in [Firefox, IE9, Chrome ,Safari]
Scalable Vector Graphs [SVG]:  Searchable: Google started indexing the SVG content on August 31st, 2010. SVG file can contain Audio, Video, and image tags. Image tag is supported by all browsers Audio and video tags are supported by SVG readers but not browsers yet. Promises that they will be supported in future updates.  SVG video tags can be rendered to flash in the server side in order to overcome the lack of support. Supports Scripting (JavaScript).
SVG Example <svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">  <g id= “Target”> <image x="128" y="77.00001" width="402.99999" height="250.99999" id="svg_1" xlink:href="http://www.theanimalfiles.com/images/african_elephant_range.jpg"/> </g> <g id=“Body”>   <rectfill="#2eff00" stroke-width="2" x="237" y="144" width="166" height="45" id="svg_2" opacity="0.25" fill-opacity="0.6" stroke="#a01111"/>   <text x="172" y="210" fill="black" font-weight="bold">SavanaElephents  live here</text>   <image x="264" y="207.5" width="99" height="90" id="svg_3" opacity="0.7" xlink:href="http://www.theanimalfiles.com/images/african_elephant_2.jpg"/>  </g> </svg>
Cont. SVG Examples Video / Audio tags : <g id= “AnnBody”>   <video id="vid1" xlink:href="20051210-w50s.flv" type="video/x-flv" begin="2.2s" dur="20s" x="50" y="50" width="400" height="300"> </g> ,[object Object]
Can be rendered in flash
Example: http://codinginparadise.org/projects/svgweb/samples/demo.html,[object Object]
The plugin sends the annotation to the Annotation service.
The annotation service sends back a short URI for the annotation tat can be shared by users.,[object Object]
Can view the annotation  in any browserBy  dereferencing the bit.ly URI.
On The Server … Different types of resources or URIs are associated with every annotation.  ,[object Object]
The Annotation Body:
Link to other URI/URIs from different website.
User annotations  [text, drawings, etc..]The server sends all the related resources to the [Archiving service ] . It creates separate memento for every resource.  URI-A, URI-T, URI-C     URI-M1, URI-M2, URI,M2
Relations Between Resources Annotation SVG File  http://128.82.5.41:8080/SVGs/image276.svg SVG Archived http://www.webcitation.org/5upcCpZRV Target Archived http://www.webcitation.org/5uAxY6YIO Target Resource http://businessinsider.com/image/chart1.gif Body Archived http://www.webcitation.org/7oKrI2DMK Annotation Body http://128.82.5.41:8080/SVGs/image276.svg#Ann All resources are archived  ReM keeps track of them ALL ReM http://128.82.5.41:8080/Res/276.atom
Resource Map ,[object Object],<?xml version="1.0" encoding="utf-8"?> <entry xmlns=http://www.w3.org/2005/Atom xmlns:oreatom="http://www.openarchives.org/ore/atom/" xmlns:oac="http://www.openannotation.org/ns/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:ore="http://www.openarchives.org/ore/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:grddl="http://www.w3.org/2003/g/data-view#" grddl:transformation="http://www.openarchives.org/ore/atom/atom-grddl.xsl">
<link rel="alternate" type="text/html" href="http://128.82.5.41:8080/cgi-bin/retrieve.py?svg=314"/>	 <!-- Resource Map Metadata -->  <link rel="self" type="application/atom+xml" href="http://128.82.5.41:8080/Res/314.atom"/>  <link rel="http://www.openarchives.org/ore/terms/describes" href="http://128.82.5.41:8080/aggregates/314"/>  <id>http://128.82.5.41/314</id> <author> <name>Mr. John Smith </name></author> <updated>2011-01-10T04:46:10-00:00</updated> <title>Library of Congress</title>  <published>2011-01-10T04:46:10-00:00</published>
<!-- Aggregated Resources -->  <link rel="http://www.openarchives.org/ore/terms/aggregates"  href="http://robertarood.files.wordpress.com/2008/07/library-of-congress-2.jpg"  title="The original Image -source"  type="image/gif" />  <link rel="http://www.openarchives.org/ore/terms/aggregates"  href="http://128.82.5.41:8080/SVGs/image314.svg"  title="The SVG annotation"  type="image/svg+xml" />  <link rel="http://www.openarchives.org/ore/terms/aggregates"  href="http://www.webcitation.org/5vd5SSILe"  title="Archived Resource Image"  type="text/html" /> <link rel="http://www.openarchives.org/ore/terms/aggregates"  href="http://www.webcitation.org/5vd5SVT9v"  title="Archived SVG Annotation "  type="text/html" hreflang="en"/>
<oreatom:triples> 	<oac:Annotationrdf:about=‘'http://128.82.5.41:8080/SVGs/image314.svg#Ann'> 	<oac:hasbodyrdf:resource='http://128.82.5.41:8080/SVGs/image314.svg#body'/> 	<oac:hasTargetrdf:resource='http://robertarood.files.wordpress.com/2008/07/library-of-congress-2.jpg'/> 	<oac:hasTargetContext>   	<oac:TargetContext> 	<oac:contextAboutrdf:resource='http://robertarood.files.wordpress.com/2008/07/library-of-congress-2.jpg'/> 	<oac:when>2011-01-10T04:46:10-00:00</oac:when> 	<dc:type>image/gif</dc:type> 	</oac:TargetContext> 	</oac:hasTargetContext> 	<rdf:typerdf:resource='http://www.w3.org/2000/10/annotation-ns#Annotation'/> 	</oac:Annotation> </oreatom:triples> </entry>

Weitere ähnliche Inhalte

Ähnlich wie Persistent public annotation

HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs Silverlight
Matt Casto
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
Mirza Asif
 
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
Stephan Hochdörfer
 
Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12
Stephan Hochdörfer
 

Ähnlich wie Persistent public annotation (20)

Building Web Hack Interfaces
Building Web Hack InterfacesBuilding Web Hack Interfaces
Building Web Hack Interfaces
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
 
Web Apps
Web AppsWeb Apps
Web Apps
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Html5
Html5Html5
Html5
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
 
Smwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawikiSmwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawiki
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Html5
Html5Html5
Html5
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs Silverlight
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of Web
 
Facets of applied smw
Facets of applied smwFacets of applied smw
Facets of applied smw
 
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
MSDN - Converting an existing ASP.NET application to Windows Azure
MSDN - Converting an existing ASP.NET application to Windows AzureMSDN - Converting an existing ASP.NET application to Windows Azure
MSDN - Converting an existing ASP.NET application to Windows Azure
 
Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12Offline strategies for HTML5 web applications - IPC12
Offline strategies for HTML5 web applications - IPC12
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

Persistent public annotation

  • 1. Building an Open and Persistent Annotating System Abdulla Alasaadi Michael L. Nelson Computer Science Department Old Dominion University
  • 2. Introduction Annotation is a regular activity practiced by scholars while reading [books or articles] [Webpages] Webpage, Image, Text, Video, etc…
  • 4. Web Annotation Web Annotation can be used by scholars or web-users to share information about certain resources or topics. Existing Annotation systems: Need Client side script to create and view the annotations. The Annotea LEMO
  • 5. Time Time of the annotation: Resources may: Move [location] Change [updated] Disappear
  • 6. Annotation Open and Independent The focus on sharing annotations. Persistent Readable at anytime. Archived [Targets and Annotation body]
  • 7. Resources Archiving What if the Resource doesn’t have a memento?! We will not be able to view the annotation when the original resource move. Push all related resources to the Archive . In this case, we make sure that, all resources are archived and persistent.
  • 10. * Annotation Body can have more than one media-type.
  • 11. Media types Annotate by image Annotate by video Annotate by Text
  • 12. Open and Independent The annotation should be retrieved by the browser without the help of any extra plugin or adds-on. SVG [Scalable Vector Graphs] used to represent the annotations. SVG is a Text-based Markup language written in XML Supported in [Firefox, IE9, Chrome ,Safari]
  • 13. Scalable Vector Graphs [SVG]: Searchable: Google started indexing the SVG content on August 31st, 2010. SVG file can contain Audio, Video, and image tags. Image tag is supported by all browsers Audio and video tags are supported by SVG readers but not browsers yet. Promises that they will be supported in future updates. SVG video tags can be rendered to flash in the server side in order to overcome the lack of support. Supports Scripting (JavaScript).
  • 14. SVG Example <svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <g id= “Target”> <image x="128" y="77.00001" width="402.99999" height="250.99999" id="svg_1" xlink:href="http://www.theanimalfiles.com/images/african_elephant_range.jpg"/> </g> <g id=“Body”> <rectfill="#2eff00" stroke-width="2" x="237" y="144" width="166" height="45" id="svg_2" opacity="0.25" fill-opacity="0.6" stroke="#a01111"/> <text x="172" y="210" fill="black" font-weight="bold">SavanaElephents live here</text> <image x="264" y="207.5" width="99" height="90" id="svg_3" opacity="0.7" xlink:href="http://www.theanimalfiles.com/images/african_elephant_2.jpg"/> </g> </svg>
  • 15.
  • 16. Can be rendered in flash
  • 17.
  • 18. The plugin sends the annotation to the Annotation service.
  • 19.
  • 20. Can view the annotation in any browserBy dereferencing the bit.ly URI.
  • 21.
  • 23. Link to other URI/URIs from different website.
  • 24. User annotations [text, drawings, etc..]The server sends all the related resources to the [Archiving service ] . It creates separate memento for every resource. URI-A, URI-T, URI-C  URI-M1, URI-M2, URI,M2
  • 25. Relations Between Resources Annotation SVG File http://128.82.5.41:8080/SVGs/image276.svg SVG Archived http://www.webcitation.org/5upcCpZRV Target Archived http://www.webcitation.org/5uAxY6YIO Target Resource http://businessinsider.com/image/chart1.gif Body Archived http://www.webcitation.org/7oKrI2DMK Annotation Body http://128.82.5.41:8080/SVGs/image276.svg#Ann All resources are archived ReM keeps track of them ALL ReM http://128.82.5.41:8080/Res/276.atom
  • 26.
  • 27. <link rel="alternate" type="text/html" href="http://128.82.5.41:8080/cgi-bin/retrieve.py?svg=314"/> <!-- Resource Map Metadata --> <link rel="self" type="application/atom+xml" href="http://128.82.5.41:8080/Res/314.atom"/> <link rel="http://www.openarchives.org/ore/terms/describes" href="http://128.82.5.41:8080/aggregates/314"/> <id>http://128.82.5.41/314</id> <author> <name>Mr. John Smith </name></author> <updated>2011-01-10T04:46:10-00:00</updated> <title>Library of Congress</title> <published>2011-01-10T04:46:10-00:00</published>
  • 28. <!-- Aggregated Resources --> <link rel="http://www.openarchives.org/ore/terms/aggregates" href="http://robertarood.files.wordpress.com/2008/07/library-of-congress-2.jpg" title="The original Image -source" type="image/gif" /> <link rel="http://www.openarchives.org/ore/terms/aggregates" href="http://128.82.5.41:8080/SVGs/image314.svg" title="The SVG annotation" type="image/svg+xml" /> <link rel="http://www.openarchives.org/ore/terms/aggregates" href="http://www.webcitation.org/5vd5SSILe" title="Archived Resource Image" type="text/html" /> <link rel="http://www.openarchives.org/ore/terms/aggregates" href="http://www.webcitation.org/5vd5SVT9v" title="Archived SVG Annotation " type="text/html" hreflang="en"/>
  • 29. <oreatom:triples> <oac:Annotationrdf:about=‘'http://128.82.5.41:8080/SVGs/image314.svg#Ann'> <oac:hasbodyrdf:resource='http://128.82.5.41:8080/SVGs/image314.svg#body'/> <oac:hasTargetrdf:resource='http://robertarood.files.wordpress.com/2008/07/library-of-congress-2.jpg'/> <oac:hasTargetContext> <oac:TargetContext> <oac:contextAboutrdf:resource='http://robertarood.files.wordpress.com/2008/07/library-of-congress-2.jpg'/> <oac:when>2011-01-10T04:46:10-00:00</oac:when> <dc:type>image/gif</dc:type> </oac:TargetContext> </oac:hasTargetContext> <rdf:typerdf:resource='http://www.w3.org/2000/10/annotation-ns#Annotation'/> </oac:Annotation> </oreatom:triples> </entry>
  • 30. Link Header Link: <URI-A>; rel =“http://www.openannotation.org/ns/hasBody";<URI-C>, <URI-A>; rel =“ http://www.openannotation.org/ns/hasTarget"; anchor=“URI-T”, <URI-ResM>; rel="resourcemap", <URI-M1>; rel ="memento"; datetime= “Wed, 08 Dec 2010 09:00:00 GMT“; anchor=“URI-C”, <URI-M2>; rel ="memento"; datetime= “Wed, 08 Dec 2010 09:00:00 GMT“; anchor=“URI-T” <URI-A> : Annotation <URI-C> : Annotation Body <URI-T> : Target <URI-ResM> : Resource Map <URI-M1> : Memento of URI-C <URI-M2> : Memento of URI-T
  • 31. Link Header Example Example: http://128.82.5.41:8080/cgi-bin/retrieve.py?svg=333, [http://bit.ly/gGhbpu ] % curl -I http://128.82.5.41:8080/cgi-bin/retrieve.py?svg=333 HTTP/1.1 200 OK Date: Thu, 20 Jan 2011 14:15:36 GMT Server: Apache/2.2.17 (Win32) PHP/5.3.3 link: <http://128.82.5.41:8080/SVGs/image333.svg> ; rel="http://www.openannotation.org/ns/hasTarget"; anchor = "http://www.theanimalfiles.com/images/african_elephant_range.jpg", <http://128.82.5.41:8080/SVGs/image333.svg> ; rel="http://www.openannotation.org/ns/hasBody"; anchor = "http://128.82.5.41:8080/SVGs/image333.svg#body", <http://128.82.5.41:8080/Res/333.atom> ; rel="resourcemap", <http://www.webcitation.org/5vsZjkHN8>; rel ="memento"; datetime= "Thu, 20 Jan 2011 14:15:36 GMT", <http://www.webcitation.org/5vsZjnwrV>; rel ="memento"; datetime= "Thu, 20 Jan 2011 14:15:36 GMT" Content-Type: text/html
  • 32. THE Application Request http://bit.ly/i2AfwN/ http://www.webcitation.org
  • 33. Retrieve The Annotation http://bit.ly/i2AfwN/
  • 35. Conclusion Web Archives helped in solving the issue of keeping the annotation persistent over time, and the use of the SVG technology helped in keeping the annotation readable in any browser without any need to install extra plugins.