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:
-
El primer caso es el anteriormente comentado de navegadores en modo texto. En este caso es necesario hacer un comentario especial. Cada vez que el navegador se encuentra con una imagen (es decir con una etiqueta IMG en el código HTML ) en vez de mostrarla la sustituye por el siguente texto: [IMAGE] (image significa imagen en inglés). Sin duda esta palabra no es muy descriptiva, y además es la misma para todas las imágenes. Para solucionarlo el programador puede usar el atributo ALT, en ese caso el texto [IMAGE] será sustituido por el que se indique como valor de este atributo, que sin duda explicará mejor el contenido de la imagen. En ocasiones es conveniente usar el atributo ALT sin ningún texto (ALT=" ") para evitar la aparición de [IMAGE], pero esto no debe hacerse muy a menudo.
-
Un segundo caso puede ser que el usuario haya decidido desactivar la opción de ver las imágenes de las páginas. Tanto Explorer (en Opciones de Internet/Opciones avanzadas/Multimedia) como Netscape (en Preferences/Advanced) ofrecen esta opción. Si ponemos un texto alternativo suficientemente descriptivo el visitante podrá decidir si merece la pena cargar la imagen o no.
-
Un tercer caso ocurre cuando hay un problema en la transmisión de la imagen o porque se ha indicado un nombre incorrecto. En este caso los navegadores muestran un símbolo gráfico acompañado del texto alternativo. En la figura 5.25 podemos ver este caso con Explorer y Netscape, donde hemos usado el código anterior usando el atributo ALT para que sea mostrado un texto alternativo.
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:
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.
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 gran mayoría de navegadores gráficos soportan los formatos GIF y JPEG, y algunos de ellos soportan algún otro formato pero no es lo habitual. Sin embargo gran parte de los navegadores, gráficos o no, soportan un rango mucho más amplio de formatos de imágenes con la ayuda de aplicaciones externas, por lo que usando imágenes externas podremos usar otros formatos distintos de GIF y JPEG y el navegador se encargará de llamar a la aplicación que necesite para visualizarlo.
-
Como hemos comentado repetidas veces los navegadores en modo texto no pueden mostrar imágenes inline, sin embargo si pueden mostrar imágenes externas ayudándose de algún programa de visualización o edición gráfica.
-
Mientras las imágenes inline deben tener un tamaño reducido para no provocar grandes esperas al navegante al visitar nuestra página, las imágenes externas pueden ser de mayor tamaño ya que sólo las verán aquellos que lo pidan y por tanto hemos de suponer que les interesa lo suficiente como para esperar. En todo caso si el tamaño supera los 100 Kbytes es conveniente indicar dicho tamaño entre paréntesis junto con el texto identificativo de la imagen.
-
Nos ofrece la posibilidad de combinar imágenes inline con imágenes externas para que las páginas se carguen más rápidamente. De esta forma crearemos los llamados thumbnails que veremos con más detalle un poco más adelante.
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.
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.
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.
que muestra dos ejemplos de thumbnails de la imagen completa de la figura 5.28.
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.
|
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.
