對優化網頁效能有研究的人都知道，首要的任務是盡量減少 HTTP 請求 (http request) 的次數，例如把多個 JavaScript 檔案合併，把多個 CSS 檔案合併，利用 CSS 精靈和合併的小圖示等等，但是很多人都不知道還有一個 data URL 的密技，讓我們直接把圖像的內容崁入網頁裡面，這個密技的官方名稱是 data URI scheme。

甚麼是 data URI scheme？

假設你有以下的圖像：

把它在網頁上顯示出來的標準方法是：

<img src="http://www.hkpug.net/files/images/check.png"/>

這種取得資料的方法稱為 http URI scheme，同樣的效果使用 data URI scheme 可以寫成： ......閱讀全文 >>>

甚麼是 favicon？

Favicon 是 favorite icon 的簡稱，幾乎所有專業網站都有 favicon，它是一個由不同解像度的圖標結合成的檔案，例如它可能結合了一個 16x16 和一個 32x32 的 .bmp 檔案於一身，Favicon 的檔案延伸名稱是 .ico。在大部分的瀏覽器，這個圖標會在網址旁邊或者在書籤頁裡面顯示。通常 favicon 反映了該網站的設計或者有關機構的商標。

甚麼是 .ico 檔案？

Favicon 是一個由不同解像度的圖標結合成的檔案，內含的圖標有些是 16x16，有些是 32x32，有些只有 16 種顏色，有些有 256 種顏色，瀏覽器或其他使用 favicon 的系統會根據當前的需要，選擇最適合的解像度和顏色數量的版本來顯示，倘若沒有完全吻合要求的版本，它們可能要把圖表拉大、縮小、降低顏色的數量等等，這些操作可能會使圖標的素質變得不理想。

.ico 和 .bmp 檔案有甚麼不同？

不少人誤以為 .ico 等於 .bmp，其實 .ico 是 .bmp 的集合，它有自己的檔案格式，一個 .bmp 檔案必須透過轉換程式才可以變成 .ico 檔案。很多網站的 favicon 包含一個 16x16 和一個 32x32 解像度的圖標，16x16 的版本用來在網址列和瀏覽器的書籤中顯示，有些瀏覽器容許用戶把網址列的圖標拉到桌面成為一個網址捷徑，這時 32x32 的版本便派上用場。微軟建議 .ico 檔案包含以下三個圖標： ......閱讀全文 >>>

一間荷蘭營銷公司 Sprang 想出了一個節省打印墨水的聰明方法：在字體上打孔！他們新的 EcoFont 字體在每一個筆畫上打上有如瑞士奶酪般的孔洞，減少每一個字母的印刷面積，從而減低印刷時所消耗的油墨，Sprang 公開這款字體讓大家免費下載。據官方網站說，相比傳統的字體，這款字體平均可節省 20% 墨水。 ......閱讀全文 >>>

最近幾天接二連三有知名網站遭黑客入侵，包括討論區系統 phpBB 的官方網站（phpBB 仍然是安全的，漏洞出在網站上另一個應用系統）及網上書籤網站 Ma.gnolia，網站被入侵已經不是新聞，很多被入侵的系統內的用戶資料被盜取，例如網上求職者網站 Monster.com 上星期被入侵後，數以十萬計的求職者個人資料被盜；有些網站的資料被抹去而無法復原，例如 Ma.gnolia 便承認他們無法復原用戶的書籤，唯有透過網上其他資源盡力恢復用戶的公開資 ......閱讀全文 >>>

我們在設計用戶介面時經常會遇到一些細小、對易用程度未必有很大影響的問題，其中一個就是對話框中的按鈕次序：應該「確定／取消」還是「取消／確定」？用戶介面專家 Jakob Nielsen 分析了這個問題，他的建議是：跟隨平台的一般做法，比優化介面更重要。

Jakob Nielsen 認為兩者都是合理的選擇，兩者都有支持者： ......閱讀全文 >>>

由 SitePoint 出版，Corrie Haffly 編寫的 PhotoShop 入門書 The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques (譯名：PhotoShop 文摘：101 個網頁設計密技、戲法及技巧)，現在可供 ......閱讀全文 >>>

網頁的導航菜單 (navigation menu) 的設計有甚麼要訣？有名的網頁介面顧問 Jakob Nielsen 的研究發現，文字靠右對齊的菜單令用戶讀起來更容易，除此以外，他還有幾項有關導航菜單的設計指引，見解獨到精闢，值得我們參考。 ......閱讀全文 >>>

