PDF de programación - Imágenes en la Web

Imágen de pdf Imágenes en la Web

Imágenes en la Webgráfica de visualizaciones

Publicado el 24 de Junio del 2017
384 visualizaciones desde el 24 de Junio del 2017
2,0 MB
15 paginas
Creado hace 10a (23/09/2009)
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
  • Links de descarga
http://lwp-l.com/pdf4609

Comentarios de: Imágenes en la Web (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad