HTMLソースを解析して視覚化

『Websites as graphs – an HTML DOM Visualizer Applet』にURIを入力するとHTMLソースを解析してその結果を視覚化してくれるみたいです。自分のブログの解析をしてみた結果がこれ↓

それぞれの色の意味は
青:リンク(<a>タグ)
赤:テーブル(<table>,<tr>,<td>)
緑:divタグ
紫:イメージ(<img>タグ)
黄色:フォーム(<form>,<input>,<textarea>,<select>,<option>タグ)
オレンジ:改行と引用(<br>,<p>,<blockquote>タグ)
黒:ルートである HTML タグ
グレイ:それ以外のタグ

ってことは赤が多いとテーブルレイアウトのサイトってことになる。
このブログはリンクと引用が多いですね・・・。
なにより見た目もかわいい :oops:

Flickrに「websitesasgraphs」というタグをつけてスクリーンショットが集められてるみたいです。→http://flickr.com/photos/tags/websitesasgraphs/

参考サイト:
caramel*vanilla » サイトのHTMLを視覚化 – Websites as Graphs
秋元@サイボウズ研究所プログラマーBlog: HTML構造のグラフによる可視化

Trackback URI: http://blog.ochanocosaisai.com/wp-trackback.php?p=124

気軽に記事を評価してみて下さい。
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

コメントする

RSS feed for comments on this post · TrackBack URI · add to hatena hatena.comment 0 user add to del.icio.us 0 user add to livedoor.clip 0 user