- September 19, 2007
- 2:31 am
- PNG and @言語
PNG-8 中也是可以包含 alpha channel 資訊的，不支援 alpha channel 的瀏覽器（如：IE 6），遇到這種包含 alpha channel 資訊的 PNG-8 圖片時，會將含 alpha channel 的部份顯示為全透明色，是個不錯的向下相容技巧。
目前只有 Fireworks 能夠製作這種圖片，我沒有 Fireworks ，只好尋找其他替代方法——有兩個小軟體可以將 PNG-24 圖片轉換為包含 Alpha channel 的 PNG-8 圖片，分別是 pngquant 和 pngnq ，他們使用不同的演算法來取色（因為 PNG-8 有最多只能使用 256 種色彩的限制），效果也因此有些許不同。
pngnq 好像沒有 Windows 版本，因此我只試用了 pngquant 。 pngquant 有外掛 GUI : Manfred ，使用上很簡單。
試用的感想是… 這種圖片的確有它的可用之處，但必須在設計之時便考慮到拿掉 alpha channel 的情況，加上 pngquant 轉出來的檔案有時會有一點小 bug ，例如上圖就在圖片底端多了一條灰線。要實際應用，我覺得會很麻煩。
這是我為了 Selenium 寫的簡單 Widgets ，包含以下功能：
- del.icio.us
用於本站右邊的「Notepad」。我的實作方法是去讀取指定使用者的 JSON ，然後 Parse 出來，我覺得這樣比使用 API 簡單許多… 但就沒有指定 tag 的功能了。它會把取得的 JSON 檔案 cache 在目前模板資料夾，想要換地方的可以自行修改…
- Tag Cloud
用於本站右邊的「Tag Cloud」。雖然 WordPress 2.3 本身已經有產生 tag cloud 的函式，但我不喜歡它的產出結果，就還是自己寫一個。
- Related Tag Cloud
用於本站右邊的「Related Tags」。這是一個對資料庫負擔較重的功能。
- Related Entries
用於本站右邊的「Related Entries」。此功能需使用到 Bigram Full-Text Search 建立的 N-gram 表格，因此如果沒有啟用 Bigram Full-Text Search 的話，這個 Widget 就不會出現。
以下附上 Tag Cloud / Related Tag Cloud 的 CSS 供參考：
/* Tag Clouds */
#tag-cloud li,#related-tag-cloud li{display:inline;}
#tag-cloud em,#related-tag-cloud em{font-style:normal;background:transparent;}
#tag-cloud a,#related-tag-cloud a{color:#cccccc;font-size:1em;}
#tag-cloud em a,#related-tag-cloud em a{color:#99bf9f;font-size:1.2em;}
#tag-cloud em em a,#related-tag-cloud em em a{color:#6bb39b;font-size:1.4em;}
#tag-cloud em em em a,#related-tag-cloud em em em a{color:#4295a6;font-size:1.6em;}
#tag-cloud em em em em a,#related-tag-cloud em em em em a{color:#1f4799;font-size:1.8em;}
我又換 Theme 了。
“Unfair” 使用了 7 個月左右，算是… 中等壽命 XD 她的特色是頭版只有一篇，這是優點也是缺點——優點是讓我想放上頭版的文章不會很快的被其他雜文洗掉，缺點則是瀏覽方式不符合一般使用者習慣，舊文比較難被翻出來。我在這個 Theme 上作了很多新的嘗試，例如熱門標籤雲、相關標籤雲、友善的錯誤頁面、不同的最近迴響顯示方式，還有從來沒面世過的文章彙整等等，在 Theme 裡面卻寫了很多 PHP code ，雖然有點噁心，但我很喜歡她的功能性。
我翻閱過去時，重新發現了 KrESCENT ，於是決定下次要來重寫一個 KrESCENT 。這次的 “Selenium” 主要參考了 KrESCENT, Moo-Point 和 Blueprint ，寫完後先用在我的另一個 blog 上，本來是沒打算讓這邊也變成這樣的，最後更換的原因則是…… 我最近把 Firefox 預設字型不論 Sans-Serif 還是 Serif 全設成微軟正黑體，這樣對 “Unfair” 來說字就太小了…… XD 1
這次的 Theme 因為剛好只用到非常少量的圖片，因此我給她加入了漸變效果（但是我沒有讓對比愈來愈低，純粹是隨時間變色而已）。起初這功能是寫成 Hard code ，現在改成 Plugin ，不啟用此 Plugin 的話就只是不會變色， Theme 不會因此壞掉。另外在 “Unfair” 用過的熱門標籤雲、相關標籤雲2、相關文章3這些功能也都改寫成 Widget ，所以這次的 “Selenium” 功能性差不多，卻完全沒有 Hard code 呢！
整體而言我覺得 “Selenium” 是一個用 Plugin 堆起來的 Theme ，她的 Loading 好重喔～ XD 4
最後是講解標題時間，前面提過 “Selenium” 是 “KrESCENT” 的延續，這次的名稱當然要跟「月」有關係囉！ Selenium 是化學元素「硒」，而這個字源於希臘文 Σελήνη ，其意為月亮或月之女神。
程式功能
- 將 BBS 精華區的打包檔案轉成 HTML 以便閱讀，轉換結果如上圖。
- 正確轉換 Unicode 補完計畫中的新增字，全部轉成 UTF-8 。
轉換範例1 · 轉換範例2
下載
下載後毋需安裝即可執行。如果無法使用，請安裝 Microsoft .NET Framework 2.0 版可轉散發套件。
使用說明
如何取得看板精華區打包檔案
要取得這個檔案必須有幾個條件： BBS 系統允許某種權限的使用者（如：站長、板主）取得打包檔案，而你剛好是那種權限的使用者。
達到以上條件後，這個功能應該是在 Mail → Zip 那裡，根據各 BBS 站而有所不同。 BBS 系統會將檔案打包好寄到指定的信箱。
沒有權限但好奇的使用者，這裡有 itoc 看板精華區打包檔案的下載。不過我覺得沒事不要亂幫人衝流量比較好…
轉換整個精華區
- 按「開啟檔案」，選好「
.DIR」檔案，然後會詢問是否要開始轉換
- 按「確定」後就會開始轉換，這時程式會呈現當機狀態，請等它忙完 XD
- 資料夾名稱建議取名為看板名稱，因為程式會取資料夾名稱作為網頁標題
轉換單篇文章
- 按「開啟檔案」，選取要轉換的文章，或者直接貼到上方空格中
- 最後按「轉換」
已知問題
- 不支援雙色字，用 CSS 應該可以做出來，但是很麻煩…
- 文章檔頭不一定能正確轉換出來，僅支援少部份檔頭格式（例如標題、作者、時間、看板四個欄位缺了一個就不會轉），不過我覺得不重要所以不怎麼想修… :p
- 下列字元無法正確轉換（會被轉成問號），但這些字好像本來就沒辦法貼到 BBS 上吧？
␀ ␁ ␂ ␃ ␄ ␅ ␆ ␇ ␈ ␉ ␊ ␋ ␌ ␍ ␎ ␏ ␐ ␑ ␒ ␓ ␔ ␕ ␖ ␗ ␘ ␙ ␚ ␛ ␜ ␝ ␞ ␟ ␡
- 以下幾組 Big5 字碼對應到 Unicode 後會變成同一個，不過根據 CP950 和 Unicode 補完計畫的對照表，本來就是這樣轉，我也不知道怎樣才是對的……
- A27E、F9FA 都會被轉換成 ╭
- A2A1、F9FB 都會被轉換成 ╮
- A2A2、F9FC 都會被轉換成╰
- A2A3、F9FD 都會被轉換成 ╯
- A2A4、F9F9 都會被轉換成 ═
- A2A5、F9E9 都會被轉換成 ╞
- A2A7、F9EB 都會被轉換成 ╡
- A2CC、A451 都會被轉換成 十
- A2CE、A4CA 都會被轉換成 卅
寫作動機
- 我想練習新學的 C# :)
- 平常就會備份我的個人版精華區。過去使用 bbs2hh 來轉，但 bbs2hh 畢竟是用來將精華區轉換成 HTML Help 用的，要從此再轉成我要的格式需要許多手動後續工作，作一次備份實在非常麻煩。
- 我非常需要轉換 Unicode 補完計畫中的新增字這項功能，因為我的板裡面實在用到太多這些字了。
附註
- 程式目錄下的
ansi.css 和 jquery.js 若被刪除或更名會發生問題。
ansi.css 可以自己修改成喜歡的樣式jquery.js 也可以自己更新 XD- 本程式也可以單純用來將 Big5 日文轉換為 Unicode ，使用「開啟檔案」將文字檔讀取進來後，從文字框中複製，再貼到其他地方即可。（其實 Firefox 也可以這樣用）
