IMÁGENES

 Introducción

Ya hemos visto que podemos incluir imágenes en nuestra página web utilizando la etiqueta <img src="imagen.png" alt="texto alternativo" />, y que estas imagen deben de ser del formato jpg, gif o png, dependiendo del tipo de imagen, para obtener la mejor relación calidad-tamaño.

En nuestro sitio de ejemplo, vamos a utilizar imágenes para mostrar fotografías, pero también como parte del diseño.

Por ejemplo, vamos a crear una galería fotográfica para las imágenes de las distintas flores que queremos colgar en nuestro sitio. La idea es tener cuatro páginas, una para cada categoría de flores (silvestres, ornamentales, exóticas y plantas), desde las que podamos acceder a las fotografías de las flores, que son de gran tamaño.

Como la mecánica es la misma, sólo haremos la galería de flores silvestres. Pero te invitamos a que intentes hacer alguna otra sin ayuda al acabar el tema.

 Galería con miniaturas

Las fotografías que utilizaremos puedes encontrarlas en la carpeta fotos_flores que habrás descargado con los archivos del sitio.

La idea es simple: mostrar imágenes en una página. En principio, bastaría con ir poniendo las etiquetas img para cada imagen. Esto bastaría si fuesen imágenes de pequeño tamaño. Pero imagina una página con 15 o 20 imágenes, donde cada una ocupa toda la pantalla. La página tardaría mucho en cargarse, por el peso de las imágenes, y sería muy larga.

Por eso, lo normal cuando creamos una galería es crear miniaturas (o thumnails) de las imágenes. Se trata toda o parte de la imagen original, de menor tamaño, que al pulsar sobre ella muestra la imagen original.

La forma más simple de hacer esto es crear un enlace hacia el archivo de la imagen. Por ejemplo:

<a href="imagen_grande.jpg"><img src="miniatura.jpg" alt="Descripción" /></a>.

También se suele utilizar javascript para abrir la imagen, consiguiendo efectos más vistosos.

Para crear una miniatura de una fotografía, podríamos poner un valor menor en los atributos width y height de la etiqueta img. Y aunque esto hace que se muestre más pequeña, el archivo sigue siendo el mismo, por lo que la página tardaría lo mismo en cargar. La solución es crear un nuevo archivo de imagen, reduciendo el original.

Para trabajar con imágenes debemos de emplear algún programa especializado. Nosotros hemos elegido GIMP, por ser un potente programa de retoque fotográfico totalmente gratuito y libre. Puedes descargar su última versión desde http://www.gimp.org.es/modules/mydownloads/. Si necesitas ayuda para instalarlo, consulta este básico Básico. También puedes utilizar otros programas, como Photoshop. Incluso, si sólo vamos a redimensionar alguna foto puntualmente, puedes utilizar programas más simples, como Paint, preinstalado en Windows.

 Utilizando este programa, nos resultará sencillo crear las miniaturas. Si no conoces los programas de retoque fotográfico, puedes realizar el ejercicio paso a paso Recortar y redimensionar imágenes con GIMP.

En nuestro sitio de ejemplo, tendremos todas las fotografías de las flores en la carpeta fotos, dentro de la carpeta flores. Para cada foto, tendremos la fotografía que queremos mostrar, de un tamaño mayor, y la miniatura, que se llamará igual, pero terminado en _mini. La mayoría de las fotos, ya están redimensionadas y tienen la miniatura, por lo que sólo tienes que copiarlas de la carpeta fotos_flores, en la carpeta de ejercicios, que habrás descargado a la carpeta del sitio, sitio_flores/flores/fotos. La foto buganvilla.jpg es mucho mayor que las demás. Debes reducirla al 50% y obtener la miniatura tal y como se explica en el ejercicio anterior.

Organizar las miniaturas

Una vez que tenemos las miniaturas, hemos de plantearnos cómo las vamos a organizar en la página. Esto dependerá del número de miniaturas que queramos mostrar, de su tamaño, del diseño de la página, etc.

En nuestro ejemplo, vamos a simular una ficha para cada flor. En cada ficha estará la miniatura que enlaza con la imagen (hay flores que tienen dos imágenes), el nombre de la flor y su nombre científico.

Vamos a comenzar por crear la galería de las flores silvestres. Partiendo del archivo base.html, crea la página silvestres.html, guardándola dentro de la carpeta flores.

Si pruebas la página en el navegador, comprobarás que no se muestra el estilo, y los enlaces no funcionan. Esto se debe a que ni la hoja de estilo ni las otras páginas están en la misma carpeta. Para solucionarlo, podemos indicar delante del nombre del archivo ../, para indicar que se encuentra en un nivel superior. Por ejemplo href="../estilo.css".

Pondremos la pestaña Flores siempre como activa.

En el título (h2) hemos escrito Galería de flores silvestres.

Después del título, en un párrafo (p), hemos escrito Las flores silvestres son aquellas que crecen en nuestra región. Para verlas, basta con acercarnos a un parque o dar un agradable paseo por los alrededores de nuestra ciudad..

A partir de aquí, vamos a comenzar a añadir las fichas de las flores silvestres que tenemos. Vamos a ver como estructuramos la ficha. Como ejemplo, vamos a utilizar la flor del Agret (Oxalis pes-caprae):

Para delimitar las distintas fichas, lo más cómodo es crear un div para cada una. Como a este div le definiremos ciertas propiedades de estilo, podemos pensar ya que necesitará ser identificado. Y como habrá varios, y en varias páginas, vamos a asignarle la clase ficha.

Dentro de este div.ficha, colocamos la imagen de la miniatura:

<img alt="Agret" title="Agret" src="fotos/agret_mini.jpg" height="75" width="100" />.

Como al pulsar sobre la miniatura, hay que abrir el original, debemos de colocar un enlace con la imagen dentro. Por tanto quedará:

<a href="fotos/agret.jpg"><img ... /></a>.

Junto a la imagen, tenemos que colocar dos elementos de texto. En la primera línea el nombre de la flor, y en el segunda el nombre científico. Podríamos colocar el texto en un párrafo, y separar los nombres con un salto de línea (<br />). Pero como queremos diferenciar un poco el nombre científico, lo más cómodo será ponerlo en otro párrafo con una clase, por ejemplo class="cien". Por lo tanto, el texto nos ha quedado así:

<p>Agret</p>

<p class="cien">Oxalis pes-caprae</p>.

Si te fijas en el resultado final del ejemplo, verás que hay una página con un listado de las flores, y enlaces a cada una de ellas. Para poder enlazar, vamos a asignarle in ID al div.ficha. Para no liarnos, seguiremos una nomenclatura fácil de recordar. Por ejemplo, utilizaremos el nombre de la flor en minúsculas, y si tiene espacios, los cambiaremos por guiones bajos.

Por tanto, la ficha de la flor de Agret nos ha quedado así:

<div id="agret" class="ficha">

 <a href="fotos/agret.jpg"><img alt="Agret"

  title="Agret - Oxalis pes-caprae" src="fotos/agret_mini.jpg" height="75"

  width="100" /></a>

 <p>Agret</p>

 <p class="cien">Oxalis pes-caprae</p>

</div>