HappyDesigner

快樂設計師第四次聚會紀實

2008-12-05T10:34:00.000-08:00

寫在文前的補充說明事項：已經有好幾段活動當天的錄影上線囉！錯過這次聚會的朋友可以到 http://vimeo.com/groups/6555 看看自己錯過了些什麼；我自己講的「你所不知道的網頁親和力十件事」則可以在 http://vimeo.com/groups/6555/videos/2359137 看到，中間有些地方因為攝影機沒電了，所以用投影片畫面串場——誰叫你不來現場，錯過了別怪義務幫忙攝影的人！

這一篇是我給自由軟體鑄造場電子報的稿件，刊登於第一百一十六期 (2008/11/23)。

快樂設計師第四次聚會紀實

國內的網頁設計社群「快樂設計師」於 11 月 15 日舉辦了第四次的聚會，長達四小時的聚會當中，照樣涵蓋了各種不同面向的「設計」議題，從非常技客導向的題目到十足人因的議程都有，因此 60 人的名額在短短三天內就已經額滿。

活動由網頁設計師兼歌手（或者是歌手兼網頁設計師？）小海 tzangms 帶來的個人無插電演唱會開場，小海戲稱這是「音樂設計」的實務展示，呼應快樂設計師的主題。事實上，小海的歌聲的確感動了不少與會的朋友，也讓場面熱絡起來。

在小海之後上台的是林長逸 Leo Lin，他是國內知名相片書印製網站 hypo 背後的網頁設計師，分享的內容即是他如何打造 2008 年的新版 hypo 網站。Leo Lin 認為一個網頁製作專案，通常會包含 Idea、Design、Coding 三個階段，Idea 指的是確認需求、規劃流程，Design 指的是繪製圖示、確定風格、版面配置，Coding 指的是將所有的部分製作成 HTML/CSS 圖樣，而他往往三個部分都要全包；因此，他根據過往製作網頁的經驗，整理出六項網頁製作案的心得：

先用紙張。討論網站企劃案的時候不要急著開電腦，尤其不要打開 Photoshop 或任何雛形製作工具，否則很容易花了時間做白工；先用紙張與客戶溝通，纔能事半功倍。
問需求不問方式。確認客戶的需求即可，不用詢問實作的方式，因為那祇會給設計帶來不必要的限制。
不要問美感相關問題。十個人有十一種美感，尤其在溝通初期，不要給自己添麻煩。
掌握進度。
簡化。好的設計不是給使用者五彩繽紛的選擇，而是要說一個好的故事；因此不論是介面或結構，都應該要盡量簡化。
嘗試新東西。

Leo Lin 並提出了三項訣竅：

1 pixel matters。一個像素的差異，常常左右著設計質感。
Use glyphs。Glyphs 是單色的小圖，在按鈕上適當添加這些單色小圖，可以讓設計更清楚。
Grid-based design。善用格線來設計，網頁會更整齊舒適。

接下來是由本次活動主辦人上官林傑 ericsk 介紹「機油」：Google App Engine Oil 設計框架。這個專案的發起動機，一方面是為了要更了解各項 Google App Engine 的設計與功能，另一方面則是要讓不熟悉 Google App Engine、BigTable 等技術的程式設計師，也能夠很快地從 Zend Framework 或 Rails 轉移。

目前的 GAEO 0.2 版將各種額外功能拆成外掛模組，並且支援將核心以 zip 壓縮等，讓核心盡可能縮小；另外還有一些 method 及 AJAX 補強等等。未來的 0.3 版開發方向，則是朝向 RESTful、行動設備自動判斷及支援、國際化、繪製引擎等不同方向，有志之士可以前往 http://blog.gaeo.org/ 一同參與。

除了介紹 GAEO 之外，Python 界的知名程式設計師 gasolin 也隨著上台，介紹了如何運用 GAEO 來製作 Facebook 及 funp 麻吉應用程式。

上半場的最後一個議程，是 deduce 介紹以 Rails 實作「成分分析機」的經驗，包括了各種資源的使用、贊助商的選擇等。deduce 認為驚人的流量來自於：

資料視覺化。用圓餅圖，尤其是搭配可愛手繪風字型的圓餅圖，讓成分分析機更能吸引使用者目光。
嵌入語法，讓分析結果能夠張貼到其他部落格等處，吸引大量讀者前來。
簡單，讓使用者樂於嘗試使用。
讓網友有發揮創意的空間，鼓勵網友交流彼此製作的分析機。

deduce 並且表示，他自己也很意外，為什麼這樣的服務，可以吸引到這麼多流量；在他的開發過程當中，他祇不過是先採用了日本網站提供的 API 來繪製圓餅圖，並且在 PTT 張貼了兩篇文章，就有這樣的結果，實在是始料未及。因此，deduce 做出了他的結論：如果你不試試看，就永遠不會知道結果如何。

下半場的第一個議程，則是由數位有聲書推展協會技術發展組副組長吳志超先生，實際示範 JAWS 螢幕朗讀軟體的使用情況。吳志超本人也是盲人，進行的是當天所有議程當中、最仰賴實際展示的一個，因此也發生了最多的狀況。

這個議程的第一個狀況是他花了較多時間說明，很晚纔進入實際展示的階段，結果 Windows 啟動了螢幕保護程式，還原後瀏覽器就當掉了，只好重新開機。由於進入螢幕保護程式時，Windows 與 JAWS 都不會有任何提示，而 IE 當掉時 JAWS 也跟著沒反應，所以這一連串的過程，如果沒有旁人協助，盲人是難以處理的。

最後實際展示的時間大約只有三分鐘，但是在這三分鐘內，許多朋友實際聆聽到資料表格唸起來是什麼樣子，並看到網頁內的標題、鏈結等，會如何被取用，算是相當難得的經驗。

下午的第二個議程，則是由筆者介紹了「你所不知道的親和力十件事」，按照「不知道」的程度倒序介紹：

10. alt 及 longdesc 屬性的使用
9. Flash 的親和力功能，及 Flash Video 的字幕支援：以 YouTube 為例
8. DRM 對親和力的危害
7. Opera Mini 模擬器
6. 投影機的親和力
5. 以電話客服代替網頁親和力設計的不可行
4. 創用 CC 的親和力設計與微格
3. 運用圖片以增進親和力
2. 料理東西軍帶來的親和力啟發
1. 《網頁親和力：網頁多媒體實務》贊助方案

最後兩個議程，首先由快樂設計師社群創辦人布丁 hlb 介紹網頁設計及規劃時，所會用到的文件。hlb 介紹的是其中三種文件：用來表達功能及佈局的示意圖 wireframe、用來表達視覺呈現的模型 mockup、網頁雛形 prototype。通常這三種文件的使用次序是先 wireframe 再 mockup 最後 prototype，不過 hlb 指出台灣多半祇有 mockup，國外某些網站如 37signals 的開發則是祇用 prototype，也有某些公司是從 wireframe 直接跳到 prototype。

hlb 並簡介了 Axure RP、Photoshop、balsamiq mockup、Paper Prototype、polypage 等多種不同的相關軟體／製作方式，對於許多平常祇接觸網頁程式開發的朋友，是個很難得的經驗。

最後一個議程則是由 othree 介紹 HTML 5 的最新發展。雖然這項規格預計要到 2022 年纔會成為推薦標準，但是已經陸續有一些瀏覽器開始實作了。othree 用來介紹 HTML 5 的投影片本身，即是以目前已實作的 HTML 5 來製作，「我到目前為止就是在 live demo」，相當具有震撼力。

全部議程結束後，本次聚會也隨著閃電演說畫上句點。如果你錯過了這次的活動，下次可別向隅囉。請隨時關注 irc.freenode.org 的 #HappyDesigner 頻道吧！

HappyDesigner第四次聚會

2008-10-25T00:26:00.000-07:00

更新：因為議程太豐富，所以改到六點囉。

春去秋來，我們終於又要辦聚會了......

第四次聚會的時間是11/15下午兩點到五點，地點在蛙咖啡。這次一樣有酌收費用，請蛙咖啡為我們提供茶點。

詳細資訊請見報名網站。

kerobot & 推薦閱讀

2008-04-20T05:39:00.000-07:00

