序列分析工具 Sequential Analysis Tool

你覺得論文要做到什麼程度呢？

今天來談談一些論文週遭的事情。你覺得，作為一個研究生，論文要寫到什麼程度才算是可以呢？

學弟說：「老師都留你這麼久了，應該是可以畢業了吧。」

另一位老師說：「你這樣就可以了啦，趕快邁入下一個階段吧。」

我的老師也覺得這個系統做到這樣就差不多了。

可是，我卻覺得還差得很遠。系統的完成度、實驗規劃、分析的方法、撰寫論文的能力，我都還差得很遠很遠。

作研究與系統完成度的矛盾

一個基本的概念是說，我做的這個系統，跟論文本身並沒有直接的關係。很多時候我比較是傾向於讓使用者用得更順利、更容易上手的方向去做，然而這跟論文的核心是沒有關連的。即使用了一整天的時間只為了防止標註時位置跳走的問題，在論文上依然不會為此寫上任何一個字。

研究者是對使用者很殘忍的一種角色，我常常會有這種感覺，特別是做與人相關的研究，而這也是個事實。研究者只是為了利益（實驗的結果）而榨取使用者，儘管這不是很能夠上手的東西，使用者也不見得會喜歡，但是為了實驗、為了寫論文、為了發表，就將就地配合來做吧。

我並不是說為了研究而給使用者作的系統一定很難用，但是為了研究考量，總是會希望能以最少的成本獲得最大的利益，這也是合乎常理的想法。用簡單地架構把論文核心相關的概念用上去，並且快速地實作出來，作實驗，分析，寫論文，這是最快的方式。

事實上，出去工作之後，應該也是一樣的道理。只要能賣錢，系統越快完成越好。

只是，你覺得論文做到這樣的程度就夠了嗎？

人生的下一個階段到底是什麼呢？

不知道大家是不是都是經過社會化的洗禮，很多老師都會跟我講一樣的話：

「你要趕快邁入人生的下一個階段。」

只是很遺憾的，我資質駑頓，至今仍不知道人生的下一個階段要幹嘛好，

我是一個沒什麼欲望的人。每天能三餐溫飽、晚上睡個好覺，平時有還算順口的白開水可以喝，最好是能喝到一條7元的沖泡咖啡，再來找些事情作一作，這樣我的一天就非常滿足。

現在如此，我想之後也會是如此。

人生是還有很多要學的東西，也是有很多需要去努力的東西，這些我都知道。不過那到底是不是人生的下一個階段，這我就不是很清楚。

我只知道，如果我在這階段作的事情，通常是不太會帶到下一個階段去繼續做。舉例來說，論文寫到什麼程度，大概都跟我以後找工作作的事情沒什麼關係。儘管自身擁有的技術跟知識是可以帶著走的，但我也不認為真的遇得到可以把這些都派上用場的工作。即使是繼續進修，我覺得我學的東西大概也跟現在在做的東西又是全然不同的事物，這種事情俯拾即是。

如果每次這樣子切換到下一個階段時，都會如此地將自己重置，那麼為什麼大家要如此追求人生下一個階段呢？

那麼，預計要什麼時候畢業？

雖然之前還會排行程表來規劃時程，但是後來發現自己能力太差，需要學習與鑽研的東西與預計行程有好大的一段差異，所以之後就不太參考那張表，只是努力地做下去。

老實說，這並不是一件好事，就工作能力來說。

但是，這卻是一件愜意的事情。

當學弟問我預計要何時畢業的時候，我只能回答「不知道，我只想著怎樣把這系統寫好、實驗做好」的時候，某方面來說是很令人感到愉悅的事情。

我只是個資質駑頓的人，一次只能做一件事情。所以我只關注在一件事情上，然後把這件事情做好，這樣就很滿足。

從另一個角度來說，大概就是我覺得滿意了，我就會想要去畢業了吧，這種感覺。

儘管人生事事難如意，也不會有真的做到滿意的這種情況發生，也許這只是心智不成熟的我想要的小小任性而已。

論文不寫、系統不做地寫這種東西，我也覺得現在的我是在耍任性。

我果然是個死小孩啊XD

論文進度報告(2010/11/27)：KALS!標註工具說明

主要功能差不多算是完成了，雖然還有一些bug，但總算是具有可以拿出來見人的程度。儘管我認為如果要讓使用者很開心地使用KALS!標註工具的話，仍有許多需要調整的地方，不過進度有點迫在眉睫了。

以下是KALS!標註工具的說明內容，有興趣的讀者可以從說明一窺KALS!的介面與功能，也算是論文進度到一個段落的報告吧！

什麼是KALS!標註工具？

KALS!標註工具是一種附掛在HTML網頁上的標註工具。他可以剖析、調整HTML的內文，將原本靜態的網頁加上「標註」的功能。

使用者可以透過KALS!標註工具為網頁上的文字新增標註並填寫補充的筆記，也可以瀏覽其他人的標註、針對其他人的標註進行討論，或是將其他人的標註加入「喜愛清單」，給予他一個鼓勵。

KALS!標註工具會在網頁上將重要性較高的範圍文字標示為「紅色的文字」，並根據使用者的標註行為，適時地提供閱讀技巧的「建議」與「推薦標註」，進而提昇使用者的閱讀能力。

操作介面介紹

KALS!操作介面

KALS!操作介面

1. 工具列：畫面最上方會顯示工具列，您可以在工具列中進行「登入」、「註冊」、「登出」、設定「帳號資料」 與「標註顯示」，或是查閱「說明」。
2. 標註顯示：使用KALS!標註工具的網頁文字上會顯示標註的狀況。畫底線的文字表示是現在登入帳號的標註，也就是您標註過的部分；紅色的文字是KALS!的指示，表示比較重要的部份。此外，在選取標註範圍、顯示標註範圍、顯示推薦標註飯範圍時，皆會有不同的字體顏色與框線。以下介紹到各工具時會一併說明。
3. 選取提示：當您滑鼠移到網頁文字上時就會顯示選取提示，如果您要選取這個文字，請點選這個選取提示以確定。您也可以直接點選網頁文字來選取。
4. 標註工具：新增、管理、瀏覽標註的主要工具。選擇標註範圍之後就會顯示標註工具。
5. 建議工具：顯示建議、推薦標註的工具。在新增標註之後，或是瀏覽標註時點下建議圖示就會顯示。

工具列

工具列介面：未登入的狀態

使用KALS!標註工具的網頁上方會固定顯示工具列。工具列在未登入之前的顯示狀態如上圖，左方是KALS!標題，右邊則是可以使用的功能，包括「登入」、「註冊」、「標註顯示」與「說明」。請以滑鼠點選各功能開啟。

• 登入：以您註冊過的電子信箱地址與密碼來登入KALS!。登入之後才能進行新增標註及更多的動作。
• 註冊：用電子信箱地址與密碼來建立一個新的帳號。
• 標註顯示：設定網頁上顯示的標註，包括您的標註與推薦的標註。
• 說明：開啟KALS!的說明視窗。

工具列介面：登入之後的狀態

當您登入或註冊之後，工具列會隨著您的帳號而改變。左方是KALS!標題，右邊則是會顯示您的「名字」，以及其他可以使用的功能，包括「帳號資料」、「登出」、「標註顯示」、「說明」。

• 帳號資料：設定此帳號的名字、性別及變更密碼。
• 登出：將目前登入的帳號登出。

標註顯示

網頁文字上的標註顯示

KALS!會依照您的登入狀況而在網頁上呈現不同的標註顯示。各種標註顯示如下：

1. 畫底線的文字：表示自己的標註，不同顏色的底線表示不同的標註類型。當您在重複的位置標註，並使用不同的標註類型時，KALS!只會顯示您最新的標註。
2. 紅色的文字：表示KALS!推薦的標註，可能是很重要的部分喔。
3. 藍色框線的文字：表示您目前選取的範圍。
4. 藍色的文字：表示您目前瀏覽的標註的範圍。詳細介紹請見標註工具的說明。

建議工具的標註顯示

在使用建議工具時，則會顯示需要建議的標註與推薦標註的範圍。

1. 綠色框線的文字：表示您需要建議的標註的範圍。
2. 綠色的文字：表示推薦給您的標註的範圍。

標註工具

標註工具介面

當您在網頁上選取要標註或瀏覽的範圍之後，標註工具便會自動顯示在您選取範圍的附近。

標註工具的功能包括：

1. 標註工具標頭：標頭有「移動」跟「關閉」功能。您可以在「移動」上拖曳標註工具，或是點選「關閉」以關閉標註工具。
2. 標註編輯器：您可以在此新增、編輯標註。詳細介紹請見標註編輯器的說明。
3. 編輯器顯示切換開關
4. 標註列表：列出您標註範圍重疊的所有標註，以您的標註、您喜愛清單的標註以及其他標註的順序條列。詳細介紹請見標註列表的說明。

標註編輯器

標註編輯器介面

您能透過標註編輯器新增、編輯標註。標註編輯器的功能包括：

1. 顯示作者的名字，也就是您的名字。
2. 標註類型選擇。
3. 編輯筆記。
4. 遞交標註的「新增」。如果是編輯標註中，則可以「更新」完成編輯，或是「取消」編輯。

標註編輯器的標註類型選單

點下標註類型(預設是顯示「重要」)，右邊就會帶出標註類型選單。每個標註類型都表示不同的標註策略，目前有五種標註類型：

• 重要：標示文章中重要的段落。要熟知這篇文章，就必須要熟讀的部份。
• 困惑：標示您對文章內文產生困惑的地方。
• 質疑：標示您質疑文章內文是否正確的地方。
• 舉例：記錄或補充與文章內容的相關資料、舉例。
• 摘要：用自己的話來歸納文章的摘要內容，像是註明原因、影響、特色等等。

標註編輯器的筆記編輯器

您可以利用筆記編輯器補充標註的內容。筆記編輯器具備所見即得的功能，您可以為您的筆記添加格式，像是字體粗細、大小、顏色。

全螢幕的筆記編輯器

點選筆記編輯器左上角的「 最大化」按鈕，就可以放大筆記編輯器的編輯空間。除此之外，筆記編輯器也會顯示完整的工具列。放大的筆記編輯器中還可以插入表格、圖片、甚至是YouTube的影片。

標註列表

標註工具中的標註列表與標註選單

標註列表是條列您選擇範圍之下重疊的所有標註。條列的規則為：

1. 您的標註：依照更新日期由新到舊排序。
2. 您喜愛清單的標註。
3. 其他標註：依照重要性由高到低排序。

標註列表介面

標註列表的介面中包含以下功能：

1. 標註顯示藍色的文字：將滑鼠移至標註列表的標註中的時候，網頁文字上會以「藍色的文字」來標示。
2. 作者的名字。如果作者是您現在登入的帳號，那麼名字會加上底線。
3. 標註類型
4. 加入/ 移出喜愛清單：您只能對不是您的標註進行加入/移出喜愛清單的動作。當您將該標註加入喜愛清單之後，這個功能就會變成移出喜愛清單。
5. 喜愛人數：當有人將此標註加入喜愛清單之後，此處會顯示已經加入喜愛清單的人數。
6. 觀看建議提示：如果標註上有顯示建議提示的圖示，表示有建議要給這篇標註。請點選此圖示來開啟建議工具，觀看建議的內容吧。
7. #標註編號：引言討論的時候可以參考用。
8. 筆記：該篇標註的筆記。
9. 討論列表：每個標註底下會列出頭五篇回應他的討論，您可以看到其他人對於這篇的回應。討論列表會縮排，用來跟非討論列表的標註作為區隔。
10. 標註選單：可以進行標註列的管理。

標註選單介面之您自己的標註

標註選單介面之別人的標註

當滑鼠移至標註列表的標註上時，標註旁邊會顯示標註選單。標註選單會依照標註的狀況而有不同的功能，包括：

1. 顯示此標註更新到距離現在的時間。
2. 如果是您的標註，則可以進行「編輯」、「刪除」的動作。
3. 如果是別人的標註，則可以進行「回應」的動作。
4. 用「瀏覽討論」來開啟該標註的標註討論視窗。

標註討論視窗

標註討論視窗介面

當您在標註列標中要「回應」某個標註、或是點選「瀏覽討論」時，就會開啟標註討論視窗。標註討論視窗的功能包含：

1. 錨點文字預覽：顯示該標註範圍的網頁文字，以藍色框線與藍色文字標示的位置就是這個標註所指定的範圍。
2. 標註列表：以一個主題標註及其討論標註為主的標註列表，功能與標註工具中的標註列表相同。
3. 編輯器顯示切換開關
4. 標註編輯器：與標註工具中的標註編輯器相同。當您指定要回應哪篇標註時，編輯器會註明該篇標註的名字與標註編號。

