drupal
Drupal Modules 這個網站的原作者 John Forsythe 在他的網站上頭寫了一篇How I Survived a 2300% Traffic Increase With Drupal，裏頭提到：他在他網站，寫了一篇有關 Drupal 的文章，因為被放到 Reddit 的首頁（性質就像 funP 或 HEMiDEMi 的網站），於是那幾天的流量，直接增加了 2x 倍。
他言簡意賅地，以條列式的方式舉出了五點，如何讓你的 Drupal 可以撐過這類的災難（撐過災難，你的網站就離大紅大紫又更近一步了）。其中，只要做到前兩點，就可以有某種程度上的改善。我在這邊做個簡單的翻譯，有興趣的人可以看他的原文。
開啟 CSS Aggregation 開啟 Page Caching 關掉那些花費不少資源的 block 讓你的圖檔盡量地小 使用一個靠得住的網站空間提供商（web hosting） 開啟 CSS Aggregation Drupal 的成功因素之一，來自於它廣大的社群與豐富的模組，但這也間接造就了大量的 CSS。如果你建置了一個使用 40 個模組的 Drupal 網站，裏頭，可能會有 20 個模組有各自的 CSS 檔，加上 Drupal 與 theme 原有的…也就是說，對於一位來逛你網站的人，他（她）至少得下載 20 多個 CSS 檔才有辦法看到完整你的網站。
這 20 多個 CSS 檔的下載，會讓瀏覽你網站的人，因此得多等待個幾秒，然後呢，如果遇像上流量大的時候，說不定還因此讓你網站的機器掛了!! 很幸運地，有個簡易的解法：CSS Aggregation。從 Drupal 5 開始，Drupal 有個功能，它可以把幾乎所有的 CSS 檔合成一個，這樣一來，來瀏覽網站的人，就只要下載一次，節省了還蠻可觀的時間。
去年的年初（2007），我接了個 cirque 的案子，從小胖手中拿到設計，到切圖，設定寫程式有的沒的，最後雖然完成了，卻因為沒有處理好半透明圖的問題而小帶遺憾。同樣是在去年，時間改到夏天，與朝富合作，完成了行無礙網站 on Drupal，首頁上的 logo 也是處理了一陣子，最後透過 PNG in Windows IE 裏提到的方法解決了。
最近，我發現到一個很棒的模組：PNG Fix，它是一個 jQuery 的一個 plugin，使用它可以很輕易地解決掉 png 在既舊且笨的 IE 上頭的問題!!!（可以在 wikipedia 上頭介紹 PNG 的文章最後，看到一個 Internet Explorer incompatibility 的章節）
OK, 重要的事已經分享完了，而我也已經在這個網站上安裝了 PNG Fix，對於那些依舊是使用 IE 6.5 以前版本的造訪者，我已經可以，完全無後顧之憂地大量使用有半透明特性的 png 了，真棒。下頭，是一些與 PNG 有關的小故事，我覺得有趣的小故事…
PNG 的出現，可以說是 GIF 一手造成的。這說法很有趣也很怪，居然一個沒有生命的檔案格式，可以影響到另一個檔案格式的誕生!! 這是我想聊的第一個小故事。
GIF（Graphics Interchange Format，非常有魄力的全名） 是在 1987 年，由美國公司 CompuServe 發展出來的，然後接著 GIF 就因為搭上了 WWW 順風車，一路紅翻天，讓全世界一大票人都曉得有這麼一個東西（這感覺就像，全台灣人幾乎都知道有個叫大家電鍋的東西一樣地讓人興奮）。GIF 對一般人來說，就是它有透明色的支援，以及它可以是一段動畫，就這麼簡單。
有趣的是，GIF 使用到的一種壓縮技術：LZW，它的專利權握在另一家叫 Unisys 的公司上頭，但 CompuServe 在設計 GIF 時，並沒有想到這一點。隨著 GIF 的流行， Unisys 意識到要對於他們的專利做某種程度上的保護（也可以說是商業行為上的利益保護），於是有了一些公文發佈、行動…等，意思約略是「有使用到 LZW 這個技術的 GIF，如果你的網站有使用到，我們就有機會要求索取一定額度的權利金…」然後呢，全世界有一些人就瘋了（不過我猜裏頭很少有台灣人，因為我們對於專利這東西的敏感度似乎在當時還非常的低）…
為了回應 Jimmy, 阿翔, kid814 等人，同時也想試著寫個 Drupal 的模組來練習一下，於是有了這個 Thumbview Field 的模組誕生了~
幾個月前，我寫了篇「Drupal：許每篇文章一張圖」，目的在做出 Cool Hunting 網站上的視覺效果來，使用了 Computed Field 這個模組，搭配 htmlparser 來抓出每篇文章的第一張圖，然後再使用 Views 與 Imagecache 來秀圖。過程非常的複雜，容易出錯。幾個月後，有了這個模組，目的是在簡化整個過程…
接下來的全文，會有非常多的圖，請有心理準備。
捎來一封信，信的內容只有一句話「Drake，有興趣嗎?」
信裏頭的轉錄內容，是來自一位 2007 台灣網誌運動會上，坐輪椅的朝富，他有個網站，自行使用 Drupal 來架設的（我猜一定是受了 Charles 的推薦的。Charles 嚴然是台灣 Drupal 社群的重要推手了），經過一陣子的調整與使用後，朝富決定延攬有 Drupal 架設與開發經驗的人來共襄盛舉，讓這個網站的開發可以更快速且多元些。
因為朝富他讓我見識到，原來人可以這麼地積極與活躍，活像個小太陽似的（這也許是為什麼他在網路上的 id 叫 sunboy），就連他帶來的行無礙生活網也是如此。於是，我決定投入這個合作案：這個使用 Drupal 來打造一個社群網站的合作案。
上頭這一張縮圖，是經過數次的討論與腦力激盪，得出來的網站設計稿。整個設計的概念由朝富、Naomi 和我三人共同討論，由 Naomi 使用 Illustrator 操刀完成的。朝富在設計這個網站時，想法非常的 open，想把很多現行的 web 2.0 的一些觀念與特色都作進來，像是 blog, wiki, trackback, gallery, news aggregating, gallery, single sign-on, …。老實說，一開始我是有被他想作的東西的量嚇到了，因為工作的時間不長，大約只有一個月，還好後來我們有決定出個優先順序來。
旁邊這張圖是他那時開出來的規格表。
網站的 layout 是三欄式網站。有別於一般網站，主要欄位被放到左側，而較次要的兩欄都在右側，所以如果從左側數過來的話，就是：main column, right column1, right column2。同時右側上頭還有個跨兩欄的「熱門活動」。這個網站設計有如下的幾個重點：
要讓網站以「社群網站」或「入口網站」的型式（community site or portal site）呈現，而不是像幾位寫手組成的共筆部落格那樣。同時，又不能像「新聞網站」（news portal，ex, udn）那樣地擁擠（我喜歡用文字牆來形容這類的網站），要乾乾淨淨地，有質感。 首頁上頭有個行無礙影像誌聯播，是個由智邦所提供的相簿服務，得用些方法把它撈出來好和 Drupal 作整合。 專欄作家是個重點，要把他（她）與其它文本給區隔開來。 最右側的四色區塊，他們的標題欄在區塊的最下頭。這一點和「一般標題都會在區塊的一開頭」的作法有點不同。 使用 Google Maps 把行無礙店家資訊整合進網站裏頭。 指標性參考網站是苦勞網。 四色區塊的標題位置 以上頭的這張圖來看，左邊是一般的區塊顯示的樣子，右邊是我們想要的結果，最大的差別在於標題的位置。左邊的區塊的標題是「最近瀏覽」，右邊的標題則是「身心障礙BLOG」，右邊的標題從最上頭跑到最下頭了。
舉個例子，一個區塊的 html 碼：
在找「永春二手市集」的資料時，發現了這個「妳的視界」的網站，它是個用 Drupal 作的網站 :)
它的首頁，使用了 Panels 這個模組，然後 Panels 裏的每個 page 是 taxonomy view 的樣子。不過它輸出的 html 怪怪的，會出現兩次 <html> tag @@
的某個頁面，它讓每一篇文章都成了一小張圖，然後整整齊齊地擺出來，整個就是好看。於是乎，逛 Cool Hunting 時，不再是依照每一篇文章的標題或是文章摘要（teaser）來決定要不要點進去看，而是這篇文章的小圖有沒有引起你的注意。
圖像化文章列表（photolized list of articles） – 給它一個命名。
隨後想說，既然 Drupal 這麼強大，應該有辦法弄一個類似的功能出來的吧。著手研究了一下當時（寫出這個功能時，應該是 2007 年的夏天）的模組，並沒有找到類似功能的，有點接近的，可能就屬 Teaser Images （@drupaltaiwan）了吧。但是 Teaser Images 只能處理放在本機上的圖片，並無法處理外連的圖片，而且如果圖片是出現在全文裏頭，而不是文章摘要的話，就沒用了…
更新：嘗試寫了一個模組，所以作法變得簡單一些些了：我的第一個 Drupal 模組：Thumbview Field。不過如果你想知道我一開始是怎麼想的，那請繼續閱讀下去，不然，就直接跳到這吧。
好吧，自己用湊的方式寫一個好了，下頭是約略的想法：
假設每一篇文章都可能有一張圖在裏頭，但也只是可能，而且這一張圖片可以是放在別處，像是 Flickr 或是 Zooomr 之類的地方。 文章發表時，如果這篇文章裏有圖片連結（ <img src=…），會自動抓出第一個圖片的網址出來，然後存起來留到需要的時候再用。 使用 Views 產生一個 block，亂數選出一些文章來。 使用 Imagecache ，再配合之前存下來的圖片網址，自己寫一個 theme function，以小圖來代替這一篇文章，秀出來。 接下來，就是落實的部分了。為了達到上頭的想法，得再明確一點想出一套程式作法來，這樣才好動工，於是又有了下頭這個作法列表：
把目標鎖定在 blog 這個類型的文章（老實說，這個網站也只有這個類型的文章吧…）。 使用 Computed Field 這個模組，這樣就可以在每新增或是修改一篇 blog 時，會去執行一次 Computed Field 裏的 php 程式碼，然後就可以利用它，動態地抓出第一張圖片的網址並且存起來。作法是，新增一個 field，然後把它加到 blog 這個文章類型裏，名字的話，就叫 first_image_url 吧。 然後使用 HTML Parser 這個 php library，抓出 <img src="….
在看了 Lullabot 上的 Drupal Podcast No. 40: Top 40 Projects 與 Leancode 上的 Top Drupal Modules 後，想說，也來效法一下，弄個在 Drupal Taiwan 的模組清單，供大家有閒無閒，就推一下自己愛的模組，順道看看大眾的推薦結果又是怎麼樣的，然後從中發現自己沒有用過，但人氣似乎很高的模組…應該很有趣的吧。
這是我仿效 Leancode 網站上的作法，一樣是到隸屬於 amazon 集團的 UnSpun 上頭，開了一個 list 出來，叫 Top Drupal Modules in Drupal Taiwan 的清單來。使用的方法如下：
如果你想推薦清單裏頭現在的任何一個模組，直接按它前頭的「上」或「下」箭頭，「上」代表推薦，「下」應該就是噓它吧。 如果你覺得很讚的模組沒上榜，那就直接點選清單上頭的那一排 Top Drupal Modules in Drupal Taiwan，或是點選這個聯結，然後在網頁的最下頭找到 Add a new item to this list，在裏頭輸入你想要新增的模組名就行了。（不過呢，其實沒那麼簡單，它會要求你要註冊個帳號，然後要回覆一下確認信什麼的，手續有點麻煩，但只要麻煩一次就是了…） 如果你已經在 UnSpun 上註冊了，你可以幫個忙，每個模組下方有個 add a link，請幫它加上這個模組的官方網址，方便大家瀏覽時，方便取用。（ex, 在 Gallery 這個模組，加上 http://drupal.org/project/gallery ）。
cirque 是一個外接的網站案子，我使用了 Drupal 把它實作出來。
它是個 e-commerce 網站，但卻沒有購物車等買賣功能，有的只是賣的飾品的圖片與品牌介紹、友好網站和一些新聞，再來就是一般網站都會有的 About Us、Contact Us、版權宣告等之類的。換句話說，這是一個在網站的功能上，沒有什麼很特別的地方的一個網站。
因為整個網站的重點在於版型的設計與呈現，所以美術設計部分，由林小胖（Edward）負責，而我則是版型的套用與模組調校。整個網站都是使用 HTML + CSS + Javascript 完成，沒有任何 Flash 的影子。下頭是幾頁比較重要的設計：
由左至右，依序是：首頁（Frontpage）、品牌頁（Brand or Collection）、新聞頁（News）和一般頁面（About Us, Contact Us, …）。
內容類型（Content Types）： 一般性內容（Normal）：不需要什麼特別的調整，直接輸出即可。 飾品（Product）：飾品會有的資訊，就只是一張圖而已，所以其實可以使用 Image Node 來表示，但這邊我使用了 Imagefield 和 Imagecache 來實作，主要是因為 Imagecache 可以根據設定的不同，很快地產生不同大小的縮圖。 商店聯結（Link）：作法和飾品類似。 新聞（News）：把新聞特別獨立出來，是為了讓它有不一樣的呈現方式。 品牌（Brand）：這其實不是一個內容類型，而是一個分類（Category or Taxonomy）類型。同時，我使用了 Taxonomy Image 讓每一個類別可以有一張預設的圖片。 首頁
在整個網頁撰寫中，首頁算是比較費功夫，也比較多樣化的一個。首先，你不會在首頁上頭看到所謂的「最新的一篇文章或一個商品」，性質很接近的，也只有新聞這一欄（1），至於品牌（3）與友好商家（4）的內容是亂數出現，然後 About Us 與 Contact 則各是一篇 node。這有別於其它內頁的整個設計，為此，我給整個首頁一個獨立的 page-frontpage.tpl.php 和相對應的 css 檔，而它唯一和內頁相似的，就只有最上頭那個用手寫的 Cirque logo 及最下頭的版權聲明等。
在這邊，我把整個首頁分成兩大塊區域（region），然後把 News 與 About Us 放在一起，而 Collection, Shops 與 Contact 則是另一個，這樣做的目的，是要讓整個畫面看起來比較整齊，不會因為 News 與 About Us 的高度不同而破壞了整個畫面的平衡感。至於怎麼讓這 5 個區塊（block）都到位，那就是 css 的事了。