我們的IRC聊天室(#happydesigner@freenode)有一隻常駐機器人，他的名字叫做kerobot。如果你告訴他一個網址，他就會紀錄到他的del.icio.us書籤，方便大家分享：

hlb> kerobot:
http://blog.vgod.tw/2008/04/19/%e9%87%8b%e6%94%be%e5%87%ba%e8%85%a6%e8%a3%a1%e7%9a%84%e9%9f%b3%e6%a8%82/ [tag:TED music]
kerobot> hlb: [Link Info] title: 釋放出腦裡的音樂 | vgod’s blog

昨天稍微修改了一下部落格的版面配置，順便就把kerobot的書籤列在右側了，希望大家會喜歡。

全面改用G社方案

2008-04-14T13:12:00.001-07:00

之前在IRC Channel上面討論過幾次，認為如果把部落格從WordPress搬到Blogger上，就「共同撰寫」而言應該很有幫助。

正好HappyDesigner.org的主機代管又要到期了，跟我合租的朋友們決定要改租另一台機器（其實是同一家主機代管商，只是比續租來得划算許多，這還真是個奇怪的行業）。不過每年都要搬家實在是很辛苦，所以我就趁這個機會，乾脆來把部落格就全搬到Blogger上了。

除此之外，我也把HappyDesigner首頁改用Google Pages，加上原本就有用的Google Host、辦聚會的時候用的Google Site，所以全部都改用G社方案啦！

有興趣一起寫部落格的朋友，請在IRC上告訴我，或是寄信跟我說吧。

HappyDesigner第三次聚會圓滿落幕

2008-03-30T12:40:00.000-07:00

第三次HappyDesigner聚會圓滿落幕，謝謝大家的共同參與。雖然這次活動有收費，但是講者陣容實在太厲害，所以來的人比前幾次都還要多呢。可惜身為主辦人太忙碌，沒有好好認識新朋友。

這次真的要非常感謝金牛頓，不但提供一個這麼棒的場地，而且也給我們非常多協助。實在是讓人覺得應該要常常辦活動才對。我想唯一的小缺點就是我們的筆記型電腦太多台，結果把無線網路基地台撐爆了吧。雖然金牛頓的工程師非常熱心，幫我們加裝了第二顆基地台，不過狀況還是沒有太大改善。

（所以AirPort Extreme網站上寫”Connect up to 50 users”顯然只是廣告詞……感覺上好像沒有up to 15 users耶……）

這次聚會最後還有大約新台幣七百元左右的盈餘。不過因為HappyDesigner不是法人組織，而且我並不認為「把這次活動的盈餘留作下次活動經費」是個合理的選擇。所以我會將餘款補貼給我們超棒的贊助商OPCafé（不但幫我們煮了一天的咖啡，還幫忙排了茶點、另外贊助了啤酒！）。

HappyDesigner Meetup No.3 活動紀錄

P.S. 請問有人有意願擔任HappyDesigner聚會台北區的主辦人嗎？請E-Mail與我聯絡。

HappyDesigner第三次聚會

2008-03-13T12:37:00.000-07:00

睽違一年多的時間，我們終於再度舉辦聚會了！

第三次聚會的時間是3/29青年節下午，在新竹市舉辦。聚會地點在3/1才剛開幕的Newton’s A蘋果電腦專賣店。這家店有很棒的會議廳可供租借使用。

因為這次地點有場地費，所以我們這次聚會有酌收場地費以及下午茶點費用。我們會請新竹RT蛋糕店準備茶點給大家享用。

主題

這次主題是“Template, Library, and Framework”，也就是「模板、函式庫與框架」。

目前我們仍然歡迎投稿，如果你有題目願意和大家分享，歡迎與hlb聯絡。

詳細資訊請見報名網站。

兩個Mac瀏覽器上的透明度問題

2007-01-27T12:35:00.000-08:00

最近遇到兩個和透明度（opacity）有關的問題。

一個是Firefox 2.0的Mac版本（不管是任何一種build），只要頁面上有任何一個可見元素有低於 1 的 opacity，整頁的文字都會變得相當細瘦。詳細的問題描述請參考這裡。根據討論，原因應該是出在Firefox在Mac上繪製兩種有透明度的文字時，是先繪至在一張bitmap buffer裡。而OS X並不支援在bitmap buffer裡的subpixel rendering（雖然有anti-aliasing；事實上，iTerm的文字看起來和一般OS X應用程式不同，問題也出在這裡）。

另一個則是神秘的Safari問題。如果你的頁面上有加上了透明度的overlay，只要元素一多，Safari的頁面載入速度、tab切換速度，以及例如使用Scriptaculous的sortable時的反應，就會變得無比慢。一開始以為這是Scriptaculous的錯，沒想到只要把opacity拿掉，Safari突然就回神了。

測試網頁可參考慢板跟快板。差別只在overlay是否有opacity。建議並列兩個tab來切換，感覺就更明顯。不，使用MBP並沒有幫助，更不用說iBook/PowerBook使用者了。

WebKit無此現象。Firefox當然沒有。

by lukhnos

Yullio: YUI CSS Grids 與 Mollio 的結合

2006-12-26T12:33:00.000-08:00

Update: hlb 準備了原始檔和範本。

hlb根據YUI Grids與Mollio CSS/HTML Templates，製作了一套名為 “Yullio” 的模版（Yullio = YUI + Mollio）。原來 Mollio 已經有不錯的佈景主題與版面配置（type-a 到 type-f 六種）。我們把 Mollio 的版面配置部份抽掉，改用 YUI Grids 來處理，這樣做有幾個好處：

YUI Grids 提供至少三種頁面寬度設定，增加彈性
YUI 的二欄式設計較為靈活
YUI 二欄式的主欄，裡面還可以再切分為各子欄位

Yullio的原始檔和範本可從這裡瀏覽和取得。

對於 Rails 的開發者來說，我們還製作了一個名為 Yullio Layout Generator 的產生器，現已發表到 RubyForge 上。取得及安裝方法非常簡單：

  gem install layout_yullio_generator

然後針對你要生 layout 的 controller，例如 Expense ，下達以下指令：

  script/generate layout_yullio Expense sidebar

此時你的 app/views/layout 目錄下會增加一個名為 expense.rhtml 的版面，而 app/views/expense 下方則會多一個名為 _sidebar.rhtml 的部份頁面檔（partial）。同時這個產生器還會將相關需要的 CSS、JavaScript 及 plug-in 拷進你的 public/ 及 vendor/plugins/ 目錄下。

重新載入你的 Rails app ，然後叫出 Expense 相關的頁面，你會發現已經套上了 Yullio layout。

要更改 layout 的方法很簡單，在你的 Expense controller 下，增加下面兩行：

  class ExpenseControler < ApplicationController
   ...
   yullio_page_width :doc2
   yullio_column_template :yui_t2

yullio_page_width 後面的參數，目前有 :doc, :doc2, :doc3 三種，分別對應至 YUI 的 #doc, #doc2, #doc3 ，至於 yullio_column_template 後面的參數，則為 :yui_t1 至 :yui_t7 ，分別對應至 .yui-t1 至 .yui-t7 等七種版面（由於 Ruby 的 symbol 不能用 dash ，因此改代換以底線）。

在程式碼更改後，版面也就隨之改變。需注意的是，如果你還需要主欄位內的分欄版面，得自己去填入 .yui-g 相關 HTML 程式碼。

進一步的使用說明，可參考本產生器的說明文件：

  script/generate layout_yullio

可使用的版面，則可以參考 Yahoo! UI Grids CSS 文件。佈景主題的各種用法，則可以參考 Mollio。

Yullio Layout Generator 是使用 BSD 授權公開發表的軟體套件，由 hlb 和 lukhnos 製作。YUI Grids 及 Mollio 的授權，請參考其各自的網頁。

註：感謝 Forth 提供 Ruby plug-in 撰寫指引。;)

