6. Integración de Contenido Multimedia¶
En este tema aprenderemos a:
Integrar contenido multimedia en nuestra página web
Usar un reproductor de video/audio integrado (sin librerías externas)
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
6.1. Imágenes en HTML¶
Video Clase
Elemento img
No tiene descendientes (puede no cerrar su etiqueta)
Atributo src:
Origen de la imagen (url path)
Hotlinking (con atención):
Usar url externos sin permiso
Habitual en hipertexto
Los formatos aceptados (Formatos de Imagen) dependen del agente (UA)
Atributo alt : descripción textual de la imagen (opcional pero mejor incluirlo)
<img class="fit-picture" src="/media/cc0-images/grapefruit-slice-332-332.jpg" alt="Grapefruit slice atop a pile of other slices">
Visualización de la imagen
Mejor usar CSS para adaptar su comportamiento (concepto de viewport )
Problema de la adaptación y flexibilidad: Responsive Images
Art Direction problem: qué parte de la imagen ver en diferentes escenarios
Elemento picture : diferentes orígenes según el medio (media queries)
Resolution switching problem: qué resolución es adecuada para un escenario concreto
Uso del atributo srcset y sizes
<picture> <source srcset="photo.avif" type="image/avif" /> <source srcset="photo.webp" type="image/webp" /> <img src="photo.jpg" alt="photo" /> </picture> <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" /> <img src="mdn-logo-narrow.png" alt="MDN" /> </picture> <picture> <source srcset="logo-768.png, logo-768-1.5x.png 1.5x" /> <img src="logo-320.png" alt="logo" /> </picture>
Añadir títulos a una imagen:
Se usa un contenedor de bloque específico (div) a medida
Como es algo común, puede usarse el elemento figure con dos elementos hijo:
Definir el elemento a titular (una imagen, pero puede ser un texto)
Añadirle un título figcaption
<figure> <img src="favicon-192x192.png" alt="The beautiful MDN logo." /> <figcaption>MDN Logo</figcaption> </figure> <figure> <figcaption><b>Edsger Dijkstra:</b></figcaption> <blockquote> If debugging is the process of removing software bugs, then programming must be the process of putting them in. </blockquote> </figure>
Accesibilidad.
¿Cómo se ve tu sitio web si no se ven las imágenes (o cualquier recurso multimedia)? Debería ser funcional
Lo que puede ocurrir:
Errores en la carga del recurso. Por ejemplo algún problema en el origen o en el formato de imagen
Hay usuarios especiales (UA específicos): p.ej. personas ciegas o navegadores sólo texto
Necesitas que sepan qué publicas (técnicas SEO)
T06-A01. Usando Imágenes en HTML
Crear una página web que tenga texto y tres imágenes basadas en la imagen del día en la wikipedia (Picture of the Day ):
La primera en formato jpg, con un ancho fijo de 800 x 600 y un texto descriptivo que diga «Imagen 800x600». Además, pertenecerá a la clase «general»
La segunda imagen, mostrará al agente de usuario tres alternativas de formato (webp, jpg y png) y añadirá el título «Revisa el formato de la imagen»
La tercera imagen, en realidad seleccionará una de entre tres alternativas, según la pantalla (supongamos un criterio por el ancho de pantalla)
Pantalla Pequeña: ancho máximo 350 px
Pantalla Media: anchos entre 351 y 1024
Pantalla Grande: mayor de 1.024 px
6.2. Uso de SVG¶
Video Clase
SVG es un formato vectorial en un contenedor XML estándar:
Tamaño reducido (generalmente)
Que no pierde calidad al aumentar tamaño (ejemplo MDN )
Pero que se vuelve poco manejable en algunos casos
No es específico para desarrollo web (se usa en diseño gráfico también)
SVG es un elemento del DOM svg que:
Contiene elementos que soporta diferentes formas básicas (líneas, círculos, rectángulos, texto …)
Que construyen el resultado definitivo a partir de instrucciones (hay que renderizar el XML)
Muy útil para imágenes fáciles de definir (p.ej. iconos o diagramas)
<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg>
Usar SVG (svg_intro)
Inclusión sencilla -> svg_inhtml
Formas Básicas:
rectángulos (svg_rect)
círculos (svg_circle )
líneas (svg_line)
texto (svg_text)
y … más.
Rutas: líneas (svg_path)
Modificación Aspecto Gráfico: con atributos de presentación (SVG Presentation Attributes )
Y permite efectos más complejos (filtros). La referencia es muy completa (svg_reference)
Además existe un SVG DOM API
T06-A02. Usando SVG para crear imágenes (básicas)
Crea una página web con estos diez gráficos SVG. Añado al principio el tamaño de la imagen.
200x200 px. Crea un círculo de radio 20 pixels, en la posición 100,100 (X,Y)
200x200 px. Crea un círculo como el anterior, pero con un relleno rojo y línea (el círculo) verde. La línea que sea bien ancha
200x200 px. Crea un rectángulo de ancho 100 pixels, y alto 40 en la posición 50,100. Con relleno azul
200x200 px. Crea una línea amarilla que vaya desde la esquina superior izquierda a la esquina inferior derecha
400x350 px. Crea un pentágono
500x500 px. Crea una línea múltiple compuesta por 4 trazos
300x150 px. Crea un círculo rojo, un rectángulo verde y una elipse azul, que se solapen
300x150 px. Crear un rectángulo con un texto de título
250x150 px. Crea un texto, pero que vaya de la esquina inferior izquierda, a la esquina superior derecha
200x200 px. Crear tres círculos, una línea y un rectángulo (en las posiciones, tamaño y aspecto que quieras)
Una evaluación del ejercicio es desarrollar una aplicación cliente con el Web API DOM, desde la que generas las diferentes imágenes SVG.
Si quieres profundizar en imágenes más avanzadas (filtros, transformaciones y diferentes capas) puedes revisar los ejemplos del tutorial: svg_examples.
6.3. Iconos¶
Video Clase
Un icono es uno de los conceptos más usados, como recurso imagen, en una web:
Siempre asociados a interfaces GUI
Definen una acción del usuario
Son imágenes pequeñas (generalmente desde 16x16 a 256x256 px)
En forma cuadrada
Los usas en toda la aplicación
Los formatos más utilizados son:
Imagen: SVG (o PNG)
Datos: base64 encoded data
Al ser tan utilizados, lo ideal es usar una librería que te ofrezca:
Un conjunto de iconos organizados (y probados)
Una forma de llamarlos desde tu aplicación (generalmente asociados a un selector class de un elemento html inline)
Algunos ejemplos de librerías (de terceros):
De Fontawesome . Con registro, añades una librería JS y usas clases (Get Started )
De Bootstrap. Varias opciones, pero puedes descargar el icono en SVG
De Material Design . Usando la fuente como icono
Usando fuentes para gestionar iconos:
La galería de iconos está incluida en la fuente (una tabla de icono y carácter). Por ejemplo Material Design y añadir un icono que es una estrella (star).
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,0,0" />
Se genera un selector de clase que te permite mostrar esa fuente en el elemento que consideres
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; }
Y así luego puedes usar el icono de forma sencilla.
Usando el caracter (Unicode 16). Incluyes el caracter unicode correspondiente (en este caso E838)
O el texto equivalente (usa el concepto de ligadura en css)
<span class="material-symbols-outlined"> star </span>
T06-A03. Usando fuentes como galería de iconos
Crea una página web que contenga cinco iconos de Material Design. Usa o texto unicode o inserta de forma estática el icono. Por ejemplo:
Flecha izquierda
Refrescar
Home
Eject
Sunny
6.4. Uso de Canvas API¶
Video Clase
canvas es un elemento HTML que:
Permite crear un contenedor para dibujar (en JS)
… de forma programable (con el API Canvas_API)
… de forma interactiva (respondiendo a eventos)
Ideal para juegos y diagramas interactivos
El proceso de dibujo es siempre el mismo (canvas_drawing)
Obtienes el lienzo donde vas a dibujar (lienzo1)
Obtienes el manejador del lienzo (contexto del campo)
Das instrucciones de dibujo en ese contexto
<script> var canvas = document.getElementById("lienzo1"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); </script>
En el canvas:
Dibujas tiendo en cuenta un eje de coordenadas
Utilizando una serie de métodos adecuados a dibujar en ese contexto. Puedes modificar el estilo de las formas (rectángulos y rutas)
Y hasta puedes añadir imágenes (externas) y texto
En el contexto habitual (2D ), tienes un montón de métodos para utilizar api_canvas
Revisamos el ejemplo de crear un reloj (canvas_clock ):
T06-A04a. Dibujo básico con Canvas API
Crea un dibujo en el lienzo denominado casitas que contenga:
Una casa con dos ventanas y una puerta
Una casa con una puerta
Un caminito entre las dos puertas de la casa
Un arbolito
La casas tienen las paredes pintadas de azul
Las ventanas de rojo
El árbol de verde la copa y marrón el tronco
T06-A04b. Dibuja un reloj con Canvas API
Usando el ejemplo del tutorial de W3C (canvas_clock ), cambia la siguiente funcionalidad:
Se actualizará cada 5 segundos
Los números serán un poco más pequeños (y en gris oscuro)
La manija de las horas será roja
La de los minutos azul
La de los segundos amarilla
6.5. Interacción usando Eventos¶
Video Clase
Un ejemplo práctico de uso del Canvas, de forma interactiva con el ratón es realizar un dibujo con líneas básicas (JS Mouse Drawing )
Defines el estilo del dibujo: tipo de cursor y tamaño del lienzo,
Defines el contexto para hacer el dibujo y tu sistema de coordenadas (del lienzo y de la ventana)
Defines los eventos que vas a manejar (lógica de eventos)
Defines las funciones que serán llamadas en cada evento
Defines la función principal de dibujo (hacer una línea, por ejemplo)
DT06-A05. Dibuja con el ratón en tu navegador
Crea una página web que contenga un lienzo de 400 x 400 pixels donde podrás pintar, usando el ratón, líneas de un color que puedas seleccionar en un botón de selección
6.6. Video y Audio en HTML¶
Video Clase
Antecedentes: Macromedia Flash + MS Silverlight -> HTML5
Elemento video
<video controls width="400" height="400" autoplay loop muted preload="auto" poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4" /> <source src="rabbit320.webm" type="video/webm" /> <p> Tu navegador no soporta este formado de video. Puedes <a href="rabbit320.mp4">descargarlo aquí</a> si lo necesitas. </p> </video>
Elemento source o párrafo (fallback content)
Atributos
src: Definir flujo de video (o usar elementos source para varios orígenes)
controls: permite añader controles al reproductor de video
Eventos
Múltiples formatos
Configuración Servidor web: tipos mime y streaming
Uso de Audio en HTML
Usar el elemento específico audio, similar al elemento video …
… sin el componente visual.
<audio controls muted> <source src="foo.opus" type="audio/ogg; codecs=opus" /> <source src="foo.ogg" type="audio/ogg; codecs=vorbis" /> <source src="foo.mp3" type="audio/mpeg" /> </audio>
Uso de texto asociado al video:
Uso del estándar WebTT
Permite añadir subtítulos y transcripciones
WEBVTT 00:01.000 --> 00:04.000 - Never drink liquid nitrogen. 00:05.000 --> 00:09.000 - It will perforate your stomach. - You could die.
Uso del seudo elemento ::cue para dar estilo a los subtítulos.
T06-A06. Integrando Video y audio en tu HTML
Desarrolla una página web que permita controlar un audio y un video de tu elección (pequeño), al que añadirás subtítulos.
El usuario podrá manejar el video y el audio. Sólo puedes usar HTML5 y sin librerías.
6.7. Usando APIs para Audio y Video¶
Video Clase
-
Es un API que permite controlar el flujo de audio y video.
Se usa el HTMLMediaElement, que permite personalizar el control de la reproducción de audio y video. Es heredada por
HTMLVideoElement , para el video
HTMLAudioElement, para el audio
Un reproductor de video personalizado: Video and Audio APIs / Código Reproductor :
La presentación:
Reproductor en HTML: estructura detallas de cada una de las partes
Revisas las hojas de estilos ( y galería de iconos)
El controlador (reproductor.js):
Definimos las variables para controlar los elementos
Añadimos la funcionalidad para arrancar y parar el video
Añadimos la funcionalidad de avanzar y retroceder
-
Ofrece un API avanzado para gestionar diferentes fuentes de audio y mezclarlas
Permite realizar aplicaciones complejas (mútiples fuentes, mezclas y procesado)
Para lo básico, nos sobra con el elemento audio y sus atributos.
Un reproductor y gestor de audio personalizado: A Simple Boombox Example / Código BoomBox
Creas el contexto de audio (para manipularlo)
Usas una (o más) fuentes de audio. En este caso es un recurso local
Diseñas el controlador del audio. Por ejemplo:
Arrancar / Parar
Usas eventos que te interesen (por ejemplo cambiar el estado del botón cuando termine)
Diseñas el procesado de audio (funcionalidad infinita)
Modificar el volumen (gain)
Modificar la salida por canal (stereo)
En realidad es en proceso completo (audio graph)
Y luego lo diseñas como quieras (iconos, organización, etc).
T06-A07a. Crear un reproductor multimedia con controles personalizados
Se trata de crear una aplicación web similar a la del ejemplo comentado en clase (Video and Audio APIs ), con algún cambio en la funcionalidad:
Existirá un campo con un url a una fuente de video que se cargará en el reproductor al pulsar un botón de carga
Se usará como galería de iconos la de Material Design
El tiempo se mostrará con números mucho más grandes y en un componente aparte, no en la barra de control
Se podrá modificar la barra de control, por ejemplo con botones más grandes.
T06-A07b. Crear un reproductor de audio personalizado
Se trata de crear una aplicación web similar a la del ejemplo comentado en clase. Le haces algún cambio:
El reproductor no tendrá ninguna imagen, será con aspecto textual
Todos los textos estarán en español
El usuario podrá escoger uno, de entr tres audios diferentes, para que suene
6.8. Incrustando Contenido¶
Video Clase
Necesidad de incrustar elementos externos
Sólo si es estrictamente necesario (necesitas una razón poderosa para hacerlo)
Antecedentes:
Para contenido: frames/frameset
Uso con plugins:Applets Java o Macromedia Flash
HTML5: con elementos propios
Elementos HTML (todavía funcionan):
Elemento iframe
Permite incrustar contenido que viene de fuentes externas
Tiene su propio contexto de navegación, es decir es un objeto document propio (enlaces, historial, etc)
Se incrusta como un elemento inline
Muy sencillo de utilizar -> html_iframe
Aspectos de Seguridad
Incrustar contenido plantea ciertos problemas
Que se puede controlar (p.ej con políticas CORS o CSP )
T06-A08. Integrando un video y un mapa
Crea una página web que te permita:
Incrustar un video de youtube (que puedes controlar).
Incrustar un mapa de OpenStreetMap (que puedas usar)