department of computer and information science national chiao tung university, hsinchu 300, taiwan,...

Department of Computer and Information Science National Chiao Tung University, Hsinchu 300, Taiwan, R.O.C

TEL: 03-5712121 Ext. 59265, 56631 FAX: 03-5721490

Web Annotation & E-Learning

Speaker: Shyan-Ming Yuan

http://dcsw3.cis.nctu.edu.tw/

CS

Distributed Computing System Laboratory

Blog vs Web Annotation In blog, an author can post article and

readers can post comments or feedbacks However, it is difficult to follow if those comments

did not include original content. In Web Annotation, those comments and

notes can be attached to the related portion.

2

CS


Introduction- example web pages Multimedia Annotation Toolbar is available at

http://dcsw3.cis.nctu.edu.tw/DCSLab/

3【 Lon 】下等人使用的武器 , 2010 年 3 月 23 日擷取無名小站 http://www.wretch.cc/blog/wretchcomic/12943608


CS


Web Annotation Service Providers Google SideWiki

Text annotation Diigo

Text annotation, social bookmarking. Flickr

Image tag(annotation) Youtube

Video sharing, video annotation

4

CS


Google Side Wiki Demo

5中央社新聞 - 台鐵也擬超商取票手續費只要 5 元 , 2010/3/21擷取自 http://tw.news.yahoo.com/article/url/d/a/100321/5/22fqr.html

CS


Diigo Demo

6華視新聞 - 秒殺清明節車票台鐵剉咧等 , 2010/3/21擷取自 http://tw.news.yahoo.com/article/url/d/a/100319/69/22cow.html

CS


flickr Demo

7flickr- Undervisning5 , 2010/3/21擷取自 http://www.flickr.com/photos/lizart/69648819/

CS


Youtube Demo

8Youtube 影片 - Video Tips &Tricks ep09: How to add YouTube Annotations, 2010/3/21 擷取自 http://www.youtube.com/watch?v=XAG3z4scWTw

CS


Multimedia annotation toolbar video annotation You can still add annotations even if you are

not the video owner.

9

Youtube 影片 - Video Tips &Tricks ep09: How to add YouTube Annotations, 2010/3/21 擷取自 http://annottoolbar.pixnet.net/blog/post/30710501

CS


Objectives Precise annotation for reading and sharing.

Support annotations on multimedia content such as figures and videos directly.

Support reference annotations on a web page Let web annotations saved and exchanged

efficiently on internet. Clear and simple XML document. Support share list for users and groups

10

CS


Multimedia Annotation XML DOMannotations

annotation

date typecreator

pageurl

content share list

comment position* size* highlightedText shape time

duration

annotation

start endwidth heightx y11

CS


MAXML<?xml version=”1.0” encoding=”utf-8”?><annotations>

<pageurl></pageurl> <annotation>

<creator></creator><date></date><group></group><type></type><content>

<comment></comment><position><x></x><y></y></position><size><width></width><height></height></size><highlightedText></highlightedText><timeDuration></timeDuration>

</content></annotation>

</annotations>

12

CS


MAXML example

13

<?xml version='1.0' encoding='ISO-8859-1'?><annotations></annotations>

CS


MAXML example

14【 E3 09】 12 項全能《 Wii 運動度假勝地》更精確體感遊樂趣味 , 2009 年 6 月 23 日擷取自 http://gnn.gamer.com.tw/2/37262.html

<?xml version='1.0' encoding='ISO-8859-1'?><annotations> <pageurl>http://gnn.gamer.com.tw/2/37262.html</pageurl> <annotation>

<creator>newuser</creator><date>2009-06-24</date><sharelist>public</sharelist><type>text</type><content>

<comment> 如果能做到一定很棒 </comment><position>P,0</position><size>30</size><highlightedText>Wii 動態強化感測器號稱能達到 1:1 完全對應的精細操控 </highlightedText>

</content> </annotation></annotations>

CS


MAXML example


<?xml version='1.0' encoding='ISO-8859-1'?><annotations> <pageurl>http://gnn.gamer.com.tw/2/37262.html</pageurl> <annotation>

… </annotation> <annotation>

<creator>newuser</creator> <date>2009-06-24</date> <sharelist>private</sharelist> <type>image</type> <content> <comment>Resort就是指度假勝地 </comment> <position>http://pic.bahamut.com.tw/B/2KU/64/0000210364.JPG

<x>772</x> <y>340</y></position><size><width>153</width><height>54</height></size><shape>1</shape>

CS


MAXML example


<?xml version='1.0' encoding='ISO-8859-1'?><annotations> <pageurl>http://gnn.gamer.com.tw/2/37262.html</pageurl> <annotation>…</annotation> <annotation>…</annotation> <annotation>

