一個基於XML的WEB多媒體註解機制

國

立

交

通

大

學

資訊科學與工程研究所

碩

士

論

文

一個基於 XML 的 WEB 多媒體註解機制

An XML-based Multimedia Annotation schema for World Wide Web

研 究 生：羅國亨

指導教授：袁賢銘 教授

一個基於 XML 的 WEB 多媒體註解機制

An XML-based Multimedia Annotation Schema for World Wide Web

研 究 生：羅國亨 Student：Guo-Heng Luo

指導教授：袁賢銘 Advisor：Shyan-Ming Yuan

國 立 交 通 大 學

資 訊 科 學 系

碩 士 論 文

A Thesis

Submitted to Institute of Computer Science and Engineering College of Computer Science

National Chiao Tung University in partial Fulfillment of the Requirements

for the Degree of Master

in

Computer and Information Science

July 2009

Hsinchu, Taiwan, Republic of China

中華民國九十八年七月

一個基於 XML 的 WEB 多媒體註解機制

研究生：羅國亨 指導教授：袁賢銘 國立交通大學資訊科學與工程研究所 摘要 現代人對於資訊的需求與處理已是相當鉅量，面對大量的資訊我們需要去理 解與歸納重點，因此對於網路上的資訊要進行處理與分享時，我們需要更有效率 的處理方式。如同我們傳統的閱讀習慣，我們很自然的會在書上劃出重點，並寫 下自己的筆記，而現今我們的閱讀行為已經慢慢的轉移到在網站上面進行，許多 的使用者需要適應在瀏覽器上進行閱讀，比起傳統的閱讀較不方便。因此近年來 開始有網站服務提供者開發讓使用者能在網頁上做標示與駐解文字的功能，並能 夠分享給其他使用者閱讀有畫記過的網頁，對於資訊的分享更精確有效率。然而 這些註解是被存放在網站服務提供者的儲存空間內，對於這些註解在網路上的流 通與使用將受限於網站服務提供者。 本論文提出了一個基於 XML 的 WEB 多媒體註解機制，除支援對多煤體內 容直接加上註解外，使用 XML 標準格式提升 WEB 註解的可讀性與流通性，方 便於伺服端與客戶端及伺服端與伺服端間的註解傳送與處理。此外使用 XML 標 準格式讓這些註解能被各種程式語言進行處理，以讓開發者創造更多的應用方 式。

An XML-based Multimedia Annotation Schema for World Wide

Web

Student：Guo-Heng Luo Advisor：Shyan-Ming Yuan

Institute of Computer Science and Engineering

National Chiao Tung University

Abstract

Since people need to read and process massive information nowadays, they need

to realize and conclude the information very quickly. When people read a book, they

would highlight some text or add annotations in order to increase the reading

efficiency. However, today our reading is going to happen on web pages, people must

adapt to read on web pages. Because the inconvenient of reading on web browser, in

these years web service provider has develop a way to add annotations on web pages.

As web annotation service providers keep the users’ annotations on their own space,

the annotations’ application and exchange will be restricted.

The thesis attempts to a XML-based multimedia annotation schema for World

Wide Web. Use the XML standard format to increase the web annotations’ readability

and exchangeability. The use of XML standard format let the annotations be

processed by many programming languages. Moreover, it is convenient to be

致

謝

首先要感謝我的老師袁賢銘教授，在研究期間不斷的給予我建議以及方向， 指導我讓我的研究順利的完成。並感謝實驗室的學長們葉秉哲、林家鋒，在參與 計劃時，能夠給予經驗上的分享，以及高永威、宋牧奇、謝明志學長們，在我研 究有疑問與困難時，給予我寶貴的建議。也感謝實驗室的各位同學黎光明、洪偉 翔、周東興、王志華、鄭婷文、葉秀邦、徐俊傑，在修課期間與研究期間能夠一 起討論與給予意見。還有辛苦養育我的爸爸和媽媽，讓我能一路順利的完成學 業，以及我的哥哥和姊姊，能與不成熟的我分享你們的經驗，謝謝你們大家。

目

錄

摘要

………i

Abstract ………ii

致謝

………iii

目錄

………iv

表目錄

………vi

圖目錄

………vii

第一章

緒論………1

1.1

序言………1

1.2

研究動機………1

1.3

研究目的………2

1.4

論文架構………3

第二章

研究背景與文獻探討………4

2.1

研究背景………4

2.1.1

註解………4

2.1.2

多媒體註解………4

2.1.3

目前常見的網站型態………5

2.1.4 XML………5

2.1.5

小結………6

2.2

文獻探討………6

2.2.1

網頁註解系統基本分類………6

2.2.2

網頁文字註解文獻探討………7

2.2.3

圖片註解文獻探討………7

2.2.4

影片註解文獻探討………8

2.2.5

參考連結文獻探討………8

2.2.6

網頁多媒體註解文獻探討………8

第三章

Multimedia Annotation eXtensible Markup Language………9

3.1

網頁註解的需求………9

3.2

多媒體網頁註解所需元素分析………16

3.3

Multimedia Annotation XML………18

第四章

參考系統架構與實作………21

4.1

參考系統架構………21

4.1.1

參考系統架構一………21

4.1.2

參考系統架構二………22

4.1.3

參考系統架構三………23

4.2

參考系統架構三實作細節………24

4.2.1

註解資料庫………24

4.2.2

網頁伺服器………24

4.3

客戶端瀏覽器插件………25

4.3.1

Firefox 瀏覽器插件………25

4.3.2 XML

Processor………26

4.3.3 Annotator………26

4.3.4

Flash 影片註解播放器………26

4.3.5 Renderer………27

4.3.6

瀏覽器工具列………27

4.3.7

註解交換流程………28

4.3.8

使用 OpenID 登入流程………29

第五章

功能展示………30

5.1

Menu(工具列選單)………31

5.1.1

登入………31

5.1.2

使用 OpenID 登入………32

5.1.3

註冊………33

5.1.4

手動取回所有使用者具有存取權限的註解………33

5.2 Annotate

Text………34

5.3 Annotate

Image………35

5.4 Annotate

Video………36

5.5 Reference

Link………38

第六章

研究結論………39

6.1

評估………39

6.2

研究結論………40

6.3

未來研究建議………41

參考文獻

………42

附錄一

範例 A 部落格與註解圖片………46

附錄二

範例 A 之 MAXML………49

表目錄

表 2-1

台灣總體網站 ARO 排名 2009 年 2 月[33]………5

表 6-1

示範網頁註解系統與其他網頁註解系統比較表…………39

表 6-2

客戶端硬體設置……….40

表 6-3

客戶端文字與圖片註解數量與呈現所需時間關係表…….40

圖目錄

圖 2-1 XML 文件範例………6

圖 3-1

維基百科-核分裂[37]………9

圖 3-2

網頁上需要註解的區域[37]………10

圖 3-3

維基百科-核分裂網頁中的文字區域[37]………10

圖 3-4

維 基 百 科 - 核 分 裂 網 頁 之 文 字 區 域 中 需 要 註 解 的 部 分

[37]………11

圖 3-5

維 基 百 科 - 核 分 裂 網 頁 之 文 字 區 域 中 被 註 解 的 部 分

[37]………11

圖 3-6

維基百科-核分裂網頁之文字區域中的註解及註解內容

[37] ………12

圖 3-7

維基百科-核分裂網頁之文字區域中需要參考連結的部分

[37] ………12

圖 3-8

維基百科-核分裂網頁之文字區域加上參考連結的樣式

[37] ………13

圖 3-9

維基百科-核分裂網頁之文字區域加上參考連結的樣式內容

[37] ………13

圖 3-10

維基百科-核分裂網頁中的圖片部分[37]………14

圖 3-11

維 基 百 科 - 核 分 裂 網 頁 中 的 圖 片 中 需 要 註 解 的 部 分

[37]………14

圖 3-12

圖 片 註 解 呈 現 於 維 基 百 科 - 核 分 裂 網 頁 中 的 圖 片 樣 式

[37]………15

圖 3-13

維基百科-核分裂網頁中的圖片註解與註解內容[37]……15

圖 3-14

維基百科-核分裂網頁被註解後呈現的樣式[37]…………16

圖 3-15

MAXML DOM………18

圖 3-16

MAXML………19

圖 4-1

參考系統架構一………21

圖 4-2

參考系統架構二………22

圖 4-3

參考系統架構三………23

圖 4-4

註解伺服器………24

圖 4-5

瀏覽器插件………25

圖 4-6

增加註解流程圖………28

圖 4-7

查詢註解流程圖………28

圖 4-8

