Otra forma de ver una página web: grafos

Me he encontrado con una página bien curiosa. No tiene utilidad (que a mi se me ocurra), pero como tampoco voy a medir todo por su utilidad… la voy a presentar simplemente porque me ha gustado. Se llama Webpages as Graphs.

En esa página se puede ver cómo su autor, Marcel Salathé, ha creado una aplicación que lee el código html de una página web cualquiera y crea un grafo a partir de esa información. Los nodos representan las diferentes etiquetas que se pueden encontrar en el código y los colorea con el siguiente criterio:

  1. azul: enlaces (corresponde a la etiqueta A),
  2. rojo: tablas (etiquetas TABLE, TR y TD),
  3. verde: etiqueta DIV,
  4. violeta: imágenes (etiqueta IMG),
  5. amarillo: formas (etiquetas FORM, INPUT, TEXTAREA, SELECT y OPTION),
  6. naranja: para saltos de línea y citas (etiquetas BR, P y BLOCKQUOTE),
  7. negro: para el nodo inicial (etiqueta HTML),
  8. gris: el resto de etiquetas.

Por último, el enlace entre dos nodos representa que una etiqueta está anidada dentro de otra. Eso implica que, estrictamente, es un grafo dirigido y los enlaces deberían dibujarse como flechas. Pero, tratándose de un divertimento, tampoco tiene mayor importancia.

¿Cómo luce el grafo asociado a la página web de nuestro grupo de investigación (CSG)?

repositorio

¿Y el de la página web de Madri+d? Pues así de florido.

repositorio

Compartir:

4 comentarios

  1. Si tienes una pagina web que esta en proceso de creacion o variacion, por ejemplo una tienda como la mia, puedes ver como varia el grafico segun el crecimiento de la misma, muy curioso.

  2. Pues a mi si se me ocurren muchas aplicaciones! Una de ellas es comprobar si el número de visitas de cada página está relacionado con el número de links que apuntan a la página (grado) o con el betweenness (número de caminos más cortos que pasan por cada página). Muy interesante!

Deja un comentario