UT3 — Implantación de contenido multimedia¶

Índice¶

1. Tipos de imágenes en la web (UT3-1)
2. Derechos de la propiedad intelectual. Licencias. Ley de la propiedad intelectual. Derechos de autor (UT3-2)
3. Imágenes. Software para crear y procesar imágenes. Formatos. Conversiones (exportar e importar) (UT3-3)
4. Optimización de imágenes para la web (UT3-4)
5. Audio: formatos. Conversiones de formatos (exportar e importar) (UT3-5)
6. Vídeo: codificación de vídeo, conversiones de formatos (exportar e importar) (UT3-6)
7. Animaciones (UT3-7)
8. Integración de audio y vídeo en una animación (UT3-8)
9. Glosario rápido
10. Repaso: preguntas para autoevaluarte
11. De dónde sale esto (fuentes de la carpeta)
12. Avisos sobre las fuentes

De qué va esta unidad¶

Imagina que te encargan la web del Café Central, una cafetería con encanto que quiere vender su ambiente en Internet: fotos de sus tostadas, un vídeo corto del barista preparando un café, quizá un logotipo animado en la cabecera y un fondo musical suave en la página de eventos. Todo eso —fotos, sonido, vídeo y animación— es "contenido multimedia", y antes de subirlo a la web hay que prepararlo: elegir el formato correcto, comprimirlo sin que se note, asegurarse de que tienes derecho a usarlo y montarlo de forma que cargue rápido en el móvil de un cliente con poca cobertura.

Esta unidad es la más extensa del módulo porque junta cuatro mundos que en el día a día del desarrollo web van siempre pegados: imagen, audio, vídeo y animación. Verás qué es un píxel y por qué una foto de tu móvil pesa 8 MB, qué diferencia hay entre "tener derecho" a usar una imagen y que "no te demanden por usarla", cómo se codifica el sonido y el vídeo en ceros y unos, y cómo se anima hoy en día una web (spoiler: ya no es con Flash).

La unidad se trabaja en dos sesiones. En la primera (UT3-1 a UT3-4) te centras en la imagen: tipos, derechos de autor, software y optimización. En la segunda (UT3-5 a UT3-8) pasas a audio, vídeo y animación. En ambas, el hilo conductor es siempre el mismo: cómo preparar estos archivos para que funcionen bien en una página web real, como la del Café Central.

Qué deberías saber hacer al terminar (resultados de aprendizaje)¶

El resultado de aprendizaje de esta unidad (RA3) dice que debes preparar archivos multimedia para la Web, analizando sus características y manejando herramientas específicas. En cristiano, al terminar la UT3 deberías ser capaz de:

• Reconocer qué puedes y qué no puedes hacer con una imagen, un audio o un vídeo según su licencia, y saber qué son los derechos de autor.
• Identificar qué formato de imagen, audio o vídeo conviene usar según el caso (una foto de producto no es lo mismo que un icono, ni un pódcast es lo mismo que un efecto de sonido).
• Analizar y elegir herramientas para crear, editar y convertir contenido multimedia.
• Tratar digitalmente una imagen (recortar, ajustar, comprimir) con una herramienta real.
• Manipular audio y vídeo: recortar, convertir de formato, ajustar calidad.
• Realizar animaciones sencillas a partir de imágenes fijas.
• Importar y exportar imagen, audio y vídeo en distintos formatos según para qué los vayas a usar.
• Aplicar la guía de estilo del proyecto (por ejemplo, la del Café Central) a todo el contenido multimedia que generes.

1. Tipos de imágenes en la web (UT3-1)¶

Todo empieza por el píxel (de picture element). Un píxel no es un cuadradito con un tamaño fijo: es una relación matemática entre tres cosas: el tamaño físico de una pantalla (en pulgadas), su resolución (en píxeles por pulgada, PPI) y el número de píxeles que caben en ese ancho. La fórmula es sencilla: Píxeles / Pulgadas = PPI. Por ejemplo, una pantalla de 27" con 109 PPI y un ancho real de 23,5 pulgadas tiene 2560 píxeles de ancho. Cuantos más píxeles, más nitidez.

La resolución de imagen es el grado de calidad de una imagen y se mide en ppp (píxeles por pulgada) o dpi (dots per inch): indica la densidad de píxeles. Como referencia, un Samsung S20 captura fotos de hasta 108 megapíxeles, y una impresión de calidad se hace a 300 ppp, mientras que en pantalla basta con 72 ppp.

Profundidad de color y modos de color¶

La profundidad de color es el número de bits que se usan para guardar el color de cada píxel:

Y a partir de ahí, los modos de color son la forma de describir numéricamente ese color:

• Monocromático: solo píxeles blancos o negros puros (1 bit).
• Escala de grises: 256 tonos de gris entre blanco y negro.
• Color indexado: un canal de 8 bits, hasta 256 colores, cada uno apuntando a una paleta.
• RGB: combina Red, Green y Blue, cada uno de 0 a 255 (por ejemplo, 255:0:0 es rojo puro). Es el modo que usan las pantallas.
• HSB/HSV: describe el color por Tono (Hue, 0-360º), Saturación (0-100%) y Brillo (0-100%). Es más intuitivo para una persona que RGB, por eso lo encontrarás en los selectores de color de casi cualquier editor gráfico.
• CMYK: Cyan, Magenta, Yellow y Key (negro), colores sustractivos pensados para impresión (ahorran tinta combinando menos negro puro).

Figura: panel de color en modo HSB de un editor de imagen. El tono se mueve en el círculo cromático (0-360º), la saturación indica pureza de color y el brillo va de negro a blanco. Origen: 1 MULTIMEDIA - Imágenes - Conceptos básicos.pdf.

Figura: el mismo paisaje reducido al modo monocromático (1 bit por píxel): no hay grises, solo blanco o negro, simulados aquí con un patrón de puntos (dithering). Origen: 1 MULTIMEDIA - Imágenes - Conceptos básicos.pdf.

Mapa de bits frente a imagen vectorial¶

Las imágenes digitales son de dos grandes familias:

Dentro de las imágenes vectoriales, el formato estrella de la web es el SVG (Scalable Vector Graphics): un estándar abierto del W3C desde 1999, basado en XML, que puedes abrir y editar con cualquier editor de texto. Un SVG se compone de elementos apilados (rectángulos, círculos, líneas, polígonos, texto y el elemento path, que dibuja formas libres con comandos como M moveto, L lineto o C curveto). Se puede insertar en la web como archivo externo (<img>, <object>, <iframe>, imagen de fondo CSS) o directamente en el HTML:

<svg width="150" height="100" viewBox="0 0 3 2">
  <rect width="1" height="2" x="0" fill="#008d46" />
</svg>

La gran ventaja del SVG "en línea" es que, al ser parte del DOM, se puede manipular con CSS y JavaScript (cambiar color al pasar el ratón, animarlo, etc.). Su desventaja: no sirve para fotografías reales y consume algo de CPU al renderizarse en el navegador.

Ejemplo actual — iconos de interfaz. Casi cualquier icono que ves hoy en una app web (el carrito de la compra, la lupa de búsqueda, el logo de una red social) es un SVG, no una imagen JPG. Herramientas como Figma o Canva exportan directamente a SVG porque es ligero, escalable a cualquier tamaño de pantalla y se puede recolorear con una línea de CSS.

En las noticias — rediseños de marca. Cuando una empresa rediseña su logotipo (por ejemplo, grandes cambios de identidad visual que se han visto en los últimos años en marcas de tecnología y moda), el archivo que se entrega a los equipos de desarrollo web casi siempre es un SVG, precisamente para que se vea nítido igual en un móvil pequeño que en una pantalla de 4K.

Ideas clave de esta sección¶

• El píxel no tiene tamaño fijo: depende de la resolución de la pantalla.
• La profundidad de color (1, 8, 24 o 32 bits) determina cuántos colores puede tener una imagen.
• RGB es el modo de las pantallas; CMYK el de la impresión; HSB el más intuitivo para elegir color a mano.
• Mapa de bits para fotos; vectorial (SVG) para logotipos, iconos y esquemas.

2. Derechos de la propiedad intelectual. Licencias. Ley de la propiedad intelectual. Derechos de autor (UT3-2)¶

Antes de meter una imagen, una canción o un vídeo en la web del Café Central hay que hacerse una pregunta incómoda: ¿tengo derecho a usar esto?

En España, lo que en el mundo anglosajón se llama copyright se recoge bajo el nombre de Ley de Propiedad Intelectual. El Ministerio de Cultura la define como el conjunto de derechos que corresponden a los autores y a otros titulares (artistas, productores, organismos de radiodifusión...) sobre las obras que crean. El texto de referencia es el Real Decreto Legislativo 1/1996, de 12 de abril, que aprobó el Texto Refundido de la Ley de Propiedad Intelectual, reuniendo y armonizando leyes anteriores (entre ellas la Ley 22/1987, de 11 de noviembre, de Propiedad Intelectual) y que fue modificado más adelante por normas como la Ley 23/2006, de 7 de julio, para incorporar una directiva europea sobre derechos de autor en la sociedad de la información. Este texto sigue siendo hoy la referencia legal en España en materia de propiedad intelectual, aunque a lo largo de los años ha recibido nuevas modificaciones.

Un matiz importante: el artículo 35 de la ley permite reproducir libremente obras situadas de forma permanente en la vía pública (una estatua en una plaza, por ejemplo). Por eso puedes fotografiar un monumento y publicar la foto sin pedir permiso al escultor. Ahora bien, si coges la fotografía de otra persona, la retocas y la vuelves a subir como si fuera tuya, ahí sí puedes estar violando los derechos de autor de quien hizo la foto original.

Copyright, copyleft y Creative Commons¶

• Copyright: la obra tiene un dueño y, en principio, hay que pagar (o pedir permiso) para usarla. En España el símbolo (c) se puede anteponer al nombre del titular con el lugar y año de divulgación.
• Copyleft: el autor permite la libre distribución de copias y versiones modificadas, exigiendo que esa misma libertad se mantenga en las versiones derivadas (por ejemplo, la licencia GFDL de GNU). Es la "madre" filosófica de Creative Commons.
• Creative Commons (CC): aquí eres tú, el autor, quien decide qué proteges y qué permites, combinando estos términos:
• Atribución (BY): hay que citar al autor, enlazar la licencia e indicar si se hicieron cambios.
• CompartirIgual (SA): si remezclas o transformas la obra, debes redistribuirla bajo la misma licencia.
• NoComercial (NC): no se puede usar con fines comerciales.
• (También existe SinObraDerivada, ND, que no permite remezclar).

Figura: pictograma oficial de una licencia CC BY-SA. El icono de la persona significa "Atribución" (hay que citar al autor) y la flecha en círculo significa "CompartirIgual" (las obras derivadas deben licenciarse igual). Origen: UD01PPT01 - Licencias.pdf.

Además del copyright, el copyleft y Creative Commons, existen otras figuras: el dominio público (cualquiera puede usar la obra sin restricciones, normalmente porque han pasado muchos años desde la muerte del autor o porque este renunció a sus derechos) y el contenido libre, que engloba tanto obras de dominio público como obras con derechos de autor cuya licencia respeta esas mismas libertades.

Aunque como autor no estás obligado a registrar tu obra para tener derechos sobre ella (la ley te protege desde el momento de la creación), en España existe el Registro General de la Propiedad Intelectual (regulado, entre otras normas, por el Real Decreto 281/2003), donde se puede inscribir una obra como protección adicional frente a terceros.

Ejemplo actual — bancos de imágenes libres. Para la web del Café Central podrías usar fotos de bancos como Unsplash o Pexels (licencias muy permisivas, normalmente sin necesidad ni siquiera de atribución) en lugar de "coger prestada" cualquier foto que aparezca en un buscador de imágenes, algo que sigue siendo una infracción habitual y que puede acabar en un requerimiento de pago por el uso no autorizado de una fotografía.

