關於部落格
Ajax, Ria, Web2.0, WPF, ActionScript, Flash, FlashLite, Music, Rock, HipHop, Interactive Tech, Software, Physical Computing, Book
音樂、免費軟體、程式設計、設計資源、互動科技、搖滾樂、酷網
  • 35341

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

[設計] - 以視覺化圖像呈現你的網站 Websites as Graphs



這個程式的效果是運用Processing寫出來的
因此在觀看時必須有Java Applet
而網站上也有提供Source Code讓大家下載
有興趣的人可以下載回去研究研究~
當然,這個網站的效果其實很簡單
當你進入網站之後
只要輸入你的網址它便能解析你的網站
並將你的網站視覺化呈現出來
而每次輸入同一個網址後所呈現的圖形雖然位置稍微不同
但是整體的結構、節點關係跟顏色分佈都是一樣的
這個大家可以多try幾次看看
當然囉~大家比較好奇的應該是每個顏色代表著什麼意涵?
還有網站的節點分佈形態是怎麼呈現的?
又如何讓每個網站都呈現出不同的形態?
解答如下:

藍色:<a>
紅色:<table>, <tr>, <td>
綠色:<div>
紫色:<img>
黃色:<form>, <input>, <textarea>, <select>, <option>
橘色:<br>, <p>, <blockquote>
黑色:<html>
灰色:其他的標籤


大家看出來了嗎?
沒錯~就是html的標籤(tag)
所以它等於說是將你網站的所有html tag視覺化了!
並利用圖形間的節點關係呈現出網站的html結構
所以當網站的html愈複雜(例如巢狀結構)
那麼所呈現出的圖形相對的也會愈複雜
哇~真的是很有趣的一個應用阿
所以囉~在我原本看到的網站上就有那麼一句話當開場白
"If code is poetry, then it is also art."
多麼簡單的一句話~卻道出了這個程式的核心概念!
最後再補上一張我們公司網站的"圖形"
(html結構比較簡單,所以圖形相對的也比較簡單)

相簿設定
標籤設定
相簿狀態