Programación en Internet 2009-2010
Departamento de Lenguajes y
Sistemas Informáticos
Imágenes en la Web
Imágenes en la Web
Programación en Internet
Curso 2009-2010
Programación en Internet – Curso 2009-2010
Índice
• La etiqueta <img />
• Formatos de imagen
• Mapa de imagen
• ¿De dónde saco imágenes?
DLSI - Universidad de Alicante
1
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
La etiqueta <img />
• Atributos obligatorios en XHTML 1.0:
– src
– alt
• Atributos opcionales:
– width y height
– longdesc
i– ismap y usemap
• Atributos obsoletos (desaconsejados, utilizar
CSS en su lugar):
– align, border, hspace, vspace
Programación en Internet – Curso 2009-2010
La etiqueta <img />
• Desaconsejado, usar en su lugar CSS:
– Imagen de fondo de una página:
•<body background="">
– Imagen de fondo de una tabla:
•<table background="">
DLSI - Universidad de Alicante
2
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Formatos de imagen
• GIF (Graphics Interchange Format):
– Tipo MIME: image/gif
– Compresión sin pérdidas
– Profundidad del color: paleta de colores (color
indexado) de longitud variable (256 máximo)
– Transparencia (1 color)
– Entrelazado: sí
– Entrelazado: sí
– Animación: sí
– Uso: imágenes sencillas y planas, con pocos
colores (logotipos, mapas, diagramas, elementos
decorativos)
Programación en Internet – Curso 2009-2010
Formatos de imagen
• Dithering: técnica para representar una
i
imagen de color verdadero con sólo 256
ól 256
colores
d d
d
l
DLSI - Universidad de Alicante
3
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Formatos de imagen
• JPG (Joint Photographic Experts Group):
– Tipo MIME: image/jpeg
– Compresión con pérdidas Diferentes niveles de
compresión
– Profundidad del color: 8 bits (escala de grises), 12
y 24 bits (color real)
p
– Transparencia: no
– Entrelazado: sí
– Animación: no
– Uso: imágenes complejas (reales) con muchos
colores
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
4
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Formatos de imagen
• PNG (Portable Network Graphics):
– Tipo MIME: image/png
– Compresión sin pérdidas
– Profundidad del color: 1, 2, 4, 8 (color indexado);
16, 24, 32, 48, 64 (color real)
– Transparencia: 8 o 16 bits (canal alpha)
– Entrelazado: sí
– Entrelazado: sí
– Animación: no (pero existe MNG)
– Uso: los mismos que GIF y JPG
Programación en Internet – Curso 2009-2010
Mapa de imagen
• Imagen sensible: una imagen que
contiene zonas activas que son enlaces
• Se puede programar en el cliente
(usemap) o en el servidor (ismap)
DLSI - Universidad de Alicante
5
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Mapa de imagen
• Mapa de imagen en el cliente:
<img usemap="" />
<map name="">
• Cada zona activa se define como:
<area shape="" coords="" href="" alt=""
/>
– shape="rect" coords="x1,y1,x2,y2"
– shape="circle" coords="x,y,radio"
– shape="poly" coords="x1,y1,x2,y2,..,xn,yn"
Programación en Internet – Curso 2009-2010
Mapa de imagen
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
p
p
p
<map name="planetmap">
<area shape="rect" coords="0,0,82,126"
href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3"
href="mercur.htm" alt="Mercury" />
y /
<area shape="poly" coords="124,58,130,70"
href="venus.htm" alt="Venus" />
</map>
DLSI - Universidad de Alicante
6
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
¿De dónde saco imágenes?
• Aunque estemos acostumbrados a
ello…
• …no podemos utilizar lo que
encontremos por la Web libremente
• Es necesario averiguar qué nos deja
hacer el autor con lo que hemos
hacer el autor con lo que hemos
encontrado
• Mecanismo: la licencia de uso
Programación en Internet – Curso 2009-2010
¿De dónde saco imágenes?
• Algunas licencias famosas en el mundo
del software:
– BSD Licence
– GNU General Public License (GPL)
– GNU Lesser General Public License
(LGPL)
(LGPL)
– GNU Free Documentation License (GFDL)
DLSI - Universidad de Alicante
7
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
8
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
9
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
10
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
11
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
12
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
13
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
14
Programación en Internet 2009-2010
Programación en Internet – Curso 2009-2010
Programación en Internet – Curso 2009-2010
DLSI - Universidad de Alicante
15
Crear cuenta
Comentarios de: Imágenes en la Web (0)
No hay comentarios