阿呆看世界

sigellabs 太陽實驗室誕生

2020-08-22T03:21:00.003+08:00

帶領團隊經過五天的努力，從零孵化出一個新創計畫。太陽實驗室，幫台灣的小朋友在數位化的未來扎根。

未來的生態系統及獲利來源

搜集所有可能的想法

將所有想法收斂整合

將收斂後的想法對應到生態圖，找出適合切入的市場缺口

找出第一階段需完成哪些工作並列出所有可能做法

24 節氣網站開發

2020-08-22T03:04:00.000+08:00

實驗性網站，希望透過 24 節氣與食物的結合，提供更好的飲食文化。同時也讓大家對節氣與食物的關係有更深入的認知。

主要溝通族群及主題定位

網站目的及對外想呈現的意圖跟主要內容

除了這些還可以增加哪些東西

創意票選，針對成員的構想進行投票，選出適合的表現方式

工程師也是很會畫圖的

能進台灣前十名的超級設計師，應該請他落款才對。

用戶體驗設計師制式又有條理的構圖

mobite 老闆的煙台夢

2020-08-21T23:18:00.002+08:00

這是個一開始就註定失敗的夢想，但我們還是勇往直前，也許就走出一條沒人走過的路。我們在煙台啟動一個活動餐車計畫，很稀奇嗎？對一點都不特別，特別的是要在一年中有一半的時間溫度在負十度的地方經營戶外餐車！

這是我們的用戶點餐系統，到了現場才發現在大台陽底下是看不見的喔

兩個用戶體驗設計師忙著拍照紀錄

我們美麗的研究員

專業的飛行員，我們連無人機都出動了

認真的營業了一週，老實說虧慘了，但也發現不少問題，整個實驗室成功的

第一天被吹的到處跑的菜單，我們小看了煙台的風

零度下的臨沂調研

2020-08-21T23:06:00.002+08:00

在零度的溫度下我們來到孔子的故鄉臨沂進行田野調查，進入真實的中國，讓我們見識到什麼叫做農村，以及城鄉的不同，真的不到現場走一趟很多時候都是閉門造車，也難怪推廣一直不順利。

到大賣場看看商品實際陳列狀況

有些賣場會出現堆放商品阻擋陳列的問題

業務員都在什麼情況下使用我們的 app

業務員邊操作邊抱怨工作上遇到的問題以及調整建議

用戶測試，透過近距離觀察，訪談用戶了解更多問題

偏鄉的小店還特別製作了特殊的陳列架

Dripple caffee 咖啡角，我們在辦公室開了一家咖啡廳

2020-08-21T22:50:00.003+08:00

兩個發起人從這張桌子開始，我們自己帶了磨豆機、燒水壺、濾杯跟幾個杯子。

半年後我們把所有東西都買齊了，用我們自己賺的錢。還用賺來的錢幫每個員工取得 SCA 咖啡師認證。

Hubble 用戶體驗測試

2020-08-21T21:51:00.000+08:00

Hubble 是我們一個實驗項目，希望能透過手勢來操控畫面，期間克服了無數的困難完成了原型，花了一個下午的時間，邀請同事幫忙進行測試，希望能找出操作事會發生的問題，以及能如何調整降低錯誤率，同時也觀察使用者會如何跟這樣的裝置互動。

一道叫做「關於我」的料理

2020-03-08T20:13:00.000+08:00

搞定一個作品網站只要三十分鐘

前公司是一家跟食物有關的設計顧問公司，聽起來是不是很厲害，還有這種公司；說實話，每次被問到「你們公司是做什麼的？」，都讓我非常困擾，食物設計顧問公司，什麼鬼？後來發現可以用一個簡單的方式來說明，只要跟食物有關，都算我們公司的服務範圍。比方說：昆蟲、人造肉、無人商店、無人餐廳（不是沒有人來的餐廳喔）、食物產業數位化、食品開發、餐廳規劃、未來餐車等等。

員工共同經營的實驗咖啡館-Dripper Caffee

前公司雖然跟食物密不可分，但我的工作跟食物幾乎扯不上關係，除了試吃外，笑。小時候媽媽跟我說：你要好好學會料理，這樣，將來跟老婆吵架就不怕老婆回娘家沒飯吃了；那時還沒有叫 7–11 的東西，否則，媽媽就得編一個新故事了。從那時起就開始學習各種料理方法，講白話點就是煮飯。

料理是個非常棒的技能喔，每次回台灣朋友常會問道：回來有什麼特別想吃的？我的答案都是：沒有。因為大部分的台灣料理都能自己做啊。去到哪個國家都不用擔心，只要有新鮮食材，永遠可以用最少的錢得到最高的享受，當然，如果你要跟我談氣氛，那就沒辦法了。

寫一篇「料理思維」似乎也很可行

前幾篇文章介紹了什麼是運算思維，以後寫一篇「料理思維」似乎也很可行。料理過程跟寫程式其實滿像的，前期都需要大量的準備時間，就拿一盤炒青菜來說吧；先要到市場買一把新鮮的青菜，很簡單嗎？去市場看看，幾十種青菜，有得你頭大了？哪種青菜容易有農藥殘留？買回來可以怎麼處理？處理好要用什麼方式煮？這都是在當下要做決定的。回到家要開始清洗，是不是要瀝乾？該怎麼切？是切丁還是切塊？手撥好像會更好？用炒的還是川燙？要加哪些調味品？等到這些決定都做完，熱炒只要下鍋五分鐘搞定。準備時間一小時，製作時間五分鐘。

開發一個作品網站其實跟做料理一樣，開始前你可能要花幾個小時，甚至幾天的時間準備材料，用在開發網站的時間不到三十分鐘，接下來讓我們進入料理準備時間吧。

料理名稱：關於我

這是一道介紹你是誰的料理，用來幫助想認識你的人了解你，也幫助你重新認識自己。

工欲善其事，必先利其器，對吧？在開始前先把刀磨利是必須的。

器材：

紙跟筆如果用電腦比用紙筆還習慣，就直接用電腦吧。但在整理思維時我習慣用紙跟筆，會有很多意想不到的好處，譬如，降低干擾；用電腦就會滑滑臉書、看看 email、回回訊息，然後幾個小時就過去了。思考更專注：想到什麼就寫什麼，將想法畫出來也能幫助思考，用電腦就沒這麼方便了。不開電腦怎麼看這篇文章？嗯，這是個好問題，先把他背起來吧，哈哈哈。老實說，我想不到什麼好辦法，如果你想到了，可以跟我說喔。
一台電腦用來學習用，最後還要用來完成你的料理。

主要食材：

你是誰？用一百個字介紹自己，對，不能超過一百個字。萬一超過怎麼辦？當然沒問題，但我是不會看的，我沒什麼耐心。其實限制字數有兩個目的，一個是多數人不喜歡讀太多文字，閱讀一百個字加上理解時間大概是三十秒，三十秒不能讓人對你產生興趣，後面寫再多也沒用了。第二是設計問題，網頁設計排版是有字數限制的，太多的文字會造成版面被破壞，就順便挑戰自己的寫作能力吧。
有什麼專長？你會什麼？喝茶、品酒、泡咖啡、拍照跟上傳 IG，這些叫興趣，請不要寫出來。我們想知道的是你會哪些技能，跟工作相關的，除非你是咖啡師。
在什麼餐廳工作過？「凡走過必留下痕跡」，會用這句話的人都有點年紀了，哈哈。我是個新鮮人怎麼辦？有過打工經驗吧，如果沒有，也應該有社團經驗吧。專題總該做過，專題的團隊經驗也可以拿出來說說。還是沒有！我懷疑你是怎麼畢業的；如果真的什麼都沒有，那就……別做了吧，反正也不會有人想看。
拿手菜是（至少三個）？準備好三個你最驕傲的作品，如果你對每個作品都感到驕傲，那就太棒了，不是個大師就是對自己充滿自信。三個最棒的作品是用來讓別人認識你的專業能力，進而對你產生興趣，這三個如果不起作用，後面放一百個也沒人看喔。

調味料：

個人照一張找一張充滿自信的照片吧，我是建議自然點的好，沙龍照也不是不行，只是給人太做作的感覺，當然，如果拍得很棒也 OK。像我的大頭照就不錯，對吧、笑。
五張喜歡的照片當背景用，只要你覺得喜歡就行，當然，有特殊意義更棒。不建議以「人」為主題的照片，如果人是主題容易讓看的人失去焦點，除非那是你特別想表現的。
老闆或同事對你的看法找幾個以前的同事、老闆、現在的同事或好朋友，談談他們對你的看法，最好是跟工作相關的。就像一本新出版的書，如果有名人推薦就能賣得很好。不認識名人也沒關係，身邊的人對你的想法，有時候也能起到你意想不到的幫助喔。
註冊幾個線上服務這些服務都是工作上常用的工具，都用過表示你是個跟上數位時代的工作者，沒用過也不是什麼大問題，現在申請就好，或者只是不需要，可以挑你覺得需要的申請就好。

作法：

好溝通的設計師？前端工程師？

2020-03-08T20:10:00.007+08:00

朋友問了個有趣的問題：怎樣的前端工程師算好溝通？或反過來問，好溝通的設計師是怎樣的？套用另一篇文章運算思維提到的方法「問題拆解」，看看會發生什麼事。

設計師＋好溝通的＋前端工程師＝團隊
前端工程師＋好溝通的＋設計師＝團隊
A + 好溝通的 + B = 團隊
你 + 喜歡的 + 人 = 一起工作的人
我喜歡跟怎樣的人一起工作？

會得到一個全新的問題：我喜歡跟怎樣的人一起工作？

PO, Developer, Editor, UI/UX, PM

團隊的成員有？

討論主題前，讓我們先來看看完成一個網站建置需要哪些人？
專案負責人：溝通專案需求、協調團隊工作及管理專案時程；
系統架構師：畫出網站架構藍圖，決定網站什麼地方該放什麼；
後端工程師：前端工程師與後端資料庫的連接橋樑；
前端工程師：將設計畫面轉換成程式語言；
設計師：將專案需求從文字變成美麗的畫面。
這是最基本且合理的編組，為什麼要特別提到且合理呢？因為兩三個人包辦全部工作的機會並不少見。

全端、後端、前端？

早期沒有前端工程師這個職稱，通常是後端工程師包辦全部開發工作；近年來數位裝置種類越來越多、交互行為變得越來越複雜、設計的要求也越來越高，一個人包辦所有開發工作的時代已經落伍了，取而代之的是更專業的分工，也因此誕生了前端工程師這個新職業。

學校不量產前端工程師，在市場上能看到的前端工程師，主要的取得方式有下面幾種，第一種類型是後端工程師轉前端工程師，又稱為全端工程師，我屬於這種；第二種類型是目前的主流，直接學習前端開發語言的原生前端工程師，特別強調原生是因為通常這樣的前端工程師不具備後端開發能力；第三種是近幾年急起直追的設計師轉前端工程師，一般會稱為前端設計師或 UI 工程師（UI : user interface 使用者介面設計）。想了解更多请参考我的另一篇文章「架個網站很難嗎」。

前端工程師跟視覺設計師的差別只是使用的工具不同，一個是用程式碼，一個是用設計工具，最後完成的作品都叫設計。

前端工程師跟設計師其實是性質非常接近的工作，最大的差別是使用的工具不同；前端工程師用程式碼來實現設計師的作品，依賴的是挑戰設計難度的想像力。設計師則用設計軟體來完成作品，需要的是無中生有的創造力。再深入觀察這兩個工作，會發現需要的能力幾乎是相同的，只是需要的能力出現在解決問題的不同時間點。

我們遇到問題了

白眼翻到天邊去

對設計師說：

- 只是換個顏色應該不難吧？
- 這底色有點暗，能換成亮一點的黑色嗎？
- 差 2px 不行嗎？
- Logo 太小，可以放大一點嗎？
- 可以模仿那個網站做一個類似的嗎？
- 我想要豐富帶點灑脫的感覺……
- 這可以放一張大一點的照片嗎？
- 我覺看起來怪怪的，說不上來哪有問題，你覺得呢？
- 只改幾個字要三小時！
- 麻煩把這些小字改成粗體，這樣看起來比較明顯。

對工程師說：

- 這很容易吧，只是換個位置？
- 應該不難吧，明天能好嗎？
- 網站要向下相容到 ie6！
- 客戶又改需求了！
- 你先把功能做出來，我們再來評估。
- 只是複製貼上怎麼還要這麼貴？
- 用 css 改一下就改好了啊。
- 為什麼字體不是 18.5 px ?
- copyright 字體太大了，我給的是 8px 啊！
- 老闆說明天就要！

為什麼設計師、工程師聽到這些話會白眼翻到天邊去？因為用錯了溝通方式。

善於溝通的設計師

設計是為了解決問題而存在，商業需要的是設計師，不是藝術家。

藝術家：通常是有比較高的成就或擁有獨特的個人風格，並且具備一定美學素養的人。

不在意個人風格的設計師不可能成為好設計師，但設計跟商業扯上關係時，有時得先拋開個人風格；專案都有各種限制，時間很趕、經費不高或人力不足等問題，很多時候必須作出妥協，不是要設計師放棄理念，而是要在殘酷的現實中找出一個平衡點。

設計在發展到極致時可以成為藝術，但先要能解決問題，然後才是追求個人風格。曾經合作過的優秀設計師都具備這樣的特色，能深入理解問題、善於溝通、接受不同的觀點，看看後面這幾個例子。

