REFERENCIA PARA HTML:
https://www.w3schools.com/html/html_media.asp
AUDIO
Escucha la música de Call me eS | Disfruta de canciones, álbumes y listas gratis en SoundCloud
VIDEO
https://www.w3schools.com/html/html5_video.asp
Vimeo Interactive Video Experience Platform
PDFS
PRESENTACIONES
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.
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, ...
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
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.
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>
<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.
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.
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.
Desventajas formato SVG:
El contenido de la imagen forma parte del DOM, y aumenta la complejidad del mismo.
Más lento dibujando muchos elementos.
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>
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>
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
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>
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
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
more_vert
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
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.
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.
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.
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.
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.
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.
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.
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.