5. Creación de Contenido Multimedia#

En este tema aprenderemos a:

  1. Preparar contenido multimedia para su publicación en la web

  2. Conocer los principales formatos de contenido multimedia

  3. Conocer herramientas de edición de formatos multimedia

Esfuerzo Necesario

El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

Video Clase

5.1. Formatos de Imagen#

Video Clase

  1. Algunos conceptos Previos:

    1. Imagen Fija vs Imagen Animada (secuencia de imágenes fijas)

    2. Raster vs Vectorial

    3. RAW vs Codificada (lossy / lossless)

    4. Imágenes para la web:

      1. Tamaño: es uno de los recursos más costosos y que influye más en la carga de la página.

      2. Calidad: calidad del visor generalmente más limitada que otros mecanismos (impreso o pantallas muy grandes)

    5. Archivo Imagen: es un contenedor de información

  2. Tipos y formatos de Imagen: referencia, formato de archivo, tipo mime, extensión habitual:

    1. Actuales: JPEG , PNG , WebP , APNG , AVIF , GIF

    2. Antiguos: BMP , ICO , TIFF ,

    3. Formato Vectorial: SVG

    4. Análisis del tipo de formato:

      1. Compatiblidad en Navegadores (Can I Use? )

      2. Especificaciones: Bits por componente, modelo de color, etc

      3. Nivel de Compresión/Codificación:

        1. con pérdida (lossy)

        2. sin pérdida (lossless)

      4. Tipo de Licencia

  3. Qué formato escoger (Choosing an Image Format )

    1. Fotos: WebP / JPEG

    2. Iconos: SVG / PNG

    3. Capturas de Pantalla: WebP / PNG

    4. Diagramas: SVG / PNG

  4. Metadatos en Fotografías: Datos Exif :

    1. No todos los formatos lo soportan

    2. Puedes decidir si se incluyen o no en el contenedor (archivo)

T05-A01. Formatos de Imagen

Puedes trabajar sobre la imagen del día en la wikipedia (Picture of the Day )

  1. ¿En qué formato está la imagen?

  2. ¿Qué resolución tiene? ¿Qué tamaño de archivo?

  3. ¿Qué representa?

  4. ¿Cual es su título y/o descripción?

  5. ¿En qué fecha se tomó?

  6. ¿En qué lugar?

  7. ¿Con qué cámara fotográfica se tomó?

  8. ¿Quien la tomó?

  9. ¿Cual sería el url para referenciarla?

  10. ¿Algún dato técnico más? ¿Tiempo Exposición? ¿ISO? ¿F-number?

5.2. Edición de Imágenes#

Video Clase

  1. ¿En qué consiste? Diferentes funciones

  2. Software Diseño Gráfico:

    1. Abarcan toda la edición de imágenes:

      1. Usuario básico: por ejemplo software de edición en aplicación del sistema operativo

      2. Usuario medio: necesita personalizar algunas características de una imagen (tamaño, resolución, contraste, filtros básicos, …)

      3. Usuario avanzado: necesita personalizar totalmente la imagen

    2. Listado de software:

      1. Raster Graphics Editors

      2. Vector Graphics Editors

    3. Tipos de Uso:

      1. Interfaz GUI (diseñadores)

      2. Interfaz CLI (programadores/administradores)

      3. Apps y Servicios Web: por ejemplo algo tipo canva (al 95% de los usuarios no les hace falta más)

  3. La suite más potente (para programadores y administradores): imageMagick

    1. Libre y gratuita

    2. Suite completa para editar, convertir y visualizar imágenes (en cualquier formato)

    3. Muy completa y potente

    4. Perfecta para automatizar y programar (modo comando)

    5. Permite manejar grandes volumenes de imágenes y personalización

    6. Tiene un uso … casi infinito (ImageMagick Use )

T05-A02. Edición de Imágenes

Puedes trabajar sobre la imagen del día en la wikipedia (Picture of the Day ). Usas ImageMagick para la `edición y/o procesado de la imagen/es`_ .

  1. Descarga tres resoluciones de la foto diferentes: ¿cual es el tamaño de cada una (según la resolución)?

  2. Reescala la imagen, para que el ancho superior sea 1024

  3. Cambia el formato de imagen a PNG

  4. Cambia el formato de imagen a WebP. Comprueba los tamaños en los tres formatos: original, png y webp.

  5. Usando el formato JPG genera 4 imágenes modificando la calidad al 75%, 50%, 25% y 10%. Visualiza las 5 imágenes. ¿Cual sería el umbral mínimo de calidad?

  6. Obtén información Exif de la imagen

  7. Recorta la imagen (25 px por arriba y 50 por la izquierda)

  8. Rota la imagen un 45%

  9. Pon una marca de agua en la parte inferior derecha de la foto (añadir el texto la foto es mía)

  10. Aplica el filtro (filtro1, filtro2, filtro3)

Una propuesta de actividad interesante usando editores GUI es esta de Victor Carceler

5.3. Formatos de Audio#

Video Clase

  1. Algunos conceptos previos (Digital Audio Concepts )

    1. Muestreo (y tamaño de la muestra). Típico: 48 KHz muestreo y 16 bits por muestra.

    2. Canales de audio (y número y cómo se empaquetan). Típico estéreo: L + R. 16 + 16 bits por muestra

    3. Tamaño del archivo y Ancho de Banda

      ../_images/audio_and_network.png

    4. Archivo de audio digital en crudo (raw). Por ejemplo usando en un contenedor WAV una codificación LPCM

    5. Aspectos Técnicos: Espacio de almacenamiento, ancho de banda y capacidad de procesamiento

  2. Compresión

    1. Lo necesitamos para adecuarnos a la red: tamaño vs ancho de banda

    2. Depende del tipo de información (música / voz / sintético) y del ruido de la muestra

    3. Es una compresión muy específica para este tipo de señal

    4. ¿Qué precio vamos a pagar por disminuir el tamaño? Compresión vs Calidad

    5. Resultado: % tamaño original.

  3. Codificadores

    1. AAC , ALAC , AMR , FLAC , G.711 , G.722 , MP3 , Opus , Vorbis

    2. Criterios:

      1. Velocidad de codificacion (bit rate)

      2. Valor de la muestra (precisión)

      3. Frecuencia de muestreo que soporta

      4. Tipo de compresión

      5. Número de canales

      6. Ancho de Banda Acústica (no de transferencia)

      7. Latencia

      8. Compatibilidad

      9. Tipo de contenedor (formato de archivo)

      10. Licencia

  4. Escoger un tipo de codificador (preguntas):

    1. ¿Qué tipo de audio se va a utilizar?

    2. ¿Va a ser remuestreado el audio o se va a utilizar así?

    3. ¿En qué tipo de archivo (contenedor) se va a usar?

    4. ¿Qué tasas de transferencia voy a necesitar?

    5. ¿Cuánta pérdida de calidad estoy dispuesto a asumir?

T05-A03. Formatos de Audio

Para un tipo de codificador de audio dado (por ejemplo MP3):

  1. ¿Es una especificación abierta y de libre uso?

  2. ¿Qué tipo de compresión utiliza?

  3. ¿Qué organización propone sus especificaciones?

  4. ¿Para qué tipo de audio es más adecuado?

  5. ¿Qué navegadores lo soportan? ¿Desde qué versión?

  6. ¿Qué nivel de uso tiene en la actualidad?

  7. ¿Cual es su página de referencia en la Wikipedia?

Para una muestra de audio estéreo grabada a 44 KHz y muestras de audio de 16 bits:

  1. ¿Cual es la tasa de codificación sin comprimir?

  2. Si tengo una velocidad de transmisión disponible de 128 Kbps, ¿qué % de compresión necesito?

  3. Y si la muestra, en vez de estéreo fuese en sonido envolvente 5.1