潘潘(用戶體驗設計師)：為什麼按鈕要用紅色？
小白（設計師）：為了配合整體設計，這裏用紅色按鈕比較適合。
潘潘：可是紅色通常在警告時使用，換個顏色會不會好點。
小白：那只保留紅色框行嗎？還是換成半透明？
潘潘：換紅色框其它按鈕是不是要跟著調整？時間來得及嗎？
小白：沒問題，只要提供樣式給工程師，一次就能搞定所有按鈕。

---

阿魯(前端工程師)：這樣的動態太複雜，時間上可能會來不及，能不能換個表現方式？
小白：我希望透過滾動來表現時間感，除了滾動還有其他方式嗎？
阿魯：因為滾動會跟頁面上的部份區塊衝突，需要較多開發及測試時間，所以能不能換個方式。
小白：那換成一次捲動一頁呢？我還是希望能保持捲動來呈現時間概念。
阿魯：好吧，我先試試用捲頁式，時間許可再嘗試滾動式。
小白：太好了，非常感謝你，如果還是不行我們再想想其他方法。

---

阿魯：設計稿應該在上週就完成了，為什麼今天還沒收到？
小白：因為上週有做了一些小調整，所以多加了三天。
阿魯：增加三天的時間會影響到開發時間，這樣會 Delay。
小白：已經跟專案負責人確認過了，設計時間延後影響到開發，上線時間會往後調整。（想法是好的，但可能性幾乎是零）

---

善於溝通的工程師

電腦螢幕上眼睛看得到的都屬於前端工程師

前端工程師：擁有前端技能（即HTML, Javascript和CSS）以及專業設計（視覺設計和交互設計）技能。

我對前端工程師的要求很簡單，百分之百實現設計師的想法，不管是設計風格、動態或交互。

有句話是這樣說的，用戶永遠是對的；其實這句話很有問題的，很多時候用戶會因為無知做出錯誤的判斷，但在這我們先不談防呆，那是另一個值得討論的議題。設計師也會犯相同的錯，當設計師因為不了解技術限制時也會做出不合理的設計，比如前面提到的 18.5px，這時就需要良好的溝通能力了，看看下面幾個例子。

小白(設計師)：為什麼紫色看起來跟我的設計不一樣？
阿魯(前端工程師)：這個紫色會有問題，能不能換其他顏色；
小白：紫色是客戶的代表色，一定不能換；
阿魯：一定要用也不是不行，只是它不屬於網頁安全色，在不同瀏覽器會有些微的色差，如果能接受，那就沒問題；
小白：怎麼會這樣！
阿魯：不同品牌的瀏覽器對顏色的定義是不同的，所以有些顏色會出現這樣的問題，先跟你說，以免客戶問起來不知道如何回答。

---

小白：為什麼這個動態需要兩個禮拜？
阿魯：因為沒有現成的套件能用；
小白：什麼是現成的套件？
阿魯：網頁上的動態如果是很常被使用的，就會有人把它寫成套件，這樣其他人在開發時就能直接拿來用，不需要花很多時間重新開發；
小白：那沒有怎麼辦？
阿魯：自己開發啊，因為沒有人寫過，所以需要花時間研究跟測試，預估最快要兩週，也可能需要更長的時間。

---

小白：為什麼動態跟漸層都不見了？
阿魯：哦，我來不及跟你討論，老闆說這禮拜就要先上線；
小白：就算這樣也不能改我的設計啊；
阿魯：嗯，我也覺得這樣不對，少了看起來不太對，但全部完成要到下週才能上線，這樣會來不及。所以我先做一個完整頁面，這禮拜上線前應該來得及把漸層加上去，至於動態就沒辦法了，少了動態確實差滿多的，我們先上線一個內容完整版，下週會再把動態補上，你覺得如何？

---

很多時候只是溝通的方式錯了

溝通的過程主要是資訊發送者把思想內的資訊內容以可交換或共同認可的表示方式編碼，以某個渠道來傳遞。資訊接收者獲得資訊後，便進行解碼，轉換成內在的資訊。

可交換或共同認可的表示方式這段話是溝通問題的根源；說話，其實就是一種編碼過程，我們的想法經過大腦思考、整理、歸納後轉換成文字（編碼），然後透過嘴巴輸出，聽的人由耳朵輸入，經過大腦還原（解碼）成能理解的文字，這就是溝通過程。那為什麼每個人用的方法都一樣，卻還是溝通不良？問題就出在編碼方式不同。

設計師用最新型的彩色編碼器，工程師用的是最高檔的黑白編碼器，你覺得能溝的通嗎？當然不能！但編碼方式能說換就換嗎？很難，非常難，改變對任何人來說都不是件容易的事，除非認真想讓自己變的更好，否則幾乎是不可能的事；下面提供幾個讓溝通變得更容易的方法。

把你變成我們

別傻了，對事不對人是禮貌性的謊言，⌈人⌋ 跟 ⌈事⌋ 是綁在一起，不可能分開的，相信對事不對人就是你太年輕了；好比我心裡想的是：你這個蠢蛋，卻打出你太年輕這幾個字，因為我們都太習慣用好聽話包裹內心真實的想法。

小白：我覺得這樣的設計沒抓到客戶要的感覺，客戶可能不會買單，可是，你不要誤會喔，我一直都很喜歡你的設計，只是這樣的風格不太對。

是不是有點熟悉？對事不對人，那這個客戶不買單的設計是誰做的？很多時候我們只是不敢直接面對問題，因為對事容易對人難，所以繞一圈說對事不對人，說穿了就是不想得罪人，那怎麼辦？有沒有什麼辦法，其實只要換個角度面對問題，結果就會完全不同。

先要站在一起。丟掉你、我，他，開始用我們，例如：讓我們一起完成最好的作品，把這句話當成前提，其他問題就不再是問題了，因為有了共同目標，問題就不再是你的設計有問題或我的程式沒寫好，而是我們的設計該怎麼做，程式可以如何完成。當你將工作變成我們的工作時，很多爭執都會消失於無形。

不懂可以問

在工作時最怕遇到的就是不懂卻不問，我想是教育造成的問題。台灣人很不愛問問題，以前在上程式課時就發現有這現象，問學生有沒有問題？台下像被按下靜音鍵，接著讓大家試著寫寫看，全卡關；最近教小學生也發現一樣的問題，原來發問能力在小學時期就壞掉了。

設計師的每個設計都有一套脈絡跟想法的，有時為了一個背景色的選擇就要花幾小時甚至幾天的時間跟客戶溝通確認、做各種探索、嘗試。當你用無知的語氣說：這顏色太暗，能不能換亮一點的顏色時？你覺得會得到什麼答案？

工程師已經花了一個禮拜的時間，上網找了一堆資料，跟其它工程師討論，一次又一次的改寫程式，測試，好不容易才完成。當你用無知的語氣說：這應該不難吧，只是讓頁面自動往下捲動？你覺得會得到什麼答案？

