專案程序-20090418

功能性規格

• • 故事1：「讀者可以在網頁上特定範圍內任意選擇標註的位置。」

  • 故事2：「有個選項，可以讓讀者選擇動作。」

  • 故事3：「網頁會送出讀者所標註的位置。」

  • 故事4：「網頁上有個導覽列，可以執行眾多的功能。」

功能性規格如上，故事裡面已經說明清楚了。本週的任務就是先做出前端介面吧。

技術性規格

• • 你會有一個網頁，網頁內只有特定部份需要進行標註。你可以輸入DOM指定物件來選擇要標註的範圍。

  • 範圍內每一個字都成為標註的單位，註明位置的ID編號，除了空格之外。

  • 承上，但是英文的話則必須以空格切割，一個單字是一個標註的單位。

  • 選擇取完之後，選取範圍最後一個字下方會顯示一個選單，可供讀者選擇接下來的動作。

  • 請設計一個「Highlight」的按鈕，讀者按下去之後會對伺服器送出讀者選擇的範圍，也就是起始的ID位置跟結束的ID位置，請以二維陣列的方式送出，以供未來可以支援多範圍的選取。

  • JavaScript的檔案將以PHP寫成，以便支援後端的操作。

  • JavaScript必須實作一個測試的機制，像是PHPUnit那樣的統一測試工具。PHPUnit的功能在書中有詳述。 (未完成)

設計階段

本階段以功能實做為主，介面設計待之後專案程序再進行。

建構階段

• • 準備一個測試用的網頁。參考來源：2009/04/10 中華副刊。

• 設計一個JavaScript檔案，並且給予引入。

• 最後將JavaScript檔拆開放入CodeIgniter的架構，並適當地使用view跟lang的功能。

建構階段中參考的網址如下：

• CodeIgniter 用户指南 版本 1.7.1

  • 千一網路：document.selection 的 createRange、document.selection 的 empty、document.selection 的 clear。

  • YanFan.net：[询问]opera里用javascript怎么取消文字选取？

  • Life["Breathing"]：javascript 取得滑鼠選取(反白)的值

  • mozilla Taiwan：如何用Javascript抓取滑鼠游標位置並且將圖層移動至此？

  • mozilla <developer center />：Selection。(意外地還蠻多有用的資訊！)

測試階段

本程序只會進行功能性測試。測試內容與結案成果一起報告。

結案

請交出一個可以看得成果，並於下次group meeting時報告。