by lukhnos

HTML 的未來，需要你的意見

2006-11-24T12:31:00.000-08:00

說說你對HTML未來的看法吧

2006年11月7日，Molly E. Holzschlag著。

（原文刊載於WaSP網站，“Have Your Say about the Future of HTML”。中文版由HappyDesigner團隊完成。）

本文是應網頁超文本技術工作小組(Web Hypertext Application Technology Working Group, WHATWG)邀請而撰寫，並且同時發表在The Web Standards Project、Lachy’s Log、Molly.com和456 Berea Street。

W3C 在日前決定要繼續進行 HTML 的開發工作。針對這項決議，網路上已經有不少討論。部落格的文章，以及郵件論壇、討論區的訊息，顯示大家對於 HTML 的未來（包括 HTML 5 與 XHTML 2），還有 WHATWG 跟 W3C 的新 HTML 工作群組，有不少的疑惑與誤解。

一些人問及新的功能，有些人好奇之前被認為不再合宜的元素能否敗部復活，另外也有人針對WHATWG、W3C的行動或決策本身表達意見與批評，還有少數人對於WHATWG與W3C忽略特殊團體需求的情況表示關注。WHATWG目前正在開發下一版的HTML（稱為HTML 5），我們認為不但要聽取建言，還要主動徵求意見並加以回應，如此方可發展出符合眾人需求的語言。

