El documento describe las últimas tendencias en productos interactivos para la web, incluyendo nuevas herramientas como HTML5 y CSS3 que han permitido soluciones para problemas de diseño y nuevos efectos gráficos y de animación. También discute los diferentes dispositivos como tabletas, teléfonos inteligentes y televisores inteligentes que ahora se pueden usar para acceder a la web, así como los controles como pantallas táctiles, GPS y cámaras que permiten nuevas aplicaciones. Finalmente, ofrece una descripción detallada de los diferentes elementos

2. 02_ELEMENTOS MULTIMEDIA

3. Últimas tendencias
en el campo
de los productos
interactivos para web
Con la llegada de HTML5 y CSS3 se ha produ-
cido un cambio importante en los productos inter-
activos para web:
- Han aparecido nuevas soluciones para proble-
mas existentes en cuanto a maquetación de la
página web, como el diseño líquido y el diseño
responsivo.
- Se han incluido etiquetas con nuevas opciones
en campos como el diseño gráfico y la animación,
con nuevos efectos.
- Se han resuelto problemas existentes relativos a
las tipografías.
- Se ha potenciado mediante estas nuevas her-
ramientas la creación de aplicaciones para
móviles y tablets.
Por otro lado, las redes sociales y plataformas
de blogs están disfrutando de un éxito sin prec-
edentes. Los nuevos sitios web y las nuevas apps
están incluyendo cada vez más opciones relacio-
nadas con las redes sociales. Cuando utilizamos
un móvil, podemos tener acceso a una serie de
controles para manejar nuestras aplicaciones:
Acelerómetro: mide los cambios de velocidad en
un móvil.
Giroscopio: detecta la posición de un móvil
(permite, por ejemplo, cambiar la orientación del
teléfono al girarlo)
Pantalla táctil: la pantalla es sensible al tacto.
En algunos modelos disponemos de una pantalla
multitáctil, con lo que podemos utilizar dos o más
dedos para manejar la aplicación.
GPS: muchas aplicaciones ya se valen de este
dispositivo para detectar donde está el usuario.
Brújula: para saber donde está el norte.
Cámara: nos permite grabar vídeo o tomar
fotografías.
Micrófono: algunos modelos permiten grabar
audio de gran calidad
Conexión a internet: nuevas conexiones 4G mu-
cho más veloces.
Nuevos dispositivos para conexión a internet:
Tablets: disponen de pantalla táctil. Podemos
utilizarlas en posición vertical u horizontal.
Móviles: cada vez más usados para conectarnos
a Internet.
Smart TV: permiten navegación por internet
y el uso de determinadas “apps” diseñadas
epecíficamente para TVs. El diseño de la
aplicación a nivel gráfico, funcional e interactivo
debe tener en cuenta la posibilidad de que pueda
ser ejecutada en diferentes soportes.
Casco de realidad virtual, también llamado
gafas de realidad virtual o HMD (del inglés head-
mounted display), es un dispositivo de visuali-
zación similar a un casco, que permite reproducir
imágenes creadas por ordenador sobre una
pantalla muy cercana a los ojos o proyectando la
imagen directamente sobre la retina de los ojos.
En este segundo caso el casco de realidad virtual
recibe el nombre de monitor virtual de retina.
Debido a su proximidad con los ojos el casco de
realidad virtual consigue que las imágenes visuali-
zadas engloben todo el campo de visión del usu-
ario. Gracias a que el casco se encuentra sujeto a
la cabeza, éste puede seguir los movimientos del
usuario, consiguiendo así que éste se sienta inte-
grado en los ambientes creados por ordenador.