建議工具

建議工具介面

當您新增標註之後，KALS!會在適當的時機提供您標註的建議。您也可以在標註工具的標註列表中點選 觀看建議提示，以顯示該標註的建議。建議工具的功能包括：

1. 需要建議的位置：網頁上以綠框標示的範圍是KALS!給您需要建議的標註的位置。
2. 推薦標註的位置：網頁上以綠色文字標示的範圍是KALS!給您的推薦標註的位置。當標註工具沒有推薦標註時，則不會顯示推薦標註的位置。
3. 建議工具標頭：標頭有「移動」跟「關閉」功能。您可以在「移動」上拖曳標註工具，或是點選「關閉」以關閉建議工具。
4. 需要建議的標註：這是KALS!認為您需要建議的標註。
5. 建議：KALS!會依據您的標註資料提供建議。
6. 推薦標註：KALS!會找尋合適的標註並推薦給您。如果您覺得不錯的話，別忘記將他加入喜愛清單喔！如果KALS!找不到合適的標註，則不會顯示推薦標註。
7. 建議回饋：請您參考以上的建議與推薦並選擇回饋的動作，送出回饋之後，此建議就會隱藏起來。回饋分成「贊成」與「不贊成」，不贊成的情況下會保留您的標註，贊成的情況下，如果有推薦標註，則會把您的標註移動到推薦標註的位置，如果沒有建議標註，則會刪除您的標註，請您重新撰寫標註。

帳號操作步驟介紹

如何登入？

要使用KALS!撰寫標註的話，一定要先登入才行喔！

登入視窗介面

1. 在工具列上找到「登入」選項，點選開啟登入視窗。
2. 輸入電子信箱地址(或是您的帳號)與密碼，再點選「登入」，就完成登入動作。

如何登出？

如果您要切換帳號的話，請使用登出功能。

登出視窗介面

1. 在工具列上找到「登出」選項，點選開啟登出視窗。
2. 點選「登出」，就完成登出動作。

如何修改名字？

您帳號的名字會顯示在標註上，預設是使用電子信箱地址中帳號的名字，您也可以自訂您的名字。

帳號資料視窗介面

1. 如果您沒有登入的話，請先進行登入動作。
2. 在工具列上找到「帳號資料」選項，點選開啟帳號資料視窗。
3. 請在「名字」欄位填寫您想要設定的名字，然後按下「儲存」按鈕就完成修改名字的動作。

如何修改密碼？

帳號資料視窗中的開啟密碼變更視窗連結

密碼變更視窗介面

1. 如果您沒有登入的話，請先進行登入動作。
2. 在工具列上找到「帳號資料」選項，點選開啟帳號資料視窗。
3. 請點選「開啟密碼變更視窗」。
4. 請輸入您新的密碼，並再輸入第二次密碼，確認無誤之後按下「儲存」按鈕，就完成密碼變更的動作。

標註操作步驟介紹

如何選取標註範圍？

KALS!標註操作相關的所有動作，都是從選取標註範圍開始。

選取提示介面

1. 選取範圍開頭： 請將滑鼠移至您要選取範圍的網頁文字上，KALS!會在該文字旁顯示「選取提示」。如果您確定要選擇此文字為範圍開頭，請點選「選取提示」。
2. 選取範圍結尾：跟選取範圍開頭一樣的動作。您也可以點選跟開頭一樣的文字，表示您選取的只有一個字。
3. 顯示標註工具，完成選取標註範圍的動作。

附帶一提，英文文字會依據空格斷開成為一個一個的字，標點符號也是可以選取的喔。

如何其他人的瀏覽標註？

選取標註範圍之後，便可以在標註工具的標註列表中瀏覽跟此範圍重疊的標註，而標註列表下方則是會顯示其他人的標註。

當您在撰寫標註時，別忘了看一下這段範圍有誰標註過。如果您覺得別人的標註寫得很不錯，您可以把他 加入「喜愛清單」。下次顯示標註列表時，他的標註就會排在更上方。

KALS!只會將推薦的標註顯示在網頁文字上，而不是顯示所有人的標註。因此一般來說是不容易知道別人的標註在哪邊。這是為了避免大量標註造成使用者的混亂而作的過濾。

如何新增標註？

1. 選取標註範圍。由於新增標註之後就不能修改範圍，請務必慎選您的標註範圍。
2. 在標註工具中的標註編輯器撰寫您的標註內容，包括選擇標註類型、撰寫筆記，完成後按下「新增」按鈕遞交。
3. 完成標註。
4. 如果KALS!沒有建議，則標註編輯器會切換成編輯模式，您可以調整您新增的標註內容。
5. 如果KALS!有建議，則會顯示建議工具。

如何編輯您的標註？

1. 選取您標註的範圍。
2. 在標註工具中的標註列表找到您的標註。
3. 請將滑鼠移到該標註上，標註旁邊會顯示標註選單，請點選「編輯」功能。
4. 標註工具的標註編輯器會切換成編輯模式，請在此編輯您的標註。
5. 完成之後，請按下標註編輯器的「更新」按鈕，完成編輯動作。
6. 如果您想要取消編輯，則請按下「取消」按鈕即可。

已經新增的標註範圍是無法編輯的，所以在新增標註的時候要慎選標註範圍，否則就只能刪除重寫囉。

如何刪除您的標註？

1. 選取您標註的範圍。
2. 在標註工具中的標註列表找到您的標註。
3. 請將滑鼠移到該標註上，標註旁邊會顯示標註選單，請點選「刪除」功能。
4. 看到您的標註消失，就完成了刪除動作。

如何回應別人的標註？

1. 選取標註範圍。
2. 在標註工具中的標註列表找到您想回應的標註。
3. 請將滑鼠移到該標註上，標註旁邊會顯示標註選單，請點選「回應」功能，接著會開啟「標註討論視窗」。
4. 請標註討論視窗的標註編輯器裡撰寫您要回應的內容。
5. 完成之後，請按下標註編輯器的「新增」按鈕，即可完成回應動作。

標註列表上的 愛心圖示的用處是？

愛心的意思是 加入或 移出喜愛清單。加入喜愛清單，表示您對他的標註的認同。

