comparte el articulo 

Manejo de imágenes con XHTML y CSS

Actualizado el 20/12/2011 < > 0 Comentarios

Resumen: El manejo de imágenes es una aspecto fundamental para realizar un buen sitio, estudiamos como utilizar XHTML y CSS para su incorporación a tus páginas web.

El uso de imágenes dentro de documento XHTML será, por obvias razones, la mejor forma de presentar contenido visual en nuestra página web. Ya sea una foto. un botón o algún elemento de un layout, las imágenes están presentes en casi todos los sitios que se encuentran en la Web, excluyéndose únicamente en aquellos sitios extra minimalistas que sólo optan por utilizar texto y CSS para presentar información.

Hubo un período de tiempo donde la dependencia al uso de imágenes era aún más marcado, no podías dar paso sin utilizarlas, ya que su función fue malinterpretada y los nuevos layouts las aplicaban para dar forma a la estructura del sitio. Por ello, al momento de entrar a una página se nos cargaban imágenes transparentes, gifs espaciadores, incluso letras y menús hechos únicamente con imágenes, esto representaba hacer varias peticiones al servidor para descargar muchas imágenes que solo eran utilizadas en una ocasión y alentaban el tiempo de descarga del sitio.

En la actualidad gracias a CSS podemos omitir gran parte de esas locuras y suprimir el uso excesivo de imágenes, pero esto no demerita su importancia dentro del documento. Las imágenes siguen siendo una parte muy relevante al momento de planear un sitio, por lo que debemos clasificarlas en dos grandes tipos, aquellas que utilizaremos para mostrar o ejemplificar contenido, y las que utilizamos para mejorar la presentación.

Etiqueta img de HTML

La etiqueta “img” es la encargada de crear el elemento de imagen, es decir nos permitirá incrustar una imagen dentro de nuestro código y así mostrarla en la página.

<img src=”imagenes/webera.jpg” alt=”La Webera” />

Cuenta con varios atributos que se encargan de especificar aspectos relevantes sobre la incrustación de la imagen, el principal de ellos lleva por nombre “src” y se encarga de apuntar hacia la locación actual del archivo de la imagen, sin él la etiqueta pierde sentido de uso. Entre los atributos también encontramos “alt”, que por reglas XHTML es totalmente requerido, y se encarga de especificar un texto que describa o explique la imagen.

El hecho de que el atributo “alt” sea un elemento requerido por XHTML, se debe a que representa una alternativa para aquellos usuarios que por alguna razón no pueden observar la imagen, además aumenta el SEO del sitio permitiendo que los buscadores puedan obtener contenido legible sobre las imágenes que se están mostrando. Su contenido dará una idea de lo que la imagen representa y ayudará en caso de que esta sea retirada o el servidor no ofrezca una respuesta a la petición.

Por otro lado, también tenemos atributos, que en su tiempo se encargaron de dar forma al elemento de imagen pero ya no soy soportados por los navegadores. Tal es el caso del atributo “longdesc” que se encargaba de proveer la locación o dirección hacia un archivo que contenía una larga descripción de lo que se esta mostrando con la imagen.

Mapas de imágenes

Cuando utilizamos una sola imagen para establecer varios puntos o dividirla en partes mediante coordenadas, estamos estableciendo un mapa de imagen. Hablando en términos generales, podemos encontrar que existen dos tipos de mapas, aquellos que se encuentran del lado servidor y los que son realizados desde el lado cliente, estos últimos son los que vamos a realizar mediante las etiquetas “map” y “area”.

Supongamos que tenemos una imagen con un mapa mundial, y queremos señalar a dos o más países dentro de este mapa para redireccionar a otras páginas, entonces tendríamos que hacer algo como esto:

<img src="mapamundi.gif" alt="Mapa mundial" usemap="#mapamundi" />
<map name="mapamundi" id="mapamundi">
<area shape="rect" coords="0,0,115,90" href="america.html" alt="America" />
<area shape="poly" coords="113,39,187,21,180,72,141,77,117,86" href="europa.html" alt="Europa" />
</map>

En este ejemplo estamos definiendo una imagen que se relaciona a un mapa mediante el atributo “usemap”, el cual lleva el mismo valor que el atributo “id” del elemento “map”. En este caso nos estamos refiriendo a “id” y no a “name” ya que en eso radica la diferencia entre XHTML y HTML para este caso, XHTML considera deprecado el atributo “name” para la etiqueta “map”, por ello “id” se convierte en el atributo de uso común, aunque en este ejemplo utilizamos ambos para evitar problemas de compatibilidad.

Cada elemento de área del mapa es definido mediante la etiqueta del mismo nombre, el cual cuenta con atributos de forma y coordenadas. Para la primer área utilizamos una forma rectangular por lo que el atributo “shape” recibe el valor de “rect” y las coordenadas tienen que indicar los cuatro puntos de la figura por lo que el atributo “coords” indica los cuatro valores separados por coma; por su parte la segunda área utiliza una forma poligonal por lo que son necesarios más valores para indicar la forma.

La razón por la que estos mapas no son tan utilizados, es que su uso se limita únicamente a ciertas enseñanzas como el caso de temas geográficos como el que vimos, además del hecho de que no son de un uso amigable en la interfaz, en muchas ocasiones no podemos inferir que la imagen cuenta con divisiones o links internos.

Imágenes de fondo con CSS

Debido a que las imágenes son más utilizadas como elemento de presentación, que como un auténtico contenido, es común ver que su manejo se lleve a cabo por CSS en la mayoría de las ocasiones. El elemento “img” solía ser llevado al extremo para realizar toda clase de funciones relacionadas a las imágenes, en la actualidad esto se ve disminuido por el hecho de que CSS permite manejar imágenes mediante su propiedad “background-image”, apegándonos más a los estándares que predominan.

La propiedad background-image se pueden utilizar para especificar una imagen que se utilizará como fondo en cualquier elemento de tipo capa, desde el cuerpo de la página hasta un párrafo sencillo. Al utilizarlo estaremos llenando el elemento con una imagen que ira desde la esquina superior izquierda hasta el final, cubriendo todo el espacio y con la oportunidad de agregar otros elementos sobre la imagen.

body { background-image: url(imagenes/webera.jpg); }

Podemos controlar aspectos de la imagen de fondo mediante otras propiedades CSS, como background-attachment, background-repeat y background-position.

La propiedad background-attachment determina si la imagen de fondo se desplazará con el contenido de una caja. Puede ser utilizado para especificar si la imagen se desplazará con el resto de la página o si debe ser fijado a la vista, es decir el área de visualización de la ventana del navegador, en lugar de la página.

body {
background-image: url(imagenes/webera.jpg);
background-attachment: fixed;
}

En este ejemplo estamos estableciendo la imagen “webera.jpg” como fondo de página, y en vez de seguir el patrón común de desplazamiento, la imagen lucirá exactamente igual conforme nos desplacemos, lo único que se ira recorriendo es el resto del contenido de la página.

En caso de que la imagen que estas utilizando sea muy pequeña o simplemente no deseas que se repita, creando un efecto de mosaico, entonces la propiedad a la que debes recurrir es “background-repeat”. Al establecer esta propiedad con un valor de “no-repeat” nos ahorraremos el tener que desplegar la imagen varias veces y simplemente se mostrará en una ocasión.

body {
background-image: url(imagenes/webera.jpg);
background-repeat: no-repeat;
}

Esta propiedad también puede tener los valores de “repeat-x” para repetir la imagen únicamente de manera horizontal y “repeat-y” para hacer lo mismo pero de manera vertical. El resto del área que no sea cubierto por la imagen de fondo optará por un fondo transparente, que por lo general luce de color blanco por ser el patrón elegido para el navegador, al menos que elijamos un color de fondo mediante la propiedad “background-color” lo que cual combinaría los dos valores, mostrando la imagen y en el área restante el color elegido.

Las imágenes de fondos siempre inician en la esquina superior izquierda por default, en caso de que esto no cumpla con lo que requerimos, podemos cambiar esa posición mediane la propiedad “background-position”, que es generalmente utilizada en combinación con la propiedad de repetición. Los valores que recibe esta propiedad son los clásicos para definir una posición, nos referimos a “top”, “right”, “bottom”, “left”, “center”, alguna medida o un porcentaje, o incluso la combinación de alguno de estos valores.

body {
background-image: url(imagenes/webera.jpg);
background-repeat: no-repeat;
background-position: center;
}

Finalmente tenemos los ya famosos shorthands o también conocidos como atajos, es decir la propiedad que nos va a ayudar a representar todas estás propiedades en una sola línea, en este caso lleva por nombre “background” y nos ayudará a definir los valores de background-color, background-image, background-repeat, background-attachment y background-position.

body { background: #CCCCCC url(imagenes/webera.jpg) center fixed no-repeat; }

Aunque en los ejemplos de este artículo estuvimos utilizando el elemento “body”, ten en mente que estas propiedades puedes ser aplicadas para cualquier elemento visible en la página que tenga el tipo caja o capa, un párrafo, una tabla, un div, incluso algún elemento de imagen que luzca transparente.

Publicado el 20/12/2011, última actualización 20/12/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras