Desarrollo: Imágenes: Visualización

Imágenes en el diseño

La velocidad de acceso al Web está siempre muy reñida con el diseño. Es frecuente el caso en que, para embellecer un Web se utilicen muchas imágenes (en formatos gif o jpeg) de gran tamaño. Esto obliga a los usuarios con conexiones lentas a sufrir largas esperas hasta que la información se presente en pantalla, y eso es un riesgo porque más de dos saltarán a cualquier otra dirección Internet antes de perder su tiempo.

La velocidad de la Web también dependerá en gran medida de lo saturadas que estén las líneas de acceso a nuestro centro proveedor de presencia en Internet (en resumen, el servidor donde se aloja el Web). Sin embargo este es un problema que se escapa del ámbito del diseño.

La gráfica (incluida elementos multimedia) de un sitio Web debe se una herramienta de comunicación al servicio de los objetivos planteados y condicionados por las pautas culturales (preferencias, gustos) del público. Esto significa que tampoco es un espacio de lucimiento del diseñador, ni la estética.

Debe adecuarse a los gustos y preferencias de los responsables del sitio. Una vez más los objetivos trazados y el perfil del público deberían ser los instrumentos para tomar las decisiones de diseño gráfico y multimedia.

Además de los criterios estéticos y comunicacionales del diseño gráfico, es importante respetar los criterios técnicos específico:

1. Que cada página sea fácil de cargar. La velocidad de carga de una página está en función del estado de las líneas y de la cantidad de información que contiene. Sobre el primer parámetro no hay nada que podamos hacer desde el diseño, pero sí sobre el segundo: establecer para cada página un máximo de bytes y no sobrepasarlo.

2. Realizar los gráficos del tamaño más chico posible. Repetir los iconos siempre que sea posible. El browser los leerá de la memoria caché a partir de la segunda vez que deba colocarlos en la página.

3. Grabar cada gráfico en formato GIF y JFG, verificar el tamaño de ambos y descartar el mayor.

4. Reducir la cantidad de colores de cada gráfico al mínimo indispensable.

Posición de las imágenes

Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades. La más sencilla es colocarla entre dos párrafos, con un titular a un lado. Los navegadores más actuales (como el Netscape Navigator y el Microsoft Internet Explorer) permiten que el texto pueda rodear a la imagen.

De momento nos vamos a limitar a escoger la posición del titular con respecto a la imagen (sí es que queremos ponerle un titular, claro está). Se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:

<IMG SRC="isla.gif" ALIGN=TOP> Titular alineado arriba

<Imagen: isla>Titular alineado arriba

<IMG SRC="isla.gif" ALIGN=MIDDLE> Titular alineado en medio

<Imagen: isla>Titular alineado en medio

<IMG SRC="isla.gif" ALIGN=BOTTOM> Titular alineado abajo

<Imagen: isla>Titular alineado abajo

Imágenes utilizadas como enlace

Podemos utilizar una imagen como enlace a otra página. Para estos casos se utilizan generalmente imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.

La estructura general de un enlace es:

<A HREF="xxx"> yyy </A>

donde xxx era el destino del enlace e yyy el texto del enlace . En este caso sustituimos xxx por el nombre del fichero de la página a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen

<A HREF="pag2.html"><IMG SRC="hombre.gif"></A>

También podemos utilizar una imagen para enlazar con otra imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy

<A HREF="isla.gif"><IMG SRC="casa.gif"></A>

Por último, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso sustituimos xxx (el destino del enlace) con el nombre del fichero de la imagen a la que queremos acceder e yyy (lo que aparece en pantalla como el enlace) por el texto.

<A HREF="isla.gif"> un paraíso tropical </A>

Un tipo de imágenes del que se hace abundante uso y que sirven para mejorar la presentación de la página son los iconos, botones, barras separadoras, etc. A pesar de su tamaño o forma, son imágenes como cualquier otra.

Elementos Interactivos

La interactividad es fundamental para el éxito de un Web. Se debe evitar la sensación "lectura de periódico" que puede causar en un visitante un Web pasivo y lineal. Además la interactividad puede beneficiar a quien publica el Web ya que a través de formularios podrá conocer mejor los perfiles de quienes pasan por las páginas.