Yahoo! 的首席網站優化工程師 Steve Souders 從去年三月至九月發表了一系列優化網站的 14 項原則性建議，他和他的團隊研究後發現，下載一頁網頁的時間，80% 是花在瀏覽器的工作上，這些工作其實可以透過簡單的優化來刪除掉，從而大幅提高網站的效率，我們不妨看一看這位專家給我什麼建議。 ......閱讀全文 >>>

Tinymce 是其中一個熱門的基於 JavaScript 的所見即所得文本編輯器，現在正式推出 3.0 版。 ......閱讀全文 >>>

曾經管理網站，特別是論壇、網誌之類容許訪客寫文章的網站，一定見識過濫發文章／濫發電郵的威力，所以很多網站管理員都會安裝／啟動一個稱為 Captcha 的驗證系統，當訪客貼文章的時候，要從一個圖像中辨認出其中的文字然後連同文章一拼呈交，這些圖像都是隨機產生、充滿訊燥、字體故意被扭曲的圖像，只有人類才有能力正確辨識，這樣便可以杜絕網絡上的壞蛋使用機器人大量貼出文章。 ......閱讀全文 >>>

Jakob Nielsen 有一篇文章討論下拉選單作為用戶介面應注意的地方，文章寫於 2000 年，最近他針對滾輪滑鼠對下拉選單使用性的影響，補強了這一篇文章，對用戶介面有興趣的朋友，這是一篇不可多得的好文。

Jakob Nielsen 認同下拉選單是網頁設計中一個很有用的工具，可是由於設計人員對它的濫用和誤用，它有限的互動性經常引起使用性的問題，有時甚至對用戶做成混亂。以下是下拉選單經常出現的地方： ......閱讀全文 >>>

Jack Pickard 在 Accessites.org 發表了一篇文章，建議大家以後在 HTML 中放棄使用 Transitional DOCTYPES。

HTML 的第一行是用來表示所使用的 HTML 版本，使用 Strict DTD 表示檔案中沒有「不建議使用」的 element 和 attribute，使用 Transitional DTD 表示裡面含有這些 element 或 attribute。對於一直有人倡議推廣 Strict DTD，部分人的回應是：「這是我的網站，我喜歡怎樣便怎樣。」 ......閱讀全文 >>>

網上有很多圖像處理、相簿管理的網上應用系統，容許我們把大圖像裁剪為較小的圖像，但是用戶必須輸入裁剪框的座標和大小，對一般人來說顯然十分困難，Dave Dash 在 Spindrop 發表了一篇教學文件，指導我們怎樣利用 DHTML（JavaScript + CSS + HTML）來製作一個靈活易用的圖像裁剪介面。

在學習前不防先看看 Dave 的示範。

......閱讀全文 >>>

自從有了 JavaScript、CSS、DOM Scripting 等技術，無數網頁開發人員便費盡心思希望在 HTML 規範之外製作互動性更強的網頁，但有時這種努力換來的卻是一個無聊可笑的頁面。

Alex Walker 在 SitePoint 發表了一篇網誌，舉出了有名的 Art.com 藝術畫作銷售網站，這個網站經銷超過 30 萬幅畫作，網站的設計也非常專業，流暢明快的風格足以比美 Flickr。 ......閱讀全文 >>>

Dean Edwards 研究 document.onload 的缺點與及解決方法已經一段時間，現在他終於提出了一個跨瀏覽器而又簡潔的終極解決方案。

事情的原委是這樣的：很多開發人員使用 document.onload 來啟動 JavaScript 進行一些網頁效果的初始化工作，例如動畫菜單、Ajax 應用程式等，但是 document.onload 只有當網頁的所有內容，包括圖像、JavaScript、動畫、影音檔等全部下載後才會被觸發，倘若這些檔案容量很大，或者儲存在一個不受你操控的伺服器上，網頁上的效果很可能被延遲啟動，甚至完全不能啟動。 ......閱讀全文 >>>

「很多機構的網頁都有太多令人煩擾的東西，而且可用性很低，這等於給競爭對手讓路。」InfoWorld 一篇有關網頁設計的文章這樣說。

這篇文章引述顧問服務公司 iFocu 的高級可用性顧問 Theresa Cunnington 的話，用戶瀏覽網頁時一般的耐性都很低，Cunnington 說：「不論你的網頁設計得有多炫目，只要用戶認為沒有用，他們就會轉向你的競爭對手，而這只不過是用滑鼠按一下那麼簡單。」 ......閱讀全文 >>>