CURSO DE DISEÑO WEB AVANZADO (II)
Cómo hacer un
mapa de tu sitio


Convierte una imagen en un índice visual de tu sitio personal. Ese mapa de tus páginas internas ayudará a los visitantes a encontrar la información fácilmente y recorrerlo de punta a punta.

Por Agustín d'Empaire

En el primer tutorial de diseño web publicado por El Sitio hablamos de la importancia de las imágenes y aprendimos a utilizarlas para vincular nuestras páginas. Como en esta segunda etapa nos dedicamos a "afinar los violines para que la orquesta suene mejor", vamos a ver algo más preciso e interesante para hacer con una imagen: la posibilidad de usarla como un índice visual de lo que hay en tu sitio, como si se tratara de un mapa de nuestras páginas. Para esto hay que determinar zonas dentro del gráfico; cada una tendrá un hipervínculo a un lugar diferente dentro de tu sitio. De esta forma, según en qué parte de la imagen haga clic el usuario, será transportado a un destino diferente.

Los mapas de imágenes pueden funcionar de dos maneras. La primera llamada Server Side ("del lado del servidor", en inglés), y la segunda, Client Side ("del lado del cliente"). Estos terminos se refieren al lugar donde se procesará la información que llevará al usuario a uno u otro destino cuando hace clic sobre un mapa gráfico.

En el primer caso, es el servidor web donde se aloja la página el que se encarga de administrar el mapa y redirigir al usuario según el punto de la imagen sobre el cual oprimió el botón del mouse. En el segundo, ese proceso de decisión se lleva a cabo en el propio browser del usuario (también denominado cliente). Nosotros vamos a trabajar con el modo client side, que, aparte de ser más sencillo, no requiere conocimientos de programación ni interacción con el servidor (al que no todos los usuarios de páginas personales tienen acceso).

Para simplificar las cosas, vamos a dividir nuestro trabajo en tres etapas. En la primera vamos a ver cuáles son las etiquetas HTML y los atributos necesarios para introducir un mapa en nuestra página. En la segunda vamos a aprender a delimitar áreas cliqueables dentro de una imagen y en la tercera vamos a analizar qué tipos de figuras podemos trazar dentro de un mapa.

¿Qué etiquetas necesito para crear un mapa?