推文按鈕

收進你的MyShare個人書籤

2008年1月8日 星期二

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效果的LogoButton

將整個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.fmsnooth.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 railssome 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也可以玩出類似效果




1 則留言:

Zechary 提到...

謝謝你的介紹, 學到不少東西. 以前也想過要寫Default CSS, 現可以參考他介紹的.

不過關於slicehost.com, 好像有些誤會了, 不是256MB"空間", 而是內存, 空間是10GB, 以VPS來講, 以我所知應該是最便宜又專業的.