Website as graph

Standard

Processing确实是个好东西,用它你可以很简单的做出很艺术的东西。panya.PNGwebsitesasgraph就是用Processing做的用来将你的主页文档结构图形化,从图上你可以看出主页设计者大体的一个思路或方向。websitesasgraph不仅仅使用了Processing,还有Princeton的Traer.physics,一个为Processing制作的粒子系统的物理引擎,还有HtmlParser,这个一看就知道是做什么的了。

上图是我的首页的HTML结构图。整个页面没有使用Table,都是用DIV进行布局。还是蛮符合Why tables for layout is stupid的精神的嘛!^_^不过说实话,这与我没有关系,我只是移植Binarymoon的而已。

BTW:颜色代表的Tag
blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s