您可以對別人的標註進行加入/移出喜愛清單的動作。當您將該標註加入喜愛清單之後，這個功能就會變成移出喜愛清單。

標註列表上的 對話與筆圖示的用處是？

對話與筆的意思是 建議提示。如果標註上有顯示建議提示的圖示，表示有建議要給這篇標註。如果您要查看給您的標註的建議，請點選此圖示來開啟建議工具並觀看建議的內容吧。

一定要贊成建議與推薦嗎？

建議與推薦只是供您參考，並不是強制性的規則，您也可以選擇不贊成，並隱藏建議。

不過，無論您是贊成或是不贊成，都請盡量選擇建議回饋的其中之一。您的建議回饋會改善KALS!的建議與推薦的方式，讓之後的建議與推薦更為準確。

建議的內容與實際情況不符合，這樣正常嗎？例如我選擇名詞來標註，KALS!卻建議我標註名詞，發生這樣的矛盾情況。

由於電腦技術無法完美地剖析中文語法，因此難以避免的是會發生誤判的情況。如果您遇到了類似的建議錯誤，請回報給系統管理者以求得改善。

如何關閉標註顯示？

如果您覺得網頁文字上的標註顯示太過雜亂，您也可以關閉標註顯示。

標註顯示視窗介面

1. 在工具列上找到「標註選項」選項，點選開啟標註顯示視窗。
2. 標註顯示中可以設定顯示您自己的標註或是KALS的推薦標註，請取消勾選您不想要顯示的標註顯示，再按下「確定」按鈕即可。

歡迎大家多多提供建議喔！

CKEditor設定超連結的目標預設為「_blank」的方法

利用CKEditor作為所見即得編輯器的討論區會遇到一種情況，允許使用者在自己文章中加入超連結，但是因為預設的超連結目標(target屬性)是自己網頁，所以當其他使用者點下超連結時就會將從討論區網頁跳到其他網站去。

為了避免這個問題，簡單的作法是修改CKEditor中超連結預設的目標選項。根據「Set link default target to _blank」討論區中的指示，主要要修改檔案中的設定即可。

1. 找尋檔案[CKEditor存放路徑]/plugins/link/dialogs/link.js
2. 搜尋設定：
   label:a.lang.common.target,'default':'notSet'
   並將之改成
   label:a.lang.common.target,'default':'_blank'
   
3. 搜尋設定：
   label:a.lang.link.targetFrameName,'default':''
   並將之改成
   label:a.lang.link.targetFrameName,'default':'_blank'

由於預設的程式碼是經過壓縮的，一開始打開的時候可能會覺得程式碼都擠在一起很難閱讀，但仔細找一下還是可以找到的。

我將改完之後的檔案上傳供大家使用：link.js。請解壓縮後放置在[CKEditor存放路徑]/plugins/link/dialogs/link.js即可。來源是CKEditor 3.4.1。

CSSDOC標籤參考表

繼上一篇介紹CSSDOC之後，這一篇則是更詳細地將CSSDOC推薦的32種標籤(tag)做一個翻譯整理。原本CSSDOC的標籤只有寫在草案的PDF中(SkyDrive備份)，查詢起來不是很方便，所以我想寫一個方便自己查閱的網頁版。

原文草案中標籤的編排是以英文字母順序排列，但是這在使用上並不方便，我用個人的看法重新為他排列，並分成檔案註解標籤、區段註解標籤、參考資訊標籤、檢測標籤、錯誤修正與迴避標籤、其他標籤六類。希望這種編排能夠更容易使用CSSDOC的標籤。

標籤內會用到原文草案的附錄與內文，我將比較複雜的標籤值與瀏覽器翻譯整理之後附在文後的附錄中，供大家方便查閱。

凡例

標題

為了方便索引與使用，標題的格式將會包含「標籤名稱」、「簡稱」與「用法」等三種資訊。以下是其中一個例子：

@affected 影響瀏覽器：用於錯誤修正(bugfix)或隱藏錯誤(workaround)時指定目標瀏覽器與版本。

• 標籤名稱：@affected
  
• 簡稱：影響瀏覽器
  
• 用法：用於錯誤修正(bugfix)或隱藏錯誤(workaround)時指定目標瀏覽器與版本。

標籤敘述

標籤敘述是以標籤名稱、位置、狀態、用法、標籤值、備註、參見、範例所組成。

• 標籤名稱：以「@」開頭與英文組合成的名稱，後面接著是我個人對他的簡稱。
  
• 位置：此標籤可以使用的位置，包含檔案註解(File Comment)、區段註解(Section Comment)與標準CSS註解(Standard CSS Comment)三種。
  
• 狀態：此標籤在CSSDOC中的制訂現況，可能是不穩定、即將被捨棄，或是有一些特殊的用法。
  
• 用法：此標籤的適用情況與使用方法。
  
• 標籤值：應該接續在此標籤後面的資料。部分標籤值有規範格式，請參見底下的附錄：標籤值列表。
  
• 參見：與此標籤相關連的其他標籤。
  
• 範例：此標籤的用法舉例。

標籤分類

我將CSSDOC分成六類，這並非CSSDOC制訂的類別，只是我覺得這樣方便自己查閱的分類法而已。這六類為：

• 檔案標註標籤：有些標籤是描述整個檔案的資訊，在其他文件工具也很常見，例如「@author」(作者)、「@copyright」(版權聲明)；
  
• 區段標註標籤：有些是CSSDOC用來規範檔案架構的區段標籤，例如「@section」(區段名稱)、「@subsection」(子區段名稱)；
  
• 參考資訊標籤：有些是註明參考資訊的標籤，例如「@see」(參見)、「@since」(參見版本)；
  
• 檢測標籤：有些是標示檢測狀況的標籤，例如「@tested」(通過測試)、「@valid」(有效)；
  
• 錯誤修正、迴避標籤：有些是CSS語法特有的相容性、錯誤修正、替代方案說明，例如「@bugfix」(錯誤修正)、「@css-for」(這段CSS語法是為了目標瀏覽器而寫)；
  
• 其他標籤：有些是為了CSSDOC分析器而設計，例如「@cssdoc」(CSSDOC版本、分析器控制)。

檔案註解標籤

@author 作者：顯示作者的名字。

/**
 * 我的CSS檔案
 *
 * @author  Mina Margin <mm@example.com>
 * @version 1
 */

@creator CSS建立工具：生產應用程式或工具可以利用此標籤留下記錄。