En las noticias — IA y derechos de autor. En los últimos años se han producido demandas y polémicas (por ejemplo, de agencias de fotografía y de ilustradores) contra empresas de inteligencia artificial generativa por haber entrenado sus modelos con millones de imágenes protegidas por derechos de autor sin permiso ni compensación a los autores. Es un debate todavía abierto sobre cómo aplicar la Ley de Propiedad Intelectual a este tipo de usos masivos de contenido.

Ideas clave de esta sección¶

• En España, "derechos de autor" y "Ley de Propiedad Intelectual" son sinónimos; su texto de referencia es el RDLeg 1/1996.
• El registro de una obra es voluntario: los derechos existen desde que se crea la obra.
• Creative Commons no es "todo gratis": cada icono (BY, SA, NC, ND) añade una condición distinta que hay que respetar.

3. Imágenes. Software para crear y procesar imágenes. Formatos. Conversiones (exportar e importar) (UT3-3)¶

Tipos de software para trabajar con imágenes¶

A la hora de trabajar con recursos gráficos para una web se suelen distinguir varias categorías de software, según la tarea:

• Visualización: programas que solo muestran la imagen (y, como mucho, la giran), sin alterar su contenido.
• Creación: para diseñar recursos gráficos desde cero (iconos, banners, logotipos), muy ligados al dibujo vectorial.
• Edición: para retocar imágenes ya existentes (recortar, ajustar brillo/contraste, clonar, aplicar filtros).
• Conversión: para pasar una imagen de un formato a otro, normalmente aplicando también algo de compresión.

Ejemplo actual — herramientas del día a día. Hoy, en un puesto de desarrollo o diseño web, estas categorías se cubren con programas como GIMP o Krita (edición libre y gratuita), Adobe Photoshop o Affinity Photo (edición profesional de pago), Figma o Canva (creación de recursos gráficos y maquetas), y conversores/optimizadores online como Squoosh (de Google) o CloudConvert para pasar de un formato a otro sin instalar nada. Photoshop, además, incorpora desde hace un par de años funciones de "relleno generativo" con IA para completar o quitar elementos de una foto en segundos.

Formatos de imagen¶

Cada formato de imagen es un compromiso distinto entre calidad, peso y compatibilidad:

Los formatos "clásicos" siguen siendo compatibles con todos los navegadores, pero pesan más que las alternativas modernas:

• WebP: creado en 2010 (tecnología VP8) por la empresa On2 Technologies, comprada después por Google, que le añadió animación y transparencia. Comprime hasta un 26% mejor que PNG sin pérdida, y admite compresión con o sin pérdida en el mismo formato. Es compatible con Chrome, Firefox, Edge, Opera y Safari.
• AVIF: desarrollado por la Alliance for Open Media (AOMedia), usa el códec de vídeo AV1. Ofrece compresión superior a JPEG (hasta un 50% más ligero) sin perder calidad visible, y también admite HDR, alto rango de color y animación. Como contrapartida, no soporta la carga progresiva (hay que descargar el archivo completo antes de mostrarlo).
• JPEG XL: un formato más reciente, con compresión con y sin pérdida, alta profundidad de color y capacidad de "reconstruir" un JPEG original sin pérdida añadida; su soporte en navegadores todavía no es universal.

Por eso, la recomendación práctica de la web moderna es usar el elemento <picture> para ofrecer el formato más eficiente y, si el navegador no lo soporta, caer a uno más compatible:

<picture>
  <source srcset="tostada.avif" type="image/avif" />
  <source srcset="tostada.webp" type="image/webp" />
  <img src="tostada.jpg" alt="Tostada con aguacate del Café Central" width="620" height="420" />
</picture>

Metadatos: EXIF, IPTC y XMP¶

Cuando haces una foto, la cámara no solo guarda los píxeles: también guarda metadatos, información sobre el propio archivo que sirve para clasificar las fotos y proteger el trabajo del autor. Hay tres formatos principales:

• EXIF (Exchangeable Image File Format): desarrollado por la Asociación de Desarrollo de Industrias Electrónicas de Japón (JEIDA). Guarda fecha, hora, ajustes de la cámara (ISO, apertura, distancia focal...) y, a veces, la localización GPS.
• IPTC (Consejo Internacional de Telecomunicaciones de Prensa): guarda autor, datos de contacto, permisos y condiciones de uso. Es el metadato "legal" por excelencia.
• XMP (Extensible Metadata Platform): creado por Adobe, es un formato extensible que puede incluir información de los dos anteriores.

Figura: pestaña "Detalles" de las propiedades de un archivo de imagen en Windows, donde se pueden consultar (y editar) los metadatos EXIF: fabricante y modelo de cámara, apertura, ISO, distancia focal, etc. Origen: 4 MULTIMEDIA - Metadatos.pdf.

Para editar o eliminar metadatos (por ejemplo, para no publicar por error la ubicación GPS de una foto) existen herramientas específicas como ExifTool (Windows/Linux), DigiKam o Gwenview (Linux). En Windows y Linux también puedes ver un resumen básico con el botón derecho sobre el archivo → Propiedades → Detalles.

Ejemplo actual — privacidad y metadatos. Muchas redes sociales (Instagram, X, Facebook) eliminan automáticamente los metadatos EXIF de las fotos que subes, entre otras cosas para proteger la privacidad de la ubicación GPS de quien publica. Es un recordatorio de que los metadatos pueden revelar más información de la que parece a simple vista.

Ideas clave de esta sección¶

• Distingue entre software de visualización, creación, edición y conversión: no todo vale para todo.
• WebP y AVIF son hoy la opción por defecto para fotos en la web; JPEG/PNG quedan como formato de respaldo (fallback) para navegadores antiguos.
• Los metadatos EXIF/IPTC/XMP viajan dentro del archivo de imagen y pueden contener datos sensibles (ubicación, autor).

4. Optimización de imágenes para la web (UT3-4)¶

El peso de una imagen depende de cuatro factores que puedes controlar: dimensiones (ancho x alto en píxeles), resolución, número de colores y formato. Optimizar una imagen para la web consiste en tocar esas cuatro palancas para que ocupe lo mínimo posible sin que se note la pérdida de calidad.

Recomendaciones que se repiten en el material de la unidad:

• Ajusta las dimensiones en un editor gráfico, nunca "a ojo" cambiando el ancho y alto desde el propio HTML/CSS: si subes una imagen de 4000 px de ancho y la muestras a 400 px, el navegador sigue descargando los 4000 px enteros.
• Reduce el número de colores cuando la imagen lo permita (por ejemplo, un logotipo con pocos colores sólidos puede ir perfectamente en PNG de 256 colores).
• Conserva siempre el archivo original (en un formato sin pérdida, como TIFF o PNG) y genera copias adaptadas a la web (JPEG, WebP, AVIF) a partir de él, nunca al revés.
• No copies y pegues una imagen directamente en el editor web: genera archivos de mala calidad y mal optimizados. Usa siempre la opción "Insertar imagen" del IDE o gestor de contenidos.
• Escanea para pantalla a 72 ppp; solo para impresión necesitas 300 ppp.

Compresión con y sin pérdida¶

• Compresión sin pérdida (lossless): elimina información redundante sin descartar ningún dato visual. El método LZW que usa el GIF es un ejemplo: si hay 40 píxeles negros seguidos, en vez de guardar 40 valores guarda un código que significa "40 píxeles negros".
• Compresión con pérdida (lossy): descarta información que el ojo humano apenas percibe. El algoritmo de JPEG, basado en la transformada discreta del coseno, es el ejemplo clásico: cuanto más comprimes, más se nota la pérdida (aparecen los típicos "bloques" en zonas de mucho detalle).

Carga progresiva¶

Para que una página no se quede "en blanco" mientras carga una imagen pesada existen distintas formas de renderizado:

• No entrelazada: la imagen se muestra de arriba a abajo a medida que llegan los datos (típico de JPEG).
• Entrelazado GIF: interpola la imagen en 7 pasadas, mostrando primero una versión borrosa que se va enfocando.
• Entrelazado PNG (algoritmo Adam7): reparte los píxeles en 7 pasadas (primero cada 8 píxeles, luego cada 4, luego cada 2...).
• AVIF, en cambio, no soporta carga progresiva: hay que esperar a que se descargue del todo. Por eso conviene vigilar el peso de los AVIF grandes.

Ejemplo actual — Core Web Vitals. Google usa métricas de rendimiento (las Core Web Vitals, entre ellas el LCP, Largest Contentful Paint) como factor de posicionamiento en buscadores. Una imagen de cabecera mal optimizada es, con diferencia, una de las causas más habituales de que una página suspenda esta métrica, así que optimizar imágenes ya no es solo "estética": afecta directamente al SEO del Café Central.

En las noticias — WordPress y WebP por defecto. En los últimos años, gestores de contenido muy usados como WordPress han ido incorporando la conversión automática de imágenes subidas a formatos modernos (WebP y, más recientemente, AVIF) para aligerar el peso de las páginas sin que la persona que gestiona el sitio tenga que hacer nada de forma manual.

Ideas clave de esta sección¶

• Optimizar = tocar dimensiones, resolución, colores y formato, siempre partiendo del archivo original.
• Sin pérdida para logotipos y capturas; con pérdida para fotografías.
• El peso de las imágenes es uno de los factores que más influye en la velocidad (y el SEO) de una web.

5. Audio: formatos. Conversiones de formatos (exportar e importar) (UT3-5)¶

Qué es el sonido y cómo se digitaliza¶

El sonido son ondas de presión que viajan por el aire. Para poder guardarlo en un ordenador hay que digitalizarlo: convertir esa señal analógica (continua) en una sucesión de ceros y unos. A ese proceso se le llama conversión analógico-digital (ADC) y se basa en el muestreo: tomar el valor de la onda a intervalos regulares de tiempo, según establece el teorema de Nyquist.

Figura: toda señal de sonido se puede descomponer (o construir) como una suma de ondas senoidales simples; aquí, las notas Do y Sol sumadas dan una onda más compleja. Origen: UD01PPT01 - Audio.pdf.

Los parámetros básicos de una señal en el tiempo son:

• Periodo (T): tiempo que tarda en completarse un ciclo, en segundos.
• Frecuencia (f): número de ciclos por segundo, en herzios (Hz); f = 1/T.
• Amplitud: el valor máximo (de pico) o el rango entre el máximo y el mínimo (pico a pico) que alcanza la onda.

Figura: representación de una onda de audio con su ciclo, periodo (T) y amplitud (A) señalados. Origen: UD01PPT01 - Audio.pdf.

Al digitalizar el sonido entran en juego varios conceptos que determinan tanto la calidad como el peso del archivo:

• Tasa o frecuencia de muestreo: cada cuánto se toma una muestra de la señal analógica, en Hz. Valores habituales: CD → 44,1 kHz, DVD → 48 kHz, sistemas telefónicos modernos → 8 kHz. El oído humano capta entre 20 Hz y 20.000 Hz, así que hace falta muestrear a algo más de 40.000 Hz (el doble, según Nyquist) para no perder información audible.
• Resolución o profundidad de bit: número de bits usados para almacenar cada muestra (8 o 16 bits; un CD usa 16 bits, lo que permite 65.536 valores de amplitud distintos).
• Bitrate (velocidad de transmisión): cantidad de bits que ocupa un segundo de audio. Por ejemplo, 3 minutos de MP3 a 128 kbps ocupan unos 2,81 MB.
• CBR/VBR: en CBR (Constant Bit Rate) el bitrate se mantiene fijo durante todo el clip; en VBR (Variable Bit Rate) varía según la complejidad del sonido en cada momento, ahorrando espacio.

Figura: al convertir una señal analógica (la curva roja) a digital, cuantos más bits de resolución se usen (16 bits, en rojo, frente a 3 bits, en azul), más fielmente se reproduce la onda original. Origen: UD01PPT01 - Audio.pdf.

Códecs y formatos de audio¶

Un códec (de codificación/decodificación) es un algoritmo que reduce el tamaño de un archivo de audio o vídeo. Los formatos más relevantes:

Figura: comparativa de formatos de audio (WAV, MP3, OGG, FLAC, MIDI, AAC, WebM/Opus, AIFF, AMR) con su tasa de bits típica, calidad y soporte en navegadores. Origen: UD01PPT01 - Audio.pdf.

Dentro de los códecs de audio recomendados para la web actual destaca Opus, dentro del contenedor WebM: alta calidad, baja latencia, ideal tanto para voz como para música, y compatible con Chrome, Firefox, Edge y Opera.

Optimizar y etiquetar audio en HTML¶

Para aligerar un archivo de audio se puede bajar la tasa de muestreo, reducir la resolución en bits, usar un fragmento en bucle (loop) en vez de un audio largo, pasar de estéreo a mono (apenas se nota en muchos casos) y elegir un formato comprimido (MP3 u OGG) en vez de WAV.

En HTML, el audio se inserta con la etiqueta <audio>, que admite varias fuentes para que el navegador use la primera que soporte:

<audio controls>
  <source src="cafe-ambiente.ogg" type="audio/ogg">
  <source src="cafe-ambiente.mp3" type="audio/mpeg">
  Tu navegador no soporta el elemento de audio.
</audio>

Por accesibilidad, cualquier audio con contenido hablado debería ir acompañado de una transcripción textual, y si es un vídeo, de subtítulos (captions).

Ejemplo actual — códecs que usas sin saberlo. Cuando envías una nota de voz por WhatsApp, se está codificando con el códec Opus (el mismo que recomienda el material de esta unidad para la web) porque comprime muy bien la voz con muy poca latencia. Spotify, por su parte, usa principalmente Ogg Vorbis y AAC para el streaming de música.

En las noticias — audio sin pérdida en streaming. Varias plataformas de música en streaming han ido añadiendo, en los últimos años, opciones de calidad "sin pérdida" (formatos tipo FLAC) para quien tenga una suscripción premium y quiera exprimir sus auriculares de alta gama, frente al audio comprimido con pérdida que se usaba históricamente para ahorrar datos móviles.

Ideas clave de esta sección¶

• Digitalizar sonido = muestrear (tasa de muestreo) + cuantizar (resolución en bits).
• MP3 y AAC (con pérdida) para publicar en la web; WAV o FLAC (sin pérdida) para guardar el original.
• La etiqueta <audio> con varias <source> asegura compatibilidad entre navegadores.

6. Vídeo: codificación de vídeo, conversiones de formatos (exportar e importar) (UT3-6)¶

Cómo se captura un vídeo¶

Una cámara de vídeo convierte luz en información digital siguiendo un proceso con varias etapas: la luz entra por el objetivo (el conjunto de lentes que enfoca la imagen), atraviesa un filtro RGB que separa la luz en sus componentes rojo, verde y azul, llega a un sensor (normalmente CCD o CMOS, que asigna un valor a cada píxel) y finalmente pasa por un ADC (conversor analógico-digital) que genera los dígitos binarios que se guardan en memoria.

Figura: de la escena real a los datos binarios guardados en la tarjeta de memoria, pasando por el objetivo, el filtro RGB y el conversor ADC. Origen: UD01PPT02 - Video.pdf.

Los sensores más habituales son el CCD (charged coupled device, un único sensor que asigna valores binarios a cada píxel) y el CMOS, con transistores en cada fotodiodo que permiten procesar la carga directamente y consumir menos energía (por eso predomina en móviles). Para captar el color, la mayoría de sensores usan un patrón llamado filtro Bayer, que reparte fotositos sensibles a rojo, verde y azul (con el doble de verdes, porque el ojo humano es más sensible a ese color) sobre la superficie del sensor.

Figura: corte de una cámara réplex donde se aprecian las lentes del objetivo y, al fondo, el sensor de imagen a color. Origen: UD01PPT02 - Video.pdf.

Figura: patrón de mosaico del filtro Bayer (con el doble de fotositos verdes que de rojos o azules) y la eficiencia cuántica de cada color según la longitud de onda. Origen: UD01PPT02 - Video.pdf.

Parámetros que definen (y reducen) el peso de un vídeo¶

• Fotogramas por segundo (fps): a partir de 24 fps el ojo humano percibe movimiento fluido. El cine usa tradicionalmente 24 fps; la televisión, 25 fps en el sistema PAL/SECAM (Europa) y unos 23,976 fps en NTSC (América); hay usos más especializados a 48p (más realista, usado en películas como Avatar o El Hobbit), 90p (realidad virtual), 144-240 fps (monitores de videojuegos) o incluso 300 fps (retransmisiones deportivas). Para la web, bastan 24-30 fps, y en animaciones sencillas se puede bajar a 16-20 fps.

Figura: cuantos más fotogramas por segundo, más "fotogramas" hay que almacenar (y descargar) para el mismo segundo de vídeo. Origen: UD01PPT02 - Video.pdf.

• Dimensiones del fotograma: cuanto más pequeño el ancho x alto en píxeles, menos pesa el archivo.
• Relación de aspecto: proporción entre ancho y alto; las más habituales son 4:3 (formato de TV clásico, hasta aproximadamente 2009) y 16:9 (panorámico, el estándar actual).
• Progresivo (p) frente a entrelazado (i): el progresivo muestra todas las líneas del fotograma de una vez; el entrelazado hace dos pasadas (líneas impares y luego pares), una técnica heredada de la televisión analógica.
• Bitrate: igual que en audio, puede ser CBR (constante) o VBR (variable, ahorrando bits en escenas sencillas).

Códec frente a contenedor¶

Es habitual confundir estos dos términos, pero son cosas distintas:

• Códec: el algoritmo que comprime (y descomprime) los datos de vídeo o audio. Ejemplos: DivX, XviD, H.264 (MPEG-4 AVC), HEVC.
• Contenedor: el "paquete" que agrupa vídeo, audio, subtítulos, capítulos, metadatos... Ejemplos: AVI, Matroska (MKV), MP4, MOV.

Un mismo contenedor (por ejemplo, MP4) puede llevar dentro distintos códecs de vídeo y audio, siempre que el reproductor los soporte.

Formatos de vídeo más relevantes¶

El formato FLV (Flash Video) y el reproductor Adobe Flash Player fueron durante años la forma más habitual de ver vídeo en la web (lo verás mencionado en los PDF más antiguos de esta unidad, de hacia 2012, que recogen el anuncio de Adobe en noviembre de 2011 de abandonar Flash en móviles). Hoy son tecnología obsoleta y todos los navegadores modernos lo tienen bloqueado o desinstalado (Adobe retiró Flash Player por completo años después; dato de cultura general, no de los PDF de esta unidad). El vídeo web actual se basa en HTML5 y contenedores como MP4 o WebM.

Vídeo en HTML5¶

La etiqueta <video> funciona igual que <audio>, admitiendo varias fuentes:

<video width="320" height="240" controls preload="metadata">
  <source src="cafe-central.mp4" type="video/mp4">
  <source src="cafe-central.webm" type="video/webm">
  Tu navegador no soporta el elemento de vídeo.
</video>

Algunos atributos y elementos importantes:

• autoplay y muted: se recomienda no usar autoplay por ser invasivo; si se usa, debe combinarse con muted para no sobresaltar al usuario con sonido inesperado.
• preload: indica si el navegador debe precargar el vídeo entero (auto), solo sus metadatos (metadata) o nada (none).
• <track>: permite añadir subtítulos siguiendo el formato WebVTT, clave para accesibilidad:

<video controls src="cafe-central.mp4">
  <track default kind="captions" srclang="es" src="cafe-central-es.vtt" />
</video>

Para transmitir vídeo en tiempo real desde JavaScript existe la especificación W3C Media Source Extensions (MSE), que permite enviar flujos de datos directamente a los códecs del navegador (soportada por Chrome, Safari, Edge y Opera), la base técnica de buena parte del streaming moderno.

Como herramienta de conversión y edición de vídeo destaca FFmpeg, un proyecto de código abierto capaz de decodificar, codificar, transcodificar, mezclar (mux/demux), filtrar y reproducir prácticamente cualquier formato multimedia, con muchas interfaces gráficas construidas encima. Para uso más sencillo y directo desde el navegador existe Clipchamp.

Ejemplo actual — el códec AV1. Plataformas como YouTube llevan varios años desplegando el códec AV1 (desarrollado por la Alliance for Open Media, el mismo consorcio detrás de AVIF) para sus vídeos, porque ofrece mejor compresión que H.264 o incluso que VP9 a igualdad de calidad, lo que ahorra un volumen enorme de ancho de banda cuando hablamos de miles de millones de reproducciones diarias.

En las noticias — vídeo vertical. El auge de formatos como TikTok, Instagram Reels o YouTube Shorts ha popularizado el vídeo vertical (relación de aspecto 9:16) codificado casi siempre en MP4 con H.264, pensado para descargarse y reproducirse rápido en redes móviles, aplicando exactamente los mismos principios de esta unidad: pocos fps si no hacen falta, bitrate ajustado y un contenedor ligero.

Ideas clave de esta sección¶

• Códec (comprime) y contenedor (empaqueta) son conceptos distintos.
• MP4 (H.264) y WebM son hoy los formatos de referencia para vídeo en la web; AVI y FLV han quedado obsoletos para ese uso.
• <video> + <track> (WebVTT) es la forma estándar de mostrar vídeo accesible en HTML5.

7. Animaciones (UT3-7)¶

Animar es dar sensación de movimiento a un elemento web: una imagen, un texto, un botón... Pero animar no significa necesariamente desplazar algo de un lado a otro: también se considera animación cambiar color, iluminación o tamaño de forma progresiva.

Antes de animar nada conviene hacerse una pregunta: ¿por qué quiero usar esta animación? Usada con criterio, una animación puede evitar que el usuario abandone la página, causar una buena primera impresión, guiar la mirada hacia donde interesa, comunicar un cambio de estado (por ejemplo, que algo se está cargando) o simplemente hacer la web más fluida y profesional. Usada mal, puede despistar, cansar visualmente, consumir muchos recursos, ralentizar la carga, verse mal en móvil y hasta penalizar el SEO.

Cómo se anima hoy en la web¶

El material de la unidad es claro sobre esto, con una advertencia que ya tiene valor histórico: "Flash: ¡¡¡Ni se os ocurra!!! → En decadencia, penaliza el SEO, consume mucho". Flash fue, durante los años 2000, la tecnología dominante para animar la web (con su propio formato, SWF, y sus fotogramas clave gestionados a mano en una línea de tiempo), pero Adobe anunció en 2011 el abandono de Flash para móviles (dato del PDF) y, años después, retiró definitivamente el soporte de Flash Player (dato de cultura general, no de los PDF de esta unidad). Hoy, para animar en la web se usan estas vías:

1. HTML5 + CSS3: transformaciones, transiciones y animaciones (lo vemos abajo con detalle).
2. JavaScript / jQuery, manipulando propiedades de elementos o dibujando en el elemento <canvas> de HTML5.
3. Imágenes animadas: no solo el clásico GIF, también APNG (PNG animado, con más colores y mejor calidad que GIF) y WebP animado.
4. Librerías de animación (para no "reinventar la rueda" cada vez), comprobando siempre que lo que se use esté soportado por los navegadores objetivo.

Transformaciones, transiciones y animaciones CSS¶

En CSS3 conviene distinguir tres conceptos que se confunden con frecuencia:

• Transformación (transform): cambia algo (lo rota, escala, desplaza o deforma), pero no implica por sí sola animación: puede aplicarse y aparecer directamente el resultado final.

.logo-cafe {
  transform: rotate(20deg);
}

• Transición (transition): el elemento pasa de un estado a otro de forma suave. Solo hace falta indicar el estado inicial, el final y la "curva de tiempo"; el navegador calcula los pasos intermedios. Es perfecta para cosas sencillas, como el efecto hover de un botón.

.boton-reservar {
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.boton-reservar:hover {
  background-color: #6f4e37;
  transform: scale(1.05);
}

• Animación (animation + @keyframes): permite definir, además del estado inicial y final, tantos estados intermedios como se quiera. Es la opción más potente, útil cuando la animación debe empezar sola al cargar la página o cuando es más compleja que ir de un punto A a un punto B.

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from { left: 0px; }
  to   { left: 200px; }
}

