Elementos Multimedia

Pedro Corcuera
Dpto. Matemática Aplicada y
Ciencias de la Computación
Indice

• Introducción a la Multimedia
• Texto e Hipertexto
• Formatos gráficos
• Sistemas de compresión y aplicaciones
• Edición y compresión de imágenes estáticas
• Formatos de Audio
• Formatos de Video
• Conversión entre formatos
• Plataformas para la Integración multimedia

2
Introducción a la Multimedia

3
Introducción a la Multimedia
Integración de dos o más medios distintos en un ordenador:
texto, imagen estática, gráficos, sonido, imagen en movimiento.

Medios digitales: cualquier forma de codificación de la

información.

4
Texto e Hipertexto

5
Texto e Hipertexto

Un texto es una composición de signos codificado en un

sistema de escritura (alfabeto) que forma una unidad de
sentido.

Un hipertexto es un paradigma en la interfaz del usuario cuyo

fin es el de presentar documentos que puedan bifurcarse o
ejecutarse cuando sea solicitado.

Buenas prácticas en el uso de textos:

• Brevedad, menos palabras y más gráficos y sonidos.
• Tipo, estilo y tamaño de letras para mejorar la legibilidad.

6
Texto e Hipertexto

Tipos de codificación de caracteres:

• ASCII (7 bits)
• ASCII extendido (8 bits)
• ISO 8859 (8 bits)
• EBCDIC (8 bits, IBM)
• ISO 10646 (31 bits, UCS-Universal Character Set)
• UNICODE (UTF-8, UTF-16, UTF-32
[Link]

7
Lenguajes de Marcado
En los documentos electrónicos, el marcado es el término empleado
para describir los códigos, denominados también etiquetas, añadidos
al texto electrónico que definen la estructura y el formato en el que
tiene que aparecer. Puede ser utilizado, además, para otros propósitos
como son la escritura, la impresión, el intercambio, la presentación de
pantallas, etc.
Los lenguajes de marcado estándar son independientes de la aplicación
y de la plataforma hardware. Es importante distinguir entre la
estructura lógica y física del documento.
• La estructura lógica está formada por las partes que lo componen
y por sus relaciones.
• La estructura física indica la apariencia del documento, ya sea en
el papel o sobre la pantalla, incluyendo sus componentes físicos, el
posicionamiento de los elementos y la tipografía empleada.

8
Lenguajes de Marcado genérico

Sirven para especificar la estructura de cualquier documento sin

tener en cuenta los aspectos relativos a la presentación. Esto
supone que el mismo documento se puede presentar de muchas
maneras, de acuerdo con las normas de estilo que se le
apliquen.

Todos se basan en el uso de una definición de tipo de

documento (DTD - Document Type Definition) que define
formalmente los elementos que se incluyen como contenidos de
los documentos y el orden.

9
Lenguajes de Marcado genérico

Los lenguajes más conocidos y que se utilizan para la

publicación en Web:
• SGML (Standard Generalized Markup Language)
• HTML (Hypertextual Markup Language)
• HyTime (Hypermedia/Time-Based Structuring Language)
• XML (Extensible Markup Language)
• XHTML (The Extensible Hypertext Markup Language)
• SMIL (Synchronized Multimedia Integration Language)
• WML (Wireless Markup Language)
El lenguaje de marcado para documentos en texto: Tex - LaTex

10
Formatos gráficos

11
Formatos gráficos
Existen dos formas de representar gráficos en formato digital:
formato raster o mapa de bits y el formato vectorial.

Una imagen en formato raster o mapa de bits es un fichero o

estructura que representa una rejilla rectangular de pixels o puntos
de color en un monitor, papel u otro medio de salida. Un mapa de bits
se caracteriza por el ancho y alto de la imagen en pixels y el número
de bits por pixel que determina el número de colores que puede
representar.

Un gráfico vectorial (modelados geométricos o gráficos orientados a

objetos) se construye con primitivas geométricas (puntos, líneas,
curvas, polígonos) basadas en ecuaciones matemáticas. Pueden ser
transformadas (escalado, rotación, deformación) sin perjudicar la
calidad de la imagen.
12
Características de la Imagen digital

Resolución
• Capacidad de una tecnología o un mecanismo para reflejar
los detalles de una imagen.
• Para traducir una fotografía en bits se divide en una malla de
filas y columnas, llamadas píxeles: son todos del mismo
tamaño y representan áreas cuadradas de la imagen original.
• Si la imagen se divide en pocos píxeles, poco detalle o
resolución, se puede codificar con poca información (bits).
• Si se divide en más partes, la imagen se visualizará mucho
mejor y con más detallada, pero ocupará más memoria.
• Se puede medir en pixeles (división de la imagen), en bytes
(fichero) o ppp – pixeles por pulgada (impresión).

13
Características de la Imagen digital

Interpolación , Compresión y Tamaño

• Cuando se aplica interpolación a una imagen se superpone
a la cuadrícula inicial otra de distinto tamaño cuyos píxeles
se calculan a partir de los valores de color originales. La
interpolación es una operación irreversible.
• Las técnicas de compresión pueden ser de dos tipos: sin
pérdidas (lossless) y con pérdida de información (lossy). La
compresión con pérdida de información pierde calidad
cuando es mayor el factor de compresión.
• Ampliar el tamaño de una imagen provoca que el tamaño de
los píxeles se haga más grande. El programa interpola una
serie de valores nuevos que se insertan entre los originales.

14
Características de la Imagen digital

Color
Profundidad del color
Se refiere al número de bits usados para representar el color
de un pixel.
Resolución
1 bit - 2 colores (blanco y negro), 2 bit - 4 colores, 4 bit - 16
colores,
8 bit - 256 colores (grises), 16 bit - 65,5 kcolores
24 bit -> 16,7 Mcolores (Color verdadero)
32 bit -> 16,7 Mcolores y máscara de grises de 8 bits (256)

15
Características de la Imagen digital

Modelos de Color
RGB, es un modelo aditivo que usa los colores rojo, verde y
azul.
CMYK, es un modelo sustractivo que usa los colores cyan,
magenta, amarillo y negro.
HSV (Hue, Saturation, Value – Tonalidad, Saturación, Valor) o
HSB (Hue, Saturation, Brightness – Tonalidad, Saturación,
Brillo), define el color mediante componentes en
coordenadas cilíndricas.
HSL (Hue, Saturation, Lightness – Tonalidad, Saturación,
Luminancia)

16
Formatos más comunes de gráficos raster (I)

• BMP (Bit Mapped Picture, .bmp) puede tener una

profundidad de color desde 2 hasta 24 bits.
Ventajas: no tiene ninguna pérdida de color y se utilizan en
todos los programas que se ejecutan en Windows.
Desventaja: su gran tamaño.
• GIF (Graphics Interchange Group, .gif) formato comprimido
sin pérdida de calidad (usa el algoritmo LZW).
Ventajas: Incluye transparencias y animaciones, descarga de
menor a mayor resolución (borrosa), soporte nativo por los
navegadores.
Desventajas: soporta 8 bits (256) colores, propietario
Compuserve.

17
Formatos más comunes de gráficos raster (I)

• RAW (formato RAW , .raw) es un conjunto de formatos

disponibles en algunas cámaras digitales.
Ventajas: compresión sin pérdida.
Desventaja: muchos programas no lo aceptan (sin estándar).
• TIFF (Tagged Image File Format, .tif) formato usado por los
escáneres durante la digitalización de los documentos.
Ventajas: usado por todos los programas de tratamiento de
imágenes. Incluye todos los tipos de color con un canal alpha
para transparencias y otros efectos. Formato indicado para
utilizar la separación de colores CMYK (uso en impresión).
Ofrece libertad para elegir el tipo de compresión.
Desventaja: tamaño de la imagen resultante.

18
Formatos más comunes de gráficos raster (II)

• PNG (Portable Network Graphics, .png) formato de compresión

sin pérdida para bitmaps no sujeto a patentes.
Ventajas: admite transparencia de 1 bit, comprime mejor que
GIF, profundidad de color de 24 a 48 bits (true color).
Desventajas: No soporta animación.
• JPG (Joint Photographics Experts Group, .jpg) formato de
compresión con pérdida, basado en la transformación discreta
de coseno. Más utilizado actualmente en la Web y fotografía.
Ventajas: grados de compresión muy elevados (a mayor
compresión, mayor pérdida de detalle en la imagen final)
Desventaja: no soporta animación y se pierde detalles durante
la compresión.

19
Formatos más comunes de gráficos raster (III)

• JPG 2000 (Joint Photographics Experts Group, .jp2) formato

de compresión con pérdida . Usa un algoritmo de compresión
basado en Wavelets (ondículas) con lo que se consigue un
mayor factor de compresión que el formato JPG.
Ventajas: es capaz de mostrar imágenes en diferentes
resoluciones y tamaños desde el mismo fichero, así como
permitir seleccionar un determinada área de una imagen
para que se muestre en alta definición
Desventaja: obliga a tener visores específicos así como
programas específicos de codificación y compresión.

20
A tener en cuenta
Los formatos de imagen más utilizados son:

JPEG (Joint Photographic Experts Group)

Es el más usado en las páginas web, debido a su bajo
peso, pues comprime las imágenes con una aceptable
calidad. Es ideal para fotografías, más no para botones,
banners y caricaturas o gráficos.

GIF (Graphic Interchange Format)

Mantiene los colores más vivos. En los sitios web se
emplea para banners, botones e interfaces, al igual que
iconos. Su límite de colores es de 256, lo que lo hace muy
básico.

TIFF (Tagged Image File Format)

Formato flexible que conserva el mapa de bits o el “ADN”
de la imagen. Se usa poco en la web. Sus principales
aplicaciones se dan en los formatos impresos.

21
Editores de gráficos raster

Comerciales
• Adobe Photoshop
• Corel Painter
• Microsoft Paint
• Microsoft Office Picture Manager

Freeware
• GIMP
• Picasa
• ImageMagick
• IrfanView
• XnView
• [Link]

22
 Software libre para la
GIMP edición de Gráficos Raster
GIMP (GNU Image Manipulation
Program) es un programa de edición
de imágenes digitales en forma de
mapa de bits, tanto dibujos como
fotografías. Incluye herramientas de
pintura (brochas), un pincel, un
aerógrafo, clonado, etc., así como
herramientas de transformación
incluyendo rotar, escalar, inclinar y
voltear. El manejo de memoria está
basado en bloques de pixeles (tile-
based), el tamaño de la imagen está
limitado sólo por el espacio disponible
en disco. Tiene asistencia completa
para el manejo de canal alfa, capas y
 Para utilizar GIMP se requiere: canales.
Sistema operativo: Windows, Linux, Soporta un amplio rango de formatos
MacOS de ficheros, incluyendo GIF, JPEG,
PNG, XPM, TIFF, TGA, MPEG, PS, PDF,
PCX, BMP y muchos otros.
Descarga gratis en:
[Link]

23
Formatos más comunes de gráficos vectoriales I

• PostScript (.ps) es un Lenguaje de Descripción de Página

(PDL), utilizado en muchas impresoras y como formato
estándar de intercambio entre profesionales de impresión.
Desarrollado por Adobe.
• PDF (Portable Document Format, .pdf) formato desarrollado
por Adobe a partir de PostScript. Especifica toda la
información necesaria para la presentación final del
documento.
Ventajas: multiplataforma, integra cualquier combinación de
elementos multimedia, es una especificación abierta, puede
cifrarse para proteger su contenido.

24
Formatos más comunes de gráficos vectoriales I

• SVG (.svg) formato basado en el lenguaje de marcado XML

para describir gráficos vectoriales de dos dimensiones, tanto
estáticos como animados (SMIL). Es un estándar abierto
creado por el consorcio del World Wide Web. Permite tres
tipos de objetos gráficos: formas, imágenes raster y texto.
• SWF (.swf) formato creado por Macromedia (Adobe) para su
aplicación Flash. Los ficheros SWF se compilan y comprimen
a partir de los ficheros editables con los que trabaja Flash
(.fla) que contienen objetos basados en vectores e
imágenes, aunque también pueden incorporar audio y video
en formato Flash Video (.flv). Requieren el uso de un
reproductor (Flash Player).

25
Formatos más comunes de gráficos vectoriales II

• Silverlight (.xaml) formato desarrollado por Microsoft como

alternativa a Flash y que se utiliza en entornos Web.
• WMF (Windows Metafile, .wmf) formato desarrollado por
Microsoft para que sea portable entre sus aplicaciones.
Contiene elementos vectoriales como raster. El formato es de
16 bits. A la versión de 32 bits con comandos adicionales se
le llama Enhanced Metafile (.emf).

26
Editores de gráficos vectoriales

Comerciales
• Adobe Illustrator, FreeHand, Flash
• CorelDRAW
• Microsoft Expression Blend, Design
• Microsoft Viso

Freeware
• Inkscape
• Draw (OpenOffice)
• Ipe
• Skencil

27
 Software libre para la
edición de Gráficos
InkScape Vectoriales
Inkscape es un editor de gráficos
vectoriales compatible con los
estándares XML, SVG y CSS y
capacidades similares a Illustrator,
Freehand o CorelDraw, usando el
formato de archivo Scalable Vector
Graphics (SVG).
Las características soportadas incluyen:
formas, trazos, texto, marcadores,
clones, mezclas de canales alfa,
transformaciones, gradientes, patrones
y agrupamientos, así como meta-datos
Creative Commons, edición de nodos,
capas, operaciones complejas con
trazos, vectorización de archivos
 Para utilizar InkScape se requiere: gráficos, texto en trazos, alineación de
Sistema operativo: Windows, Linux, textos, edición de XML directo, etc.
MacOS Puede importar formatos como
Postscript, EPS, JPEG, PNG, y TIFF y
exporta PNG asi como muchos formatos
basados en vectores.
Descarga gratis en:
[Link]

28
Formatos de Audio

29
Edición de Audio
La edición de audio es la técnica por medio de la cual se
combinan señales sonoras como voces, música, sonidos para
estructurar un mensaje.

Los programas de edición de audio se refieren a las diferentes

aplicaciones o software que permiten la manipulación de audio
digital. Es importante no perder de vista el hardware que sirve de
plataforma para la ejecución de dichos programas.
30
Cualidades del sonido Las cualidades
del sonido
Intensidad: Esta propiedad se refiere a
la fuerza con la que se produce un
sonido: fuerte o suave. La intensidad El sonido es una
está determinada por la amplitud de
onda, es decir la magnitud o extensión sensación percibida por
de las ondas que componen el sonido. el oído que se descifra
Esta cualidad puede ser comparada con
el volumen en el cerebro.
Altura: Esta propiedad permite clasificar
el sonido en agudo, medio y grave. Cuando un cuerpo
En otras palabras constituye el tono de
los sonidos, ruidos y las voces. vibra, las moléculas
Timbre: hace referencia al sonido que lo forman se
característico de los objetos, propagan en círculos
instrumentos y voces. Gracias a esta
cualidad se puede diferenciar una voz concéntricos a través
de otra, un sonido de otro. del aire.
Duración: se refiere al tiempo que se
escucha un sonido. De acuerdo con
esta cualidad se clasifican en largos y
cortos.

31
Ruido vs sonido Ruido vs sonido
 Ruido: sonido sin definición, con
vibraciones cortas que molestan y Generalmente durante
alteran el nervio auditivo. Como la realización de un
ejemplos se puede señalar: el proyecto multimedia,
sonido que se produce al romper un la edición de audio se
cristal, en un choque de autos, al hace en la etapa de
frenar súbitamente. En otras
postproducción.
palabras es un sonido no deseado.

 Sonido: es controlado por el

hombre, posee la cualidad de tener
vibraciones regulares que se
perciben en forma precisa y son
agradables al oído; como la voz
humana y los sonidos que se
obtienen al tocar cualquier
instrumento musical.

32
A tener en cuenta

Sonido:
El sonido es un fenómeno físico asociado a la
propagación de una onda elástica en un medio
continuo de un determinado gas, sólido o líquido.

Los sonidos que percibimos deben superar el umbral

auditivo (0 dB) y no llegar al umbral de dolor (140
dB). Esta cualidad la medimos con el sonómetro y los
resultados se expresan en decibelios (dB) en honor al
científico e inventor Alexander Graham Bell.

33
A tener en cuenta
Señal de audio:
Una señal de audio es una señal eléctrica que representa a
una señal sonora; normalmente está acotada entre el
rango de frecuencias audibles por los seres humanos que
está entre los 20 y los 20000 Hz, aproximadamente (el
equivalente, casi exacto a 10 octavas).
Dado que el sonido es una onda de presión se requiere un
transductor de presión (un micrófono) que convierte las
ondas de presión de aire (ondas sonoras) en señales
eléctricas (señales analógicas).
La conversión contraria se realiza mediante un altavoz, que
convierte las señales eléctricas en ondas de presión de
aire.
Un micrófono puede captar adecuadamente todo el rango
audible de frecuencias, en cambio para reproducir
fidedignamente ese mismo rango de frecuencias suelen
requerirse dos altavoces (de agudos y graves) o más.

34
A tener en cuenta
Audio digital:
El audio digital es la codificación digital de una señal eléctrica
que representa una onda sonora.
Consiste en una secuencia de números binarios y se obtiene
del muestreo y cuantificación digital de la señal eléctrica
(señal analógica en contraposición de la señal digital) que
posteriormente se puede codificar o comprimir, dando lugar a
formatos más compactos (compresión de audio).

35
Formatos más comunes de sonido I
• WAV (Waveform Audio File ) formato de alta calidad usado
en Windows, gran tamaño de ficheros, se convierte con
facilidad a otros formatos.
• AU Formato audio estándar de Sun. Poca calidad pero son
muy comunes en Internet.
• AIFF (Audio Interchange File Format), comunes en Mac. Hay
una versión con muestras comprimidas, AIFF-C.
• RAW
• MIDI (Musical Instrument Digital Interface) estándar
equivalente a los formatos vectoriales para sonido, es el
lenguaje de los instrumentos musicales.

36
Formatos más comunes de sonido II
• QuickTime también tiene formato de audio, sincronizable e
integrable con otros medios.
• MP3 (propietario) formato con compresión.
• WMA formato con compresión de Microsoft.
• RA (Real Audio) sonido en tiempo real (streaming).

37
 Software de
audio libre

 El software de audio libre

son programas que pueden ser • Audacity
usados para escuchar,
modificar, crear y componer • Wavepad
señales de audio y música.
Estos se distribuyen bajo una
licencia libre, por ejemplo GPL • Goldwave
(Licencia Pública General).
• Recordpad

38
 Software libre para
Audacity la edición de Audio

Audacity es un programa
multiplataforma de grabación y
edición de sonidos fácil de usar,
de libre uso y de código abierto
distribuido bajo licencia GPL. Es
uno de editores de audio más
confiables y avanzado en la
actualidad.
Soporta los formatos: AIFF, AU,
Ogg Vorbis, MP3 y WAV

 Para utilizar Audacity necesitas:

Sistema operativo: Windows
 Requisitos mínimos:
Procesador: 300 MHz Descárgalo gratis en:
Memoria;64 MB [Link]

39
Formatos de Video

40
 Los videos
La explosión de sitios de redes
sociales (YouTube, Facebook) ha
despertado una ola de
aplicaciones para editar videos
en línea. Cualquier persona con
un teléfono celular, una cámara
fotográfica, una cámara web o
una cámara de video puede
captar, editar y publicar su
producción en internet.

En los programas para editar

video hay un elemento
fundamental en su masificación:
se consiguen gratuitos en la red,
vienen con el sistema operativo
o los traen los dispositivos.

Un video mezcla audio, imagen en movimiento o fija, efectos especiales y

títulos en un solo archivo, que generalmente corre a 24 cuadros por
segundo.

41
Captura
Códecs

• Los videos digitales pueden grabarse con distintos formatos,

algunos de estos formatos se basan en técnicas de
compresión diferentes dependiendo del códec que utilicen.
• Un códec (abreviatura de codificador-decodificador) es un
software que permite comprimir los archivos de vídeo y
audio para que ocupen menos espacio en disco. Así el mismo
códec ha de ser capaz de descomprimir la información del
archivo a la hora de reproducirlo.
• Dependiendo del códec empleado, el tiempo empleado en la
codificación y el tamaño resultante del archivo de video
pueden variar considerablemente.

42
Formatos más usados de video (I)

AVI (Audio Video Interleave)

Es de excelente calidad debido a que intercala el audio y el video. Es ideal
para formatos televisivos aunque por su peso y fidelidad no funciona muy
bien en internet, así se tenga un servidor de streaming. Es un formato
contenedor, ya que los archivos pueden estar en programas externos,
llamados Códec.
Su extensión es .avi

WMV (Windows Movie Media)

Programa desarrollado por Microsoft para el sistema operativo Windows. Es
liviano, de buena calidad y fácil de transmitir a los servidores. El punto
débil es que es necesario tener instalado Windows. Cuando los videos se
suben a YouTube en éste formato quedan de mejor calidad.
Su extensión es .wmv

MPEG (Moving Pictures Expert Group)

Es uno de los formatos más populares en el mundo, pues Sony, Aiwa y
Apple, han sido sus impulsores. Se emplea en teléfonos móviles y videos
de cámaras. Es un estándar con normas ISO ideado para multidispositivos.
Sus extensiones son .mpeg y .mpg.

43
Formatos más usados de video (II)
QT (QuickTime)
Diseñado por Apple para los ordenadores Mac, opera en multiplataformas,
bajo los formatos qt y .mov. Para ver los videos en estas extensiones se
debe descargar un programa.
Sus extensiones son .qt y .mov

FLV (Flash Video)

Se ha consolidado en el principal formato de videos en internet, por su
bajo peso y posibilidad de que más usuarios puedan verlo, independiente
del navegador y sistema operativo que tengan. Usa la tecnología Adobe
Flash Player, la misma del programa para animaciones Flash. Esta
aplicación multimedia reproduce los archivos SWF. Lo más habitual para
colocarlos en páginas web es editar los videos en formato AVI y luego
convertirlos a FLV para ser transmitidos a los servidores.
Su extensión es .flv

Real Media Video

Su extensión es .rm
DivX
Dv

44
Programas y herramientas para
la edición de video

45
 Windows Movie Maker

Programa desarrollado por Microsoft

para la edición de video. Se
caracteriza por ser sencillo de
manejar y eficiente. Es
recomendado para editar videos
básicos, sin muchas complicaciones.
El programa va dirigido a
productores amateur. Es ideal para
editar videos caseros, hacer
producciones en audio y animar
imágenes.
En versión Windows 10 se obtiene
en Fotos

En la web: Fotos - Video

46
Adobe Premier
Software comercial muy popular
para la edición de video profesional,
desarrollado por Adobe. Es muy
usado en los sitios web de noticias
para editar sus producciones. Tiene
una interfaz amigable que permite
editar, optimizar y hacer efectos con
excelente calidad. Es un software
que posibilita edición
multiplataformas: web, televisión y
teléfonos móviles. La interfaz y área
de trabajo es muy similar a la del
Photoshop lo que favorece el manejo
de las herramientas.

En la web:
[Link]

47
Camtasia Studio
Es un programa capaz de capturar
videos en el ordenador para editarlos,
modificarlos y ponerles efectos
especiales. Es ideal para reeditar
producciones y opera con
multiformatos, incluido hasta el Power
Point. Una de sus mejores
características es que ofrece la
alternativa de limpiar el audio. Opera
con Windows Vista y no requiere de un
gran poder de cómputo (sólo 500 MB).

En la web:
[Link]

[Link]
[Link]/descargar

48
Software de integración
multimedia

49
PowerPoint
Entre los muchos programas
que permiten la integración de
medios, uno de los más
conocidos es el Power Point de
Microsoft.

Permite incluir sonidos, videos,

gráficos e imágenes en
diferentes formatos, hasta dotar
al texto de animación y mucho
más.

En la web:
[Link]
ing/[Link]?AssetID=RC10
0687673082&pid=CR100654573
082

50