Cuaderno de aprendizaje iDESWEB: Notas_Módulo 4

Las imágenes son el elemento principal que confiere a la Web su carácter de hipermedia, es
decir, su capacidad de integrar en un único soporte (la página web), contenidos muy distintos
como texto, imagen, vídeo, audio y otros.

La etiqueta para insertar una imágen es <img>

Insertar imágenes <img>

No hay grandes cambios en su sintaxis, entre los lenguajes HTML4/XHTML1.0 y HTML5 (aquí no está terminada, puede sufrir variaciones).

Atributos obligatorios en XHTML 1.0

src_indica la ruta en la que se encuentra la imagen

<img src="img/logo.gif" alt="Logo de la empresa" />

alt_es el texto alternativo que aparece en la página cuando la imagen no se puede cargar. Es muy importante para la accesibilidad de la página.

Atributos opcionales:

width y height_definen las dimensiones de la imagen (ancho y alto).
longdesc_indica la URL de una imagen que da una descripción larga de esta imagen. También es muy importante para la accesibilidad de la página.
ismap y usemap_para definir mapas de imagen.

Atributos obsoletos:

align, border, hspace, vspace_no se recomiendan, hay que usar CSS en su lugar.

También se puede utilizar una imagen como fondo de algunos elementos, por ejemplo como fondo de una página <body background=""> o fondo de una tabla <table background=""> pero está totalmente desaconsejado, hay que usar CSS.

Ejemplos,

Aquí se está insertando una foto en formato jpg que se encuenta en el mismo directorio en el que se encuentra la página web.

Aquí se incluye una foto en formato png que se encuentra en otro servidor web, por eso se debe incluir la ruta de acceso a la imagen.

Formatos de imagen con la etiqueta <img>

Depende del navegador, pero los estandar son,

JPEG
GIF
PNG

Formato GIF

Es el más antiguo y el primero que se usó en las páginas web.
Compresión sin pérdidas.
Solo soporta paletas de colores (color indexado) con 256 máximo. Por eso se tiene que usar la técnica Dithering que representa una imagen como una fotografía con una variedad de colores casi infinita y con solo 256 colores. Esta técnica consiste en colocar dos puntos juntos con colores diferentes para crear la ilusión de que existe un tercer color. Por ejemplo, mediante la colocación de los puntos rojos y azules se logra la ilusión de que el color que hay es el violeta.
El efecto final puede ser muy sorprendente y puede engañar al ojo humano, pero hoy no es muy necesario utilizar esta técnica ya que existen otros formatos de imagen que permiten el uso de millones de colores
Permite transparencia pero de 1 solo color.
Permite realizar animaciones sencillas y planas
Se usa para imagenes con pocos colores como logotipos, mapas, diagramas, elementos decorativos).

Formato JPG/JPEG

Es uno de los más populares en la web.
Pemite trabajar con imágenes de más de 16 millones de colores y tamaños de ficheros muy pequeños. Esto es posible mediante el uso de algortimos de compresión con pérdidas. 12 y 24 bits de color real.
La compresión por lo tanto es con pérdidas. Esto supone que cuando se comprime una imagen y luego se descomprime, no se obtiene la imagen original sino una aproximación.
No permite la transparencia.
Permite el entrelazado
No permite realizar animaciones.
Se usa para imágenes complejas (reales) con muchos colores.

Formato PNG

Se creó específicamente para la web y ofrece muchas posibilidades.
La compresión es sin pérdidas pero los ficheros son de un tamaño superior a JPG.
Profundidad del color, 16-24-32-48-64 de color real.
Transparencia de 8 o 16 bits (canal alpha).
Permite el entrelazado.
No permite la animación pero existe MNG
El uso es el mismo que para GIF y JPG.

Mapas de imagen

Se llaman también imágenes sensibles en las que se han definido ciertas zonas activas (sensibles, calientes) que son enlaces a otras páginas.

Se pueden procesar en el lado del cliente (usemap) o en el lado del servidor (ismap).

Mapa de imagen en el cliente (usemap)

Se define con dos etiquetas de HTML

<map name="">_Se define el mapa de imagen con sus distintas zonas activas. El mapa de imagen debe tener un nombre, ya que ese nombre se emplea en la etiqueta <img> para
relacionar el mapa de imagen con la imagen correspondiente.
<img usemap="" />_Se utiliza el atributo usemap para indicar el nombre del mapa que se quiere utilizar. Hay que usar # antes del nombre. Ej. usemap="#mar" />

Cada zona activa o sensible del mapa de imagen se define mediante una figura geométrica.

Tipos de figuras geométricas

<area>_Todas las zonas activas se definen con esta etiqueta. Tiene los siguientes atributos,

shape para indicar el tipo de figura geomética.
coords para indicar las coordenadas de la figura geométrica.
href para indicar la URL del destino del enlace.
alt para indicar el texto alternativo que representa la figura geométrica en el caso de que no se pueda ver.

shape="rect"...Define un rectángulo que está definida por sus coordenadas (x1,y1) para su esquina superior izquierda, y (x2,y2> para su esquina inferior derecha. En HTML la coordenada superior izda. corresponde a la posición (0,0).

shape="rect" --- coords="x1,y1,x2,y2"

shape="circle"...Define un círculo que está definido por las coordenadas (x,y) del centro y el radio r.

shape="circle" --- coords="x,y,r"

shape="poly"...Define un polígono, regular o irregular, definido por las coordenadas (x,y) de los vértices que forman el polígono.

shape="poly" --- coords="x1, y1, x2, y2,......,xn,yn"

Usos típicos de las imágenes en una página web

Mapas geográficos_Por ejemplo para incluir mapas de localización de oficinas, etc.
Barra de navegación cuando se crea una barra de menú especial, por ejemplo creada con iconos.
Página principal_Antes se utilizaba bastante en la página principal o portada de un sitio web en el que se daba a conocer cada una de las secciones del sitio web por medio de una imagen

Cuaderno de aprendizaje iDESWEB

jueves, 14 de abril de 2016

Notas_Módulo 4_Imágenes