4. Elementos multimedia:
Imagen digital
Toda imagen o elemento gráfico de naturaleza
digital es sólo y nada más que un conglomerado
de píxeles. Están formadas únicamente por una
serie de bits, esto es, por unos y ceros (sistema
binario). Son imágenes “intangibles”, que no se
pueden tocar, muy fácilmente transformables.
Existen multitud de formatos para comprimir las
imágenes digitales, aunque son tres los más uti-
lizados: JPG (ó JPEG), GIF y PNG. Normalmente,
las cámaras digitales guardan las imágenes en
JPG, el más empleado para las fotografías. Para
cambiar su tamaño, resolución o formato hay que
emplear un editor de imágenes, como Photoshop
o Paint Shop Pro.
Para elegir el formato adecuado para una imagen
hay que valorar su contenido (fotografía, gráfico,
etc.), la calidad (dependiendo de su destino:
impresión en papel, publicación en web...) y el
tamaño del archivo.
La regla general dice que JPG es el mejor formato
para las fotografías o cualquier imagen que pierda
calidad con menos de 256 colores. Para el resto,
gráficos, textos o combinaciones de ambos, GIF
o PNG ofrecen la mejor relación calidad - peso
del archivo. Cualquiera de estos tres formatos
son indicados para publicar imágenes en páginas
web o enviarlas por correo electrónico.
Para fotografía de alta calidad se puede emplear
la compresión sin pérdida del TIFF. De hecho,
hay cámaras digitales de gama alta en las que se
pueden grabar las fotos en este formato, aunque
ocupan un 80% más que si se guardan en JPG.
Podemos obtener imagen digital mediante:
Dispositivos de captura de imágen: como
cámaras o escáneres. Ambos son conversores
analógico-digital.
Programas de creación de imagen digital:
partiendo desde cero o modificando imágenes
previas. Necesitamos utilizar un ordenador con
software apropiado, como Photoshop o Illustra-
tor. Dentro de las imágenes digitales, podemos
distinguir entre dos tipos bien diferenciados:
Imágen de mapa de bits:
también llamada bitmap o gráfico rasterizado,
consiste en una estructura que representa una
rejilla rectangular de píxeles o puntos de color.
Cada uno de ellos tiene asignado un único color.
La imagen bitmap, a diferencia de la imagen
vectorial, no puede escalarse sin consecuencias
que alteren su aspecto, para ello hay que tener
en cuenta muchos factores, entre los cuales se
encuentran la resolución, el modo de color, la pro-
fundidad de bits y el formato de compresión.

5. Imagen vectorial:
aquella que se construye apartir de unos objetos
generados matemáticamente, llamados vectores.
Tienen la ventaja de que no sufren pérdida de
calidad al ampliarla y suelen tener poco peso
como archivo.
Un vector está definido por una serie de puntos
que tienen unos manejadores con los que se
puede controlar la forma de la línea que se origina
al conectar dos de esos puntos. Al dibujar curvas,
estaremos creando curvas Bezier.
Tamaño de imagen:
Se utiliza como unidad el píxel. El tamaño nos
da las dimensiones de la imagen digital (ancho
x alto). Por ejemplo, 4608 x 3072 px. Para cal-
cular el número total de píxels que tiene la ima-
gen, multiplicaremos el ancho por el alto. Una
imagen de 3000x2000 píxeles tendrá 6.000.000
de píxeles, o sea, 6 megapíxeles. 1 megapíxel =
1.000.000 de píxels Peso o tamaño de archivo.
Tamaño de archivo es la cantidad de información
que contiene, medida en bits, Bytes o alguno de
sus múltiplos. Es lo que va a ocupar la imagen
por ejemplo, en el disco duro o en el pendrive.
Intervienen en el peso de la imagen:
-Tamaño de imagen
-Resolución
-Profundidad de color
-Modo de color
-Tipo de archivo y compresión del mismo
Resolución:
Define el número de píxeles por unidad de longi-
tud, en este caso por pulgada.
• 1 pulgada (inch) = 2’54 cms.
Cuanto más grande sea la cantidad de píxeles
por pulgada (ppp o ppi), mayor será su peso.
Profundidad de color.
Es el término que describe cuántos bits se utilizan
en un píxel para representar un color en una ima-
gen bitmap. A mayor profundidad de color, esto
es, a mayor número de bpp (bits por píxel) mayor
será el espectro de colores distintos que podrá
ser representado. Por ejemplo, un píxel pertene-
ciente a una imagen bitmap a 8 bits de profundi-
dad de color podría tomar, según la información
cromática que se le adjudique, hasta 256 colores.
• 1 bit de color (21 = 2 colores) monocromo,
blanco y negro
• 2 bits de color (22=4colores)
• 4 bits de color (24= 16 colores)
• 8 bits de color (28=256 colores) también lla-
mado SuperVGA
• 16 bits de color (216=65536 colores) color de
alta resolucióno HiColor
• 24 bits de color 224=16.777.216 colores) color
verdadero
• 32bits: hablamos de una imagen de 24 bits
que tiene 8bits más para definir las áreas tras-
parente de la imagen o “canales alfa”.

