國立台中教育大學數位內容科技學系碩士在職專班
碩士論文
指導教授：王曉璿 博士
多人即時註記直式電子書系統架構
設計探究
研究生：林建伸 撰
摘
摘
摘
摘
要
要
要
要
註記科技（Annotation Technology）是全球資訊網上一個新系統概念， 此概念提供使用者能在一般瀏覽器上進行註記的線上註記平台(On Line
Annotation Platform, OLAP)，如 YAWAS、Diigo 與 WebNotes 等。線上註
記 技 術 已 被 應 用 於 電 腦 輔 助 語 言 學 習 (Computer Assisted Language
Learning)上，但常用於線上橫書的註記，若能建立文字直式排列的註記系 統將有助於習慣中文直式閱讀的學習者。 本研究所建置的註記系統，除了提供別於其他線上註記平台的文字直 式編排外，系統更強調多媒體註記、多人註記分享與多人同步共享註記功 能。第一項「多媒體註記」功能，主要提供除了文字註記之外，並加入圖 形、聲音與多媒體等多重註記功能。第二項「多人註記分享」功能，是以 Web2.0 概念，提供多人參與學習平台、個人註記網頁與融入社會化導覽 （social navigation）機制的註記評鑑分享功能。第三項「多人同步共享註 記」功能，本系統為進一步配合即時學習需要，更提供多人同步共享電子 書註記與進行線上即時學習互動功能。本系統同時以軟體雛型開發模式針 對管理者和使用者進行介面及功能的驗證，期望營造適合線上學習中文的 環境，在多人即時互動中，共享即時的新知。 關鍵字：網路直書、註記、電子書、Web2.0、多人、即時
Abstract
Annotation Technology (AT) is a new system concept on the World Wide Web, which provides users to note in the general browser to on line annotation platform, such as YAWAS, Diigo and WebNotes etc.. Although annotation technology has been used in Computer Assisted Language Learning, it is only in the horizontal-layout ebook. The establishment of vertical-layout ebook system will help learners who are habitual with vertical reading.
This research not only has introduced virtical-layout, but also has emphisized multimedia, multi-user and sychrony. At first, besides offering the virtical annotation, it has provided users to note by illustration, sound and multimedia. Multi-user, based on Web2.0, has provided a platform to more users than before, who can share individual annotation, social navigation, and immediate evaluation. The third, with the need of instant learing, it has provided managers sychrony to update text, and made all users receive the additional notes and meet the immediate update of all information. At the same time, the system has validated the interaction between managers and users with the software prototype development model, and expected to provide a suitable Chinese learning environment for online. In many real-time interactions, it can provide new knowledge and share real-time.
致
致
致
致
謝
謝
謝
謝
交到女朋友、考上研究所、信奉天主教、步入紅地毯與生下小草莓， 都在這三年完成。這三年也從簡單的 action script 語法，學到 C 語言、 PHP 以及 mysql，從變數、陣列、自訂函式庫，學到類別與 multiserver， 也從準實驗研究改為我的興趣-系統開發。這份論文能順利完成，首先要 感謝我的指導老師王曉璿教授，在這三年來，在ㄧ次又ㄧ次的 meeting 時， 於研究上給我的細心的指導與寶貴的建議。另外，也要感謝我的口試委 員，游自達教授與朱延平教授，在百忙之中，仔細的審理我的論文與給予 我嶄新的資訊視野。 再來要感謝患難與共的研究所同學，嘉祥、盈濂、麒富、晏佐、文杰 與每次不畏風雨共乘的崇時，大家一起互相加油打氣、分享資訊、提供想 法與技術交流，充實了忙碌的研究生生活。 最後，我要感謝的是我的內人世菁、女兒田欣與我的家人，給我的支 持與鼓勵，成為我一路走來力量的源頭，謝謝你們，讓我能心無旁鶩的學 習與研究，順利的完成畢業論文。感謝所有幫助我、照顧我的師長、同學、 朋友與家人，謝謝你們! 國立台中教育大學 數位內容科技學系碩士在職專班 教學科技研究室 研究生 林建伸 謹誌於 2010 年 6 月
目 次
第一章 緒論... 1 1.1 研究背景 ... 1 1.2 研究動機 ... 2 1.3 研究目的 ... 3 1.4 研究問題 ... 4 第二章 文獻探討... 5 2.1 中文網路直書的探討 ... 5 2.1.1 中文直書 ... 5 2.1.2 網路直書的文字編排 ... 6 2.1.3 網路中文直書開發技術現況探討 ... 8 2.1.4 小結 ... 12 2.2 線上電子教科書 ... 13 2.2.1 傳統教科書 ... 13 2.2.2 電子書 ... 14 2.2.4 現行國小電子教科書的比較 ... 16 2.2.5 小結 ... 20 2.3 註記 ... 21 2.3.1 網頁註記型式的探討 ... 21 2.3.2 國內註記相關研究 ... 23 2.3.2 國外註記軟體與應用 ... 27 2.3.4 Web2.0 ... 30 2.3.5 小結 ... 312.4 直式電子書註記系統相關技術探討 ... 33 2.4.1 網路基本架構 ... 33 2.4.2 網頁伺服器（Web Server） ... 33 2.4.3 PHP ... 35 2.4.4 MySQL 資料庫 ... 35 2.4.5 Action Script ... 36 2.4.6 ElectroServer ... 37 2.4.5 小結 ... 37 2.5 總結 ... 38 第三章 研究方法與設計... 39 3.1 研究方法 ... 39 3.1.1 研究架構 ... 39 3.1.2 系統架構 ... 41 3.2 系統功能需求 ... 42 3.3 開發工具 ... 44 3.4 系統分析設計 ... 46 3.4.1 資料傳輸模組 ... 46 3.4.2 直書排列模組 ... 47 3.4.3 直書文字註記模組 ... 50 3.4.4 圖片、動畫註記模組 ... 51 3.4.5 劃線註記模組 ... 52 3.4.6 個人網頁電子書模組 ... 54 3.4.7 自動線上測驗模組 ... 55 3.5 系統雛型評估研究步驟 ... 56
4.1.直式電子書功能 ... 58 4.1.1 接收 text 欄位 ... 59 4.1.2 功能性 ... 61 4.1.3 與現有電子書的比較 ... 70 4.2 註記系統 ... 73 4.2.1 註記系統需求狀況如何? ... 73 4.2.2 比較目前電子書的註記系統功能需求? ... 74 4.2.3 提出需要如何的電子書註記系統 ... 76 4.2.4 電子書註記系統發展多人使用時應注意項目 ... 77 4.3 多人網路電子書註記系統 ... 78 4.4.多人同步電子書註記系統的發展 ... 82 4.4.1 直式電子書系統 ... 82 4.4.2 多人伺服器系統(ElectroServer) ... 83 4.4.3 多人同步註記系統 ... 84 4.5. 雛形系統評估與實驗 ... 86 4.5.1 管理者評估 ... 86 4.5.2 直式電子書雛形管理系統修正 ... 90 4.5.4 使用者評估 ... 94 4.5.4 次數分配分析 ... 97 4.5.4 小結 ... 104 第五章 結論與建議... 105 5.1 結論 ... 105 5.2 系統修正的建議 ... 106 5.3 未來研究的建議 ... 106 參考資料... 108
壹、中文部分 ... 108 貳、英文部分 ... 110 附錄一 實驗問卷設計 1 ... 113 附錄二 實驗問卷設計 2 ... 114 附錄三 雛形系統系統功能的檢核表... 118 附錄四 一般使用者對此系統的看法及建議... 120
圖目次
圖 2.1.1 直書版面的視覺導引 ... 6 圖 2.1.2 上下捲軸網路直書的設計 ... 7 圖 2.1.3 好讀網站的中文直式排列 ... 7 圖 2.1.4 大正藏網頁版-直書大正藏（圖片來源：大正藏網頁版，2010） ... 8 圖 2.1.5 假古文-傳統中文排版工具 ... 10 圖 2.2.1 南一版國語電子教科書（南一書局，2009） ... 17 圖 2.2.2 康軒版電子教科書（康軒文教事業，2009） ... 18 圖 2.2.3 翰林版電子教科書（翰林出版事業，2009） ... 19 圖 2.3.1 YAWAS 產生註記... 28 圖 2.3.2 DIIGO 可使用螢光筆及線上註記... 28 圖 2.3.3 WEBNOTES 的線上註記... 29 圖 2.4.1 網頁伺服器市場占有率（資料來源: NETCRAFT.COM） ... 34 圖 3.1.1 研究架構 ... 40 圖 3.4.1 資料傳輸模組 ... 46 圖 3.4.2 系統端變數轉換過程 ... 47 圖 3.4.3 父元件三層架構 ... 48 圖 3.4.4 直書自動排版模組 ... 50 圖 3.4.5 文字註記元件的配對 ... 51 圖 3.4.6 圖片動畫註記配對 ... 51圖 3.4.7 線條的儲存 ... 53 圖 3.4.8 線條的解碼... 54 圖 3.4.9 個人網頁電子書模組... 55 圖 3.4.10 自動線上測驗模組 ... 55 圖 4.1.1 直式電子書管理者與一般使用者驗證 ... 58 圖 4.1.2 首頁與登入畫面... 58 圖 4.1.3 新增課程內容 ... 59 圖 4.1.4 自動完成目錄 ... 60 圖 4.1.5 修改單元內容選單 ... 60 圖 4.1.6 修改單元標題與內容 ... 61 圖 4.1.7 課文展示與功能... 62 圖 4.1.8 字體放大與縮小... 63 圖 4.1.9 閱讀指標器 ... 63 圖 4.1.10 文字註記功能與移動式視窗 ... 64 圖 4.1.11 螢光筆註記與文字註記的呈現... 64 圖 4.1.12 線上圖片註記的輸入 ... 65 圖 4.1.13 可移動式圖形註記 ... 66 圖 4.1.14 上傳圖片註記 ... 66 圖 4.1.15 聲音註記 ... 67 圖 4.1.16 圖形註記工具列-顏色盒與線條盒... 68 圖 4.1.17 線上圖形註記的對應文字註記的輸入 ... 68
圖 4.1.18 跨行註記表示同一事件 ... 69 圖 4.1.19 圖形註記與文字註記的對應... 69 圖 4.1.20 行與行間的多重註記 ... 70 圖 4.3.1 解釋分享表單... 79 圖 4.3.2 個人註記編輯表單... 79 圖 4.3.3 個人註記電子書網頁空間... 80 圖 4.3.4 自動出題系統與註記資料驗證... 81 圖 4.3.5 自動出題系統 ... 81 圖 4.3.6 提供競爭學習的環境 ... 81 圖 4.4.1 直式電子書運作類別圖 ... 82 圖 4.4.2 註記系統與多人伺服器系統的溝通 ... 83 圖 4.4.3 多人伺服器端、客戶端及資料庫的的運作關係 ... 84 圖 4.4.4 多人即時圖形註記連線... 85 圖 4.4.5 多人即時圖形增加註記 ... 85 圖 4.4.6 多人即時圖形註記即時更新 ... 86 圖 4.5.1 網頁公開設定表單 ... 91
表目次
表 2.3.1 註記系統比較表 （○：支援、×：不支援、△：部分支援）（資 料來源：吳漢障，2009）... 24 表 2.4.1 APACHE 與 IIS 比較表（資料來源：研究者整理） ... 34 表 3.4.1 畫線註記的儲存 ... 52 表 4.1.1 與國內現有電子書的比較 ... 71 表 4.1.2 與國外電子書的比較 ... 72 表 4.2.1 註記系統合併與分開儲存比較表（楊漢勇，2004 整理） ... 73 表 4.5.1 雛形系統評估優缺點比較 ... 87 表 4.5.2 其他功能取代表 ... 92 表 4.5.3 雛形系統系統功能的檢核評比 ... 93 表 4.5.4 性別 ... 95 表 4.5.5 接觸年級 ... 95 表 4.5.6 使用功能 ... 95 表 4.5.7 使用電腦難易度 ... 96 表 4.5.8 上網頻率 ... 96 表 4.5.9 文字與多媒體註記有用性評比 ... 97 表 4.5.10 文字與多媒體註記易用性評比 ... 98 表 4.5.11 文字與多媒體註記滿意度評比 ... 98 表 4.5.12 圖形註記有用性評比 ... 99 表 4.5.13 圖形註記易用性評比 ... 100表 4.5.14 圖形註記滿意度評比 ... 101
表 4.5.15 即時圖形註記有用性評比 ... 102
表 4.5.16 即時圖形註記易用性評比 ... 102
第一章 緒論
1.1 研究背景 隨著網際網路技術的日新月異與普及，線上學習已逐漸成為新的學習趨 勢，我們在網際網路上可搜尋到許多的電子書，此提供了學習者不可或缺的 學習教材。因此，為了建構出適合於全球資訊網上學習的系統架構，網頁設 計者在網際網路上提出一個新系統概念，也就是能在一般瀏覽器上使用的線 上註記平台(On Line Annotation Platform, OLAP)，平台中包含了螢光筆標示 (highlight)、加入與編輯註記(annotate)及組織樹狀結構等新概念(陳守賢， 2000)。除此之外，拜註記科技（Annotation Technology）興起所賜，網際 網路上不僅開發出許多不同功能的網頁註記平台，而且也廣泛的運用於電腦 輔助語言學習(Computer Assisted Language Learning)。最為人所知的註記平台有YAWAS（L.Denoue & L.Vignollet,2000）、Diigo
(Diigo ,2010)與WebNotes (Webnotes, 2010)等，其註記平台的共同點皆為能在
一般網頁中，運用網頁外掛程式的技術，以highlight的方式對於一段文字進行 註記，甚至能以便利貼(Sticky notes)對此頁面或這一段文字進行文字說明。除 此之外，楊漢勇（2004）也建置一套具有註記功能且符合SCORM (Sharable Content Object Reference Model)規範的教材播放系統，其註記的資訊還可 以與其他使用者分享。吳漢障(2009)也設計一套可多人使用的Web 註記系 統，使用者可以進行再註記之樹狀延伸討論。隨著註記技術的進步，現在發 展的註記科技，不但超越第三代註記系統，使用highlight的功能，甚至已經進 入了第四代，註記的共享（楊漢勇，2004）。 也因註記技術的成熟，註記科技而廣泛的於線上語文學習上，如國語科 大意摘要教學、無縫式註記（Seamless Annotation）學習環境、協同英語寫 作等。程仲凱(2004)提出一套『電腦閱讀註記輔助摘要學習系統』，運用在
國小六年級國語科大意教學時，其發現能有效提升學生對全篇文章的閱讀理 解。谷圳(2004)以手機、紙本和桌上型電腦建構一個無縫式的 C#程式語言課 程學習環境，經實驗結果證實，在無縫式的環境下所輔助學習的量，增加 2.04 到 4.79 倍，同學間相互討論的量也提升為原來的 3.46 倍。宋姍錞(2006) 運用虛擬筆系統(VPen)，結合英文學習聽、說、讀、寫四個面項的教學工具， 使學生可以在課程網頁上進行寫作及口說活動，也發現學生的語言產出能力 (productive skills)與學習成效呈顯著正相關。 由於網頁註記技術的成熟，使得註記科技成功且廣泛的運用在電腦輔助 語言學習上，尤以超媒體提供適合語言學習的環境，在視覺和聽覺上增進真 實的語言學習情境，將聽、說、讀、寫結合於活動中，也因此使得學習者在 學習過程中有更大的自主權(宋姍錞，2006)。 1.2 研究動機 網頁註記科技（Annotation Technology）提供適合語言學習的環境，使得 多媒體註記在語文學習的聽、讀、說和寫的接受能力(receptive skills)與產出 能力(productive skills)，能結合於教學環境中，然而，國人在閱讀中文時的習 慣，受到國內長期接受國文教科書直式編排設計的影響而習慣直式閱讀（陳 毓華，2006），但研究者卻發現網際網路上不但提供直書的網頁內容並不多， 且直書製作方式不便，提供直書註記更是鮮見。如大正藏網頁版(2010)、好 讀網站(2010)便是以直書編排的網頁，假古文（2010）為中文直書轉換工具， 但皆沒有提供線上註記的功能，其中大正藏網頁版(2010)用網頁表格格式逐 字編排，較為耗時；好讀網站(2010)運用 CSS 直式樣式表，製作方便簡單， 但僅限於 IE 瀏覽器閱讀；假古文（2010）將文字重新打散，再進行直書編排， 文章結構破壞，無法運用關鍵字查詢。所以研究者希望於網際網路上，針對 慣於直式閱讀的中文學習者，建立一套合適的直式電子書系統，並結合線上 註記平台，創造適性學習中文的學習環境。 Web2.0 的網頁強調即時發佈的功能，可立即發布任何訊息，方便且迅速，
使得使用者傳送的訊息能於第一時間於社群間發布與接收。為了增進多人即 時同步互動，網際網路提供了一個多人連線的 HCSA (Hybrid Client-Server
Architecture)的技術，其 Server 結合了 Client/Server 以及 P2P 的連線方式，讓 client 端可以得到 Server 即時的服務。本研究即希望在直式電子書系統中，於 同步即時線上學習上取其優點，結合多人即時連線的技術，使得教師與學習 者能即時掌握學習歷程和學習成果。 本研究動機如下： (1)為學習中文且習慣直式閱讀者，設計出一套電子直書系統。 (2)整合文字註記與多媒體註記的功能，營造適合中文直書學習的環境。 (3)運用網頁的技術，擴增註記系統的即時性。 有鑒於線上註記平台運用在以文字直式排列的註記功能不夠普及，並為 了讓習慣直式閱讀的中文學習者在 e-learning 的環境下，能有更好的學習便 利性，與更高的學習意願。因此本研究期望建置一套中文直式電子書系統， 讓教學者自行輸入的課文內容可以自動轉換成直書，即時新增與更新課文資 訊；整合文字註記與多媒體註記的功能，使學習者也可以同時於課文中進行 文字、多媒體與圖形註記功能，以期培養學習者科技接受能力，進而提升語 文的接受能力(receptive skills)與產出能力(productive skills)；在線上註記平台 上，取其同步學習的優點，結合多人即時連線的技術，強化註記科技的即時 性。 1.3 研究目的 本研究將提出具有管理者編輯電子書內容與提供使用者文字與多媒體 註記系統，並擴充即時註記系統的機制，藉此提高使用者使用電子書的自主 性。本研究之具體研究目的如下： (1)探討國內外線上直式電子書與線上註記系統相關功能比較。 (2)發展及開發多人即時線上直式電子書雛型系統。
(4)探討多人即時註記系統對一般使用者的使用效應及影響。 1.4 研究問題 (1)國內外線上直式電子書與線上註記系統的優缺點為何？ (2)如何在線上直書電子書註記系統的環境下，以擴展多人即時註記機制，以 發展線上即時註記系統？ (3)雛型系統管理者評估軟體後，提出下一個版本系統的雛型設計需求為何？ (4)使用者在多人即時註記系統與其他使用者的互動是否有助於使用者在使用 線上註記的有用性、易用性與滿意度？
第二章 文獻探討
由於國人使用上的習慣，已有一些網站建置直書網頁與提供直書橫書轉 換的方法，以提供使用者習慣直式閱讀的網頁，但如能擴增其線上學習功能， 更可以營造出適合語文學習的環境。為了擴增線上直式電子書的功能，成為 一套適性的中文直式即時註記電子書，本章將針對中文網路直書、線上電子 教科書、註記及相關技術進行探討。2.1 中文網路直書的探討
2.1.1 中文直書 中文由於為方塊字，文字的排列除了由下而上不可行，其餘由上而下、 由左而右或是由右而左，任何方向排列都合乎閱讀（黃政傑，1995）。從甲骨 文到竹簡大都是直書書寫，當時便習慣於直書書寫，而這種習慣是因為以前 的竹簡的編排方式及由右手持刀或筆書寫之緣故，而使直書排列流傳至今。 然而以人體工學而言，橫排編排方式較直排編排方式易於閱讀，主要原 因在於眼球的運動是由眼外的六條肌肉帶動，人類眼睛是生長左右兩邊，眼 球的水平運動只需要ㄧ對內外直肌帶動，所以左右的移動是一種筋肉較為單 純的運動（黃政傑，1995）；而上下的移動則動用了較多且複雜的筋肉，所以 在生理結構來說橫排方式是較優於直排的（曹融，2000）。 因為生理結構上，橫排優於直排，加上目前國內的中文文章為了表達各 學科的專業語言，以橫排與直排並存於國內出版界。而橫排或直排，在國內 出版界有相當比例，通常依照文、史哲、政論類的書，以直排居多；雜誌、 自然科學類、英文書或中英皆有的書以橫排為主（簡愷立，2006）。 而早期小學教科書，裝訂處於右邊，不但中式書籍採直書版式，連西式 書籍音樂及數學課本也是以直書方式排列，其後逐漸改為西式版式，文字橫在國中小七大領域教科書編排上，教科圖書印製規格只有規定紙張重 量、字體字號及印製大小三大項，並無規定直、橫書的排列方式，國中小許 多科目的教科書都改為橫式編排，唯有國語文教科書（康軒文教事業，2009； 翰林出版事業，2009；南一書局，2009）仍採直式編排 (陳毓華，2006)。 因此，陳毓華 (2006)對中文文字排列的易讀性進行深入探討，其以時 間控制法和以測量受測者感覺與感受程度的語意差別法所獲得的結果有極大 的不同，以閱讀時間控制法測試，發現閱讀語體文課文時橫式優於直式排列， 語意差別法測量結果為文言文與語體文的直書排列設計皆優於橫書排列設 計，其歸因於受試者長期接受的國文教科書都是直書編排設計，以受測者的 主觀評量，容易因受試者的熟悉度而給予好的印象。 所以，雖然以生理構造來說，橫書較於直書來得容易閱讀，但由於國人 在閱讀直式排列的中文文字時，仍認為直式排列的文字較橫式排列易於閱 讀。因此，營造適合中文直式閱讀的環境，順應網路化學習的新趨勢，應該 探討網路直書的編排方式，並探討其優劣。 2.1.2 網路直書的文字編排 在一般書本中，閱讀直式的文字排列方式時，視覺起於右上角，採由上 而下、由右向左的閱讀路徑。頁面的四個視覺區注意的順序也與橫排有所不 同，以右上、右下、左上、左下的順序閱讀(陳毓華，2006)。如圖2.1.1。 圖 2.1.1 直書版面的視覺導引
在網頁上，研究者發現以右上、右下、左上、左下的順序閱讀時，並不 適合在上下捲軸的網頁上。原因在於網路直書的排版時，若文字長度超過頁 面時，無法形成完整的文字區塊，每閱讀一行便須拉下卷軸數次，在閱讀上 造成不便，更可能會影響了閱讀者的閱讀興趣，如圖2.1.2。 圖 2.1.2 上下捲軸網路直書的設計 所以若要在上下捲軸的頁面中編排出良好的版面編排，就須在文章還未 拉下捲軸時便須換行，才能引導出順暢的視覺流動。好讀網站（2010）便是 使用如此編排方式驅使了視覺流動的引導力，並呈現完整的文字區塊，閱讀 網頁內容時，可以減少捲動捲軸的次數，如圖2.1.3。然而網頁中文字區塊中， 上下左右的邊界因此也拉大了，造成網頁視覺空間的浪費。 圖 2.1.3 好讀網站的中文直式排列 為了避免網頁空間的浪費，使整個網頁能充分利用，同時，要顧及版面 完 整 的 文 字 區
只要控制好上下邊界，不需每行捲動捲軸，捲動左右卷軸就可以瀏覽整篇文 章。再者，Gibb(2003)指出在設計電子教科書時，應減少卷軸捲動的次數， 不使用捲軸較容易清楚了解閱讀的位置，教學者與學習者才能快速的聚焦於 目前課程的位置。 視線游移的過程，就是編排的引導力，有良好的編排版面便能導引順暢 的視覺流動，使閱讀者更願意詳讀文章內容（陳書瑩，1999）。所以，網路 直式的文字編排，應考慮到編排的視覺流動，避免網頁空間的浪費，減少捲 動捲軸的次數，且提供讀者方便翻頁以及頁數的編排，才是順暢的網頁直書 編排。 2.1.3 網路中文直書開發技術現況探討 為了設計出網路直式教科書的文字編排，營造順暢的視覺流動，應先探 討網路中文直書開發的現況，分析其優劣。在網路上，因歐美國家使用的文 字排列通常不適合於直書，所以中文直書排列方式不常見，且非網路閱讀習 慣之主流，目前網路上有提供的直書閱讀，有大正藏網頁版、假古文以及好 讀網站等。 大正藏網頁版，收集了許多佛教經書，其中「直書大正藏」便是將佛教 經書以直書的方式呈現於網頁上(大正藏網頁版，2010)，如圖。 圖 2.1.4 大正藏網頁版-直書大正藏（圖片來源：大正藏網頁版，2010）
直書大正藏排列直式文字的方式，是先以網頁表格欄位標籤<tr> </tr> 為外層標籤，將預先設定好的文章直書位置，分別以<td> </td>為內層標籤， 依序由最後一行到第一行包附其中。每ㄧ行文字再以斷行標籤<br>斷行，而 形成網頁直書。 以排列n行為例，以<tr>為外層標籤，再以<td>為內層標籤，由第n行排 列到第一行，其排列方式如下： <tr> <td>第n行 </td> <td>第n-1行 </td> … … <td>第1行 </td> </tr> 每一行再依順序由第一字到最後一字以<br>斷開，以n字為例排列如下： 第1字<br> 第2字<br> … … 第n字<br> 大正藏網頁版，優點在於以表格方式巧妙的將文字以直書，由左而右排 列，而引導出良好的視覺流動，且可以按照不同的需求排列，具有彈性。但 由於排版前，必須確定好編排網頁時的位置，由最後一句編排到第一句，且 逐字編排，所以需要花費許多時間於排版上。 假古文是一套傳統橫書轉換直書的網頁工具，用法十分快速且方便(假古 文，2010)。使用者可以將想要轉換直書的內容貼入輸入欄為中，按下轉換鈕
自己製作的網頁中，便可轉為直書排列。 圖 2.1.5 假古文-傳統中文排版工具 假古文是一套以JavaScrip語法寫成的直書轉換系統，製作時，先以for 迴圈，將全文以字串類型依據預先設定的分行字數，依序將各行儲存於陣列 中： var t="";
var SS = new Array();
for (var x = 0; x < 文章字串長度; x++) {
var xCode = 文章字串.charCodeAt(x); if(xCode == 9 || xCode == 13) 換行 if(t.length >= 每行字數) { SS[SS.length] = t; t=""; } t = t + vx.charAt(x); }
接著，再以三維迴圈，由最後一句到第一句，每句的第一個字分別儲存 於Str字串中，再以"\n "斷行符號連接，接著最後一句到第一句，每句的第二 個字繼續儲存於Str中，依此類推，直到達到字串長度時：
while(目前字串位置<字串長度)
{
for(var y=0; y < ws; y++) { for(var x = p2; x >= p1; x--) { if(SS[x].length>y) { if(SS[x].charCodeAt(y)>127) str = str + SS[x].charAt(y) + sp; else str = str + SS[x].charAt(y) + " " + sp; } else { str = str + " " + sp; } } str = str + "\n "; } str = str + S; p1=p2+1;
此外，以keyTrans陣列儲存直書標點符號，再以keyCode儲存其對應符號 的Unicode碼，進行標點符號的轉換。
假古文成功的運用 JavaScript 語法排好直書文字位置，再由左至右，由 上往下運用二維迴圈排列，完成直式的編排。其優點在於運用 JavaScript 運 算，節省許多編排時間，但文章結構已破壞，無法使用關鍵字搜尋文章內容。
好讀網站是運用 CSS（Cascading Style Sheets）樣式表中 layout-flow 的屬性，
vertical-ideographic 為值，由上而下，由右至左，無須使用程式轉換，不但節 省許多時間，文章結構也未破壞。除此之外，其以 Javascript 語法提供許多 電子書的基本功能，如目次、滾輪翻頁與迅速的翻頁功能，但是僅限於 IE 瀏 覽器，且較未提供改變文字大小與註記功能 (好讀網站，2010)，如圖 2.1.3。 所以，開發網路中文直書系統時，不但需要有迅速便捷的編排方式，也 應避免破壞文章結構，保有網路搜尋文章內容的優點。 2.1.4 小結 為了營造適合中文直式閱讀的環境，製作網路直書時，應考慮到編排的 視覺流動，並充分運用網頁空間，提供翻頁及頁數的編排，以達到順暢的網 頁直式編排的目標。製作的流程中，也應該考慮須編排工具的省時便利性， 保留完整文章結構提供文章內容搜尋，增加網頁互動性以及適用任何瀏覽器 等。此外，為了使學習者熟悉線上閱讀的方式，應探討傳統教科書與電子書 的優缺點，融入於線上直式電子書，使學習者能如閱讀傳統教科書一樣，熟 悉線上閱讀的環境。
2.2 線上電子教科書
2.2.1傳統教科書 教科書一詞依「教育部重編國語辭典修訂本」的解釋為教學活動中，在 一定範圍內，專門編寫給學生上課用的課本。其詞的由來為區別科舉制度過 分重視語文訓練，如三字經、千字文、四書、五經等，近代實施新教育後， 將教材分「科」，而稱「教科書」（國立編譯館，1988 ） 。 教科書除了是學生學習各類學科的工具書外，教科書應該能夠整合教與 學的過程。林貴美（1989）認為教科書應包涵各種教育學科訓練所需，教學 結構設計系統嚴謹，並符合教與學的過程需要，可以用來作為學習依據並幫 助學生記憶的工具書籍。 教科書屬於教育用書，具有傳遞知識的目的，對教師、學生及家長有著 不同的功用。對教師及學生而言，教科書的使用可節省編選教學內容及教學 活動的時間，也可以成為協助學生獲得完整性知識的工具，編印精良之教科 書更可以引發學習動機；對家長而言，能瞭解子女學習內容與狀況，容易協 助子女學習(林冠吟，2006)。 黃振球（1989）認為教科書具有以下的功用： （1）可作為教學指引及學習的門徑 （2）省卻選擇及編排教材的時間 （3）節省學生筆記的時間，避免遺漏重要教材 （4）可使學生通曉學科內容，預知學習重要內容。 （5）統一全國水準及配合世界潮流。 （6）印刷精美、文字生動的教科書可以引發學生學習動機。 （7）內容充實、結構嚴謹的教科書，可成為教學楷模。 （8）可成為學生日後參考。 黃振球（1989）教科書也具有以下的缺點：（2）教師過份依賴教科書，拘限於講授及學習教科書。 （3）教科書編印不佳時，不能引起學生興趣。 除此之外，McFall（2005）認為紙本教科書應用於教學上也存在一些問 題，如紙本教科書無法涵蓋所有主題、紙本教科書的程度與深度難以兼顧以 及紙本教科書無法包含課程中所有教學活動。 趙貞怡（2004）也認為傳統書缺點，有讀者無法更改已印出之內容、讀 者無法依自己的需求而擷取某些部分內容來閱讀、無法適應讀者的個別偏 好、形式單調，只能呈現二維平面的資訊、為靜態的文字與圖形、無法即時 更新資訊、資訊的查詢不易、雖然有出版有聲書，不能呈現動畫等動態資訊、 不易建立多重查詢方式、合作編寫不易等缺點。 所以，傳統教科書沿用至今已有許久的歷史，雖然傳承著許多一般書本 的優點，但在使用上及教學上，也存在著許多仍待改進的缺點，如紙本教科 書無法包含課程中的所有教學活動等。要以新的科技技術，創造出符合學習 者使用的電子教科書，應該傳承一般傳統教科書的優點，而將其待改進的缺 點，轉換為本身的優點，才能使學習者有效學習。 2.2.2 電子書 電子書的定義十分廣泛，可以為紙本書籍的數位版本，也可以是包括閱 讀設備。不論電子書是指硬體設備或是軟體需求，電子教科書不應只是紙本 教科書的電子版本，更重要的是，除了應具備一般電子書之功能，還必須應 用電子媒體的特點來設計提供可符合課程進行之功能 (林冠吟，2006)。 謝顒丞、李汝宥、鄭惠文（2007）歸納目前電子書發展情形，提出電子 書具有環保節能、查閱快速方便、連結相關資料、電子書籤功能、註解工具、 畫面或字型可依個人需要而放大、縮小、體積輕薄短小、具有儲存大量資料 的能力、互動設計、縮減出版時間、易於更新、傳遞資訊快、較不受天然、 人為災害影響，可耐長期保存、售價較便宜等幾項特性。 然而，電子書也存在一些缺點，如人類閱讀習慣尚未改變、眼睛容易疲
憊，不適於長時間閱讀文字內容、讀者可能不知道自己目前在電子書的何處 閱讀資料（趙貞怡，2004）。除此之外，電子書更需要軟硬體的配合，不但 隨時身邊須有電子設備，還需要搭配的軟體，才能正常的使用電子書。 所以，ㄧ般傳統紙本教科書因人類已使用多年而繼承了書本的優點及特 點，具有其歷史意義，相較於電子書，具有易於攜帶、不受硬體的牽制，讀 者可以輕鬆閱讀書中的內容。是以，電子書的發展更應考慮傳統書的功能， 使得電子書能加上註解，在重點文字旁畫線、有美學的特質以及有著許多人 可以接受的型式，如索引目錄、章、節等，讀者可以運用書籤清楚的知道目 前在書的何處閱讀及易於閱讀等特點（趙貞怡，2004）。 2.2.3 國內線上電子教科書設計與研究 翁浴芳(2005)發展一套輔助程式設計學習的電子教科書系統，其重點在 於發揮電子媒體可動態改變圖文屬性的特色，並在學生使用電子教材時，可 清楚的標示文字與被說明對象之間的關聯性，而使文字說明、圖解及程式碼 能緊密結合，以達到輔助閱讀與理解的效果。研究結果發現其電子教科書系 統對中、高學習成就群的學生理解程式設計學習教材內容有正面的效果，且 使用者普遍認為此電子教科書系統具有利於理解、提高學習動機、提升閱讀 速度等優點，更認為此系統適合於課後自行複習之用。 翁浴芳(2005)認為電子教科書的功能應整合這些來自不同系統的電子書 功能，且教材內容與輔助效果的資料結構不可同時儲存，必須將教材本文與 閱讀輔助、註記、線上討論等系統之資料結構以不同資料表個別儲存，需要 時再予以整合呈現。而要達到此目標，必須先建立一符合電子教科書需求的 資料模型，此模型不但必須能支援上述各系統功能的資料結構之儲存，並具 有調整的彈性，以備未來系統維護及擴充系統功能時，更易於管理與更新。 林冠吟(2006)針對大學教授使用電子教科書的情形發現，教師認為電子 教科書應提供超出紙本教科書所無法達成的功能，而其所期望電子教科書提
供的功能如教科書內容模擬與演示、互動與回饋機制、即時討論、線上測驗 與習題、註記分享與轉出、專有名詞解釋連結、語言翻譯以及多媒體效果等 八項功能。實際操作時也應可供選擇的功能，包括：閱讀、檢索、章節目次 導覽、內文註釋超連結、我的書架、書籤、版面放大、縮小、頁次導覽、註 記分享、對外超連結、討論、個人偏好設定等，除此之外教師們偏好能讓教 師因應授課需要再度編修或複製部份內容的電子教科書。 程仲凱(2004)為了提昇學生閱讀時，查字典功能能夠選擇字詞後，便能 直接連接到該詞彙的電子辭典進行瀏覽。註解模組以便利貼方式儲存，滑鼠 滑過後出現註解。重點評估模組能算出學生註記正確率。教學輔助模組可監 控學生使用系統的狀況，教師也可以觀看學生註記並給予評語與回饋。顏色 愈深表示越多人標記，以此觀看主題句辨識有問題的群體畫記狀況，並可選 取目標文句，進一步查詢畫記者及其摘要學習狀態。 鄭勝仁(2003)學習式的電子書應包括學生的註記學習模組、學習輔助模 組、學生模型以及老師的能力評估模組、教學輔助模組等五部分。註記模組 不但可以在線上學習環境保有傳統書本上的學習行為，而且留下其學習歷 程。能力評估模組根據學生的畫記狀態與老師的畫記狀態，評估學生的能力 指標，並建構出以學習歷程為基礎的學生模型。學習輔助模組則根據學生學 習狀態，提供適性的學習建議及學習資源。老師可以透過教學輔助模組了解 每位學生及全班的學習狀態，作為教學參考。 所以，ㄧ套適合學習者學習的電子教科書，其系統上應提供系統維護及 擴充系統功能，對教學者而言，應提供編修教科書功能與教學輔助模組，而 教學輔助模組除了監控學習者的學習狀況，教學者也提供學習者評語、建議、 學習資源與回饋。對學習者，系統應提供紀錄學習者學習歷程、回饋機制、 即時互動、線上測驗、註記分享、翻譯以及多媒體等。 2.2.4 現行國小電子教科書的比較
國小南一版出版的「數位教學館」（南一書局，2009）All in ONE 電子 白板中的 e-Book 電子書中，國語科教學內容涵括引起動機、內容大綱、生字 表、情境影片、內容深究、形式探究和作文指導，呈現方式包括動畫、文字、 聲音等。 其中，課文內容註記方面，包括單字解釋、語詞解釋，以箭頭表示，滑 鼠移過後將語詞以紅色圈出，按下後出現解釋內容，具有很好的互動性。修 辭法以藍色【】框住，句型以綠色的【】框住，用○段表示段落播放，用○意呈 現段落大意。 使用者可以操控的功能方面，除了基本的功能如上下頁選項、頁數選擇 外，因為課文呈現為圖檔所有縮放功能及四格縮放；此電子書也提供畫筆功 能，可選擇全彩、粗細、全部刪除及部分刪除，然而沒有儲存功能，如圖 2.2.1。 圖 2.2.1 南一版國語電子教科書（南一書局，2009） 康軒所出版的電子教科書（康軒文教事業，2009），內容包括作者簡介、 課文朗讀、課文閱讀、課文大意、課文結構、內容深究、本課生字及國語習 作。呈現方式包括動畫、文字及聲音。 修辭法與句型同樣以紅色橫線區隔，能夠清楚了解句子的起始，按下後
出現修辭七巧板及句型七巧板，呈現補充說明內容。單字與語詞以紅色三角 形箭頭標示，以文字方式補充註記內容。此外，還有用數字表示多音及形近 字，也有段落朗讀及段落大意。 使用者功能上除了提供畫筆及全彩、粗細、刪除等功能，也提供儲存及 截取畫面，更可以增加頁面做註記。儲存以副檔名.eBook 的名稱儲存，單頁 儲存約 18K。超連結部分可由使用者從外部匯入 ppt、dot、多媒體、註釋等 功能十分齊全。使用介面為圖形以 swf 檔呈現，一頁檔案約 1Mbyte，如圖 2.2.2。 圖 2.2.2 康軒版電子教科書（康軒文教事業，2009） 翰林出版的教學電子書（翰林出版事業，2009），內容包括學習小視窗、 課文介紹、課文結構、參考網站及教學影片，呈現方式包括文字、動畫、影 片。 註記方面，段落朗讀、段落大意以文字及圖案呈現，滑鼠滑過後能清楚 了解內容。單字及語詞解釋則以藍色字標明，按下後能出現動畫及文字解釋。
修辭及解釋以橫線標示，能清楚了解句子始末，滑過出現簡易說明，按下後 出現深究的說明文字。 使用者功能方面，除了一般基本功能外，包括劃線、錄影錄音、橫書便 利貼、照相機等功能，只有照相機已 bmp 檔儲存單頁頁面，並無提供儲存功 能，如圖 2.2.3。 圖 2.2.3 翰林版電子教科書（翰林出版事業，2009） 國內現行國小電子國語教科書都為光碟執行，主要提供教師備課及上課 使用，補充內容十分詳盡，需要再補充的部分較少，所以提供使用者自行註 記的功能較少，且儲存方式為特定檔名，需由特定程式方能開啟，且未提供 線上功能與學生使用。 所以，學生使用的電子教科書應如同傳統學生使用的教科書一樣，提供 註記的功能，由學生自行註記學習上的新知。且在內容上，應提供生字、語 詞、句型、修辭句及段落大意等多元的註記方式。在形式上，更應結合網路 互動及協同合作學習，分享學習心得與知識。
2.2.5 小結 電子教科書不但應繼承傳統教科書應有的功能，如翻頁、頁數、註記等， 更應結合科技，創新傳統教科書不能達到之處，如立即更新教材內容、多媒 體及對外知識的連結等，甚至結合線上連線，增加學生與學生間，及老師與 學生間的互動，才能落實以學生為主體的教學環境。 以國小國語電子教科書而言，除了一般註記外，更應結合多媒體及線上 資源，也應了解課文上課內容與形式，提供學生及老師使用的功能，才能發 揮電子教科書應展現的科技輔助功能。
2.3 註記
註記對學習者扮演著很重要的角色，除了畫記重點、補充說明之外更進 一步還有記憶(Remember)、思考(Think)、釐清內容(Clarify)和分享(Share) 等用途(Ovsiannikov, 1999)。 除此之外，註記可以減少認知上的超載，也可以藉由註記可以瞭解文件 的重要性。畫記過的文章可以增加文章表達的方式，Denoue和Vignollet(2000) 研究發現文章與畫記共存對文章標題的認知是很有用的。甚至文章遺漏了， 使用者也可以藉由存取的畫記文字，幫助其回憶此文章的重點。 電子文件除了使用者端以檔案形式保存之外，也由於網路的蓬勃發展， 有越來越多價值的資訊也逐漸使用網頁的格式呈現，相同的，在網頁上閱讀 也應該有進行註記的需要，因此許多註記相關的研究因應而生(江柏寬、楊亨 利 2007)。 2.3.1 網頁註記型式的探討Ovsiannikov, Arbib 和 Mcneill(1999)把「註記」的種類分為幾種類型，
有標示、寫在頁邊空白處、寫在最上方、分開寫、寫在行與行之間。是故， 無論呈現的形式為何，註記的呈現處，一定於頁面中空白處，且不會覆蓋整 頁文章的任何一處。
Fu, Ciszek, Marchionini 和 Solomon (2005)認為以一般使用者需要註記的
三種形式，為文章圈註重點、建立註記關係以及各章節大意的註記，以此來 檢視網路環境，其中發現結構式的註記（structural annotations）與提供改變文 字字型與顏色的排版式的註記（layout annotation）最為常見。此外並建議在 設計網頁註記時，應在網頁瀏覽器中建置簡易的註記工具。 再以註記的輸入方式做分類，目前一般網頁註記的形式，可分為文字 式、手寫式、與語音式(杜明璋，2004)：
（1）文字式註記 文字式註記以 Highlight 的形式呈現的文字型，是最多註記系統採行的 方式，以頁面的底色凸顯出文字的重要性，同時不會破壞到文章的主體，此 功能如同在傳統書本中使用螢光筆劃註重點，也是讀者在傳統書本劃記中常 使用的方法之一。 除此之外，許多網路註記的系統，還提供便利貼及註解的功能，提供讀 者將 Highlight 的文章內容，輸入額外的文字解說，方便讀者做補充說明之 用(Diigo,2010)。然而研究者發現，以 Highlight 的方式呈現時，當遇到同 樣一個字中需要字的註記與詞的註記，甚至整句註記時，便無法將其字、詞、 句的註記呈現出來。 例如在註記「良機對於懶惰沒有用,但勤勞可以使最平常的機遇變成 良機。」這句話時，第一次標示懶惰時，可以很清楚的看清楚懶惰的名詞， 但加上第二次標示整句話時，懶惰一詞的註記，便被整句註記所覆蓋，未能 清楚了解懶惰是否標明註記。 例如： 良機對於懶惰沒有用,但勤勞可以使最平常的機遇變成良機。 良機對於懶惰沒有用,但勤勞可以使最平常的機遇變成良機。 （2）手寫式註記 而手寫式劃線的註記方式，多使用在行與行間的空白處，讀者可使用單 直線、雙直線、波浪線及虛線等方式註記，也可以用不同的顏色劃記，註記 樣式較為多變，利於區別註記內容的分類。然而，目前線上註記系統中，屬 於手寫式劃記，並未提供額外的便利貼與註解的功能，劃線後仍需依賴使用 者的記憶力，回憶註記的相關性，增加了使用者的記憶負載。 （3）語音式註記 語音式註記，多使用在語文學習上，如在虛擬筆系統(VPen)中以多媒體 及網頁結合了聽、說、讀、寫四個教學工具，讓學生可以任意的在課程網頁
上進行寫作及口說活動，其目的為探討學習者在線上學習英語的過程中，對 於活動及使用工具的認知。
所以，提供多種形式的註記方式，及其對應的便利貼和註解的功能，對 於使用者使用線上註記時，更能接近於傳統書本的註記功能，甚至比書本註 記功能更加便利。
Kawase, Herder 和 Nejdl (2009)分析比較了一般傳統紙上註記以及線上
註記的差異，蒐集了研究數據，發現註記可以減少認知負載，然而線上註記 卻會增加認知的負荷，原因在於缺乏使用者所需的註記工具。所以，為了瞭 解學習者在中文線上學習上所需的註記工具，應探討國內外註記相關研究與 線上註記平台，以了解註記發展現況，並分析其優劣，以為進ㄧ步發展註記 功能的修正參考。 2.3.2 國內註記相關研究 國內有許多針對註記系統與其學習效益的相關研究，本節主要探討註記 系統的功能與開發技術，以及其應用在教學上的效益。吳漢障(2009)數位遊 戲設計教學平台、程仲凱(2004)電腦閱讀註記以及李錦興(2007)網頁註記標 記語言等就是國內開發的註記系統： （1）數位遊戲設計教學平台(吳漢障，2009) 吳漢障(2009)探究數位遊戲設計、數位學習、合作學習間的關係，以及 針對目前線上註記系統進行分析，而設計的一套註記的系統，其功能包括色 筆標示、加入及編輯註記，以及註記的組織樹狀結構。除此之外，系統也提 供文字超連結方式及圖形註記，可加入多媒體內容、檔案上傳、回應主題等。 其並以目前網路著名的 YAWAS、Annotea 、EDUCOSM、ScreenCrayons、
u-Annotate 及 Free-Form Annotation Tool 等線上註記平台進行功能性比較，如
表 2.3.1 註記系統比較表 （○：支援、×：不支援、△：部分支援）（資料 來源：吳漢障，2009）
YAWAS Annotea EDUCOS M ScreenCra yons u-Annotate Free-Form Annotation Tool 線上註記 On-line Annotation
○
○
○
×
○
○
文字標示 Text Highlight○
○
○
○
○
○
文字註記 Text Annotation○
○
○
○
○
△ 圖形註記 Graphic Annotation×
△×
○
○
○
超連結註記 Annotate As links×
○
×
×
×
×
共享註記內容 Shared Annotation×
○
○
×
×
△ 回應主題 Reply Threading×
○
○
×
×
×
巢狀註記 Recursive Annotation×
○
×
×
×
×
加入多媒體內容 Annotation of Multimedia×
△×
×
×
×
檔案上傳 File Uploads×
×
○
×
×
×
外部資料庫 External database △○
○
×
×
×
由表 2.3.1 可知，當前線上註記平台最為欠缺的為多媒體註記 Annotation of Multimedia，僅 Annotea 部分支援。 技術上，其開發出可於一般瀏覽器上使用的線上註記平台，此系統中除 了運用 FKC Editor 編輯註記內容，以及使用 DHTML 的技術，將自製的資料物件以手稿語言處理過，再動態的附加到文本所在的網頁中。 （2）電腦輔助閱讀註記系統(程仲凱，2004) 程仲凱(2004)註記模組中部份產生註記方式中資料表裡包括註記編號、 畫記起點、註記長度、註記內容、註記段落、畫筆顏色、註記類別等。其中 畫記起點是以文章開頭算起的字元位置，再以註記長度規範註記內容的字元 長度，這種註記方式的優點在於能明確的註記使用者想註記的點，其註記是 一對一的方式，符合註記起始點及長度才有註記產生。
其技術上，系統架設於Microsoft Windows 2003 Server，以Microsoft
IIS(Internet Information Server) 6.0作為網頁伺服器，資料庫中選擇Microsoft SQL2000。在IIS 上開發動態網頁，Server端是ASP.NET、Client端是JavaScript。 （3）網頁註記標記語言(李錦興，2007) 李錦興(2007)發展出一套註記標示語言（Annotation Markup Language），用來建立閱讀記錄追蹤，也包含針對多媒體內容的註記，以及 不同註記系統之間的註記資料交換、分享。其註記的元素分為四種，文字註 記、圖片註記、影片註記以及任何地方註記。其考量到學習者對註記的需求 和系統規模的限制，認為系統應具備使用者記錄、標示註記功能、插入註記 內容、註記內容可以插入多媒體內容、支援對目標是多媒體的註記、同步顯 示功能、註記的儲存與分享等功能。 技術上，是以javascript的技術將註記資料以xml的方式暫存在使用者 端，供分享與交換。以詢問方式把註記資料從使用者端上傳到伺服器，以 Htmlarea作為編輯註記內容效果的工具。 除了註記系統外，國內註記應用的研究相當多，其範圍不但涉及診斷學 習、合作提問與多媒體註解、提供學習者與教學者模組、探索註記文章類別， 甚至建構手機、紙本和桌上型電腦註記的無縫式環境(谷圳，2004；宋姍錞， 2006；林瓊甄，2006；程仲凱，2004；楊宏毅，2001；；潘淑靜，2006鄭勝
（1）學習支援及診斷之線上電子書學習系統 鄭勝仁(2003)所設計的學習支援及診斷之線上電子書學習系統，主要包 括註記學習模組、能力評估模組、學習輔助模組、教學輔助模組及學生模型 五部分，其實驗對象為大一計概班－Java 程式語言課程，使用七週上課時間 所做的實驗，發現其學習式的電子書能有效提升學生線上學習的時間以及線 上資源的使用率、學習電子書有效提升學生的學習成效，對於學生週考成績 有明顯的幫助、學習電子書能有效掌握學生的學習狀態，預測學生考試成績 準確度。 （2）適性化e-Learning教材發展之研究 林瓊甄(2006)以漸進式適性化數位教材，合作提問及多媒體註解，以提 供在學習程式設計時對不同起始點的學生輔助教材。實驗結果發現對中低程 度學生有顯著水準。不過此系統的多媒體註解功能是由學生提出再統一由教 師彙整，所以若能提出一套由學生自行提問與自動統整的註記系統，可減輕 教師的部份負擔。 （3）註記輔助提昇學童大意摘要的學習成效 程仲凱(2004)在其系統環境架構中提供了閱讀註記模組、重點畫記評估 模組、摘要教學輔助模組及摘要學習輔助模組，其實驗結果發現確實能有效 收集全班的閱讀疑難，提升學生對閱讀文章的閱讀理解。系統可有效提升學 生辨認出文章的主題句，對寫出大意的整體成績也有顯著提昇，但是對低國 文程度學童則沒有顯著的進步。 （4）多媒體註記工具促進英語寫作與口說 宋姍錞(2006)運用虛擬筆系統(VPen)以多媒體及網頁結合了聽、說、讀、 寫四個教學工具，使學生可以任意的在課程網頁上進行寫作及口說活動，目 的為探討學習者在線上學習英語的過程中，對於活動及使用工具的認知。其 研究發現，除了工具可影響使用者的使用態度，活動及教材本身的設計也是 重要的影響因素。
（5）多媒體註記工具應用於程序性知識的學習 潘淑靜(2006)探討多媒體線上註記工具『Vpen 虛擬筆』應用於「程序性 知識」的學習成效，其發現多媒體線上註記系統 Vpen 虛擬筆工具對於程序性 知識的學習是有幫助的，且註記在學習是有層次的，文字註記的學習層次優 於畫顏色底線框線，貼圖註記的層次更高於文字註記。其也發現個別註記中 的文字註記和貼圖註記對考試的訂正活動是有幫助的。 （6）註記系統輔助閱讀之可用性研究 楊宏毅(2001)與多位專家討論實驗時間、實驗文章與實驗的回憶問卷， 以31 位台灣大學和5 位中原大學學生進行線上閱讀註記實驗，發現就短期閱 讀的效果而言，科技類文章方面有顯著差異，沒有使用註記功能的使用者較 有使用註記系統且提供專家文章架構的使用者還要好。不過不同文章類別會 造成不同程度的影響，特定某些類型的文章比較適合使用本註記系統進行閱 讀。這跟紙筆閱讀的筆記習慣一樣，某些科目適合在書本上做摘要，某些科 目就不一定需要。 （7）無縫式的註記與發問學習輔助系統 谷圳(2004)以手機、紙本和桌上型電腦建構一個輔助學生學習及老師教 學的無縫式環境，電腦註記學習模組有註記模組、整理模組及發問模組，手 機註記學習模組有註記模組、整理模組及發問模組。結果發現且近八成的同 學認為以多媒體簡訊即時及地的輔助方式，可以增加學習的機會。 國內註記研究相當多，而註記不但應提供，畫線、顏色等功能，多媒體 註記以及運用在電子教科書中，也應提供掌握學生的學習狀態等模組應用於 程式語言、閱讀、英文等，而收不錯成效。除此之外，國外以提供許多線上 註記平台，較為人知的有 YAWAS、Diigo 以及 WebNote 等，使用者可以在 任何網頁上以 highlight 註記，以下進ㄧ步進行國外註記軟體的探討與分析。
（1）YAWAS Denoue和Vignollet(2000)運用文件物件模型(DOM)及動態HTML 而交付於一個具速度及隱私的系統，並經由實驗改善文件存取及提供使 用者直接索引。其目的在於個人化使用者所閱讀的文件，其結合了Google Bookmarks，可在任何網站中加入螢光筆功能，除此之外，也可以註記每 一個網頁，使再次閱讀此文章時，能很快的瞭解網頁內容。 圖 2.3.1 YAWAS 產生註記 （2）Diigo 任何網頁中可增加螢光筆及註記，並於下次瀏覽時仍出現於原始網頁中。 其最大的特色在於多色螢光筆(highlight) 註記、便利貼（sticky notes）可定位 於螢光筆或是任何位置、調整註記大小、具有隱私控制（private control）， 使用者選擇註記的隱私、公開及群族分享（shared with a group） (Diigo,2010)。
圖 2.3.2 Diigo 可使用螢光筆及線上註記
WebNotes Pro 是世界上第一個允許在PDF文件及網頁上註記的研究工 具。其可以在網頁瀏覽器中直接對文章畫上螢光筆，也可以寫上註解，且能 自動儲存、組織及搜尋。可藉由email、PermaLink 及 twitter 來分享註記 (WebNotes,2010)。 圖 2.3.3 WebNotes 的線上註記 除了YAWAS、Diigo與WebNotes外，註記功能也逐漸導入支援使用者瀏覽 過的網頁進行推薦的社會化導覽（social navigation）功能，如AnnotatEd及 SpreadCrumbs。AnnotatEd提供學習者瀏覽教育資源網時註記的功能，並記錄 使用者瀏覽過的網站以及學習者提供的註記，運用這些資訊來建立社會化導 覽(Farzan,2006)。而SpreadCrumbs是一套網頁註記工具，其提供了一套方便 使用者互動介面，如同一般書本一樣，使用者可以在網頁的任何地方進行註 記，其他功能除了註記的隱私（private annotations），還包括支援社會化導覽 （social navigation）與社會化合作（social collaboration）的社會化書籤（social
bookmarking）、個人備忘錄（personal reminders）等。
所以，註記科技的發展，不但已進入到第四代，註記的分享（楊漢勇， 2004），而且導入了社會化導覽（social navigation）的概念，強調個人化的功 能。這與強調使用者參與其中、使用者共同創作與強調分享的 Web2.0 概念不
2.3.4 Web2.0
Web2.0 或稱為下一代網路，為 O＇Reilly Media 的副總裁 Dale
Dougherty 和 MediaLive International 的副總裁 Craig Cline 在一場腦力 激盪的會議(O'Reilly,2005)中所提出來的，當時只有舉例，並沒有明確的定 義。網路產業之所以從 Web 1.0 進入到 Web 2.0 的關鍵，其市場驅動因素有 全球的顧客基礎、永遠保持連線、到處連線上網、使用者參與其中，並且提 供數位內容、建置成本巨幅下降等。
O＇Reilly（2005）”What is Web 2.0”中也提到，web2.0 的七大特色 網路應當被視為是平台、利用集體智慧、資料是下一個「Intel Inside」、 軟體升級模式走到盡頭、輕巧的程式設計模式、軟體不在侷限於單一裝置及 豐富使用者的感受。所以，在經濟泡沫下產生的 web2.0 概念中強調使用者參 與其中、利用群體智慧，所以網頁內容更新者，已不再是被動由網頁設計者 所提供，而是轉移到網頁使用者共同協同創作。著名的 Blog、wiki、RSS 等 就是公眾創作工具。
Web2.0 是以Web2.0 概念與技術，如Blog、Wiki、標籤(Tag)、社交網 路服務(SNS)、追蹤訂閱(RSS)等社會軟體的應用為核心，依據六度分隔理論 (six degrees of separation)、可擴展標記語言(XML)及非同步動態網頁技 術(AJAX)等新理論和技術，以實現的網際網路新一代模式，以Flickr、 Linkedin、Craigslist、Ryze等網站為代表(梁政良，2007)。 部落格可以以文字、圖片、及影音等不同方式呈現，連士傑、李世忠 (2006) 於認為Blog 具有五大特性： （1）技術低門檻：使用 Blog 的技術門檻很低，尤以部落格入口網站所提供 的功能。 （2）高自主性：使用者可以依入口所提供的版型，隨意更換不同風格的版面。 （3）跨平台互動：以 XML 格式包裝內容，以跨越不同版本的部落格。
（4）即時發佈：操作容易，可立即發布，方便且迅速。 （5）多元應用：Blog範圍涵蓋所有與人相關的議題，發展出不同且豐富的題 材背景。 所以 Web2.0 概念運用在註記科技上，應考慮個人化功能、知識分享、資 訊再利用、共同參與以及即時性等功能。 2.3.5 小結 由文獻得知，結合國內外註記相關研究與現行軟體的應用，，而以Web2.0 的概念與趨勢融入註記科技時，應該具備以下特性： （1）文字註記 註記可以減少認知上的超載，而加上文字註記，使得劃記重點與文字註 記相對應，更能幫助其回憶此文章的重點。 （2）多媒體註記 文字註記的學習層次優於畫顏色底線框線，貼圖註記的層次更高於文字 註記，所以文字註記與貼圖註記相結合，更能提高其層次。 （3）多重註記功能 在語文學習上，應提供多重註記功能，以便多重註記文章中字、詞及句 子，並能區別其間的關係。 （4）個人化 後端資料庫中除了存取線上教材的相關知識外，亦應存取使用者帳號以 及個人網頁空間，並運用關聯性資料庫，在讀取時可針對個人帳號時，建立 個人化資訊於電子教材中，如此網路學習系統才能提供豐富的管道以及提高 個人化的控制權。 （5）知識分享 創作者可透過知識的互動、分享與溝通，可集合眾人之力，提升網際網 路在數位學習領域的服務功能。每個人提供的語文註記可供別人分享，相同
合作學習的學習型組織，並創造集體合作的智慧。 （6）資訊再利用 Web2.0 強調運用集體創作方式達到自助服務的目的，所以善用集體所產 生的資料，並再運用，回饋於貢獻資料庫系統的使用者，而資訊再被利用， 其資訊的享用又回到使用者自助服務的目的。 （7）互動性（共同參與）-多人互動 線上電子化教材除了提高的個人化的控制權，更應強調使用者間的互 動，包括同時同地、同時異地、異時異地以及異時同地等學習形態，同藉由 互動與共同參與，以增加使用者與整個族群間資訊的互動。 （8）即時性-多人即時 要讓使用者在學習上感受到實用及迅速的服務，網際網路的所提供的功 能，應朝向容易操作，且可以立即發布。更進一步，應提供即時性的註記功 能，使用者可以在第一時間與所有線上使用者分享註記內容。
2.4 直式電子書註記系統相關技術探討
2.4.1 網路基本架構 全球資訊網(WWW)是透過網頁系統，也就是網頁伺服器提供服務，為 Internet 上最常提供資訊的方法。使用者透過 Browser 送出請求，伺服器端收 到需求後將使用者所需的網頁檔案傳回使用者所使用的瀏覽器上。 使用者在送出請求與回應的過程中，主要是透過超文件傳輸協定（HTTP） 來達成，是屬於 OSI 七層模型中的應用層，較新的規格為 1999 年制定的 HTTP/1.1。其規格允許 Browser 同時送出多個請求，而到到較好的效能（蔡 清松，1991）。超文件標示語言(HyperText Markup Language,HTML)是在 WWW 上發行 的主要結構化語言，其分為三部分，第一部分描述 HTML 版本的資訊
(Document Type Definition,DTD)，第二部分為表頭(head)，宣告 HTML 文件資
訊的前言，第三部分為文件的本文。
為了解決瀏覽器只能解讀超文本的文字資料以及特定圖片，讓使用者能 以瀏覽器使用各種功能，因此有了 Plug-In 軟體來解讀網路上特定格式之檔 案，如 Flash、Java Applet、ActiveX 等，為常見的 Plug-In 軟體，用以解讀伺 服器提供檔案（楊傑綸，2009）。
2.4.2 網頁伺服器（Web Server）
目前有許多網頁伺服器的服務運行於許多不同的作業平台中，依全世界 市占率高低有 Apache、Microsoft、Google、nginx 與 lighttpd 等，而以 Apache 市占率最高，超過 50%，其次為 Microsoft 的 IIS，其於市占率皆未達
圖 2.4.1 網頁伺服器市場占有率（資料來源: netcraft.com） Apache 不但提供 HTTP1.0/1.1 通訊協定外，也支援 CGI、FastCGI、虛擬 主機、SSL(網際網路傳輸規格)、Perl、PHP、Java Servlet 等擴充功能(Apache Software Fundation, 1999)。
網際網路資訊伺服器(Internet Information Server，IIS)是目前全世界市場 佔有率第二大的網頁伺服器軟體(Netcraft.com,2010)，其搭配系統為 Window NT/2000/XP/2003 等作業系統運行，可執行 ASP(動態伺服器網頁)及 ASP.Net 等網站應用程式，以 Windows 本身帳號作為管理，使用更加方便。IIS 的缺 點在於無法跨平台，對硬體需求較高，消耗資源較多，且版本更新及漏洞修 補不夠迅速，常常成為駭客攻擊的目標（陳軒正，2004）。 表 2.4.1 Apache 與 IIS 比較表（資料來源：研究者整理） 伺服器 Apache IIS
(Internet Information Server) 網頁應用程 式 CGI、FastCGI、虛擬主機、 SSL、Perl、PHP、Java Servlet ASP、ASP.Net、PHP、JSP 擴展性 Windows、Unix、Linux 以及 Freebsd 等 僅限於 Windows 系統 原始碼 開放 不開放
收費 免費 購買 Windows 系統 市占率 約 50% 約 30%
2.4.3 PHP
PHP (PHP Hypertext Preprocessor)，最初稱為「Personal Home Page Tools」，也稱為「Professional Homepages」以及「Pre-Hypertext
Processor」。是一種開放原始碼且可以嵌入 HTML 頁面中電腦執行的腳本語 言，主要用於網頁伺服器端的應用程式，用於動態網頁設計。 PHP 的安裝及學習過程方便且簡單，而開發 PHP 程式的文字編輯器有很 多，因其原始碼為純文字，所以甚至可以使用記事本來編寫。資料庫連接也 十分方便，相容性強，甚至能在不同伺服器、作業系統及平台中使用。 2.4.4 MySQL 資料庫 資料庫是由一群資料檔案所組成的整合性集合，而儲存資料的地方。資 料庫中若干筆資料紀錄所組成每一個檔案或表格，一些資料項組成每一筆資 料紀錄。資料庫依資料儲存的架構，可以分為階層式資料庫、網狀式資料庫、 關聯式資料庫以及物件導向式資料庫（陳軒正，2004）。 關聯式資料(Relational Database,RDB)是一種以關聯式資料作為基礎的 資料庫，利用二維資料表(table)處理資料間彼此的關聯，而在操作資料時是 以關聯代數作為基礎。其優點包括快速的存取速度、查詢資料容易、隨機存 取資料以及權限設定。目前關聯式資料庫是市場的主流。 MySQL 便是一套小型、精簡、易於使用的資料庫伺服器，以 SQL 查詢語言 的主從式關聯資料管理系統，支援多平台。此外 MySQL 也支援微軟發展的資 料庫連接協定 ODBC 的應用程式存取，也支援 C、Perl、PHP 及 Python 等語言。
SQL 數據庫服務器，被廣泛地應用在網際網路上的中、小型網站中。隨著 MySQL 的不斷成熟，MySQL 強大許多功能，並逐漸用在更多大規模網站，如维基百 科、Google 和 Facebook（維京百科，2010）。
2.4.5 Action Script
ActionScript 原是 Macromedia 為其 Flash 產品所開發的，而現已被 Adobe 收購。Flash 最初是一種腳本語言，在 Flash 影片中的影片影格，可 以調整時間軸控制影片長短，運用關鍵影格(keyframe)是可以改變先前相同 影格內容，以呈現關鍵性的動作與內容變化。時間軸中以一個實心的小黑點 來表示關鍵影格的實體，而如果關鍵影格裡沒有實體，則以空白方格來表示。
其間已經開發了許多版本， ActionScript 2.0 加入了物件導向編程，到 了 Adobe Flash CS3 的 ActionScript 3.0 版本，重新設計名稱空間結構，增強 了對物件導向的支援，功能性高，與 JavaScript 都是基於 ECMAScript，多運 用在互動性、娛樂性以及實用性開發，以 SWF 格式輸出，本機或瀏覽器中皆 可播出，方式包括動畫、音頻、文字與事件處理 (維京百科，2 010)。
Flash 的優點為體積小，容易發佈，目前已經發展到 Flash Player10，，，， 超過九成的瀏覽器都有安裝 Flash Player (Adobe，2010)，以 Flash 開發應 用程式可省下軟體發佈的困擾。
2.4.6 ElectroServer
ElectroServer 是一套便於發展多人遊戲且功能強大的 Socket 伺服器，其
中 ElectroServe4 的負載測試，已經發展可以適應二十萬共同線上使用的經 驗，其他優點包括具彈性、可擴展性、獨立或分散運行方式的動態延伸於使 用者端、易於使用和成本效益（ElectroServer，2010）。
ElectroServer 為一套多人伺服器平台，其提供 Zone 與 Room 的機制開發
者以 flash 開發 client 端應用程式，運用 Room 使一群體使用共用空間。一群
Room 組成 Zone，且一個 Room 只屬一個 Zone。ElectroServer 提供公開與隱
私的方式，公開的部分係透過 PublicMessage，將訊息傳遞給所有在同一個
Room 的使用者；隱私的部份則透過 PrivateMessage 傳遞給 Zone 中的特定使
用者（楊傑綸，2009）。ElectroServer 的連線架構模式如圖。
圖 2.5.1 ElectroServer 訊息模式(資料來源：楊傑綸，2009)
2.4.5 小結
Apache 與 IIS 為世界上市場占有率最高的伺服器軟體，其中又以 Apache 為目前市占率之最，因 Apache 具支援各作業系統的擴增性、穩定性、安全性、 支持多種語言以及開放原始碼等優點。PHP 除了具有開放原始碼的優點外， 也是嵌入式語言，PHP 程式碼可以與 HTML 語法寫在一起，有著編寫容易、方
Script3.0 增強了對物件導向的支援，功能系高而多運用在互動性較高的網 頁中。所以，本研究希望以建置即時電子書註記系統於 Apache Web Server 中，並以互動性高的 Action Script 程式語言技術與即時性高的 ElectroServer，藉由 PHP 為後端管理中樞，管理多人使用帳號與使用以及資 料庫與 client 間的中介語言，將資料儲存於 MySQL 資料庫中。
