去年曾經在「標示檔案連結類型的javascript」這篇文章中，記錄過Marko Dugonjić所寫的一小支javascript，搭配相應的css後，即可在檔案連結旁顯示圖示，也會將這些檔案自動開啟在新視窗中，為網頁的易用性（usability）加分不少。

最近因為在學習jQuery，所以試著把這支script改寫了一下，並且順便解決在IE內顯示時的BUG。 | 繼續閱讀…

HTML Entity Character Lookup是一支方便的速查程式，使用者直接輸入與HTML特殊字元相似的字母或符號後，程式便立即傳回搜尋結果。例如輸入「c」可以查到「©」，輸入「tm」可以查到「™」，而輸入「E」，可查到「Σ」。

我很愛用在麵包屑（breadcrumb）導引裡的「»」，每次都記不住正確寫法應該是「＆raquo;」，以前我會去XHTML Character Entity Reference裡面翻找，現在用這個工具就方便很多。（題外話，在麵包屑裡面用大於符號「>」看起來很不對勁，還是「»」順眼）

這麼好用的工具，當然少不了MAC Dashboard widget版本和瀏覽器內建搜尋版本，另外也有一個火狐外掛可以用。作者真是造福人群啊。

SURL（Software Usability Research Lab）重新檢視一份2002年時的電子商務報告，發現其中許多網站購物車的易用性（usability）問題，至今仍然存在，包括：

1. 用使用者不易瞭解的名詞指稱購物車（Calling a shopping cart anything but a shopping cart or whatever is appropriate for the target users of the site’s location）
2. 將按鈕標示為「購買」而非「加入購物車」（Requiring users to click “Buy” instead of “Add to shopping cart”）
3. 當使用者將商品加入購物車時，沒有顯著的視覺提示（Giving little to no visual feedback that an item has been added to the cart）
4. 使用者每次加入商品後，都被強迫瀏覽一遍購物車的內容（Forcing the user to view the shopping cart every time an item is placed there）
5. 將物品加入購物車之前，要求使用者購買其他相關產品（Asking the user to buy other related items before adding an item to the cart）
6. 要求使用者必須先加入會員，才能將商品加入購物車（Requiring a user to register before adding an item to the cart）
7. 要求使用者將商品數量改為0以移除該商品（Requiring a user to change the quantity to zero to remove an item from the cart）
8. 使用者必須閱讀指南才知道如何使用購物車的功能（Not making it evident how to update the items in the shopping cart）
9. 使用者必須捲動頁面才能看到更新購物車的按鈕（Requiring a user to scroll to find an update cart button）
10. 使用者無法在結帳前得知所購商品（加上運費）的總金額（Requiring a user to check out before showing the final costs including shipping and tax）

以上只是翻譯GUUUI上面的節錄內容，SURL的原文包含了豐富圖表，非常精彩，另外還點出了兩個新的設計問題，包括：1. 安全性 2. 無法在結帳前得知商品是否還有庫存。從事電子商務的朋友們，不可錯過。

XRAY是一款可安裝於Safari、Firefox、Camino和Mozilla的bookmarklet（書籤小程式，IE版本尚在開發中），使用者可以用它來檢視網頁中各項(X)HTML元素的Box Model資訊。

只要在原始網頁中，將灰色的「XRAY」連結拖曳到瀏覽器的書籤工具列，便安裝完成了。之後點一下Xray書籤即可進入檢視模式，網頁中會出現一個黑色半透明的視窗，此後只要在網頁的任意元素上面點一下，其box model資訊（元素、id、class名稱、hierarchy關係、position、margin、padding等值）便可在該視窗中一覽無遺。

雖然上次介紹過Web Developer Toolbar裡面也有這個功能，但是XRAY的顯示介面除了較精美外，還很貼心地在黑色半透明視窗的右上角作了一個「關閉」的按鈕，讓使用者不必重新整理頁面即可離開此檢視模式。缺點則是不像WDT會以紅色框線預示選取範圍，遇到較複雜的box model，常要點個幾次才能正確找到自己要看的元素。[via Zeldman.com]

相關套件：
CSSViewer
Aardvark

Smiley Cat今天的10 Things You May Not Know About the Web Developer Toolbar很有可讀性，看完後真有「以後用不到這麼好的套件怎麼辦」的感覺。以下是我針對這篇文章所做的摘譯（粗體為我所加），也歡迎同好們的分享與回應：

1. Miscellaneous – Display Line Guides

想要快速檢測網頁中的某些元素是否彼此對齊，這個功能可以讓你隨心所欲地新增垂直或水平準線。

2. Images – View Image Information

可以一次在分頁中列出網頁中所有圖片（包括背景圖）的路徑、尺寸和檔案大小。

3. Information – View Color Information

在分頁中以色碼和色塊展示網頁中所有的顏色。

4. Information – Display Element Information

使用組合鍵Ctrl+Shift+F可以啟動「檢視元素資訊」的功能，接著點選任一元素，即可得知其class或id名稱、位置，以及與其相關的上下階層元素名稱。

5. Information – View Page Information

會彈出視窗顯示頁面的各類資訊，直接點選工具列右側的綠色勾勾亦可啟動此功能。 | 繼續閱讀…