6. Modo de color.
Hay varios modos de color o maneras en las que
se constituye el color en una imagen digital. Los
más usuales son el RGB y el CMYK. • Modo “ima-
gen de línea” o “mapa de bits”: Los píxeles que
componen la imagen son o blancos o negros, sin
ningún tono intermedio.
• Modo “escala de grises”: La imagen la conform-
an pixeles con distintas tonalidades (normalmente
256) de gris.
•Color indexado: imágenes con 256 tonos (de
color o monocromas) que son seguras para la
Web.
• Modo RGB (o RVA): basado en la mezcla aditiva
de los colores. Cada píxel está compuesto por
una cantidad de Rojo, Verde y Azul. La mezcla de
estos 3 colores primarios nos da como resultado
el color Blanco.
• Modo CMYK (o CMAN): basado en la mezcla
sustractiva de los colores. Cada píxel está com-
puesto por una cantidad de Cyan, Magenta y
Amarillo. La mezcla de estos 3 colores primarios
nos da (teóricamente) como resultado el color
Negro, pero como en la práctica esto no es así,
debemos usar el color Negro (K) para conseguir
toda la gama tonal.
Formatos de archivo:
Cuando trabajamos con imágenes, es muy impor-
tante elegir bien el formato adecuado. Al publicar
fotografías en una página web o al enviarlas por
correo electrónico, para que la transferencia no
sea excesivamente larga, es muy importante el
peso o Kbytes del archivo de imagen. En este
caso, es recomendable el uso de formatos que
utilicen compresión.
Para imprimir fotografías, donde el peso del ar-
chivo no tiene tanta importancia, se podrán usar
otros formatos que ofrezcan más calidad que los
utilizados para web. Lo mismo ocurre al hacer fo-
tografías con las cámaras, la elección del formato
se hará en función de lo que se desea obtener y
de los procesos que desee realizar a posteriori el
fotógrafo.
• raw: formato que almacena toda la
información de cada píxel sin ninguna
compresión, tal como la capturamos en el
sensor de la cámara. Necesitamos programas
específicos para visualizar las imágenes.

7. • tiff: compatible con todos los sistemas op-
erativos que almacena gran cantidad de
información. Permite guardar capas.
• jpg: es uno de los más extendido debido a
su uso en internet, aunque debido a que es
un formato comprimido, puede ocasionar
pérdidas. Existen diferentes calidades de
compresión (a mayor calidad, mayor peso).
• gif: formato comprimido utilizado para
imágenes de diseñográfico principalmente,
con áreas planas de color. Se usa también
para hacer imágenes animadas. Acepta trans-
parencia.
• png: formato comprimido que da resultados
de gran calidad. Acepta transparencia.
• svg: es el estándar de la W3C para archivos
de gráficos vectoriales.
• bmp: formato en desuso utilizado por el sis-
tema de Windows.
• psd: formato nativo de Photoshop, permite
guardar capas. Para imágenes bitmap.
• ai: formato nativo de Illustrator, para imágenes
vectoriales.
Para más información
https://es.wikipedia.org/wiki/Anexo:Formatos_de_
archivo_de_gr%C3%A1ficos
SonidoSensación producida en el órgano del oído por el
movimiento vibratorio de los cuerpos, transmitido
por un medio elástico, como el aire.
El sonido se transmite a través de medios mate-
riales, sólidos, líquidos o gaseosos pero nunca a
través del vacío.
El sonido se produce cuando un cuerpo vibra con
una frecuencia comprendida entre 20 y 20000 Hz
y existe un medio material en el que pueda propa-
garse.
El sonido es una onda. Una onda es una
perturbación que se propaga por el espacio. En
una onda se propaga energía, no materia.
El sonido se propaga en el aire a una velocidad
de 340 m/s a temperatura normal (aproximada-
mente a 20o). Analógico: las ondas pueden
tomar cualquier valor de frecuencia o amplitud.
Digital: las ondas toman valores discretos de fre-
cuencia y amplitud (definidos, no cualquier valor).
Frecuencia de muestreo: Es el número de mues-
tras que se toman por intervalo de tiempo para
codificar la señal digital. Determina la calidad del
sonido. Ejemplo: en un CD de audio, la frecuencia
de muestreo es 44’1 KHz (44.000 muestras por
segundo), el doble que la que el oído humano
puede percibir.
Número de canales: Es el número de pistas que
componen un archivo de sonido digital: mono (1
canal), estéreo (2 canales) o multicanal – hasta 6
(sonido 5.1) u 8 en los home cinema.