5.4. Formatos de Video#

Video Clase

  1. Algunos conceptos previos (Digital Video Concepts )

    1. Vemos a través de una cámara (extraordinaria) de 120 Mpx (b/n) y 7 Mpx (color)

    2. Muestra de color (modelo de color). Típicamente 256 valores por canal (RGB + Alpha -> 4B)

    3. Imagen: array de muestras según número de pixels. Más pixels -> Más tamaño

    4. Archivo de video digital en crudo (raw)

    5. Codificar Video (sin audio, metadatos y otra información) genera tamaños considerables:

      ../_images/video_size.png

  2. Codificación y Compresión de video (Web Video Codec Guide )

    1. Problema similar a la señal de audio pero de tamaño mucho mayor. Por ejemplo:

    2. AV1 , AVC (H.264), H.263 , HEVC (H.265), MP4V-ES , MPEG-1 , MPEG-2 , Theora , VP8 , VP9

    3. Criterios:

      1. Velocidad de codificación (bitrate). Fija o Variable

      2. Frecuencia de Cuadro (frame rate)

      3. Modelo de color (color model)

      4. Tipo de compresión

      5. Compatibilidad (Navegador)

      6. Tipo de contenedor (formato de archivo)

      7. Licencia

    4. Factores que afectan a la codificación (calidad vs tamaño):

      1. Profundidad de color (bit depht)

      2. Frecuencia de cuadro (frame rate)

      3. Variabilidad entre cuadros (motion)

      4. Ruido (noise)

      5. Resolución del cuadro (frame size)

    5. La codificación puede traer efectos no deseados: Compression Artifacts

  3. Escoger codificación de video y contenedor:

    1. ¿Qué tipo de video se va a utilizar?

    2. ¿En qué tipo de archivo (contenedor) se va a usar?

    3. ¿Qué tasas de transferencia voy a necesitar?

    4. ¿Cuánta pérdida de calidad estoy dispuesto a asumir? ¿Puedo almacenar diferentes formatos?

    5. ¿Cual es el tipo de compatibilidad que necesito (en los navegadores)?

T05-A04. Formatos de Video

Para un tipo de codificador de video dado (por ejemplo VP9):

  1. ¿Es una especificación abierta y de libre uso?

  2. ¿Qué tipo de compresión utiliza?

  3. ¿Qué organización propone sus especificaciones?

  4. ¿Qué tamaños de cuadro soporta?

  5. ¿Qué cantidad de cuadros soporta?

  6. ¿Para qué tipo de video es más adecuado?

  7. ¿Qué navegadores lo soportan? ¿Desde qué versión?

  8. ¿Qué nivel de uso tiene en la actualidad?

  9. ¿Cuanto me podría ocupar un video de 15 minutos?

  10. ¿Cual es su página de referencia en la Wikipedia?

5.5. Contenedores Multimedia#

Video Clase

  1. Un «archivo multimedia» es en realidad un contenedor de datos con:

    1. Flujo/s de audio

    2. Flujo/s de video

    3. Texto u otros componentes

    4. Metadatos (datos sobre el contenedor y su contenido)

  2. El soporte y compatibilidad puede ser complicada. Generalmente hay que tener en cuenta:

    1. El tipo de archivo (contenedor)

    2. El tipo de codificador (anunciando el tipo MIME)

    3. El navegador (en concreto el UA) del usuario

  3. Los más utilizados:

    1. Formato RAW, en crudo:

      1. Audio: WAV (usando LPCM)

      2. Video: ?

    2. Formatos con codificadores: Contenedor 3GP , ADTS , Contenedor FLAC , MPEG / MPEG-2 , MPEG-4 (MP4) , Contenedor Ogg , QuickTime (MOV) , WebM

    3. Criterios:

      1. tipo de flujo (audio / video / otros)

      2. Codificadores soportados y Navegadores

      3. Compatibilidad (codificador + contenedor)

  4. Para escoger un tipo de archivo multimedia:

    1. Preguntas:

      1. ¿Qué voy a hacer? Reproducir / Editar / Modificar

      2. ¿Qué ancho de banda tendré disponible?

      3. ¿Tengo que utilizar algún tipo de codificador audio/video concreto?

      4. ¿Quiero usar sólo formatos abiertos?

      5. ¿Puedo proponer diferentes tipos de archivos o sólo uno?

    2. Sugerencias:

      1. Audio: mp3 / flac

      2. Video: webm / 3gp

  5. Formatos para animaciones (no video pero …)

    1. Son un tipo particular de contenedores multimedia

    2. Varias imágenes fijas en un mismo archivo

    3. Formatos típicos (aparte de contenedor multimedia estándar): GIF, APNG y otro tipos de integracion (sprites, svg, etc)

T05-A05. Contenedores Multimedia

Resulta que tengo un video, sin comprimir, en formato crudo de hora y media. Quiero usar WebM para usarlo en mi web

  1. ¿Cual es la extensión del archivo que me genera?

  2. ¿Cuánto me va a ocupar (aprox)?

  3. ¿Puedo usarlo sin pagar royalties?

  4. ¿Qué codificador de audio puedo escoger?

  5. ¿Qué codificador de video puedo escoger?

  6. ¿Puedo incluir subtítulos en tres idiomas?

  7. ¿Podría usarlo en el navegador Safari de un iPhone SE 2018?

5.6. Clientes Multimedia#

Video Clase

  1. Hay muchos reproductores de medios :

    1. Reproducen la información incluida en el contenedor multimedia

    2. Permiten manipular la visualización (control del contenido)

  2. Dos reproductores multimedia, con licencia abierta, muy completos:

    1. Entorno GUI: VLC

    2. Entorno CLI: Mplayer

Uso de mplayer como cliente multimedia de audio

Sobre un archivo de audio disponible en internet y con licencia libre. Lo usas vía consola . Puedes usar un ejemplo de muestra:

  1. Sound Examples. WAV y MP3 de menos de 15sg

  2. MP3 Examples . 4 ejemplos en MP3

Obtén la información del archivo de audio:

  1. Nombre del archivo

  2. Tamaño de archivo

  3. ¿Cuánto dura?

  4. Formato de Archivo

  5. ¿Qué codificación utiliza?

  6. ¿Qué tamaño de muestra?

  7. ¿Qué bitrate usa?

  8. ¿Quién es el autor?

  9. ¿Qué tipo de licencia tiene?

  10. ¿Cual es tu calidad percibida del audio?

T05-06. Uso de mplayer como cliente multimedia de video

Sobre un archivo de video disponible en internet. Lo usas vía consola. Puedes usar:

  1. alguna de estas muestras (contenedor AVI)

  2. o estas en la web de ffmpeg (muy variado)

Obtén información del archivo de video:

  1. Nombre del archivo

  2. Tamaño

  3. ¿Cuánto dura?

  4. Resolución de los cuadros

  5. ¿Qué tasa de transferencia es necesaria?

  6. ¿Qué tipo de codificación de video usa? ¿A qué resolución? ¿Cuántos fps? ¿Qué bitrate?

  7. ¿Qué tipo de codificación de audio usa? ¿A qué frecuencia de muestreo? ¿A qué bitrate?

  8. ¿Cuántas fuentes de entrada tiene? ¿Cuántos flujos cada fuente?

  9. ¿Quién es el autor y qué licencia tiene?

  10. ¿Cual es tu calidad percibida del video?

5.7. Edición de audio y video#