Curiosamente, el concepto de fotograma clave (keyframe) que usaban programas de animación como Flash —marcar unos pocos "puntos clave" y dejar que el programa calcule los pasos intermedios— es exactamente la misma idea que hay detrás de la regla CSS @keyframes: solo ha cambiado la herramienta, no el concepto.

Figura: ejemplo de transformación CSS (transform: rotate()), muy usada para dar un efecto tipo "postal" o tarjeta ladeada a las imágenes de una galería web. Origen: MULTIMEDIA - Animacion WEB.pdf.

Animar imágenes vectoriales (SVG)¶

El SVG tiene su propio sistema de animación, heredado de una extensión llamada SMIL (Synchronized Multimedia Integration Language), que permite animar atributos numéricos, transformaciones (traslación, rotación) o hacer que un elemento siga un camino de movimiento, usando la etiqueta <animate>:

<svg width="300" height="100">
  <circle cx="0" cy="50" r="15" fill="blue">
    <animate attributeName="cx" from="0" to="500" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

Ejemplo actual — CSS-only en vez de vídeo. Muchas páginas de producto actuales (por ejemplo, las de presentación de productos de grandes marcas tecnológicas) usan animaciones CSS ligadas al scroll en vez de vídeos pesados: el usuario ve elementos que aparecen, rotan o cambian de tamaño según baja por la página, todo con HTML y CSS, sin descargar ni un solo fotograma de vídeo.

En las noticias — el declive del GIF. Aunque el GIF sigue siendo muy popular en redes sociales y aplicaciones de mensajería para memes y reacciones, cada vez más servicios lo sustituyen internamente por vídeos MP4 cortos en bucle o por WebP animado, porque pesan mucho menos para la misma animación y se ven con más colores.

Ideas clave de esta sección¶

• transform cambia, transition anima entre dos estados, animation + @keyframes anima con varios estados intermedios.
• Flash es historia: la animación web actual se hace con CSS3, JavaScript/Canvas, SVG (SMIL) o imágenes animadas modernas (APNG, WebP).
• Toda animación debe justificar su uso: si no aporta nada, sobra.

8. Integración de audio y vídeo en una animación (UT3-8)¶

Este es el contenido con menos desarrollo directo en los PDF de la unidad: el único material que trata específicamente la integración de audio y vídeo dentro de una animación (DIW07.pdf) lo explica sobre Adobe Flash, una tecnología hoy obsoleta, así que aquí se adapta la idea a las tecnologías actuales en lugar de repetir pasos de un programa que ya no se usa.

La idea de fondo, eso sí, sigue siendo válida: cuando metes sonido o vídeo dentro de una animación, el problema principal es la sincronización. El material antiguo distinguía varios tipos de sincronismo (por ejemplo, que un sonido se reproduzca automáticamente al llegar a un punto de la animación, que no se solape consigo mismo si la animación se repite en bucle, o que se descargue troceado y sincronizado con los fotogramas para animaciones largas). Esos mismos problemas —evitar solapamientos, no bloquear la animación mientras se descarga el audio, saber exactamente cuándo debe sonar algo— siguen existiendo hoy, solo que se resuelven con otras herramientas:

• HTML5 <video> y <audio> como parte de la animación: en vez de "incrustar" el vídeo dentro del fotograma de un programa de animación, hoy el vídeo o el audio es un elemento más de la página, que se puede posicionar, mostrar u ocultar con CSS y sincronizar con el resto de la animación mediante eventos de JavaScript como play, pause, timeupdate o ended.
• CSS animation/transition disparadas por el propio vídeo o audio: por ejemplo, se puede lanzar una animación CSS justo cuando el vídeo empieza a reproducirse (evento play), o hacer que un texto aparezca sincronizado con un punto concreto del audio usando currentTime en JavaScript.

Ejemplo actual — herramientas de animación de hoy (no aparecen en los PDF de la unidad):

• Web Animations API: una API nativa del navegador (sin necesidad de librerías externas) que permite crear y controlar animaciones desde JavaScript con la misma precisión temporal que necesitarías para sincronizarlas con un vídeo o un audio.
• Herramientas de autor especializadas: el sucesor directo de Flash es Adobe Animate, que exporta las animaciones a HTML5 Canvas o WebGL en vez de a SWF. Para animaciones más complejas creadas en After Effects, es habitual exportarlas como Lottie (formato JSON basado en vectores, ligero y con buen soporte de sincronización de audio mediante JavaScript), muy usado en aplicaciones móviles y web.
• Librerías de animación con línea de tiempo, como GSAP, que permiten crear una auténtica "línea de tiempo" (muy parecida en concepto a la de Flash) donde se pueden encadenar animaciones CSS, cambios de estado y la reproducción de audio o vídeo en puntos exactos.

Ejemplo actual — vídeo con bucle y audio sincronizado. Spotify incorpora en las fichas de algunas canciones un "Canvas": un vídeo corto en bucle (sin controles visibles) que se reproduce sincronizado con el audio de la canción mientras suena, un caso muy directo de integración de vídeo y audio en una misma pieza multimedia pensada para verse en el móvil.

En las noticias — stickers animados. Aplicaciones de mensajería han popularizado los "stickers" animados con sonido corto asociado (por ejemplo, en aplicaciones de mensajería muy usadas en Asia y que han ido ganando terreno en otros mercados), normalmente montados como animaciones ligeras (APNG o vídeo corto) con un archivo de audio disparado por JavaScript al mostrarse, exactamente el mismo problema de sincronización que ya planteaba Flash hace más de diez años, resuelto con tecnología web moderna.

Ideas clave de esta sección¶

• El contenido concreto de los PDF de la unidad sobre este punto está basado en Flash y hoy es obsoleto: se mantiene el concepto (sincronizar audio/vídeo con una animación) pero no la herramienta.
• Hoy esa sincronización se resuelve combinando <video>/<audio> de HTML5 con CSS (animation/transition) y JavaScript (eventos del propio vídeo/audio, Web Animations API).
• Para proyectos más ambiciosos existen herramientas de autor modernas (Adobe Animate, Lottie, GSAP) que heredan la lógica de "línea de tiempo" de Flash pero exportan a tecnologías web estándar.

