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…

3. Annotation

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.

8. Uniform Time Annotations

9. 2010-12-20T04:46:10-00:00 Uniform Time Annotations

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>

16. Can be rendered in flash

18. The plugin sends the annotation to the Annotation service.

20. Can view the annotation in any browserBy dereferencing the bit.ly URI.

22. The Annotation Body:

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

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/

34. Example: http://bit.ly/hekOCW/

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.