阿貴的電腦常識與命令列讀本

---

• 前言: 為什麼叫 「讀本」?

1. 不同的瀏覽經驗
2. 老鼠走迷宮
3. 堆積迷宮積木
4. 誰常上機?
5. 用網頁做簡報
6. 半手工打造符合 w3c 規範的網頁
7. 電腦怎麼存文字檔?
8. 打造舒適的家
9. 字串樣版 Regexp: 兼談長線學習投資
10. 兩個目錄差多少?
11. 交集/聯集/差集

附錄

1. 基本求生指令
2. 阿貴的系統管理撇步

其他補充參考資料

1. Newbie's Top Ten Commands
2. 鳥哥的私房菜: 好幾本很棒的電子書; 書店也可買到實體版
3. 臺南縣網 OO.o 補給站的 線上書籍系統
4. 蔡哲民老師的 「電腦與資訊網路教材」
5. 不同進位數字轉換: (一), (二)

---

• 本頁最新版網址: http://people.ofset.org/~ckhung/b/clr/index.php; 您所看到的版本: February 24 2007 04:22:25.
• 作者: 樹德科技大學 資訊工程系 洪朝貴
• 寶貝你我的地球, 請 減少列印, 多用背面, 丟棄時做垃圾分類。
• 本文件以 Creative Commons Attribution-ShareAlike License 或以 Free Document License 方式公開授權大眾自由複製/修改/散佈。

前言: 為什麼叫 「讀本」?

---

愛麗思問姊姊: "一本沒有對話也沒有圖案的書, 有什麼好看的呢?" -- 愛麗思夢遊仙境

---

給同學們

讓我做個比喻: 這是一本教你蹲馬步, 教你騎 腳踏車 的書。

市面上的電腦書很多, 而且幾乎每一本都比這本書漂亮。 不但如此, 這些書教你使用滑鼠與選單, 教你使用圖形介面 (Graphical User Interface), 很快就可以完成一些有趣的事。 如果你希望學一個月的電腦之後, 就會製作光鮮亮麗的成品, 那麼你應該去買這類書來看; 請不要把時間浪費在這本書上面。

這本書要講的不是 GUI, 而是 命令列操作 與 文字檔的處理。 你必須像背英文單字一樣地背命令 (還好大概只要背一兩百個命令就夠了, 不必像英文單字一樣要背上千個), 必須像解數學計算題一樣地動腦筋類比/推理 (還好這比數學容易做實驗, 動手試一下馬上就知道你的推論是否正確)。 如果用操作飛機來比喻其他電腦書要教你的東西, 那麼這本書的目的就是要教你如何騎腳踏車, 而且其中有大半部分在訓練你的腳力 -- 例如蹲馬步。

「騎腳踏車那麼辛苦, 車上又沒有空調設備, 我為什麼要學? 」 我只能告訴你為什麼我覺得學腳踏車很好; 至於是否值得你學, 應該由你自己決定。 在我成長的年代, 只有腳踏車可以騎; 飛機是後來才發明的。 所以我無從選擇, 只好學腳踏車, 實在不是因為我真的很喜歡它。 但是後來我慢慢發覺腳踏車輕便可靠, 可以帶我到達很多飛機到不了的地方。 飛機提供許多複雜的功能, 但其中大部分我都用不到, 卻必須因此而付出體積, 重量等等代價; 腳踏車則不會無故增加我的負擔。 更重要的是, 經過多年來的星際旅行, 我發覺不論在那個星球上, 都很容易取得腳踏車; 不論是廿年前或現在, 操作腳踏車的方法都沒有很大的改變。 我學的技術可以橫艮時空。 所以後來大部分人都直接學開飛機, 我卻越來越喜歡騎腳踏車, 甚至到處告訴別人騎腳踏車的好處。 必要的時候, 我也偶爾操作飛機, 但是不太喜歡在上面投資太多學習的時間, 學太多細節, 因為不同星球的飛機經常有很大的差異。

問問看你那些學開飛機的學長姊和老師們 (畢竟現在最時麾的事, 不是騎腳踏車, 而是開飛機, 要找這樣的長輩應該很容易) 他們五年前所學的東西, 到現在還有多少百分比是有用的? 問問看他們為什麼不敢離開他們熟悉的 「微軟之星」 到其他星球去探險? 如果你希望現在所學的知識與技術, 在廿年之後還有一大半可以用; 如果你希望在這顆 「企鵝之星」 上面所學的技術, 可以拿到其他星球上去用 (包含那個熱鬧微軟之星), 那麼這本書就是為你而寫的。 請不要理會其他人異樣的眼光 -- 原諒他們, 因為他們一直待在飛機上, 沒有辦法打開窗子, 從來沒有機會理解兜風的樂趣。 請跟我一起學腳踏車, 讓我們兜風去!

---

給老師

學英文:讀本 = 學指令:????

最早在寫 "如何有效學習電腦" 摘要版 / 短文版 (有點過時) 的時候, 就注意到學習命令列與學習英文有一些類似之處。 後來寫 「自由軟體與資訊教育」 發現更多相似之處。 先來看看我們如何教/學英文。 以下的學習方式, 經常吃力不討好, 不但枯燥, 如果強調過頭, 甚至會降低對英文的興趣:

1. 背字典
2. 一口氣背一堆 「看起來很像」 (但不一定相關) 的片語: take up, take down, take off, take after, ...
3. 跟著文法書, 搭配一點例句 (但從來沒有完整的段落或文章), 按照詞性, 簡單句, 複合句, 時態, ... 的順序學。

這些學習方式欠缺情境/上下文 (context), 不分重要性/使用頻率, 很難藉此培養出對外國語言的 感覺。 學語言需要情境, 需要 重複, 需要 由淺入深, 讓真正常用的詞彙/句型透過重複出現而滲入你的感覺深處; 而較少使用的複雜片語/句型很自然地留在外圍, 看到的時候需要想一下, 需要比較一下。 我們學英文的過程當中, 接觸最多的, 不是字典, 不是狄克遜片語, 也不是文法書, 而是 有劇情的讀本或短文! 不論是單字, 片語, 或文法, 重複在不同的單元出現, 有加深印象的效果, 而且可以逐次深入。

如果我們將 「學習英文」 與 「學習命令列」 對照比較, 是不是可以得到一些有趣的結論呢?

英文		單字	片語	複合句		字典	文法書	讀本
命令列		命令	選項	| 及 `...`		指令大全	UNIX 觀念書籍	不存在?

事實上不只是英文與命令列, 凡是強調 「組合」 的知識, 都會有類似的特性: 單獨學一個觀念, 非常枯燥無聊; 換個角度講, 想要做一點點有趣的事, 就免不了必須用到許多觀念。 另一方面, 有許多時候, 單單是要詳細解釋一個觀念, 就要花很大的篇幅。 想想過去 unix 教科書的安排法, 再想想上面這個觀察, 就不難理解為什麼大家認為學命令列是件枯燥無聊的事了。 試想: 如果我們過去學英文, 從來沒有 「以短文為單元的課本」, 而是拿著文法課本與字典在學, 會是什麼景象? 大部分的命令列書籍, 不是在教指令 (字典!) 就是按照 檔案系統/行程管理/... 的順序在解釋觀念 (文法書!), 難怪很無聊。

我們需要的是一本類似英文讀本的命令列教科書; 這也就是本書存在的目的: 我希望可以藉此填補表格當中的 "不存在?", 希望它可以作為這個觀點下的第一本範例書。 事實上我們需要不只一本, 我們需要很多這樣的書, 就像學英文需要很多讀本一樣。 其實我們已經有很多類似 "短文" 的命令列文章 -- HOWTO 文件就是任務導向, 有情境, 有目標, 給讀者很大的動機與成就感的文章。 它的重點不在列出一堆看起來很像的指令, 也不在詳細解釋每一個指令, 而是在組合這些指令以完成一件有趣的任務, 例如播放音樂, 或製作家庭 VCD。 不過閱讀 HOWTO 文件需要一些基本的程度, 並不適合命令列的初學者, 彼此之間也缺乏有系統的由淺入深的假設與安排; 希望這本書有拋磚引玉的效果, 可以作為入門級的命令列讀本, 並且激發大家寫出更多適合中學生/初學者的命令列教科書。

從貼近生活的應用出發

有沒有那一位讀者當初學電腦, 從 安裝 Windows 開始學起? 還是從如何切割硬碟, 甚至從組裝電腦開始學起呢? 別鬧了。 就連從 Word 開始學起, 都覺得不太對勁, 好像有點太硬了。

當初我們也許是為了交一篇旅遊報告, 才開始學打字及文書處理; 也許是為了救照壞的相片, 才開始學影像處理; 為了打 game, 才開始學下載安裝軟體; ... 還有一小部分人, 是為了操電腦做重複性機械化的動作而學程式設計, 才開始接觸電腦。 學 Windows 固然如此, 學 GNU 命令列環境 (通常也就是學 Linux), 也應該如此。 從最貼近生活 需求與慾望 (通常也是最遠離系統底層) 的應用開始學起, 才不會讓本就無聊的命令列變得更乏味。 除了這本讀本舉的應用實例之外, 鼓勵學生提出 生活當中的需求, 也是很值得努力的方向。 如果您從學生那裡得到好點子, 請告訴我, 或許可以在這本讀本裡面增加一篇, 與大家分享。

所以這本書完全不談安裝, 而是假設每位學生已經有一個專屬於他的 non-root 的帳號可以登入, 從這裡開始學。 至於選擇/安裝系統, 準備帳號, 這些是上課之前, 老師就應該要幫學生準備好的事情。

不要浪費掉 Windows 下的時光

那麼要如何選擇系統呢? 比選擇 distribution (Ubuntu? Fedora? Mandriva? ...) 影響更大的問題, 是選擇電腦教室配置的方式。 要在電腦教室安排 Linux 的學習環境, 至少有以下選擇: 雙重開機, LiveCD, DRBL, K12LTSP 等等。 雙重開機的管理比較辛苦; LiveCD 需要全班更新時比較不方便也不環保。 此外, 前兩者獨立作業, 比較無法感受/實驗多人共用一機的情境。 所以我個人傾向後兩者。

不過等等, 畢竟學生每天接觸的是 Windows 環境。 如果一週只有一兩小時 Linux 課, Windows 底下的時間完全浪費掉, 那也是一曝十寒, 效果極為有限。 最好的方式是: 讓他們在 Windows 底下也可以接觸 gnu 命令列環境。 所以我採取管理最簡單的方案: 用 Linux 只架一部簡單的 ssh 伺服器; 電腦教室所有 (Windows) 電腦都安裝 pietty 可以遠端登入 Linux 主機。 再營造一個環境, 讓查成績, 交作業 (通常是製作簡單的網頁, 放在指定的位置) 等等工作都非得登入 Linux 伺服器執行不可。 這樣學生即便是在 Windows 下 (他們接觸電腦的多數時間), 也會養成使用命令列的習慣, 命令列才能融入他們的生活當中。

事實上我們要學的是命令列, 不必一定是 Linux。 XLiveCD 光碟提供了 cygwin 環境, 讓學生可以在 Windows 底下直接學 gnu 命令列環境, 不必登入遠端機器。 此外, 它也在 Windows 端執行 X Server, 學生如果從 xterm 底下用 ssh 連到 Linux 伺服器, 還可以執行 Linux 上的 GUI 軟體, 這個圖形視窗會丟回 Windows 底下。 網路速度夠快的情況下, 可以放一些必須在 *nix 下執行的有趣應用軟體, 例如 Dr. Geo 等等, 提供更多鼓勵同學登入 Linux 的誘因。

順便一提, 許多自由軟體, 不論是命令列或圖形介面, 都是跨平臺的。 可以鼓勵學生在 Windows 底下就多用這些跨平臺的自由軟體, 一則在 Windows 底下的時光減少浪費生命 :-) 二則可以提早為將來轉換作業平臺作準備。

何不開個才藝班?

... (待續)

體驗不同的瀏覽經驗

---

體驗 「不受侵犯」 的瀏覽經驗

1. 連線到 Mozilla Taiwan, 下載 Windows 版 Firefox。
2. 安裝, 執行, 用 firefox 重新開啟本網頁。
3. 到 firefox addons 網站下載一些好用的外加功能。
4. 呃, 倒帶一下, 先回到上一頁。 等一下還會常常需要回到這一頁講義, 所以我們保留此頁, 另外開一個新 分頁 tab 來訪視上述的 firefox addons -- 請按著 ctrl 鍵, 再點滑鼠。 注意工具列下方, 網頁內容上方, 出現選取 tab 的地方。
5. 先加裝一個翻譯機: 從上面選取 Extensions, 從左邊選取 Languages, 點選 "Dictionary Tooltip" 的 "Install"。
6. 離開 firefox, 再進來一次。 網頁上隨便找個英文字, 點兩下, 耐心地等它上網查英文解釋。
7. 作業: 再到 firefox addons 網站, 找一兩個有趣的 擴充套件 extensions 裝起來玩一玩。 這裡推薦可以閱覽開放檔案格式 (Open Document Format) 的 ODFReader, 可以訂閱 rss 的 sage 以及 del.icio.us social bookmarks 網站提供的擴充套件。 又, 不妨參考 Must-Have Firefox and Thunderbird Extensions
8. 如果嫌網頁的字太大或太小, 請按著 ctrl 鍵, 並轉動滑鼠滾輪。

Firefox 沒有商業考量, 完全站在使用者的角度出發。 它會幫你做一些微軟不好意思做的事, 例如阻擋討厭的彈跳視窗; 它不會做一些微軟好意思做的事, 例如 竄改網路標準, 故意製造不相容。

體驗視障者的瀏覽經驗

1. 上網搜尋 "pietty", 下載 pietty.exe 置於桌面。 (或者 "putty" 也可以, 介面是英文版; 可以顯示中文內容, 但好像不能輸入中文?)
2. 執行 pietty.exe, 用老師給的主機, 帳號, 密碼登入遠端的 Linux 帳號。 (先敲入主機名稱就好; 開始連線後它才會問帳號密碼。) 注意 protocol 的地方不要選 telnet, 要選 ssh。
3. 看一下自己在那裡: pwd 再看一下家裡有那些東西: ls
4. 看更詳細的資料: ls -la 注意現在並沒有一個 .lynxrc 的檔案。
5. 執行 lynx http://people.ofset.org/~ckhung/ 用 lynx 看我的網頁。 嗯, 跟圖形版差不多醜, 但是資訊都沒有掉。
6. [如果中文顯示正常, 沒有亂碼, 就略過此步驟] 有少部分中文出現亂碼嗎? 按 o 叫出 options 選單修改設定。 用上下箭頭移動遊標, 找到 "Display character set", 按 Enter 鍵進入改選 "Taipei (Big5)" 並再按一次 Enter 鍵完成選擇。 再移動遊標, 順便把 "user mode" 改選成 "advanced" 這樣等一下可以使下方顯示目前遊標所在處的網址。 遊標移到螢幕最上面, 按 Enter 選取 "Save Options to Disk" (出現 "X") 表示希望將新的設定記起來 (而不是只影響這次執行 lynx), 最後選 Accept Changes 新的設才會真的生效。
7. 請參考 lynx 簡介 學用最基本的幾個操作鍵 "q", 空格, "b", 四個箭頭... 等等; 或按 ? 叫出 lynx 的 help。
8. 結束以後按 q 離開。 如果剛才你曾經修改過設定, 現在請再下 ls -la 應該會多一個 .lynxrc 檔案出來, 並且修改時間就是剛才。
9. 視障者可用的另外一個瀏覽器是 w3m, 對表格支援較佳, 且有 m17n 版支援 utf8 編碼

Browser 瀏覽器 有很多種, 不是只有 ie。 諸如 firefox, konquerer, lynx, w3m, ... 等等其他的瀏覽器, 往往提供更尊重使用者的瀏覽經驗。

下次上課準備事項

請下載 「thaw-ms: 送自由入微軟帝國」 光碟片, 燒錄成 cdrw。 但請避免使用只能燒錄一次的 cdrom, 請盡量使用 cdrw。 堅持不用 cdrw 的同學, 以後如果垃圾場或焚化爐蓋在你家旁邊, 請不要出來抗爭 :-)

下載 iso 檔時, 經常會看到 "md5sum", 這是什麼? 對一個檔案執行 md5sum (例如 md5sum knoppix.iso) 會得到一個 128 bit 的數字 (32 位的 16 進位數字) 可以把它想成是這個檔案的簽名/指紋/DNA, 可以用來辨別它的身份。 兩個檔案, 即使內容只差一個 byte, 就幾乎可以肯定它們的 md5sum 不一樣。 這對傳輸很大的檔案 (例如上述數百 MB 的 .iso 檔) 很有幫助: 傳輸前後各跑一次 md5sum, 如果結果一樣, 大約可以肯定中間沒有出錯。 所以提供很大的檔案 讓人下載的網站, 通常也會同時提供每個檔案的 md5sum 供人驗證。 由於這個特性, 以前也可以用來驗證檔案不曾被惡意竄改; 不過根據一篇論文 MD5 To Be Considered Harmful Someday, 後面這個應用已經快要行不通了; 現在 md5sum 只能拿來驗證檔案沒有發生非人為干擾的意外變化。

最後, 如果覺得用文字模式遠端登入不好玩, 想玩真的 Linux, 但又怕安裝麻煩, 可以到 OSSACC 或 臺南縣網 去挑一片 LiveCD 來玩。 這些是 knoppix 或 Fedora 或其他 Linux 的 「免安裝版本」。 記得盡量避免用只能燒一次的 cdrom 哦!

老鼠走迷宮

---

執行程式的兩要件: 路徑與權限

1. 直接使用 Linux 當桌面系統的同學, 請打開一個 終端機 terminal 視窗 rxvt 或 xterm 或 gnome-term 或 konsole; 使用 XLiveCD 的同學請開一個 bash 視窗並下: ssh 帳號@主機 連線; 使用 pietty 或 putty 的同學則同樣連線到主機來。
2. 用 lynx 瀏覽本網頁, 按上下方向鍵把遊標移到 maze 這個連結上面, 看到它顏色 (或背景) 改變, 但不要進去。 按 d 鍵下載, 選擇 "儲存至磁碟 (save to disk)", 螢幕下面出現預設的存檔名稱, 如果不滿意可以修改。 最後按 ENTER 存檔。
3. 同樣下載 1.maz 這個資料檔。
4. 另外開一個文字視窗, 執行 maze 1.maz 奇怪 ... 下 ls -l 明明有下載成功, shell 怎麼說找不到指令? (一定要養成注意錯誤訊息的習慣, 這對於你日後電腦是否學得好有關鍵性的影響)
5. 改執行 ./maze 1.maz 這回錯誤訊息不一樣了, 變成 "拒絕不符權限的操作 permission denied"。
6. 注意先前 ls -l 的時候, 最左邊的 "-rw-r--r--", 現在下 chmod u+x maTAB 然後再一次 ls -l 注意最左邊變成 "-rwxr--r--"。 (這裡的 TAB 不是按 t,a,b 三個鍵, 而是鍵盤左邊大寫鍵之上, 蚯蚓鍵之下, Q 左邊的那一個鍵。
7. 再下一次 ./maTAB 1.maz 終於可以執行。

印出 命令提示字串 command prompt, 負責與我們對談的那支程式, 叫做 shell。 我們下指令, shell 就負責去找出指令來執行; 如果找不到指令, 它就印錯誤訊息 有點像是坐在郵局或戶政事務所, 櫃臺外面的辦事員, 他本身不處理業務, 他的工作是負責指引民眾拿正確的表格到正確窗口, 以及其他一些雜事。 Shell 有很多種, 像是 bash, tcsh, ksh, zsh, ... 等等。 我們只學最常用的 bash。 除了找指令出來執行之外, 像是上面檔案名稱快打 file name completion 與命令名稱快打 command completion, 也都是 shell 提供的服務。

Bash 並不是看到任何指令都隨便執行, 這樣太危險了。 請下 which ls 及 which md5sum 還有 which maze。 它只到特定的某些目錄找執行檔, 而這通常不包含目前目錄 "." 。 請下 echo $PATH 可以看到所有被 shell 搜尋的路徑 (用 : 分開)。 建議不要將 "." 加進去; 如果確定要執行目前目錄下的程式, 就要講清楚, 說明白, 像 ./maze 這樣。

這還不夠。 在 Linux 下, 一個檔案可否當做程式來執行, 不是依檔名決定, 而是依 權限 permission。 chmod 指令中間的三個字元, 意思分別是

1. 對自己 user (也可以是 群組 group 或是所有人 all)
2. 開放 + (也可以是關閉 -)
3. 執行 executable 的權限 (也可以是讀取 readable 或是寫入 writable 的權限

「為什麼要學命令列這種老掉牙的東西?」 換一個角度想, 幾十年一直沒有改變的東西, 是否更有機會再活幾十年? 英文單字片語文法有多老了? 數學知識有多老了? 這些老知識, 只需要學一次, 就可以用一輩子。 而且命令列與英文數學知識一樣, 可以用很少的元素, 排列組合出很多不同的解答。 具有長遠壽命與組合特性的知識, 才是 有價值的學習投資。

編輯用牛刀 -- vim

1. 下 vim 1.maz 編輯資料檔。
2. 目前我們在 "正常模式 normal mode" 底下, 可以移動遊標等等, 但無法直接輸入資料。 請用 hjkl 鍵四處移動。
3. 分別用 $ 移到一列的最後面, 再用 j 與 k 上下移動, 看看是否發現資料檔有一點小問題?
4. 將遊標移到多出來的空格那邊, 按 x 鍵刪除。
5. 另外開一個命令列視窗, 再執行一次 ./maze 1.maz (不要太勤勞, 記得用 file name completion 功能減少打字...)
6. 啊, 忘記存檔。 回 vim 視窗, 打 ":w" 然後按 ENTER; 再切到命令列視窗, 按上箭頭叫出先前的指令再執行一次。
7. 如果嫌速度太快, 可以這樣下: ./maze -d 100 1.maz 這裡是指定每步的延遲時間, 以 ms 計。

現在開始亂改迷宮吧。 遊標隨便移到畫面中間附近, 按 i 進入 "插入模式 insert mode", 注意左下角的提示。 隨便打幾個字元, 按 ESC (鍵盤最左上角那一個鍵) 回到正常模式。 以下是一些最基本的功能:

1. 方向鍵其實也可以用來移動遊標。
2. x 刪除一個字元; dd 刪除一列。
3. 不小心改錯時, 按 u 可以倒退一步 (undo)。
4. i 在遊標之前新增; a 在遊標之後新增; o 在這列之後新增; O 在這列之前新增。 不論以何種方式進入新增模式, 都用 ESC 鍵回到正常模式。
5. :q 離開。 如果你做了一些修改, 卻還不曾存檔, 它不會讓你離開。 必須打 ":wq" 確認寫入, 或 ":q!" 確認放棄修改不存檔, 才可以離開。

現在請製作一個 10x20 的迷宮, 左右兩側由上而下的第 3,8 兩格請留空; 上下兩側由左而右的第 6,15 兩格也必須留空。 按 "3G" 可以立即跳到第三列; 按 "6|" 可以立即跳到第 6 行。

有空的時候可以下指令 vimtutor 學用 vim。

初學者一些常見的問題:

1. 為什麼突然出現一堆黃底的字? 可能是不小心按到 "/" 這是搜尋字串的意思。 搜尋到的字串都會變成黃底。 可以再搜尋一次, 這次搜尋一串亂七八糟不存在的字串, 黃底字串就會消失。
2. 存檔時, 下面出現紅色的錯誤訊息 'readonly' option is set (add ! to override) 怎麼辦? 不知為什麼, 你把檔案設定成唯讀了。 如錯誤訊息所說, 可用 ":w!" 強制寫入。 也有可能是你去編輯到別人的檔案, 或是目前人不在家目錄, 卻想在這裡建立新檔案。 若是這樣, 就用 ":w ~/abc.txt" 把所有內容帶回自己家目錄, 另存新檔, 或用 ":q!" 強制離開不存檔。
3. 出現一整頁的錯誤訊息, 最下面寫 Swap file ".xxx.swp" already exists! 這很有可能是因為先前沒有按照正常手續 ":q" 離開 vim , 例如直接把 pietty 視窗關掉, 造成 vim 含冤不白... 處理方式請見錯誤訊息。

大方分享自己的創作, 是一種美德

小迷宮太無聊了, 一下子就走完; 大家合作比較好玩。 以下的操作, 假設有 george 與 mary 兩位同學, 請同學兩人一組, 各扮演一個角色。

1. george: 看看自己家的權限開放了多少: ls -l ~
2. george: 錯了; 其實是想看目錄本身, 不是目錄的內容, 再來一次: ls -ld ~
3. george: 自己家要顧好, 不要隨便開放給別人: chmod 700 ~ 再檢查一次: ls -ld ~
4. mary: 想要把 george 的迷宮檔拷貝過來用, 先看看 george 家有沒有開: ls -ld ~george 注意蚯蚓與 george 之間不要有空格。
5. mary: 不信邪, 硬是偷窺: ls -l ~george 注意錯誤訊息說什麼。
6. mary: 再試著闖空門: cd ~george 注意錯誤訊息說什麼。
7. george: 哦, 是 mary 啊, 那就開門讓你進來吧: chmod a+x ~
8. mary: 再探頭看看: ls -l ~george 咦, 還是沒有開呀?
9. george: 有開門 (x), 沒有開燈 (r) 啦。
10. mary: 真的嗎? ls -ld ~george 果然。 沒關係, 我知他家擺設, 摸黑進去, 東西拿了就跑: cd ~george 注意現在沒有錯誤訊息了, cp 1.maz ~/george.maz 最後回家 cd ~
11. george: 歡迎拷貝, 不傷我一毫而利天下, 何樂而不為也! 不過燈不要隨便開著, 以免 mary 或其他人看到不該看的東西... 最常見的安排就是現在這樣: 711, 開門不開燈。

現在請對調角色, 讓另外一位同學也可以拷貝。 兩個人各多了一個檔案出來; 沒有人有任何損失, 誰的 "財產" 減少了嗎? 智慧不是財產, 創作何妨分享...

重要觀念一: 路徑與目錄

最重要的兩個指令:

1. pwd 我現在在那個目錄裡面?
2. cd 在目錄之間游走/切換

假設你目前位於 /home/s000123 那麼

指令	會把你帶到	這個目錄	這種寫法稱為
cd .		(原地不動)	相對路徑
cd ..		/home	相對路徑
cd ../../usr/X11R6		/usr/X11R6	相對路徑
cd ../s000456		/home/s000456	相對路徑
cd ~s000456		/home/s000456	絕對路徑
cd /usr/X11R6		/usr/X11R6	絕對路徑

另外, 不論你人在何處, cd ~ 都會把你帶回自己的家。

重要觀念二: 下指令的重要原則

1. 大小寫有別!
2. 不要隨便省略空格! (連續的空格, 通常可以省略到只剩一個)
3. 要注意錯誤訊息!

組合的力量

1. 編輯自己的迷宮檔: vim 1.maz
2. (在 vim 裡面) 跳到 george 的檔案: ":e geTAB" 按 ENTER 之前, 確認左下角出現 ":e george.maz" 或是你改的檔名。
3. 按 shift-v 進入 visual mode, 移動遊標到最下面 (注意反白的區塊變大), 按 y 複製, 反白區塊消失。
4. 按 ctrl-6 或 ctrl-shift-6 切回原來的檔案。
5. 遊標移到最下面 (其實按 G 比較快), 按 p 貼上, 不錯吧, 迷宮變成兩倍大了。
6. 遊標移到第 11 列, 按 ctrl-v 進入另外一種 visual mode, 按 G 到最後一列, 再按 $ 到最後一行, 最後按 y 複製。
7. 按 "1G" 到最上面, $ 到最右邊, 按 p 貼上。
8. 好了, 剩下最後右下角那一塊, 請再貼一次自己的迷宮。
9. 老鼠與乳酪太多個了, 刪一刪, 再跑一下迷宮程式吧。

vim 的 visual mode 非常好用, 選取起來之後, 除了可以按 y 複製之外, 也可以按 x 或 d 刪除。 Visual modes 有三種: v, shift-v, ctrl-v, 請自己試試看就知道它們的差別。

李果正先生有一份 大家來學 vim 講義, 內容更完整。

「用小零件拼出大東西」 這是令社會得以分工/進步/提高生產力 非常重要的觀念; 而零件相接處, 如何遵循一定的規則, 彼此才能溝通, 更是一件需要大家配合的事情。 組裝電腦, 家庭影音設備, 不同廠牌的電話/不同電信公司的門號彼此可以溝通... 我們的社會從來都是這麼做的。 如果有那一家公司故意製作與別人不能組合的零件, 社會大眾應該加以抵制。 如果別人想要加裝轉接頭以便與它相容, 卻還被它告, 那真是天理安在; 這樣的法律是在保護強盜, 侵犯人權, 而不是在保護 「智慧財產權」。

附錄一: 用 vim 製作迷宮的小技巧

1. 按 "10a #" 及 ESC 製作一列障礙
2. 按 "o" 及 ESC 加入一個換列
3. 按 "20a " 及 ESC 製作一列空白
4. 用 "k" 或 "1G" 回到第一列
5. 按 "2yy" 記憶兩列
6. 用 "j" 向下一列, 或 "G" 移到最後一列
7. 按 "4p" 將剛才記憶的兩列連貼四次
8. 按 "1G6|" 移到第一列第 6 行的位置, 按 "r+" 把底下的字元改成 +
9. 按 "15|" 移到第一列第 15 行的位置, 按 "." 重複剛才的動作
10. 按 "G" 跳到最後一列, "6|.15|." 一樣將第 6, 15 兩行改成 +
11. 按 "3G0" 移到第三列的頭, 按 "." 重複剛才的動作 (改成 +)
12. 按 "$" 移到最後, 按 "." 重複剛才的動作
13. 按 "8G0", 對第八列重複上面兩步
14. 牆壁太少了嗎? 隨便找一格, 按 "r#"
15. 現在到處移動遊標, 隨你高興按 "." 建更多牆, 但不要在剛才的 "+" 上面建牆; 甚至最好確保這些 + 彼此有路相通
16. 迷宮接近完成時, 按 ":%s/+/ /g" 及 Enter, 把所有的 + 改成空格
17. 到你高興的位置去, 放上老鼠 "@" 與 cheese "C", 大功告成!

當然如果你嫌 vim 太難用, 也可以改用比較類似記事本的 nano, 不過它的功能就弱多了。

堆積迷宮積木

---

用網頁分享資訊

1. 建立一個新的 目錄 directory, 並進到裡面去工作:

           mkdir public_html
           ls -l
           pwd
           cd puTAB
           ls -l
           pwd
   

2. 用 lynx 瀏覽器本網頁, 並下載這篇 網頁樣版。
3. 把網頁樣版裡面的 <BASE HREF="..."> 這句話刪除掉。
4. 更改檔名: mv teTAB index.html 再用 ls -l 檢查一下。
5. 打開你家的門, 並打開 public_html 子目錄的門與燈, 最後用 firefox 看你的網頁: http://localhost/~帳號/index.html
6. 簡單修改一下網頁內容, 並在 firefox 內按 「重新整理」。
7. 把你製作的迷宮放到網頁上與大家分享: mv ../1.maz . 這句話意思是將 parent directory 上一層目錄 ".." 底下的 1.maz 檔案搬到 current directory 目前工作目錄 "." 來。 並且修改 index.html, 裡面放一個 超連結 hyperlink 指向這個檔案。 從 firefox 裡面試一下看是否成功。
8. 請確認你的迷宮大小為 10x20: wc -clL 1.maz 應該印出 10 210 21 1.maz 如果不是的話, 等一下其他同學就會把你的迷宮丟在一旁不用了。
9. 上面這個指令是什麼意思? 請下 man wc 看手冊。 空格鍵是下一頁; b 是上一頁; q 是離開; 更多操作鍵, 請見 less 簡介。

不要急著學習/製作花俏的網頁, 目前請以文件內容為重 -- 金玉其表底下的東西 比較重要。

整批收割

1. 以下動作請在另外一個新建的子目錄進行, 以免混亂。 例如 mkdir ~/maze-zoo ; cd ~/maze-zoo
2. 先用 lynx 看同學做的網頁: lynx http://localhost/~同學的帳號/ 並按 \ 檢視原始碼。 確認沒有問題之後, 離開。 (瀏覽網頁時, 如果目錄後面沒有接檔名, 伺服器那邊通常會自動去找 index.html)
3. lynx -source http://localhost/~同學的帳號/ 壯觀吧...
4. 把剛才在螢幕上一閃而過的同學網頁存檔: lynx -source http://localhost/~同學的帳號/ > a.html 這個 > 叫做 輸出重新導向 output redirection, 用意是將原本要印在標準輸出裝置 standard output (其實就是 「螢幕」 啦) 上的資料, 改印到檔案裡面去。 用 ls -l 檢查一下, 甚至用 lynx a.html 看一下複製回來的內容。
5. 請用相同的方式抓同學的迷宮 1.maz, 但存檔名稱改為 "同學的學號.maz" , 並檢視其內容。
6. 學用 for 迴圈: for f in abc pqr xyz ; do echo $f ; done
7. 用 for 迴圈一次抓三位同學的迷宮: for f in 學號甲 學號乙 學號丙 ; do lynx -source http://localhost/~$f/1.maz > $f.maz ; done
8. 檢視老師提供的 「所有同學名冊」: less ... (用 vim 看也可以; 不過現在只是要看, 並沒有要修改, 所以用更簡單的 less 就夠了。)
9. 整批收割: for f in `cat ...` ; do lynx -source http://localhost/~$f/1.maz > $f.maz ; done

「學視障者用的文字瀏覽器有什麼用?」 「學命令列有什麼用?」 這些問題終於得到一點解答 :-) 希望大家從今天起可以打破滑鼠選單的迷思。 重複, 機械化, 有規律的動作, 就不應該是人做的事! 用滑鼠來做, 並沒有比較高明。

拼圖

1. 看看是否每個迷宮都正確? wc -clL *.maz
2. 顯然並不是。 挑出至少形狀正確的迷宮: wc -clL *.maz | perl -ne 'print if /10 *210/' (記得用上箭頭!) 不必擔心指令太長, 反正忘記了可以回來抄; 重點是理解 /.../ 裡面的東西: * 表示前面那個字元重複任意次。
3. 同上, 但把檔名留下來就好: wc -clL *.maz | perl -ne 'print if /10 *210 *21/' | perl -pe 's/.* //' 這裡的 . 表示任何 一個 字元; 所以最後那個子句的意思是: 把 「任意字元出現任意次」 直到遇到最後一個空格為止, 全部刪除掉。
4. 在上句最後面加上 > ok.lst 存檔。
5. 隨便挑 6 個檔案, 我們要像拼積木一樣把它們拼起來:

       paste -d : 學號甲.maz 學號乙.maz 學號丙.maz > a
       paste -d : 學號丁.maz 學號戊.maz 學號己.maz > b
       cat a b > big.maz
   

6. 用 less 分別看一下 a 與 b 的內容, 然後進 vim 編輯 big.maz。 等一下如有任何閃失, 記得 u 是 undo (還原)
7. 先把所有冒號去掉: 遊標移到第一列, 按 shift-V 進入 visual line mode, 再按 G 移到最後一列, 最後打 ":s/://g"
8. 再把所有老鼠變成空格: ":1,$ s/@/ /g" 這裡的 1,$ 表示從第一列到最後一列。
9. 最後把所有乳酪變成空格: ":% s/C/ /g" (以上三種 "選取全部範圍" 的方式, 效果都一樣。)
10. 自己放一隻老鼠, 一片乳酪, 開始玩吧!

誰常上機?

---

產生統計資料

last 指令可以查詢最近一段時間, 誰曾經登入系統。 今天我們的任務是統計一下所有人使用這部主機的頻率與時間, 並畫成圖表。

第一部分我們先只統計每人登入的次數。

1. 用 last 看一下系統總共有多少人次的登入記錄?
2. 我們只對本班同學有興趣: last | perl -ne 'print if /^s4113/'
3. 把這部分的結果存起來: last | perl -ne 'print if /^s4113/' > lastlog.txt
4. 我們只對 user name 欄位有興趣: perl -pe 's/ .*//' < lastlog.txt
5. 排序一下, 把同一位使用者的資料集中在一起: perl -pe 's/ .*//' < lastlog.txt | sort
6. 再數一下每個人出現的次數: perl -pe 's/ .*//' < lastlog.txt | sort | uniq -c
7. 按照出現頻率排序, 由多到少: perl -pe 's/ .*//' < lastlog.txt | sort | uniq -c | sort -nr
8. 取前廿名: perl -pe 's/ .*//' < lastlog.txt | sort | uniq -c | sort -nr | head -20
9. 將最後結果存起來: perl -pe 's/ .*//' < lastlog.txt | sort | uniq -c | sort -nr | head -20 > freq.txt 產生類似這樣的 freq.txt

這裡的 "|" 叫做 pipe, 作用是將前一個指令的輸出, 餵給下一個指令當它的輸入。 如果前一個指令本來就想印到 standard output 標準輸出裝置, 後一個指令本來就想從 standard input 標準輸入裝置 讀資料, 那麼就可以用 pipe 連接起來。 用白話文講, 如果前一個指令原本要印到螢幕上; 後一個指令原本要 "癡癡地等" 從鍵盤讀資料, 那麼 pipe 的作用正好讓前者的輸出直接變成後者的輸入。 last | perl -pe 's/ .*//' 的效果跟 last > lastlog.txt ; perl -pe 's/ .*//' < lastlog.txt 兩句合起來的效果一樣; 只不過後者會多產生一個中間過程檔案。 (註: perl -ne 'print if /^s4113/' 與 grep '^s4113' 的效果一樣; 而 perl -pe 's/ .*//' 與 sed 's/ .*//' 的效果一樣。 圖中採用簡寫版本。)

製作圖表

我們將使用 gnuplot 製作圖表。 打 gnuplot 之後, 進入它的環境, 現在開始與我們交談的程式不再是 bash, 而是 gnuplot。 使用 knoppix 光碟或是從 Windows 下用 XLiveCD 連線到學校主機的同學, 應該會看到 "Terminal type set to 'x11'" 的訊息。 從 Windows 下用 telnet 或 putty 連線的同學, 看到的不是 x11 而是 unknown, 這時只好下 set term dumb 用笨笨的終端機模式畫圖。

gnuplot 跟其他許多文字模式的交談式程式一樣, 也是按 ^d 離開。 先畫幾個簡單的圖, 熟悉一下 gnuplot 的命令:

1. plot x*x-5
2. plot sin(x)/x
3. splot x*x-y*y
4. plot "freq.txt"
5. plot "freq.txt" with boxes
6. help plot (這篇 help 很長, 裡面有很多子題 subtopcs, 閱讀時請留意下方的訊息。)

我們希望在 x 軸下方標示出 username。

1. 先隨便亂實驗一下: set xtics ("abc" 0, "def" 1, "xyz" 2)
2. 要重畫時, 標示才會出現: replot
3. 轉 90 度, 字才不會疊在一起: set xtics rotate ("abc" 0, "def" 1, "xyz" 2); relpot
4. (較新版本的 gnuplot) 如果覺得左下角的滑鼠座標礙眼, 可以叫它不要印: unset mouse
5. 下面好像太擠了。 這是 margin 參數在管的。 先查一下: show margin 再改適當的設定值: set bmargin 5 再查看一次: show margin 最後重畫: replot

什麼, 要把所有 id 全部用手一個一個敲進去!? 機械化, 重複性的動作, 由人來做, 這樣對嗎? 請開另外一個命令列視窗, 在 bash 底下: (魔術表演, 暫時不理解沒有關係) perl -ne 'print qq("$1" ) , $.-1 , ",\\\n" if /\d+\s+(\w+)/' freq.txt > go.gpt 用編輯器進入 go.gpt, 在最上面加上一列 "set xtics (\" 並將最下面一列尾巴的 ",\" 改成 ")"。 可以猜得出來, 這裡每列最後面的 "\" 表示 "這個指令還沒打完, 但不得已要換列, 請暫時先不要處理"。 回到 gnuplot 視窗, 下 load "go.gpt" 最後 replot 大功告成。 (圖案看起來有點醜嗎? 上面故意漏了一點東西...請自己修改。)

最後要把圖存檔, 方便日後使用 (例如貼到文件裡面去)。

1. 看一下目前的驅動程式: show term
2. 看一下目前的輸出檔名: show output
3. 改採 png 格式輸出: set term png
4. 輸出到 freq.png 檔案裡面去: set output "freq.png"
5. 重畫: replot 螢幕沒有任何變化; 但家裡多出一個 freq.png 檔。
6. 用 file 檢查它的屬性; 用 ee 或 xli 或 xloadimage 看圖。
7. 再將輸出切回螢幕, 以免以後畫圖都畫到檔案裡面去, 根本看不見: set term x11; set output (若是使用 windows 版, 請將 x11 改成 windows)。

統計登入次數及連線總時數

這一節, 我們的目的是要以每個人登入的次數及連線總分鐘數當做 x-y 座標, 畫出像這樣的圖:

首先計算每人連線總分鐘數: (魔術表演, 暫時不理解沒有關係) perl -ne '$f{$1}+=$2*60+$3 if /^(\w+).*\((\d\d):(\d\d)\)/ ; END { foreach (keys %f) { printf "$_:$f{$_}\n"; } }' lastlog.txt > time.txt

接下來在 gnuplot 當中試用一下 set label ... 指令:

set label "good" at 3,1
set label "ok" at 1,3
plot sin(x)
plot x*x
set xrange [0:5]
set yrange [0:5]
replot

可以看出: set label 單獨使用並沒有效果, 還是必須等 plot 指令執行後才會出現。 而且 gnuplot 自動調整繪圖範圍的依據, 是 plot 的函數, 而不是 label。 所以必須自己設定 xrange 與 yrange。

所以我們必須從 freq.txt 與 time.txt 產生出 freq-time.gpt。 以下動作, 請自行分解, 把中間過程攔截下來觀察, 不要只管產生結果。 首先調整 freq.txt 兩欄的順序, 把 id 調到前面, 次數放到後面, 並且依 id 排序: perl -ne 'print "$2:$1\n" if /(\w+)\s+(\w+)/' freq.txt | sort > a 同樣地, 依 id 為 time.txt 排序: sort time.txt > b 最後把兩個檔案並排, 並且轉成 gnuplot 的指令: join -t : a b | perl -ne 'print qq(set label "$1" at $2,$3 center\n) if /(\w+):(\w+):(\w+)/' > freq-time.gpt 然後就可以進入 gnuplot, 開始畫圖:

        load "freq-time.gpt"
        plot 0
        set xrange [0:50]
        set yrange [0:2000]
        replot

Q: 如何迅速查出 y 的範圍? 一樣用 sort, 不過需要 -t 這個 option。

像這種大部分資料擠在左下角的圖, 如果改用 logscale 畫, 效果會比較好一點。 但要用 logscale, 資料裡面就不可以有 0 或負數。 perl -ne 'print unless /,0 /' freq-time.gpt > freq-time-nozero.gpt

        load "freq-time-nozero.gpt"
        set logscale
        set xrange [12:50]
        set yrange [300:2000]
        plot 0

---

提醒: 這篇講義的重點不是統計次數/時間, 而是 如何處理有規律的文字檔以產生統計圖表。 它的應用場合非常廣泛, 不限於此。

用網頁做簡報

---

簡介

1. 參觀一下網頁式簡報 s5 (點 "introductory slide show") 注意: 將滑鼠移到畫面下方, 會出現選單讓你直接跳到某一頁。
2. 參觀一下改良版 presntacular (點 "slide show demo"), 及一些例子: Microformats, ...

基本 s5

1. 從 s5 首頁下載最新的穩定版 (例如寫講義的當時是 s5-11.zip ; 不要抓到研發版 development release), 並且用 unzip -v ~/s5-11.zip | less 看一下裡面有那些東西。
2. 如果直接解開來, 所有檔案會放在家目錄, 太亂。 建一個空目錄, 解在裡面: mkdir ~/s5 ; cd ~/s5 ; unzip ~/s5-11.zip
3. 其實真正需要用到的, 只有 s5-blank.zip 裡面的東西。 unzip -v s5-blank.zip | less 看一下裡面有那些東西。 這次它底下已經分成兩個子目錄, 而且其中的 __MACOSX 我們用不到, 所以我們就不另外在 ~/public_html 底下建立目錄了: 直接到那裡去解壓縮, 並且改一下名字: cd ~/public_html/ ; unzip ~/s5/s5-blank.zip ; mv s5-blank s5 ; rm -rf __MACOSX
4. 進入 s5 子目錄。 然後複製一份: cp s5-blank.html hw3.html 並用瀏覽器看檢查一下是否成功放入你的帳號。 應該要可以自己猜得出來 ~/public_html/s5/hw3.html 這個檔案的網址是什麼; 或請老師給網址。
5. 另外開一個視窗, 進 vim hw3.html 編輯, 把投影片的標題, 講者, ... 等等資訊改一下, 存檔 (但不要跳出 vim) 並在瀏覽器裡面重新整理, 確認生效。
6. 複製幾張空白投影片: 把遊標移到第二個 (也是最後一個) <div class="slide"> 那一列, 按 shift-v 進入 visual line mode, 再將遊標移到下面的空白列, 按 y 複製。 然後按幾次 P (大寫!) 貼在遊標之前。
7. 開始隨便打一點東西吧。
8. 嚴格來說, 應該要在 <title> 那句之下加上: <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 表示文件是正體中文, 以 big5 編碼。

