好的設計=好的生意

最近在看"經典設計150年"這本書。
書裡講的主要是過去150年來的設計史，哪些重要的設計師在什麼年代，在什麼環境下，發展出新風格流派，創造經典的設計。

看現今最紅的經典產品設計，引起人們對設計的注意和興趣的，當然首推蘋果的ipad、iphone、ipod，是不是很適合這句話：好的設計就是好的生意。

什麼是好的設計？只有百看不厭，才能成為經典，而簡約是經典設計的常客。以前讀畫作賞析時，那時作者就說，什麼是大師級作品，一般人無法像學畫的一樣講出一堆道理，但是對於平常人來說，要分辨出好作品最好的方法：作品一看驚豔、再看眼睛仍會發亮，百看不厭者，那就是經典大作。

過去Sony在1955年推出第一個全面電晶體化的收音機TR-55 Sony，暢銷全世界，Sony也因此改名叫Sony，再看收音機TR-55 Sony的設計，果然也是相當簡約，完全不輸給蘋果的現代設計，何況還早了近半個世紀。

SONY收音機　從書上翻攝

SONY收音機和IPOD的暢銷有很多共同的地方，

1. 產品功能，凌駕競爭對手
2. 外觀具簡約美，展現設計美的價值
3. 在技術上，做得比大家想得更輕薄小巧

產品主功能本身夠強是必要的，至於不是很必要的功能，或是不那麼常用到的功能，就不一定要放在產品設計裡，尤其是附屬功能並無法展現競爭力時，更沒有必要去複製化。

科技產品汱換快速，有些功能還來不及用到，也可能用沒二三次，就要整個換新的，但增加的重量及功能複雜度與金錢卻早已是成本。

xml教學筆記

XML ( eXtensible Markup language ) 重點整理:

1. XML跟HTML一樣是標籤語言，HTML用在網頁如何顯示資料，XML用在傳輸、交換和儲存資料。
2. XML 所有的Tag標籤必須自定義，而HTML的標籤則是事先定義好的。
3. XML 資料是以plain text format純文本格式儲存，因此可以相容於各種平台和軟體。各種軟體均可閱讀，是最方便的資料交換之一。
4. XML 本身並沒有做任何動作。
5. 被用來開發的新網際網路語言：XHTML、WSDL、RSS、 RDF、SMIL、WAP、WML。
6. XML採用樹狀結構：分為根部the root和枝葉the leaves二部分，二者都可以附加屬性attributes。
   根部the root：必需要有。
   枝葉the leaves：可以分為child、subchild、siblings。
7. XML屬性attributes，必須使用雙引號””或單引號’’。如：category="phototype"
8. XML區分大小寫
9. 在XML中空白格會被保留
10. 可任意擴充而不會中斷已在使用的應用程式
11. 所有標籤都必需使用結束標籤
12. 使用XMLHttpRequest物件，作為取用XML資料的便捷方式
13. 所有瀏覽器都內建XML解析器，如果有不想被解析的程式碼，可以放在<![CDATA["不被解析的程式"]]>
14. 要設計XML資料的顯示方式有二種：CSSXSLT
15. XML可以自由選擇要將資料以element元素或attribute屬性方式儲存，但在選擇時，盡量以element為主，理由是：attribute屬性無法使用樹狀結構，未來不容易擴充，且不易閱讀及維護，只有在metadata部分才使用attribute屬性。

 <?xml version="1.0" encoding="ISO-8859-1"?>
 <book>
 <author>John</author>
 <title>Secret</title>
 <price>250</price>
 </book>

免費psd、icon、按鈕

免費的psd、icon、按鈕，可以大大地美化網站，對於不善於美工或是沒有時間多做設計的人，利用免費的資源，是一個不錯的選擇。
http://365psd.com/這個網站提供的免費的psd、icon、按鈕，根據他們的聲明：Don’t steal this design. You can use the files for whatever you want though. Ain’t that something?　
我會這麼解讀：個人使用或商業使用都不受限制，但不得剽竊。
很多免費資源，都會限制商業用途，但其實個人使用和商業使用，在現今並不太好區別，尤其在部落格上，除非完全沒有放置任用廣告，並且完全跟工作無關，而即使沒有廣告，也有可能獲得收入，最廣義的商業使用，只要有獲得收入的，都算在內，不管是什麼形式。
喜歡這句：whatever you want

CSS：圖片倒影教學

CSS圖片倒影語法：
-webkit-box-reflect: <direction> <offset> <mask-box-image>

• <direction>：用above, below, left 或 right，分別表示圖片產生倒影的方向為上、下、左或右。
• <offset>：設定倒影與圖片的距離，例如：3px，可不設定，若沒有設定預設為０，即圖片與倒影緊連無距離。
• <mask-box-image>：圖片光罩，可不設定，若沒有設定預設為０，即無光罩，倒影和圖片相同。

舉例：向下10px產生倒影

-webkit-box-reflect: below 10px 

CSS3 的陰影和漸層

box-shadow語法：

box-shadow: ;

