5. Alternativas a las imágenes inline

5.1. El atributo ALT

Hasta ahora hemos hablado de la importancia de las imágenes y el diseño gráfico en general en el World Wide Web. Sin duda la abundancia de gráficos y otros contenidos multimedia han provocado su gran expansión. Sin embargo, como ya hemos comentado antes a lo largo de esta obra, existen algunos navegadores que sólo son capaces de mostrar texto. También hemos mencionado e incluso hemos mostrado imágenes del más conocido y usado: Lynx. Quizá el lector se haga aún la pregunta ¿porqué querría alguien acceder al WWW para ver sólo texto? Las razones pueden ser de distinto tipo, pero podemos encontrar dos que tienen gran importancia. La primera consiste en que es posible que el navegante acceda a la red desde su trabajo o desde el laboratorio de una universidad donde los equipos son todavía antiguos o trabaja con terminales conectados a una estación de trabajo, que sólo son capaces de mostrar texto, en estos casos es obligatorio usar un navegador en modo texto . Otra razón puede ser que aún teniendo un magnífico ordenador (y monitor) último modelo, queramos acceder al WWW a toda velocidad para acceder a cierta información, en este caso los navegadores modo texto son enormemente útiles ya que alcanzan velocidades mucho mayores.

Sea como fuere nuestra labor como programadores de páginas Web será conseguir que nuestras páginas puedan ser visitadas por todo el mundo. De esta manera tendrán más éxito. Por ello debemos ofrecer alternativas a las imágenes que incluimos en nuestras páginas.

El atributo ALT, de la etiqueta IMG, permite especificar un texto alternativo que será mostrado por los navegadores en caso de que la imagen no pueda ser vista. Ese texto será introducido entrecomillado como valor del atributo ALT, de la siguiente forma:


	
	  <IMG SRC="montanas.gif"
	  ALT="Fotografía de unas montañas nevadas de
	  los Alpes">
	

      

Las razones por las que una imagen puede no ser mostrada son diversas pero las podemos agrupar en tres:

En previsión de todos estos casos el uso del atributo ALT en las páginas que programemos es más que recomendable. De esta forma estaremos dando calidad a nuestras páginas y estaremos mostrando que nos preocupamos por todo tipo de audiencia.

Para terminar hemos de decir que los navegadores Internet Explorer y Netscape dan un segundo uso al atributo ALT. Éste consiste en mostrar su contenido en forma de bocadillo cuando el usuario sitúa el puntero del ratón encima de la imagen tal y como podemos ver en la figura 5.26:

Figura 5.26. Algunos navegadores como Explorer muestran el texto de ALT como un bocadillo que aparece cuando ponemos el cursor encima de la imagen.

en la que hemos modificado el código usado en la práctica 2 para añadir el atributo ALT:


	
	  <IMG SRC="img/logo.gif"
	  ALT="Logotipo de la compañía">
	

      

Si bien el uso del atributo ALT ofrece un interesante método para ofrecer una alternativa a las imágenes con un texto existe otro con una utilidad mucho más amplia y que consiste en usar, en lugar de las imágenes inline vistas hasta ahora, las llamadas imágenes externas.

5.2. Imágenes externas

Estas imágenes no se visualizan junto con el resto de la página, sino que se proporciona al visitante un enlace para que pueda acceder a ellas. Las razones por las que en ciertas ocasiones se usan la imágenes externas y por las que merece la pena mencionarlas aquí son muchas, pero las podemos resumir en cuatro:

La creación de imágenes externas varía de las vistas hasta ahora en que ya no se usa la etiqueta IMG. A cambio haremos uso de la etiqueta de creación de links: <A ...> </A>, pero en esta ocasión lo enlazado no será otra página HTML sino la propia imagen externa. El código que debemos usar es:


	<A HREF="imagen.xxx"<
	imagen externa
	</A>

      

siendo xxx la extensión correspondiente al formato de la imagen. En la tabla 5.2 podemos ver algunos formatos y extensiones comúnmente usados.

Figura 5.2. Extensiones y breve descripción de los principales formatos de imágenes usados en el WWW.

Cuando el visitante pulse sobre el texto activo, en este caso 'imagen externa' el navegador bajará la imagen de Internet y luego la mostrará o ejecutará otra aplicación que pueda mostrarla.

Aunque hasta ahora hemos usado los links para enlazar otras páginas HTML y en este mismo apartado para insertar imágenes externas en realidad la utilidad de esta etiqueta va mucho más allá. De hecho podemos enlazar a nuestra página cualquier tipo de archivo, en la mayoría de los navegadores actuales cuando el usuario selecciona un enlace a un archivo que ellos mismos no pueden visualizar le ofrece dos opciones: guardar el archivo en el disco duro o llevar a cabo una acción en función del tipo de archivo. Esta última opción consiste en ejecutar el archivo si es ejecutable, usar un programa descompresor si es un archivo comprimido, visualizarlo con un programa adecuado si es un vídeo, etc.

5.2.1. Thumbnails

Como hemos adelantado antes, con este nombre se conoce al resultado de la combinación de imágenes inline con imágenes externas. El objetivo de los thumbnails es proporcionar una previsualización, un aperitivo, de la imagen completa (que será externa) usando una imagen inline de menor tamaño. Esta imagen inline es, de hecho, la que recibe el nombre de thumbnail, y será o bien una versión de dimensiones reducidas de la imagen final o una parte de ella. En general, o bien el propio thumbnail, o bien un texto adjunto (o ambas cosas) servirán como enlace para obtener la imagen completa tal y como podemos ver en la figura 5.27.

Figura 5.27. Ejemplos de Thumnails. En el primer caso se muestra un trozo de la imagen y en el segundo la imagen completa reducida, el efecto es similar en ambos casos.

que muestra dos ejemplos de thumbnails de la imagen completa de la figura 5.28.

Figura 5.28. Imagen completa que será mostrada cuando el visitante seleccione los enlaces que acompañan a los thumbnails de la figura 5.27

Como vemos, el uso de thumbnails permite al visitante si decide cargar la imagen completa elegir entre el formato GIF, de mayor tamaño y calidad, o en formato JPEG con calidad ligeramente peor pero mucho menor tamaño. Sobre las imágenes de aperitivo hay que decir que en el primer caso se ha usado un trozo de la imagen mientras que en el segundo se ha usado la imagen entera que ha sido reducida en tamaño con un programa de edición de imágenes. En ambos casos el tamaño de la imagen a quedado reducido a unos 15-20Kb que las hace más apropiadas para incluirlas como imágenes inline.

Aviso

Es importante resaltar que para la creación de thumbnails no se pueden usar los atributos WIDTH y HEIGHT ya que se perdería su utilidad. El objetivo del thumbnail es tener una imagen en un archivo aparte que sea de menor tamaño en bytes que la original para que cargue más rápido. Al usar WIDTH y HEIGHT la imagen sigue siendo la misma, y por tanto su tamaño también, luego no conseguiremos reducir el tiempo de carga.

El uso apropiado imágenes externas y de thumbnails nos permitirá crear páginas de gran contenido gráfico y de pequeño tamaño.

5.3. Imágenes mapa

Empezamos a adentrarnos ya en algunas de las características más avanzadas del lenguaje HTML. En este caso es el turno de las imágenes mapa.

Con bastante probabilidad el lector habrá visitado alguna página en la que había alguna imagen en la que se podía pulsar en diferentes partes para acceder a diferentes destinos. Estas son las llamadas imágenes mapa y en la gran mayoría de páginas Web podemos encontrar una. En un principio para realizar las imágenes mapa era necesario usar determinados programas especiales que debían estar en el servidor Web, sin embargo con el estándar HTML 3.2 se incluyeron algunas etiquetas HTML que nos permitirán realizar estas imágenes mapa con mayor facilidad.

5.3.1. Imágenes mapa en el servidor

Este era el único método usado inicialmente para crear las imágenes mapa, para usarlo debemos instalar en el servidor Web (si tenemos acceso a él) algún programa dedicado a este fin. Los más usados son los del CERN y NCSA. Para usar este método debemos llevar a cabo los siguientes pasos:

  1. Crear un archivo de configuración del mapa con el código del programa usado para indicar las zonas activas y donde nos dirigirán el pulsar sobre ellas. Para averiguar como es el código a usar tendremos que leer la documentación que acompañe al programa, pero en general no será muy complicado. El archivo con el código tiene en general la terminación '.map'.

  2. Escribir el código HTML de manera que la imagen sea un enlace al archivo con su código. Además debemos incluir el atributo ISMAPen la etiqueta IMG:

    
    	      <A HREF="img.map"<
    	      <IMG SRC="img.gif" ISMAP>
    	      </A>
    
    	    

En la página de POST-IT, figura 5.29, podemos ver un ejemplo de imagen mapa en el servidor.

Figura 5.29. En la página principal de POST-IT vemos un excelente ejemplo de la utilidad de las imágenes mapa.

En este caso la imagen representa una mesa con diferentes objetos encima cada uno de los cuales representa una sección del sitio Web al que saltaremos si pulsamos sobre él.

La gran ventaja de este método consiste en que funcionará con cualquier navegador, el único requisito es tener el programa en el servidor Web. El principal inconveniente es que, por lo general no todo el mundo tiene acceso al servidor Web y no puede instalar los programas que necesita, por otro lado tener el código del mapa en un archivo aparte complica su modificación.

Para resolver estos problemas apareció el segundo método en el que el código de todas las imágenes mapa de una página podrán estar en esa misma página y además se creará usando etiquetas del lenguaje HTML.

5.3.2. Imágenes mapa en el cliente

Este tipo de imágenes reciben el nombre de imágenes mapa en el cliente porque será el navegador de cada usuario (cada cliente) el que se encargará de leer el código cuando se pulsa sobre la imagen mapa y averiguar la dirección de destino. No es necesario ningún programa especial en el servidor Web.

En este caso nos bastará usar la etiqueta IMG para crear la imagen, eso sí con un nuevo atributo: USEMAP . Por otro lado ahora deberemos usar algunas otras etiquetas nuevas para crear el mapa de la imagen. La creación de este tipo de imágenes mapa consta por tanto de dos pasos:

  1. Definición de la imagen como imagen mapa, así como informar de dónde está el mapa a usar. La sintaxis es sencilla:

    
    	      
		<IMG SRC="imagen.gif"
    		USEMAP="#mapa1">
    	      
    
    	    

    La imagen es, en este caso, una con formato GIF de nombre imagen.gif. En este ejemplo usamos un mapa llamado mapa1, como vemos la forma de referirnos a él es igual que con las anclas: anteponiendo el símbolo '#'. En esta ocasión el mapa estará en el mismo documento HTML, pero esto no tiene porque ser así. Si, por ejemplo, usamos una imagen mapa en todas y cada una de las imágenes de un sitio Web, podemos poner el mapa en la página principal (index.htm) y después referirnos a él como:

    
    	      
		<IMG SRC="imagen.gif"
    		USEMAP="index.htm#mapa1">
    	      
    
    	    

    Más aún, no estamos limitados a que el mapa esté en nuestro sitio Web, puede estar en cualquier lugar del WWW, para referirnos a él tendremos que poner la dirección URL de la página dónde esté seguido por un # y el nombre del mapa.

  2. El segundo paso es la creación del mapa. Para ello usaremos una nueva etiqueta: MAP. Esta etiqueta tendrá una instrucción de inicio, <MAP ...> , y otra de fin,</MAP> entre las cuales definiremos las diferentes zonas activas de la imagen mapa. El único atributo de esta etiqueta es el necesario para darle un nombre: NAME, y se usará de la siguiente manera:

    
    	      <MAP NAME="mapa1">
    	      ...
    	      </MAP>
    
    	    

    A continuación debemos crear las formas a las que nos referíamos antes. Para llevar a cabo esta labor usaremos otra etiqueta más: AREA que deberá ser una vez para cada zona de la imagen mapa y que consta de cuatro atributos:

    • HREF: Este atributo es idéntico al del mismo nombre de la etiqueta A. Con él debemos indicar la página o dirección URL a la que saltaremos cuando pulsemos sobre esta zona activa.

    • ALT: Sirve para incluir un texto alternativo.

    • SHAPE: Define la forma de la zona, puede tener tres valores: rect (zona rectangular), circle (zona circular) y poly (zona poligonal).

    • COORDS: Coordenadas de la zona, su valor depende de la forma de esta. En la figura 5.30:

      Figura 5.30. En esta figura podemos ver los valores que puede tomar el atributo COORDS en función de si la zona es rectangular, circular o poligonal.

      podemos ver como será en función de si el valor de SHAPE es...

      • rect: COORDS toma 4 valores separados por comas que representan las coordenadas de el vértice superior izquierdo y el inferior derecho.

      • circle: COORDS toma 3 valores. Los dos primeros son las coordenadas del centro y el tercero es el radio.

      • poly: COORDS tiene un número indefinido de valores que representan las coordenadas de cada uno de sus vértices.

Como ejemplo vamos a imaginar una imagen de 300x100 y vamos a crear un mapa que la divida en dos:


	  <MAP NAME="mapa2">
	  
	    <AREA SHAPE="rect"
	    COORDS="0,0,150,100"
	    HREF="izda.htm">
	  
	  
	    <AREA SHAPE="rect"
	    COORDS="150,0,300,100"
	    HREF="dcha.htm">
	  
	  </MAP>

	

No ha sido complicado, ¿no?

Nota

Las coordenadas vistas hasta ahora están dadas en pixeles. También pueden darse en porcentajes, aunque esto sólo suele ser útil para el caso de zonas rectangulares. La sintaxis a usar sería por ejemplo: COORDS="0,0,50%,40%"

Existe un quinto atributo, NOHREF, que puede usarse en lugar de HREF para indicar que una determinada zona no debe conducir a ningún sitio al pulsar sobre ella. Este atributo no toma ningún valor.

Si dos o más zonas se superponen se impone la que fuera definida primero. Por esta razón si existe alguna zona con NOHREF suele ponerse la primera de la lista.

El problema las imágenes mapa en cliente radica en que no todos los navegadores están preparado para este tipo de imágenes mapa, y por tanto no podemos estar seguros de que todos los vistantes vayan a poder disfrutar de nuestra imagen mapa.

Nota

Siempre que usemos una imagen enlace y especialmente si esta es una imagen mapa es importante crear esos mismos enlaces con textos para que se pueda acceder a ellos con navegadores de sólo texto o por si existe algún problema con la visualización de las imágenes.

Aviso

Hay que tener mucho cuidado con el uso de los atributos WIDTH y HEIGHT con las imágenes mapa, ya que la imagen variará sus dimensiones, pero el mapa no, por tanto las zonas que hayamos definido no servirán.

EJERCICIO 5.1: Llegados a este punto queremos proponer un ejercicio sencillo a los lectores. Éste consistirá en la creación de un mapa para la imagen de la figura 5.31:

Figura 5.31. Imagen mapa que puede sustituir el menu en forma de lista de la página de la agencia de viajes Los Alpes.

incluida en el archivo ej5-1.zip, y usarla para sustituir el menú creado con una lista en la página de la agencia de viajes Los Alpes creada en la práctica 2. Además habrá que proporcionar enlaces en modo texto alternativos a la imagen (lo habitual es que estén en una sola línea. En el mismo archivo (extra.zip) se ofrece una solución a este ejercicio.