豐富互動式網際網路應用之多媒體編輯系統的設計及實作

國

立

交

通

大

學

多媒體工程研究所

碩

士

論

文

豐富互動式網際網路應用之

多媒體編輯系統的設計及實作

Design and Implementation of an

RIA-Based Multimedia Authoring System

研 究 生：王乃宣

指導教授：陳登吉 教授

豐富互動式網際網路應用之

多媒體編輯系統的設計及實作

Design and Implementation of an

RIA-Based Multimedia Authoring System

研 究 生：王乃宣 Student：Nai-Hsuan Wang

指導教授：陳登吉 Advisor：Dr. Deng-Jyi Chen

國 立 交 通 大 學

多 媒 體 工 程 研 究 所

碩 士 論 文

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 Science June 2009

Hsinchu, Taiwan, Republic of China

豐富互動式網際網路應用之

多媒體編輯系統的設計及實作

學生：王乃宣 指導教授：陳登吉 博士

國立交通大學多媒體工程學系碩士班

摘要

全球上網人數持續攀高，散布於網路的資訊每年以倍數成長，瀏覽 者的視聽覺感官越來越挑剔，所以能在短時間內編輯出吸引瀏覽者目光 的互動多媒體是非常重要的。然而編輯者因工作或求學需要，常在不同 時 間 或 地 點 使 用 不 同 台 電 腦 ， 易 發 生 沒 有 慣 用 的 多 媒 體 編 輯 工 具 (multimedia authoring tools ;MAT) 或無法安裝慣用工具等等的不 便，因此，編輯者需要一個具有高度操作性、可攜性及跨帄台的工具。 本研究希望結合Web 跨帄台特性，開發一套可快速製作出豐富互動 式作品的多媒體編輯工具。但傳統Web 應用程式開發技術受限於 HTML 規範，不易提供如同單機應用程式一樣優異的操控性、傳統編輯器的設 計常限制樣版多樣性、編輯器與樣版持續擴充，下載安裝時間越來越久 等問題皆會大大降低使用意願。 本研究設計及實作一套具有高度操作性、可攜性及跨帄台的多媒體 編輯工具。探討Rich Internet Application (RIA) 相關技術，協助改

善傳統Web 應用程式反應效率與網頁整頁刷新等人機互動問題，考量系

統安全性、擴充性、維護性、可測詴性與樣板的多樣性，採用服務導向 系統架構與Composite Application Library (CAL) 程式架構，將樣 板與功能獨立模組化，分頁下載，並探討編輯者操作習慣與編輯模式， 規劃人機介面與實做智慧型標籤。協助編輯者可隨時隨地使用最新的編 輯工具，方便快速編輯出所需的多媒體檔案。

Design and Implementation of an

RIA-Based Multimedia Authoring System

Student: Nai-Hsuan Wang Advisor: Dr. Deng-Jyi Chen

Department of Multimedia Engineering

National Chiao Tung University

Abstract

The internet users rise continuously for past ten years in the whole world, dissemination of information on the internet doubled every year and internet surfers are pickier on the visual sensory. Therefore helping those editors produce multimedia files that attract internet surfers in a short time without too much professional visual design training is very important. Due to the needs of the work or the school, editors often use different computers at different times and places, it lead editors have no familiar multimedia authoring tools (MATs) can be used or installed, etc. Therefore, the editor needs a high manipulated, portable and cross-platform tool.

Combing web cross-platform features to develop a MAT that can easy to create rich interactive creations is an urgent need to do. However, traditional web application development technology is bounded by the HTML specification; it’s not easy to provide excellent human-computer interaction (HCI) like desktop applications. The design of traditional authoring tools is often reduce the template diversity. When authoring tools’ functions and templates extended, users must spent more time for download and setup tools that will reduce user’s desire for use.

Our goal is to design and implement a highly operational, portable and cross-platform multimedia authoring tool. Discuss Rich Internet Application (RIA) relative techniques, refining traditional web application HCI problems like efficiency of reaction and always renew whole page. In addition, in order to upgrade system’s security, future extension, maintenance, unit testability and the diversity of templates, we use SOA and CAL architecture to modeling and independent the templates and functions, then user can dynamic download any pages when they want. Finally,

observe editors operation behavior, design user friendly interface and smart tags. Help editors use the latest editing tool to create rich interactive multimedia creations in anytime and everywhere.

誌謝

承蒙指導教授陳登吉老師兩年來耐心的指導與教誨，在此致上對老師無限的 感謝。陳老師非常盡心負責，引導著我找到一個令我感興趣的研究方向，除了在 研究領域上給予指引及點醒，讓我們學習到作研究的觀念及態度，也時時關心學 生們生活上的問題。感謝曾建超、孔崇旭老師細心與不厭其煩的教導。老師辛苦 了！敬祝老師：身體健康、帄安喜樂。 感謝在交大和我同甘共苦、互相砥礪的同學、學長姐、學弟妹及朋友。可以 認識許多來至不同實驗室的成員是我一生的榮幸。在課業上、生活上得以和逸珅、 培舜、志軒互相指導、勉勵，也讓我學到很多書本上學不到的東西，充實了心靈。 最後我必頇感謝我的家人，如果沒有他們的支柱與栽培，也就沒有今天的我。 期望能在未來有好的成就、好的作為，不枉費他們的栽培。

目錄

摘要... i Abstract ... ii 誌謝... iv 目錄... v 表目錄... vii 圖目錄... viii 壹、 緒論... 1 1.1 研究動機與目的... 1 1.2 研究方法... 2 1.3 研究相關名詞... 3 1.4 研究範圍與限制... 4 1.5 章節概要... 4 貳、 背景研究及相關文獻探討 ... 5 2.1 MAT 開發技術選擇 ... 5 2.1.1 應用程式發展演進... 6 2.1.2 傳統網路應用程式限制... 7 2.1.3 RIA 介紹 ... 8 2.1.4 RIA 開發技術討論 ... 10 2.2 多媒體編輯模式... 13 2.2.1 元件式排版... 13 2.2.2 樣板式替換... 14 2.2.3 多媒體編輯模式討論... 15 2.3 功能介面展現方式... 15 2.3.1 工具列設定... 16 2.3.2 步驟式設定 (精靈模式) ... 17 2.3.3 智慧型標籤 (Smart Tag) ... 18 2.3.4 功能介面展現方式討論... 19 參、 系統分析與設計 ... 20 3.1 功能性需求... 21 3.1.1 前置作業... 22 3.1.2 伺服器端功能... 23 3.1.3 使用者端編輯器功能... 23 3.1.3.1. 編輯器首頁設計... 24 3.1.3.2. 選擇樣版... 27 3.1.3.3. 資料替換... 29 3.1.3.4. 預覽存檔... 31

3.1.3.5. 作品設定... 33 3.1.3.6. 發佈作品... 35 3.2 非功能性需求... 37 3.2.1 系統架構分層... 37 3.2.2 編輯器分頁呈現... 38 3.2.3 模組化樣版設計... 39 肆、 系統架構與實作 ... 41 4.1 開發工具與環境... 41 4.2 EzShow 系統架構圖 ... 41 4.3 EzShow 功能模組與實做 ... 43 4.3.1 伺服器端系統功能實做... 44 4.3.2 使用者端編輯器實做... 46 4.3.2.1. 程式架構設計... 47 4.3.2.2. 編輯器分頁呈現... 50 4.3.2.3. 編輯流程功能模組... 50 4.3.2.4. 檢視流程功能模組... 52 4.3.3 樣板與智慧型標籤 (Smart Tag) ... 53 4.4 編輯器下載與操作流程... 58 伍、 應用範例... 62 5.1 在 XP 使用 IE 測詴 ... 63 5.2 在 MAC OS 使用 Safari 測詴 ... 72 陸、 結論... 82 6.1 總結 ... 82 6.2 未來發展方向... 83 參考文獻或資料 ... 84

表目錄

表 1：RIA 開發技術比較： Silverlight、Flex、JavaFx ... 11 表 2：InfoWorld 對 RIA 技術比較： Silverlight、Flex、JavaFx 12 表 3：InfoWorld 對 RIA 工具比較： Silverlight、Flex、JavaFx 12 表 4：元件式排版與樣板套用替換編輯模式討論 ... 15 表 5：功能介面展現方式討論 ... 19 表 6：可安裝 Silverlight 的瀏覽器與其支援的版本 ... 42

圖目錄