/**
 * [...]
 * @creator  HTML Plus 2 Reflexive CSS (WIN 3.1)
 * [...]
 */

@copyright  檔案的版權資訊。

/**
 * [...]
 * @copyright Copyright(c) 1992, 2006-2007
 *            by My Little Big Corp Inc.
 * [...]
 */

@licence 授權條款：指定CSS檔案發佈時遵守的授權條款。

/**
 * [...]
 * @license Create Commons Attribution 2.0 License
 *          http://creativecommons.org/licenses/by2.0/
 * [...]
 */

@link 參考連結：檔案參考來源的超連結。

/**
 * [...]
 * @license Create Commons Attribution 2.0 License
 *          http://creativecommons.org/licenses/by/2.0/
 * [...]
 */

@date 建立日期：註明文件建立日期。

/**
 * [...]
 * @cssdoc version 1.0-pre
 * [...]
 */

/* @cssdoc parsing off */

[...]

/* @cssdoc parsing on */

@lastmodified 最後修改：註明最後修改的時間。

/**
 * [...]
 * @lastmodified 2007-07-24 12:34
 * [...]
 */

@package 套裝名稱：關聯一個或多個檔案到同一個套裝程式中。

/**
 * [...]
 * @package    xhtml-css
 * @subpackage css
 * [...]
 */

@subpackage 子套裝名稱：分類套裝程式用。

/**
 * [...]
 * @package    xhtml-css
 * @subpackage css
 * [...]
 */

@style 樣式：這個樣式的命名，或是這個樣式檔案所屬類別。

/**
 * [...]
 * @style     couleurs de l'été
 * [...]
 */

@version 版本：標示檔案版本。

/**
 * [...]
 * @version   1.2
 * [...]
 */

@revision 修訂次數：註明檔案的修訂次數。

/**
 * [...]
 * @version  0.2.8
 * @revision 193
 * [...]
 */

@site 網站名稱：這個CSS檔案套用的網站名稱。

/**
 * couleurs de l'été
 *
 * MyWebsite Style for Summer 2008
 *
 * @site     mywebsite
 * [...]
 */

@media 套用載體：敘述該檔案套用的目標載體類型。

/**
 * [...]
 * @license Create Commons Attribution 2.0 License
 *          http://creativecommons.org/licenses/by2.0/
 * [...]
 */

@colordef 定義顏色。

/**
[...]
 *
 * @colordef #7b633a; Bronze (Border)
 * @colordef rgb(24,56,68); Dark Satin (Lter Shadow)
 * @colordef rgb(12,47,56); Darker Satin (Shadow)
 * @colordef red; Red
 */

/**
[...]
 * @colordef rgb(45,71,108);   Camou d'accord (activeBackground)
 * @colordef rgb(142,155,161); Rhyme Dump Down (activeBlend)
 * @colordef rgb(251,251,231); Sellout Gay Gray (activeForeground)
 * @colordef rgb(142,155,161); Less Red* (activeTitleBtnBg)
 * @colordef rgb(242,242,223); Snowflash (alternateBackground)
 * @colordef rgb(240,240,214); Pay for Grey (background)
 * @colordef rgb(230,230,205); Silver Snow Boots (buttonBackground)
 * @colordef rgb(0,0,0);       Black (buttonForeground)
 * @colordef rgb(0,0,0);       Black (foreground)
 * @colordef rgb(157,168,169); Tripple Sec Dry Grey (frame)
 * @colordef rgb(157,168,169); Tripple Sec Dry Grey (handle)
 * @colordef rgb(95,114,135); Minor Mist (inactiveBackground)
 * @note     glad-beige-colors
 * @see      http://www.kde-look.org/content/show.php?content=75982
 */

@forntdef 定義字型。

/**
 * [...]
 * @fontdef freesans, arial, sans-serif, sans;
 *          serifenlose classique (headlines)
 * [...]
 */

區段註解標籤

@section 區段名稱：開啟一個新的區段並命名。

/**
 * 重置區塊
 *
 * 重置到預設狀況。
 * 
 * @section reset
 * @see     YUI Reset CSS,
 *          http://developer.yahoo.com/yui/reset/
 */

@subsection 子區段名稱：增加CSS檔案的結構。

/**
 * [...]
 * @section    reset
 * [...]
 */
[...]
/**
 * [...]
 * @subsection forms
 * [...]
 */

@subsubsection 次子區段名稱：增加CSS檔案的結構。

/**
 * [...]
 * @subsection    forms
 * [...]
 */
[...]
/**
 * [...]
 * @subsubsection labels
 * [...]
 */

參考資訊標籤

@see 參見：檔案或區塊的參考資訊。

/**
 * 重置區塊
 *
 * 重置到預設狀況。
 * 
 * @section reset
 * @see     YUI Reset CSS,
 *          http://developer.yahoo.com/yui/reset/
 */

@since 參見版本：標註參考來源或檔案的版本。

/**
 * 重置
 *
 * 重置到本身的預設狀態。
 * 
 * @section reset
 * @see     YUI Reset CSS,
 *          http://developer.yahoo.com/yui/reset/
 * @since   0.2.8
 */

@since-revision 參見修訂次數：標註參考來源或檔案的修訂次數。

/**
 * [...]
 * @since          0.2.8
 * @since-revision 193
 */

檢測標籤

@tested 通過測試：標註該檔案或該區段已經通過測試的瀏覽器。

/**
 * 我的CSS隱藏錯誤測試系列
 * 
 * @workaround 邊框顯示錯誤
 * @affected   opera3-6.1 win
 * @tested     ie4, ie5, ie6, ie7
 * @tested     opera3-6.1 win
 * @tested     moz7
 */

@valid [F][S] 有效驗證：標示CSS語法是否有效。

/**
 * [...]
 * @valid   false
 * [...]
 */

錯誤修正、迴避標籤

@bugfix 錯誤修正：標示這段CSS語法是一個錯誤修正。

/**
 * 重複文繞圖外欄(Float-Margin)的錯誤
 *
 * @see  http://...
 *
 * @bugfix
 * @affected   ie5 win, ie6
 * @css-for    all browsers
 * @valid      yes
 */

/**
 * 避免在#col3在列印時會發生換頁(page break)情況。
 *
 * @bugfix
 * @affected  ie7
 * @css-for   ie5.x win, ie6, ie7
 * @valid     yes
 */