很多時候因為我們的無知，一腳就踩在雷上，能不引爆嗎？別讓無知毀掉所有的努力，不懂可以問：為什麼會選擇這個顏色？有什麼特別的想法嗎？為什麼這樣的捲動方式很困難？跟一般捲動的有什麼不同？當你真心想知道為什麼，多數人會回應你的用心的，至於那些懶得回答你的就踩爆他吧。

讓專業的來

在專案進行前都會先跟團隊溝通一個基本原則，尊重專業；遇到問題時團隊先確認問題類型，是設計的問題、程式的、客戶的、還是規劃出問題，不管問題出在哪個環節，每個成員都會有自己的想法跟見解，但最後做決定的會是這領域的專家，也就是設計問題設計師必須作最後判斷，開發問題則由工程師來做決定，時間管理問題就是專案負責人的工作了。

當專業受到挑戰時，怎麼心平氣和的溝通？

PM：為什麼變這麼醜？
小白：因為老闆覺得綠色不好看，希望能換成藍色的。

PM：這應該很簡單，明天能上線吧。
阿魯：靠！光套版就要一天，你想要多快？

小白：為什麼沒用我設計的顏色？
阿魯：我覺得那顏色不好看，所以做了一點調整。

是不是很熟悉，背後不知道偷罵了多少次，那個 XXX 是不是智障；最後，工程師挨罵了，設計師離職了，專案 Delay 了。

好的團隊是從尊重每個成員開始，在面對問題時我們可以有不同的觀點，可以分享自己的想法，可以透過進行討論取得更好的答案，但現實不會總是如此，當問題無法取得共識時，請先想想，誰是這領域的專家，將最後決定權交給他，他才是最適合做決定的；提醒你，決策出問題時會負起責任的不是你，除非你想跟老闆說：都是我的錯，是我說要改的。

不要停止學習

學習用團隊的角度思考；專案成功不是一個人能做到的，是大家一起努力換來的。好的計劃不能缺少設計師，好的設計沒有工程師也只是美麗的畫面，再好的技術少了設計師是什麼都做不出來的。一起做、一起想、一起挨罵、一起偷懶最後還要一起成長，這樣的團隊還能有什麼溝通問題？

學習對方的語言，設計師除了設計，學點程式語言也是不錯的，相信我，你會打開另一扇窗，說不定你會愛上程式設計。工程師除了寫 code 也可以多多接觸設計啊，不能老是被當成只買格子襯衫的阿宅，相信我，學會設計會更受歡迎喔。至於 PM 就都學吧，誰叫你全都要管？哈哈哈。建議大家多學點，不用學到能轉行的程度，只要學到堪用就行了。舉我喜歡的 snowboard 為例，只要能平安的從山頂滑下來，管你用什麼方法。

學習相信成員的專業能力，相信你的夥伴很難嗎？少了信任的團隊是不可能做出好作品的。我的團隊有設計師、工程師、研究員及用戶體驗設計師，在工作時其實沒有很明確的區分，工程師會談設計，設計師會討論技術問題，研究員會提出設計觀察，每個人都有自己的工作該完成，也會在同伴遇到困難時提出建議，很多時候無厘頭的想法也能迸出精彩的火花。

如果上面說的都沒用

整理好你的作品，準備換工作吧。（可以參考我的下篇文章）

寫這篇文章時我也一直自問，這些東西有用嗎？真的是這樣嗎？一定有不少人有相同的疑問。其實，溝通問題很多時候是出在組織或企業文化上，組織文化會影響每一個成員，如果企業本身有問題，個人再怎麼努力也是白搭。

我待過的公司都是扁平化的組織型態，不會特別強調上下關係，需要面對的只有人跟人之間的溝通問題。大部分傳統企業就不是這樣了，需要面對的有主管、主管的主管、老闆或討厭的客戶，這時上面提到的方法就不一定管用了，畢竟人是最難處理的問題，但也不是完全沒用啦，只是需要學的東西更多，短時間是很難改變的，即使革命成功，結果也不一定是你想要的，所以，換個新環境也許是更好的選擇。

---

總算寫完了，花了快一個月的時間；文中提到的工作說明不是所有人都是這樣的，有精通設計的工程師，也有很會寫程式的設計師，還有非常專業的PM，我只是將工作時看到、經歷過的寫下來跟大家分享。文中提到的想法有任何疑問，歡迎提出來討論。最後謝謝你的時間，希望這篇文章有幫助到你。

什麼是運算思維？

2020-03-08T19:56:00.001+08:00

每次被問到什麼是運算思維？我都會回答，運算思維就是解決問題的方法；不知道是不是答案太簡單，後面就會接著問，什麼是解決問題的方法？如果有人這樣問，你會怎麼回答？我的答案是，解決 — 問題— 的 — 方法 ，接著問的人頭上就會出現大大的問號。

以下提到的工程師泛指程式設計師、開發人員或是會寫程式的人。

You don’t have to be an expert in coding or the periodic table, but having the ability to think the way these experts do will help you tremendously.

It’s not necessarily that you’ll be writing code, but you need to understand what can engineers do and what can they not do

- Bill Gates

微軟創始人比爾·蓋茲說：不一定要會寫程式，但學習工程師的思考方式，了解程式能做什麼以及不能做什麼，對未來會很有幫助。

我以前會在公司開程式設計課程，不管是企劃、設計師、研究員還是工讀生都可以報名，很妙對吧，為什麼不是針對工程師？其實開課只是為了幫大家建立共同的溝通語言。

很多時候爭執不是因為出了什麼問題，而是不了解彼此的工作方式及遇到的困難；讓更多人能學習程式語言，用這樣的方式來建立同理心，之後在溝通上遇到的問題也就越來越少了。

那時隱約感受到想教大家的東西不只這些，只是當時說不出個所以然，現在才知道我真正想分享的觀念，有個專有名詞叫「運算思維」。

那到底什麼是運算思維？運算思維就是工程師面對問題時如何思考，以及找出問題的交互關係，並建立永久性解決方案的過程。

工程師在解決問題時有特定的思考流程，面對一個問題，首先將問題拆解成許多的小問題（拆解問題），接著找出問題彼此間的關聯性或規律性（找到模式），然後將問題簡化，忽略細節（建立抽象化），最後針對這個問題提供一個完整的解決方案（完成演算法）。

運算思維就是工程師在面對問題時如何思考，以及找出問題的交互關係，並建立永久性解決方案的過程。

這樣的思考方式除了能提升工作效率，還能減少錯誤的發生；也可以用在日常生活及所有複雜的問題上，這也是西方國家傾全力推廣程式教育的原因，就連前美國總統歐巴馬、名模、街友都開始寫程式了。
運算思維的四大步驟：一、拆解：將數據，流程或問題拆解成可管理的大小；
二、模式識別：尋找問題間的相似處、趨勢或規律；
三、抽象：只關注重要信息，忽略不相關的細節；
四、演算法：建立解決問題的流程或規則，同時能解決其他類似的問題。
最後想說的是，程式設計不是未來唯一的選擇，你還是可以是音樂家，藝術家、科學家、心理學家或創業家，但學習運算思維，在未來會對你產生非常大的幫助。