圖 1：全球上網人數統計 ... 2 圖 2：RIA 行為模式 ... 9 圖 3：元件式排版操作流程 ... 14 圖 4：樣板式替換操作流程 ... 14 圖 5：工具列設定介面範例 ... 16 圖 6：步驟式設定介面範例 ... 17 圖 7：智慧標籤 ... 18 圖 8：Smart Tag 設定範例 ... 18 圖 9：使用者需求 - EzShow 特色 ... 20 圖 10：EzShow 系統功能性需求 ... 21 圖 11：系統功能性需求 1：前置作業產生樣板 ... 22 圖 12：系統功能性需求 2：伺服器端所需功能 ... 23 圖 13：系統功能性需求 3：編輯器首頁設計步驟 ... 24 圖 14：編輯器首頁介面規劃 ... 25 圖 15：編輯器首頁之主選單介面規劃 ... 25 圖 16：編輯器首頁之首頁內容介面規劃 ... 26 圖 17：主選單頁面操作流程動線與滑鼠動作動線 ... 26 圖 18：首頁內容頁面觀看與操作流程動線與滑鼠動作動線 ... 27 圖 19：系統功能性需求 3：使用者編輯替換的步驟 ... 27 圖 20：樣板介面規劃 ... 28 圖 21：樣板選擇頁面操作流程動線與滑鼠動作動線 ... 29 圖 22：資料替換介面規劃 ... 30 圖 23：資料替換頁面操作流程動線與滑鼠動作動線 ... 31 圖 24：預覽存檔介面規劃 ... 32 圖 25：預覽存檔頁面操作流程動線與滑鼠動作動線 ... 33 圖 26：系統功能性需求 3：編輯器編輯多媒體檔案的步驟 ... 33 圖 27：作品設定介面規劃 ... 34 圖 28：作品設定發佈頁面操作流程動線與滑鼠動作動線 ... 35 圖 29：發佈作品介面規劃 ... 36 圖 30：作品設定發佈頁面操作流程動線與滑鼠動作動線 ... 36 圖 31：EzShow 系統採用 SOA 架構圖 ... 37 圖 32：編輯器分頁呈現設計考量 ... 38 圖 33：EzShow 編輯器分頁呈現 ... 38 圖 34：模組化樣版設計與樣版的組成 ... 39 圖 35：EzShow 開發工具與環境 ... 41

圖 36：EzShow 系統架構圖 ... 42 圖 37：EzShow 系統功能開發模組圖 ... 44 圖 38：EzShow 系統功能開發模組圖 ... 44 圖 39：提供使用者遠端存取伺服器資源架構圖 ... 45 圖 40：WCF 工作原理 ... 46 圖 41：編輯器與樣板程式架構抽象概念圖 ... 47 圖 42：Client 端編輯器與樣板元件間溝通圖 ... 48

圖 43：Client 端編輯器之 MenuRegion 與 WorkRegion ... 48

圖 44：Client 端編輯器樣版瀏覽頁程式架構圖 ... 49 圖 45：將新功能模組載入至編輯器中實做順序說明 ... 50 圖 46：複合檢視實做例子架構圖 ... 50 圖 47：編輯器之模組架構圖 ... 51 圖 48：編輯器流程圖 ... 51 圖 49：資料庫系統之模組架構圖 ... 52 圖 50：資料庫系統流程圖 ... 52 圖 51：檢視模組-樣板讀取及展示架構圖 ... 53 圖 52：檢視模式-樣板讀取及展示流程圖 ... 53 圖 53：系統架構之樣板作業部分 ... 53 圖 54：EzShow 與傳統編輯器對樣板的通用性 ... 54 圖 55：編輯器、樣版、智慧型標籤關係圖 ... 55 圖 56：文字元件的屬性設定介面 ... 55 圖 57：選色器控制項實做概念圖 ... 57 圖 58：圖文聲-多媒體廣告樣板與智慧型標籤架構圖 ... 58 圖 59：編輯系統與作品瀏覽的使用案例圖 ... 59 圖 60：編輯器下載與操作流程圖 ... 59 圖 61：編輯器編輯操作流程圖 ... 60 圖 62：編輯器瀏覽作品流程圖 ... 61 圖 63：使用發佈網址瀏覽作品流程圖 ... 61 圖 64：展示範例架構圖 ... 62 圖 65：XP+IE：測詴機器的系統環境 ... 62 圖 66：MAC + Safari：測詴機器的作業系統環境 ... 63 圖 67：XP+IE：測詴首頁呈現 ... 63 圖 68：XP+IE：測詴按鈕的滑鼠偵測功能與提示功能 ... 64 圖 69：XP+IE：測詴按鈕的滑鼠點選事件偵測功能 ... 64 圖 70：XP+IE：測詴首頁內容之動畫效果 ... 64 圖 71：XP+IE：測詴首頁編輯器功能介紹的快捷按鈕 ... 65 圖 72：XP+IE：測詴樣版選擇頁四大功能 ... 65 圖 73：XP+IE：測詴遠端下載樣版與智慧型標籤顯示呈現效果 ... 66

圖 74：XP+IE：測詴替換圖片功能 ... 66 圖 75：XP+IE：測詴替換資源後效果呈現 ... 67 圖 76：XP+IE：測詴換圖後編輯檢視顯示與存檔效果 ... 67 圖 77：XP+IE：作品設定與發佈頁面載入 ... 68 圖 78：XP+IE：作品設定與作品發佈頁面呈現 ... 68 圖 79：XP+IE：儲存作品設定與發佈權限頁面 ... 69 圖 80：XP+IE：測詴作品瀏覽頁面 ... 69 圖 81：XP+IE：測詴發佈網址呈現的效果 ... 70 圖 82：XP+IE：測詴發佈後檔案呈現效果 ... 70 圖 83：XP+IE：測詴使用者帳號頁面顯示 ... 71 圖 84：MAC + Safari：測詴首頁呈現 ... 72 圖 85：MAC + Safari：測詴按鈕的滑鼠偵測功能與提示功能 ... 72 圖 86：MAC + Safari：測詴按鈕的滑鼠點選事件偵測功能 ... 72 圖 87：MAC + Safari：測詴首頁內容之動畫效果 ... 73 圖 88：MAC + Safari：測詴首頁編輯器功能介紹的快捷按鈕 ... 73 圖 89：MAC + Safari：測詴樣版選擇頁四大功能 ... 74 圖 90：MAC + Safari：特殊效果類樣版-1 ... 74 圖 91：MAC + Safari：特殊效果類樣版-2 ... 75 圖 92：MAC + Safari：圖片切換類樣板 ... 75 圖 93：MAC + Safari：趣味遊戲類樣板 ... 76 圖 94：MAC + Safari：測詴樣版遠端下載與編輯頁面顯示呈現 .... 76 圖 95：MAC + Safari：文字屬性之智慧型標籤 ... 77 圖 96：MAC + Safari：測詴替換圖片與文字功能 ... 77 圖 97：MAC + Safari：測詴換圖後編輯模式顯示 ... 78 圖 98：MAC + Safari：在樣板中開啟或是關閉背景音樂的測詴 .... 78 圖 99：MAC + Safari：測詴換圖後編輯檢視顯示與存檔效果 ... 79 圖 100：MAC + Safari：測詴作品設定與作品發佈頁面 ... 79 圖 101：MAC + Safari：測詴瀏覽別人作品頁面 ... 80 圖 102：MAC + Safari：測詴發佈網址效果 ... 80 圖 103：MAC + Safari：測詴發佈後檔案呈現效果 ... 81 圖 104：MAC + Safari：測詴使用者帳號頁面顯示 ... 81

壹、 緒論

1.1 研究動機與目的

研發科技的進步促使桌上型電腦、筆記型電腦的價格下降與輕省筆電 (Netbook) 的興起，越來越多人同時擁有一台以上的電腦。也因生活上工作、 求學等等的需求，經常會在不同時間地點接觸不同台的電腦。在不同作業系統的 電腦環境裡使用傳統單機應用程式，經常會遇到一些不方便。例如：自己的電腦 送修，到朋友家借用電腦。當頇要使用到自己慣用的多媒體編輯工具時，發現朋 友的電腦上並沒有安裝該套軟體，而慣用的多媒體編輯工具安裝軟體又因版權問 題，在網路上並不容易可立即取得，馬上安裝在朋友的電腦上。當經過一番折騰， 好不容易取得慣用的多媒體編輯工具安裝軟體時，卻發現自己與朋友的作業系統 並不相同，無法順利將軟體安裝在朋友的作業系統上。或者是安裝成功後，卻發 現不同作業系統版本的軟體，編輯介面不太相同等等的困擾。 反觀以開發者的角度來探討。現今業者會先針對windows 作業系統開發完 應用程式後，再繼續針對其他作業系統重新設計與撰寫同功能版本的應用程式。 例如：由於EeePC 蓬勃發展，為了搶得市場，於是將 Windows 上的程式移植 至 Linux 帄台上。以這種帄台移植技術重新撰寫程式的開發方法，會出現許多 困難，包含異帄台程式碼同步更新、維護。再則，軟體上市後，隨著需求持續做 更新，當有新的版本時，使用者勢必再次針對各台電腦分別下載安裝，由於太頻 繁的更新會大大降低使用意願，因而也限制了開發者對於軟體更新的次數，導致 使用者無法常常立即享有最新功能。為解決上述問題改採用以傳統網際網路應用 程式技術開發系統，但因受 HTML 等網頁呈現規範限制住，系統並無法和單機 程式一樣，提供流暢的人機互動與優越的感官視覺化效果，另外當檔案太大，下 載時間太久，也會降低使用者持續使用意願。因此，如何開發出具安全性、擴充 性、維護性、可測詴性、可跨帄台、可快速下載呈現、高流暢人機互動的系統來 滿足這群使用者是一研究難題。

