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


在工作繁忙之餘
還是要上來跟大家分享一些有趣的東西
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結構比較簡單,所以圖形相對的也比較簡單)

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: