Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Persistent public annotation


Published on

Published in: Technology, Art & Photos
  • Login to see the comments

Persistent public annotation

  1. 1. Building an Open and Persistent Annotating System<br />Abdulla Alasaadi Michael L. Nelson<br />Computer Science Department<br />Old Dominion University<br />
  2. 2. Introduction<br />Annotation is a regular activity practiced by scholars while reading [books or articles] [Webpages]<br />Webpage, Image, Text, Video, etc… <br />
  3. 3. Annotation<br />
  4. 4. Web Annotation<br />Web Annotation can be used by scholars or web-users to share information about certain resources or topics.<br />Existing Annotation systems:<br />Need Client side script to create and view the annotations.<br />The Annotea<br />LEMO<br />
  5. 5. Time<br />Time of the annotation:<br />Resources may:<br />Move [location]<br />Change [updated] <br />Disappear <br />
  6. 6. Annotation<br />Open and Independent <br /> The focus on sharing annotations.<br /> Persistent <br /> Readable at anytime.<br /> Archived [Targets and Annotation body] <br />
  7. 7. Resources Archiving<br />What if the Resource doesn’t have a memento?!<br />We will not be able to view the annotation when the original resource move. <br />Push all related resources to the Archive .<br />In this case, we make sure that, all resources are archived and persistent.<br />
  8. 8.  Uniform Time Annotations<br />
  9. 9. 2010-12-20T04:46:10-00:00<br /> Uniform Time Annotations<br />
  10. 10. * Annotation Body can have more than one media-type.<br />
  11. 11. Media types<br />Annotate by image<br />Annotate by video<br />Annotate by Text<br />
  12. 12. Open and Independent <br />The annotation should be retrieved by the browser without the help of any extra plugin or adds-on.<br />SVG [Scalable Vector Graphs] used to represent the annotations. <br />SVG is a Text-based Markup language written in XML<br />Supported in [Firefox, IE9, Chrome ,Safari]<br />
  13. 13. Scalable Vector Graphs [SVG]: <br />Searchable:<br />Google started indexing the SVG content on August 31st, 2010.<br />SVG file can contain Audio, Video, and image tags.<br />Image tag is supported by all browsers<br />Audio and video tags are supported by SVG readers but not browsers yet. Promises that they will be supported in future updates. <br />SVG video tags can be rendered to flash in the server side in order to overcome the lack of support.<br />Supports Scripting (JavaScript).<br />
  14. 14. SVG Example<br /><svg width="640" height="480" xmlns:xlink="" xmlns=""><br /> <g id= “Target”><br /><image x="128" y="77.00001" width="402.99999" height="250.99999" id="svg_1" xlink:href=""/><br /></g><br /><g id=“Body”><br /> <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"/><br /> <text x="172" y="210" fill="black" font-weight="bold">SavanaElephents live here</text><br /> <image x="264" y="207.5" width="99" height="90" id="svg_3" opacity="0.7" xlink:href=""/><br /> </g><br /></svg><br />
  15. 15. Cont. SVG Examples<br />Video / Audio tags :<br /><g id= “AnnBody”><br /> <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"><br /></g><br /><ul><li>Not supported in browsers
  16. 16. Can be rendered in flash
  17. 17. Example:</li></li></ul><li>SVG-Edit [modified] Annotation Tool:<br /><ul><li>Users can use the SVG-Edit [modified version] to create the SVG annotation.
  18. 18. The plugin sends the annotation to the Annotation service.
  19. 19. The annotation service sends back a short URI for the annotation tat can be shared by users.</li></li></ul><li>Annotation service sends back the<br /> URI for the annotation.<br /><br /><ul><li>User can share the URI in his blog.
  20. 20. Can view the annotation in any browser</li></ul>By dereferencing the URI.<br />
  21. 21. On The Server …<br />Different types of resources or URIs are associated with every annotation. <br /><ul><li>The target resource [URI-T] [may contain more than one target]
  22. 22. The Annotation Body:
  23. 23. Link to other URI/URIs from different website.
  24. 24. User annotations [text, drawings, etc..]</li></ul>The server sends all the related resources to the [Archiving service ] .<br />It creates separate memento for every resource. <br />URI-A, URI-T, URI-C  URI-M1, URI-M2, URI,M2<br />
  25. 25. Relations Between Resources<br />Annotation SVG File <br /><br />SVG Archived<br /><br />Target Archived<br /><br />Target Resource<br /><br />Body Archived<br /><br />Annotation Body<br /><br />All resources are archived <br />ReM keeps track of them ALL<br />ReM<br /><br />
  26. 26. Resource Map<br /><ul><li>Resource Map for every annotation.</li></ul><?xml version="1.0" encoding="utf-8"?><br /><entry xmlns=<br />xmlns:oreatom=""<br />xmlns:oac=""<br />xmlns:dc=""<br />xmlns:dcterms=""<br />xmlns:rdf=""<br />xmlns:rdfs=""<br />xmlns:ore=""<br />xmlns:foaf=""<br />xmlns:grddl=""<br />grddl:transformation=""><br />
  27. 27. <link rel="alternate" type="text/html" href=""/> <br /><!-- Resource Map Metadata --> <br /><link rel="self" type="application/atom+xml" href=""/> <br /><link rel="" href=""/> <br /><id></id><br /><author> <name>Mr. John Smith </name></author><br /><updated>2011-01-10T04:46:10-00:00</updated><br /><title>Library of Congress</title> <br /><published>2011-01-10T04:46:10-00:00</published> <br />
  28. 28. <!-- Aggregated Resources --> <br /><link rel="" href="" title="The original Image -source" type="image/gif" /> <br /><link rel="" href="" title="The SVG annotation" type="image/svg+xml" /> <br /><link rel="" href="" title="Archived Resource Image" type="text/html" /><br /><link rel="" href="" title="Archived SVG Annotation " type="text/html" hreflang="en"/><br />
  29. 29. <oreatom:triples><br /> <oac:Annotationrdf:about=‘''><br /> <oac:hasbodyrdf:resource=''/><br /> <oac:hasTargetrdf:resource=''/><br /> <oac:hasTargetContext><br /> <oac:TargetContext><br /> <oac:contextAboutrdf:resource=''/><br /> <oac:when>2011-01-10T04:46:10-00:00</oac:when><br /> <dc:type>image/gif</dc:type><br /> </oac:TargetContext><br /> </oac:hasTargetContext><br /> <rdf:typerdf:resource=''/><br /> </oac:Annotation><br /></oreatom:triples><br /></entry><br />
  30. 30. Link Header<br />Link:<br /><URI-A>; rel =“";<URI-C>,<br /><URI-A>; rel =“"; anchor=“URI-T”, <br /><URI-ResM>; rel="resourcemap", <br /><URI-M1>; rel ="memento"; datetime= “Wed, 08 Dec 2010 09:00:00 GMT“; anchor=“URI-C”,<br /><URI-M2>; rel ="memento"; datetime= “Wed, 08 Dec 2010 09:00:00 GMT“; anchor=“URI-T”<br /><URI-A> : Annotation<br /><URI-C> : Annotation Body<br /><URI-T> : Target<br /><URI-ResM> : Resource Map<br /><URI-M1> : Memento of URI-C<br /><URI-M2> : Memento of URI-T<br />
  31. 31. Link Header Example<br />Example:, [ ]<br />% curl -I<br />HTTP/1.1 200 OK<br />Date: Thu, 20 Jan 2011 14:15:36 GMT<br />Server: Apache/2.2.17 (Win32) PHP/5.3.3<br />link: <> ; rel=""; anchor = "", <> ; rel=""; anchor = "", <> ; rel="resourcemap", <>; rel ="memento"; datetime= "Thu, 20 Jan 2011 14:15:36 GMT", <>; rel ="memento"; datetime= "Thu, 20 Jan 2011 14:15:36 GMT"<br />Content-Type: text/html<br />
  32. 32. THE Application<br />Request<br /><br /><br />
  33. 33. Retrieve The Annotation<br /><br />
  34. 34. Example:<br /><br />
  35. 35. Conclusion <br />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.<br />