8. Número de bits por muestra: Es el número de
bits que usamos para representar cada muestra.
Ejemplo: en un CD de audio, el valor estándar es
de 16 bits
FORMATOS DE AUDIO DIGITAL
Existen diferentes tipos de formato según la com-
presión del audio. Es importante saber distinguir
entre formato de archivo y codec. El codec codi-
fica y decodifica los datos del audio mientras es-
tos datos son archivados en un archivo que tiene
un formato de audio específico. La mayoría de los
formatos de archivo de audio públicamente docu-
mentados pueden ser creados con uno de dos o
más codificadores o codecs. Aunque la mayoría
de formatos de archivo de audio solo soportan un
tipo de datos (creado con un codec de audio). Un
contenedor de formato de multimedia como MKV
o AVI puede soportar múltiples tipos de datos de
audio y vídeo.
Hay tres grupos principales de formatos de ar-
chivo de audio:
Formatos de audio sin comprimir, como WAV,
AIFF o AU
Formatos sin pérdida (formato de audio com-
primido sin pérdida) como FLAC, MPEG-4 SLS,
MPEG-4 ALS, MPEG-4 DST, WavPack, Shorten,
TTA, ATRAC, Apple Lossless y WMA Lossless
Formatos con pérdida (algoritmo de compresión
con perdida) como MP3, Vorbis, Musepack, AAC,
WMA y Opus
Tasas de Bits
La unidad con que el Sistema Internacional de
Unidades expresa el bit rate es el bit por segundo
(bit/s, b/s, bps). La b debe escribirse siempre en
minúscula, para impedir la confusión con byte por
segundo (B/s). Para convertir de bytes/s a bits/s,
basta simplemente multiplicar por “8” y viceversa.
Que la unidad utilizada sea el bit/s, no implica que
no puedan utilizarse múltiplos del mismo:
kbit/s o kbps (kb/s, kilobit/s o mil bits por seg-
undo)
Mbit/s o Mbps(Mb/s, Megabit/s o un millón de
bits por segundo)
Gbit/s o Gbps (Gb/s, Gigabit, mil millones de bits)
Tasas de bits de compresión a MP3:
• 4 kbit/s Mínimo para reconocer el habla.
• 8 kbit/s Calidad telefónica convencional
• 32 kbit/s Radio AM
• 96 kbit/s Radio FM
• 128 kbit/s Sonido calidad semi CD, muy
común en MP3
• 192 kbit/s Sonido calidad CD en formato MP3
• 320 kbit/s Máxima calidad para formato MP3
Tipos
La velocidad de transferencia de datos puede ser
constante o variable:
1. Tasa de bits constante (CBR): Aplica una
cuantificación uniforme, por lo que no tiene en
cuenta si en la señal hay zonas con mayor o
menor densidad de información, sino que cuanti-
fica toda la señal por igual.
2. Tasa de bits variable (VBR): Aplica una
cuantificación no uniforme que sí que hace
diferenciación entre las zonas con mayor o
Video: Un video digital es una secuencia de
imágenes que, ejecutadas en secuencia, simulan
movimiento. Se almacenan en un determinado
formato digital de video como ser AVI, MPG, Re-
alVideo, WMV, etc.

10. VídeoUn video es una sucesión de imágenes presenta-
das a cierta frecuencia. El ojo humano es capaz
de distinguir aproximadamente 20 imágenes por
segundo. De este modo, cuando se muestran
más de 20 imágenes por segundo, es posible
engañar al ojo y crear la ilusión de una imagen en
movimiento. La fluidez de un video se caracteriza
por el número de imágenes por segundo (frecuen-
cia de cuadros), expresado en FPS (frames per
second o cuadros por segundo).
Además, el video multimedia generalmente está
acompañado de sonido, es decir, datos de audio.
Fotogramas por segundo (frames per second):
Número de imágenes por unidad de tiempo de
video. Los estándares PAL (Europa, Asia, Aus-
tralia, etc.) y SECAM (Francia, Rusia, partes de
África, etc.) especifican 25 fps, mientras que
NTSC (EE. UU., Canadá, Japón, etc.) especifica
29,97 fps.
El cine es más lento con una velocidad de 24 fps.
Para lograr la ilusión de una imagen en movimien-
to, la velocidad mínima de carga de las imágenes
es de unas quince imágenes por segundo, sin
embargo el ojo humano puede distinguir mov-
imiento mucho más fluido por encima de los 48
fotogramas por segundo.
Cuando tenemos valores de más de 60 fps,
podemos hablar de un tipo de vídeo llamado
SuperSlowMotion (cámara super lenta) Sistema
de barrido:
La exploración entrelazada (interlaced scanning)
es un sistema de captación y representación de
imágenes utilizado en televisión para evitar el
parpadeo que se producía en la representación
de las imágenes de televisión sobre pantallas de
tubo.
La exploración entrelazada 2/1, característica de
los sistemas de televisión PAL, NTSC y SECAM,
consiste en descomponer cada cuadro («frame»)
de la imagen en dos semicuadros llamados cam-
pos (field). Uno de los campos contiene las líneas
pares mientras que el otro contiene la impares
Sistema de barrido:
Los sistemas de barrido progresivo, en cada
período de refresco se actualizan todas las líneas
de exploración (la imagen completa). El desar-
rollo de sistema de representación de imagen
diferentes a los monitores con tubo de imagen
(CRT), como las pantallas de TFT y de plasma,
han permitido desarrollar sistemas de televisión
de barrido progresivo.

11. Tamaño de imagen.
Es el tamaño del video (ancho x alto)expresado
en píxeles cuandose visualiza al 100%, sin
agrandar ni reducir. Los reproductores pueden
mostrar un video a pantalla completa o con una
ampliación del 200%, 300%, etc. En estos casos
el video pierde calidad de imagen y esta pérdida
depende del formato de archivo.
- En PAL, el tamaño es de 720×576 px. (25 fps, a
50 campos entrelazados por segundo)
- En NTSC, el tamaño máximo de imágenes
digitalizadas es de 720×480 píxels (30 fps, a 60
campos entrelazdos) píxels - HD: 1280x720 px.
- Full HD: 1920x1080 px. Relación de aspecto:
La relación de aspecto o ratio (aspect ratio) de
una imagen es la proporción entre su ancho y su
altura. Se calcula dividiendo el ancho por la altura
de la imagen visible en pantalla, y se expresa
normalmente como «X:Y».
La relación de aspecto
A menudo llamada, ratio, ratio de aspecto,
proporción de aspecto o razón de aspecto (tra-
ducciones literales de la expresión en inglés as-
pect ratio) de una imagen, es la proporción entre
su ancho y su altura. Se calcula dividiendo el
ancho por la altura de la imagen visible en panta-
lla, y se expresa normalmente como «X:Y».
4:3(1.33)-Estándar utilizado en la televisión PAL.
Muchas pantallas de ordenador y televisores usan
este estándar.
16:9(1.77:1)-Es el estándar usado porla televisión
de alta definición, normalmente se le suele llamar
Panorámico o Widescreen.
2,39:1y1,85:1 son las más usadas enel cine.
La tasa de bits es una medida de la tasa de
información contenida en un flujo o secuencia de
video. La unidad en la que se mide es bits por
segundo (bit/s o bps) o también Megabits por
segundo (Mbit/s o Mbps). Una mayor tasa de bits
permite mejor calidad de video.
Por ejemplo, el VideoCD, con una tasa de bits de
cerca de 1Mbps, posee menos calidad que un
DVD que tiene una tasa de alrededor de 20Mbps.
La VBR (Variable Bit Rate – Tase de Bits Vari-
able) es una estrategia para maximizar la calidad
visual del vídeo y minimizar la tasa de bits. En las
escenas con movimiento rápido, la tasa variable
de bits usa más bits que los que necesitaría en
escenas con movimiento lento. En los casos de
vídeo streaming en tiempo real y sin buffer, cu-
ando el ancho de banda es fijo (por ejemplo en
videoconferencia emitida por canales de ancho
de banda constante) se debe usar CBR (Constant
Bit Rate – Tasa de Bits Constante).

