Visualizacion de codigo HTML como un grafo

1
18107

Visualización de código
HTML como un
grafo

En Autentia nos gusta
compartir los conocimientos con
vosotros.. ¡y con nosotros mismos! Cuando se hace
I+D
solemos comentar y publicar los resultados; nos lo pasamos bien. 

Hace unos días encontré un applet que
permite visualizar la
estructura de componentes HTML de una página web en manera
de
grafo. Los resultados son
curiosos; acerquémonos a: Websites
as Graphs.

Introducción a Websites as Graphs

Frente a una visualización estructurada en forma de
árbol de
etiquetas HTML, con el applet disponible en www.aharef.info/static/htmlgraph/
podemos, de un vistazo, ver la complejidad de componentes y anidaciones
jerárquicas de los mismos. Simplemente hay que introducir la
URL hasta la página deseada y comenzará una
animación que irá formando el grafo
acíclico. Veamos un
ejemplo de cada uno del
index.php
nuestra web de adictos:


Árbol
de componentes HTML (usando firebug)


Grafo de
componentes HTML (usando Websites
as Graphs)

Ambas perspectivas muestran la misma información
estructural aunque tienen
propósitos distintos. La vista en árbol permite
profundizar en niveles y
obtener el detalle de todos los elementos del código:
etiquetas y atributos HTML, URIs, URLs, scripts, etc. El grafo
sólo muestra información estática y no
etiquetada de un número limitado de etiquetas
estándar HTML, que son:

  • 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

Conforme a esta leyenda el grafo queda
desglosado de
la siguiente manera:

Algoritmo
de generación del grafo

El autor de la web pone a disposición el
código fuente del
applet, que copio a
continuación. Vamos a manejarlo:

Descomprimimos
la descarga de Processing. Copiamos las librerías en la
carpeta
libraries (así se incluyen en el classpath
automáticamente), de manera que queden así:

  • processing/libraries/physics/library/physics.jar
  • processing/libraries/animation/library/animation.jar
  • processing/libraries/htmlparser/library/
    (jars incluidos en htmlparser)

Iniciamos
Processing, copiamos el código en un nuevo editor y
cambiamos
las líneas 58 y 59 como nos indican, por lo siguiente:

A
partir de la release 0116 el método framerate() se cambia
por
frameRate(). Por lo tanto la línea 61 la cambiaremos por

Ejecutamos
(Sketch | run) y se abrirá la ventana donde se
renderizará el grafo con una animación muy
divertida
(blowing popcorn).

El
grafo puede guardarse en PDF. Simplemente descomentamos las
líneas 131 y 149 y generará en disco archivos PDF
con
capturas periódicas (en función del frameRate
indicado)
con el patrón frameimage-####.pdf:
frameimage-0000.pdf,
frameimage-0001.pdf,
etc.

El autor del script, Marcel
Salathé, también comenta en la web
que puede exportarse a una imagen, y que si hacemos una
donación
nos envía un pdf y una imagen de 1500 x 1500
píxeles.
Aquí vamos a generar algo similar, una imagen de un
tamaño suficientemente grande para imprimir un
póster.
Dudo que Marcel viva de las donaciones por PayPal, pero para no hacerle
una faena solo mostraremos cómo guardar en un archivo de
imagen
y no a redimensionarla (es sencillo).

Leemos en la API de Processing
cómo usar el método save().
Insertamos la sentencia save(«c:/grafoWebAdictos.jpg»); al
final del método draw():

y
ejecutamos
nuevamente. El fichero se está reescribiendo con los frames
que
vemos en la pantalla. Cuando queramos ver el resultado, primero cerramos la
animación y luego
acudimos al fichero que estará en la URI indicada.

Finalmente
damos el toque mágico del cambio de tamaño de la
imagen,
dejamos el ordenador procesando en el rato de café, y he aqui
la imagen, y el póster en la oficina 🙂

Conclusión

En
un blog puede leerse: This
is simply the most beautiful translation of HTML into another medium,
ever
.
Cierto es que la información que presenta
es limitada y que no permite extraer muchas más conclusiones
más allá de la complejidad o la accesibilidad; no
sabemos si la página será usable, será
conforme con los estándares W3C, es XHTML o HTML. Pero la
iniciativa es original y merece un tutorial. Sobre todo para dar las
gracias a M. Salathé por compartir su original trabajo 🙂

PD:  Proyectos relacionados:


‘ADN’ de
componentes HTML (usando WEB2DNAArt Project)


Estructura
del site
completo de autentia.com (usando Validation Graphs)

1 Comentario

Dejar respuesta

Please enter your comment!
Please enter your name here