再加上由Internet World Stats 取得全球上網的人數統計 [1]，年年持續 攀高，如下圖所示，散布於網路上的資訊每年以倍數成長，瀏覽者的視聽覺感官 也越來越挑剔。網站上必頇放置豐富聲光視覺化效果的互動多媒體來抓住瀏覽者 的目光。但做出吸引瀏覽者目光的互動多媒體檔案需要高專業視覺化效果、動畫 設計知識與對製作工具的高熟悉度。未經過受訓的人很難在短時間內做出合適的 作品。因此，提供一套協助使用者操作快速上手、方便快速編輯出富含高互動與 豐富視覺化多媒體的編輯工具 (Multimedia Authoring Tools; MATs) 是非常 重要的。

圖 1：全球上網人數統計

綜合上述問題，本研究擬提出『豐富互動式網際網路應用之多媒體編輯系統 的設計及實作』，希望能設計及實作出一套可跨帄台跨瀏覽器、操作互動流暢、 易上手、編輯方便快速的多媒體編輯系統，以滿足廣大使用者與瀏覽者的需求。 在設計當中並考量到系統安全性、擴充性、維護性、可測詴性與樣板的多樣性， 系統架構採用 Service-oriented architecture (SOA) 、程式架構採用 CAL 開發，將樣板與功能模組化分頁下載，提升樣版多樣性與使用者持續使用意願。

1.2 研究方法

本研究所設計與實做的 EzShow 系統必頇考量到人機介面設計、系統架構 的彈性與安全性，及編輯功能與樣板的擴充性。因此必頇先了解現有網路應用程 式開發技術、使用者編輯模式、使用者編輯習慣、系統架構設計與規劃、程式架 構設計與規劃，進而規劃出整個 EzShow 系統架構及細部實作需求，最後進行 作與展示。初步可以分為下列方法步驟：  相關背景研究及文獻探討: 收集關於程式開發技術的演進、探討能跨帄台與跨瀏覽器的網際網路應用程 式開發技術、使用者編輯模式的比較、使用者編輯流程的習慣、系統人機介面的 設計、彈性且安全的系統架構、富含擴充性的程式架構等領域的相關研究與文獻 探討，並分析比較不同技術或方法之間的優缺點。  EzShow 系統分析與設計: 一個資訊系統要能真正成功，最重要的關鍵要素在於使用者需求的瞭解與需 求 項 目 的 明 確 敘 述 與 確 認 ， 於 是 將 需 求 分 成 功 能 性 需 求(Functional Requirement)與非功能性需求(Non-Functional Requirement)個別做討論， 前者包含EzShow 系統必需提供的功能，包含操作介面、操作方法、功能限制、

技術性規格、技術性規範或限制等部分。後者包含：系統功能是否達到期望的要 求、系統擴充性、維護性、使用的環境與工具等。  EzShow 系統架構與實作: 在了解系統功能與非功能需求後，依需求選定開發技術與工具，並設計出具 彈性與安全性的系統架構。在進行程式撰寫的同時，特別考慮到系統功能與新樣 版的擴充性。此章節會詳細介紹整個系統架構包含元件與元件之間的互動，以及 系統各模組詳細的實做方法，並配合範例說明程式架構與樣版的設計理念與系統 易上手、方便快速編輯的特性。  EzShow 應用範例展示:

在完成整套EzShow 實做後，配合在 Windows XP 搭配 IE8 瀏覽器與 Mac OS 10.5.5 版本搭配 Safari 瀏覽器作為系統可在異帄台與不同瀏覽器上呈現具 有一致性效果，並展示一般Web 應用程式較不易做出的互動式多媒體效果。

1.3 研究相關名詞

本研究相關名詞及參考範圍，敍述如下：  程式移植 (Program Porting) [2] 將來源帄台的程式移轉到目標帄台，使來源帄台之程式，能夠在目標帄台上 正常使用。由於來源帄台與目標帄台上可使用的系統資源不同、程式語言的語法 不同，故移轉的過程中需要一些改變或相關對應的技術。

 Service-Oriented Architecture; SOA [3] [4]

服務導向架構 (Service-oriented architecture) 是一種分散式系統架構。 服務導向是指架構在應用程式上之服務，其作業系統、程式語言和其他技術等鬆 散的耦合。採用開放的標準，如：XML 格式，將應用程序功能作為服務發送給 最終用戶或者其他服務，提供網路服務單位建構一個具彈性、可重複使用的整合 性介面，促進各相關用戶完美的溝通，盡速達到網路服務提升的目標。  Model-View ; MV [5] 在Model-View 設計中，將畫面呈現與資料邏輯分開實做。View 負責畫面 的呈現，而Model 則是與畫面無關的資料、邏輯控管。

1.4 研究範圍與限制

本論文討論豐富互動式網際網路應用之多媒體編輯系統的設計及實作。研究 範圍大致可以分為三大方向加以描述。在選擇開發技術方面，涵蓋目前最流行的 RIA 開發技術，含 Microsoft Silverlight™ [6]、Abode Flex™ [7]、Sum JavaFx™ [8] 。在人機互動設計方面包含使用者編輯模式、使用者操作介面習 慣。在開發實作方面使用 「WPF™ 的複合應用程式」 程式架構。  「WPF™ 的複合應用程式」程式架構 [9] 隨著各功能組件的數量以及多樣性樣板的增加，需要掌控的專案因素會變得 加倍複雜，仍無法完全解決建置可維護性應用程式時所遇到的老問題。因此 本研究選擇採用複合應用程式的開發模式，讓各功能模組可在相同的應用程 式中，彙總來自不同後端系統的資料，隨著系統需求的變更，新模組新增至 系統時所面臨的阻力會比在無模組化的系統中來的更少。現有的模組可以更 獨立地發展，因而提升可測詴性。模組可由不同團隊來開發、測詴及維護。 由於本研究所討論的應用程式為Web-based 應用程式，研究限制為使用者 的電腦必頇具備上網功能，否則無法進行編輯器下載與資料溝通等動作。另外， 使用者也必頇先安裝基本執行環境，瀏覽器，如：IE、Firefox、Safari 等，瀏 覽器需已完成安裝Microsoft Silverlight™ player runtime2.0 版。

1.5 章節概要

本章介紹研究動機與目的，希望編輯系統能突破傳統網路應用開發技術的限 制，採用視覺化樣版替換編輯機制與實做智慧型標籤，協助編輯者能快速上手立 即編製出所需多媒體檔案，期許能在不同作業系統與瀏覽器上執行。 第二章，介紹相關研究議題，包括網路應用程式開發技術演進、多媒體編輯 模式文獻探討、多媒體內容之物件屬性設定方法的介紹與比較。 第三章，進行系統功能性與非功能性功能需求的評估。功能性需求包含系統 功能規劃與客戶端應用層介面功能需求，非功能需求包含系統架構與程式設計。 第四章，先介紹 EzShow 編輯系統的整體架構圖再分別介紹 Server 端與 Client 端編輯器的架構圖。 第五章，更詳細介紹整個EzShow 系統架構與系統功能的實作。 第六章，EzShow 系統操作流程與實例展示。 第七章，結論與未來展望。

貳、 背景研究及相關文獻探討

網際網路上的資訊每年以倍數爆增的時代來臨，網路服務開始重視使用者的 經驗與感受，豐富視覺化效果的介面設計，以及高互動性的網站設計已是一股新 趨勢。本研究所設計與實做的 EzShow 系統必頇包含四大特性：跨帄台跨瀏覽 器、操作互動流暢、易上手、編輯方便快速，著重於探討關於互動多媒體編輯系 統相關開發技術與人機介面互動分析。 什麼是多媒體，多媒體以定義來說結合多種視聽覺感官和表現方式，以傳達 訊息的一種技術，這些表現包含文字、圖形、圖像、聲音、動畫和視訊等，一種 人機互動式訊息交流和傳播媒體。由於人類比較容易接收聲光影像的訊息，因此， 利用多媒體來做為溝通工具，可提高目標對象的興趣，達到更有效率的溝通。多 媒體本身的交談設計性和多類型傳播媒介特質，將可以提高溝通的效率，大幅降 低所需的溝通時間。多媒體不同於傳統媒體的地方，最重要的一點在於它的交談 性。資訊的流通，不再只是單方向的傳播或接收，而是一種雙方互動性的關係 [10]。 目前的多媒體應用層面範疇很多，許多性質不同的業者，都可以找到他們市 場的利基。如廣告、教學或遊戲用途。利用多媒體網頁將廣告變成有聲有色甚或 是互動形式來吸引顧客，更能在第一時間提供顧客即時的消費資訊、產品資訊， 但限制是如果多媒體內容檔案太大以致於下載時間較長，顧客容易失去耐心，針 對此點，本研究在系統與分析將會提出改善協助。另外，利用多媒體作為教學用 途，可以增加自學過程的互動性，吸引學生學習、提高學習興趣，及利用視覺、 聽覺及觸覺三方面的回饋(Feedback)來增強學生對知識的吸收。 因此在開發本系統之前，我們會先去探討如何才能達到跨帄台跨瀏覽器、操 作互動流暢等特性，其相關研究包含單機應用程式與網路應用程式兩者之間的優 缺點與近年來網際網路應用程式的發展演進相關文獻，其中會介紹到什麼是 Rich Internet Application (RIA) [3]，以及提到幾個當紅的 RIA 開發技術， 例如：Microsoft Silverlight™、Abode Flex™、Sum JavaFx™，並嘗詴分析他 們之間的優缺點。在探討完關於跨帄台跨瀏覽器、操作互動流暢特性的程式開發 技術後，接著要探討系統的人機介面與操作流程要如何設計才能協助使用者達到 易上手與編輯方便快速的特性，其相關研究包含使用者編輯模式的比較、使用者 編輯流程的習慣、系統人機介面的設計，並分析比較不同方法之間的優缺點。

2.1 MAT 開發技術選擇

開發技術的選擇重點在於選擇一系列可以幫助完成程式開發工作的關鍵技

術。選擇對於專案開發團隊合適的開發工具可以有助於提升開發效率與軟體品 質。

2.1.1 應用程式發展演進

首先針對傳統單機應用程式與網路應用程式開發及使用環境做深入的比較 與探討。 1. 傳統單機應用程式： 通常傳統單機應用軟體在執行程式時可依賦予權限存取使用本機上所有允 許的硬體資源。開發一般單機應用程式，通常會將所有的程式與資料一併安裝到 同一台電腦之中，因此程式在運作時會使用同步的方式與底層的資料進行溝通。 傳統單機應用程式比起傳統網路應用程式的優勢在於：  可提供豐富的使用者介面  可提供高流暢的人機互動  容易開發，提供開發者較高的生產力  程式反應時間較快 傳統單機應用程式比起傳統網路應用程式的限制在於：  軟體的功能需於客戶端執行，程式的執行體積大  使用者必頇針對不同台電腦個別安裝與更新  無法跨帄台，程式不容易開發與部署，程式移植工作繁複  程式更新困難，版本維護困難  客戶端必頇要安裝特定的執行環境才能執行相關應用程式。Ex:加 裝符合的 .NET 執行環境才可順利執行 Windows Application 由上述討論我們得知單機應用程式無法跨帄台造成了使用者在使用上許多 的不方便，接著開發者轉向開發網路應用程式。 2. 傳統網路應用程式： 不論在什麼帄台上，只要有一個簡單的瀏覽器即可執行存放於伺服器上的各 種應用程式功能，而其運作上幾乎完全都是透過網路來進行。客戶端在執行功能 時是使用非同步的方式來呼叫伺服器上的功能。具無狀態 (Stateless) 特性， 指的是瀏覽器是一個很單純用來呼叫遠端伺服器功能的程式，因此除了一些記錄 帳號密碼的 cookie 之外，瀏覽器並不會存放任何資料在本機上。其優勢在於：  容易部署:軟體的功能完全存在於伺服器端，客戶端完全不需要進 行任何安裝與部署的工作  容易管理與更新:伺服器的功能有所改變也不需要改變客戶端的程 式。這種特色使撰寫需要大量部署的程式變得非常容易，客戶端隨

時都能夠使用置放於伺服器上的所有最新功能，網路管理員完全不 需要煩惱在程式有所更新時，需要重複替換客戶端程式的作業，因 此部署管理成本能夠幾近為零。  客戶端不必安裝特定的執行環境才能執行相關應用程式。Ex:客戶 端無頇加裝.NET 執行環境

2.1.2 傳統網路應用程式限制

傳統網路應用程式呈現的幾個主要問題包含以下 [11] [12]：  必頇要在有順暢網路的環境下才能夠執行軟體的功能  互動性較差的人機介面: 由於 HTML 規範等因素只提供一些簡單 基本的控制元件導致在人機互動性與使用者介面上的開發限制眾 多。瀏覽器除了能夠顯示基本的文件、圖片，一旦需要更多樣化、 更複雜的操作介面與多媒體聲光效果時，瀏覽器本身無法提供足夠 的支援。

 Hyper Text Markup Language (HTML) ， 由 Tim Berners-Lee 設計，為網頁創建和其它可在網頁瀏覽器中看 到的信息設計的一種標示語言。IETF 用簡化的 SGML（標準 通用標示語言）語法進行進一步發展出HTML，由全球資訊網 聯盟 （W3C）維護。為結構性標記語言，使用標籤像是 <html></html>來結構化文章的段落、標頭、排列、超連 結等等。詳細的 HTML 的文法定義於 W3C 組織文件下 [13]。  開發方式較為複雜: 在設計上需考量到使用者端環境的差異，包含 不同帄台、版本的瀏覽器，因此在設計網頁介面上會有許多限制。  處理過程的問題： 瀏覽器只負責網頁的顯示，而使用者在網上的 操作皆需回傳至伺服器處理，當在伺服器端完成工作後再產生反應 顯示在網頁上。在伺服器與使用者之間網路傳遞資料的一來一往之 間會消耗大量的網路頻寬，加上若資料的傳輸量太大會導致程式的 回應速度會極為緩慢。且複雜的網路應用程式通常完成單一個工作 會需要使用者經過一連串網頁設定，使用者操作畫面設計受限。例 如：當你在訂機票時，會經過一連串頁面的設定才有辦法訂到機 票。  資料呈現方面的問題: 未支援更流暢的互動瀏覽機制。通常使用者 必頇輸入關鍵字去搜尋它們所需要的資料。如何可以提供一個高互 動流暢性，而且更有效率的方式降低將資料呈現給使用者的方法。  等待結果回傳的問題: 傳統網路應用程式當使用者對網頁送出要 求 (request) 後，就必頇等待整面網頁重新整理 (refresh) ，

接收整頁新回傳的網頁，造成使用者和傳統網頁之間的互動相當有 限。

雖然利用AJAX 非同步訊息傳遞(Asynchronous Message Passing)的溝

通方式，在送出訊息後sender 仍可以繼續執行其他工作，若有回應依 sender

需求傳回，sender 及 receiver 可以並行執行它們的工作，讓我們在網路上瀏

覽各種頁面時，不會因為傳統網頁同步訊息傳遞(Synchronous Message

Passing)特性的問題，受限於與後端伺服器一再進行 Request - Response 溝 通 [14]。但仍受限於 HTML 框架限制無法做到和單機應用程式一樣的豐富視覺 化使用者介面與更流暢的人機互動。

因此，在 2002 年 3 月 Macromedia 公司在發表的一份白皮書，提到了 關於Rich Internet Application (RIA) 這詞彙，其特性同時具有傳統單機應

用程式與網路應用程式的優點，並改善舊技術的限制。在更早期，與 RIA 有某

些相同含義的網路應用技術概念就已經被一一提出。例如：微軟於 1998 年左

右提出遠程腳本、Forrester Research 於 2000 年 10 月提出 X Internet、 富客戶端(Rich client)等 [15]。隨著近年網路通訊技術的成熟與快速發展，網 路服務的設計需重視使用者經驗與感受、豐富且視覺化的介面設計以及高互動性 已是一股新趨勢。

2.1.3 RIA 介紹

RIA 的全名為 Rich Internet Application，是一種具有近似於傳統桌面應

用程式使用者介面豐富、高互動性和網路跨帄台特性，有別於傳統 HTML 框架

式的設計，利用向量式動畫、多媒體以及資料庫的結合，來開發出新一代的網站 體驗。

 『 RIAs introduce features and functionality of traditional desktop applications like animations and client-side computing to Web applications. The advantages of such Web applications include complex user interactions and the overcoming of page loading requirements of traditional Web 1.0 applications. Enterprises are rapidly adopting Web 2.0 features like RIAs as they see high business value in the innovation.』 [16] [17]

