Espera por favor...

Multimedia en HTML
Introducción

    Multimedia es un término que procede de la lengua inglesa y hace referencia a aquello que utiliza varios medios de manera simultánea en la transmisión de información. Una presentación multimedia, por lo tanto, puede incluir fotografías, vídeos, sonidos y texto.

    El concepto se aplica a objetos y sistemas que apelan a múltiples medios físicos y/o digitales para comunicar sus contenidos. El término también se usa en referencia a los medios en sí que permiten almacenar y difundir contenidos con estas características.

    Las páginas web también pueden presentar desarrollos multimedia, con animaciones en HTML5, vídeos insertados, por ejemplo desde YouTube, música de fondo y material para leer. En estos casos, puede hablarse de multimedia interactiva, ya que es el usuario quien decide cómo será la presentación de la información y en qué momento iniciarla a través de sus clics.

Multimedia en HTML
Imágenes. Introducción

  • Imágenes de contenido: proporcionan información y complementan la información textual
  • Imágenes de adorno: se utilizan para hacer bordes redondeados, iconos en las listas de elementos, mostrar fondos de página, ...

Multimedia en HTML
Imágenes. Inserción

Etiqueta <img>
Parámetros:
  • src = "url". URL de la imagen
  • alt = "texto". Descripción corta
  • longdesc = "url". URL donde puede encontrarse una descripción detallada
  • name = "texto". Nombre del elemento imagen
  • height = "unidad_de_medida", Altura con la que se debe mostrar
  • width = "unidad_de_medida". Anchura con la que se debe mostrar
Unidades de uso legal en España, Sistema Internacional de Unidades, Decreto 244/2016, de 3 de junio, por el que se desarrolla la Ley 32/2014, de 22 de diciembre, de Metrología.

Multimedia en HTML
Imágenes. Novedades en HTML 5.1

    HTML 5.1 incorpora un nuevo sistema para utilizar imágenes de forma más flexible, para ello, utiliza las etiquetas:

  • Etiqueta <picture>
    Agrupa una serie de imágenes. Etiqueta contenedora.
  • Etiqueta <source>
    Mostrará la imagen que cumpla una serie de criterios opcionales.

Multimedia en HTML
Imágenes. Ejemplos en HTML 5.1

Ejemplo:

    Permite indicar más de un formato, y actuará según el navegador
    <picture>
  <source srcset="img.jxr"> <!-- JPEG XR -->
  <source srcset="img.webp"> <!-- WebP -->
  <img src="img.jpg" alt="Imagen de prueba"> <!-- Navegador en modo texto -->
</picture>

    Se muestran diferentes imágenes dependiendo de la resolución de pantalla (ancho) del dispositivo
      <picture>
  <source media="(min-width: 600px)" srcset="img-mg.png">
  <source media="(min-width: 300px) and (max-width: 600px)" srcset="img-g.png">
  <source media="(max-width: 50px)" srcset="img-p.png">
  <img src="img-habitual.png" alt="Imagen habitual">
  </picture>

Multimedia en HTML
Imágenes. Atributos de source

    <source> tiene una serie de atributos disponibles:

    Atributo Descripción
    srcset Serie de imágenes (separadas por coma) que se utilizarán. Obligatorio.
    sizes Tamaño específico de la imagen que finalmente se mostrará.
    media Condición que se debe cumplir para que muestre la imagen.
    type Tipo de formato de imagen. Opcional.

Multimedia en HTML
Formatos de imágenes

Formatos de imágenes soportados:

  • PNG. Soporta transparencia. Compresión sin pérdidas. Imágenes «lisas».
  • JPG. Compresión con pérdidas. Ideal para imágenes con texturas.
  • SVG. Formato vectorial. Ideal para imágenes escalables.
  • GIF. Formato para imágenes pequeñas y animadas.
  • WEBP, Alternativa libre de Google al JPEG. Soporta transparencias.
  • JPEG2000. Evolución del JPEG.
  • JPEGXR. Alternativa libre de Microsoft al JPEG.
  • APNG. Alternativa libre a GIF. Compatible con PNG. Soporta animaciones.

Multimedia en HTML
Imágenes. Formato SVG