近年來運算思維的重要性越來越受到重視，美國計算機教師協會（CSTA）與國際教育技術協會（ISTE），在 2019 年的計算機教育標準草案融入了大量的運算思維教學規範，希望將運算思維融入到一般課程設計，不管是數學、科學、音樂或藝術都能結合運算思維，讓學習運算思維變得更加容易。

我是不是該開始學程式設計？但為什麼要學？現在不學未來真的會被淘汰嗎？其實不一定需要學程式設計，真正需要學習的是工程師如何思考，程式設計只是方法之一，也是現今最常見、最有效的方法；但透過這樣的方式學習運算思維，至少得先熟悉一種程式語言，然後累積豐富的開發經驗，對多數人來說是非常大的考驗。

關於CSS HACK的一些建議

2011-05-15T16:23:00.000+08:00

padding-left:5px;padding-left:0\9;*padding-left:5px;

前幾天在社團貼了這段code，一直沒時間好好把它寫完，趁現在沒事要忙來寫一下說明好了。這個狀況是發生在修改同事完成的頁面，姑且把它定義成區塊偏移了5px，在大部分瀏覽器都在他該在的地方，可是有個瀏覽器就是與眾不同，更有趣的是還自己跟自己不同，你應該知道我說哪個吧，不知道的話這篇文章就不用往下看囉。

這個特殊偏移現象只會發生在IE8，IE7不會偏移，至於IE6已經埋在土裡就不考慮了。padding-left:5px;是給所有瀏覽器看的，但IE8硬是多出5px，這時候已經不是去問這是誰寫的問題了，得先解決再說，所以就加了這一行padding-left:0\9;只有IE才看的懂的code，可是這樣會出問題啊，IE7是正常的怎麼辦?於是又多了這行*padding-left:5px;，因為這行code只有IE7看的懂，於是皆大歡喜，可是重點在哪?

重點在順序，一定要由大到小排列，IE8，IE7，IE6。為什麼順序重要，因為串接的關係，越後面出現的權限越大，如果對調順序會造成後面的值覆蓋掉前面的值，這樣會很難發現錯誤，明明程式碼都是正確的，畫面卻完全沒有任何改變，所以才要提醒大家在設定時要注意優先順序。

這樣的問題如果事先有做好瀏覽器的 Reset 通常是不會發生的，我非常少用到HACK的方法，但救急很好用，遇到這樣的問題通常會先跟視覺溝通取得一個較好的呈現方式，不是只能用HACK來解決問題，但如果非用不可就用吧。

如何讓表單更友善

2011-05-04T14:02:00.000+08:00

如何讓表單更友善

當用戶按下送出表單卻出現錯誤時，表示你的表單設計出問題了。

構成表單的三個主要元件:

標籤：欄位名稱，姓名，密碼，電子郵件等
欄位：一個輸入框應標示為必填或非必填，通常以星號（*）為提示符號。
提示：幫助提示功能，給用戶更多的提示關於如何格式化他們的信息。例如，一個幫助提示會告訴用戶什麼密碼要求是：（如下圖所示）。

1.明確標示必填欄位

2.提供明確的錯誤訊息

Yahoo

Gowalla

常用驗證用戶輸入資料方式:

Server-side Validation :資料送出後於伺服器端驗證用戶輸入資料是否正確，如錯誤返回錯誤訊息。
Client-side Validation :資料送出後於客戶(用戶)端驗證用戶輸入資料是否正確，如錯誤返回錯誤訊息。
Real-time Validation :資料透過AJAX直接對伺服器端做驗證，用戶不需送出資料才確認資料的正確性，即時查詢可減少用戶錯誤發生次數，提供更好的用戶體驗。

3.使用客戶端（JavaScript）的資料格式驗證

live validation

4.聚焦表單域視覺風格，讓使用者知道他們在哪裡(底色，加粗框)

wufoo

5.明確顯示完成進度(多頁表單)

如需完成表單分成多個頁面，須明確告知用戶表單頁數及目前完成進度。

ex:Groupon : 有趣的註冊流程

6.記憶/暫存表單資料

用戶在完成表單送出後如有錯誤會將用戶帶回未完成表單，不要讓用戶重新填寫已完成欄位，須將原有已完成資料自動填入。

7.明確定義送出按鈕

讓用戶清楚的知道點擊按鈕後代表的意義，而不是所有按鈕都叫完成或送出。

8.提供取消按鈕前要想清楚

提供用戶取消按鈕須是先確認需求，就購物結帳流程來看，當用戶完成每個結帳步驟表示已確認購物，提供一個讓用戶反悔的按鈕是不是個正確的選擇?

9.顯示用戶正確的資料輸入格式(2011/04/28 0938-123456)

csskarma
Apple : 用戶點擊輸入框提示字元不會消失，如果用戶填表過程暫時離開，回來後還是可以繼續完成未完成表單。

10.確認表單動線

表單動線須一致，這樣可降低用戶填寫表單的困擾，也可讓用戶更專注於完成表單，能有效減少填表錯誤。

iPhone Web App Supported Meta Tags

2011-04-21T17:48:00.000+08:00

iPhone Supported Meta Tags

viewport
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">

開發者決定手持裝置的縮放比例設定
- width=device-width 定義手持式裝置網頁寬度。設定成device-width可讓瀏覽器自行判斷手持式裝置寬度，也可以直接設定大小，如width=320。
- initial-scale 畫面是以多少倍的 viewport 來顯示
- minimum-scale 畫面縮小倍率限制。
- maximum-scale 畫面放大倍率限制。: 0 < user-scalable < 10.0，預設值0.25。
- user-scalable 是否允許放大或縮小視窗(預設為YES)。
apple-mobile-web-app-capable
<meta name="apple-mobile-web-app-capable" content="yes">

定義用戶是否將視窗啟用為全螢幕模式，用戶可透過新增書籤將網頁連結新增為一個桌面ICON，這樣用戶在啟動時就不會出線瀏覽器的上下選單，畫面看起來就像一個App
apple-mobile-web-app-status-bar-style
設定iPhone狀態列的顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- default:灰色
- black:黑色
- black-translucent:黑色半透明(不建議使用)
format-detection
啟用或關閉瀏覽器自動偵測，如將電話自動轉換為連結
<meta name="format-detection" content="telephone=no">
apple-touch-icon
設定桌面ICON圖片(57px x 57px)
<link rel="apple-touch-icon" href="img/troie_icon.png" />
<link rel="apple-touch-icon-precomposed" href="img/troie_icon.png" />
apple-touch-startup-image
載入網頁時的等待畫面(320px x 460px)
<link rel="apple-touch-startup-image" href="img/wait.png">

神奇的藍色筆芯

2011-04-16T17:26:00.000+08:00

Step 01 首先用藍色筆描繪出你想畫的東西。

