Mapas visuales

Reven — Wed, 12 Jul 2006 10:14:32 +0000

Los mapas visuales de páginas web nos dan una idea de qué es lo que está pasando por detrás de las cortinas. Las páginas están normalmente diseñadas desde un punto de vista “humano”, haciéndo énfasis en lo queremos que otra persona perciba al verlas y de forma que la organización espacial de los elementos que la componen hagan la información más accesible o, según los casos, predetermine a esa persona a fijar la atención en un elemento determinado.

La estructura de la información que contienen las páginas debería ser más artificial (o menos humana), ya que los estándares web tienden hacia una separación de contenido y código mediante el uso de etiquetas con valor semántico. Por simplificar mucho una historia muy larga, podríamos decir que la estructura de todas las páginas debería ser la misma:

Título
- Encabecado 1: Contenido
  - Subencabecado 1: Contenido
- Encabecado 2: Contenido
- …

Pero la realidad es que en ocasiones se utilizan esas etiquetas semánticas un poco fuera de su contexto, p. ej. se puede utilizar un subencabezado con una tipografía más llamativa que un encabezado. Una práctica muy común es utilizar contenedores “dummy” (sin ningún valor semántico, por ejemplo

y ) para ayudarnos a posicionar elementos en la página o dar mayor peso a determinados contenidos.

A la derecha podéis ver mapas visuales realizados mediante websitesasgraphs. La superior corresponde a la portada de esta web y la inferior a la portada del blog. El significado de los puntos es el siguiente:

azul: enlaces (la etiqueta )
rojo: tablas (etiquetas

, y

)
verde: la etiqueta

violeta: imágenes (etiqueta )
amarillo: formularios (etiquetas

, ,

, <select>, y <option>)<br />
<span style="color: #ff9933; font-weight: bold">naranja</span>: párrafos, líneas nuevas y citas (etiquetas <p>, <br> y <blockquote>)<br />
<span style="color: #000000; font-weight: bold">negro</span>: la etiqueta <html>, el nodo raíz<br />
<span style="color: #999999; font-weight: bold">gris</span>: el resto de etiquetas</p>
<p>Me parece una curiosa forma de hacerse una idea del contenido de una página.</p>
<div class='wb_fb_bottom'><div style="float:right;"></div></div>
</article>
<article>
<h1>Google Maps</h1>
<p>Reven — Tue, 21 Jun 2005 10:58:42 +0000</p>
<p>Sin hacer demasiado ruido, Google ha actualizado su servicio de <a href="http://maps.google.com">Google Maps</a>. Ahora se incluyen fotos de satélite de alta resolución de diversos puntos de Europa: <a href="http://maps.google.com/maps?ll=41.404467,2.174478&spn=0.019870,0.031242&t=k&hl=en">Barcelona</a>, <a href="http://maps.google.com/maps?ll=40.445008,-3.690162&spn=0.019870,0.031242&t=k&hl=en">Madrid</a> y otras ciudades españolas están incluidas.</p>
<p>Como ejemplo podéis echar un vistazo al <a href="http://maps.google.com/maps?ll=41.300569,2.079892&spn=0.019870,0.031242&t=k&hl=en">el aeropuerto del Prat</a> en Barcelona o al <a href="http://maps.google.com/maps?ll=41.411183,2.225171&spn=0.004967,0.007811&t=k&hl=en">forum</a>. Por lo que se ve en las fotos se deduce que éstas son de hace algún tiempo (más de un año), pero bienvenidas sean.</p>
<p>Supongo que ahora por fin podemos buscar <a href="http://maps.google.com/maps?ll=41.403673,2.161914&spn=0.004967,0.007811&t=k&hl=en">dónde vivimos</a>, y se extenderán también por estos lares las aplicaciones web que se nutren de los mapas de Google.</p>
<p>A primera vista, las fotos nuevas son de peor calidad que las de Estados Unidos, o al menos las de España (con las que más he jugado). Espero que Google siga completando este servicio y mejorando la calidad.</p>
<p>Dejad un comentario con enlaces de vuestras casas, lugares de trabajo, lo que sea…</p>
<p>ACTUALIZACIÓN:<br />
<a href="http://maps.google.com/maps?q=bejar+spain&ll=40.386000,-5.764647&spn=0.019870,0.031242&t=k&hl=en">Béjar (Salamanca)</a><br />
Impresionante <a href="http://maps.google.com/maps?ll=40.387845,-5.794301&spn=0.009935,0.015621&t=k&hl=en">viaducto</a> de la N-630 a su paso por Béjar (sin acceso peatonal = <em>puenting</em> prohibido)<br />
Es un pueblo o es el <a href="http://maps.google.com/maps?ll=40.408648,-5.804472&spn=0.004967,0.007811&t=k&hl=en"><em>desguace de Beni</em></a>?<br />
<a href="http://maps.google.com/maps?ll=40.421008,-5.808796&spn=0.004967,0.007811&t=k&hl=en">Ésto</a> no es un ovni, es un pequeño lago artificial para que las vaquitas beban. <a href="http://maps.google.com/maps?ll=40.427670,-5.815748&spn=0.004967,0.007811&t=k&hl=en">Otro</a>.<br />
Conocéis una recta más larga que <a href="http://maps.google.com/maps?ll=40.434666,-5.828204&spn=0.019870,0.031242&t=k&hl=en">ésta</a>?</p>
<p>Y por fin, <a href="http://maps.google.com/maps?ll=40.424087,-5.893060&spn=0.004967,0.007811&t=k&hl=en">mi casaaaaa</a>! (Hola mamá)</p>
<div class='wb_fb_bottom'><div style="float:right;"></div></div>
</article>
</main></body></html>

reven.org » mapa

Mapas visuales