• 沒有找到結果。

立 政 治 大 學

Na tiona

l Ch engchi University

~ 14 ~

第三章 研究方法及架構

本章節會把上面提到的作法作為參考,結合他們的特點,設計出一個照片 詮釋資料標記工具,讓它可以進行標記、註解的儲存。同時,我們也會闡述此 工具的設計的理念。

3.1 系統架構

我們以 OKFN Annotator 作為架構參考,將其運用在圖片標記系統裡面。經 過一番比較,我們決定採用 git-hub 上的開放源碼專案 jQuery Image

Annotation[10]這個工具為基礎,針對我們的需求進行大幅改寫。這是一個網 頁上 jQuery 的 plug-in,讓我們可以對圖片上的任一部分進行標記,寫入註 解,如 Fig-8。

Fig- 8 jQuery Image Annotation 的使用範例

接著我們說明照片上的 metadata 如何設計。這些 metadata 包括:(1)在照 片上註解的座標:top、left、width、height。(2) 註解種類:Who、Where、

When…等等。(3) 註解內容:包括問題與回答。讓這些 metadata 可以讀寫正 常,並能有效管理,甚至是跨平台傳遞都是要解決的課題。

使用 JSON(JavaScript Object Notation)做為與後端(back-end)溝通的資 料格式,將每張照片的 metadata 儲存進 JSON,而會有兩種 JSON 格式,成如 上述的兩類註解而設計,如 Fig-9。JSON 內容的解說(表 4),其中這兩種註解 都以 photo-id 作為連結,因此兩種 JSON 都包含這個資料,相同的 photo_id 表示註解對應到相同的照片。

Fig- 9 兩種 JSON 格式

(user interface ,UI)設計細節的探討。

第一階段,上傳照片:

3.3.2 註解類型(Annotation Type )

本工具除了要讓使用者標記照片外,還希望可以幫助使用者在大量的照片

3.3.3 權限(permission)控管

本論文一開始希望可以有網路社群的功能,因此參考 OKFN Annotator 工 具的權限設定管理,雖然最後網路的社群功能並沒有實做出來,但是我們還是

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 18 ~

表格 5 權限簡化內容 Permission 內容

read:誰可以看到這個註解。

admin:誰可以修改此註解的權限。

update:誰可以編輯此註解。

delete:誰可以刪除此註解。

第二階段編輯註解頁面,如 Fig-11。

Fig- 10 註解編輯頁面 第三階段,搜尋照片:

3.3.4 Input

本論文在搜尋輸入關鍵字的部分,分成兩大類。第一種為單一關鍵字的快 速搜尋,如同 Google 搜尋一般;第二種為應用前面註解類別的特性的「多重 搜尋」。為了讓搜尋更為精準,這兩種搜尋都會讓使用者選擇註解的類型,如 Fig-11。在快速搜尋的部分,使用者填完關鍵字可以選擇下面的類型按鈕,增 加搜尋的精準度。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 19 ~

Fig- 11 搜尋輸入介面

當使用者想設定多個搜尋條件的時候,我們也有設計 UI 讓使用者輸入,

根據條件輸入欄位中,則可以使用各個欄位相對應的類型來進行更精準的搜 尋。

3.3.5 Output

搜尋結果的顯示我們在這邊分成兩部分:第一,搜尋結果總覽的部分;第 二,點選搜尋結果,進入單張照片觀看註解部分。以這種方式呈現主要是參考 Google 搜尋結果的呈現方式,在 Google 網頁上呈現搜尋結果的總覽,再根據 使用者的選擇,連結到所要的網頁。目前我們的做法也會如同 Google 搜尋,

如 Fig-12。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 20 ~

Fig- 12 搜尋結果頁面 3.3.5.1 總攬頁面

此頁面頂部為 3.3.4 節的 input 畫面,按下搜尋按鈕之後,系統會將搜尋 結果直接在下方顯示。這邊使用 AJAX(Asynchronous JavaScript and XML)技 術,當使用者送出表單向網頁伺服器(web server)做請求的時候不必傳回新的 頁面,直接藉由 JavaScript 處理來自 sever 的回應。這樣的做法減少了 server 與瀏覽器之間的資料傳輸量,同時許多處裡可以在用戶端(client)上完成,減 少 server 負擔,讓回應更為快速。除了效能的需求,這樣設計也更為直覺,