<creator>newuser</creator> <date>2009-06-24</date> <sharelist>public</sharelist> <type>video</type> <content>

<comment> 這就是 Wii MotionPlus</comment> <position> http://youtube.com/get_video?video_id=7N4s5NzgrJo <x>201</x> <y>245</y> </position> <size> <width>78</width> <height>70</height> </size> <shape>1</shape> <timeDuration> <start>23</start> <end>28</end> </timeDuration>

CS


MAXML example


<?xml version='1.0' encoding='ISO-8859-1'?><annotations> <pageurl>http://gnn.gamer.com.tw/2/37262.html</pageurl> <annotation> … </annotation> <annotation>



<creator>newuser</creator> <date>2009-06-24</date> <sharelist>private</sharelist> <type>href</type> <content>

<comment>http://zh.wikipedia.org/wiki/%E5%8A%8D%E9%81%93</comment><position>P,0</position><size>2</size><highlightedText> 劍道 </highlightedText>

CS


Reference System architecture

18

Doc

imgtext video Web Site

Annotation Server

Request

Authentication

OpenID Provider (O.P)

MAXML

Login

Require login

Login response

Authentication Response

videoimgtext

Web Browser

Annotated Doc

Browser plug-in

CS


Browser Plug-in

Used programming language Javascript, actionscript

XML Processor Submit and query annotations

Browser plug-in

XMLProcessor

Browser toolbar

Annotator

Renderer

19

CS


Browser Plug-in Browser toolbar

User interface of plug-in Annotator

Add text annotation, image annotation and reference link directly

Flash video annotator Add video annotation

Renderer Render annotations which queried by XML

processor

20

CS


Annotation Server

Web Server Apache with PHP extension

Annotation DB MySQL server

Annotation Server

AnnotationDB

Web Server

XML Processor

Annotation

21

OpenIDAuthenticator

CS


Annotation Server XML Processor

Processes add and query annotations request from browser plug-in.

OpenID Authenticator Open source library with little fix. Process OpenID login request from browser plug-

in.

22

CS


EvaluationOur Schema MADCOW diigo Annotea Youtube

Text Yes Yes Yes Yes No

Image Yes Yes No No No

Video Yes Indirect No No Yes

Reference Annotation

Yes No No No No

Share list Yes No Yes No Yes

Annotation schema

XML-based XML-based JSON RDF Unknown

Repository Sites create their own, local file

MADCOW, local file

diigo W3C, Sites create their own, local file

Youtube

23

CS


E-learning thru Web Annotation Peer Assessments by annotation Cooperative Learning by annotation Information Problem Solving

behavior tracing Information collection – search Information processing – reading, annotation,

sharing, … …..

24

CS


Q&A Multimedia annotation toolbar is available at


25

Thank you!


CS


Reference [1] J. Kahan, M. Koivunen, E. Prud'Hommeaux, and R. Swick.

“Annotea: An Open RDF Infrastructure for Shared Web Annotations”, In Proc. WWW10 International Conference, Hong Kong, 2001.

[2] D. Yamamoto and K. Nagao. “iVAS: Web-based video annotation system and its applications”, In Proceedings of the 3rd International Semantic Web Conference, Demonstration Session, 2004.

[3] P. Bottoni, R. Civica, S. Levialdi, L. Orso, E. Panizzi, and R. Trinchese. “MADCOW: a Multimedia Digital Annotation System”, In Proc. Working Conference on Advanced Visual Interfaces, 2004.

26

CS


Demo Demo

27

CS


Appendix

28

Rank Domain name ARO

1 yahoo.com.tw 1,263,879

2 wretch.cc 534,216

3 hinet.net 65,428

4 pchome.com.tw 64,659

5 live.com 51,874

6 ruten.com.tw 50,970

7 google.com 48,558

8 msn.com.tw 46,355

9 yam.com 42,332

10 youtube.com 41,955

Table 1 ARO top 10 of Taiwan web sites 2009 February, retrieved from INSIGHTXPLORER

CS


Annotation use [7] I. A. Ovsiannikov, M. A. Arbib, T. H.

Mcneill. “Annotation Technology”, Int. J. Human-Computer Studies, 50, 329-362, 1999.

29

CS


annotations

annotation

date typecreator

pageurl

content share list

comment position* size* highlightedText shape time

duration

annotation

start endwidth heightx y

30

This node might not exist

* Data in this node would be different due to the type of annotation

department of computer and information science national chiao tung university, hsinchu 300, taiwan,...

Documents

twdcslab http

netblogpost30710501

private href http

web annotations

youtube annotations

blog vs web annotation

maxml example

private image resort