#col3 { height: 1% }

@workaround 隱藏錯誤：標示這是一個隱藏錯誤。

/**
 * 3像素突出錯誤
 * 
 * @workaround 3像素突出錯誤
 * @affected   ie5.x, ie6
 * @css-for    ie5.x, ie6
 */

@affected 影響瀏覽器：用於錯誤修正(bugfix)或隱藏錯誤(workaround)時指定目標瀏覽器與版本。

/**
 * 我的CSS隱藏錯誤
 *
 * @workaround 修正錯誤的框線顯示
 * @affected   opera3-6.1 win
 */

/**
 * 避免在#col3在列印時會發生換頁(page break)情況。
 *
 * @bugfix
 * @affected  ie7
 * @css-for   ie5.x win, ie6, ie7
 * @valid     yes
 */
#col3 { height: 1% }

@css-for 套用瀏覽器：註明此段CSS語法是為了目標瀏覽器而撰寫。

/**
 * [...]
 * @css-for IE 6 Win32.
 * [...]
 */

其他標籤

@cssdoc 控制與告知CSSDOC分析器。

/**
 * [...]
 * @cssdoc version 1.0-pre
 * [...]
 */

/* @cssdoc parsing off */

[...]

/* @cssdoc parsing on */

@note 筆記

/**
 * [...]
 * @note this is not for production use.
 * [...]
 */

@todo 待辦事項：建立待辦事項列表。

/**
 * [...]
 * @todo   修正嵌套表單(nested list)的游標停留(hover)問題
 * [...]
 */

@group 暫定標籤

附錄

標籤值列表

• 文字 (Text)：簡單的文字，可能會橫跨多行。
  
• 布林值 (Yes/No)：一種很基本的資料型態，CSS支援布林語句或是yes/no，它可以是「0」或「1」、「yes」或「no」、「true」或「false」。
  
• 日期 (Date)：有些標籤需要指定日期值，撰寫日期的格式應該參考ISO 8601。如果日期太大或是跨國的計畫，則推薦使用世界標準時間(Coordinated Universal Time，簡稱UTC)。
  
• 時間戳記 (Timestamp)：CSSDOC草案尚未確定。
  
• 參考來源 (Reference)：CSSDOC草案尚未確定。
  
• CSSDOC指令 (CSSDOC command)：CSSDOC指令是從既定指令中選擇一個。有些指令擁有自己的參數與語法。以下是CSSDOC的指令：
  • parsing on
    
  • parsing off
    
  • version
  
  
• 區段名稱：CSSDOC草案尚未確定。

瀏覽器列表

CSS的作者也許不知道該如何為瀏覽器統一命名，CSSDOC也在處理瀏覽器的表示法。現在市面上盛行著許多不同的網頁瀏覽器，不可能用一種表示法來統一制定。以下是CSSDOC建議的部分瀏覽器表示法，但這並不是強制規則，僅作為參考而已。

CSS寫作風格：CSSDOC介紹

CSSDOC是階層樣式表(Cascading Style Sheets，簡稱CSS)的一種寫作風格，可以幫助個人開發者與開發團隊改善CSS檔案的寫作/整理/管理等各方面的問題。CSSDOC使用知名的JavaDoc作法，以註解區塊(DocBlock)形式為原始碼寫作註解。它將CSS的格式、DocBlock註解以及註解使用的標籤(tag)整合在一起，為CSS檔案規範統一的寫作風格。

• CSSDOC計畫網站
• CSSDOC Second Public Draft PDF-File (2008-11-16) (SkyDrive備份)

目前CSSDOC發展到2008年11月的第二次公開草案。CSSDOC的知名度不高，實際上這份草案也有很多未完成的部份。儘管如此，CSSDOC對於統一CSS的文件註解格式來說，已經是個可以參考的寫作指南。

就如CSSDOC所說，通常設計師撰寫CSS的風格並沒有統一，因此在交流CSS時會造成許多不方便。所以我想簡單地介紹一下CSSDOC的特色與用法，藉此也好好學習良好的CSS寫作風格。

使用CSSDOC的好處

儘管CSS寫作跟一般的物件導向式的程式語言不同，使用CSSDOC仍可以為程式設計師帶來幾個點好處：

統一寫作風格，促進程式交流

CSS設計師可以用CSSDOC來美化CSS檔案的版面，依此作為寫作風格的參考，以方便跟其他作者、作家、設計師、網頁開發者、創意指導等相關人員分享程式。

詳細註明相容性、錯誤修正與區隔設計

CSSDOC教導設計師跟軟體開發者如何在CSS的檔案中註明相容性、針對不同瀏覽器的錯誤修正與區隔設計的方法，讓開發與設計時可以更清楚地知道該段CSS語法的用意。

便於分析CSS檔案

撰寫的CSSDOC的CSS程式可以利用程式工具來剖析出額外的資料，就像JavaDoc可以產生標準格式的說明網頁一樣，目前也有利用Ruby實作的工具可以使用。

註解與文件區塊(DocBlock)介紹

CSSDOC採用類似JavaDoc的文件區塊(DocBlock)來撰寫CSS的文件，因此有必要先介紹一下文件區塊的樣貌。

/**
 * Short Description
 *
 * Long Description
 *
 * @tag   I am a tag named "tag"
 * @other And I am a tag named "other"
 */

上面是一個文件區塊(DocBlock)的例子，撰寫CSSDOC的資訊都會在文件區塊當中。在這個例子中包含了短敘述(Short Description，通常是一行)跟長敘述(Long Description，實際上可能是好幾行的敘述)，還有以「@」開頭的「@tag」跟「@other」標籤與後面接著的值，用來標示這個文件區塊的後設資料。

所謂的CSS註解，是以「/*」開頭、「*/」結尾，這之間的資料是給設計師閱讀、電腦會自動省略的區域。文件區塊則是以「/**」換行開頭(注意，多了一個*喔！)、最後一行以「*/」結尾的區塊。在閱讀時十分地顯眼。

有使用過JavaDoc、PHPDoc、JSDoc等各種註解的程式設計師，應該都很熟悉這種寫作風格。許多IDE也都支援文件區塊的寫法，你只要輸入「/**」開頭，按下Enter鍵之後，IDE就會自動幫你把後面的「 */」帶出來。