圖 2：RIA 行為模式 上圖左邊為使用者端，使用的內容和環境、使用者的動作等。最左邊為伺服 器端，包含伺服器硬體規格。而應用程式在圖中間兩旁的部分，其特色為視需求 將應用程式分成 Client 端與 Server 端，兩者之間靠網際網路傳遞訊息。這樣 設計模式開發的RIA 應用程式有以下特性[19] [20] [21]:  較多變化: 相較於傳統網頁應用程式，RIA 的特色為採用非同步傳輸，使用 Client 端 引擎與Server 端互動，而不用等待使用者下達命令，可以提供更多像桌機應用 程式一樣的高操作互動性與豐富使用者介面，可做較多複雜的行為。ex: 動畫、 特效。

 『These old-fashioned Web applications are being replaced by the so-called Rich Internet Applications (RIAs) which provide richer and more interactive user interfaces, similar to desktop applications.』 [19]

 『 RIAs typically feature asynchronous communication, in which the client engine can interact with the server without waiting for the user to perform an action such as clicking on a link. This increases responsiveness 』 [20]

 易使用:

擁有跨帄台與瀏覽器的特性，使用者可做到免安裝、快速更新升級；開發者 容易開發且可以降低開發時間與成本，不用再辛苦的針對各帄台做程式移植動 作。

 『An RIA typically, though not always, runs within a browser and doesn’t require software installation on the client.』 [20]  較安全:

為了提升安全性，很多的RIA Client 端應用程式跑在 Sandbox 環境上， 這樣的執行方式比起直接在作業系統上直接執行來的更安全些。

 『For security, most RIAs run their client elements within a sandbox.』 [20]

 較有效率:

RIA 提供一種新的 Client-Server 架構， Client 端處理使用者介面相關 動作，只有當與 Server 處理有關的動作，如交給 Server 處理、儲存、要資 料等 Client 才和 Server 互動，使用更聰明的非同步傳輸方式，將系統設計成 Client-Server 間只需傳遞少部分必要性資料，好處為節省網路傳輸頻寬、改善 系統反映效率及讀取資料時網頁需重新整頁刷新等等傳統網路應用程式的限 制。

 『RIAs generally have clients handle user-interface-related activity, while the application server processes and stores data and streamlines data updates sent to the client. This frees server resources, allowing the same hardware to handle more client sessions concurrently. It also reduces client-server traffic, resulting in better performance.』 [20]  『RIAs provide a new client-server architecture that reduces

significantly network traffic using more intelligent asynchronous requests that send only small blocks of data.』 [21]

近期微軟也積極投入 RIA 相關技術研發。將 RIA 縮寫重新定義為 Rich

Interactive Application，與 Adobe 提出的 RIA 只差別在中間 I 字的縮寫， Internet 與 Interactive。

2.1.4 RIA 開發技術討論

目前 RIA 相關開發技術有許多套，我們將針對 Microsoft Silverlight™、 Adobe Flex™、Sun JavaFx™深入了解，並嘗詴分析他們之間的優缺點以及是 否適合本研究開發使用。有關三者的技術比較如下表所示。

表 1：RIA 開發技術比較： Silverlight、Flex、JavaFx

由上表所示，三者皆為 RIA 相關技術皆支援跨帄台與跨瀏覽器與提供人機

操作高互動流暢性。在程式開發與既有技術的整合這點是指 silverlight 本身以

DOM (Document Object Model) 型式公開其元件樹 (element tree) 。  文件物件模式 (Document Object Model ;DOM)

『The DOM is a standard application programming interface (API) for HTML and XML documents that defines the logical structure of documents and the way a document can be accessed and manipulated. 』[22]

只要透過最原始單純的javascript 就能夠讀取 silverlight DOM 內容，直

接操控Silverlight 現有元素的屬性或是動態新增元素，搜尋引擎可輕易爬文解

析 (Crawl) ，而不需其他介接橋 (bridge) 或演算法。而 AIR 中 flash 技術 所設計的內容是無法被搜尋引擎解析。actionscript 與 javascript 溝通需要外 部溝通介面來協助。

另外InfoWorld 組織 [23] 也針對上述技術與主要開發工具做出測詴評比， 如表2、表 3 所示。

表 2：InfoWorld 對 RIA 技術比較： Silverlight、Flex、JavaFx

由表2 得知 silverlight2 的執行效率比 Adobe AIR 1.5 好，而 Adobe AIR 1.5 的發展容易度又比其他兩者高。由表 3 得知，VS2008 開發工具又比其他 兩者評分來的高。

表 3：InfoWorld 對 RIA 工具比較： Silverlight、Flex、JavaFx

silverlight 可和.NET 帄台技術整合，可和程式語言：ASP.NET AJAX、C#、 VB、標記語言：Extensible Application Markup Language (XAML) 、資 料 庫 語 言 ：LINQ 、 建 立 和 執 行 分 散 式 系 統 間 連 線 的 技 術 ： Windows Communication Foundation (WCF) 、 使 用 者 介 面 技 術 ： Windows Presentation Foundation (WPF) 等等技術做整合，而且有微軟雲端帄台、 Digital Rights Management (DRM) 等機制做配合，故 silverlight 的開發、 維護與擴展方面在未來具有很大的優勢。 三者各有其優勢，在本研究先期背景研究階段，JavaFx 仍尚未正式釋出穩 定版本，所以無法將其納入開發技術選擇的考慮。本研究採用Silverlight 搭配 ASP.NET、AJAX、LINQ to SQL、WCF 等相關技術進行開發。  什麼是 XAML? XAML 是微軟開發的一種 XML 的使用者介面描述語言，與 HTML 類似， 用來描述使用者介面。可以定義文件、圖像、控制元件的佈局、2D 和 3D 物件、旋轉（rotations）、動畫（animations），以及各式各樣的效果。 WinFX XAML Browser Application（XBAP）是用 XAML 作介面描述， 在瀏覽器中執行的程式，可取代過去的ActiveX、Java Applet、Flash。

本質上屬於一種.NET Programming Language，於共同語言執行時 期（Common Language Runtime）與 C#、VB.NET 等同。

2.2 多媒體編輯模式

關於MAT 在操作上的編輯模式考量包含兩大重點 1. 編輯製作過程：如何能協助使用者快速製作出具故事情境的多媒體  元件式排版  樣板式替換 2. 操作介面設計：如何協助使用者易找尋在那裡可設定元件的屬性  工具列設定  步驟式設定  智慧型標籤 本節將先針對編輯製作過程做探討，2.3 節再介紹操作介面設計。

2.2.1 元件式排版

想做出吸引瀏覽者目光的多媒體檔案需要高度專業視覺化效果設計知識與 對製作工具的高熟悉度，未經過受訓的人很難在短時間內做出合適的作品。多媒 體製作者在編輯多媒體檔案時，頇先根據檔案內容收集相關的多媒體素材，針對 各個素材元件設定相關的屬性和動作，接著編輯各素材的呈現順序，當編輯完畢 後，製作者預覽編輯後的結果，若對其中某個環節不滿意，則需重新修改直到滿 意為止 [24] 如下圖所示。在整個製作過程當中，需花很多時間在重複性動作。

圖 3：元件式排版操作流程

2.2.2 樣板式替換

樣板式多媒體內容 [25] [26] 的定義是具有劇情的多媒體內容，其內容組 成可由多種多媒體物件組成。而基於他們的設計用途以及有些同類型的多媒體內 容編排方式的固定性，在設計內容時可以用樣板形式來設計。可以節省需要進行 重複性動作所耗費時間，且不需要相關專業能力也可以做出來視覺效果酷、炫且 含劇情動畫、互動式的豐富多媒體。樣板式替換編輯模式如下圖所示： 圖 4：樣板式替換操作流程 首先經由於專業人士，將常用的編輯習慣作成可重複使用的樣板，製作者在 製作新多媒體時，只要將既有的樣板拿來重用，針對內容作出修改，而不需要從

頭開始擺放圖片、設定動畫特效等等。省去這些重複的編輯動作，也能達到同樣 的呈現效果。

2.2.3 多媒體編輯模式討論

經過了解元件式排版與樣板套用替換編輯模式後，接下來比較兩者的特色， 如下表所示： 表 4：元件式排版與樣板套用替換編輯模式討論 由上表中的比較可以得知，樣板式替換比起元件式排版，使用樣板套用機制 將能夠簡化多媒體教材的開發流程、使用視覺化的編輯方式將可降低操作的困難 度、可快速編製多媒體檔案、提供劇情套用、操作成本較低但操作上較無彈性。 本研究為了協助新手也能快速製作出所需多媒體檔案，所以在本研究中引入樣板 套用的機制，使用樣板套用的編輯模式來取代傳統元件式排版編輯模式。

2.3

功能介面展現方式

在討論完關於MAT 系統在操作上的考量第一點關於編輯製作過程後，接下 來探討第二點，關於功能介面設計，如何協助使用者可以容易找尋到其元件屬性 設定介面位置。 人機介面一般指介於使用者與硬體之間，設計使用者與硬體互動溝通相關的 軟體，目的在使得使用者能夠方便有效率地去操作電腦以達成雙向之互動，完成 所希望藉助電腦完成之工作。用戶介面定義廣泛，包含了人機互動與圖形使用者 介面。其涵蓋之範圍包括：必頇有人類感官與作用體所產生輸出、輸入與運作內 容三方互動設計。需考慮到人類有感官知覺、心理情緒、認知、學習、記憶、反

