XRAY Bookmarklet:檢視網頁元素的Box Model資訊

XRAY Bookmarklet

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

在robots.txt裡指出sitemap的位置

要幫助搜尋引擎機器人找到你的XML sitemap,可以在網站的robots.txt裡面指出檔案的位置,只要加上這麼一行:

Sitemap: http://www.example.com/sitemap.xml

[via Pete Freitag's Homepage]

延伸閱讀:獨孤木with diggirl.net - 面對search engine的貞節牌坊:robots.txt(18禁?)

whos.amung.us

web tracker

whos.amung.us提供即時的網站在線人數統計服務,特色在於免註冊、免設定。

進入whos.amung.us的首頁後,系統會自動產生一段圖片程式碼(這段程式碼中,會帶著一組8位的亂數編碼,所以重新整理頁面後,得到的程式碼便會不同),使用者只要將這段程式碼複製後,貼在網站的任一處,whos.amung.us便會即時回傳目前網站的在線人數(real-time users online counter),顯示在圖片中(本文上方的圖片即是如此產生)。

如果你想隨時監控自己網站的在線人數,whos.amung.us還提供了一個火狐附加元件(請見其首頁下方),安裝後,先到「工具」-「附加元件」,找到「whos.amung.us Users Online Counter」,按下「選項」,輸入自己貼在網站的程式碼中,那組8位亂數編碼(例如http://whos.amung.us/show/3xxxxxx3),再重新開啟火狐,便可以直接在火狐的狀態列中看見目前網站的在線人數。

最後,如果你覺得whos.amung.us這個網址有什麼怪怪的地方,沒錯,確實是應該拼作「among」才對呀 ;)

[via Lifehacker]

Technorati百大Blog的版面欄位統計

WebJillion針對Technorati上排名前100大的blog,進行了版面欄位的統計分析。扣除掉spam和重複計算的blog之後,這份清單共有82個blog,而版面欄位的分析結果為:

  • 1欄式:3個
  • 2欄式:35個
  • 3欄式:43個
  • 4欄或更多:1個

三欄式版面的普及,相信和主流螢幕解析度已經提高至1024×768有很大關係(參考browsersize.com,使用1024×768解析度的網民達57%)。以Yahoo! Tech為例,頁面寬度增加之後,在右側加上了My Tech面版,而使用者還是可以透過「Change Screen Width」的按鈕,將頁面寬度縮小到800px以內(My Tech成為隱藏式面版),新版的美國Yahoo首頁也採用了這樣的技術。

詳細的Technorati百大blog版面欄位統計表,請參考WebJillion的原文

相關文章:
讓使用者討厭的網站……
Screen Resolution and Page Layout

文字內容在原始碼內的位置會影響SEO嗎?

最近在del.icio.us的一篇熱門文章:16 Elements You Must Include in Your Site Design提到了這點:

Place content near the top of the page
Search engines spider the content that comes first in your source code. This can easily be done by using cascading style sheets.

也就是說,該文的作者Herman Drost認為,將文字內容置於原始碼越前端之處,越有助於搜尋引擎抓到這些內容;並提及可利用CSS達成此一目的(例如在二欄式網頁的HTML原始碼中,將content區塊置於sidebar區塊之前,再利用CSS讓版面看起來是sidebar在左邊,content在右邊)。
| 繼續閱讀…

Pages: « 1 2 3 4 5 »