由於CSS並不是很正規的程式語言，所以它的文件區塊用法以及裡面的標籤與Java或PHP有些許不同。CSSDOC使用文件區塊將CSS檔案分成各個部分，也利用文件區塊來註明CSS特有的CSS修正與區隔設計用法。

CSS檔案的結構

在撰寫CSS的時候，一般我們會覺得CSS檔案結構很模糊。事實上我自己寫的時候，也常常隨處插入一個CSS語法，造成往後整理CSS時發生不少混亂的問題。

CSSDOC將CSS檔案區分成許多區塊來讓文件架構更為明確，如右圖所示。區塊分成兩種：檔案註解(File Comment)、區段註解(Section Comment)，他們都是以文件區塊的方式撰寫而成。

檔案註解 (File Comment)

檔案註解位於檔案的開頭，一份CSS檔案只有一個檔案註解，目的是說明整份檔案的概要。

以下是檔案註解的範例：

/** 
 * Homepage Style
 *
 * Standard Layout (all parts) for Big Little Homepage
 *
 * This style has been designed by Mina Margin. It reflects
 * the composition of colors through years
 * customers project as well the boldness it implies.
 *
 * @project Big Little Homepage
 * @version 0.2.8
 * @package xhtml-css
 * @author Mina Margin
 * @copyright 2008 by the author
 * @cssdoc version 1.0-pre
 * @license GPL v3
 *
 * @colordef #fff; white
 * @colordef #808080; standard grey
 */

除了短敘述(Homepage Style)與長敘述(Standard Layout……. it implies.)之外，還有包含數個標籤。各標籤的意義簡單介紹如下：

• @project：專案名稱
• @version：檔案版本
• @package：標示該檔案跟其他某些檔案一樣歸屬於某個包裹(package)中
• @author：作者
• @coptyright：版權聲明
• @cssdoc：標示使用的CSSDOC版本
• @license：標示此檔案的發行條款
• @colordef：指定顏色的色碼以及其名稱

區段註解 (Section Comment)

區段註解位於檔案之中，可以省略或是有多個區段註解，它用以說明一個區段的開始。區段註解會包含「@section」標籤，而區段底下還可以分出「子區段(subsection)」，使用「@subsection」標籤。範例如下：

/**
 * Reset Section
 * 
 * @section reset
 */

[...]

/**
 * Reset Forms
 * @subsection forms
 */

[...]

如果你需要使用CSS修正(CSS Fixes)或是針對不同瀏覽器製作的CSS區隔設計(CSS-HACKS)，你也可以加入額外的區隔設計註解(Hack-Comment)。以下是一個區隔設計中CSS修正的範例與CSS語法，這是用來迴避IE5的顯示錯誤而撰寫的。

/**
 * IE/Win Guillotine Bug
 *
 * @workaround
 * @affected IE 5.x/Win, IE6
 * @css-for IE 5.x/Win, IE6
 * @valid yes
 */
* html body a,
* html body a:hover { background-color: transparent; }

這段區段註解包含了短敘述(IE/Win Guillotine Bug)以及數個標籤，說明如下：

• @workaround：標示這是一個解決程式錯誤的迴避方案(workaround)，他並不能真正地解決程式的錯誤。
• @affected：標示錯誤修正(bugfix)或是替代方法(workarond)的目標瀏覽器
• @css-for：標示這段CSS語法是為了這些目標瀏覽器而撰寫的
• @valid：是否已經驗證了這段CSS語法

標籤 (tag)

標籤包含在文件區塊中，以「@」開頭呈現。文件區塊中標籤的用處是類似後設資料(Metadata)，跟我們現今常見的社會性標籤是不同的意思。

從上面的例子中可以看到，標籤是以更有格式的形式說明特定的資訊。例如檔案註解裡面使用「@project Big Little Homepage」的標籤與標籤值，就能夠說明該檔案的專案名稱為「Big Little Homepage」。目前CSSDOC草案規範中標籤的值僅接受英數字與常見的標點符號，中文字似乎並沒有在規範內。

規定的格式不僅讓人便於閱讀，CSSDOC的分析器也能夠更準確地分析出各個註解的意義與關聯。在CSSDOC第一版草案中設計了32個推薦標籤，也有4個廢棄的標籤。我試著將他們分成六類：

• 檔案標註標籤：有些標籤是描述整個檔案的資訊，在其他文件工具也很常見，例如「@author」(作者)、「@copyright」(版權聲明)；
• 區段標註標籤：有些是CSSDOC用來規範檔案架構的區段標籤，例如「@section」(區段名稱)、「@subsection」(子區段名稱)；
• 參考資訊標籤：有些是註明參考資訊的標籤，例如「@see」(參見)、「@since」(參見版本)；
• 檢測標籤：有些是標示檢測狀況的標籤，例如「@tested」(通過測試)、「@valid」(有效)；
• 錯誤修正、迴避標籤：有些是CSS語法特有的相容性、錯誤修正、替代方案說明，例如「@bugfix」(錯誤修正)、「@css-for」(這段CSS語法是為了目標瀏覽器而寫)；
• 其他標籤：有些是為了CSSDOC分析器而設計，例如「@cssdoc」(CSSDOC版本、分析器控制)。

熟知各個標籤的意義與用法是了解CSSDOC的必要功課，詳細的內容就請參考PDF中第三節的內文，或是我另一篇整理的CSSDOC標籤參考表。

結語

老師曾經說過一種句話，「要讓人家覺得你很專業，就要說這一行的行話」。如果要讓Java程式寫得看起來很專業，要學會使用JavaDoc；要讓PHP看起來很專業，要學會使用PHPDoc；那麼要讓CSS寫起來很專業，我想可以試著從CSSDOC開始。

編輯CSS的IDE編輯環境很多，但是支援CSSDOC的IDE卻不常見。我使用的Aptana Studio跟NetBeans都各自用各自的CSS註解，而不是使用常見的註解區塊。由於自己已經習慣了註解區塊與標籤的寫法，讓我在撰寫CSS時有也種不這樣做就渾身不對勁的感覺。至少沒有註解區塊的CSS，看起來就是一整個混亂且難以維護。所以我現在正學著使用CSSDOC來設計CSS檔案。

不過，CSS技術已經發展多年，但是CSSDOC的消息卻仍停留在2009年，至今也還沒有正式版本出來，前景真是令人堪憂啊。

阿給USB攜帶給電器運作不正常