12. Formatos:
Modo en el que los vídeos guardan los datos de
un archivo de vídeo con el fin de que puedan ser
interpretados por el ordenador.
Existen algunos formatos de vídeo de gran
implantación: el QuickTime Movie (MOV), el AVI
y el correspondiente al estándar MPEG. También
tenemos el formato WMV, reproducible solo con
Windows Media Player y no muy recomendable.
AVI (Audio Video Interleaved = Audio y Video
Intercalado) Es el formato estándar para alma-
cenar video digital. Admite distintos códecs de
compresión como CinePak, Intel Indeo 5, DV, etc.
Los códecs con más capacidad de compresión y
una calidad aceptable son DivX y XviD.
El formato AVI puede ser visualizado con la
mayoría de reproductores: Windows Media,
QuickTime, etc. siempre y cuando se encuentren
instalados en el equipo los adecuados códecs
para cada tipo de reproductor.
MPEG (Moving Pictures Expert Group) Es un for-
mato estándar para la compresión de video digi-
tal. Son archivos de extensión *.MPG ó *.MPEG.
Admite distintos tipos de códecs de compresión:
MPEG-1 (calidad CD), MPEG-2 (calidad DVD),
MPEG-3 (orientado al audio MP3) y MPEG-4 (más
orientado a la web).
MOV Es el formato de video y audio desarrollado
por Apple. Utiliza un códec propio que evoluciona
en versiones con bastante rapidez. Este tipo de
archivos también pueden tener extensión *.QT Se
recomienda utilizar el reproductor de QuickTime.
Existe una versión gratuita del mismo que se
puede descargar de Internet. Admite streaming.
WMV (Windows Media Video) Desarrollado por
Microsoft. También puede tener extensión *.ASF
Admite streaming.
FLV (Flash Video) Es un formato que utiliza el
reproductor Adobe Flash para visualizar vídeo en
Internet.. Opción recomendada para la web por
su accesibilidad. Formato utilizado por ejemplo
por YouTube, Google Video, iFilm, etc. Admite
streaming.
Códec
Es la abreviatura de codificador- decodificador.
Permiten reducir el peso del vídeo, ya que suele
ocupar mucho espacio cuando no lo comprimi-
mos. Es necesario que en el sistema operativo
se hayan instalados los códecs necesarios para
poder grabar un vídeo con determinado códec,
así como para poder visualizarlo. Cada formato
de vídeo dispone de un gran número de códecs,
cada cual con características específicas. Algu-
nos ejemplos son Cinepak, Indeo, Xvid, DivX.
Últimamente se ha producido un auge del códec
H264, que nos permite tasas de compresión muy
altas, posibilitando la transmisión de vídeo HD
por internet.

13. Al igual en vídeo, una animación se compone
por una secuencia de imágenes fijas. Debido a la
persistencia de la visión ( fenómeno visual des-
cubierto por Peter Mark Roget) dichas imágenes
permanecen en la retina humana una décima de
segundo antes de desaparecer por completo.
Al mostrar al ojo humano una secuencia com-
puesta por más de 10 imágenes por segundo,
nuestra mente cree que los objetos que cambian
de posición en esas imágenes fijas, en realidad se
mueven.
Para realizar animación mediante ordenadores
disponemos de muchas dispositivos físicos o
hardware, como ratones, cámaras, escáneres o
tabletas gráficas.
También disponemos de diversos programas o
software para animación que podemos agrupar
en:
Software 2D: Flash, Premiere, After Effects, Pho-
toshop (gifs animados), etc.
Software 3D: 3D Studio Max, Cinema 4D, Blender,
etc.
Muchos de los archivos de animación digital irán
en formato de vídeo digital. En tal caso utiliza-
remos los parámetros anteriormente vistos para
secuencias de vídeo, como tamaño de imagen,
fotogramas por segundo (fps), tipo de archivo,
etc...
Otros archivos, sin embargo irán en otro tipo de
formatos, como el formato .swf (Adobe Flash) de
animación vectorial.