Tema 5

Imágenes y Elementos Multimedia.

Charo Garrido García

Cooperativa de Enseñanza
José Ramón Otero
Resolución:
La resolución de una imagen indica la cantidad de detalle puede observarse en esta.
La resolución de la imagen con dos números enteros, donde el primero es la cantidad de
columnas de píxeles (cuántos píxeles tiene la imagen a lo ancho) y el segundo es la
cantidad de filas de píxeles (cuántos píxeles tiene la imagen a lo alto).

Cuando la imagen aparece como granular se le da el nombre de pixelada

Para saber cuál es la resolución de una cámara digital debemos calcular ancho x. Una
imagen de 1600 x 1200 píxeles tiene una resolución de 1600x1200=1.920.000 píxeles, es
decir 1,92 megapíxeles.
Formato de Imágenes
PNG.
BMP Es un formato de compresión sin pérdida
Es propio de windows. Poco de la imagen. Puede representar hasta 16
eficiente ya que genera imágenes millones de colores. Mejora las
muy pesadas. presentaciones de gif, pero no tiene
animación (aunque sí admite
JPEG. transparencia). No es adecuado para la
Es ideal para la representación de compresión de fotografías porque suele
fotografías ya que es capaz de generar tamaños muy grandes.
representar más de 16 millones de
colores. Las fotografías pierden calidad
respecto a las originales, debido a que TIFF
jpeg es un formato de compresión. No es adecuado para publicación
web, pero sí para almacenar las
fotografías con gran calidad.
GIF.
Admite hasta 256 colores, por lo que
suele ser más adecuado para iconos,
logos, dibujos, etc. No para fotografía.
Como ventaja respecto al jpg, acepta
áreas transparentes y gráficos animados.
Bancos de imágenes libres
Editores de imágenes
Imágenes
Para insertar una imagen en una página web, se utiliza la etiqueta <img>
La etiqueta <img> no se cierra.
Ejemplo: <img src=”../imagenes/img01.jpg”>
<img src=”../imagenes/img01.jpg” width=”100%” height=”50%”>

Atributos: width, height, title, alt, align,

border,vspace, hspace, usemap
Imágenes
El atributo align, sirve para alinear el texto con la imagen.
Valores: Left, right, top, bottom, middle.
Ejercicio
Mapa de imágenes
Los mapas de imágenes es una forma de navegación que incorpora una serie
de enlaces dentro de una misma imagen. Es decir, al pulsar sobre una zona de
la imagen se abrirá una página web y al pulsar sobre otra, otra página
diferente.
Las formas pueden ser, circulares, rectángulos o polígonos irregulares.

Para crear un mapa de imágenes se utiliza la etiqueta <map> y dentro de ella

se definen las etiquetas <area> con los siguientes atributos:

-title: Saldrá al situarnos sobre el área

-shape: “rect”, “circle”, “poly”
-coords: “x1,y1,x2,y2” “x1,y1,R” “x1,y1,x2,y2,x3,y3,x4,y4”
-href: página de destino.
Mapa de imágenes
Para calcular la posición de las distintas áreas del mapa, podemos utilizar herramientas de
dibujo, que nos indiquen la posición del cursor. El paint, sería una de las que podríamos
utilizar.

Ejemplo:
Mapa de imágenes
Formatos de audio
WAV.
Desarrollado por Microsoft. No suele MP3.
utilizar compresión, muy buena calidad, Formato de compresión con pérdidas muy
poco apropiado para la web. Canción utilizado. Poco tamaño buena calidad .
aprox 30 o 40 Mb Adecuado para la web.
AIFF Puede ocupar 10 veces menos que .wav
Almacenamiento de audio sin
comprimir muy utilizado por Apple.
OGG.
AU.
Es libre (de código abierto). Compresión
Formato de archivo de audio sin
algo superior a mp3.
comprimir desarrollado por SUN y muy
No todos los reproductores mm son
utilizado en GNU/linux
capaces de reproducirlos. Para solucionar
MIDI. se hace necesario instalar codecs.
Son instrucciones para el ordenador.
Ocupan poco, pero si no hay una
buena tarjeta de sonido se escuchan
con poca calidad
Utilización de formatos de audio
Para introducir audio en la web podemos utilizar las etiquetas:
<bgsound> <embed> (HTML4) y <audio> (HTML5)

<bgsound>

Para introducir audio de fondo mientras se navega por la página. (No funciona
en chrome).
Atributos: src, loop, balance, volumen,delay

<bgsound src=“song1.mp3" loop="3"></bgsound>

Utilización de formatos de audio
<embed>
Incrusta ficheros de audio, pero se necesita un reproductor o plugin para
reproducirlos.

Atributos: src, loop, autostart, name, hidden, width.

<embed src=“song1.mp3” loop=“3” autostart=“false”></bgsound>

<audio>
Etiqueta nativa de HTML5
Atributos: autoplay, controls, loop, etiqueta <source src>
Ejemplo:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
</audio>
Webs de música libre
Formatos de video
FLV.
MPEG-4. Formato de Adobe. Muy utilizado para los
Absorbe muchas de las características repositorios de videos por Internet.
de MPEG1(Calidad CD) y MPEG2 Requiere tener instalado el reproductor o
(Calidad DVD). plugin Adobe Flash Player.
H.264
Evolución de mpeg-4 WMV
Gran compresión y calidad. Ideal para la Formato de microsoft. Necesita codecs.
web.Utilizado para HD. Etensión mp4 y
OGG
avi
Puede contener información de audio y
WebM vídeo a la vez sin tener que recurrir a otros
Formato open source desarrollado por formatos.
Google. MOV
Los archivos MOV están formados por una
AVI. o más pistas de audio y video, ofreciendo
Almacena audio y video con distintos una gran calidad de reproducción.
codecs. Formato Creados por apple
Utilización de formatos de video
<embed>
Incrusta ficheros de video, pero se necesita un reproductor o plugin para
reproducirlos.

Atributos: src, loop, autostart, name, hidden, width.

<embed src=“video.wmv” width=“400px” height=“300px” autostart=“false”>

<video>
Etiqueta nativa de HTML5
Atributos: autoplay, controls, loop, poster(imagen que se visualiza mientras se carga el video)
Ejemplo:
<video controls loop autoplay poster=“poster.jpg”>
<source src=“horse.ogg” type=“video/ogg">
</video>
Utilización de formatos de video
<object>
Creada para ser la opción recomendada para insertar objetos multimedia
(video, audio, flash, applets..).
Dentro de object se introduce la etiqueta <param> que son directivas que
definen parámetros de visualización del objeto.
Permite anidamiento de objetos por si el primero no se visualiza.

Atributos principales: width, height, name, data (ruta del elemento mm), type,
usemap.

Ejemplo:
Utilización de formatos de video
<object>
Creada para ser la opción recomendada para insertar objetos multimedia
(video, audio, flash, applets..).
Dentro de object se introduce la etiqueta <param> que son directivas que
definen parámetros de visualización del objeto.
Permite anidamiento de objetos por si el primero no se visualiza.

Atributos principales: width, height, name, data (ruta del elemento mm), type,
usemap.

Ejemplo:
 Marquesinas
Permiten animar texto en una página web. No soportado por todos los
navegadores.

Atributos: align, bgcolor, direction, height, width, scrolldelay (velocidad), loop

(infinite)

Ejercicio: Indica la ruta relativa que se utilizará para acceder a la imagen en los ejemplos anteriores