Step 02 用顏色較深的筆(2B)描繪邊框，然後掃描或用相機拍下來。

Step 03 用Photoshop開啟圖檔

Image -> Adjustments -> Black & White(中文版自己猜吧)

Step 04 濾除藍色草繪線條

Preset 下拉選單選擇 Blue Filter

Step 05 完美的手繪框線完成

Finish

Where are you come from?

2010-10-19T16:56:00.000+08:00

When....

發了10000封eDM有多少人點擊?
張貼在Facebook的連結是不是有效?
廣告貼在yahoo還是google好?
花錢請部落客推文效益如何?

How ....

Click Me 然後照下面的說明填入資料

有了連結就可以貼到任何你想(該)貼的地方

Then...

「使用者經驗設計」系列之四：以系統化方法評估設計的易用性

2010-09-12T16:32:00.000+08:00

第一場由交通大學傳播研究所李峻德副教授主講，非常專業的解說，只是跟現實環境不符，李教授也提到很多理論跟實際要面對的問題會有所衝突，既然理論無法解決或解釋現有環境的問題是不是該檢討理論本身是錯誤的，如果把現實因素排除不考慮這樣得出的結果是不是正確，答案的正確性是不是會嚴重偏離呢?

第二場由神達電腦行動通訊部門人機介面處使用者經驗研究員王秀娟主講，提到非常多現實環境在操作使用者研究會遇到的問題，也看出目前業界不重視使用者的心態，我們總是抱著有做總比沒做好，這是個不錯的想法，偏離幾個百分點是可以接受的，但如果這幾個百分點就是跟其他品牌的差距呢?A是個不錯的選擇，只是A+更好。

[iSearch 愛搜尋] SEO同好會會後心得

2010-05-31T20:59:00.000+08:00

很精采的一場活動。小小的場地上演了一場精采的SEO秀，感謝awoo用心舉辦這樣的活動，每個小細節都做的很好，下次可能要用搶的了，不過聽說寫心得就能取得參加資格，我也來用心一下囉。

SEO+UEO的完美結合-SEO領袖awoo 林思吾(Jose)

阿物國際總經理Jose精采的開場，從不同角度分析讓與會者對SEO及UEO有了初步的認知，原本以為只會談到皮毛，但Jose的大方分享值得給他一個最熱烈的掌聲，不只談理論，連如何實作都毫不保留的分享，精采的數字分析，淺顯易懂的案例解說，本來對SEO一知半解的人相信經過這次活動會有更深入的體會。

頂尖網管人食夢黑膜分享他看到的SEO世界

從不同的工作層面來解讀該如何參予SEO，直接點出SEO不是一個人或一個TEAM可以獨立完成的，必須是不同部門分工合作的結晶。分享中提到一個很重要卻常常被忽略的觀念，好的SEO是建構在WSO之上，沒有WSO，SEO只是空談。後段提供了一些未來趨勢分析及如何使用工具來讓SEO更加完善。

SEO硬是要做的10件事情與3個SEO大撇步-王國連(Mr.King)

從網站架構的底層開始分析做好SEO該完成哪些工作，可惜的是時間太短無法做更詳細的說明，提到一些比較技術面的方法，無法做一些簡單的DEMO，不過與會者大部分都不是技術人員，應該不用做到這麼詳盡的解說。很簡單的帶過一些重要的技術，礙於時間限制也只能這樣囉。

Sorting Study現場帶您一起動手做-awoo廖玟珊(Ingrid)

這是今天唯一的收穫，並不是前面的講者講的不好，每個都非常精采，對一個想進一步了解SEO的人來說。我不是個初學者，所以只要能學會一點東西就該滿足了。Ingrid透過詳細的解說讓與會者了解何謂Card Sorting，很久以前就瞭解這個方法，只是一直沒有機會實作，透過這次會議的實作過程讓我對Card Sorting有了更完整的認知，也更清楚在一個網站規劃或改版時運用的時間點。順便提供一個我發現的小問題，我不知道其他組是不是有相同問題，也許是太趕了，活動一開始大家都是一臉疑惑不知道該怎麼做，應該是有點趕所以大家還沒反應過來吧，這是我看的的狀況，提供參考囉。

對這次活動想更清楚的了解請點擊這個連結
http://blog.awoo.com.tw/2010/05/isearch-report/

你真的清楚按下同意代表的意義嗎

2010-03-24T00:33:00.000+08:00

今天看到一個常逛的粉絲專頁舉辦投票活動，想説點進去看看，既然是朋友辦的活動當然要捧場囉，卻發現一個值得探討的現象，看完這篇文章不知道你還會不會點下"同意"。

我必須先說明網站企劃是個很棒的粉絲專頁，請不要誤會了，我非常推薦對網站企劃有興趣的一定要加入，有問題的是這個活動程序。下面這張圖是活動說明，我當然是樂意參予活動囉，理所當然點了投票

問題來了，我必須允許投票箱存取代表你同意該程式取得你的個人檔案、相片、朋友以及其他相關所需資料，注意喔，是投票箱，不是網站企劃，先繼續往下看

有沒有發現什麼地方怪怪的，應用程式多了一個投票箱，代表什麼?代表它能存取你的個人資料。

因為信任網站企劃粉絲專頁所以按下同意，但"投票箱"是一個Facebook的AP，兩個應該不能畫上等號吧，可是當你因為信任網站企劃而按下同意時代表你同意投票箱存取你的"個資"喔，這樣是不是會有很大的問題呢?

這個活動因為我的多事已經暫時停止了，最後還是要強調網站企劃是個很認真經營的粉絲專頁，我相信也會有其他粉絲專頁遇到相同的情形，所以，下次在按下同意按鈕時請記得先確認再按啊。

很差的線上購物經驗-YAHOO購物中心

2010-03-01T19:12:00.000+08:00

阿姨想買個用途不明的主機架，很認真的上網搜尋了半天，選好之後卻不知道要怎麼購買，你可以說她不會用，但購物網站可以把這當成藉口嗎?線上購物還需要看說明書那不是註定會失敗嗎?

這個神聖的任務最後就落到我頭上啦，其實已經先幫阿姨看過，因為太麻煩建議她直接去商場購買，誰知她堅持要線上購買只好幫她下單了，還真的不是普通難用，我們還要忍受這樣的爛服務多久呢?接下來看看我的購買過程吧。

注意超商付款是可連結的，ATM不行，我可以解釋成可以超商付款嗎?如果不行是不是不該出現呢?接下來點我要購買進入下一步。
超商付款有一個很重要的限制必須要購買金額500以上，2000以下。

當選擇我要購買後會出現上面這張圖，299不符合超商付款的條件是不是不該出現這個選項，這裡並沒有，你還是可以選擇，只是當你按下下一步之後會出現上面那段提示。有趣的是你可以選擇確定繼續使用超商付款(不是低於500嗎)或取消選擇其他方式(一開始就關閉不合的條件選項是不是就能省掉這個步驟)

Q1.網站很貼心的幫我帶入姓名，但我登記的是英文，當我送出後彈出一段有趣的文字限用中文，如果上面的提示是請填中文全名是不是能減少這個問題
Q2.身分證字號?!!買東西要查驗我的身分?!
Q3.手機跟市內電話都是必填，是不是該做詳細的提示，而不是按下送出才出現提示。規劃上也不該是必填，使用者只需要提供一組能聯絡的電話，多填壹個字對使用者都是麻煩。
必填項目未作明確提示。

又提醒我一次未滿500不能使用超商付款，然後很好心的提供我ATM轉帳帳號@#$%^&*()

有些事情如果經過思考可以做的更好，工程師可以說企劃沒寫出這些規則，企劃可以推說這些基本的規則工程師應該知道，不管是誰的責任，但多個人用心是不是能提供更好的使用者體驗。

一隻滑鼠搞定Chrome(chrome-mouse-stroke)

2010-02-22T16:54:00.000+08:00

如果你是Chrome的愛用者，這個好用的擴充工具絕對不能錯過。

Chrome Mouse Stroke(以下簡稱CMS)是一個利用滑鼠拖拉放來操作你的Chrome瀏覽器的擴充工具，習慣使用Firefox的使用者應該很熟悉，操作方式幾乎不需要學習，"安裝"然後"使用"完全無障礙。

CMS是用來做什麼呢?簡單說就是讓瀏覽器操作變的更容易，讓我們在上網常做的動作只要一支滑鼠就能搞定，上一頁，下一頁，開新分頁，關閉分頁，重新整理....這些工作都只要用"畫"的就能完成(如下圖)。

注意:您的Chrome瀏覽器必須是4.0以上版本，否則無法使用擴充功能。(下載最新版本)

開始安裝Chrome Mouse Stroke

下載CMS(http://code.google.com/p/chrome-mouse-stroke/)

點擊下載後瀏覽器左下角會出現一行文字擴充功能及主題可能損害您的電腦，確定要繼續?請按繼續，接下來會出現一個警告視窗您要安裝"Mouse Stroke"嗎?請選擇安裝，這樣安裝部份就完成了。
用過firefox的用戶重新啟動就可以使用了，沒用過的可以看看設定選項會有詳細的使用說明，不過是英文版(有中文版本等完成確認後再來更新)，操作方法如下圖
1. 點選右上角鈑手圖示
2. 選擇擴充功能(Extensions)
點選選項(options)按鈕
CMS操作說明

使用說明:按下滑鼠右鍵後依照下列常用指令拖拉滑鼠，完成後放開按鈕(L:向左，R:向右，U:向上，D:向下)
- 頁首:L U
- 頁尾:L D
- 上一頁:L
- 下一頁:R
- 上一個分頁:U L
- 下一個分頁:U R
- 回首頁:D U
- 頁面重新整理:U D
- 連結開啟新分頁:在連結上按下滑鼠右鍵 U
- 關閉分頁:D R
以上為常用功能說明，如需更詳細使用方式請參考選項說明頁。

LU30的第一次

2010-02-05T18:36:00.000+08:00

光看大綱我就覺得賺到了，以前都是幫別人上課，總算可以當學生了，哈哈

Axure RP Pro
主講人:李一詩比比王網站專案經理

課程大綱:

各種網頁元件的使用說明，例如圖片、文字區塊、按鈕、功能區塊、表格、資料表單的各種輸入元件等等
滑鼠點擊、移入、移出等互動效果的設定
各種互動效果範例實作，包括頁籤切換、月曆面板、照片左右捲動、自動完成、區塊展開與消失、多層次選單、連動的下拉式選單、LightBox等等
將共用模組或區塊放入各頁面中
加上區塊的註解
設定邏輯條件，以會員已登入、未登入為例，呈現不同頁面內容
問答

是不是跟我一樣覺得賺到了呢，所以這麼精彩的內容應該輪不到我獻醜啦，不過我還是會準備我該準備的內容

(暫定)
主題 : MVC細蝦密
主講人:我
豐功偉業:哪有那種東西啊

PS.如果時間不夠我會調整為工作必會的十大秘器(隨便說說的不知道是不是有十大)

什麼是MVC
怎樣的情況需要用MVC開發
為什麼要用MVC
了解MVC的好處

地圖如果怕找不到就把地圖左上角的黃色小人拖到箭頭指的地方，這樣就會有大神為你帶路了，時間是兩點到五點(可延長一小時)，費用是一百五，這是場地飲料費啊，我沒拿回扣喔，可以選兩杯飲料還會有一盤小點心，想用餐的話是兩百五，主餐之外還有飲料跟點心，還有任何疑問再留言給我吧。

果子咖啡

HP3會後心得 (網站企劃輕鬆聚第三次活動)

2010-01-14T16:58:00.000+08:00

會不會發文後下次不讓我參加呢，雖然有點失望還是很開心能參加這場聚會。

失望是因為我是為了想聽聽User Friendly才去的，可是沒聽到什麼東西，倒是結尾大河馬的分享給我大大的驚喜，老實說我沒注意到這場主題。

提供一些經驗分享"運用調查，提升網站使用者體驗"提到的使用著經驗分析其實有更好的方式，旁觀其實不是很好的方式，一般會用眼球分析或告知使用者然後錄影後分析使用者使用行為，旁觀會影響使用者而且無法取得正確數據，譬如停留時間。

「念心理系的人怎麼會來做網站企劃？」很高興台灣有公司這麼做了，將來更有希望了。就我所知GOOGLE有很多人類學跟歷史學家，韓國三星會送員工出國參加各式各樣的訓練其實為的都是從不同角度來了解需求，我們只是走的有點慢，不過我相信國內比較大的公司應該都已經這樣做了。

最後還是感謝講者分享親身體驗，只要有收穫就很開心，認識新朋友也是很大的收穫，可是我只認識一個，有點可惜，下次要加油。

何謂Chrome OS?

2009-12-11T12:03:00.000+08:00

前幾天參加GTUG讀書會，特別請來Google Chrome OS開發團隊的工程師講解何謂Chrome OS，目前Chrome OS能做些什麼以及未來發展方向。

一起來玩Google Chrome Extensions

2009-12-07T18:03:00.000+08:00

如何擴充Google Chrome的功能

不知道大家是不是有跟我一樣經驗。在開發網路應用程式我都用Firefox來測試開發，說它是最好用的瀏覽器也不為過，它可以依不同需求提供很多小工具，用過就很難再回頭去用那個爛IE了。等到Chrome出來後偶爾會用用，速度快就不用說了(那麼簡單的介面不快就很奇怪了)，可是用久了會上癮，變成不喜歡用Firefox了，習慣Chrome快速跟簡單的操作方式，只是要當成開發測試環境就有點功能不足了，如果只是上上網Chrome會是一個很好選擇。

回到正題，Chrome也要開始提供小工具囉，雖然只是起步還什麼都沒有，但相信不用多久就會有很多很棒的擴充套件可以安裝了。下面就透過一個簡單的範例讓大家了解如何製作Chrome Extensions。

開始之前請先更新你的Chrome瀏覽器，你必須安裝DEV版本才能安裝寫好的Extensions，先檢查你的瀏覽器，點選右上角的圖示，如果已經有Extensions這個選項就是DEV版本了，找不到的話請至Dev Channel下載更新版本。
準備開始囉，要用什麼方式開發呢，只要會HTML，CSS，JavaScript你就可以開發Chrome Extensions了，不需要什麼困難的程式語言。

這個小範例是抓取flickr的照片
首先建立一個Extensions存放資料夾，例:c:/extensions

Extensions包含哪些檔案
- 描述檔(manifest.json)
- HTML(背景執行的Extensions不需要)
- JavaScript檔(非必需)
- 其他檔案，如images(非必需)

描述檔(manifest.json)

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "flickr.png",
"popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}

準備一個小圖檔(瀏覽器按鈕圖示)，將檔案複製到同一個資料夾，注意檔名要跟manifest.json檔的default_icon相同(粗體字)"default_icon": "flickr.png"，如不同請修改檔名。

popup.html

<style>
body {
min-width:357px;
overflow-x:hidden;
}

img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>

<script>
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello%20world&" +
"safe_search=1&" +  // 1 is "safe"
"content_type=1&" +  // 1 is "photos only"
"sort=relevance&" +  // another good one is "interestingness-desc"
"per_page=20",
true);
req.onload = showPhotos;
req.send(null);

function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");

for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.body.appendChild(img);
}
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
</script>

啟用你的Extensions

點選右上角的圖示，然後開啟Extensions

點選Load uupacked extension後找到存放完成的Extensions資料夾，確定，完成。
這只是一個很簡單的範例，先玩玩看吧。需要更詳細的資料請至Google Chrome Extensions

What is Google wave

2009-12-06T19:59:00.000+08:00

最近好不容易取得Google wave帳號，玩了幾天想說寫個說明跟大家分享我的使用心得。到底Google wave是什麼東西，又提供哪些功能?現在先看看就好，目前還是測試版，可能會增加很多新功能，也可能會有某些功能在正式上線會消失，開始試玩看看就知道囉。

簡單說Google wave包含所有即時通訊的功能(MSN，Yahoo即時通，GTalk等)，另外也整合了MAIL所提供的服務，我們可以想像成將即時通訊功能最大化，也就是GOOGLE將平常會用到的線上工具整合到Google wave，你不再需要安裝任何軟體，只要有瀏覽器就能使用。

目前還看不出他想提供怎樣的服務，也許GOOGLE也還在摸索，先釋出測試版讓大家幫他找答案。使用上其實有點複雜，對一般使用者來說會有點困難，不是自己摸索就能輕易上手，想普及到一般使用者可能還需要做很大的調整。

Google Wave使用說明

左上角那個區塊是wave(可想像成mail的管理分類區)的管理區

左下角是聯絡人管理區塊

中間那一大塊會顯示所有的wave

點選任何一則wave會將詳細內容顯示在右邊的大區塊

什麼是Wave?

你可以想像成一封email或一次聊天記錄，可以是一筆個人紀錄也可以是多人共同討論會議。事先訂好主題，參予討論的人可以隨時加入討論，方法很簡單，只要將右下角通訊錄的名單拖拉進這筆wave即可。討論過程會被記錄下來，後面才加入討論的人可以像播放影片的方式來了解整個討論的過程，在過程中可隨時加入你的想法或意見。另外討論進行中有任何檔案或文件需要分享只要將它拖拉進來就可以。

待續....

目前還有一些帳號，想玩看看的歡迎留下你的MAIL帳號

阿呆看世界

sigellabs 太陽實驗室誕生

24 節氣網站開發

mobite 老闆的煙台夢

零度下的臨沂調研

Dripple caffee 咖啡角，我們在辦公室開了一家咖啡廳

Hubble 用戶體驗測試

一道叫做「關於我」的料理

料理名稱：關於我

器材：

主要食材：

調味料：

作法：

好溝通的設計師？前端工程師？

團隊的成員有？

全端、後端、前端？

我們遇到問題了

對設計師說：

對工程師說：

善於溝通的設計師

善於溝通的工程師

很多時候只是溝通的方式錯了

把你變成我們

不懂可以問

讓專業的來

不要停止學習

如果上面說的都沒用

什麼是運算思維？

關於CSS HACK的一些建議

padding-left:5px;padding-left:0\9;*padding-left:5px;

如何讓表單更友善

如何讓表單更友善

構成表單的三個主要元件:

1.明確標示必填欄位

2.提供明確的錯誤訊息

常用驗證用戶輸入資料方式:

3.使用客戶端（JavaScript）的資料格式驗證

4.聚焦表單域視覺風格，讓使用者知道他們在哪裡(底色，加粗框)

5.明確顯示完成進度(多頁表單)

6.記憶/暫存表單資料

7.明確定義送出按鈕

8.提供取消按鈕前要想清楚

9.顯示用戶正確的資料輸入格式(2011/04/28 0938-123456)

10.確認表單動線

iPhone Web App Supported Meta Tags

iPhone Supported Meta Tags

viewport

apple-mobile-web-app-capable

apple-mobile-web-app-status-bar-style

format-detection

apple-touch-icon

apple-touch-startup-image

神奇的藍色筆芯

Step 01 首先用藍色筆描繪出你想畫的東西。

Step 02 用顏色較深的筆(2B)描繪邊框，然後掃描或用相機拍下來。

Step 03 用Photoshop開啟圖檔

Step 04 濾除藍色草繪線條

Step 05 完美的手繪框線完成

Finish

Where are you come from?

When....

How ....

Then...

「使用者經驗設計」系列之四：以系統化方法評估設計的易用性

[iSearch 愛搜尋] SEO同好會會後心得

SEO+UEO的完美結合-SEO領袖awoo 林思吾(Jose)

頂尖網管人食夢黑膜分享他看到的SEO世界

SEO硬是要做的10件事情與3個SEO大撇步-王國連(Mr.King)

Sorting Study現場帶您一起動手做-awoo廖玟珊(Ingrid)

你真的清楚按下同意代表的意義嗎

很差的線上購物經驗-YAHOO購物中心

一隻滑鼠搞定Chrome(chrome-mouse-stroke)

注意:您的Chrome瀏覽器必須是4.0以上版本，否則無法使用擴充功能。(下載最新版本)

開始安裝Chrome Mouse Stroke

LU30的第一次

HP3會後心得 (網站企劃輕鬆聚第三次活動)

何謂Chrome OS?

一起來玩Google Chrome Extensions

如何擴充Google Chrome的功能

Extensions包含哪些檔案