Convierte tu Web en un Árbol de Navidad

Todos los días, nos fijamos en docenas de sitios web. La estructura de estos sitios web se define en HTML, la lengua franca para la publicación de información en la web.

El trabajo del navegador es traducir el código HTML en una serie de elementos visuales identificables.

Se puede ver el código detrás de cualquier sitio web seleccionando la opción “Ver código fuente” localizado en algún lugar en el menú del navegador.

HTML se compone de los llamados tags (etiquetas), como la etiqueta A de los enlaces, la etiqueta IMG para imágenes y así sucesivamente. Dado que las etiquetas están anidadas dentro de otras etiquetas, que se organizan de forma jerárquica, y que la jerarquía se puede representar como un gráfico, se ha desarrollado una pequeña aplicación que permite visualizar ese gráfico.

Se he usado un poco de color para indicar las etiquetas más utilizadas de la siguiente manera:

azul : para enlaces (la etiqueta A)

rojo : para tablas (TABLE, TR y las etiquetas TD)

verde : de la etiqueta DIV

violeta : imágenes (etiqueta IMG)

amarillo : para formularios (FORM, INPUT, TEXTAREA, SELECT y OPTION tags)

naranja : para saltos de línea y blockquotes (BR, P, y las etiquetas BLOCKQUOTE)

negro : la etiqueta HTML, el nodo raíz

gris : todas las otras etiquetas

De esta manera podemos transformar nuestra web en una especie de árbol con multitud de ramificaciones y coloreado de acuerdo al patrón expuesto con anterioridad.

Realmente es impresionante ver como se despliega nuestra página mientras se forma el entramado. Os dejo el árbol de esta humilde página web y el enlace a la aplicación.


Página Web en forma de Gráfico

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: