02_ELEMENTOS MULTIMEDIA
Últimas tendencias en el campo de los productos interactivos para web Con la llegada de HTML5 y CSS3 se ha producido un cambio importante en los productos interactivos para web: - Han aparecido nuevas soluciones para problemas 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 herramientas 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 precedentes. Los nuevos sitios web y las nuevas apps están incluyendo cada vez más opciones relacionadas 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 mucho 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 headmounted display), es un dispositivo de visualizació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 visualizadas engloben todo el campo de visión del usuario. Gracias a que el casco se encuentra sujeto a la cabeza, éste puede seguir los movimientos del usuario, consiguiendo así que éste se sienta integrado en los ambientes creados por ordenador.
Elementos multimedia:
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.
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 utilizados: 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.
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.
Imagen digital
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 Illustrator. 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 profundidad de bits y el formato de compresión.
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 calcular el número total de píxels que tiene la imagen, 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.
Profundidad de color.
Es el término que describe cuántos bits se utilizan en un píxel para representar un color en una imagen 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 perteneciente a una imagen bitmap a 8 bits de profundidad de color podría tomar, según la información cromática que se le adjudique, hasta 256 colores.
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 longitud, 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.
• • • • • • •
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 llamado 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 trasparente de la imagen o “canales alfa”.
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 “imagen 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 conforman 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á compuesto 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 importante 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 archivo 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 fotografí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.
• •
•
• • • • •
tiff: compatible con todos los sistemas operativos 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 transparencia. 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 sistema 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
Sonido
Sensació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 materiales, 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 propagarse. 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 (aproximadamente a 20o). Analógico: las ondas pueden tomar cualquier valor de frecuencia o amplitud. Digital: las ondas toman valores discretos de frecuencia y amplitud (definidos, no cualquier valor). Frecuencia de muestreo: Es el número de muestras 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.
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
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 archivo de audio: Formatos de audio sin comprimir, como WAV, AIFF o AU Formatos sin pérdida (formato de audio comprimido 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
FORMATOS DE AUDIO DIGITAL Existen diferentes tipos de formato según la compresión del audio. Es importante saber distinguir entre formato de archivo y codec. El codec codifica y decodifica los datos del audio mientras estos 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 documentados pueden ser creados con uno de dos o
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 segundo) 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 cuantifica 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, RealVideo, WMV, etc.
Vídeo
Un video es una sucesión de imágenes presentadas 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 (frecuencia 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, Australia, 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 movimiento, 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 movimiento 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 campos (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 desarrollo 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.
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 (traducciones literales de la expresión en inglés 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». 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 Variable) 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, cuando 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).
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.
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.
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.
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.
AVI (Audio Video Interleaved = Audio y Video Intercalado) Es el formato estándar para alma-
MPEG (Moving Pictures Expert Group) Es un formato 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 comprimimos. 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. Algunos 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.
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 descubierto 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 compuesta 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, Photoshop (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 utilizaremos 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.