Presentacular

1. 其實 Presentacular 可以獨立使用, 不必先安裝 s5; 不過這裡為了讓大家更清楚究竟那些檔案很重要, 所以採取稍微麻煩的步驟。
2. 下載 presentacular-example.zip
3. 用 unzip -v ~/presentacular-example.zip | less 看一下裡面有那些東西。 它自己就已經有一個最上層目錄 "example", 所以我們不必另外再建目錄。
4. 在家目錄底下將它解壓縮: cd ~ ; unzip ~/presentacular-example.zip
5. 進去 example 子目錄看一下。 更改一個檔名: mv index.html presentacular.html
6. 特別注意到, 這裡面的 ui/default 子目錄, 與 s5 的重複; 但其實內容又不完全一樣。 所以把它搬過去相同的位置, 但更改名稱: mv ui/default ~/public_html/s5/ui/pt
7. 清理一下垃圾。 刪除 ui 子目錄: rmdir ui 咦, 它怎麼說不是空的? 再仔細看: ls -a ui 原來有隱藏檔。 暴力遞迴刪除: rm -rf ui
8. 把所有東西搬到網頁目錄的 s5 底下, 並且移到那邊工作: mv * ~/public_html/s5/ ; cd ~/public_html/s5/
9. 正在 vim 編輯檔案的視窗, 請改編輯 presentacular.html : 按 :e preTAB 可能還要再手動將檔名敲完。
10. 找到 <!-- Presentacular theme --> 從這裡開始, 進入 visual line mode, 接下來這十列左右 (不要到 </head>) 全部標示起來, 用 y 鍵複製。 這些指令的功用是把 presentacular 的特效檔叫進來。 任何想用 presentacular 的網頁, 都要有這些指令。
11. 按 ctrl-shift-6 切換回剛才的 hw3.html, 把遊標移到 </head> 按 P (大寫!) 貼上
12. 現在隨便挑一頁, 把 <div class="slide"> 改成 <div class="slide appear"> 再挑另一頁的 <ul> 改成 <ul class="incremental">, 最後將某個 <li> 改成 <li class="shake">
13. 用瀏覽器看一下 ~/public_html/s5/presentacular.html (自己想一下網址...) 發現怪怪的 ... (待續)

特效摘要:

1. 適用於整頁的效果: appear, grow, blinddown
2. 與上述各項相反的 "消失" 效果: fade, shrink, fold
3. 適用於單項的效果: incremental, shake, pulsate
4. 其他: puff

結語

其實 s5 及 presentacular 並不需要 Linux 作業系統, 也不需要網頁伺服器 apache。 請自行在 Windows 底下下載 presentacular, 解壓縮後, 直接用瀏覽器開啟 index.html。 然後用記事本 (notepad) 打開 index.html 修改, 並重新整理網頁。

用網頁做簡報的缺點是花俏度比較低; 優點則是:

1. 不依賴任何作業系統
2. 除了瀏覽器與文字檔案編輯器之外, 不依賴任何應用軟體
3. 視障者或較舊的瀏覽器還是可以看得見靜態的圖文
4. 相較於真正的簡報系統, 檔案小很多; 如果許多份簡報放在一起, 省更多
5. 符合 組合的原則, 多學一點點 html, 可以讓你在任何用到 html 的場合多佔一點便宜
6. 特別是如果未來的資訊技術真的朝 Microformats 發展, 略通 html (不必精通; 我自己也不精通) 將是很基本, 具有長遠投資價值的技能。

其他參考資料:

1. 勤益技術學院電算中心朱孝國: 網頁式簡報

半手工打造符合 w3c 規範的網頁

---

需要多高級的工具?

手工打造 html 實在並不困難, 因為

1. 不需要從零開始, 可以拿現成的網頁來改;
2. 不需要學會太複雜的東西, 就已經可以滿足最基本的需求;
3. 有 tidy (下詳) 可以幫忙把手工打造的半調子網頁轉換成符合 w3c 規範的網頁。

另一方面, 學手工打造 html, 比學許多軟體操作都更有價值, 因為 檔案格式的壽命遠比應用軟體的壽命要長。 請用 "html tutorial w3c" 搜尋 html 講義, 例如找到 Dave Raggett 的短文 Getting started with HTML (沒辦法, 用 "html 教學 w3c" 找到一堆香港網站, 而且他們的網站也並不符合規範) 另外, 這裡 有一個常用及次常用標籤列表 (含實驗區) 可以參考。

如果比較喜歡 「所見即所得」 的工具, 可以考慮採用 nvu 與 bluefish 甚至是 OpenOffice.org。 這些自由軟體有幾個共同的優點: 製作出來的網頁較符合 w3c 規範, 跨作業平臺, 具有原始碼, 零授權費。

版權專屬軟體裡面, Adobe 的 DreamWeaver 所製作的網頁相對符合標準。 至於 MS Frontpage 與 MS Word 製作出來的網頁, 穿插了許多不標準的東西, 傷害網站所有人甚大。 網頁是分享資訊/散佈理念/宣傳行銷的利器, 我們當然希望越多人看越好。 買了微軟的 Frontpage 及 Adobe 的 Flash 來替我們製作網頁, 它們產生的網頁卻要求訪客一定要安裝某某軟體某某版本以上才能瀏覽, 這就像是僱用微軟及 Adobe 擋在家門前, 替我們過濾 它們不喜歡 的訪客, 這... 花錢事小; 產生反效果事大。 希望讀者可以理解我們激動與哭笑不得的原因; 這並不是盲目地 「仇視微軟」 或仇視任何一家廠商。

到隔壁街的菜市場買菜, 怎麼去比較方便? 走路, 騎腳踏車, 騎機車, 開車, 駕直升機, 還是開太空梭? 如果有人不顧場合與實用考量, 一味 (是 "一味" 沒錯; 不是 "一昧") 堅持採用最新最炫最搶眼的工具, 卻忘記甚至傷害了原始目的, 這, 才是盲目。 可惜現在市面上有太多的網頁製作書籍, 一味強調花俏, 卻因而提高障礙, 阻擋訪客, 降低搜尋引擎曝光率。 這正如韓愈所說: 「句讀之不知, 惑之不解, 小學而大遺」 啊!

用 w3c 的 tidy 整修你的網頁

制定網頁標準的, 不是微軟, 也不是 Adobe 或被 Adobe 併購的 Macromedia, 而是一個非營利組織 w3c (World Wide Web Consortium)。 它的創辦人正是 WWW 的發明人 Tim Berners-Lee; 它的會員包含上述各公司, 及其他四百多個公司與非營利組織。 新的 html 標準 (例如 html 4.0 與 xhtml 1.0) 都是由 w3c 制定。 新的 html 標準? 為什麼我們很少聽到不同版本 html 不相容的問題? 因為 w3c 在制定新標準時, 非常重視如何為軟體保留 向上相容 forward compatibility 與 向下相容 backward compatibility 的空間。 所以好的網頁伺服器, 搭配上好的瀏覽器, 與正確的網頁, 不論是用新瀏覽看舊網頁, 或是用舊瀏覽器看新網頁, 應該都不會有大問題。 健康的資訊世界, 應該長這樣才對。 不同廠商, 甚至是同一廠商的不同版本軟體, 如果會因而造成網頁無法開啟, 或其他嚴重的操作問題, 很可能就是其中有廠商侵犯 資訊人權, 想要綁架消費者的文件。

w3c 的 Dave Raggett 寫了一支小程式 tidy, 可以將不太整齊的半調子網頁整理成符合 w3c 規範的標準網頁。 以下從第三步之後, 皆在 cygwin 的 bash 視窗內工作。

1. 確認 Windows 裡已安裝 cygwin: 桌面上應該有 bash 與 x-server 兩個 icons。
2. 到搜集 cygwin 套件的 交大 或 其他映射站臺 下載 lftp 套件 (檔名內不要有 src; 最新版本), 放在 c:\tmp 底下 (或其他簡單, 不含中文的路徑下)
3. 把檔案搬進 cygwin 的目錄, 並驗證下載正確:

           cd /tmp
           mv /cygdrive/c/tmp/lftp-*.tar.bz2 .
           md5sum lfTAB # 與網站上的 md5.sum 對照
   

4. 檢視檔案裡面有什麼東西: tar tjf lftp-* | less 或 bunzip < lftp-* | tar tf - | less
5. 移到 根目錄 root directory: cd / 並安裝: tar xjf lftp-* 或 bunzip < lftp-* | tar xf -
6. 再回到 /tmp 底下 (以免抓到的檔案亂放)。 現在可以用 lftp 下載了: lftp ftp://..../cygwin/release/ 以下的指令都是給 lftp 看的: 有什麼東西? ls | less 進入 tidy 子目錄: cd tidy 有什麼東西? ls | less 抓檔案: get tiTAB (一次的 completion 可能不夠) 另外幾個常用的指令分別是:
   • put 上傳
   • mget 與 mput 一次下載或上傳多個檔案
   • help 求助
   • quit 離開
7. 不要離開 lftp; 另外開一個 bash 視窗, 同樣用 tar 解壓縮以安裝 tidy。 記得要先切換到根目錄下!
8. 用 lynx 下載前一篇講義提到的 樣版網頁 或是你自製的網頁, 然後用 tidy 整理: tidy template.html > a.html 再用 lynx 檢視。
9. 在 lynx 裡面按 \ 檢視原始碼, 或按 e 編輯。 怪怪的嗎? 請將以下內容剪貼到 /tmp/tidy.cfg 裡面:

           tidy-mark: yes
           markup: yes
           wrap: 72
           tab-size: 8
           indent: auto
           indent-spaces: 2
           output-xhtml: yes
           doctype: loose
           char-encoding: raw      # 主要是這句
           clean: yes
           logical-emphasis: yes
   

10. 用新的設定再執行一次: tidy -config /tmp/tidy.cfg template.html > a.html 並檢視結果。 注意看看有沒有 warnings 或 errors。 奇怪, 不是已經用 output redirection 把 standard output 導向到檔案裡面去了嗎? 怎麼還會印在螢幕上呢? 原來這部分的輸出叫做 standard error, 專門放警告與錯誤訊息。

事實上從 tidy 首頁 還可以找到純 Windows 版 (不需要 cygwin 或 XLiveCD), 具有圖形介面的 tidy; Linux 上面也有已經編譯好的套件。

現在請到 Linux 伺服器上, 將你的網頁整理一下。 可以將 /tmp/tidy.cfg 改名為 .tidy 並放到家目錄底下, 這樣指令可以簡化為 tidy index.html > a.html 因為根據手冊, tidy 自動會去找 ~/.tidy 當做設定檔。 最後貼上 「通過 w3c xhtml 1.0 認證」 標籤, 也就是在網頁下方加上一段:

	<a href = "http://validator.w3.org/check/referer">
	<img src = "vxhtml10.png"
	alt= "[(力求維持) 符合 xhtml 1.0]" /></a>

並且記得把標籤檔抓回你的 public_html 目錄底下。 然後用瀏覽器看自己的網頁, 並點進標籤裡面去。

w3c 的認證服務

隨時確保自己的網頁大致正確

請安裝 firefox 的 tidy plugin。 安裝完畢, 下次重新進入 firefox 時, 右下角會出現一個小標籤, 可能是綠色的勾, 黃色的驚嘆號, 或是紅色的叉。 這分別表示使用 tidy 整理該網頁時, 沒有任何錯誤或警告訊息, 有一些警告訊息, 或是有一些錯誤訊息。 如此可以很方便地知道自己的網頁是否經常維持大致正確。 當然, 「用 tidy 處理時沒有任何錯誤或警告訊息」 並不等於符合 w3c 規範 -- 處理過的網頁才會符合 w3c 規範。 至於符合 w3c 規範, 也不能保證完全沒有障礙; 不過如果你的網頁是用手工打造的, 平時沒有用太複雜奇怪的 tags, 大概也就非常接近無障礙了。

不要急著學習/製作花俏的網頁, 目前請以文件內容為重 -- 金玉其表底下的東西 比較重要。

作業

作業: 製作一個簡單的網頁, 形式上必須能夠用 lynx 或 w3c 瀏覽, 並符合 w3c 規範, 貼上 「通過 w3c 認證」 圖樣; 內容必須包含表格/圖片/內部超連結/外部超連結 至少各一。 善用 yubnub 的 g, wp, gim 等等指令; 要找什麼題目呢? 對演化, 太空, 旅遊,... 等等知性題目有興趣的讀者, 不妨到這些網站逛逛尋找靈感: Tree of Life, NASA planets, google map。 當然要做一點更有本土味或個人特色的話, 也可以做一頁 「高雄市推薦小吃列表」, 或 「大雄的風景照集錦」 等等。

電腦怎麼存文字檔?

---

這個練習的後半部用 Linux 底下的 mlterm 及 gedit 來做會比較方便。 如果在 Windows 底下, 建議用 XLiveCD 啟動 X Server, 並用 ssh 遠端登入老師的 Linux 伺服器操作。

ASCII 碼

請在 Linux 的終端機 (例如 mlterm) 底下建立一個文字檔, 叫做 quote.txt 好了, 內容像這樣:

        The future is what you do with the software,
        not what you paid for the software
        -- Mark Shuttleworth, Ubuntu Sponsor
        5/2/2005 http://www.zdnet.com.au/news/software/0,2000061733,39190252,00.htm

建議前面不要放多餘的空白, 等一下研究起來比較簡單。

在 shell 底下, 把它印出來看: cat quote.txt 沒有問題。 實際上存在電腦裡面, 每個字母, 數字, 或標點符號各佔一個 byte。 我們將它用電腦儲存的方式印出來看: od -t x1 < quote.txt | less 在 less 的操作介面下, 請按以下鍵: / 20| 0a 並按 ENTER 鍵, 搜尋 "空格後面跟著 20" 或 "空格後面跟著 0a" 得到類似這樣的結果:

        0000000 54 68 65 20 66 75 74 75 72 65 20 69 73 20 77 68
        0000020 61 74 20 79 6f 75 20 64 6f 20 77 69 74 68 20 74
        0000040 68 65 20 73 6f 66 74 77 61 72 65 2c 0a 6e 6f 74
        0000060 20 77 68 61 74 20 79 6f 75 20 70 61 69 64 20 66
        0000100 6f 72 20 74 68 65 20 73 6f 66 74 77 61 72 65 0a
        0000120 2d 2d 20 4d 61 72 6b 20 53 68 75 74 74 6c 65 77
        0000140 6f 72 74 68 2c 20 55 62 75 6e 74 75 20 53 70 6f
        0000160 6e 73 6f 72 0a 35 2f 32 2f 32 30 30 35 20 68 74
        0000200 74 70 3a 2f 2f 77 77 77 2e 7a 64 6e 65 74 2e 63
        0000220 6f 6d 2e 61 75 2f 6e 65 77 73 2f 73 6f 66 74 77
        0000240 61 72 65 2f 30 2c 32 30 30 30 30 36 31 37 33 33
        0000260 2c 33 39 31 39 30 32 35 32 2c 30 30 2e 0a
        0000276

這些就是 ASCII code: 0x0a 是換列 (LineFeed); 0x20 是空格; 0x30 到 0x39 是數字; 0x41 到 0x5a 是大寫字母; 0x61 到 0x7a 是小寫字母。

中文

那麼中文字在電腦裡面怎麼存呢? 一個 byte 最多只能表達 256 種不同的值, 顯然無法表達所有的中文。 所以有 big5 編碼, 用兩個 byte 表達一個中文字。 請在 mlterm 底下按 ctrl-滑鼠右鍵, 叫出設定對話框, 確認目前選擇的編碼是 big5, 如右圖。

首先產生一個文字檔, 內含 「中文」 二字: echo '中文' > tw.txt 接著印出來看看: cat tw.txt 顯示 "中文" 二字, 一切正常。 一樣, 對電腦來說, 它仍舊不過是一堆數字而已: 下 od -t x1 < tw.txt 看到 5 個 bytes: a4 a4 a4 e5 0a 最後一個還是換列字元; 前面的 a4 a4 及 a4 e5 分別正是 「中」 「文」 二字的 big5 編碼。

麻煩的是, 不是只有臺灣用中文。 我們的左鄰右舍都用中文; 但他們的電腦, 面對相同的數字, 卻各有不同的解釋。 請對照上圖, 依序操作以下指令。 井字號後面是註解, 本來敲不敲進去都無所謂; 但這裡因為切換編碼的關係, 建議剪貼時將它略過, 小心不要複製到, 以免螢幕上出現亂碼。 (我的圖是因為每次都多切換一次回 big5, 註解才正常顯示)

1. 用上箭頭把先前的指令 cat tw.txt 叫出來, 但暫時不要按 ENTER。 先在 mlterm 的設定對話框當中, 把編碼改成 EUC-CN (GB2312), 並記得按 「套用」, 再按 ENTER。 這個意思是要求 mlterm 模擬中國電腦, 用 gb2312 編碼去解釋/顯示它看到的資料。
2. 重複上面步驟, 但這次把編碼改成 SJIS, 模擬日本電腦用 shift-jis 編碼去解釋/顯示它看到的資料。
3. 重複上面步驟, 但這次把編碼改成 EUC-KR, 模擬韓國電腦用 euc-kr 編碼去解釋/顯示它看到的資料。
4. 再把 od -t x1 < tw.txt 指令叫出來, 確認一下資料內容從來都沒有改變過。

並不是上述這些國家的電腦無法顯示 「中文」 這兩個字, 只是在每個國家, 要儲存/顯示同樣的這兩個字, 用的 字元編碼 (character encoding) 都不同。 例如在韓國電腦裡面, 「中文」 這兩個字的編碼分別是 f1 e9 與 d9 fe。

1. 先用轉換編碼的工具 iconv 把 tw.txt 的內容轉成韓文的編碼, 存入 kr.txt 檔案中: iconv -f big5 -t euc-kr < tw.txt > kr.txt
2. 看一下 「中文」 這兩個字在韓國電腦裡面的編碼: od -t x1 < kr.txt
3. 記得現在 mlterm 的編碼是 euc-kr, 也就是正在模擬韓國電腦。 下指令 cat kr.txt 果然正確顯示 "中文"。 注意字形不太一樣, 因為剛才模擬的是臺灣環境, 用臺灣字形; 現在模擬的是韓國環境, 用韓國字形。

瀏覽器選單上的 「檢視」==> 「語系及字元編碼」 的功用, 就是在決定用那一種方式來解釋網頁資料: 同樣的兩個 bytes, 在正簡中文或日韓文電腦系統中, 各代表不同的字。

Unicode: 解決資訊地球村的書同文問題

那麼如果一篇文章, 一篇網頁裡面, 同時需要出現數種語言呢? 這是今日資訊地球村必須面對, 非常實際的問題。 於是出現了 unicode, 一個包含全世界所有主要語言的字元集。 例如 「中」 的 unicode 代碼是十六進位的 4E2D, 而 「文」 的代碼則是十六進位的 6587。 又如英文字母 「A」 的代碼是十六進位的 0041, 換列字元是 000a, 都和它們的 ASCII 代碼一樣, 只不過各變成 2 個 bytes。 請下指令: echo '中文' | iconv -f big5 -t unicode | od -t x1 或 iconv -f big5 -t unicode < tw.txt | od -t x1

接下來我們在命令列底下打 bc 進入無限精準度計算機, 將 「中文」 的 unicode 轉成十進位。 進入 bc 之後, 沒有任何提示符號。 別怕, 先試一下 3*5-4 (每個指令打完要按 Enter) 果然出現答案。 再打 ibase=16 表示要用 16 進位輸入。 然後輸入剛才查到的 16 進位數字, 例如 4E2D (A-F 要大寫!), 按 Enter 之後出現 20013。 同樣的方法查出十六進位的 6587 其實是十進位的 25991。

隨便找一個 html 檔 用純文字檔案編輯器打開, 敲入兩個 html entities 如下: 中 文 存檔後再用瀏覽器打開來看, 就出現剛才查詢的字元, 跟本例的 ### - � ### 一樣。 現在請用 「檢視」==> 「語系及字元編碼」 選取 shift-jis 或 euc-kr 或甚至是俄語希伯來語等等完全不相關的語言。 再在網頁裡面搜尋 ### 找到上面的字串, 會發現不論編碼怎麼變, 它依舊是中文。 最後請檢視本頁原始碼, 看看它的寫法。 這裡我們看到 html entity 加上 unicode 的另一個功用: 不管使用者用什麼編碼去解釋一篇網頁, 用這種方式顯示的文字都不會改變。

utf8: Unicode 的一種高效率編碼方式

但是如果要像上面這樣每個字元都用 2-6 個 bytes 來表示, 就很不經濟了。 例如那些原本用 ASCII 碼就可以表達的檔案 (像是程式原始碼之類的), 如果改用 unicode 存, 檔案大小馬上變成兩倍大。 比較好的方式是用短碼表達常用的字元; 長碼表達比較少用的字元。 就像 摩斯電碼 一樣, "e", "i", "t" 之類最常出現的字母, 分配到最短的編碼, 讓整份文件變短。 utf8 正是為此而設計的。 它不過就是將 unicode 的原始編碼重新調整, 使得每個 ASCII 字元只佔一個 byte, 每個中文字元佔 3 個 bytes, ... 等等。 其他諸如 utf7, utf16, ucs2, uc4, ... 等等編碼, 也分別各是 unicode 的不同編碼方式, 基本上都能完整表達 unicode 字集; 但 utf8 是最常用的 unicode 編碼。

以下我們將編輯一個文字檔, 採用 utf8 編碼, 所以可以在一份文件裡面同時顯示多國語言。 請開啟 gedit 之類, 支援 utf8 的編輯軟體。 就拿蕭伯納的 這句名言 作例子吧: "Liberty means responsibility. That is why most men dread it." 前往 Babel Fish 翻譯服務, 把英文貼上, 並選取 "English to Chinese-Traditional", 最後按 Translate 翻譯, 出現中文 "自由意味責任。所以多數人畏懼它。" 確認一下這篇網頁的編碼是 utf8: 可以查看 「檢視」==> 「語系及字元編碼」, 也可以檢視頁面原始碼, 注意最上面那一段裡有一句提到 charset 及 UTF-8。 把翻譯結果剪貼到 gedit 裡面。 再繼續從本頁選 "English to Chinese-Simple", 同樣將翻譯結果剪貼到 gedit 裡面。 當然也可以翻譯成日韓俄文或希臘文等等, 不過翻得好不好就不知道了。 存檔並在 mlterm 底下將它 cat 出來看。 (記得要調整編碼) 也可以用 od -x 觀察它的編碼, 並與 我的檔案 比較。

有許多網站提供 utf8 查詢 unicode 的服務, 例如中文的 全字庫 及英文的 fileformat 與 slayeroffice 等等。 文件採用 utf8 編碼是未來的趨勢。 事實上多數的新興軟體, 例如 blog 與 wiki, 都已採用 utf8。 世界, 果然又要變得更平一點了...

一點理論

character set 是字元集; encoding 是編碼。 對於 big5 (或其他專為單一語言設計的簡單碼) 來說, 這兩者可說是同一回事; 但對於 unicode 來說, 就很明顯地可以看出這是兩回事。 unicode 是 character set; 而 utf8 是它的眾多 encoding 之一, 最多人用的那種。 不過由於歷史因素, 很多文件/軟體選單仍舊將兩者混用。 多數時候並不至於造成混淆與困擾。

打造舒適的家

---

一些便利的設定

許多指令裡面都會出現主機名稱, 打起來有點煩。 可以在 ~/.hosts 裡面放幾列如下的資料:

        210.71.4.237    ftp.pws.stu.edu.tw
        123.45.67.89    123.45.67.89

並且在 .bashrc 裡面加上一句: export HOSTFILE=~/.hosts 則下次再登入時, 命令列上任何地方, 只要打主機名稱的前幾個字元, 然後按 ESC 及 @, shell 就會自動把主機全名打出。 這叫 hostname completion。 詳見 bash(1)

在 vim 的 insert 模式裡面, backspace 鍵的倒退範圍很有限。 又, 搜尋字串 ("/" 或 "?" 鍵) 時, 找到的字串會變成黃色。 如果希望 backspace 鍵可以無限倒退, 又希望搜尋到的字串不要變色, 可以在 ~/.vimrc 裡面放兩列:

        set backspace=indent,eol,start
	set nohlsearch

詳見 /usr/share/doc/vim-*/doc/usr_05.txt (可能有好幾個 vim-... 的目錄, 要找一下)

我自己經常下的指令有: vim, less -firs, lynx -image_links 所以在 ~/.bashrc 檔案中, 加上這幾句:

        alias v=vim
        alias l='less -firs'
        alias x='lynx -image_links'

這樣下次再登入時, 可以用一個字母分別取代上述各指令。

怎麼讓不同的檔案顯示不同的顏色, 或是把既有的, 不喜歡的顏色設定改掉? 先看一下 ls 指令真正執行時的細節: type ls 它目前的顏色設定: echo $LS_COTAB 如果按 tab 鍵沒有反應, 就是這個 環境變數 environment variable 沒有定義。 最簡單的情況: 你的帳號的 ls 已經會顯示顏色, 這時只需要將 /etc/DIR_COLORS 拷貝回 ~/.dir_colors 並加以修改即可。 最自主的設定: 如上改好 ~/.dir_colors 並將這句話: eval $(dircolors ~/.dir_colors) 放入 ~/.bashrc 檔案中, 這樣下次再登入時, 就會生效了。 細節請見 dircolors(1) 及 ls(1), 還有 /etc/profile.d/alias.sh 裡面的指令。

備份習慣比備份工具更重要

養成經常備份的習慣, 比購買功能強大的備份軟體更重要。 仔細思考那些檔案是你花了很多心血製作出來的, 如果丟掉了會悔恨不已? 自己創作的文件/圖案/程式/聲音/... 等等都是; 至於下載回來的檔案, 就比較無所謂了。 ㄟ, 但是檔案下載點的網址也蠻重要的, 通常經過幾週以後, 會完全忘記自己當初是怎麼找到的。 還有, 上述各個 設定檔 configuration files 也都要花很多時間