Also available in English

Inf@Vis!

La revista digital de InfoVis.net

Visualización de la Estructura de la Web
por Juan C. D√ľrsteler [mensaje nļ 173]

La web, por su propia naturaleza como hipertexto, presenta una estructura que se puede describir mediante grafos. La visualizaci√≥n de dicha estructura, de capital importancia para comprender los resultados de la miner√≠a web, se reduce pues a la representaci√≥n de grafos. √Čste es, empero, un vasto campo con muchas posibilidades, algunas de las cuales exponemos en este art√≠culo.
Mapa de Internet. Parte del proyecto OPTE, representa los nodos y enlaces principales de toda la web a nivel macroscópico tal como era el 11 de Enero de 2005.
Fuente: Imagen tal como se puede ver en la web del proyecto OPTE

Cualquier web, incluso y especialmente la telara√Īa global en su conjunto, se compone b√°sicamente de p√°ginas (a las que llamaremos nodos) y enlaces entre ellas (a los que denominaremos arcos). Esto hace que, desde un punto de vista matem√°tico podamos considerar la estructura de cualquier web como un grafo. Por tanto para representar la estructura de una web basta simplemente con dibujar un grafo

¬ŅSimplemente? Me temo que no tan simplemente. La representaci√≥n de grafos resulta un tema tan rico que merece un simposio internacional que se re√ļne anualmente, el International Symposium on Graph Drawing.¬† De los grafos y las consideraciones sobre c√≥mo dibujarlos ya hablamos en el n√ļmero 137 titulado "Grafos" en un arranque de originalidad.

Pero no nos interesan aquí las diferentes modalidades de dibujo de los grafos en general sino cómo su visualización nos puede permitir entender la estructura de la web para tomar luego decisiones e implementarlas. 

Para ello veremos algunas de las visualizaciones que han ido surgiendo al respecto. La mayoría de ellas representan la estructura como una jerarquía obviando los enlaces que se devuelven unas páginas a otras formando circuitos, con lo que la estructura se puede representar como un árbol (un grafo conexo acíclico).

Casi todos ellos entran dentro de la categoría de representaciones de foco+contexto dado que permiten ver todo el contenido de la web y, a la par, establecer un foco de atención (por ejemplo una página determinada) al que acceder en más detalle.

He aquí algunas de los representaciones más interesantes:

√Ārboles c√≥nicos (ConeTrees):

Los conetrees, en su manifestación más operativa, surgieron en el prolífico Xerox PARC de la mano de Robertson, Card y Mackinlay. Son éstas representaciones de árboles típicamente 3D,  en los que, partiendo de un nodo, se representan sus hijos (aquellos otros nodos enlazados al siguiente nivel) en la base de un cono que tiene como vértice al nodo padre. Cada uno de los nodos hijos se convierte, a su vez, en un nodo padre cuyos hijos se representan de la misma manera. El algoritmo resulta ser pues, un algoritmo recursivo en el que todos los nodos reciben el mismo tratamiento.

ConeTreeInteractionsV5N2MarzoAbril98p11.jpg (37302 bytes) conetreePARCIntranet.jpg (58737 bytes)
√Ārbol C√≥nico horizontal.¬†
Fuente: "Cone Trees: Animated 3D Visualizations of Hierarchical Information", by Robertson, Mackinlay, and Card (1991). Proceedings of the Conference on Human Factors in Computing Systems (CHI'91), pages 189-194. ACM Press
Pulse sobre la imagen para agrandarla
√Ārbol C√≥nico vertical.
Fuente: Tal como se puede ver en "Design concepts for learning spatial relationships" by Benelli, Caporali, Rizzo & Rubegni, Universita di Siena
Pulse sobre la imagen para agrandarla  

Los árboles cónicos permiten representar razonablemente bien la estructura de la web. Pero hay, al menos, dos caveats:

  • Escalado: cuando el numero de nodos es muy grande la estructura es dif√≠cil de percibir ya que cuanto m√°s profundo es el nivel representado menor espacio queda para los nodos. Esto se complica especialmente si hay muchas p√°ginas a esos niveles .

  • Oclusi√≥n: Unos nodos tapan a los otros.¬†

Para resolver el segundo problema la solución que se da es que los conos pueden girar como un carrusel para mostrar aquellos elementos que se hallan ocluidos. Como se puede ver por las sombras de las imágenes, la representación en 2D produce la interpenetración de los conos, lo cual es otra característica poco deseable ya que induce a confusión.   

Con el objeto de resolver estos problemas se han propuesto también árboles en disco, en los que el cono se sustituye por un disco.

√Ārboles hiperb√≥licos

En este caso¬† la estructura de la web se representa en 2D o 3D mediante un espacio hiperb√≥lico. A diferencia de la geometr√≠a eucl√≠dea, la geometr√≠a hiperb√≥lica permite que a trav√©s de un punto pase m√°s de una l√≠nea paralela a otra que no contiene al punto. Sin entrar en mas detalles, vale la pena rese√Īar que el espacio hiperb√≥lico se puede representar como un c√≠rculo, en el cual la periferia representa el infinito. En esta geometr√≠a cuanto m√°s cerca de la periferia (el infinito) nos encontramos m√°s peque√Īo se hace el tama√Īo de lo que representamos.

Magnifind2.gif (46602 bytes) lwalrusar-gr-l-7.png (202698 bytes)
Geometría hiperbólica: Representación en 2D de la estructura de directorios de un PC.
Fuente: Caotura de pantalla realizada por el autor del programa de demo Magnifind de Inxight.
Pulse sobre la imagen para agrandarla.
Geometría hiperbólica: Espectacular vista en geometría hiperbólica 3D de un complejo árbol de directorios. 
Fuente: Tal como se puede ver en la p√°gina de Walrus
Pulse sobre la imagen para agrandarla.

Ello nos permite representar grafos en geometr√≠a hiperb√≥lica manteniendo las propiedades de foco y contexto. Aquello que est√° en el centro se ve grande y si lo apartamos hacia la periferia se empeque√Īece, sin dejar de verse. La versi√≥n 3D del plano hiperb√≥lico es una esfera hiperb√≥lica, en la cual la superficie exterior se asimila al inifinito.

Tamara Munzner desarrolló ampliamente este tipo de representaciones en su tesis doctoral, que vale la pena consultar a los interesados en este tema. La ventaja de las tres dimensiones en geometría hiperbólica es que resulta más fácil de comprender y de interactuar con este tipo de representaciones.

Walrus (morsa en ingl√©s, del que ya hablamos en el n√ļmero 43) es probablemente la herramienta (libre, se puede descargar hasta el c√≥digo fuente) que ha ido m√°s lejos en la representaci√≥n de grandes jerarqu√≠as uasndo la geometr√≠a hiperb√≥lica. Aqu√≠ existen tambi√©n ciertos problemas de oclusi√≥n, pero su elegante soluci√≥n de representaci√≥n permite trabajar interactivamente con unos cuantos miles de nodos con cierta comodidad.

√Ārboles radiales o en "ojo de buey"

Una forma de resaltar los niveles de conectividad (el n√ļmero de clicks hasta llegar a una p√°gina) es disponer los nodos del grafo en c√≠rculos conc√©ntricos tanto m√°s perif√©ricos cuantos m√°s saltos hay que dar desde el nodo ra√≠z.¬†

ArbolRadial.jpg (51263 bytes)
√Ārbol radial: Ejemplo disponible en la web de InfoVis Cyberinfrastructure. Aqu√≠ la interactividad es fundamental para efectuar un analisis apropiado de la estructura.Fuente: Tal como se puede ver en la p√°gina de InfoVis Cyberinfrastructure
Pulse sobre la imagen para agrandarla.
√Ārbol radial: Uno de los estadios de la animaci√≥n que permite estudiar el √°rbol desde distintos puntos de vista, tal como se puede ver en la web de BAILANDO
Fuente
: Captura de pantalla de la web de referencia.

Este tipo de diagramas se llaman radiales o también circulares o en ojo de buey. Aquí los nodos se distribuyen  en el círculo correspondiente a su nivel. con el nodo raiz en el centro. Sus hijos ocupan el nivel siguiente y así sucesivamente. 

Una de sus principales dificultades residen en la forma de distribuir los nodos en cada círculo. Si resulta que en un circulo exterior hay muchos nodos mientras que hay muy pocos en los nodos interiores resulta muy difícil evitar el solapamiento de los nodos y distribuir los sectores de circulo de manera que se puedan distinguir bien las líneas genealógicas. Para grandes cantidades de datos, además, la utilización del espacio es ineficiente dado que entre círculos no hay nada.

Conclusión

Visualizar la estructrura de la web es un paso fundamental a la hora de representar su contenido y utilización por parte de los usuarios, dado que éstos se pueden dibujar como capas de color encima de la información estructural. Los distintos tipos de representaciones existentes muestran aspectos muy potentes como son 

  • la posibilidad de ver el foco y el contexto al mismo tiempo

  • reconocer la estructura general de la web de un vistazo

  • detectar anomal√≠as en la disposici√≥n de las p√°ginas y sus enlaces

  • identificar p√°ginas en niveles en los que no deber√≠an estar.

Sin embargo estas representaciones no est√°n exentas de ciertas dificultades:

  • problemas de oclusi√≥n entre los nodos

  • problemas de escalado cuando la cantidad de nodos aumenta por encima de los millares de nodos, dependiendo del tipo de representaci√≥n.

  • problemas de interpretaci√≥n por parte de los usuarios, no siempre acostumbrados a este tipo de representaci√≥n.

No obstante la visualización de la estructura de la web es uno de los pilares del análisis que cualquier webmaster debe realizar, especialmente si su web es grande, para poder tomar decisiones informadas a la hora de modificar o simplemente comprender el funcionamiento del ser vivo que es un sitio web. 

Enlaces de este artŪculo:

http://www.infovis.net/printRec.php?rec=glosario&lang=1#Grafo   Entrada del glosario para "Grafo"
http://www.gd2005.org   International Symposium on Graph Drawing
http://www.infovis.net/printMag.php?num=137&lang=1   Num. 137 Grafos
http://www.caida.org/TOOLS/visualization/walrus/   P√°gina web de la herramienta Walrus
http://www.infovis.net/printRec.php?rec=persona&num=1&lang=1#Munzner   Entrada de Tamara Munzner en "Personas"
http://graphics.stanford.edu/papers/munzner_thesis/   Tesis de Tamara Munzner
http://www.infovis.net/printMag.php?num=43&lang=1   Num. 43 De Morsas y Espirales
http://iv.slis.indiana.edu/sw/radialtree.htm   Arboles radiales en Infovis CyberInfrastructure
http://bailando.sims.berkeley.edu/papers/infovis01.htm   Animated Exploration of Dynamic Graphs with Radial Layout
© Copyright InfoVis.net 2000-2018