Capítulo 6

Imágenez

Ya estamos de vuelta con otra entrega de este curso. ¡La DIVnet 2! (porgresamos). Y ahora tocan...las imágenes. Aaaahhh...(suspiro) ¿Ké sería de una web sin las imágenes? Hoy en día es impensable hacer una web y no poner ninguna imagen. Sí, claro, por poder se puede hacer. Pero el contenido de tu web tendría que ser la crême de la crême porke si no tu page acumulará polvo en el servidor.

Aunque a alguno le cueste admitirlo, las imágenes hacen mucho. Tanto es así que una página con unos contenidos de calidad media pero con unas buenas imágenes marcan la diferencia en el contador de visitas. Esta es la diferencia entre mi página (contenidos medios, diseño patético aunk lo pienso arreglar) y la de Underd_ o Deemo (contenidos medios-altos y un buen diseño).

Así que si queremos triunfar hay que poner alguna que otra imagen en la web. ¿Y cuáles son los formatos que soporta el HTML?

GIF: Tienen la extensión .gif. Es el más usado. Sólo tiene 256 colores y una calidad de imagen bastante inferior que los JPEG's, pero okupan bastante poco y podemos crear GIF's animados con programas especiales.
JPEG: Tiene la extensión .jpeg o .jpg. Formato TrueColor (color verdadero) que se traduce en montones y montones de colores y una calidad gráfica IM-PREZIONANTE. ¿Pegas? Okupan un güevo y no podemos crear imágenes animadas.

Entonces...¿cuál formato elegir? Depende ¿De qué depende? (de según como se mire....) Depende de para qué queramos la imagen. Por ejemplo, si tenemos una imagen muy chula que aparezca en la página principal o hacemos una escena 3D con el 3D Studio y queremos que tenga mucha calidad, usamos el JPEG. Si lo que queremos es poner los típicos botones de secciones, algún monigote animado o un icono usamos el GIF.

¿Y ké hacemos para insertar imágenes en un documento HTML?

Usamos la etiqueta <IMG SRC="archivo.gif">

Archivo.gif es la ruta de acceso donde está la imagen y se usa igual que la ruta de acceso a los links. Lo más común es guardar las imágenes en el mismo directorio donde tenemos la web y así no usamos la ruta de acceso y sólo ponemos el nombre de la imagen. Ejesssmplo:

NOTA: Esta imagen no está disponible.

Voilá. Nuestro diablillo en marcha. Komo véis, aparte de tener una horrible animación, tiene un horrible fondo amarillo. ¿Kómo lo kitamos? Magia. Otra ventaja del formato GIF: los fondos transparentes. Cuando editas un archivo GIF, el programa trae una opción de guardado que sirve, para eso, para hacer el fondo transparente y que no quede feo si nuestra página tiene el fondo negro, verde fosforito o utilizamos una imagen de fondo. Aquí tenéis un ejemplo de un GIF animado y con fondo transparente:

NOTA: Esta imagen no está disponible.

Como veis, bastante mejor. La etiqueta <IMG> tiene un parámetro que se llama ALIGN, que establece la posición del texto con respecto a la imagen. Puede tener estos valores: right, middle, left.

NOTA: Esta imagen no está disponible.

Hay que tener en cuenta de que este parámetro se comporta de forma distinta en el Internet Explorer que en el Netscape Navigator. Puedes probarlo y verás que el resultado queda mejor en el IE (lástima).

Y bien, ahora el truco del almendruco.

Imágenes que sirven de links

Es muy fácil de hacer. Sólo tienes que poner (por ejemplo):

NOTA: Esta imagen no está disponible.

En vez de texto pones la imagen y yatá. Pero hay un problema...¿Ké pasa con las personas que tienen configurado el navegador para que no muestre imágenes o si nuestro visitante es un ciego con uno de esos aparatitos que sólo leen el texto? Pos ke la cagamos. Pero a grandes males, grandes remedios. Tenemos un parámetro salvador, ALT que nos permite poner una descripción a la imagen.

Y todos contentos :)

Y ahora, veremos cómo poner una imagen de fondo en nuestra web mediante...

Imágenes en la etiqueta BODY

Hay un parámetro en la etiqueta BODY que se llama BACKGROUND. Es evidente para qué sirve ¿no? Con esto conseguimos una imagen de fondo.

