6. GALERÍAS

Hay muchas formas de hacer una galería, lo esencial es que sea una página ordenada, informativa y rápida de cargar pero lo más importante es que te deje conforme, o sea que tu galería tenga todo aquello que siempre esperaste de las demás galerías visitadas.

6.1 Estilos de Galerías

Conozco varias formas de hacer una galería, pero explicaré en detalle sólo la que considero mejor y, pondré de ejemplo 4 formas básicas:

6.1.1 La Básica.

Consiste en poner todas lás imágenes en tamaño real en una misma página.

Desventajas:

  • Si las imágenes son muy grandes hará que la página tarde mucho en cargar.
  • Es desordenada.
  • Resulta complicado agregar información extra a las imágenes.

Ventajas:

  • Es fácil de escribir.

Ejemplo

6.1.2 La de links con texto.

Consiste en poner sólo links de texto a cada imagen. La imagen no es mostrada en este tipo de galería.

Desventajas:

  • Pese a que es la única desventaja que me viene a la mente, es un tanto grande, pues no se sabe cual es la imágen que está detrás del link. El problema es que uno se ve obligado a revisar todas las imágenes una por una, aunque se esté buscado una imagen específica o alguna nueva. ˇImagínate lo terrible que es cuando hay 30 links o más!

Ventajas:

  • Página rápida de cargar y fácil de hacer.

Ejemplo

6.1.3 La de links con imágenes

Consiste en poner la imagen como link a si misma, pero a la imágen que se muestra en pantalla se le modifican los atributos width y height de el tag <img>. Esto se hace para que la imágen que se muestra en pantalla se vea mas chica. Fijate que aunque la imagen se ve más pequeña sigue siendo la misma, lo que significa que se demora lo mismo en cargar.

Desventajas:

  • Las mismas que de la forma 6.1.1.

Ventajas:

  • Es más ordenada y se puede ver la imagen.

Ejemplo

6.1.4 La de links con imágenes modificada

Consiste en poner una imagen reducida como link a la imagen normal. La diferencia con el método anterior es que la imagen reducida pesa menos que la imagen normal, lo que hace que la página cargue más rápido.

Desventajas:

  • Es necesario manejar un editor de imágenes.

Ventajas:

  • ˇTodas!

Ejemplo

6.2 Construyendo la Galería

La galería que explicaré en detalle es la 6.1.4, al menos para mi esa es la mejor de las 4. La mayor dificultad es que hay que saber reducir una imagen. En nuestro caso la imagen normal se llama "beetle?pk.jpg" y su imagen reducida se llama "beetle?pk.gif", donde ? = 1,...,5.

Ahora usaré una herramienta muy útil y casi necesaria para construir la galería... tablas. Por supuesto el uso de tablas es opcional, pero el usar tablas en una galería hace que esta tengan un orden y una estética excelente. Como tenemos 5 imágenes pondremos 3 arribas y 2 abajos. La forma de la columna que contendrá a cada imagen es la siguiente:

imagen
comentario link

Cuyo código es el siguiente:

<tr><td colspan=2>imagen</td></tr>
<tr><td>comentario</td>
<td>link</td></tr>

En donde dice "imagen" tienes que poner la imagen reducida como link a la imagen normal. Checa que además he dejado 2 celdas extras debajo de cada imagen, en donde dice "comentario" pondré el tamaño de la imagen y en donde dice "link" pondré un link a la misma imágen pero el link se abrirá en una nueva ventana, obviamente esto último es totalmente opcional, pero a mi me parece una buena idea que estos datos estén. El código de todo esto para la primera imagen es el siguiente:

<tr> <td colspan=2><img src="beetle5pk.gif" border=0></td> </tr>
<tr><td>size: 52 KB</td>
<td><a href="beetle5pk.jpg" target="_blank"><i>new</i> </a> </td> </tr>

Y se vería algo asi...

size: 52 KB new

Ahora puedes jugar con el color de los fondos de las celdas o los bordes de la tabla. Se pueden obtener resultados como los siguientes, todo está en tu creatividad.

size: 52 KB new
size: 52 KB new
size: 52 KB new

En fin, la cantidad de combinaciones o de cosas extras que se pueden poner es enorme. Creo que estos ejemplos pueden ser una buena base.

El resultado final de la galería completa podría ser el siguiente.