[jQuery] 依連結的檔案類型秀出圖示

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

去年曾經在「標示檔案連結類型的javascript」這篇文章中,記錄過Marko Dugonjić所寫的一小支javascript,搭配相應的css後,即可在檔案連結旁顯示圖示,也會將這些檔案自動開啟在新視窗中,為網頁的易用性(usability)加分不少。
HTML Entity Character Lookup是一支方便的速查程式,使用者直接輸入與HTML特殊字元相似的字母或符號後,程式便立即傳回搜尋結果。例如輸入「c」可以查到「©」,輸入「tm」可以查到「™」,而輸入「E」,可查到「Σ」。
我很愛用在麵包屑(breadcrumb)導引裡的「»」,每次都記不住正確寫法應該是「»」,以前我會去XHTML Character Entity Reference裡面翻找,現在用這個工具就方便很多。(題外話,在麵包屑裡面用大於符號「>」看起來很不對勁,還是「»」順眼)
這麼好用的工具,當然少不了MAC Dashboard widget版本和瀏覽器內建搜尋版本,另外也有一個火狐外掛可以用。作者真是造福人群啊。
SURL(Software Usability Research Lab)重新檢視一份2002年時的電子商務報告,發現其中許多網站購物車的易用性(usability)問題,至今仍然存在,包括:
以上只是翻譯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]
Smiley Cat今天的10 Things You May Not Know About the Web Developer Toolbar很有可讀性,看完後真有「以後用不到這麼好的套件怎麼辦」的感覺。以下是我針對這篇文章所做的摘譯(粗體為我所加),也歡迎同好們的分享與回應:
想要快速檢測網頁中的某些元素是否彼此對齊,這個功能可以讓你隨心所欲地新增垂直或水平準線。
可以一次在分頁中列出網頁中所有圖片(包括背景圖)的路徑、尺寸和檔案大小。
在分頁中以色碼和色塊展示網頁中所有的顏色。
使用組合鍵Ctrl+Shift+F可以啟動「檢視元素資訊」的功能,接著點選任一元素,即可得知其class或id名稱、位置,以及與其相關的上下階層元素名稱。
會彈出視窗顯示頁面的各類資訊,直接點選工具列右側的綠色勾勾亦可啟動此功能。 | 繼續閱讀…