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?