Hay que cuidar los colores de la web para que se vean bien con respecto al fondo. La imagen de fondo siempre prevalece sobre el color de fondo. Entonces, ¿tiene sentido esta etiqueta?

(Como ves, ya pongo los colores en hexadecimal). Si pusiéramos esa etiqueta en una web, se vería con un fondo espacial y el texto blanco...¿y a qué viene el BGCOLOR de ahí? Ahhh...muy sencillo. Lo ilustraré muy bien:

Sábado a las 22:30 en Internet. Tenemos un penoso módem a 28800 y, para colmo de males, el ancho de banda de nuestro servidor está saturado. Hasta las tortugas van más rápidas. que nosotros...Entramos en nuestra web preferida con una estupenda imagen de fondo de tropecientos Kbytes y... ¡¡¡¡¡Aaaaagggggghhhhhh!!!!!

Jeje....¿A qué se debe ese grito de nuestro sufrido amigo? A que la web que "intenta" visitar tiene la imagen de fondo con un color osucuro y el texto blanco. ¿Y qué tiene que ver? El texto se carga mucho antes que las imágenes, por lo tanto, mientras la imagen se carga, aparece un fondo blanco (o en algunos casos gris, según configuración del ordenador, y el texto no se puede leer hasta que no se carga la imagen, lo cual es una p*t**a.

Para arreglar eso, ponemos un color de fondo además de una imagen...y mientras se carga la imagen de fondo nuestro kerido visitante puede empezar a leer...Y la etiqueta de arriba tiene sentido.

Yasta. Kreo ke no me dejo nada.

Ejercicio

Ahora para prácticar con las imágenes, necesitamos eso...imágenes. ¿Y dónde conseguirlas? Dos maneras:

Gastándote una pasta en una colección de imágenes. Por ejemplo, Corel Gallery (1000.000 de imágenes) kuesta 20.000 pelas. Y si piesas, "bueno, ya me lo compraré pirata, total, por 1000 pelas..." malas noticias: son 15 CD's. Hay otras colecciones más baratas pero también más cutres.

Gorroneándolas. Mi método preferido. Sólo tienes que navegar un rato por la Red y cuando veas una imagen que te guste, pues:

1. Picas con el botón derecho en la imagen.

2. Seleccionas guardar como...

3. Le pones nombre y...¡asunto resuelto!

Claro, esto sería perfecto pero hay gente avispada que no quieren que se aprovechen y le ponen Copyright a la web. Llevad mucho ojo. Si ponéis una imagen con copyright y el dueño se da cuenta, os pueden obligar a quitar la imagen. Este método es casi "gratis" por cortesía de Timofónica.

Suponiendo que no tengáis tiempo para gorronear o no hayáis encontrado nada, aquí tenéis algo para ir practicando...

¡¡¡Advertencia!!! Controlad el tamaño de las imágenes. Si ponéis muchas el tiempo de carga de vuestra web puede aumentar desconsiderablemente haciendo imposible la navegación. ¿Sugerencias para ahorrar espacio y hacer bonita a tu web? Ahí van los 10 mandamientos respecto a las imágenes made by BenKo'99:

Pon sólo las imágenes indispensables.
Las imágenes pequeñas okupan menos
Los GIF's okupan menos que los JPEG.
Poner muchos GIF's animados marean a la gente y okupan mucho espacio.
¡Vigilad las paletas! Si al crear una imagen, usáis pocos colores, no la guardéis como si tuviese 256 colores.
A mayor resolución de la imagen, mayor tamaño.
No porque tu web tenga mil y una bonitas imágenes significa que sea mejor.
Un diseño simple, pero atractivo, y con pocas imágenes gusta más al visitante.
Si en tu web hay mucho movimiento (marquesinas, GIF's animados, scripts, applets de Java, música, etc) cansa a cualquiera.
Crea un tema para tu web. Es decir, no pongas imágenes espaciales, medievales, de Elvis, etc. todas juntitas solo porque "queda bonito".

Y todas esas enseñanzas se pueden resumir en la gran regla de oro, inventada por el Tío Gilito:

¡¡¡Ekonomía, Ekonomía!!!

P' atrás | Principio | P' alante