horizontal offset:：從左到右的陰影
vertical offset：從上到下的陰影
blur：為模糊的量，最小為０

實際的寫法要寫三個，因為有些瀏覽器還沒支援

box-shadow : rgba(0, 0, 0, 0.1) 0px 0px 8px;

-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

 漸層的語法

-webkit-gradient( linear, , , from(), to())

-moz-linear-gradient(, , )

新手寫html要養成的習慣

寫html要養成的習慣（編譯自國外）

1. 要結束標籤
   ....
2. 在頭部宣告正確的DOCTYPE
3. 不要使用行內style
4. 將外部CSS放在....中
5. 將javascript程式碼放在html底部，即剛好在前，可加快網頁下載速度
6. 不要使用行內javascript
7. 常驗證html碼
8. 使用firebug
9. 使用英文小寫，不要再用大寫
10. 使用h1,h2,h3,h4,h5,h6，甚至可用h6代替p
11. 如果是部落格，將h1保留給文章標題使用
12. 下載yslow來用
13. 使用ul清單來做導覽列
14. 修掉所有不必要的元素，尤其
    
15. 給所有圖片都加上alt說明
16. 多參考優秀網站的頁面原始碼
17. 給每個元素都設定style
18. 使用twitter
19. 學photoshop
20. 學會每個html標籤
21. 將網頁排列整齊
22. 新手不要使用frameworks
23. 選一個好用的編輯軟體
    
    • Mac: Coda, Espresso, TextMate, Aptana, DreamWeaver CS4
    • Pc: InType, E-Text Editor, Notepad++, Aptana, DreamWeaver CS4
24. 網站完成後，壓縮：
    
    
    • javascript compression service: Javascript compressor, JS compressor
    • CSS compression service: CSS Optimiser, CSS Compressor, Clean CSS
    
    
    
    
    

20個精簡網頁生意的方法

這篇文章簡譯自20 ways to streamline your web business
，主要是針對網頁設計師的建議，讓你多賺一點，少做一點，就是事半功倍，對其他行業也蠻有參考價值，因為是要點式的翻譯，如果想看詳細的請自行查看原文，如有謬誤也歡迎指正。

1. 事先做好可重複使用的xhtml/css檔
2. 買個檔案櫃來用：用字母或日期分類做好歸檔，方便隨時取用
   
   
3. 設計一個簡單通用的表給新客戶填寫：把最常跟新戶客談論的話題事先設計好表格讓客戶填寫，不必每次都花時間重複問過
4. 為不同類型的客戶隨時準備好２－３種電梯演說（elevator speech）：所謂elevator speech就是在搭電梯般短暫的時間內就可以做完一個簡介，讓人可以有大致的了解。做為一個自由業，碰到的每個人都可能是潛在客戶，一個簡短充分的介紹，讓你不錯失每個成交機會。
5. 對大型計劃使用專案管理
6. 利用gmail的制式回答（canned responses）：當然使用其他email服務，也可以自行事先做好各種制式回答，例如客戶的錢一直沒入帳，就再發一次催款mail
   
7. 找專家做好一個合自己所用的契約範本：以後新案件，只要做細部的名稱、日期、價錢等修改即可
8. 提供介紹獎勵給現任客戶：現任客戶是行銷的基礎，提供獎勵讓他們樂意幫你傳送口碑，記得要讓他們了解只有介紹付費的新客戶才有獎勵，且在案子完成後才能領到獎勵
9. 事先做好慣用的photoshop psd檔：將常用的設定做好放在固定的檔案夾中，每次取用就能節省不少時間
10. 訂閱工作版（job board）的rss：將常看的工作版集中在一起，不用每次都要花時間去不同點看，省時省力
11. 外包設計相關工作：把自己比較不喜歡或不擅長的部分外包，創造雙贏
12. 都外包吧：當你已經工作量過大了，或者是你忙著開發新業務，無法兼顧時，原本的工作沒理由不可以外包，也許只保留一小部分工作給自己，其他通通外包
13. 顧一個會計（師）：帳的事就交給會計師去煩吧－－帳歸帳，錢歸錢，錢一定要自己管，千萬不要去挑戰人性的貪
14. 做好常見問答集：客戶問的問題就是那些
15. 做好一、二個wordpress （theme framework）主題架構：這也是個做好可重複使用檔案的省時省力方法。比較特別的是，作者會先設幾個假帳號，好讓文章、標籤、分類、意見看起來熱鬧些
16. 使用texter程式：這是一個類似WORD自動圖文集的設式，可是設定一些常用的文句和程式碼，減少打字和coding的時間，當然他的優點就是不限於只能在WORD中使用
17.  顧用助理：不一定是全職
18. 使用待辦清單：推薦一個免費、簡單、好用的日程表軟體Teux Deux，增加日生產力
19. 簡化發票：利用Invoice Machine 或 Freshbooks製作發票的軟體，透過網上付款工具，簡化發票、收帳過程
20. 使用編碼架構（code framework）：不管是php、jquery、css，找一個合用的code framework，可以節省很多時間

結論：精簡業務，可以有更多時間享受生活，也能使工作更加突出。