SlideShare a Scribd company logo
1 of 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>

More Related Content

Similar to Persistent public annotation

Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3Gopi A
 
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 DevelopmentTilak Joshi
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup EvolvedBilly Hylton
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moiblemarkuskobler
 
Smwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawikiSmwcon spring2011 tutorial applied semantic mediawiki
Smwcon spring2011 tutorial applied semantic mediawikiJesse Wang
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
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 DesignDave Olsen
 
HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs SilverlightMatt Casto
 
HTML5 - Future of Web
HTML5 - Future of WebHTML5 - Future of Web
HTML5 - Future of WebMirza Asif
 
Facets of applied smw
Facets of applied smwFacets of applied smw
Facets of applied smwJesse Wang
 
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 - pfCongres2012Stephan Hochdörfer
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
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 AzureMaarten Balliauw
 
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 - IPC12Stephan Hochdörfer
 

Similar to 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
 

Recently uploaded

2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 

Recently uploaded (20)

2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 

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.