6. Integración de Contenido Multimedia#

En este tema aprenderemos a:

  1. Integrar contenido multimedia en nuestra página web

  2. 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

  1. Elemento img

    1. No tiene descendientes (puede no cerrar su etiqueta)

    2. Atributo src:

      1. Origen de la imagen (url path)

      2. Hotlinking (con atención):

        1. Usar url externos sin permiso

        2. Habitual en hipertexto

      3. Los formatos aceptados (Formatos de Imagen) dependen del agente (UA)

    3. 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">

  2. Visualización de la imagen

    1. Mejor usar CSS para adaptar su comportamiento (concepto de viewport )

    2. Problema de la adaptación y flexibilidad: Responsive Images

      1. Art Direction problem: qué parte de la imagen ver en diferentes escenarios

        1. Elemento picture : diferentes orígenes según el medio (media queries)

      2. Resolution switching problem: qué resolución es adecuada para un escenario concreto

        1. 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>

  3. Añadir títulos a una imagen:

    1. Se usa un contenedor de bloque específico (div) a medida

    2. Como es algo común, puede usarse el elemento figure con dos elementos hijo:

      1. Definir el elemento a titular (una imagen, pero puede ser un texto)

      2. 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>

  4. Accesibilidad.

    1. ¿Cómo se ve tu sitio web si no se ven las imágenes (o cualquier recurso multimedia)? Debería ser funcional

    2. Lo que puede ocurrir:

      1. Errores en la carga del recurso. Por ejemplo algún problema en el origen o en el formato de imagen

      2. Hay usuarios especiales (UA específicos): p.ej. personas ciegas o navegadores sólo texto

      3. 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 ):

  1. 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»

  2. 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»

  3. La tercera imagen, en realidad seleccionará una de entre tres alternativas, según la pantalla (supongamos un criterio por el ancho de pantalla)

    1. Pantalla Pequeña: ancho máximo 350 px

    2. Pantalla Media: anchos entre 351 y 1024

    3. Pantalla Grande: mayor de 1.024 px

6.2. Uso de SVG#

Video Clase

  1. SVG es un formato vectorial en un contenedor XML estándar:

    1. Tamaño reducido (generalmente)

    2. Que no pierde calidad al aumentar tamaño (ejemplo MDN )

    3. Pero que se vuelve poco manejable en algunos casos

    4. No es específico para desarrollo web (se usa en diseño gráfico también)

  2. SVG es un elemento del DOM svg que:

    1. Contiene elementos que soporta diferentes formas básicas (líneas, círculos, rectángulos, texto …)

    2. Que construyen el resultado definitivo a partir de instrucciones (hay que renderizar el XML)

    3. 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>

  3. Usar SVG (svg_intro)

    1. Inclusión sencilla -> svg_inhtml

    2. Formas Básicas:

      1. rectángulos (svg_rect)

      2. círculos (svg_circle )

      3. líneas (svg_line)

      4. texto (svg_text)

      5. y … más.

    3. Rutas: líneas (svg_path)

    4. Modificación Aspecto Gráfico: con atributos de presentación (SVG Presentation Attributes )

    5. Y permite efectos más complejos (filtros). La referencia es muy completa (svg_reference)

  4. 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.

  1. 200x200 px. Crea un círculo de radio 20 pixels, en la posición 100,100 (X,Y)

  2. 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

  3. 200x200 px. Crea un rectángulo de ancho 100 pixels, y alto 40 en la posición 50,100. Con relleno azul

  4. 200x200 px. Crea una línea amarilla que vaya desde la esquina superior izquierda a la esquina inferior derecha

  5. 400x350 px. Crea un pentágono

  6. 500x500 px. Crea una línea múltiple compuesta por 4 trazos

  7. 300x150 px. Crea un círculo rojo, un rectángulo verde y una elipse azul, que se solapen

  8. 300x150 px. Crear un rectángulo con un texto de título

  9. 250x150 px. Crea un texto, pero que vaya de la esquina inferior izquierda, a la esquina superior derecha

  10. 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

  1. Un icono es uno de los conceptos más usados, como recurso imagen, en una web:

    1. Siempre asociados a interfaces GUI

    2. Definen una acción del usuario

    3. Son imágenes pequeñas (generalmente desde 16x16 a 256x256 px)

    4. En forma cuadrada

    5. Los usas en toda la aplicación

  2. Los formatos más utilizados son:

    1. Imagen: SVG (o PNG)

    2. Datos: base64 encoded data

  3. Al ser tan utilizados, lo ideal es usar una librería que te ofrezca:

    1. Un conjunto de iconos organizados (y probados)

    2. Una forma de llamarlos desde tu aplicación (generalmente asociados a un selector class de un elemento html inline)

    3. Algunos ejemplos de librerías (de terceros):

      1. De Fontawesome . Con registro, añades una librería JS y usas clases (Get Started )

      2. De Bootstrap. Varias opciones, pero puedes descargar el icono en SVG

      3. De Material Design . Usando la fuente como icono

  4. Usando fuentes para gestionar iconos:

    1. 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"
/>

    2. 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;
}

    3. Y así luego puedes usar el icono de forma sencilla.

      1. Usando el caracter (Unicode 16). Incluyes el caracter unicode correspondiente (en este caso E838)

      2. 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:

  1. Flecha izquierda

  2. Refrescar

  3. Home

  4. Eject

  5. Sunny

6.4. Uso de Canvas API#

