Web Maestro - 13.-Mapas

13. Mapas

Hemos visto anteriormente dos maneras distintas de enlazar una página con otra: por medio de un enlace de texto (capítulo 3) o por medio de una imagen (capítulo 4). Pero en este último caso se hacía uso de una imagen para enlazar a una única página.

Se puede utilizar una única imagen para enlazar con varias páginas, yendo a una u otra según la zona en donde se pulse el ratón. Este tipo de imágenes se llaman mapas.

Veremos cómo se crea un mapa partiendo de una imagen, y cómo se implementa dicho mapa con el lenguaje HTML en nuestra página.

Hay dos tipos de mapas:

Mapas gestionados por el servidor
Mapas gestionados por el cliente

Mapas gestionados por el servidor

En este tipo de mapas al desplazar el cursor sobre la imagen que forma el mapa se van obteniendo las distintas coordenadas. Cuando se pulsa el ratón en un punto determinado, el navegador envía esas coordenadas al servidor, y éste comprueba en un fichero MAP (situado en en su directorio cgi-bin) cuál es la página que se corresponde con estas coordenadas, envía esta información al navegador, y éste solicita a su vez al servidor que le enlace con dicha página.

Estos mapas, que fueron los que aparecieron inicialmente, tienen una ventaja: que pueden ser utilizados por todos los navegadores, incluso por las versiones más antiguas.

Pero tienen varios inconvenientes: No todos los servidores tienen implementado el programa CGI necesario para que pueda funcionar un mapa de este tipo. Además hay que conocer el tipo de servidor (NCSA, el más común, o CERN), pues el código a aplicar es distinto en un caso u otro.. Por otra parte, al requerir un trasiego de información entre el navegador y el servidor, el tiempo de respuesta es mayor que en el otro tipo, como veremos.

Para más información sobre este tipo de mapas:
The Imagemap Help Page

Mapas gestionados por el cliente

Estos mapas son gestionados por el cliente (es decir, nuestro navegador) y no por el servidor, como en el caso anterior.

En este tipo de mapas, al ir desplazando el cursor se observa que en ciertas zonas se convierte en el símbolo normal para enlazar con otras páginas (una mano, habitualmente). Si se pulsa en estas zonas activas (hotspots), el navegador consulta con el documento HTML que ha recibido, y decide a qué página o dirección corresponde esa zona activa.

Es decir, no necesita enviar la información al servidor y esperar la respuesta de éste, con lo que el proceso es más rápido que en el caso anterior, reduciéndose además el tráfico de datos y la sobrecarga al servidor. Otras ventajas son que al pasar por una zona activa se muestra la dirección a la que se corresponde (al contrario que en el caso anterior, en la que sólo se ven unas coordenadas). Además, estos mapas se pueden utilizar off-line, al contrario también que en el otro tipo, ya que no requieren la ayuda del servidor.

Pero tiene el inconveniente de que estos mapas no son implementados por todos los navegadores, como en el caso anterior, aunque sí por la mayoría de los utilizados actualmente, desde las versiones siguientes: Netscape 2.0, Microsoft Explorer 2.0, Mosaic 2.1, etc. Pero se puede obviar este inconveniente suministrando enlaces alternativos para los navegadores que no implementen este tipo de mapas, como veremos.

En lo que sigue, vamos a ver exclusivamente cómo implementar este tipo de mapas, es decir, mapas gestionados por el cliente (client-side image maps).

Confección de la imagen del mapa

Antes que nada, es necesario confeccionar la imagen que va a servir como mapa. Se hará con un programa gráfico, y pueden utilizarse los formatos GIF o JPG (ver el capítulo 9).

Vamos a crear una mapa para utilizarlo en el ejemplo práctico de este capítulo, con dos zonas activas rectangulares que enlancen con los ejemplos prácticos de los capítulos 2 y 3.

Se confecciona con un programa gráfico la imagen que nos va a servir como mapa, tal como la situada a la izquierda, que todavía no es un mapa.

Para definir un área activa rectangular, necesitamos conocer las coordenadas de su ángulo superior izquierdo y las de su ángulo inferior derecho.

Estas coordenadas las obtenemos con el programa gráfico con el que hemos confeccionado la imagen. Estos valores son los siguientes:

Para la primera zona activa "Mis aficiones": (46,40) y (250,75)
Para la segunda zona activa "Mis páginas favoritas": (46,100) y (250,135)

Ya tenemos los datos necesarios para escribir el código HTML que convierta esta imagen en un mapa.

Código HTML para definir un mapa gestionado por el cliente

En este caso, el código que debemos escribir es el siguiente:

<MAP NAME="mi_mapa">
<AREA SHAPE="RECT" COORDS="46,40,250,75" HREF="mipag2.html">
<AREA SHAPE="RECT" COORDS="46,100,250,135" HREF="mipag3.html">
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<IMG SRC="pulsadr1.gif" USEMAP="#mi_mapa">

Que da como resultado:

Veamos ahora cada una de las etiquetas:

<MAP NAME="mi_mapa">
Esta es la etiqueta de apertura del mapa, y en donde se define su nombre.

<AREA SHAPE="RECT" COORDS="46,40,250,75" HREF="mipag2.html">
Esta etiqueta define la primera zona activa. Se indica que su forma (shape, en inglés) es rectangular, y que las coordenadas de su ángulo superior izquierdo son (46,40), y que las del ángulo inferior derecho son (250,75). A continuación se indica cuál es enlace que se desea obtener, en este caso con la página mipag2.html.

La siguiente etiqueta es análoga, y se refiere a la segunda zona activa.

<AREA SHAPE="DEFAULT" NOHREF>
Con esta etiqueta se define el área completa del mapa, indicando que su forma es la que tiene por defecto (default), o sea rectangular. Si se quisiera que el mapa no abarcara la totalidad de la imagen, o incluso que tuviera una forma distinta, habría que indicarlo aquí, en lugar de la instrucción DEFAULT, haciendo uso del mismo tipo de instrucciones que las de las zonas activas.
A continuación se indica, con NOHREF, que el área completa de la imagen es una zona no activa, excepto en las áreas definidas anteriormente como activas.

</MAP>
Etiqueta de cierre del mapa.

<IMG SRC="pulsadr1.gif" USEMAP="#mi_mapa">
Con esta etiqueta se solicita primero al servidor que envíe una imagen llamada pulsadr1.gif. Con USEMAP="#mi_mapa" se indica que esta imagen es el mapa definido anteriormente con ese nombre, y que debe actuar en consecuencia a las pulsaciones del ratón, solicitando un enlace determinado en las zonas activas, o no haciendo nada en el resto.

Enlaces alternativos de texto

Como se ha dicho anteriormente, no todos los navegadores implementan este tipo de mapas gestionados por el cliente. Por ello, es necesario suministrar unos enlaces alternativos convencionales de texto (ver capítulo 3), para obviar este inconveniente.

Por ejemplo, a continuaciación del mapa, se pueden poner estos dos enlaces de texto, correspondientes a las dos zonas activas (reduciendo la fuente, para hacerlo menos antiestético):

<FONT SIZE=-1>
<A HREF="mipag2.html">Mis aficiones</A> |
<A HREF="mipag3.html">Mis páginas favoritas</A>
</FONT>

Que, una vez de colocado a continuación del código del mapa y centrado todo, resulta como:

Mis aficiones | Mis páginas favoritas

Zonas activas en forma de círculos o polígonos

En el ejemplo que se ha visto anteriormente se han definido las dos zonas activas en forma de rectángulos. Pero se pueden definir también estas zonas activas como círculos o como polígonos.

Para definir una zona activa circular es necesario conocer las coordenadas de su centro (x,y) y la longitud de su radio (r). Una vez sabidos estos datos, la etiqueta es como sigue:

<AREA SHAPE="CIRCLE" COORDS="x,y,r" HREF="dirección_de_la_página">

Para definir una zona activa poligonal hay que conocer las coordenadas de los distintos puntos (x1,y1), (x2,y2), (x3,y3), etc. Con estos datos, la etiqueta se escribe como sigue:

<AREA SHAPE="POLYGON" COORDS="x1,y1,x2,y2,x3,y3,..." HREF="dirección_de_la_página">

Programas editores de mapas

Hemos visto cómo se debe escribir el código HTML para convertir una imagen en un mapa. Pero hay programas que lo hacen de una manera automática.

Partiendo de una imagen (confeccionada con un programa gráfico normal), con este tipo de programas no hay más que señalar con el ratón qué áreas se desean que sean activas (y qué forma deben tener) e indicar los enlaces para cada zona activa. Entonces, el programa escribe todo el código HTML de una forma automática, sin necesidad de tener que suministrar los datos de las coordenadas de cada zona activa.

Programas:
Para PC y Unix: Mapedit.
Para el Mac: WebMap.
Otras herramientas para crear mapas.

Ejemplo práctico

Partiendo del ejemplo práctico de la lección anterior mipag12.html, vamos a sustituir los dos iconos del comienzo que enlazan con las páginas "Mis aficiones" y "Mis páginas favoritas" por el mapa que se ha visto anteriormente en este capítulo.
Para ello, es necesario capturar primero la imagen del mapa, pulsadr1.gif, y guardarla en el directorio junto con los otros ejemplos prácticos.

A continuación hay que sustituir las siguientes etiquetas (situadas al comienzo):

<A HREF="mipag2.html"> <IMG SRC="hombre.gif"> </A> Mis aficiones <A HREF="mipag3.html"> <IMG SRC="casa.gif"> </A> Mis páginas favoritas
por las siguientes:
<MAP NAME="mi_mapa"> <AREA SHAPE="RECT" COORDS="46,40,250,75" HREF="mipag2.html"> <AREA SHAPE="RECT" COORDS="46,100,250,135" HREF="mipag3.html"> <AREA SHAPE="DEFAULT" NOHREF> </MAP> <CENTER> <IMG SRC="pulsadr1.gif" USEMAP="#mi_mapa"> <A HREF="mipag2.html">Mis aficiones</A> | <A HREF="mipag3.html">Mis paginas favoritas</A> </CENTER>
Guardamos este fichero como mipag13.html y lo cargamos en el navegador para verlo.
Resultado.