HappyDesigner

寫在文前的補充說明事項：已經有好幾段活動當天的錄影上線囉！錯過這次聚會的朋友可以到 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 matter...

更新：因為議程太豐富，所以改到六點囉。 春去秋來，我們終於又要辦聚會了...... 第四次聚會的時間是11/15下午兩點到五點，地點在 蛙咖啡 。這次一樣有酌收費用，請蛙咖啡為我們提供茶點。 詳細資訊請見 報名網站 。

我們的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的書籤列在右側了，希望大家會喜歡。

之前在IRC Channel上面討論過幾次，認為如果把部落格從WordPress搬到Blogger上，就「共同撰寫」而言應該很有幫助。 正好HappyDesigner.org的主機代管又要到期了，跟我合租的朋友們決定要改租另一台機器（其實是同一家主機代管商，只是比續租來得划算許多，這還真是個奇怪的行業）。不過每年都要搬家實在是很辛苦，所以我就趁這個機會，乾脆來把部落格就全搬到Blogger上了。 除此之外，我也 把HappyDesigner首頁改用Google Pages ，加上 原本就有用的Google Host 、 辦聚會的時候用的Google Site ，所以全部都改用G社方案啦！ 有興趣一起寫部落格的朋友，請在IRC上告訴我，或是 寄信跟我說吧 。

第三次HappyDesigner聚會圓滿落幕，謝謝大家的共同參與。雖然這次活動有收費，但是講者陣容實在太厲害，所以來的人比前幾次都還要多呢。可惜身為主辦人太忙碌，沒有好好認識新朋友。 這次真的要非常感謝 金牛頓 ，不但提供一個這麼棒的場地，而且也給我們非常多協助。實在是讓人覺得應該要常常辦活動才對。我想唯一的小缺點就是我們的筆記型電腦太多台，結果把無線網路基地台撐爆了吧。雖然金牛頓的工程師非常熱心，幫我們加裝了第二顆基地台，不過狀況還是沒有太大改善。 （所以 AirPort Extreme 網站上寫”Connect up to 50 users”顯然只是廣告詞……感覺上好像沒有up to 15 users耶……） 這次聚會最後還有大約新台幣七百元左右的盈餘。不過因為HappyDesigner不是法人組織，而且我並不認為「把這次活動的盈餘留作下次活動經 費」是個合理的選擇。所以我會將餘款補貼給我們超棒的贊助商OPCafé（不但幫我們煮了一天的咖啡，還幫忙排了茶點、另外贊助了啤酒！）。 HappyDesigner Meetup No.3 活動紀錄 P.S. 請問有人有意願擔任HappyDesigner聚會台北區的主辦人嗎？ 請E-Mail與我聯絡 。

睽違一年多的時間，我們終於再度舉辦聚會了！ 第三次聚會的時間是3/29青年節下午，在新竹市舉辦。聚會地點在3/1才剛開幕的Newton’s A蘋果電腦專賣店。這家店有很棒的會議廳可供租借使用。 因為這次地點有場地費，所以我們這次聚會有酌收場地費以及下午茶點費用。我們會請新竹RT蛋糕店準備茶點給大家享用。 主題 這次主題是“Template, Library, and Framework”，也就是「模板、函式庫與框架」。 目前我們仍然歡迎投稿，如果你有題目願意和大家分享，歡迎 與hlb聯絡 。 詳細資訊請見 報名網站 。

最近遇到兩個和透明度（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

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 ... yullio_page_width :doc2 yullio_column_template :yui_t2 yullio_page_width 後面的參數，目前有 :doc, :doc2, :doc3 三種，分別對應至 ...

說說你對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 有什麼疑問？ 歡迎提出各種問題、意見，乃至批評、牢騷，抑或是功能需求。發言就趁現在。意見無高下之分，問題無深淺之別，批評但請直言。只要您有話...

這次聚會，我們選在新竹縣竹東鎮，一家尚未正式開張，可是飲料超讚的 opcafé 。結果有點出乎意料，總共來了18位HappyDesigner（我們原本預期最多只有10~15人呢）。大部份成員其實上次就見過面了，而且也都長期在IRC聊天室出沒，所以這次其實挺有朋友們閒話家常的味道。這次也出現了幾位新面孔，真是可喜可賀，可喜可賀！ 雖然說是閒話家常，我們還是請到 far 、 gugod 、 ijliao 、 Jedi 、 jiiing 、 lukhnos 、 qing 、 tcc 、 zonble 做了精彩 & 有趣的分享。qing大哥還特地做了投影片，真是不好意思。 （我覺得阿，這場聚會最不圓滿的地方，就是 hlb 腦袋裡只剩下結婚相關事宜，所以主持得非常糟糕，還好有lukhnos & gugod救援得宜，真是心中無盡感謝 :p）

