Su página en imágenes

sábado, mayo 27

Se han preguntado ¿Cómo se vería la estructura de su página de forma gráfica?. Pues la verdad es que yo no, pero no deja ser una útil herramienta para evaluar el diseño de una página web [Además de que se ve de poca]:

La página de apple:

Más imágenes ...


Cada color representa un tag diferente, rojo para tablas, azul para ligas, violeta para imágenes, negro para el tag HTML que inicia todo, amarillo para formas, verde para "DIVs", naranja para saltos de línea y párrafos (<P>), gris para todo lo demás.
[UPDATE 1] - Puse una explicación un poco más detallada en los comentarios.
[UPDATE 2] - Por un pequeño error estuvo fuera este post por unas horas, pero ya debe estar disponible sin problemas.

La página de mi empresa:


(Esta hecha en Flash, de ahí que sea tan simple la estructura)

El blog de BGO:



Y por último una de las páginas que más visito, Metagame:


(Que como pueden ver, utiliza muchas tablas para acomodar su estructura)

Por alguna extraña razón, que aún no descifro, no pude sacar una imágen de mi blog. Pero si desean obtener la del suyo, aquí está la liga a la aplicación y la página explicativa.

Saludos y pásenla bien

2 comentarios:

Serguei dijo...

Ah caray, no entiendo como se leeria eso...

aitmanga dijo...

Para entenderle hay que tener un leve conocimiento sobre HTML.
El color rojo representa los tags <Table>, <TD>, <TR> y <TH> que se utilizan para representar tablas.
El azul representa los tags <a>.
El violeta los tags <img>.
El negro el tag <HTML> que es con el que inicia toda página web.
Amarillo los tags <Form>, <textarea>, <button> y demás tags utilizados para formularios (Por eso la página de apple tiene mucho amarillo, por un menú que utiliza muchos tags <Button>)
El verde representa los tags <Div> que se utilizan actualmente en conjunto con las hojas de estilo para darle estructura y forma a las páginas, en lugar de utilizar tablas.
El naranja se utiliza para saltos de línea <BR>, párrafos <P> y <BLOCKQOUTE> que como verás BGO utiliza muchos de estos tags en sus posts.
Finalmente el gris representa todos los demás tags que no entran en alguna categoría anterior.