我們提供許多參與管道。最直接的方法是訂閱郵件論壇，這樣確保我們聽得到您的意見。然而，並非所有人都有時間參與，或追上論壇裡密集的討論。有些人覺得目前的HTML 5草案（網頁應用程式與網頁表單）令人退避三舍。其他人則認為，他們既然無力負擔W3C的基本會員費，自然也不會有人注意到他們的意見。

即便您為了什麼原因，而認為自己不能或不便參與，您的意見依然寶貴。WHATWG需要您的意見，而且想要知道您對HTML的想法。

您認為 HTML 有什麼侷限應該修正？
您希望新增哪些功能？
有什麼是現在就可以用 HTML 做到，但有改進空間的？
您對標準發展過程有疑慮嗎？
您對 HTML 5 有什麼疑問？

歡迎提出各種問題、意見，乃至批評、牢騷，抑或是功能需求。發言就趁現在。意見無高下之分，問題無深淺之別，批評但請直言。只要您有話想說，我們都樂意傾聽。

請在此留言，或是在您撰寫的文章加個連結。我們會聽到您的建言，並且試著回應。

HappyDesigner第二次聚會結束

2006-10-02T12:30:00.000-07:00

這次聚會，我們選在新竹縣竹東鎮，一家尚未正式開張，可是飲料超讚的opcafé。結果有點出乎意料，總共來了18位HappyDesigner（我們原本預期最多只有10~15人呢）。大部份成員其實上次就見過面了，而且也都長期在IRC聊天室出沒，所以這次其實挺有朋友們閒話家常的味道。這次也出現了幾位新面孔，真是可喜可賀，可喜可賀！

雖然說是閒話家常，我們還是請到far、 gugod、 ijliao、 Jedi、 jiiing、 lukhnos、 qing、 tcc、 zonble做了精彩 & 有趣的分享。qing大哥還特地做了投影片，真是不好意思。

（我覺得阿，這場聚會最不圓滿的地方，就是hlb腦袋裡只剩下結婚相關事宜，所以主持得非常糟糕，還好有lukhnos & gugod救援得宜，真是心中無盡感謝 :p）

HappyDesigner第二次聚會

2006-09-26T12:29:00.000-07:00

經過四個月後，HappyDesigner終於又要辦聚會啦。我們這次的主題是Getting Things Done，討論怎麼妥善規劃時間，把事情都做完（也許有人會分享事情都做不完的失敗案例？）。目前已經有13個人報名囉

（照慣例，除了主題外，我們也歡迎岔題內容。）

主題: GTD ( Getting Things Done )
時間: 2006/10/1 PM 2:00 - 5:30
地點: 竹東鎮 opcafé。
參加費用: opcafé 基本消費 $100，任選一杯飲料，附贈三粒新竹名產(?)一家親包子。
報名方式: 請寄信到hlbyichi@gmail.com。你可以隨信附上手機與姓名，以方便聯絡。

交通資訊：

urMap
國光號有台北 - 竹東線
許多會員提供台北 - 竹東 & 竹北 - 竹東便車服務。你可以搭乘豪泰客運竹北線，過縣政府站後，看見家樂福即可下車。接著呢……請打電話給 hlb…… :p

被Google Video折騰兩個禮拜！

2006-06-14T12:29:00.000-07:00

這兩個禮拜來都在搞這個東西，有誰像我那麼有耐性或是無聊啊…

因為看了Idea Grapes的這篇文章：

Google Video開放審核機制，影片上傳完畢即可觀看

所以才想說乾脆把公司要在網路上播放的影片都倒到Google Video去好了。一來都用Google頻寬，不用折騰公司小小的ADSL；二來嵌入Google的商標，也比較有氣派（單純是自己品牌迷思…）

不過一開始發現Google Video還是要審核啊，只要是透過Google Video Uploader上傳的，通通都需要審核。

好吧，審核沒關係，我就乖乖等一天好了，但是發現審核的標準很奇怪，同樣都是訪問的影片，自己拍攝沒有版權問題，但是有些影片通過、有些影片被拒絕了，真是奇怪。

Google Video的說明是說，傳的檔案愈大愈好，像是DV-AVI格式720×480更好，它們會自己壓縮。可是不管我傳多大的檔上去，還是被壓成小畫面…傳大檔案要好久說…花一天時間傳檔，然後隔天被Google通知拒絕，感到挫折感很深..

我把被拒絕的影片改個檔名上傳，有的就通過，有的還是拒絕，Google審核的標準到底是怎樣啊，真是個謎…

現在Google Video首頁擺上了「New! See your own videos on Google Video.Share it with others instantly.」字樣，點選下去一看，唉呦，又回到了網頁上傳檔案的方式，不再強迫所有用戶都要用Google Video Uploader上傳了。

馬上再接再厲上傳個25MB WMV檔，喔喔喔，的確上傳完馬上就可以看到影片了，終於免審核！

所以這個問題的答案就是：「Google Video真的是beta到底，隨時都在改，用戶要適應。」

就這樣。

用網頁上傳檔案的壞處是完全看不到上傳進度，也要小心網頁誤關或是因為其他網頁開太多一起把瀏覽器當掉的危險。

另外我不想用YouTube的原因除了迷戀Google品牌以外，我發現把YouTube影片在網頁時，第一個畫面一定是那個標準的play三角形，不是清楚的影片起始畫面。如果我想想嵌在首頁的話，老實說不甚美觀，應該像Google Video一樣，自動顯示影片的第一個畫面，這樣我就可以設計符合該網頁的影片片頭，整合起來比較不突兀。

不過因為現在屢傳屢敗，開始要考慮自己壓成Flash格式算了…唉..我的Google Video啊…

by jehuen

HyperCard 世界盃賽程表

2006-06-11T12:28:00.000-07:00

上次在 HappyDesigner 聚會中，用了 HyperCard 2.2 做了一個高橋流的投影片，似乎讓很多人印象深刻，而印象深刻的原因，不外乎是因為讓大家重溫了十五年前 Mac OS 7.0 的經典黑白畫面，以及 HyperCard 這套軟體本身就算是經典，也或許是很多人根本從來就沒有看過…照 b6s 的說法，這是當大家努力在以最新科技尋找各種呈現可能時的逆向思考。

不過，雖然蘋果電腦本身已經停止了 HyperCard 的開發，從大概 1995 年左右就沒有任何新的進展，到了前兩年更是正式下架，連想要購買一套這樣的舊軟體都沒有機會，但是， HyperCard 其實並沒有因此死亡，網路上的 HyperCard 社群仍然是相當活躍，例如最近，來自巴西的 Haroldo Mauro，就以 HyperCard 2.4，做了一套 2006 年世界盃足球賽的賽程表，可以供使用者自行紀錄每一場賽事的比數：

HyperCard 2006 世界盃賽程表

當然，如果您要執行這一份賽程表，您還是需要一台安裝 Mac OS 9 之前作業系統的麥金塔電腦，或是在 Mac OS X 下安裝 Classic 作業環境。

by zonble

簡報與錄影檔分享

2006-05-23T12:27:00.000-07:00

Gugod上次聚會有提到，YAPC::Asia 2006許多講者都用高橋流簡報法。他們把錄影檔上傳到Internet Archive網站，有興趣的朋友可以看看。其中Masayoshi Takahashi（對，就是這位高橋桑）的錄影檔當然一定不可錯過啦！另外你應該也會想看看這份高橋桑用高橋流介紹高橋流的簡報（天阿，真是繞口令！）

另外，今天我們聊到「面對群眾講話是人類十大恐懼之首」，Jedi提到了陶敏修的建議：「找個朋友，或和善的臉，或章魚。」(MJD，如果你不認識他，可以看看這篇介紹)陶敏修的簡報也有線上投影片與影片檔（217MB，值得一看）。

看來JaveTwo 2006也很令人期待。

HTML & CSS Tidy

2006-05-17T12:26:00.000-07:00

你的親朋好友們都曉得，你是一個技巧高超的網頁設計師。於是有一天，你的朋友交給你一份網頁檔案，希望你能抽空幫他改一下。你隨口答應下來後（當然要順便凹頓大餐），打開檔案一看，才發現這居然是Word或FrontPage產生出來的噁心網頁，充滿許多亂七八糟的語法。

你該怎麼辦？把檔案扔進垃圾桶，自己重新寫一個嗎？

這時候，一個聰明的網頁設計師會拿出法寶：HTML Tidy，Jedi稱他為HTML美容程式。無論是多麼亂糟糟的HTML語法，扔進美容程式後，都會變成乾乾淨淨的HTML。你不但可以指定各種形式（HTML、XHTML、 XML），也可以輸出成你慣用的原始碼排版方式。更棒的是，它還有個非常貼心的功能，可以幫你輕鬆料理Word產生出來的HTML語法。喔，你知道連 Firefox瀏覽器都有一套使用HTML Tidy的擴充套件嗎？

有HTML Tidy，當然也要有CSS Tidy。CSSTidy有命令列程式與PHP線上程式兩種版本。想玩玩看嗎？有人用CSSTidy做了一個Clean CSS服務，最近十分熱門喔。

快去摸熟HTML Tidy跟CSSTidy，當個快樂的網頁設計師吧～

對北京CSSer聚會的一點補充

2006-05-12T12:24:00.000-07:00

整理log時，發現對Ajie的提案漏了一點。Ajie的提議是要成立交流沙龍、定期舉辦活動，並且看看能否促成一個類似人才庫的資源，並提供網頁標準相關的諮詢服務（可以有個類似義工或顧問名單這樣的東西）。

by lukhnos

三點不露的網頁軟體開發日誌

2006-05-11T12:22:00.000-07:00

你想知道別人如何設計網頁軟體嗎？現在有個機會。

Carson Systems決定把他們開發新網頁軟體的流程，全部用部落格的形式記錄下來，包括他們如何規劃產品、開了多少預算、找誰當UI設計師、參考哪些範例等等。他們唯一不跟你講的，是這個網頁軟體到底要做些什麼。這個網站叫做Bare Naked App。

他們從二月就開始寫了，所以也許你會想從頭讀起 :)

第一次聚會錄影片段

2006-05-10T12:21:00.000-07:00

各影片之著作權屬各簡報之講者所有，下載前請先閱讀授權條款。這個列表採用主題式編排，沒有完全按照時間先後順序：

自我介紹（影片）
高橋流(Takahashi Method)與相關工具介紹
1. gugod介紹Takahashi Method（影片）
2. gugod介紹Takahashi書（影片）
3. jeremy介紹Flash投影片製作方式（影片）
4. tkirby介紹新版TKSlide（影片）
5. zonble介紹HyperCard（影片、zonble加上字幕的修改版）
6. ingy介紹Sporx（影片）
自由工作者心得分享
1. gugod場（影片）
2. lukhnos場（影片）
3. momizi場（影片）
Jedi介紹WCAG 2.0（影片）
個人分享
1. b6s（影片）
2. mindos（影片）
3. tcc（影片）
4. toung（影片）
5. vgod（影片）
6. othree（影片）
7. wanpeebaw（影片）
8. PipperL（影片）
9. priv（影片）
10. ihower（影片）
廣告時段：pesty介紹Findbook（影片）

alt, title, and longdesc in img

2006-05-08T12:20:00.000-07:00

SYNOPSIS:

<img src="Answer_to_Life.png" alt="42" title="宇宙的終極解答"
longdesc="http://en.wikipedia.org/wiki/42_Puzzle" />

by Jedi

OpenSource Web Design

2006-05-08T12:19:00.000-07:00

「設計網頁時缺少靈感嗎？

摘錄別人的設計時感到良心不安嗎？

現在就到OpenSource Web Design ，我們有著最好的授權，最多的式樣！

前五名加入的會員我們有優惠…

老人家久咳，囡子暗時會哭攏有效…」

(咳)

前些日子我在修改網頁配色，cobain學長告訴我有這個網站，我便找來看。看完之後發現自己人緣變好了，腦筋變聰明了，考試都考一百分。這改變並非一夜之間，但它真的發生了。

(咳咳)

我想我最近花了太多的時間待在zonble的網誌裡了。