經過四個月後，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

這兩個禮拜來都在搞這個東西，有誰像我那麼有耐性或是無聊啊… 因為看了 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一樣，自動顯示影片的第一個畫面，這樣我就可以設計符合該網頁的影片片頭，整合起來比較不突兀。 ...

上次在 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

Gugod 上次聚會有提到， YAPC::Asia 2006 許多講者都用高橋流簡報法。他們把錄影檔 上傳到Internet Archive網站 ，有興趣的朋友可以看看。其中Masayoshi Takahashi（對，就是這位高橋桑）的 錄影檔 當然一定不可錯過啦！另外你應該也會想看看這份高橋桑用高橋流 介紹高橋流的簡報 （天阿，真是繞口令！） 另外，今天我們聊到「面對群眾講話是人類十大恐懼之首」， Jedi 提到了陶敏修的建議：「找個朋友，或和善的臉，或章魚。」( MJD ，如果你不認識他，可以看看這篇 介紹 )陶敏修的簡報也有 線上投影片 與 影片檔 （217MB，值得一看）。 看來JaveTwo 2006也很 令人期待 。

你的親朋好友們都曉得，你是一個技巧高超的網頁設計師。於是有一天，你的朋友交給你一份網頁檔案，希望你能抽空幫他改一下。你隨口答應下來後（當然要順便凹頓大餐），打開檔案一看，才發現這居然是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，當個快樂的網頁設計師吧～

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

你想知道別人如何設計網頁軟體嗎？現在有個機會。 Carson Systems 決定把他們開發新網頁軟體的流程，全部用部落格的形式記錄下來，包括他們如何規劃產品、開了多少預算、找誰當UI設計師、參考哪些範例等等。他們唯一不跟你講的，是這個網頁軟體到底要做些什麼。這個網站叫做 Bare Naked App 。 他們從二月就開始寫了，所以也許你會想從頭讀起 :)

各影片之著作權屬各簡報之講者所有，下載前請先閱讀 授權條款 。 這個列表採用主題式編排，沒有完全按照時間先後順序： 自我介紹（ 影片 ） 高橋流(Takahashi Method)與相關工具介紹 gugod 介紹Takahashi Method（ 影片 ） gugod 介紹 Takahashi書 （ 影片 ） jeremy 介紹Flash投影片製作方式（ 影片 ） tkirby 介紹新版 TKSlide （ 影片 ） zonble 介紹 HyperCard （ 影片 、 zonble加上字幕的修改版 ） ingy 介紹 Sporx （ 影片 ） 自由工作者心得分享 gugod 場（ 影片 ） lukhnos 場（ 影片 ） momizi 場（ 影片 ） Jedi 介紹 WCAG 2.0 （ 影片 ） 個人分享 b6s （ 影片 ） mindos （ 影片 ） tcc （ 影片 ） toung （ 影片 ） vgod （ 影片 ） othree （ 影片 ） wanpeebaw （ 影片 ） PipperL （ 影片 ） priv （ 影片 ） ihower （ 影片 ） 廣告時段： pesty 介紹 Findbook （ 影片 ）

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

「設計網頁時缺少靈感嗎？ 摘錄別人的設計時感到良心不安嗎？ 現在就到 OpenSource Web Design ，我們有著最好的授權，最多的式樣！ 前五名加入的會員我們有優惠… 老人家久咳，囡子暗時會哭攏有效…」 (咳) 前些日子我在修改網頁配色，cobain學長告訴我有這個網站，我便找來看。看完之後發現自己人緣變好了，腦筋變聰明了，考試都考一百分。 這改變並非一夜之間，但它真的發生了。 (咳咳) 我想我最近花了太多的時間待在zonble的網誌裡了。 事實上我沒有使用網站裡提供的樣式，但我認為無論是配色，版面、或是CSS的寫法上，都有值得觀摩的地方。它裡頭的統計排行能告訴妳，誰提供了最多 的開放設計，那一種設計又被最多人下載。你也可以隨意的瀏覽，尋找自己心中覺得最適合的樣式。但我沒有找到比較正式的使用宣告，因此直接套用時要留心。 照慣例，我又要提起中文設計的問題。在使用中文的網頁中，因為中文顯示出來的樣子、與英文字型的搭配顯示、或是難以確定使用者擁有那些字型的現象，讓這些設計樣式多多少少需要因此修改。 舉例而言，一個寬線條的英文字型，每一筆劃都佔有一定的寬度，於是字的顏色與底色就能夠以色彩事典中的色塊對比來處理。但改成中文字型後，線條變得較細，原來的對比效果就因此消失。 再進一步而言，我們自己的文化應該也能夠孕育出自己的特色才對。 解決之道就是我們自己來推動中文的開放設計網站。這就要期待諸君的活躍與表現了。 by mindos