Glosario rápido¶

Repaso: preguntas para autoevaluarte¶

1. ¿Qué relación matemática define un píxel y qué unidad se usa para medir la densidad de píxeles de una pantalla?
2. ¿Qué diferencia hay entre una imagen de mapa de bits y una imagen vectorial en cuanto al zoom y al peso del archivo?
3. ¿Qué ley española regula los derechos de autor y qué norma la aprobó?
4. ¿Qué significan las siglas BY, SA y NC en una licencia Creative Commons?
5. ¿Qué diferencia hay entre WebP y AVIF en cuanto a compresión y a soporte de carga progresiva?
6. ¿Qué son la tasa de muestreo y la resolución (en bits) de un audio, y cómo afectan al peso del archivo?
7. ¿Qué diferencia hay entre un códec y un contenedor de vídeo? Pon un ejemplo de cada uno.
8. ¿Qué diferencia hay, en CSS, entre transform, transition y animation?
9. ¿Por qué se dice que Flash es una tecnología obsoleta para animar la web hoy en día?
10. ¿Qué elemento y atributo HTML5 se usan para añadir subtítulos a un vídeo, y en qué formato deben ir esos subtítulos?

De dónde sale esto (fuentes de la carpeta)¶

• 1 MULTIMEDIA - Imágenes - Conceptos básicos.pdf — píxel, resolución, profundidad de color y modos de color (monocromático, escala de grises, indexado, RGB, HSB, CMYK).
• 2 MULTIMEDIA - Imágenes - Formatos.pdf — formatos clásicos (BMP, GIF, JPG, TIFF, PNG), optimización básica, formatos modernos (WebP, AVIF, JPEG XR, BPG, HEIF) y renderizado progresivo.
• 4 MULTIMEDIA - Metadatos.pdf — metadatos EXIF, IPTC y XMP, su visualización y edición.
• UD01PPT01 - Licencias.pdf — copyright, copyleft y licencias Creative Commons (BY, SA, NC).
• DIW05.pdf — imagen digital, tabla comparativa mapa de bits/vectorial, tabla de formatos de imagen por programa, software de visualización/creación/edición/conversión, ley de propiedad intelectual y derechos de autor en detalle, registro de contenido. Es de hacia 2012 (menciona software y contextos de la época); se ha usado para la parte legal y conceptual, no para las recomendaciones de software concretas.
• MULTIMEDIA - Imagenes vectoriales.pdf — SVG en profundidad: estructura, etiquetas, filtros, modularización (symbol/use) y animación SMIL.
• WEB - MDN - Tipos y formatos de imagen.pdf — tabla actualizada de formatos de imagen soportados en navegadores (APNG, AVIF, GIF, JPEG, JPEG XL, PNG, SVG, WebP, BMP, ICO, TIFF), sus MIME types y recomendaciones de uso del elemento <picture>.
• UD01PPT01 - Audio.pdf — parámetros del sonido, ADC, tasa de muestreo, resolución, bitrate, códecs de audio (WAV, MP3, OGG, MIDI, FLAC, WebM/Opus), optimización y etiqueta <audio>.
• UD01DOC01 - Audio.pdf — formatos de sonido en detalle (Ogg, MP3, RA, WMA, AAC, WAV, AIFF, MIDI), formatos contenedor (Matroska, ASF, MP4, MOV, AVI, OGM) y conversión e importación/exportación de audio.
• UD01PPT02 - Video.pdf — captura de imágenes (objetivo, sensores CCD/CMOS, filtro Bayer, ADC), parámetros para reducir el peso del vídeo (fps, dimensiones, relación de aspecto, bitrate), diferencia códec/contenedor, formatos de vídeo, etiquetas HTML5 <video>/<track>, CSS para vídeo responsive, Media Source Extensions y herramientas (FFmpeg, Clipchamp).
• UD01DOC01 - Video.pdf — conceptos básicos de vídeo digital, uso de vídeo en la web, formatos (Realvideo, Matroska, OGG, MOV, MPEG-4, Flashvídeo, WMV, WebM) y edición y montaje. Es de hacia 2012 (usa software y el complemento de Windows Media Player como ejemplo); se ha priorizado para conceptos generales, no para el software concreto.
• MULTIMEDIA - Animacion WEB.pdf — qué es una animación, cuándo usarla, transformaciones, transiciones y animaciones CSS3 (transform, transition, animation/@keyframes).
• DIW07.pdf — animaciones con Adobe Flash (herramientas, fotogramas clave, capas, interpolación, integración de audio y vídeo). Es de 2012 y trata una tecnología (Flash) hoy obsoleta; se ha usado solo como contexto histórico y como base conceptual para explicar, ya con tecnologías actuales, la integración de audio y vídeo en una animación (sección 8).

Avisos sobre las fuentes¶

• DIW05.pdf y DIW07.pdf son de hacia 2012 y mencionan software y tecnologías (Adobe Flash, programas como AVS Video/Audio/Image, complementos de Windows Media Player) que hoy están obsoletos o en desuso. Se han mantenido como contexto histórico y para la parte legal (que no ha cambiado tanto), pero los ejemplos de software y las animaciones se han actualizado a tecnologías actuales (CSS3, SVG, APNG/WebP, HTML5) siguiendo el resto de fuentes de la carpeta y el criterio de esta guía.
• El contenido UT3-8 (Integración de audio y vídeo en una animación) apenas tiene desarrollo propio en los PDF más allá del capítulo de Flash de DIW07.pdf; el apartado 8 de este resumen lo señala explícitamente y traslada el concepto a las tecnologías web actuales.
• Un dato de UD01PPT01 - Audio.pdf (la tasa de muestreo de "2,05 kHz" para "MP3, voz sin calidad, radio AM") se ha mantenido tal cual aparece en la fuente porque no se ha podido contrastar con otro documento de la carpeta; conviene verificarlo en clase si se usa como dato de examen.