24小時打造出.com 網站

意譯一篇今天看到的好文章
講如何在四天共24小時內，打造出一個網站服務 Wigitize.com。
http://dominiek.com/articles/2008/1/6/building-a-com-in-24-hours

作者是一個程式魔人，但是這篇文章是他嘗試透過多領域訓練(multi-disciplinary)的方式，整合各種現成的工具及網路服務，不重複造輪子，並補強他的弱項：設計、前端程式、系統管理及搜尋優化(SEO)，並成功在24小時內打造出web 服務。

Widgetize提供的服務，可以讓使用者透過第三方的RSS/ATOM feed，製作成embedded widget。最常用的data feed格式RSS，並不適合做Widget，因為RSS feed需要較為複雜的伺服器端處理，才能呈現資料；Widget通常透過一種聰明的技術JSON，讓使用者的瀏覽器得以更輕鬆取得第三方的資料。

服務特徵：
1. 簡單：輸入該BLOG的URL即可取得RSS
2. 聰明：必須能自動偵測這些資料的feed
3. 可整合性：提供API給其他網路服務


設計實作，3hr
作者使用Adobe Photoshop (CS3) 進行網頁設計，透過CS3的Blending Options做出類似web 2.0的色彩效果。網站配色建議
產生Web 2.0效果的Logo、Button。

將整個Project檔案放在線上管理員，30min
Assembla這個網站提供線上的SVN及專案控管免費服務，內含Subversion、trac及wiki功能。作者申請好後將檔案上傳。

用Ruby On Rail 及Textmate 開發，4hr
這部份是用ROR開發，所以比較快，我不懂，所以也不詳述了。程式邏輯分為：

• 將輸入的URL接到feed detector及aggregator。
  
• 確認集合的資料儲存成JSON格式
• 製作一個Widget的模子，可以儲存URL、偵測URL及JSON資料。

處理HTML的CSS，1hr

作者主張先開始處理html的CSS，理由只有一個，讓整個網站在早期就看起來很真實很可用，Kimochi爽效率才高！

• 先開發Firefox版本，建議使用Firebug軟體，可讓速度更快；
• 記得每次要把一些基本會用到的CSS先放進去；
• Padding and margin：這兩個很重要，但是最難調，盡量用margin而非padding；另外，盡量用margin-bottom而不要用margin-top，因為每個物件通常都比較容易上浮；
• 時下流行：採用美觀的字體(作者大量使用Trebuchet MS極少數的Ariel)
• 盡量不要用銳利的黑色，建議可用#111或#222；
• tables最好只用在table上，不要用在layout上；
• AJAX的註解：AJAX千萬別拿來作為瀏覽效果用，有很多搜尋優化(SEO)和易用性的問題。
  

AJAX的轉動效果(Spinner)，2hr
AJAX為了要顯示傳輸狀態，會有個轉動的javascript效果，作者的作法在此，他承認這一塊他花太久時間。PS1. 網友另外建議了另一個網站ajaxload，提供相同的服務。

設計及撰寫footer程式，2hr

作者認為footer扮演網站地圖的重要角色， last.fm 和 snooth.com是兩個很好的範例網站。


使JSON可嵌入，3hr

包含三步驟：

• 定義包含的列(ul)
• 引入JS Library，內含特殊的呼叫功能wigitize_feed()
• 將JSON檔引入，呼叫wigitize_feed以取得適當資料。
  

讓機制在後台開始運作，3hr

這段作者以ROR的BackgrounDRb實作，略過。

完成API，4hr
參考成品

設定網域及網域email，30min

設定主機，1hr

作者選擇了比較高檔的主機商 slicehost.com，每月20美金，可享有256MB空間和獨立IP

提示及警告訊息，3hr

作者設計了當系統遇到scaling problem所呈現的頁面，並提醒網友可以收藏網站為書籤，addthis.com提供整合各家社交書籤的按鈕。另外還有一些提醒訊息。

網站統計資料及搜尋優化，1hr

10分鐘就可以裝好Google Analytics，作者另外裝了getclicky.com的統計工具。
搜尋優化的部份，作者參考how to provide different meta tags in rails、some discussion about whether to use www. or not，並將www的網域名稱省略，導向http://wigitize.com的短域名。

選擇網域名稱也對SEO很重要，若有人在Google查詢時拼錯成widgetize，只有105個結果；而且Wigitize.com是動詞！

未來改進的空間：

• 未來增加「last wigitized sites」 and 「most wigitized sites」，這些頁面會被搜尋爬蟲爬到，並提供外部連結，應對搜尋優化有幫助
• 增加sitemap.xml
• 在Widget上增加病毒式傳播的元素，例如FeedBurner的按鈕會出現在有名的部落格上。
  

####

PS2. 網友建議其實用Yahoo!Pipe也可以玩出類似效果