使用 OpenID 登入流程圖………29

圖 5-1

瀏覽器工具列………30

圖 5-2

工具列選單………31

圖 5-3

使用者登入介面一………31

圖 5-4

使用者登入介面二………32

圖 5-5

雅虎 OpenID 登入頁面………32

圖 5-6

使用者註冊介面………33

圖 5-7

文字註解輸入區塊………34

圖 5-8

文字註解………35

圖 5-9

圖片註解輸入區塊………35

圖 5-10

圖片註解………36

圖 5-11

影片註解功能選單………36

圖 5-12 Flash 註解與播放器………37

圖 5-13

新增影片註解………37

圖 5-14

參考連結輸入區塊………38

圖 5-15

參考連結………38

圖 A-1

範例部落格………46

圖 A-2

加上註解的範例部落格………47

圖 A-3

範例部落格的影片………47

圖 A-4

加上註解後範例部落格的影片………48

第一章 緒論

1.1 序言

人類對於知識的需求量是非常龐大的，為了傳播知識，人類發明了許多媒 體，這些媒體呈現了文字、聲音以及影像，日以繼夜的，出版商持續的發行報紙、 雜誌、期刊、CD、DVD 等等媒體，然而這些媒體的知識內容，經由讀者的閱讀 與觀賞，是否能夠完全的傳遞作者想要表達的意思、讀者是否具有足夠的背景知 識能夠理解內容，都是知識是否能夠順利傳遞的重要關鍵。由於我們通常不會或 是無法直接與作者聯繫，當對於作者作品的內容不了解時，以紙本文章來說，我 們能夠在旁邊做記號，查找其他文章內容，待理解之後，以自己的知識來寫下額 外的文字來輔助說明文章內容，日後再次閱讀時，就能夠容易的理解，而這樣額 外的文字，就是一種註解。 隨著網路時代的來臨，許多的資料被網站開發者以網頁的方式呈現，而網頁 隨後被搜尋網站建立索引。而之後的使用者可以利用適當的關鍵字進行搜尋，以 找到這些資料。時至今日，網路更是發展到 Web2.0 的時代，一般的使用者也能 夠提供自己的知識放在網站上與其他使用者分享，例如維基百科能讓所有使用者 共同建立一個百科全書(http://www.wikipedia.org/)，就是因為其所有的內容都能 夠被新增與編輯。另外，隨著部落格的盛行，人們寫作發表的習慣也跟著由傳統 的書本出版社改變成在網路部落格上發表文章來與他人分享，如網路作家九把刀 的部落格(http://giddens.twbbs.org/)就是一個例子。也因此人們的閱讀習慣有轉移 到網路上進行的趨勢。 我們傳統的閱讀習慣，會在書上劃下重點，並寫下自己的註解，而現今轉移 到在網站上面進行閱讀，許多的使用者需要適應以瀏覽器進行閱讀，而這樣的方 式比起傳統在紙本上進行閱讀時，無法直接在網頁上增加自己的註解，在我們想 要寫下自己的心得或是想要標示出重點，都沒辦法做到。若是有方便且容易在網 頁內容上加上註解的方式，會使得在網路上的閱讀更為方便有效率。因此，近年 來開始出現了網頁註解服務提供者提供這樣的服務。

1.2 研究動機

網頁註解服務提供者如 diigo(http://www.diigo.com/)、SharedCopy (http://sharedcopy.com/)以及 Fleck(http://fleck.com/)皆開發出讓使用者能在網頁上 做標示與對文字駐解的功能，並能夠讓這些註解過的網頁分享給其他使用者閱 讀，對於資訊的分享更精確有效率。而 youTube(http://www.youtube.com/)除了提

供讓使用者上傳影片與他人分享之外，近來更新增了對影片加註解的功能。 然而這些註解是被存放在這些網頁註解服務提供者的儲存空間內，各服務提 供者的儲存與流通方式不一，沒有相同的儲存與流通機制，使得這些註解資料無 法互相流通。使用者想要存取或管理這些註解，也必須透過這些註解服務提供者 來進行。 此外頁面的內容，除了文字外，尚有圖片與影片，對於這些多媒體內容，目 前的註解服務提供者尚沒有一套完整的註解機制能夠支援直接在多媒體內容上 面加上註解。 因此若能提出一套完整的 Web 多媒體註解機制，對於未來的知識分享與應 用必能開啟新的視野。隨著 Web2.0 趨勢發展，方便的流通與分享這些註解才能 讓知識的分享更加精確而有效率。

1.3 研究目的

本研究目的是提出一個易讀性高，易流通於各系統平台與程式語言的註解機 制：

(1)採用 eXtensible Markup Language(XML)

XML 易讀性佳且各程式設計語言都有能夠處理的函式庫，因此使用 XML 機制能使得各網站開發者與註解服務提供者能夠很有彈性的使用各種程式設計 語言來開發各種應用程式。[34] (2)支援對多媒體內容直接劃記並下註解 除了以文字來傳播知識以外，利用圖片與影片通常更容易讓人能夠了解作者 想要表達的意義，然而，有些圖片或影片的內容可能過於抽象，或需要背景知識 來理解，這時若有作者或使用者能夠在圖片或影片上加上註解，對於讀者來說就 更容易了解該圖片或是影片想要表達的意義。 (3)支援對內容加上參考的超連結 在閱讀文章時，常常我們會看到許多的專有名詞，這些專有名詞若使用者的 背景知識不足，便要花許多時間去找到對應的資料，並加以閱讀了解，才能夠再 繼續的閱讀文章，儘管現在已有許多的搜尋引擎，方便的讓使用者去尋找資料， 但使用者仍須要判斷該資料是否恰當合用。而網頁的設計能夠讓我們放置超連 結，連結到網頁開發者想讓讀者參考的內容，然而這些超連結都是在設計網頁內 容時，就已經訂定了，讀者在閱讀網頁時，仍舊會有參考連結不足的問題。因此， 若能支援對網頁內容加上參考的超連結，對於使用者再次觀看網頁或是分享給其 他使用者觀看時，都能夠快速的讓使用者看到更多的參考資料。 (4)支援註解的分享群組設定 知識的分享在我們生活中不斷的進行中，在使用者想把網頁分享給其他使用 者時，通常附有一些意見與想法，在使用者能對網頁增加註解後，就能夠將這些

想法直接以這些註解的形式呈現。隨著社群網站的流行，使用者間形成了許多的 群組，若註解機制能支援使用者將某個網頁的註解分享給其他幾位或是某一群組 的使用者，會使得這些註解在使用者間分享更為方便。

1.4 論文架構

本研究提出一個使用 XML 的註解文件機制，讓註解文件能在使用者與網站 間和網站與網站間有效率的交換。本論文各章簡要內容為第一章、緒論，內容包 含序言、說明本研究動機、研究目的與論文架構。第二章、研究背景與文獻探討， 介紹本研究背景外，並說明目前各文獻對於網頁註解的探討程度。第三章、 Multimedia Annotation extensible Markup Language(MAXML)，說明本研究所訂定 的註解機制。第四章、參考系統架構與實作，說明使用本研究的註解機制可參考 的系統設計架構與實作。第五章、功能展示，展示使用本研究所提出的註解機制 與參考註解系統的功能。第六章、研究結論，討論與說明本研究之結論與未來後 續研究方向。

第二章 研究背景與文獻探討

2.1 研究背景

2.1.1 註解

註解是指對現有的文件加上額外的資訊Glover [30]。在Ovsiannikov 等人[7] 的研究中將註解歸納整理出幾個類型：標記、筆記和評論，標記用來強調文件中 的某些關鍵字、重點，而筆記常放在文件中鄰近被標記的文字空白處，用來寫下 讀者的想法或心得，而在進行編輯程序時，則會在行間寫下一些評論。而 Marshall[4] 文中所述的像是筆記或一些符號的註解，則通常是讓註解者更清楚 文章的說明。 在人們長時間閱讀資料時，常會在資料上加上註解，其在學習的過程中是非 常有價值的部份[30]，Marshall [3] 對美國的大學生教科書中的註解做了研究與 分析，並訪談了幾位學生，他發現有部份的學生喜歡買有大量註解的二手教科 書。Hwang等人[31]開發了Virtual Pen System網頁註解系統，並讓學生使用這套 系統進行分組學習，經兩週的使用實驗，發現實驗組學習效果比對照組有顯著提 升。由此可見，註解應用在網頁進行學習上有相當的成效。

2.1.2 多媒體註解

多媒體是組合兩種媒體形式以上的媒體，所組合的媒體的形式有文字、聲 音、圖片、動畫、影片、等等[36]。相較於只使用單一種媒體來表達，結合多種 媒體更能夠具體的描述想要傳播的知識，例如圖片與影片通常具有具體的圖像讓 人更容易讓人能夠了解作者想要表達的意義。然而，使用在一些較艱深的知識傳 播時，卻讓讀者難以理解，其原因可能是讀者背景知識不足或是圖片或影片中所 呈現的現象讀者不清楚要專注在哪一部份。這時若有作者或使用者能夠直接在圖 片或影片上加上一些標記、符號或說明等等的註解，對於讀者來說就更容易了解 該圖片或是影片想要表達的意義。Goularte等人的研究[27]中提到關於多媒體註 解的研究大致分為兩種主要的類別：與後資料相關與豐富內容。與後資料相關的 研究[16, 19, 21]使用後資料模型是為了建立語意的結構，隨後能支援其他的動作 例如搜尋。而這一類的方法需要使用者了解語意結構的模型來下註解才能確保符 合標籤的階層架構。而豐富內容這一類的方法使用更多的多媒體元素來使原來的 多媒體內容更豐富[5, 17, 18, 20]。然而這一類的方法讓註解只侷限在豐富多媒體 內容，無法讓這些註解有更進一步的應用例如搜尋。Goularte等人的研究[27]認 為在圖片上或影片上能畫圈圈或是箭頭這類的註解對使用者比較自然，而除了能

豐富影片內容與幫助了解內容，更應該能有進一步的應用，其所提出的系統 M4Note就符合這樣的概念。

2.1.3 目前常見的網站型態

表 2-1：台灣總體網站 ARO 排名 2009 年 2 月[33] 名次 網域名稱 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

由表 2-1，台灣總體網站 Access Rating Online (ARO)[35]排名前十名主要為入 口網站、部落格、搜尋引擎、影音分享網站。其中搜尋引擎因為不包含其他網站 的內容，所以暫不探討。我們分析其他三種常見的網站類型如下 (1) 入口網站 入口網站如臺灣亞虎(http://tw.yahoo.com/)、yam(http://www.yam.com/)和 PChome(http://www.pchome.com.tw/)等，其網頁內容相當豐富，如新聞和股市 等資訊，這些內容除含有文字外，也有與內文相關之圖片。 (2) 部落格 無名小站(http://www.wretch.cc/)為目前國內最常見的部落格網站，其內容除部 落格外，也具有相簿功能以及影音功能。 (3) 影音分享 目前最廣為人知的影音分享網站 YouTube(http://www.youtube.com/)，內容主 要為影片，而有部份的文字文字評論與影片介紹。

2.1.4 XML

XML 是發展自 SGML(ISO 8879)的一個簡單有彈性的文字格式，在 1998 年 成為 World Wide Web Consortium (W3C)所推薦的標準，它被歸類為可延伸的語 言，允許使用者自行定義標籤，XML 標準本身並不訂定任何預設的標籤，所有 的標籤都由開發者自行定義。其語法規範相當嚴格，例如標籤大小寫有區別、每 個起始標籤都要有一個對應的結束標籤以及屬性的前後需要引號。XML 原始的 設計目的是為了能滿足大量電子訊息發佈的需求，用來傳輸與儲存資料，而不是 用來表現或展示資料。如今 XML 在 Web 的資料交換伴演了日漸重要的角色。[34]

<?xml version=”1.0” encoding=”utf-8”?> <person country=”Canada”> <name>John</name> <sex>Male</sex> <birthday>1980-03-20</birthday> </person> 圖 2-1 XML 文件範例 圖 2-1 是一個 XML 文件的範例，第一行是 XML 文件的宣告，第二行描述 了這份文件的根元素<person>，同時 country 是<person>的屬性，表示該位 person 來自 Canada，而根元素<person>有三個子元素：<name>、<sex>、<birthday>， 分別表述該位 person 的名子、性別與生日。

2.1.5 小結

總結2.1.1及2.1.2兩小段所述可知下註解的目的通常是使用者為了再次閱讀 資料時能夠很容易的了解內容。今日由於資料遍佈於網路上，而網頁的分享相當 的容易，但使用者將資料分享給他人時，通常是希望對方能夠閱讀網頁上使用者 想要分享的部份，並且會告訴對方自己的想法或心得，但告知對方時除了要傳遞 資料的連結外，還要描述所要討論的部份在網頁上那個地方，以及描述自己的心 得。這樣的分享動作非常的繁瑣而沒有效率，若能將這些需要討論的地方直接加 上標記與心得，再簡單的分享這份註解過的網頁，便能讓使用者精確而有效率的 討論與分享自己的心得。 目前常見的網頁中大多含有許多的文字與圖片或影片等等多媒體的內容，提 供網頁上的多媒體註解功能除了能幫助使用者更容易了解這些多媒體內容外，更 能豐富這些多媒體內容，而讓這些註解能夠被交換與簡單的存取，對於未來在註 解上的應用更為重要。

2.2 文獻探討

2.2.1 網頁註解系統基本分類

Hirotsu 等[9]將網頁註解系統架構分為 Client、Proxy 和 Server 三種 model， 分類標準是依註解存放位置與嵌入網頁在 Client、Proxy 或 Server 端而定。然而 隨著註解系統的發展，如今使用瀏覽器插件的註解系統，註解可能存放在 Client 或 Server 端，而在 Client 端將註解嵌入網頁，因此若不論註解所儲存在哪一端， 而純粹以註解在何端嵌入網頁，仍可以將網頁註解架構分為三種 model：Client、 Proxy 和 Server。

2.2.2 網頁文字註解文獻探討

Kahan 等[13]一文中明確提出一個基於 RDF 的 Web 註解標準，並描述其對 應的系統設計與通訊協定。惟其標準僅針對文字內容或是以文字對圖片加以評論 的註解，而不能直接對圖片內容加以畫記。該研究中的功能展示使用了 Amaya 這個支援 Annotea 的瀏覽器，來對網頁的文字內容進行畫記與加註解，而後儲存 於使用者本地端或是由使用者設定的註解伺服器。 Ovsiannikov等[7]的研究中實作了一個系統：Annotator，使用Proxy的註解系 統架構，在客戶端瀏覽器安裝瀏覽器插件來讓使用者使用。Schickler等[2]的 研究描述了群組分享網頁上的註解的概念，詳細的描述了基於 HTTP 通訊協定的 註解存取控制與整體系統架構。Koch 等[12]採用 Proxy 的方式，在使用者觀看網 頁前先將網頁加入 javascript 程式碼，達到讓使用者不必使用瀏覽器插件，就能 對頁面增加新的註解，而後透果對頁面 HTML 原始碼新增 DIV 標籤配合 CSS 來 顯示註解。Denoue 等[11]一文中提及使用 DOM 與 Dynamic HTML 技術的概念， 來對網頁加上註解，並展示所設計的系統：yawas，能對畫記網頁上的文字，並 新增註解。此外 LaLiberte 等[1]提出了一個基於 HTTP 且具高延展性並針對團體 與公開註解的通訊協定。Desmontils 等[24]一文提出了一個不同的註解系統架 構，DIstributed NOtation SYStem(Dinosys)使用一個 Portal 整合多個 Annotation Proxy，

將註解分散到多個伺服器上。

diigo(http://www.diigo.com/)是一個 Social Annotation 網站，提供了兩個主要 服務為註解與書籤，該網站提供了讓使用者在網頁上能對文字加上強調的背景色 與註解的服務，該網站開發了市面上兩種常見的瀏覽器工具列，在使用者安裝 後，在瀏覽一般網頁時，使用者按下工具列上的按鈕，再對網頁內的文字進行畫 記與加註解，畫記與加註解時，使用者能選擇這些畫記的存取權限為公開、私人 或自己定義的群組，而這些畫記與註解，會被存回 diigo 的伺服器，於 diigo 的 個人首頁會顯示畫記與註解的歷史記錄，並提供搜尋功能，能搜尋自己私人的或 所有 diigo 上使用者公開的註解。其註解資料在客戶端與伺服器端是採用 HttpRequest 並以 JSON 的訊息格式傳送。

2.2.3 圖片註解文獻探討

Russell等[28]一文中提出了一組系統，包含儲存圖片的資料庫及Web-based 客戶端，並提供了一個XML圖片註解格式，採用多角型的方式來定義在圖片上 被註解的區塊，因此能支援使用者對各種不同形狀的圖片內容加註解。Lober等 [10]的研究針對網頁上的解剖學圖片開發了一個圖片註解工具，由於使用java語 言開發，具有跨平台的特性。Rui等[32]研究對於圖片註解是使用自動化的方式， 藉由分析網頁內圖片鄰近區塊的文字內容選擇出適當的註解文字。 Flickr(http://www.flickr.com/)是一個網路相簿，讓使用者能儲存管理自己的相 簿，並分享給朋友，同時提供對相片畫區塊加上註解的功能。

2.2.4 影片註解文獻探討

Schroeter[22]等一文的影片註解研究主要參考 Kahan 等[13]的註解機制，以 及 MPEG-7 的註解標準，並針對 MPEG-2 Streaming 的影片，使用自行開發的軟 體，能在影片上畫出被註解的區塊，並下對應的註解，而所有對應該影片的註解 將呈現在使用者介面的註解區塊中，待使用者點擊後才繪出影片所畫記的圖形， 而註解評論在註解區塊中顯示。Bargeron 等[6]研究針對網頁內的影片設計與開 發了 Microsoft Research Annotation System(MRAS)系統，在 client 端使用 ActiveX control，增加與顯示註解在瀏覽器的另一個小視窗中，並透過 HTTP 通訊協定與 遠端的 MRAS Server 溝通，而將註解存在資料庫中，在使用者點擊註解時，會 跳到該時間區段來播放。Yamamoto 等[23]研究開發了 intelligent Video Annotation Server(iVAS)能對網頁上的影片使用一般的瀏覽器，選擇影片區段，對影片內容 下註解，並存回遠端的 XML 資料庫。

2.2.5 參考連結文獻探討

Grønbæk 等人的研究所提出的系統 Webvise[8]，可將網頁、word 和 excel 檔案插入參考連結，亦是以 Proxy 的方式來實作。Yee 的研究[14]：CritLink 採 用類似[9]的方式，將被註解的文字以特別的圖案標示出來，以超連結的形成來 呈現註解，使用一個額外的伺服器來存放註解。Davis 等人的研究[25]有註解點 的概念，隨著網頁的開發，網頁的某些部份是適合插入這些註解點的，而註解的 型式也是也連結的方式來呈現。Denoue 等[15]認為使用 annotation server 的註解 形式容易被限定，因此將 yawas 系統延伸加入了參考連結的功能。

2.2.6 網頁多媒體註解文獻探討

Bottoni 等[26]研究中實做了一套多媒體註解系統，包含了瀏覽器工具列， 以及伺服端腳本語言。於瀏覽頁面時按下工具列上的不同按鈕時，可以分別對文 字內容、圖片內容加以畫記，及影片外加上文字的註解。Bottoni等隨後於[29]一 文中說明了系統的架構、註解機制。Hirotsu等[9]的研究中定義了三種註解系統 模型，以及一個註解通訊協定，能對網頁上的文字與MPEG影片新增註解，其對 文字註解的方式是透過幫文字加上超連結網址。而對於影片的註解採用瀏覽器插 件的方式來幫影片增加超連結網址。 本研究所提之註解機制採用 XML 格式具高易讀性，並支援對多媒體內容直 接加上畫記的註解，使註解更為精確，有助於知識更精確有效的分享。

第三章 Multimedia Annotation

eXtensible Markup Language

在本章中，我們先呈現出網頁上有那些地方可能會需要註解，接著分析對於 多媒體的網頁內容，要加上註解需要甚麼樣的元素，最後提出我們的註解機制。

3.1 網頁註解的需求

圖 3-1 維基百科-核分裂[37] 圖 3-1 為維基百科上介紹核分裂的網頁，在這樣的網頁中，存在著文字以及 圖片的區域如圖 3-2 所示，而使用者可能會對於如圖 3-3 中的文字的內容說明不 了解，或是對於內容想要寫下自己的心得。而使用者對於如圖 3-x 圖片的區域可 能不明白圖示內容所代表的意義。

圖 3-2 網頁上需要註解的區域[37]

圖 3-4 維基百科-核分裂網頁之文字區域中需要註解的部分[37]

如圖 3-4 所示，在這樣的文字介紹中，使用者可能在了解文字內容後想寫下自己 的心得，或畫出重點，因此，我們認為文字的註解形式應該要如圖 3-5 所示。

文字的被註解區應該用明顯的顏色背景區分出來，而註解的內容在平時瀏覽 時不予呈現，盡量維持網頁的原貌，在滑鼠移置被註解區時，才以如圖 3-6 的形 式呈現。 圖 3-6 維基百科-核分裂網頁之文字區域中的註解及註解內容[37] 然而，整份的文字區域中，所描述的事實，使用者可能因背景知識不足，而 有某些部分例如專有名詞可能無法理解，而需要額外去找一些參考的資料來加以 閱讀，而讀者若發現有合適的參考資料，可以幫這些部分加上參考連結，使得下 次閱讀時可以快速的找到這份資料，或是公開分享給他人作為閱讀時的輔助用。 圖 3-7 維基百科-核分裂網頁之文字區域中需要參考連結的部分[37]

圖 3-8 維基百科-核分裂網頁之文字區域加上參考連結的樣式[37]

參考連結的形式，會以類似文字註解的形式來作呈現，在滑鼠指標移至被新 增參考連結的區域後，在顯示出使用者所新增的參考連結，而在使用者用滑鼠點 擊參考連結後，幫使用者導向參考連結頁面。

圖 3-10 維基百科-核分裂網頁中的圖片部分[37]

圖 3-11 維基百科-核分裂網頁中的圖片中需要註解的部分[37]

如圖 3-11，使用者可能對於圖片中的圖示並不是很了解，在看完文字的敘述 了解之後，可能會寫下自己的心得，以便未來再次觀看時能夠很容易的了解與回 想起來。而我們認為，圖片的註解呈現方式應該如圖 3-12。

圖 3-12 圖片註解呈現於維基百科-核分裂網頁中的圖片樣式[37]

為了盡量不要破壞圖片原有的樣式，我們認為應該在滑鼠移至圖片的被註解 區域上再顯示註解內容。如圖 3-13 所示。

圖 3-14 維基百科-核分裂網頁被註解後呈現的樣式[37] 在觀看影片時，類似觀看圖片，使用者可能會對影片中的內容想要加以評論 並分享給其他人，而不同的是，影片中出現的註解通常是對影片的某一區段下註 解，因此，應該只在有註解的區段時間內標示出被註解區域的範圍。附件圖 A-3 中，是一個含有影片的網頁。而為了盡量不要破壞影片原有的內容樣式，我們認 為在滑鼠移至影片的被註解區域上再顯示註解內容，如圖 A-4 所示。

3.2 多媒體網頁註解所需元素分析

依照前小結所述的註解需求，我們思考如何能夠將一個網頁內的所有註解使 用一份文件來加以描述。這樣一份文件，由於內含多個註解，因此我們使用一個 元素<annotations>來存放在同一網頁的所有的註解元素<annotation>，隨著網頁內 的註解數量不同在<annotations>內的<annotation>數量也應不同，因此若一個網頁 有 k 個註解，<annotations>元素就有 k 個<annotation>子元素，而每一個網頁都有 一個網址，因此我們將<annotations>元素加入<pageurl>這個元素，用來記錄同一 網頁內所有註解的目標網址。接下來將每一則註解以一個<annotation>元素來表 示。 接著我們思考<annotation>元素應該要儲存那些資訊。每一則註解是由某一 位使用者所建立，以及為了讓在頁面上所呈現的註解能區分出是由那位使用者所 下的註解，因此我們加入了<creator>元素來記錄下註解的使用者名稱。同時我們

能記錄下建立註解的日期，讓使用者能知道那些註解是何時建立，因此加入 <date>元素。而如同前一章所述，這些註解除了使用者閱讀外，可能會分享給其 他的使用者，因此需要一個分享清單<share list>元素用來記錄該註解是分享給哪 些使用者或哪些使用者群組。為了讓對所有媒體的註解都能夠記錄下來，以及讓 程式開發者能區分不同的媒體而對應的處理，需要加入<type>元素來記錄被註解 的多媒體類型。 使用者對頁面中的那些部分下了註解，必須記錄下來以便再次觀看時才能呈 現出來，而隨著被註解媒體的不同，對於被註解區域會需要記錄一些不同的資 訊，以及註解所呈現的形式，我們也需要作一些紀錄以便於未來程式能適當的呈 現這些註解。由於這些資訊在對不同媒體下註解時，可能不需要，或是有不同的 定義，我們將這些資訊放在<annotation>的子元素<content>中，來加以表達。 <content>元素的內容在本段描述。使用者對於頁面的被下註解內容，會有一 些心得、評論，我們用<comment>子元素來儲存之。對於被註解區域的位置資訊 我們以<position>子元素來儲存，而隨著被註解媒體的不同類型，我們所存的位 置資訊需要再加以定義，例如在對圖片及影片下註解時，要能夠支援被註解區域 是在圖片或影片畫面上的位置，因此在對影片或圖片註解時，我們在<position> 元素內再加上<x>子元素和<y>子元素，用來描述在影片和影片中的被註解位 置。另外被註解區域的大小資訊，我們以<size>子元素來儲存，在文字註解時， 我們記錄被註解區域的長度，而對圖片與影片下註解時，需要記錄寬度與高度， 因此我們在<size>元素中，加入了<width>子元素與<height>子元素。而對於圖片 或影片被註解區塊的形狀，我們希望能夠很有彈性的來呈現，因此我們定義了 <shape>元素讓開發者未來能夠很有彈性的加以自訂。而對於影片的註解，因為 影片的內容隨著時間而變動，註解本身在影片播放時變得具有時效性，因此需要 記錄註解出現在影片上的時間，我們以<timeDuration>元素來加以記錄，由於影 片註解具有開始呈現在畫面上的時間，與消失在畫面上的時間，因此我們在 <timeDuration>元素中再加入了代表開始時間的<start>子元素和結束時間的 <end>子元素。而對於文字的註解，我們希望能存下部分被註解區域的文字，以 助於提高未來呈現註解的相容性及正確性，以及發展其他的應用，因此加入了 <highlightedText>元素來儲存部分被註解區域的文字。

3.3 Multimedia Annotation XML(MAXML)

依據前一小結的分析，MAXML 的 Document Object Model(MAXML DOM) 應如圖 3-15 所示。由於在 MAXML 中有些節點在不同的註解類型中，不一定存 在，因此在圖 3-15 中我們使用畫上虛線的節點來表示之。而由於在 annotations 元素中，可以含有一個到多個的 annotation 子元素，因此我們以省略號來表示之。 而圖中的節點中若有*代表該結點所存的資料定義會隨著 annotation 元素的 type 子元素的不同而有所差異，在本小節中將進一步說明。 圖 3-15：MAXML DOM

而依據圖 3-15 的 MAXML DOM，我們可以得到如圖 3-16 的 MAXML。                    

<?xml version=”1.0” encoding=”utf-8”?> <annotations> <pageurl></pageurl> <annotation> <creator></creator> <date></date> <sharelist></sharelist> <type></type> <content> <comment></comment> <position>

<x></x><!-- In image and video type --> <y></y><!-- In image and video type --> </position>

<size>

<width></width><!-- In image and video type --> <height></height><!-- In image and video type -->

</size>

<highlightedText></highlightedText><!-- Only in Text type --> <shape></shape><!-- In image and video type -->

<timeDuration></timeDuration><!-- Only in video type --> </content> </annotation> </annotations> 圖 3-16：MAXML 圖 3-16 為本研究所訂定的 XML 註解文件格式，註解文件包含整個頁面的所 有註解內容，本小節將詳述此註解文件格式內的所有標籤元素之定義。 <annotations> 如圖 3-16，此元素的子元素為頁面的網址<pageurl>以及所有同一頁面的註 解<annotation>，而一個頁面可能會有多個註解，故<annotatoins>此元素允許含有 多個<annotation>元素。 <pageurl> 此元素內存有被註解之網頁的網址。 <annotation> 如圖 3-16，此元素包含有五個子元素分別為<creator>、<content>、<date>、 <share list>和<type>。 <creator> 此元素內存有該註解的創始人。

<date> 此元素內存有註解的創始日期。 <share list> 此元素內存有能存取註解的分享清單資訊例如公開存取、私人存取和允許存 取的多個使用者名稱及多個群組名稱。 <type> 此元素內存有註解所針對的媒體類型例如文字、圖片、影片和參考連結。 <content> 此元素存有描述註解的主要內容，包含有六個子元素分別為<comment>、 <position>、<size>、<highlightedText>、<shape>、<timeDuration>。 <comment> 此元素存有使用者對要下註解之媒體的主要評論內容，而當註解類型為參考 連結時，則存有參考的超連結。 <position> 此元素存有註解所在於網頁內的位置資訊，依媒體類型不同而異，類型為文 字與參考連結時存下被畫記文字在 HTML DOM 的位置資訊，例如該段文字在整 個網頁所有<div>元素的第三個<div>元素內，則位置資訊為：DIV,2。當媒體類 型為圖片或影片時存有圖片或影片檔案位置資訊以及被註解區塊在該圖片或影 片內的坐標，因此當媒體類型為圖片或影片時，則含有坐標資訊由<x>和<y>兩 個子元素來構成兩個子元素則個別存有相對於圖片或影片左上角的 x 坐標和 y 坐標。 <size> 此元素所存資訊依媒體類型不同而異，類型為文字時存下被註解的文字字串 長度，當媒體類型為圖片或影片時則含有<width>和<height>兩個子元素，分別存 有被註解區塊的大小如寬度與高度。 <highlightedText> 此元素只有當類型為文字時才存在，存有被註解區域之部份文字內容。 <shape> 此元素只有當類型為圖片或影片時才存在，存有被註解區塊的形狀資訊。目 前定義 1 為矩形，未來開發者能夠開發與設計更多的形狀讓使用者來使用。 <timeDuration> 此元素只有當類型為影片時才存在，存有被註解在影片上出現的時間資訊如 開始時間與結束時間，而註解開始時間<start>和註解結束時間<end>兩個子元素 以相對於影片開始的時間來儲存。

第四章 參考系統架構與實作

本章將介紹如何使用本研究所提出的註解機制來開發系統，基於本研究所訂 的註解機制，不論是網站開發者或是瀏覽器插件開發者，都能夠很有彈性的設計 自己使用的方式，與呈現給使用者的形式。使用本機制的系統實作方式有很多 種，在接下來的小節中首先我們將介紹三種使用本註解機制的實作架構，接著說 明本研究的所選擇的示範系統三實作細節。

4.1 參考系統架構

本小節將介紹三種能使用本註解機制的系統架構，並描述三種系統架構的註 解交換流程。

4.1.1 參考系統架構一

圖 4-1：參考系統架構一 參考系統架構一如圖 4-1，系統分為三個部份：網站，註解代理伺服器和客 戶端瀏覽器。採用本系統架構的優點為網站與使用者瀏覽器都不需額外的變更。 Desmontils 等[24]一文提出的註解系統架構，DIstributed NOtation SYStem(Dinosys) 即類似參考系統架構一，不同的地方在於 Dinosys 的架構中允許有多個 proxy，

並使用一個 portal 來將網址對應到能處理該網址的 proxy。而目前 diigo.com 採用 了兩種的實作方式，其中一種亦是類似參考系統架構一的實作方法，唯註解的交 換是採用透過 json 的方式。其他仍有許多文獻所實作的系統也都採用類似參考 系統架構一的實作方法，例如 Ovsiannikov 等[7]、Webvise[8]、Hirotsu 等[9]、Koch 等[12]以及 Yee[14]。 (1) 網站 網站向註解代理伺服器提供網頁內容。 (2) 註解代理伺服器 與使用者瀏覽器互動，負責代理瀏覽器從目標網站取回頁面並將頁面加上註 解的函式庫，以及將曾經下過的註解加入到網頁上，並傳回給客戶端瀏覽 器。而當使用者對頁面下註解時，負責儲存該註解。 (3) 客戶端瀏覽器 一般的網頁瀏覽器。網頁自註解伺服器取回後，內含註解函式庫，提供讓使 用者對網頁下註解的功能，而客戶端瀏覽器為執行註解函式庫之平台。

4.1.2 參考系統架構二

圖 4-2：參考系統架構二 參考系統架構二如圖 4-2，系統分為二個部份：網站，客戶端瀏覽器。採用 本系統架構的優點為使用者瀏覽器不需額外的變更。而想要提供使用者註解網站 內各網頁的網站架構則須變更。youTube.com 即採用類似參考系統架構二的方 式。 (1) 網站 網站內含網頁伺服器與註解資料庫。網頁伺服器負責在使用者抓取頁面前將 註解函式庫內嵌於網頁內。網頁伺服器內含有 XML 處理器，負責處理來自使用 者新增、查詢註解的請求。註解資料庫負責存放所有的註解。 (2) 客戶端瀏覽器

一般的網頁瀏覽器。網頁自網站取回後，內含註解函式庫，提供讓使用者對 網頁下註解的功能，而客戶端瀏覽器為執行註解函式庫之平台。

4.1.3 參考系統架構三

圖 4-3：參考系統架構三 參考系統架構三如圖 4-3，我們將系統分為四個部份：網站，註解伺服器、 客戶端瀏覽器與瀏覽器插件以及 OpenID 提供者。前段所提 diigo.com 採用了兩 種的實作方式，另一種實作方式則類似參考系統架構三的實作方法，唯登入的處 理部份少了 OpenID 提供者。而 Bottoni 等[26]的 MADCOW 採用的架構也是與 參考系統架構三類似的。 (1) 網站 網站為使用者提供網頁內容，對於內部的網頁伺服器不需要任何變更。 (2) 註解伺服器 與使用者瀏覽器插件互動，並儲存註解內容，以及負責將使用者以 OpenID 登入之請求轉向 OpenID 提供者。 (3) 客戶端瀏覽器與瀏覽器插件 其使用者介面為瀏覽器工具列，該插件主要具有三個功能：增加頁面上的註 解、儲存或取回註解以及將註解呈現於頁面內容。 (4) OpenID 提供者 與註解伺服器及使用者互動，負責驗證使用者以 OpenID 登入註解系統。

4.2 參考註解系統三實作細節

前一小結，我們描述了三種參考系統的架構，而本研究選擇了實作參考系統 三來做示範實作，因為該系統與參考系統一、皆能對網路上大部分的頁面來加上 註解，而參考系統二只允許對網站本身做註解，而參考系統三比參考系統一更容 易開發實作，因此本研究選擇實作參考系統三。本小節將描述參考註解系統三的 實作細節，包含註解伺服器與客戶端瀏覽器插件。 圖 4-4：註解伺服器 如圖 4-4，註解伺服器包含了網頁伺服器與註解資料庫。

4.2.1 註解資料庫

註解資料庫在本設計中採用了常見的 MySQL 資料庫，接收並回應來自 XML Processor 的詢問以及新增請求，並將每一個註解以在資料庫中的一筆資料來呈 現，而所有頁面的所有註解都儲存在此資料庫中。

4.2.2 網頁伺服器

網頁伺服器包含 XML Processor 以及 OpenID Authenticator，皆使用 PHP 語 言實作。 一、XML Processor XML Processor 負責處理來自使用者瀏覽器插件所有請求如下所述： (1) 查詢註解請求 使用者瀏覽器插件在使用者開始拜訪某一個頁面的同時所發出的 XML HTTP Request，當請求傳送到註解伺服器內的網頁伺服器時，會交由 XML Processor 處理，XML Processor 取得請求內的頁面網址，隨後向註解資料庫 查詢是否該網址是否已有註解，若有，註解資料庫傳回該網址整個頁面的所 有註解到 XML Processor，XML Processor 取得該網址整個頁面的所有註解 後，以 XML 格式傳回給使用者瀏覽器插件。 (2) 新增註解請求 使用者對頁面加上新的註解時，使用者瀏覽器發出 XML HTTP Request 新增註解的請求與內容到註解伺服器內的網頁伺服器，該請求會交由 XML

Processor 處理，XML Processor 則將註解內容存到註解資料庫。 (3) 刪除註解請求 使用者瀏覽器會呈現該頁面已有且符合使用者存取權限的註解，而使用 者只能刪除自己建立的註解，當使用者刪除頁面上的某個註解時，使用者瀏 覽器發出 XML HTTP Request 刪除註解的請求到註解伺服器內的網頁伺服 器，該請求會交由 XML Processor 處理，XML Processor 則要求資料庫刪除該 筆註解。 二、OpenID Authenticator

OpenID Authenticator 負責處理來自瀏覽器插件使用 OpenID 登入的請求。當 收到這樣的請求時，OpenID Authenticator 先去 Discover 使用者的 OpenID 來自那 一個 OpenID Provider，隨後將使用者導向 OpenID Provider 的 OpenID 登入頁面， 而當使用者登入成功後，OpenID Provider 將使用者導回 OpenID Authenticator， 並回應驗證成功。

4.3 客戶端瀏覽器插件

圖 4-5：瀏覽器插件 如圖 4-5，瀏覽器插件包含註解處理器，註解處理器由 Annotator、Renderer 和 XML Processor 構成，瀏覽器工具列為整個瀏覽器插件的使用者介面。 本研究所設計的瀏覽器客戶端插件為針對 Mozilla Firefox 的版本，在本小節 中我們先描述瀏覽器插件，再描述插件中 Annotation Processor 的 XML

Processor、Annotator、Annotator 內的 Flash 影片註解播放器、Renderer 以及瀏覽 器工具列。

4.3.1 Firefox 瀏覽器插件

javascript (1) RDF 用來描述瀏覽器插件本身的資訊如插件名稱、插件版本、適用瀏覽器版 本、插件作者等等資訊。 (2) XUL 用來定義瀏覽器插件的使用者介面，例如工具列、選單和側邊頁面。 (3) Javascript 用以實作瀏覽器插件的功能。

4.3.2 XML Processor

XML Processor 功能有二如下所述： (1) 處理來自 Annotator 的註解內容並將註解內容與使用者資訊以 XML 格式 以 XML HTTP Request 送到 Annotation Server，並等待 Server 回應，Server 回應新增成功後，XML Processor 通知 Renderer 做後續處理。 (2) 在使用者拜訪某頁面時，以 AJAX 方式發出查詢請求到註解伺服器詢問該 頁面是否已有註解，若有則註解伺服器以 XML 格式回傳使用者具有存取 權限的所有註解內容，XML Processor 收到伺服器回應後，將其解析並送 給 Renderer 處理。

4.3.3 Annotator

當使用者使用瀏覽器工具列上的不同媒體類型的新增註解按鈕或新增參考 連結按鈕時，Annotator 會依照所處理的類型不同，而做不同的處理：

(1) 為文字新增註解或參考連結時，Annotator 依照 HTML Document Object Model(HTML DOM)記下被下註解文字的位置，於使用者輸入完註解或參考 連結而按下送出的按鈕後，Annotator 將註解的內容及使用者資訊交給 XML Processor， XML Processor 將整筆註解資料以 Asynchronous JavaScript and XML(AJAX)的方式傳至 Annotation Server 加以儲存。

(2) 按下新增圖片註解按鈕時，Annotator 會使用事件傾聽器，在使用者點選新增 註解的圖片後，記下該圖片在 HTML DOM 的位置，於使用者輸入完註解而 按下送出的按鈕後 XML Processor 將整筆註解資料以 AJAX 的方式傳至 Annotation Server 加以儲存。

(3) 按下新增影片註解時 Annotator 將網頁內所有 Flash 影片播放器置換為 Flash 影片註解播放器，隨後將使用者資訊傳入影片註解播放器，並呼叫影片註解 播放器播放影片。

4.3.4Flash 影片註解播放器

Flash 影片註解播放器使用 actionscript 實作，功能有：播放影片，新增影片 註解，播放影片註解。Flash 影片註解播放器有實作 external interface call back function 可讓 javascript 從外部呼叫函式或傳遞參數到影片註解播放器。

影片註解播放器並播放影片。

(2) 新增影片註解：在影片中或暫停時使用者隨時可以按 Add annotation 按鈕來 新增註解，按下 Add annotation 按鈕後，使用者需在影片畫面上用滑鼠畫出 要被註解的區塊，而後再按 mark left 按鈕，標記註解開始的時間，以及 mark right 按鈕，標記註解結束的時間，隨後使用者輸入註解內容，而在使用者按 送出註解按紐後 Flash 影片註解播放器將註解以 XML 格式傳至 Annotation Server 加以儲存。

(3) 播放影片註解：Flash 影片註解播放器在播放影片前先向 Annotation Server 查 詢該影片是否已有使用者具存取權限的註解，若有收到 Annotation Server 傳 回來的註解，則將這些註解依據註解的資訊如註解位置和註解開始與結束時 間，來劃出被註解的區塊，讓使用者將鼠標移至被註解區塊時，顯示註解內 容，而鼠標移出時則隱藏註解內容。

4.3.5 Renderer

Renderer 負責將來自 Annotator 以及 XML Processor 的註解資料依據註解的 不同類型，以不同的方式呈現給使用者。

4.3.6 瀏覽器工具列

瀏覽器工具列的使用者介面由三個按鈕所組成，分別是畫記與增加註解文 字、新增圖片註解和新增影片註解。這些按鈕與按下按鈕所進行的動作被描述在 XUL 檔案中，而按下按鈕所進行的動作被用 javascript 語言實作在 Annotator 與 Renderer 中。在這邊我們描述按下各按鈕所進行動作。 (1) 畫記與增加註解文字 在使用者選取一段網頁上的文字而按下本按鈕後，將執行在 javascript 程式碼中所定義的函式，此函式取得該段文字在 HTML DOM Tree 內的 位置以及該段文字的長度和部份文字，並新增一個文字輸入區於被劃記 的文字旁讓使用者輸入註解，在使用者輸入註解並按下文字輸入區的儲 存後，這些資訊都被送到 XML Processor 處理。 (2) 新增圖片註解 在使用者按下新增圖片註解按鈕後，將跳出選單，讓使用者選擇要在圖 片上呈現被註解區塊的形狀，例如矩形，讓使用者在圖片上畫出被註解 區塊，而後於被註解區塊旁新增一個文字輸入區，讓使用者輸入註解， 在使用者輸入註解並按下文字輸入區的儲存後，被註解區塊的形狀、位 置及註解文字都被送到 XML Processor 處理。 (3) 新增影片註解 在使用者按下新增影片註解按鈕後，其對應函式將取得網頁內的 Flash 影片檔案位置，並將 Flash 影片播放器換為瀏覽器插件內的 Flash 影片註 解與播放器。而當使用者按下 Flash 影片註解與播放器上的新增影片註 解按鈕後，能讓使用者在圖片上畫出被註解區塊例如矩形，而後於被註

解區塊旁新增一個文字輸入區，讓使用者輸入註解，在使用者輸入註解 並按下文字輸入區的儲存後，被註解區塊的形狀、位置及註解文字都被 送到 XML Processor 處理。

4.3.7 註解交換流程

在完成了參考註解系統三後，整個系統新增註解與查詢註解的流程在本小段 加以描述。 圖 4-6：增加註解流程圖 如圖 4-6，使用者一般瀏覽網頁時，會從網頁伺服器取回網頁，接下來若使 用者在瀏覽的頁面加上註解並按下送出按鈕後，瀏覽器插件將註解以 XML 格式 傳送到 Annotation Server，並等待 Annotation Server 回應新增成功後，即將註解 加入使用者正在瀏覽的頁面。 圖 4-7：查詢註解流程圖 一般使用者瀏覽網頁時瀏覽器會發出 Webpage Request，網頁伺服器收到請 求，會送出回應給使用者瀏覽器，瀏覽器收到網頁後，呈現給使用者整個網頁內 容，因此只涉及網頁伺服器與使用者瀏覽器。 而如圖 4-7，我們的系統在原有的使用者瀏覽器與網頁的 HTTP 架構上加上

了註解伺服器，因此當使用者拜訪某一個頁面的同時我們使用瀏覽器插件以 XML HTTP Request 發送查詢註解的請求到註解伺服器查詢該頁面網址是否已有 註解，若有，註解伺服器使用 MAXML 傳回整個頁面的所有註解，隨後瀏覽器 插件將這些註解加入原生的頁面而呈現給使用者。

4.3.8 使用 OpenID 登入流程

圖 4-8：使用 OpenID 登入流程圖

在使用者輸入 OpenID 後，瀏覽器插件會將 OpenID 送到 Annotation Server， 而 Annotation Server 進行 Discover 找到該 OpenID 提供者後，會重新導向該 OpenID 提供者的登入頁面，待使用者輸入密碼後，OpenID 提供者再將登入的回 應送回 Annotation Server，而 Annotation Server 再將回應送回瀏覽器插件，最後 將結果送回瀏覽器。

第五章 功能展示

在本章，我們將展示使用本研究的註解機制的客戶端瀏覽器插件。該瀏覽器 插件的主要使用者介面為瀏覽器工具列，圖 5-1 為安裝瀏覽器插件後的 Mozilla Firefox。 圖 5-1：瀏覽器工具列 該瀏覽器工具列由五個按鈕構成，如圖 5-1，個按鈕由左而右，其主要功能如 下所述，我們將在本章個小節詳述這些功能： (1) Annotate Text:文字註解功能。 (2) Annotate Image:圖片註解功能。 (3) Annotate Video:影片註解功能。 (4) Reference Link:參考連結功能。 (5) Menu:工具列選單。 本章各小節中的功能展示例子在附件一有被註解的網頁完整圖片與 XML 檔 案內容。

5.1 Menu (工具列選單)

圖 5-2 ：工具列選單 工具列選單具有四個功能：登入、以 OpenID 登入，註冊新帳號和手動取回 所有使用者具存取權限的註解。

5.1.1 登入

圖 5-3：使用者登入介面一 圖 5-3 網頁中間的區塊為使用者點選工具列選單的 Login 後所呈現的使用者 登入介面。使用者在該介面輸入使用者名稱與密碼並登入後經 Annotation Server 驗證進入登入狀態，瀏覽器插件呈現該頁面所有使用者具存取權限的註解。

5.1.2 使用 OpenID 登入

圖 5-4：使用者登入介面二

圖 5-4 中間的視窗為使用者點選工具列選單的 Login with OpenID 後所呈現 的使用者登入介面。再使用者輸入使用者的 OpenID 後，系統會幫使用者導向該 OpenID Provider 的網站例如圖 5-5 使用雅虎的 OpenID，進行身分認證，待身分 驗證成功後，使用者即進入登入狀態。

5.1.3 註冊

圖 5-6：使用者註冊介面 圖 5-6 網頁中間的區塊為使用者點選工具列選單的 Sign-Up 後所呈現的使用 者註冊介面。使用者輸入欲建立的使用者帳號資訊並按下註冊鈕後，經 Annotation Server 驗證若無誤即新增帳號。

5.1.4 手動取回所有使用者具存取權限的註解

如圖 5-2 的選單第三項，在使用者未進入登入狀態前，使用者的身分為 anonymous，這是所有未登入或未註冊的使用者公用帳號，這時瀏覽器插件預設 不幫使用者取回該頁面的註解，但使用者仍可對頁面下所有類型的註解，若使用 者希望看到其他使用者公開的註解，點擊本選項即可。

5.2 Annotate Text

使用者在網頁上選取所要增加註解的文字後，再按下圖 5-2 的 Annotate Text 按鈕後，瀏覽器插件會在選取範圍後方插入文字註解輸入區塊如圖 5-7 所示。 圖 5-7：文字註解輸入區塊 在使用者按下 SubmitComment 後，瀏覽器插件會將註解送出並移除文字註 解輸入區塊，隨後瀏覽器插件會將被註解的文字加上背景顏色，在使用者將鼠標 移至被註解區域上方時，如圖 5-8，會顯示註解，移出被註解區域時會隱藏註解。 對於使用者所下的註解，我們認為應該只讓建立者有刪除的權限，因此如圖 5-8 的註解內容中，有著 delete 的按鈕，表示該使用者是建立這則註解的使用者。而 若不是這則註解的建立者則不會有此按鈕。

圖 5-8：文字註解

5.3 Annotate Image

按下圖 5-2 的 Annotate Image 按鈕後，再選擇欲增加註解的圖片後，瀏覽器 插件會在選取的圖片上加入一個選取被註解範圍的矩形，如圖 5-9，該矩形允許 使用者托曳及放大縮小，待使用者選取完被註解範圍後，瀏覽器插件會在圖片後 方插入文字註解輸入區塊亦如圖 5-9 所示。 圖 5-9：圖片註解輸入區塊 在使用者按下 SubmitComment 後，瀏覽器插件會將註解送出並移除圖片註 解輸入區塊，之後在使用者將鼠標移至被註解區域上方時，如圖 5-10，會顯示註

解，移出被註解區域時會隱藏註解。 圖 5-10：圖片註解 如同文字的註解內容，我們只讓建立者有刪除的權限，圖 5-10 中的註解內容有 著 delete 的按鈕代表這位使用者是建立者。

5.4 Annotate Video

圖 5-11：影片註解功能選單 影片註解功能選單能讓使用者選擇要幫影片加上公開的註解或是私人的註 解，如圖 5-6 所示，當使用者按下選單內的選項時，瀏覽器插件將網頁內的 Flash 影片播放器抽換為 Flash 影片註解與播放器， 如圖 5-12 所示。 使用者在按下圖 5-12 的 Add Annotation 按鈕後，使用者需在影片上畫出被 註解區域，並在影片播放中，或暫停時標記起始與結束時間。隨後如圖 5-13，將 在被註解區域上加上外框，以及在被註解區域下方新增一文字輸入區讓使用者輸 入文字。

圖 5-12：Flash 註解與播放器 如圖 5-13，在使用者輸入完註解後，按下 Flash 影片註解與播放器的提交註 解按鈕，送出此註解。隨後，下一次播放時，Flash 影片註解與播放器將判斷該 時間區段內是否有註解，若有則在被註解區域上加上外框，此時使用者將滑鼠指 標移至該區域上方，將顯示註解的評論。反之，鼠標移出時隱藏註解的評論。 圖 5-13：新增影片註解

5.5 Reference Link

在使用者選擇網頁上要加參考連結的文字後，按下工具列上的 Reference Link 後，瀏覽器插件會在選取範圍後方插入參考連結輸入區塊如圖 5-14 所示。

圖 5-14：參考連結輸入區塊

在使用者按下 Submit Reference Link 後，瀏覽器插件會將被加參考連結的文 字加上背景顏色，在使用者將鼠標移至被加參考連結的文字上方時，如圖 5-15， 會顯示參考連結，移出時則會隱藏參考連結。

第六章 研究結論

本研究提出了一個通用的註解機制，以及實作了一個示範性的註解系統，對 於目前富有多媒體的網頁內容的文字、圖片與影片能夠直接新增與刪除註解，並 支援公開與私人的註解存取控制。本章將評估我們的註解機制，並觀察我們所實 作的參考註解系統三使用我們的註解機制來呈現註解所需的時間，以及描述我們 的研究結論與未來建議的研究方向。 

6.1 評估

表 6-1 參考註解系統三與其他網頁註解系統比較表  Reference System 3

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 Diigo W3C, Sites create their own, local file Youtube 如表 6-1，本研究所提出的註解機制提供完整的多媒體註解功能，而使用本 註解機制來做註解的儲存與交換來開發瀏覽器插件或應用程式，即能呈現註解內 容。本註解機制採用 XML，相對於 JSON 與 RDF 格式具高易讀性的優點。示範 系統的註解目前儲存在示範系統伺服器上，未來將設計能儲存在使用者本地端的 版本。 唯示範系統目前對影片的註解只實作支援 flash 相容影片檔案格式的版本。 由於 flash 影片格式檔案小，播放所需頻寬也小，目前的網頁內容所放置的影片

格式以 flash 為最大宗，因此尚適用於大部份的網頁內容，然而未來隨著使用者 網路頻寬逐漸增加，硬體設備的進步，未來可能需要開發適用其他影片格式的版 本。

表 6-2 客戶端硬體設置

CPU Intel Core2 Quad Q6600

Memory 4GB dual channel DDR2-667

Graphic card NVIDIA Geforce 6600GT

HDD Seagate 500G × 2 RAID0

Browser Mozilla Firefox ver. 3.0.12

表 6-3 客戶端文字與圖片註解數量與呈現所需時間關係表 NoA

Type

10 25 50 75 100

Text 0.049sec 0.206 sec 0.450 sec 0.653 sec 0.918 sec

Image 0.068 sec 0.162 sec 0.319 sec 0.506 sec 0.647 sec

NoA=Number of Annotations 我們測試客戶端使用我們註解機制所實作的參考註解系統三在圖 4-7 中瀏覽 器取得我們的 MAXML 後的下一個流程，將文字註解與圖片註解呈現到我們瀏 覽的頁面上所須的時間。我們的測試環境如表 6-2。測試結果為表 6-3，其中的 數值單位為秒，每個數值為測試五次後取平均值的數值。我們可以看到在註解的 數量達到 100 個時，文字註解類型與圖片註解類型皆小於 1 秒就能處理完畢並呈 現出 100 個註解。我們觀察到圖片註解呈現的速度略快於文字的註解，這是由於 在呈現文字註解時，我們需要先找到對應的字串，因此比起呈現圖片註解，多了 搜尋字串的時間。

6.2 研究結論

本研究提出了一個通用的多媒體註解機機制，並能夠支援下列功能： (1) 使用者能直接對頁面上的多媒體內容增加註解 直接對網頁上的多媒體內容做註解，能讓使用者間分享與討論，讓討論 的對象更加精確。 網頁內容提供者能得到來自使用者的回饋，對於內容提供者來說，能夠 修正錯誤或是增加不足的內容。 (2) 使用本註解機制的各註解服務提供者能讓註解在各服務提供者間交換流通 例如使用者的註解能移至不同的註解服務提供者的註解伺服器來儲存。

(3) 能對頁面內容加上參考連結 在使用者認為網頁內容有艱澀難懂的部份能夠將其加上有更清楚解釋的 網頁連結，在其他使用者閱讀時能參考該連結以加強閱讀的效率。 本研究並提供了一個參考的實作，讓開發者能夠參考，而讓使用者能夠對頁 面加上多媒體的註解。

6.3 未來研究建議

(1)加入推薦註解元素 隨著社群網站結合各種應該服務的發展，出現如 Digg.com(http://digg.com/) 這樣的網站，能讓使用者對網頁下評論與推薦網頁。未來如能在 MAXML 中加 入支援推薦註解元素，除能使得如 Digg.com 與 FunP(http://funp.com)此相同類型 的網站資料能交換與流通。若結合資料探勘的技術，提供支援推薦網頁給使用者 的功能，將能讓使用者獲得更多有趣的知識。 (2) 開發支援群組功能的示範系統 本研究的註解機制支援群組的存取控制，唯示範系統的實作尚未支援群組的 存取控制，由於目前在各社群網站中使用者能參與許多的群組，使用者若能將這 些註解以群組的方式來共用與分享，知識的分享將更迅速有效率。 (3) XML 最佳化 本研究所提出的 XML 文件格式適用於各種註解來使用，然而，尚未經過最 佳化，未來能嚐試將 XML 最佳化，以求在註解文件交換時更具效率。 (4)瀏覽器插件支援選擇性顯示註解 隨著使用者的增加，可以預見在同一頁面上的註解可能會相當的多， 這時，應該要提供方法讓使用者能夠有選擇性的閱讀這些註解。例如依註 解建立時間讓使用者選擇批次顯示，而提供讓使用者能夠設定這些篩選規 則的介面與功能。令外，也可提供讓使用者選擇某些頁面上的註解將其隱 藏而不顯示的功能。而當被註解區域有重疊的部份時，對於如何顯示這些 重疊的註解，目前參考註解系統三是讓它們直接重疊出現，但這樣的顯示 在畫面上略顯繁雜，未來應該思考更多呈現的方式，來讓使用者選則如何 呈現這些重疊的註解。 (5)瀏覽器插件支援讓使用者下載與上傳註解檔案 若能提供讓使用者下載與上傳註解檔案的功能，使用者除了能夠自行 保存這些註解資料外，也能到其他註解服務提供者上傳自己的註解與其他 網站的使用者分享。

參 考 文 獻

[1] D. LaLiberte and A. Braverman, “A Protocol for Scalable Group and Public Annotations”, In Proceedings of the International World Wide Web Conference, Darmstadt, Germany, 1995.

[2] M. A. Schickler, M. S. Mazer, and C. Brooks, “Pan-browser support for annotations and other meta-information on the World Wide Web”, In

Proceedings of the Fifth International World Wide Web Conference, Paris,

France, 1996.

[3] C. Marshall, “Annotation: from paper books to the digital library”, In

Proceedings of 2nd ACM International Conference on Digitul Libraries,

Philadelphia, USA, 1997.

[4] C. Marshall, “Toward an ecology of hypertext annotation”, In Proceedings of

ACM hypertext, Pittsburgh, PA, 1998.

[5] M. N. Price, B. N. Schilit, and G. Golovchinsky, “Xlibris: the active reading machine”, In Proceedings of CHI ’98 Human Factors in Computing Systems

Conference, Los Angeles, USA, 1998.

[6] D. Bargeron, A. Gupta, J. Grudin, , E. Sanocki, “Annotations for Streaming Video on the Web: System Design and usage Studies” , In Proceedings of the

Eighth International World Wide Web Conference, Toronto, Canada, 1999.

[7] I. A. Ovsiannikov, M. A. Arbib, T. H. Mcneill, “Annotation Technology”,

International Journal of Human-Computer Studies, 50, pp. 329-362, 1999.

[8] K. Grønbæk, L. Sloth, P. Ørbæk, “WebVise: Browser and Proxy Support for Open Hypermedia Structuring Mechanisms on the WWW”,

In Proceedings of the Eighth International World Wide Web Conference,

Toronto, Canada, 1999.

[9] T. Hirotsu, T. Takada, S. Aoyagi, K. Sato and T. Sugawara, “Cmew/U: A Multimedia Web Annotation Sharing System”, In Proceedings of the IEEE

Region 10 Conference, Cheju, Korea, 1999.