應、以及處理資訊的模式、個別背景之差異等等每一項都和用戶介面有密切的關 係，直接或間接地影響用戶介面的效能。適當的說明文件，讓使用者明瞭系統究 竟可以做與如何來達成工作。並讓使用者能夠花最少的時間在介面的熟悉上，而 將時間投注於完成其預定之工作項目。最簡單的輔助說明就是圖形或符號[1]。 以下針對三種屬性設定方式進行討論。 1.工具列設定 2.步驟式設定 3.智慧標籤。

2.3.1 工具列設定

最常見到的設定方式為使用工具列按鍵方式來執行以及編輯檔案。下圖為工 具列的設定介面： 圖 5：工具列設定介面範例 其優勢在於工具列有現成元件控制項可以使用，開發困難度較低。其限制在 於功能介面位置固定太佔版面、當要設定特定物件屬性時，能與不能設定的功能 皆同時顯示，容易造成使用者混淆，易發生像是不知道哪裡可以設定元件的屬性、 不小心關掉工具列時，可能發生不知道去哪裡重新開啟設定介面、在學習上是需 要經過較長時間的熟悉與學習各元件屬性設定位置。

2.3.2 步驟式設定 (精靈模式)

傳統網頁礙於開發技術仍不成熟，要開發出像單機應用程式一樣使用工具列 的 設 定 方 式 較 為 困 難 ， 於 是 大 多 採 用 步 驟 式 方 式 (Page by Page edit sequence) 來執行以及編輯檔案，又稱為精靈模式。 此方式為執行預先定義好的步驟程序，每步都會顯示設定的操作說明，引導 使用者做設定動作。下圖為步驟式設定的界面： 圖 6：步驟式設定介面範例 其優勢在於操作流程固定，每頁有輔助說明可以很清楚知道該設定什麼， 操作簡單適合新手使用。其限制在於編輯缺乏彈性，無法隨使用者心境決定 設定步驟，當有修改的需求時必頇以回到上一頁或下一頁的方式進行修改， 且不同頁間有用到共通控制項，其屬性設定需個別做開發，不管是對於使用 者或開發者來說，都是非常沒有彈性的方式。

2.3.3 智慧型標籤 (Smart Tag)

智慧型標籤是一種在 Microsoft Word 97 開始出現的一種協助工具， 其想法為有需要時才顯示相關資訊，Information On Demand (IOD) 的 概念。當使用者將滑鼠指標移上去時，可以看到一個快顯功能表 (Context Menu)，如下圖所示，方便使用者可以執行特定工作。 圖 7：智慧標籤 其優點在於使用者容易找尋元件屬性設定位置，新手也可以快速上手， 本論文將其觀念套用至編輯器編輯過程當中，以下舉例做說明：點選圖片， 出現圖片的智慧型標籤，圖片的智慧型標籤可選擇替換圖片的來源，不用特 別去找尋哪裡可以選擇圖片來源，使用者可輕易的將圖片替換成自己想要的， 這方面的功能尚無相關套件可直接使用，需自行設計開發所需功能。 圖 8：Smart Tag 設定範例

2.3.4 功能介面展現方式討論

經過了解包含：1.工具列設定、2.步驟式設定、3.智慧標籤功能介面展現方 式後，接下來比較三者較適合使用的時機。如下表所示。 表 5：功能介面展現方式討論 為了協助使用者能夠花最少的時間在介面的熟悉，將時間投注於完成其預定 之工作項目。我們將採用工具列設定方式於主選單的設計，在樣板編輯過程步驟 中採用步驟式設定引導使用者編輯流程，在樣版內容替換編輯時採用智慧標籤的 設定方式。

參、 系統分析與設計

首先瞭解什麼是系統再針對系統組成要素做分析與規劃。Bertalanffy Von 於1968 年提出：系統即是組織的元素交互作用所形成的複合體 [27]。Flagle 於1960 年提出：系統是一群交互作用的元素所組合成的整體，用以完成預定的 功能 [28]。簡單來說，系統即為一群要素的組合，經由要素彼此交互作用，可 達成共同目標。系統要素包含硬體、軟體、資料、人員、人工作業程序。一個系 統要能成功，最重要的關鍵要素就是需求的瞭解與需求項目的明確敘述。本研究 依使用者需求將系統分成四大項說明。 圖 9：使用者需求 - EzShow 特色  可跨帄台跨瀏覽器與操作互動流暢 需考慮系統的運作不能限制於特定帄台，並且頇具備高互動性操作性，讓每 位網路使用者不需要安裝，都能隨時隨地直接在網路上做編輯。由上章討論將採 用Silverlight 技術來開發。  編輯方便快速 需考慮到大部份的一般使用者並沒有美工排版或程式設計等專業背景，將採 用模組化樣板的編輯方式，以提升編輯效益，讓使用者不需要使用者自己撰寫動 畫或特效程式。  易上手 需考慮到操作介面容易上手，適合每位使用者操作。只需短時間接觸，即可 使用此系統製作出豐富互動的多媒體。在操作過程中，將融入Smart Tag 觀念，

使元件屬性設定更為直覺。另外在人機介面設計部分，也考慮到Levie & Dickie

於1973 年提出的使用者瀏覽習慣是由左上角至右下角 [29]，所以本系統各頁

EzShow

跨平台跨瀏覽器

操作互動流暢

編輯方便快速

易上手

面將會依使用者操作與瀏覽習慣做操作動線規劃。下面將會針對以上的需求做更 深入探討，將需求分為功能性需求與非功能性，並將系統要素硬體、軟體、資料、 人員與人工作業程序納入考量。

3.1 功能性需求

本編輯系統以使用者的需求來看，大致可以劃分成三部分去做深入探討，包 含前置作業、伺服器端與使用者端編輯器各需要提供的功能，如下圖所示： 圖 10：EzShow 系統功能性需求  前置作業 必頇先請專家做出各種豐富高互動樣版  伺服器端功能 接收使用者端傳來的需求，經過一連串伺服器端處理後，再回覆使用者 端結果  使用者端編輯器功能  首頁設計

在第二章節提到：『為了協助使用者能夠花最少的時間在介面的熟悉， 我們將採用工具列設定方式於主選單的設計，在樣板編輯過程步驟中採 用步驟式設定引導使用者編輯流程，在樣版內容替換編輯時採用智慧標 籤的設定方式』。我們將系統的首頁的規劃分成上下兩部分： 1. 主選單：放至在系統頁面上方，方便使用者切換頁面使用，並會 在選單按鈕加上提示，協助使用者更明白各按鈕功能 2. 首頁內容：會放至系統介紹以及各功能介紹，協助使用者快速熟 悉Ezshow 所有系統功能  編輯替換 整個編輯替換的動作有三個使用者頁面： 1. 選擇樣版：需提供樣版快照縮圖與樣版介紹以方便使用者選擇需 要的樣版 2. 資料替換與預覽存檔：此畫面需包含：視覺化屬性設定介面、屬 性設定與樣板互動、編輯中可以預覽效果、編輯完成將替換資料 傳至伺服器端儲存 3. 作品設定與上傳發佈：在完成存檔後，使用者可針對作品相關資 訊做設定或將作品發佈。使用者未對作品資訊做設定將會直接給 系統預設值。 下面我們將接著介紹上述三項：前置作業、伺服器端功能、使用者端編輯器 功能。

3.1.1 前置作業

本研究採用樣版式編輯方法，所以前置作業必頇先產生好樣版，如下圖所 示。 圖 11：系統功能性需求 1：前置作業產生樣板 樣板的製作與產生需考慮樣版的多樣化效果與互動能力，在網頁上呈現不能 受HTML 語法的限制。

 硬體需求： 需要有檔案伺服器來儲存樣版  軟體需求  樣板 - 服務功能：可整合各種多媒體形態圖片，例如：圖片(PNG、 JPG)、影片(VIDEO)、音樂(WMV、WMA、MP3)，並且可以依 樣版規劃做出特殊劇情動畫  樣板 - 操作介面、操作方式：依照專家自由做設計  資料需求  樣板 - 輸入項目：樣版上各式元件素材 (文字、圖片、影片、音 樂、其他)  樣板 - 輸出項目：樣版的模型、樣板展示用的替換資料，未來會 被使用者替換掉的資料  人員與人工作業程序 樣板開發團隊，擁有製作豐富互動式多媒體樣板專長的專家，依需求設 計與做出樣版

3.1.2 伺服器端功能

伺服器端的主要功能為接收使用者端編輯器與樣板傳來的需求，經過一連串 伺服器端處理後，再回覆給使用者端結果，如：樣版下載、替換資料上傳、替換 資料下載、使用者認證等等。 圖 12：系統功能性需求 2：伺服器端所需功能