使用者如果需要再次搜尋並不用重新回到上一頁。

顯示的部分會將每張照片的註解顯示出來,並將符合搜尋的註解強調 (highlight)出來供使用者觀看,確認是不是他想要的註解,如同 Google 每個 連結下的文字說明。此外還會有配合後端(back-end)的推薦系統,顯示這次關 鍵字的相關推薦搜尋,希望可以符合使用者期望。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 21 ~

3.3.5.2 細部註解頁面

這部分的頁面與第二階段標記照片的頁面外觀是相同的,顯現出照片的各 個註解。因為這是搜尋的結果,我們希望設計出像 Google 一樣,可以強調 (highlight)搜尋結果的 UI 設計。原本的設計是使用者將滑鼠移動到照片上才 會顯示出內部註解,現在我們增加一段 JavaScript code 去觸發這個動作,在 搜尋頁面 load 進來的時候可以直接顯示註解並且看到符合搜尋的註解內文,

達到強調的效果,比使用者去移動滑鼠來觀看註解直觀。

3.3.6 Date Picker

不管是在註解的撰寫或是搜尋條件的輸入,只要是要填寫時間的地方,本 工具都使用 JQuery Datepicker 讓使用者選擇,如 Fig-13。

Fig- 13 Datepicker

這樣的設計並除了網頁安全設計所說「不要輕易相信使用者輸入的資料」

的防範,而是日常生活中使用的日期格式過多,同一天的日期有不同的表示方 法,有西元、有民國,年度的位置有在前、有在後…等等,每個使用者的習慣 不同。引入 Datepicker,除了讓使用者有選取代替輸入的便利性,更重要的 是有防呆機制(Fool-proofing):免除使用者輸入錯誤的日期,如:2/30 或起

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 22 ~

始日起晚於結束日期,如:2014/7/30~2013/6/01。避免須要進行錯誤資料清 洗(Data Cleaning)步驟。

行照片註解的 CRUD( create, read, update and delete)操作。首先從使用 者的角度切入使用者情境(User story),然後討論實作的流程,以及最後根據

擇要上傳的檔案,並在用戶端(client)以 script 來記錄上傳的檔案名稱與路 徑,如 Fig-15。

Fig- 15 上傳檔案之 script

根據 3.3.1 小節相簿的實作部分,採取 JQuery Lightbox plugin – colorbox。所謂的 Lightbox 就是在網頁中開啟一個視窗(非新視窗),而開啟 的視窗會出現在網頁正中央,並且淡化網頁其他部分,讓使用者注意力集中在 中央的視窗,Colorbox 是「輕量級、可客製化的 JQuery Lightbox plugin」。 將 Colorbox 運用在相簿資料輸入的視窗上,除了不用再連結的新頁面,也有

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 25 ~

Fig- 16 colorbox 呈現效果

4.2.2 照片之詮釋資料類型

Fig- 17 註解類型的選擇

根據 1.2.3 小節的 Shatford mode facet matrix,圖像有很多不同的層 面,我們希望根據這些層面給予註解不同的類型(type)做為區別,達到分類的 目的。

誠如 3.2 節提到,我們將以 JSON(JavaScript Object Notation)做為與 後端伺服器溝通的資料交換語言,如 Fig-18。JSON 是個以純文字為基礎去儲 存和傳送簡單結構資料,我們可以透過特定的格式去儲存任何資料,也可以透 過物件或陣列來傳送較複雜的資料。相較於傳統 Web Application 都是透過 XML(Extensible Markup Language)做為資料傳遞格式,如 Fig-19,JSON 的優 點在於:

1. 相容性高。

2. JSON 格式可讀性遠高於 XML,容易瞭解、修改。

3. 支援許多資料格式 (number, string, Booleans, nulls, array, associative array, object)。

4. 許多程式都支援函式庫讀取或修改 JSON 資料。

5. 表達相同的資料 XML 的資料量遠大於 JSON。

Fig- 18 JSON 比較圖

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 27 ~

Fig- 19 XML 比較圖

4.2.3 詮釋資料格式