Video Clase

  1. La Utilidad ffmpeg es una colección de software:

    1. Como una navaja suiza multimedia (muy completa)

    2. Te permite editar Audio y Video de forma automatizada (programable)

  2. Y además sirve como infraestructura multimedia:

    1. Captura: Graba (de diferentes fuentes)

    2. Procesa: Codifica y Convierte (entre formatos)

    3. Publica: Sirve Streaming

  3. El comando ffmpeg se puede usar para muchas funciones:

    1. Obtener información de un video

    2. Convertir entre formatos diferentes

    3. Modificar la calidad del video

    4. Modificar el tamaño, la orientación, etc

    5. Extraer (o modificar) los flujos de audio

    6. Recortar los flujos de audio o video

    7. Extraer fotogramas (imágenes)

    8. y … mucho más (comando ffmpeg)

Uso de ffmpeg para editar audio

Sobre un archivo de audio disponible en internet y con licencia libre (por ejemplo este en mp3) :

  1. Guárdalo en formato FLAC y Vorbis

  2. Qué bitrate y tamaño tiene el formato FLAC

  3. Qué bitrate y tamaño tiene el formato Vorbis

  4. Quítale 10 segundos al final del archivo

  5. Auméntale el volumen un 150% al audio

  6. Aplícale el efecto de un filtro al audio

  7. Divídelo en clips de 3 sg, donde añades al nombre del archivo _NNNN, siendo NNNN desde 0 a 9999 (de forma secuencial).

Uso de ffmpeg para editar video (o el contenedor multimedia)

Sobre un archivo de video disponible en internet (puedes usar alguna de estas muestras ):

  1. Tranforma un video de un formato a otro (por ejemplo de .avi a .webm)

  2. Revisa la información del nuevo archivo (contenedor webm)

  3. Cambia la tasa de calidad del audio y/o del video (puedes transcodificar o no)

  4. Extrae sólo el audio de un video (o elimínalo). Revisa que hay un flujo (stream) menos.

  5. Redimensiona el tamaño (cambia la resolución) de un video sin que se deforme el formato

  6. Haz un clip de un video (unos segundos). Es decir, recorta el video.

  7. Extrae un fotograma por cada segundo de video

  8. Inserta una imagen como marca de agua en un video

  9. Añade un efecto de video (fade in/out)

5.8. Patentes, Derechos de Autor y Licencias#

Video Clase

  1. Es un tema de cierta complejidad. Este diagrama lo explica muy bien (Diagrama )

    https://www.ugr.es/~derechosdeautor/imagenes/diagrama.gif

  2. Da para un curso completo (Gestión de derechos de autor ). Algunos conceptos a tener en cuenta:

    1. Pedir Permiso si usas material de terceros (tiene derechos)

    2. Derechos: morales y patrimoniales

    3. Dominio público y dominio privado

    4. Copyright vs Copyleft

    5. Aplica no sólo a material multimedia (software, patentes, etc)

    6. Aunque hay actividades diferentes, los derechos a cuidar son más o menos los mismos: Tabla Actividades / Derechos

  3. Ejemplo de uso. Licencias Creative Commons

    1. Organización que lo gestiona

    2. El uso puede ser complejo (diferentes usos y motivaciones).

      1. 4 usos: BY / SA / NC / ND

      2. 6 licencias (compbinando usos anteriores)

    3. Licencias:

      https://upload.wikimedia.org/wikipedia/commons/e/e9/Creative_Commons_Semaforoa.svg

T05-A08. Licencias Creative Commons

  1. En qué año se fundó CC

  2. ¿Qué personas la fundaron? ¿Cual es su contexto?

  3. ¿Qué tipos de condiciones genéricas hay en las licencias?

  4. ¿Cual es la última versión de las especificaciones?

  5. ¿Qué tipos de licencias CC hay?

  6. ¿Cuál sería el tipo de licencia más restrictiva?

  7. ¿Cuál sería el tipo de licencia menos restrictiva?

  8. ¿Cual sería el texto de la licencia CC BY-NC?

  9. ¿Qué tipo de licencia crees que deberías usar en tu proyecto web?

  10. ¿Tiene sentido utilizarlas?