drakeguan.org

這個版型，是有天在逛 CGTalk 時，赫然發現，EXPOSÉ 已經要出第五冊了，嚇了一跳。感覺時光飛逝，腦子裏還很清楚第一冊出現時的樣子與光景，現在已經是第五冊了。於是連到它的發行商 Ballistic Publishing，看到了它的網站，就喜歡上了…

下頭是使用了 google analytics 這個網站分析服務後，裏頭有關來 drakeguan.org 的訪客，他們的螢幕解析度報表。

報表中指出，解析度為 800x600 的還是有不少人，約莫 5 %。也就是說，每二十個來訪的人，就有一個人的螢幕解析度是 800x600 的，好像不多，但也不少。

這個網站的版型在設計時，最低的限度，就是要讓 800x600 的人，還是可以看到全貌，不會有網頁內容大於螢幕寬度的情況發生。不過最近在想，是該換個版型了，而且也該變寬一點了，不然老是無法放再大一點點的圖，也無法學 Cool Hunting 那樣，每篇文章的關鍵字和工具列在文章的右頭。

而且想說，既然這個網站的內容更新得又慢，內容又短，那還不如花點力氣在版型上，讓來的人有煥然一新的假象也不錯。

5% 應該是不多吧，就這麼決定，下班後，抽點空出來玩玩 html + css 好了。

網頁版型的小小改變…

因為右邊欄位一直對不齊，而且不同的瀏覽器，看起來會不一樣，感覺有點醜。

決定使用 Yahoo! UI Library 裡頭的 Reset CSS。透過它，可以先將所有 html 語法「歸零「，這樣在每個瀏覽器下看起來的樣子，就都差不多了。這裡有一些介紹。

OctaGate 寫了個 SiteTimer，使用它，打上你的個人網站或 blog 的網址，就會即使地看到存取你的網頁需要的時間，而且還是很詳細地，依照每個檔案列出來，像是 css, javascript, images, flash 等。下頭是輸入 drakeguan.org/daily 的結果：

每一行有三種顏色，黃色代表瀏覽器送出連線要求後，一直到與伺服器取得連線的時間；綠色代表連線建立後，一直到收到資料的等待時間；最後的藍色為抓取資料的時間。也就是說，藍色的 bar 愈長，表示存取這個檔案的時間要愈久，原因可能是檔案比較大，或是連線品質比較不好，或是伺服器送出檔案的速率等等。

上圖可以看出，連到 Zooomr 的那張圖的時間花最久，接著是 2006 Halloween 的那一張圖，然後有兩個 javascript（分別是 prototype 和 lightbox），至於第一行的時間，則是指整個 .html 文字檔的傳輸時間。其中紅色的那一行表示沒有抓到圖檔。

這個分析是由瑞典首都斯德哥爾摩（Stockholm），北歐第二大城市，連過來的。所以數據代表的意義，有點像是，假設你住在斯德哥爾摩，然後連到 drakeguan.org 所花的時間。挺好玩的 :)

ps. 它是使用 ajax 做出來的，使用起來非常方便，而且會看到動態存取的過程，挺 nice 的。這年頭，ajax 的動態與方便，已經被用到「淹腳目」的程度了。