每張照片都會有自己的 JSON 資料表,照片上的每個註解,我們都會以 key-value 的形式紀錄在 JSON 中。以 3.2 節的內容,照片註解分為背景註解 與內容註解,照片的背景註解與照片是一對一關係,所以在 JSON 中它們的數 量並不會增加;內容的註解則會根據使用者標記數量的多寡而增加或減少,這 部分會經由 JavaScript code 在 JSON 中進行動態修改。背景註解的 key 即為 類型(type),而內容註解會有一個名為 type 的 key-value 去記錄類型。

每張照片 JSON 格式,如 Fig-20。time、place、event、title 都是背景 註解,只有一個,數量不會增加;而 annotationdata 是一個 array 記錄著照 片內部的註解,展開會如 Fig-21,會紀錄這個註解再相片中的位置(top、left、

height、width),type 與 text 則記錄註解內容,editable 則是權限的控管。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 28 ~

Fig- 20 annotation in JSON

Fig- 21 內容註解 in JSON

4.2.4 照片之詮釋資料儲存與傳遞

進入標記照片的階段主要將使用者撰寫的註解暫存起來,之後再批次 (Batch)傳遞到後端資料庫,避免發生遺漏的狀況。以前在 client 端可以用 cookie 暫存資訊,但是在使用上會有些不便:

1. 不管是否會用到 cookie 中的資訊,在每個 HTTP request 都會被送到 server 端,會降低執行效能與浪費網路頻寬。

2. Cookie 送出的資料並沒有加密,除非用 SLL 技術加密,否則不適合放 重要的隱私資訊。

3. Cookie 的大小限制是 4KB,無法放太多資料。

‧ 國

立 政 治 大 學

Na tiona

l Ch engchi University

~ 29 ~

現在 HTML5 技術純熟,web storage 提供開發者更大、更安全的空間可以暫存 資料。 Web Storage 分為兩種:local storage 和 session storage,本論 文使用的是前者。local storage 的生命週期較長,且儲存的資料可以跨瀏覽 器分頁(tab)存取。

當使用者輸入資料後,會先將註解的各種資訊以 JSON 形式紀錄在 local storage 中名為 result 的變數中暫存,如 Fig-22。

Fig- 22 JSON in local storage 4.2.5 權限實作

在原本的 jQuery Image Annotation 的工具之中,editable 的變數作為 註解可不可以修改的判斷,只是並沒有提供使用者 UI(user interface)去做 修改,必須從 command line 做修改。本論文為了可以供使用者選擇可修改與 否,新增了 UI 介面,如 Fig-10 中的 checkbox。根據使用者使否有勾選 checkbox,

呼叫 JavaScript 函式修改 JSON 中 editable 內容,來達到權限控管的目的,

如 Fig-23。我們會將更改的權限設定存放於 local storage 中變數名為 editable 的 JSON 中,最後要將註解上傳至端儲存時,才會將 JSON-editable 內容修改至 JSON-result 中,並上傳新的 JSON-result 內容。

A. AJAX (Asynchronous JavaScript and XML)

在本文 3.3.5 節有介紹,在呈現搜尋結果的時候,我們會有兩個部分:總

2. 使用 JavaScript 操作 DOM(Document Object Model)進行動態顯示。

3. 使用 XML 和 XSLT 進行資料交換及相關操作。

4. 使用 XMLHttpRequest 物件與 Web 伺服器進行非同步資料交換。

本論文在這部分主要是使用第二點,用 jQyery 對 DOM 進行動態操作。我們將 搜尋的結果使用 appendTo()顯現在搜尋頁面下方,appendTo()是在選擇的 DOM 元素之內插入指定的內容,以 w3c 為範例:Fig-24。

Fig- 24 example of appendTo ()

當按下 button 的時候,appendTo()會在 P 元素之內插入:<span>Hello World!</span>,達到不用更新整個頁面卻能修改頁面顯示的方法。

B. Highlight

我們希望將照片中符合搜尋的註解可以強調(highlight),讓使用者可以 在第一時間看到他想要的註解,這部分本論文在總攬頁面與照片註解頁面都有

我們希望將照片中符合搜尋的註解可以強調(highlight),讓使用者可以 在第一時間看到他想要的註解,這部分本論文在總攬頁面與照片註解頁面都有

相關文件