Video Clase

  1. canvas es un elemento HTML que:

    1. Permite crear un contenedor para dibujar (en JS)

    2. … de forma programable (con el API Canvas_API)

    3. … de forma interactiva (respondiendo a eventos)

    4. Ideal para juegos y diagramas interactivos

  2. El proceso de dibujo es siempre el mismo (canvas_drawing)

    1. Obtienes el lienzo donde vas a dibujar (lienzo1)

    2. Obtienes el manejador del lienzo (contexto del campo)

    3. 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>

  3. En el canvas:

    1. Dibujas tiendo en cuenta un eje de coordenadas

    2. Utilizando una serie de métodos adecuados a dibujar en ese contexto. Puedes modificar el estilo de las formas (rectángulos y rutas)

    3. Y hasta puedes añadir imágenes (externas) y texto

  4. En el contexto habitual (2D ), tienes un montón de métodos para utilizar canvas_reference

  5. 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:

  1. Una casa con dos ventanas y una puerta

  2. Una casa con una puerta

  3. Un caminito entre las dos puertas de la casa

  4. Un arbolito

  5. La casas tienen las paredes pintadas de azul

  6. Las ventanas de rojo

  7. 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:

  1. Se actualizará cada 5 segundos

  2. Los números serán un poco más pequeños (y en gris oscuro)

  3. La manija de las horas será roja

  4. La de los minutos azul

  5. 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 )

  1. Defines el estilo del dibujo: tipo de cursor y tamaño del lienzo,

  2. Defines el contexto para hacer el dibujo y tu sistema de coordenadas (del lienzo y de la ventana)

  3. Defines los eventos que vas a manejar (lógica de eventos)

  4. Defines las funciones que serán llamadas en cada evento

  5. 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

  1. Antecedentes: Macromedia Flash + MS Silverlight -> HTML5

  2. 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>

    1. Elemento source o párrafo (fallback content)

    2. Atributos

      1. src: Definir flujo de video (o usar elementos source para varios orígenes)

      2. controls: permite añader controles al reproductor de video

    3. Eventos

    4. Múltiples formatos

    5. Configuración Servidor web: tipos mime y streaming

  3. Uso de Audio en HTML

    1. Usar el elemento específico audio, similar al elemento video …

    2. … 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>

  4. Uso de texto asociado al video:

    1. Uso del estándar WebTT

    2. 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.

    3. 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

  1. Video and Audio APIs

    1. Es un API que permite controlar el flujo de audio y video.

    2. Se usa el HTMLMediaElement, que permite personalizar el control de la reproducción de audio y video. Es heredada por

    3. HTMLVideoElement , para el video

    4. HTMLAudioElement, para el audio

  2. Un reproductor de video personalizado: Video and Audio APIs / Código Reproductor :

    1. La presentación:

      1. Reproductor en HTML: estructura detallas de cada una de las partes

      2. Revisas las hojas de estilos ( y galería de iconos)

    2. El controlador (reproductor.js):

      1. Definimos las variables para controlar los elementos

      2. Añadimos la funcionalidad para arrancar y parar el video

      3. Añadimos la funcionalidad de avanzar y retroceder

  3. Web Audio API .

    1. Ofrece un API avanzado para gestionar diferentes fuentes de audio y mezclarlas

    2. Permite realizar aplicaciones complejas (mútiples fuentes, mezclas y procesado)

      https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/audio-context_.png

    3. Para lo básico, nos sobra con el elemento audio y sus atributos.

  4. Un reproductor y gestor de audio personalizado: A Simple Boombox Example / Código BoomBox

    https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API/boombox.png

    1. Creas el contexto de audio (para manipularlo)

    2. Usas una (o más) fuentes de audio. En este caso es un recurso local

    3. Diseñas el controlador del audio. Por ejemplo:

      1. Arrancar / Parar

      2. Usas eventos que te interesen (por ejemplo cambiar el estado del botón cuando termine)

    4. Diseñas el procesado de audio (funcionalidad infinita)

      1. Modificar el volumen (gain)

      2. Modificar la salida por canal (stereo)

      3. En realidad es en proceso completo (audio graph)

        https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API/graphpan.jpg

      4. 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:

  1. Existirá un campo con un url a una fuente de video que se cargará en el reproductor al pulsar un botón de carga

  2. Se usará como galería de iconos la de Material Design

  3. El tiempo se mostrará con números mucho más grandes y en un componente aparte, no en la barra de control

  4. 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:

  1. El reproductor no tendrá ninguna imagen, será con aspecto textual

  2. Todos los textos estarán en español

  3. El usuario podrá escoger uno, de entr tres audios diferentes, para que suene

6.8. Incrustando Contenido#

Video Clase

  1. Necesidad de incrustar elementos externos

    1. Sólo si es estrictamente necesario (necesitas una razón poderosa para hacerlo)

    2. Antecedentes:

      1. Para contenido: frames/frameset

      2. Uso con plugins:Applets Java o Macromedia Flash

      3. HTML5: con elementos propios

    3. Elementos HTML (todavía funcionan):

      1. object.

        <object
   type="video/mp4"
   data="https://www.youtube.com/watch?v=Sp9ZfSvpf7A"
   width="1280"
   height="720">
</object>

      2. embed.

        <embed
    type="video/quicktime"
    src="movie.mov"
    width="640"
    height="480"
    title="Title of my video" />

  2. Elemento iframe

    1. Permite incrustar contenido que viene de fuentes externas

    2. Tiene su propio contexto de navegación, es decir es un objeto document propio (enlaces, historial, etc)

    3. Se incrusta como un elemento inline

    4. Muy sencillo de utilizar -> html_iframe

  3. Aspectos de Seguridad

    1. Incrustar contenido plantea ciertos problemas

    2. 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:

  1. Incrustar un video de youtube (que puedes controlar).

  2. Incrustar un mapa de OpenStreetMap (que puedas usar)