Formato SVG:

  • Los mapas de bits son una matriz de puntos o píxeles. El tamaño de la tabla es conocido como la resolución de la imagen.
  • En SVG lo que se almacena son las instrucciones para dibujar la imagen.
  • La principal ventaja de los gráficos vectoriales es que son independientes de la resolución.
  • Si la imagen tiene texto, este puede ser indexado por los buscadores.
  • Suelen ser más pequeñas que los mapas de bits equivalentes.
  • No pierden calidad al modificarlas.
  • El contenido de la imagen forma parte del DOM.
  • Más rápido dibujando elementos grandes.
  • El canvas requiere programar con JavaScript, con svg no es necesario.

Multimedia en HTML
Imágenes. Formato SVG

Desventajas formato SVG:

  • El contenido de la imagen forma parte del DOM, y aumenta la complejidad del mismo.

  • Más lento dibujando muchos elementos.

Multimedia en HTML
Imágenes. Ejemplo formato SVG

Ejemplo:

    <!DOCTYPE html>
    
<html lang="es">
<head>
  <meta charset="UTF-8"><
  <title>Ejemplo de SVG</title>
</head>
<body>
  <svg width="100" height="100" style="border: 1px solid black">
    <circle cx="50" cy="50" r="40" fill="transparent" stroke="black">
    </circle>
  </svg>
</body>
</html>

Multimedia en HTML
Mapas de imágenes

  • De interés en casos específicos, como por ejemplo sitios de predicciones meteorológicas o agencias de viajes. Muchas webs usan en su lugar Adobe Flash
  • Permiten definir diferentes zonas seleccionables dentro de una imagen
  • Las zonas se crean mediante rectángulos, círculos y polígonos
  • Para crear un mapa se inserta la imagen original mediante la etiqueta <img>
  • A continuación, se utiliza la etiqueta <map> para definir zonas
  • Cada zona se define mediante la etiqueta <area>

Multimedia en HTML
Mapas de imágenes

Ejemplo:
  • <map>
    • - name = "texto". Nombre que identifica al mapa definido (nombre único)
  • <area>
    • - href = "url". URL al que se accede al seleccionar el área
    - nohref = "nohref". Áreas que no son seleccionables
    - shape = "default | rect | circle | poly". Tipo de área que se define
    - coords = "lista de números". Números separados por comas que representan las coordenadas del área

Multimedia en HTML
Mapas de imágenes

Ejemplo:
    <html>
<head>
<title>Uso de imagenes</title>
</head>

<body>
<map name="map1"> <area
   href="cuadrado.html" alt="Cuadrado" shape=rect coords="0,75,100,175">
<area href="circulo.html" alt="Círculo" shape=circle coords="175,50,50">
<area href="triangulo.html" alt="Triángulo" shape=poly coords="125,250, 225,250, 175,165">
</map>

<img src="https://www.um.es/docencia/barzana/IMGTEORIA/map-ejemplo.gif"
   border="0" width="225" height="251" usemap="#map1">
</body>
</html>

Multimedia en HTML
Objetos

    HTML permite incluir otros elementos más complejos, como applets de Java y vídeos en formato QuickTime o Flash. El navegador precisa de plugins
  • <object>
    • - data = "url". Indica la URL de los datos que utiliza el objeto
    - classid, codebase, codetype. Información específica del tipo de objeto
    - type. Indica el tipo de contenido de los datos
    - height = "unidad_de_medida". Indica la altura con la que se debe mostrar
    - width = "unidad_de_medida". Indica la anchura con la que se debe mostrar

Multimedia en HTML
Objetos

A los objetos también se les puede pasar información adicional en forma de parámetros mediante la etiqueta

  • <param>

    • - name = "texto". Indica el nombre del parámetro
    - value = "texto". Indica el valor del parámetro

Multimedia en HTML
Iframes

Iframes son espacios en una página web que permiten visualizar otro sitio

  • <iframe>
    • - src = "url". URL del documento HTML que se visualiza en el iframe

    - height = "longitud". Altura que ocupará el iframe en el documento

    - width = "longitud". Anchura que ocupará el iframe en el documento

    - name = "texto". Nombre que identifica al iframe

    - longdesc = "url". Dirección con una descripción larga del contenido del iframe

    - scrolling = "yes | no | auto" . Indica si debe mostrar barras de scroll (horizontal y vertical) cuando el contenido incluido no cabe

Multimedia en HTML
Vídeo