我買了阿給USB攜帶給電器，想靠它完成電池充電、行動給電的任務，但是沒想到它的充電供電功能都有問題！而且我還跟店家換過新的，依舊無效。投訴給士林電機也沒有下文，讓人十分怨嘆。

於是我打算把這個產品的問題狀況寫出來，希望不要再有人像我一樣傻傻地去買這個產品了。就算牌子有名也沒有品質保證，真是令人心寒。

阿給USB攜帶給電器簡介

士林電機的Dendee系列在很久以前推出了「阿給USB攜帶給電器」這個產品，它本身是可以透過USB對電池充電，也可以藉由將電池的電透過USB接孔釋放給其他裝置，以此可以用來幫手機充電。依照內裝電池規格不同，有給一顆AA電池的型號，也有給兩顆AAA電池的型號兩種。上圖是我買的AAA電池型號的那種，購買時即會附贈AAA電池兩顆。

購入與發生問題過程

我在半年前於光華商場購入阿給USB攜帶給電器(以下簡稱為「阿給」)AAA電池的型號，購入金額四百多。

買回家之後當然是先利用阿給來幫附贈的電池充電。我把電池裝好，利用交流電轉USB的插座來提供USB電源給阿給，並確認阿給的紅燈有亮起，表示正在充電，就讓他放著充了一整晚。

隔天早上我將阿給帶出門，裡面裝著應該是充飽電的電池。大概下午時快沒電，我就將阿給接到ASUS P750手機上充電。儘管一開始手機上是顯示充電中的訊息，但奇怪的是充電了半小時多，也不見手機電量有上升。拔掉阿給看看，發現電量不增反減。再給手機充電，沒想到再過一下子，手機就離開充電狀態。也就是說，阿給已經沒辦法供電了。

「該不會是買到機王了吧。」(剛好買到故障品的意思) 我當晚回去再將阿給充電，然後又裝到手機上測試，阿給依然沒辦法幫手機給電。

我隔天跑去光華跟店家反應商品有問題，店家檢測跟我說「電池根本就沒有充電」，我非常驚訝。阿給接著的USB電源轉換器是我平時就拿來幫手機充電的工具，而後來檢查結果的確不是USB充電器的問題。我回去再嘗試用阿給幫電池充電、放了一整晚，而隔天仍然是一樣的問題，於是過去光華要求店家換另一個阿給商品，店家也很無奈地換了一個新的給我。

結果，換了一個之後，另一個阿給仍然沒辦法充電、給電。

問題檢測

對於阿給的各種問題，我做了以下的測試：

電池有問題？否定

我試著換一組電池，不使用阿給附贈的Dendee AAA電池，改用平時給羅技M5050無線滑鼠使用的充電電池，並確保他的電量的確是足夠無線滑鼠使用，再裝在阿給身上給手機充電。結果當然是無法供電給手機。

原本在阿給裡面無法給電的Dendee電池，也確定電池裝到無線滑鼠中是沒有電力的。我改用之前我在用的便宜充電器幫阿給贈送的Dendee電池充電，然後再擺到無線滑鼠中，確認電量足夠且可使用，沒有問題。

基於以上測試，我認為不是電池的問題。

手機有問題？否定

店家質疑我是否是因為ASUS P750這個Windows Mobile的手機太過特殊所以無法供電。我說明一下，P750是接USB公-USB mini公接線來充電。線材本身是我本來就用來幫手機充電的線材，因此排除線材問題。

我也借了另一台T-Mobile G1來充電，這隻是Android首款的手機。但結果不僅是一樣無法供電，還充不到10分鐘就跳出充電模式，阿給就已經沒電了。

後來我使用HTC Hero來測試，也一樣是不行。

阿給的充電功能有問題？肯定

從電池的測試結果也可以知道，阿給本身的充電功能就有問題。

阿給充了一整晚，電池的電量沒有增加多少。所以光華商場的店家才以為我根本就沒幫電池充電。相反地用其他充電器幫同樣的電池充電，就可以用於無線滑鼠上。可知阿給沒辦法扮演好充電器的角色。

阿給的供電功能有問題？肯定

同樣的，我用其他充電器幫電池充飽電，並確定在無線滑鼠上可以正常使用，再放到阿給中給手機充電。但是他還是一樣無法完成供電的任務。由此可知，即使是電量充足的電池，阿給的供電功能本來就有問題，也就沒辦法供電。

反應給廠商，沒有下文

我將問題反映給士林電機的客服人員，問題內文如下：

您好，我於三個月前購買了貴公司的「阿給USB攜帶給電器」(AAA電池版本)，發現它的功能並沒有正常運作。

1. AAA電池充電：我把包裝隨付的兩顆電池裝上，插在有供電的USB槽上一整晚，然後放到無線滑鼠上使用，發現他幾乎沒有充到電，用一下就沒電了。這跟我使用另外的充電器充電比起來，就有感覺到明顯的差異。

2. 給電器：我將2顆AAA電池以其他確定可以正常運作的充電器充電，然後再放到阿給USB攜帶給電器，接USB線給HTC Hero手機充電。運作時阿給並沒有燈號指示，而電池有微微溫度上升，我想這是正在給電的意思，而HTC Hero手機也是有正在充電的訊息出現。可是大概放了一段時間，HTC Hero手機的電量不增反減，這個意思究竟是？

我是在光華商場購買，在購買之後幾天就發現這個問題，並請店家換另一個新品，可是狀況還是一樣。

我不確定是兩個新品都是一樣的問題，還是貴公司的阿給USB攜帶給電器確實無法達到包裝上聲稱的「電池充電」、「USB給電」功能，可否請貴公司幫我解惑呢？

過不久，士林電機客服人員回信給我，說會主動聯繫並解答。但是等了快一個月了都沒有下文，我猜這封信大概只是機器人發出來的自動回應罷了。

結語

我在網路上查了一下其他人的使用經驗，Mobile 01討論串中有人提到他供電時有的問題、PDA只能充4%電力，也有人回應說N82可以充個3格、有人更表示充電只能用附贈那兩顆電池；另一邊也有人說他N73連一格都充不飽。

也許可能我運氣真的很差，換了兩台阿給都是有問題的機王。本來想說不能供電算我錯估普通電池跟手機電量的需求，那就算了，沒想到連作為充電器都辦不到，這就讓我感到非常的難過。

撰寫本篇特此警示，提醒其他人切勿購買阿給USB攜帶給電器！