jueves, 15 de abril de 2010

Estructura semántica de una página web en forma de grafo

La página web Semantic Webpage Structure as a Graph ofrece una utilidad muy interesante para analizar la estructura y contenido de una página web: un applet realizado en Java que dibuja un grafo coloreado en función de la semántica (las etiquetas) de una página web.
Esta herramienta puede ser muy útil, ya que permite obtener una representación visual de la estructura de una página web y analizar qué etiquetas se emplean.
Por ejemplo, a continuación se puede ver el grafo que ha dibujado a partir de mi sitio web http://accesibilidadweb.dlsi.ua.es/. Los colores utilizados son:
  • Negro: elemento principal (html)
  • Gris oscuro: cabecera (head)
  • Gris claro: elementos de la cabecera (title, link, meta)
  • Azul oscuro: cuerpo (body)
  • Azul claro: elementos de bloque (div, p, blockquote)
  • Azul-gris oscuro: enlace (a)
  • Verde oscuro: lista (ul, ol, dl)
  • Verde claro: elemento de lista (dd, dt, li)
  • Violeta oscuro: script
  • Violeta claro: imagen (img)
  • Amarillo: formulario (form, input, textarea, ...)