Web Tips
back index mail link
head
spacer
デザインの裏技について spacer Photoshop spacer Illustrator
spacer
font HTML 素材
spacer
コラム art book サイトマップ
spacer
Link
 
Creator's Net Creator's Net 自己破産Navi
spacer
美白 de 美肌 ChaoScope Wiki
spacer
spacer
contents
   







6/01 HTML構造のグラフによる可視化アプレット


『MicroCinema WebSiteのHTMLを視覚化したもの』

少し前までは、大手のGoogleやYahoo等のグラフ化された画像を公開していただけだった。

しかし、JavaによってURLアドレスを入れることで任意のサイトをグラフ化する事が可能になった。

自分のHPと企業のHPを見比べてみたりすると、意外な点に気づくのかもしれない。

: リンク (A タグ)

: テーブル (TABLE, TR , TD タグ)

: DIV タグ

: 画像 ( IMG タグ)

黄色 : フォーム (FORM, INPUT, TEXTAREA, SELECT OPTION タグ)

オレンジ : 改行と引用 (BR, P, BLOCKQUOTE タグ)

黒 : ルートである HTML タグ

: その他のタグ

という様にグラフ上では表現されている。

ただ、難点としてPCのスペックが低いと描画までに相当の時間を要してしまう。

アイデアとしては、よくありがちなものなのかもしれないが統計や、サイトのデザインの傾向など簡易的に見ることが出来る手段として大事なものかもしれない。

APPLETの製作元HP[aharef]

HTMLをグラフ化するAPPLETのあるページ

グラフ化した様々な有名サイトの描画結果が置いてあるページ









 







bottomimage
copylogo
Web Tips copy right© 2006.ぶっぽ allrights reserved.