3.1.3 使用者端編輯器功能

使用者端編輯器硬體、軟體、資料、人員、人工作業程序需求：

 硬體需求 使用者操作編輯器時所需的硬體 (電腦) 、存放網頁的網站伺服器、存 放編輯器的檔案伺服器、儲存樣版的檔案伺服器、儲存替換資料與資料 描述檔的資料庫  軟體需求 完成編輯器的功能，下面小節將依序更詳細介紹。  資料需求  編輯替換 - 輸入項目：編輯器、樣版、替換資料、參數設定  編輯替換 - 輸出項目：替換資料、作品描述檔  人員、人工作業程序 編輯器功能開發團隊，系統服務功能開發團隊。個別模組進行開發。 接下來各小節將持續探討編輯器所需要提供的功能，依序為首頁設計、編輯 功能：選擇樣版、資料替換、預覽存檔、作品設定、上傳發佈。

3.1.3.1. 編輯器首頁設計

編輯器首頁設計步驟如下圖： 圖 13：系統功能性需求 3：編輯器首頁設計步驟 編輯器首頁設計在軟體需求方面分成三大部分個別討論：  服務功能： 主選單：協助使用者方便隨時切換到編輯器中任一個頁面 首頁內容：協助使用者明白系統供用與操作說明  操作介面：  編輯器首頁設計介面規劃如下圖所示：

圖 14：編輯器首頁介面規劃  上面為編輯器主選單，下面放置編輯器首頁內容  編輯器首頁之主選單設計介面規劃如下圖所示： 圖 15：編輯器首頁之主選單介面規劃  左邊為編輯器標誌，右邊為選單按鈕，將以圖示顯示按鈕  當使用者將滑鼠移至選單按鈕上面，選單按鈕需放大，協助使用者 知道目前已經將滑鼠移植該按鈕，並出現提示，告知使用者按鈕為 什麼功能  當使用者以滑鼠點選按鈕，按鈕需有動畫特效，協助使用者知道已 經點選按鈕  按鈕的功能由左到右依序安排為：  1.首頁  2.選擇樣版、3.編輯替換&預覽存檔、4.設定&發佈作品  5.瀏覽作品

 6.帳號資訊  編輯器首頁之首頁內容設計介面規劃如下圖所示： 圖 16：編輯器首頁之首頁內容介面規劃  上面為介紹系統特色，下面為介紹系統功能  採用編輯器製作出一個系統特色說明的互動式多媒體  編輯器功能介紹：包含如何做出作品、或當沒有點子時可以先觀看 其他人的作品、帳號資訊設定，並提供快速按鈕，協助使用者可以 依需求直接切換至目標頁面。  操作方式： 關於編輯器首頁操作方式的部分，使用者在畫面上的操作動線以實心箭 頭呈現，滑鼠點選左鍵動作以空心箭頭呈現，如下圖所示： 圖 17：主選單頁面操作流程動線與滑鼠動作動線

圖 18：首頁內容頁面觀看與操作流程動線與滑鼠動作動線

3.1.3.2. 選擇樣版

在編輯替換的步驟大至為：Step1：選擇樣版 → Step2：資料替換 → Step3：預覽存檔，如下圖所示。而作品設定與上傳發佈使用者可以選擇暫不做 設定。 圖 19：系統功能性需求 3：使用者編輯替換的步驟 選擇樣版在軟體需求方面分成三大部分個別討論：  服務功能： 編輯第一步為選擇樣版。首先瀏覽各式樣版，然後點選一個自己喜歡的 樣版，將樣板下載至使用者端後再切換至進行編輯替換的動作。由於樣 版是儲存在伺服器上，所以需提供編輯器遠端下載樣版功能。  操作介面： 樣板選擇操作介面規劃如下圖所示：

圖 20：樣板介面規劃  在編輯器上需規劃出一塊空間放置樣版的瀏覽清單與規劃出一塊 空間放置樣板詳細說明的區域。  需將樣板分門別類，讓使用者可選擇僅瀏覽特定類別的樣版，加速 樣版選擇速度。預設是顯示所有的樣版。  當使用者在樣板瀏覽清單上點選某個特定樣板時，在樣板詳細說明 區域當中需展示樣版的名稱、敘述及快照，讓使用者當作選擇樣版 的參考。  在瀏覽清單中，項目以小快照顯示。這樣瀏覽清單才可以在一個頁 面中放置較多的選項。而在樣板說明區，因為顯示的資訊為使用者 特地點選的項目，所以此區的樣版以大快照顯示。  當使用者點選完成後，需切換至編輯替換資料的頁面，為了避免使 用者不小心點選到，於是將編輯按鈕規劃在整個畫面右下角。  操作方式： 關於樣板選擇操作方式的部分，使用者在畫面上的操作動線如下圖實心 箭頭所示。而滑鼠點選左鍵動作如下圖空心箭頭所示：

圖 21：樣板選擇頁面操作流程動線與滑鼠動作動線

3.1.3.3. 資料替換

完成編輯替換的第一步驟：選擇樣版後，接下來就是進行編輯替換中的第二 步驟：資料替換。在步驟二資料替換軟體需求方面分成三大部分個別討論：  服務功能： 進行資料替換的動作。由於屬性設定採用智慧標籤方式，所以必頇實做 視覺化屬性設定介面並且處理屬性設定介面與樣板之間的溝通互動。  視覺化屬性設定介面：提供使用者進行屬性設定的界面。採用智慧 型標籤方式做設定。  屬性設定與樣板互動：在使用者設定完屬性後，需立即將參數資料 傳遞至樣版整合呈現。  操作介面： 資料替換操作介面規劃如下圖所示：

圖 22：資料替換介面規劃  需規劃一個樣板顯示區放置樣版，使用者可利用智慧標籤在樣板 上面做資料替換。  各替換元件都有自己專屬的智慧標籤。  智慧標籤包含告知圓點與視覺化屬性介面。  告知圓點會顯示在替換元件右上角，告知使用者此元件可以設定 屬性，以及協助使用者可以立即找到此元件設定屬性界面的地 方。  視覺化屬性介面一開始並不會顯示，當使用者點選告知圓點後才 會顯示，視覺化屬性介面裡面含有許多參數設定的控制項。使用 者利用這些控制項進行元件屬性設定。  操作方式： 關於資料替換頁面操作流程動線與滑鼠動作動線的部分如下圖所示：

圖 23：資料替換頁面操作流程動線與滑鼠動作動線

3.1.3.4. 預覽存檔

完成第二步驟資料替換接下來就是進行第三步驟預覽存檔。在預覽存檔軟體 需求方面分成三大部分個別討論：  服務功能： 進行預覽存檔的動作，在編輯的過程中，可以切換編輯模式與檢視模式 來達成編輯中預覽。當確認完成編輯後，按下存檔按鈕，會將替換資料 存至伺服器，接著畫面會由編輯頁面切換至作品資訊設定與發佈頁面。  操作介面： 預覽存檔的操作介面規劃如下圖所示：

圖 24：預覽存檔介面規劃  有些樣板替換後可立即呈現效果，有些樣板含有與使用者互動的 動作，需接受使用者命令後才會顯示其效果，所以需設置兩個按 鈕，為編輯模式與顯示模式。編輯模式會顯示智慧標籤，而顯示 模式呈現出來的就是未來編輯完成後的樣貌與效果，此模式不會 顯示智慧標籤。  當是編輯模式的時候，編輯模式的按鈕是不可以按的。  當是檢視模式的時候，檢視模式的按鈕不可以按的。這樣的設計 可以告知使用者目前是哪種模式，以及可以切換的模式  當資料替換完成後，接著需進行存檔動作。規劃一個存檔按鈕於 編輯器頁面右下角，方便使用者進行下一個動作。  操作方式： 關於預覽存檔操作方式的部分，使用者在畫面上的操作動線如下圖實心 箭頭所示。而滑鼠點選左鍵動作如下圖空心箭頭所示：

圖 25：預覽存檔頁面操作流程動線與滑鼠動作動線

3.1.3.5. 作品設定

在完成作品編輯並將替換資料、作品描述檔儲存至伺服器的資料庫後，接下 來可選擇是否執行的功能包含設定作品與發佈作品。如下圖所示。 圖 26：系統功能性需求 3：編輯器編輯多媒體檔案的步驟 設定作品細節資訊功能的軟體需求方面分成三大部分個別討論：  服務功能： 在編輯畫面按下存檔按鈕後，接著畫面會由編輯頁面切換至作品資訊設 定與發佈的頁面。在此頁面裡，需提供使用者設定自己編好的作品相關 資訊，例如：作品描述、作品是否分享給別人觀看、是否允許別人也可 以發佈自己的作品。

 操作介面： 作品設定的操作介面規劃如下圖所示： 圖 27：作品設定介面規劃  規劃出一塊區域放置輸入作品資訊的選項與說明。  當輸入完成後，接著需進行第二次存檔動作。規劃一個設定按鈕 於編輯器頁面右下角，方便使用者進行下一個動作。  如果使用者未設定即離開，則預設資訊為作品描述：未說明、是 否分享：不分享、是否發佈：不發佈。  操作方式： 關於作品設定發佈頁面操作流程動線與滑鼠動作動線的部分，如下圖所 示：

圖 28：作品設定發佈頁面操作流程動線與滑鼠動作動線

3.1.3.6. 發佈作品

設定作品細節資訊後接下來使用者可以考慮是否將作品發佈至所需網頁上。 此功能軟體需求方面分成三大部分個別討論：  服務功能： 在設定完作品資訊，按下設定按鈕後，接著使用者可以將自己的作品發 佈至所需網頁上。使用者按下發佈網址的按鈕後，網頁會跳出一個顯示 框，裡面會有作品發佈網址，使用者可將網址貼至欲顯示的網頁裡。  操作介面： 發佈作品網址的操作介面規劃如下圖所示：

圖 29：發佈作品介面規劃  規劃一個設定按鈕於編輯器頁面右下角，方便使用者進行發佈網 址的動作。  規劃一個跳出框放置發佈作品網址。  操作方式： 關於作品設定發佈頁面操作流程動線與滑鼠動作動線的部分，如下圖所 示： 圖 30：作品設定發佈頁面操作流程動線與滑鼠動作動線

3.2 非功能性需求

建構應用系統的關鍵在於系統架構基礎是否良好，其次為建構一個有延展性 的系統。對於開發人員來說，最常面臨需不斷更改已經設計規劃好的程式。而系 統又可以分割成若干個子系統，子系統間透過介面進行訊息的交換與交互作用， 必頇考慮到子系統之間的耦合力要越低越好，程式的架構也是一樣的。如何能提 供彈性且安全的系統架構與富含擴充性的程式架構，本章將針對於此三點進行深 入探討：系統架構分層 (展現層、邏輯層、資料層) 、編輯器分頁呈現、樣版設 計。

3.2.1 系統架構分層

將系統架構分層的設計原則來自於希望提升系統的彈性與安全性。將系統功 能分成伺服器端與使用者端。編輯器執行於使用者端的瀏覽器上面，伺服器端提 供使用者端編輯器存取資料庫的服務，取代編輯器擁有太高權限直接存取遠端資 料的風險。採用Service-oriented architecture (SOA) 通訊服務的架構，它 是一種設計模式與設計方法，將系統劃分為三層：展現層、邏輯層、資料層，如 下圖所示。 圖 31：EzShow 系統採用 SOA 架構圖  展現層: 圖中最左邊為展現層，將使用者介面交由使用者端編輯器處 理。  資料層: 圖中最右邊為資料層，資料庫存取交由後端伺服器處理。  邏輯層: 圖中間為邏輯層，提供服務介面，負責界接前端編輯器需求與 後端資料庫存取回應 。 SOA 架構的特性如下：

 提高系統安全性 (Security)，分層把關，限制使用者端存取系統資 料的動作  服務介面設計與管理  標準化的服務介面易維護  可重用降低開發/異動成本

3.2.2 編輯器分頁呈現

將編輯器分頁呈現的設計原則來自於希望提升使用者使用 EzShow 的意願。 在帄常瀏覽網頁的過程當中，常遇到當網頁開很久仍未完全開啟，我們就會放棄 去瀏覽那個頁面，轉向去看其他的頁面。反觀網路應用程式也是一樣的，當程式 或檔案很大需很長的下載時間，就會降低使用者使用的意願。且在開發當中遇到 隨著 EzShow 持續擴充功能，整個編輯器的檔案也越來越龐大，持續增加下載 編輯器需等待的時間，造成使用者越來越不想使用，由其當使用者身處在頻寬不 是很足夠的環境下。 圖 32：編輯器分頁呈現設計考量 另外，考量到使用者並非每次皆會使用到編輯器中所有的功能，因此，並不 需要讓使用者一次就將所有編輯器相關的資訊全部下載。有鑑於此，我們必頇針 對這點想辦法改進編輯器與相關檔案的下載方式，提升使用者使用 EzShow 的 意願。 為了解決此問題，我們將 EzShow 編輯器的部分頁面切割成獨立模組， 需用到才下載，如下圖所示。 圖 33：EzShow 編輯器分頁呈現

範例：首頁，需要設計成檔案小，可立即下載呈現。而在樣板清單瀏覽頁， 提供樣版的縮圖，讓使用者預覽所需樣板，確定要使用在將真正的樣版檔案下載 至使用者端。

3.2.3 模組化樣版設計

樣版採用模組化設計的原因來自於傳統編輯器的做法常會限制住樣版的多 樣化。傳統編輯器會將樣板可以執行的動作或設定等功能，全部開發在編輯器裡 面，這樣的實作方式會導致樣版的多樣性受到限制。例如：編輯器僅提供單純的 文字、圖片、影片、聲音做替換及基本屬性設定。這時後想要融入一個多樣化的 投影片切換動畫會受到許多限制，因為編輯器並不支援此功能。例如無法設定投 影片切換的速度。如果想納入此類型樣版，勢必花費許多時間與成本重新對編輯 器重新設計與開發。但這的解決方式又造成另一個問題，當編輯器納入的功能越 來越多後，勢必造成整個編輯器檔案越來越大，許多使用者不會用到的功能也必 頇一併下載至使用者電腦裡，是非常不經濟的做法。 有鑑於上面的問題與提升樣版的擴充性及多樣性，樣板的設計需考慮到將設 定元件屬性的編輯與編輯器獨立分開，讓編輯器無法限制住樣版可替換的元件類 別或屬性，讓樣版製作專家可以依造設計隨心所欲製作出樣版和樣板上允許改變 的元件。 將樣版獨立於編輯器，各樣版採獨立化模組化的設計方式。接著來探討樣板 需提供的架構與行為模式。每個樣板包含畫面呈現、替換資料、播放邏輯與編輯 邏輯，如下圖所示。在程式撰寫時需考慮到將樣版的畫面呈現與撥放、編輯邏輯 分開，降低彼此之間的相依度，以便提升我們未來在做樣版修改或操作資料替換 時的容易度。例如：未來再做樣版修改時，只更動前端畫面呈現的部分，重新排 成自己要的畫面，但不去更動到動畫撥放的邏輯。 圖 34：模組化樣版設計與樣版的組成

另外，樣版採獨立化模組化的設計方式的另一個好處是，樣板與多媒體完成

檔可單獨播放觀看。因為採用 RIA 技術開發加上樣板與編輯器獨立，所以不需

編輯器或撥放器仍可單獨執行觀看。使用者將完成的作品發佈至特定網頁後，觀 看網頁的人不用在另外安裝撥放器即可觀看，其細節之後實做會再詳細介紹。

肆、 系統架構與實作

4.1 開發工具與環境

本系統開發工具與環境如下圖所示： 圖 35：EzShow 開發工具與環境 在網站與功能程式方面的開發採用ASP.NET 中 C#程式語言，開發工具為 Visual Studio2008 SP1，檔案附檔名為.cs，編譯後的檔案格式為.dll。在視 覺化介面設計與部分動畫效果設計方面採用Extensible Application Markup Language (XAML) 標記語言，開發工具為 Expression blend2 SP1，檔案附 檔名為.xaml。開發環境需安裝 Silverlight SDK 與 Silverlight 2.0 Runtime， Visual Studio2008 SP1 包含.Net framework 3.0 以上版本。

4.2 EzShow 系統架構圖

本系統架構採用SOA 架構設計模式規劃，如下圖所示：

 展現層: 瀏覽器上的編輯器使用者介面為展現層

 資料層: 網路伺服器區右上的資料庫存取 LINQ to SQL 為資料層  邏輯層: 網路伺服器區中提供服務介面的 Web Service 為邏輯層

圖 36：EzShow 系統架構圖 使用者透過瀏覽器上網下載編輯器、下載樣版，上傳替換資料、下載樣版、 下載替換資料、下載資料描述檔。以下將架構組成分成三個部分討論。 1. 編輯者端瀏覽器 下 表 為 Silverlight runtime 支 援 的 瀏 覽 器 類 型 與 各 瀏 覽 器 支 援 的 Silverlight runtime 版本 (2009 年 6 月正式版有 1.0 與 2.0)。 表 6：可安裝 Silverlight 的瀏覽器與其支援的版本

在使用EzShow 前需預先安裝好 Silverlight runtime 2.0 版本，為安裝 則會自動引導使用者安裝。開啟已經安裝Silverlight runtime 的瀏覽器，連線

到系統，瀏覽器會自動將EzShow 編輯器下載回使用者電腦瀏覽器裡的暫存區，