Es posible incrustar vídeos sin usar las instrucciones para objetos

  • <video>
    Atributo Valor Descripción
    src Dirección URL Video a reproducir. Obligatoria si actúa como etiqueta contenedora.
    poster Dirección URL Muestra una imagen a modo de presentación.
    preload auto | metadata | none Indica como realizar la precarga del vídeo.
    mediagroup nombre Establece un nombre para un grupo de contenidos multimedia.
    autoplay - Comienza a reproducir el vídeo automáticamente.
    loop - Vuelve a iniciar el vídeo cuando finaliza su reproducción.
    muted - Establece el vídeo sin sonido.
    controls - Muestra los controles de reproducción.
    width tamaño Indica el tamaño de ancho del vídeo.
    height tamaño Indica el tamaño de alto del vídeo.

Multimedia en HTML
Formatos de vídeo

Formatos de vídeo soportados:

    Formato Codec utilizado Características
    MP4 x264, DivX H264 Alta calidad. Codec x264 libre.
    WebM VP8, VP9 Alternativa libre a MP4 de Google.
    Ogv Theora Alternativa libre a MP4.
    MKV Matroska Buena compresión. Potente.
    AVI XviD, DivX 3/5 Menor compresión que MP4.
    HEVC x265, DivX HEVC Futura evolución de MP4.

Multimedia en HTML
Vídeo. Otros formatos

La etiqueta <video> puede actuar como etiqueta contenedora e incluir varias etiquetas HTML para dotar de mayor compatibilidad, o capacidades adicionales.

    Etiqueta Atributos Descripción
    <source> src, type Establece un archivo de vídeo o lo añade como alternativa.
    <track> src, srclang, label, kind, default Establece un archivo de subtítulos o lo añade como alternativa.

Multimedia en HTML
Etiquetas vídeo modo avanzado

Ejemplo

      <video width="640" height="480">
  	<source src="video.mp4" type="video/mp4">
  	<source src="video.webm" type="video/webm">
  	<source src="video.ogv" type="video/ogg">
  	<img src="imagen.png" alt="Vídeo no soportado">
  	Este navegador no soporta contenido multimedia.
  </video>

    El navegador no mostrará todos los contenidos, sino que seguirán el orden: Formato MP4, si el navegador no lo soporta, salta al siguiente. Intenta mostrar el WEBM, si el navegador no lo soporta, salta al siguiente. Intenta mostrar el formato OGV. Si el navegador no lo soporta, salta al siguiente. Si se trata de un navegador que no soporta HTML5, intentará mostrar la imagen. Si se trata de un navegador de terminal de texto, aparece un rótulo.

Multimedia en HTML
Audio

Ejemplo

Es posible incrustar audio sin usar las instrucciones para objetos, ni emplear la etiqueta obsoleta <bgsound>
  • <audio>
    Atributo Valor Descripción
    src Dirección URL Audio a reproducir. Obligatoria si actua como etiqueta contenedora.
    preload auto | metadata | none Indica como realizar la precarga del audio.
    mediagroup nombre Establece un nombre para un grupo de contenidos multimedia.
    autoplay - Comienza a reproducir el audio automáticamente.
    loop - Vuelve a iniciar el audio cuando finaliza su reproducción (bucle).
    muted - Establece el audio sin sonido (silenciado).
    controls - Muestra los controles de reproducción. Por defecto no se muestran.

Multimedia en HTML
Formatos de audio

Formatos de audio soportados:
    Formato Codec utilizado Características
    MP3 MPEG Layer-3 Buena calidad.
    OGG Ogg Vorbis Buena calidad. Alternativa libre a MP3.
    AAC Advanced Audio Coding Mejora el MP3. Usado como audio en MP4.
    Opus Opus Buena calidad. Alternativa libre a MP3.
    FLAC FLAC Audio Lossless Compresión sin pérdidas. Alto tamaño.
    WAV Wave sound Formato de Microsoft.

Multimedia en HTML
Modo avanzado

Etiquetas modo avanzado:
    Etiqueta Atributos Descripción
    <source> src, type Establece un archivo de audio o lo añade como alternativa.
    <track> src, srclang, label, kind, default Establece un archivo de subtítulos o lo añade como alternativa.

Multimedia en HTML
Audio. Etiquetas modo avanzado

    Ejemplo

    <audio>
	<source src="audio.opus">
	<source src="audio.ogg">
	<source src="audio.mp3">
</audio>
    El navegador intentará reproducir el archivo en formato Opus, en caso de no soportarlo intentará reproducir el formato Ogg Vorbis, y en caso de tampoco soportarlo, reproducirá el formato MP3.

Búsquedas en UMU

Búsquedas sobre informática