事實上我沒有使用網站裡提供的樣式，但我認為無論是配色，版面、或是CSS的寫法上，都有值得觀摩的地方。它裡頭的統計排行能告訴妳，誰提供了最多的開放設計，那一種設計又被最多人下載。你也可以隨意的瀏覽，尋找自己心中覺得最適合的樣式。但我沒有找到比較正式的使用宣告，因此直接套用時要留心。

照慣例，我又要提起中文設計的問題。在使用中文的網頁中，因為中文顯示出來的樣子、與英文字型的搭配顯示、或是難以確定使用者擁有那些字型的現象，讓這些設計樣式多多少少需要因此修改。

舉例而言，一個寬線條的英文字型，每一筆劃都佔有一定的寬度，於是字的顏色與底色就能夠以色彩事典中的色塊對比來處理。但改成中文字型後，線條變得較細，原來的對比效果就因此消失。

再進一步而言，我們自己的文化應該也能夠孕育出自己的特色才對。

解決之道就是我們自己來推動中文的開放設計網站。這就要期待諸君的活躍與表現了。

by mindos

HappyDesigner第一次聚會結束

2006-05-07T12:18:00.000-07:00

謝謝大家熱情參與（喔，尤其是全員到齊的OpenVanilla開發團隊），我們第一次聚會順利地結束。要特別謝謝gugod、lukhnos、momizi分享自由工作者的心得，強者Jeremy展示用Flash做簡報是多麼輕鬆愉快，Jedi對WCAG 2.0清楚的介紹，以及Ingy實際示範Sporx。每個人做投影片的方式都很有趣，從常見的takahashi.xul、Apple Keynote、Microsoft PowerPoint，到「小畫家配圖片預覽程式」、「UNIX指令列配PERL程式」等等。zonble甚至連HyperCard都搬出來了……有圖有真相。

這次聚會有錄影，不過轉檔需要時間（加上我是新手上路啊），所以還請大家耐心等候。有些朋友已經把活動照片放上Flickr了，有興趣的朋友可以瀏覽一番。

大會報導: 額滿

2006-05-04T12:17:00.000-07:00

到目前為止，我們已經收到二十來位朋友的報名。不過因為場地的空間有限，再接受報名的話，大概就有人要沒位置坐了（有人要自備好折凳嗎？）。所以報名就此截止囉，謝謝大家支持。

好期待這個週末 :)

大會報導: 你想當自由工作者嗎

2006-05-03T12:15:00.000-07:00

參加這次聚會的朋友裡頭，有不少是自由工作者（或曾經是自由工作者）。如果請他們分享這方面的經驗，相信大家都能有些收穫。前天晚上我在聊天室問了有搞笑藝人稱號的gugod，他願意做一些經驗分享，所以大家就有好東西聽了！另外lukhnos、momizi等朋友也有參加，別忘了請他們多分享點心得唷。

人人都可以是英雄

2006-05-02T12:13:00.000-07:00

前幾天Hayato給了我這個連結，我覺得很有趣，就把名字換了放在這邊，也帶有誌慶的意味：

http://HappyDesigner.youaremighty.com/

這個網站有趣的地方是，它會把URL最前面的那個字放到Flash裡面顯示出來。更有趣的是，它的贊助公司是英國一家找工作的網站。我很快的就把它貼到bbs上，用控制碼把前面的HappyDesigner換成該篇讀者的ID。這樣一來，人人都可以是英雄了。

不過思及中文化，就會覺得很麻煩，也讓原來設計的巧思有點失去味道。

配合著恰到好處的音樂，偶爾激勵一下自己或朋友也別有風味 :)

by mindos

參加了在北京舉行的CSSer第一次聚會

2006-04-30T12:12:00.000-07:00

4/28（星期五）晚間參加了由jjgod、x5等CSSer.org的朋友所舉辦的CSSer第一次聚會，當天同時也代表了HappyDesigner駐北京辦事處（笑）的成立，我則是當然的首任「駐京辦」啦。

那天聚會的主角之一是Zeldman Designing with Web Standard一書簡體中文版的譯者Ajie，他在會上提議今後定期舉辦這樣的沙龍、並且建立一個Web標準設計者的資源和人才庫。

在此簡單先記一筆，稍後來做更詳細的介紹。

by lukhnos