Ediciones ENI Editorial | líder en informática
El contenido multimedia
Objetivos
En muchos sitios web, los contenidos multimedia ocupan un lugar cada vez más importante. Estas imágenes, estos medios, deben elegirse con cuidado y optimizarse al máximo para que se carguen con rapidez en todos los dispositivos actuales: pantallas de ordenador, de tableta y de teléfono inteligente. En las páginas web, las imágenes se consideran contenidos «incrustados», ya que no están descritas directamente dentro del contenido del archivo HTML. Los archivos de imagen suelen colocarse en una carpeta específica dentro del sitio web y se insertan en la página HTML indicando su ruta de acceso.
Hoy en día, resulta habitual insertar vídeo y audio en las páginas web. El cambio respecto a los métodos antiguos, que utilizaban plug-ins propietarios, se produjo con la llegada de HTML5. Este último introdujo los nuevos elementos audio y video, actualmente reconocidos por todos los navegadores.
Las imágenes y los formatos
Actualmente, existen tres formatos principales de compresión de imágenes: GIF, JPEG y PNG. Esta compresión se realiza con programas específicos, tras aplicar tratamientos para retocar las fotos.
El formato GIF, de Graphics Interchange Format, es un formato de compresión de imágenes creado en 1987 por Compuserve y no es completamente libre. Su extensión es .gif. Con este formato, las imágenes utilizan un máximo de 256 colores y solo permiten un nivel de transparencia. Por lo tanto, los píxeles son opacos o transparentes, lo que implica «efectos de escalera» muy antiestéticos en los bordes. Si la imagen inicial tiene menos de 256 colores, este formato no es destructivo; si hay más de 256, la compresión es destructiva. Por lo tanto, el formato GIF está reservado para imágenes pequeñas, como iconos, botones, logotipos, con grandes áreas de color uniforme.
El formato JPEG, de Joint Photographic Experts Group, es un formato que se estandarizó en 1991 y se publicó en 1992. Su extensión habitual es .jpg, más raramente .jpeg. Las imágenes comprimidas en este formato pueden conservar millones de colores, pero no admiten transparencia. Tenga en cuenta que este es un formato de compresión destructivo que causa una destrucción irreversible de colores y matices en la imagen....
Las imágenes con el elemento <img>
1. El atributo scr
El elemento <img> se utiliza para insertar imágenes ilustrativas directamente relacionadas con el contenido textual. El primer atributo requerido es src. Este atributo se utiliza para especificar la ruta de acceso a la imagen que debe mostrarse. La ruta de acceso suele indicarse en relación con la página que contiene el elemento <img>. He aquí algunos ejemplos:
-
<img src="mi-imagen.png">: la imagen se encuentra en la misma carpeta que la página HTML.
-
<img src="imagenes/mi-imagen.png">: la imagen se encuentra en una subcarpeta llamada imagenes, ubicada dentro de la carpeta que contiene la página HTML.
-
<img src=".. /mi-imagen.png">: la imagen se encuentra en la carpeta padre de aquella que contiene la página HTML.
También es posible mostrar una imagen que ya ha sido publicada en la Web, indicando una ruta absoluta: <img src="http://www.mi-sitio.org/imagenes/mi-imagen.png">. Esta solución debe usarse con precaución: debe estar seguro de los derechos de autor y tener en cuenta que la imagen podría ser eliminada del sitio en el que se encuentra.
2. El atributo alt
El atributo alt sirve para indicar un texto alternativo a la imagen, que se mostrará si esta no puede cargarse. También es esencial para que la imagen sea accesible...
Las ilustraciones con el elemento <figure>
1. El elemento <figure>
Las imágenes permiten ilustrar directamente un contenido y ambos están íntimamente relacionados. Las ilustraciones pueden tener sentido por sí solas y no se necesita un texto redactado para comprenderlas. Esta es la principal diferencia semántica entre el uso de una imagen y de una ilustración.
El elemento <figure> permite insertar una ilustración en una página web. Este elemento tiene una etiqueta de apertura y una etiqueta de cierre.
<figure>
...
</figure> 2. El elemento <figcaption>
El elemento <figcaption> permite mostrar una leyenda para la ilustración. Este elemento se coloca en cualquier lugar del elemento <figura>.
He aquí un ejemplo sencillo de cómo usar estos dos elementos, con tres imágenes:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
</head>
<body>
<h1>El Gran Canal de Venecia</h1>
<p>Lorem ipsum dolor...</p>
<figure>
<img src="gran-canal-01.jpg" alt="El Gran Canal atraviesa toda...Multimedia, formatos y códecs
Los archivos multimedia de audio y vídeo sin procesar no están adaptados para su distribución a través de Internet. Es necesario comprimirlos previamente con un códec y publicarlos en un formato reconocido por los navegadores. Sin entrar en consideraciones demasiado técnicas sobre el contenido multimedia, aquí tiene algunos puntos sobre la compresión y la difusión multimedia.
Para comprimir un archivo, hay que usar un códec. Este acrónimo significa Coder-Decoder. Es importante saber que existen numerosos códecs multimedia: VP9, MP3, AAC, H.265… Después, para poder distribuir estos archivos comprimidos, es necesario «empaquetarlos» en un formato de transporte. Entre estos, podemos citar .ogg, .mp4 y .webm.
En lo que respecta a la difusión, se recomienda utilizar un formato de código abierto y gratuito. Existen varias soluciones disponibles:
-
Mozilla, Opera y Google usan los códecs Theora y Vorbis, y .ogg para el formato de difusión.
-
Apple y Microsoft usan los códecs H.264 y MP4, y .mp4 para el formato.
-
Google ofrece los códecs VP8 y Vorbis, y .webm para el formato. Estas soluciones son de código abierto y gratuitas.
Desde esta URL: https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats, puede acceder a información técnica sobre códecs y formatos de difusión....
El vídeo
1. El elemento <video>
El elemento <video> permite insertar un archivo de vídeo en sus páginas web:
<video>
...
</video> En el elemento <video>, el atributo src especifica la ruta de acceso al origen del archivo de vídeo que se va a utilizar.
<video src="venecia.mp4"></video> Al visualizar la página web, solo se muestra el primer fotograma del vídeo. Por el momento, con este código, no hay forma de usar el vídeo.
2. Los controles
Ahora, es necesario permitir que el vídeo se reproduzca. Para ello, basta con añadir el atributo booleano autoplay al elemento <video>:
<video src="venecia.mp4" autoplay></video> Este atributo hace que el vídeo se reproduzca automáticamente al cargar la página. Sin embargo, el visitante no tendrá forma de controlar la reproducción.
Para ofrecer controles al usuario, conviene usar el atributo booleano controls:
<video src="venecia.mp4" controls></video> En este caso, cada navegador tendrá que mostrar controles, botones de gestión de vídeo, según su propia interfaz.
He aquí la visualización obtenida con Google Chrome:
3. El vídeo precargado
Dado que los vídeos suelen ser archivos bastante pesados, es mejor precargarlos antes de que el usuario los reproduzca....
El audio
La inserción de un archivo de audio es muy similar a lo que se ha visto para el vídeo. El elemento que debe utilizarse es <audio>, y el atributo src indica qué archivo utilizar. Debe agregar el atributo controls para mostrar los botones de control de audio. También están disponibles los atributos autoplay, loop y preload.
<audio src="musica.mp3" controls preload autoplay loop></audio> Esta es la visualización que se obtiene en Google Chrome:
Al igual que antes, es posible ofrecer varias fuentes, con diferentes formatos de difusión:
<audio controls>
<source src="musica.mp3">
<source src="musica.webm">
</audio>