TEMA 3. IMÁGENES, SONIDO Y VÍDEO
Imágenes
Insertar una imagen en HTML es muy simple, simplemente debemos indicar que el elemento es una imagen y cuál es el archivo o donde está ubicado para que sea mostrado en el navegador.
Si son pocas imágenes, podemos tenerlo todo junto en una misma carpeta, pero si la aplicación web es grande, o hay varias imágenes, lo más normal es crear una carpeta llamada imagenes o img, y dejar dentro las imágenes que necesitemos.
<img src="URL, ruta del archivo o nombre del archivo"/>
- Etiqueta <img …> para insertar imágenes, no tiene una etiqueta de cierre.
- src: indicar la ubicación o dirección de la imagen
Por ejemplo, si queremos añadir la imagen foto.png que está dentro de la subcarpeta imagenes, podríamos añadirla con algo como:
<img src="imagenes/foto.png">
Observa que la etiqueta img es una etiqueta vacía, que no tiene pareja. Ella sola se abre y cierra. Dentro, además del atributo src, podemos tener otros atributos opcionales:
width: especifica la anchura que queremos que tenga la imagen. Se la podemos dar en píxeles o en porcentaje. Conviene que el tamaño que le demos no difiera mucho del original, para que no se distorsione, y para que no ocupe demasiado espacio si luego la queremos ver mucho más pequeña. También podemos establecer esta y otras propiedades por CSS.height: especifica la altura que queremos que tenga la imagen (normalmente en píxeles). Si no ponemos nada, se redimensiona según la anchura que hayamos puesto.alt: es un texto alternativo que mostrar en el caso de que el navegador no pueda cargar la imagen, o ésta tarde en cargar. Para según qué versiones de HTML o XHTML, este atributo también es obligatorio (de lo contrario, la página no será correcta).title: hace referencia al título de la imagen, y funciona de forma similar al title de los enlaces: es el texto que se muestra cuando pasamos el ratón por encima de la imagen. En este caso no es recomendable utilizarla, porque muchos lectores de pantalla se comportan de forma imprevisible con ella, al tener un propósito parecido al del atributo alt.
Aprendizaje activo: Inserta una imagen en tu página web y aplica lo aprendido hasta ahora
Icono
En la actualidad, es común que las aplicaciones, ya sea en teléfonos móviles, computadoras o incluso las aplicaciones web, tengan su propio icono distintivo. Puedes haber notado que, al abrir algunas páginas web, su icono aparece en la barra de direcciones del navegador o en la pestaña donde abriste esa página. ¿Alguna vez te has preguntado cómo logran hacer esto?
Bueno, primero necesitamos tener el icono guardado en una carpeta o subcarpeta de nuestra página web. Por lo general, estos iconos tienen extensiones como .ico o .png. El icono especial de una página web se llama «favicon», y el archivo suele llamarse «favicon.ico» o «favicon.png». Este icono suele tener dimensiones pequeñas, generalmente de 16×16 o 32×32 píxeles. Ahora, para que este icono aparezca, debemos agregar la siguiente línea en la sección «head» de la(s) página(s) web donde deseamos que aparezca:
<link rel="icon" href="favicon.ico" type="image/x-icon">
En este código, favicon.ico es la ruta al archivo de imagen que quieres utilizar como favicon. Recuerda que debes reemplazar favicon.ico con la ruta a tu archivo de imagen si está en una ubicación diferente o si tiene un nombre diferente.
Una opción para añadir iconos a tu sítio web es utilizar IconFinder, es una de las páginas más populares para encontrar y descargar iconos.
Aprendizaje activo: Busca un icono para tu página y añádelo en el HEAD de tu página web
Imágenes con pie de foto
En ocasiones nos puede interesar añadir un pie de foto a la imagen que incorporamos a una página. Para tratarlo como un todo (imagen más pie de foto) podemos emplear la etiqueta figure para que englobe todo el conjunto (imagen y pie) y la etiqueta figcaption para definir dicho pie de foto. Podría quedar algo así:
<figure>
<img src="imagenes/foto.png">
<figcaption>Imagen reciente de la Sagrada Familia</figcaption>
</figure>
Aprendizaje activo: Crea una página llamada biografia.html. Vas a crear en ella la biografía de un personaje famoso (el que quieras). La página debe tener como título (title) el texto “Biografía de XXXXX”, siendo XXXXX el nombre del personaje que hayas elegido, debe haber un encabezado de primer nivel (h1) con el nombre de ese personaje, debes insertar una imagen centrada, debajo unos párrafos con la bibliografía del personaje
Audio y vídeo
En HTML5 se introduce la interesante posibilidad de mostrar videos directamente desde nuestro navegador. De hecho, si arrastramos un video a la ventana del navegador, comprobaremos que comienza a reproducirse en él. Esto ocurre porque los navegadores son capaces de mostrar imágenes, reproducir video y audio.
En algunos casos, será necesario acudir a una etiqueta auxiliar llamada iframe para poder visualizar el archivo de ciertas fuentes.
La etiqueta iframe
La etiqueta iframe permite incrustar contenido externo en una web. Es la abreviatura de inline frame, o marco incorporado. Básicamente define una especie de ventana o marco interno con el que poder “asomarse” o visualizar contenido de otra web, como si estuviera en la nuestra. Esto proporciona una forma de insertar un documento web entero dentro de otro, como si fuera un <img> u otro elemento similar, y así es como se usa en la actualidad.
Entre sus aplicaciones podemos destacar la posibilidad de incrustar vídeos de YouTube o mapas de Google Maps en nuestras webs, como veremos a continuación.
Veamos cómo Youtube nos permite insertar un video en cualquier página que nos guste usando un <iframe> .
- Primero, ves a Youtube y encuentra el video que te gusta.
- Debajo del video, encontraras un botón Compartir : seleccionalo para mostrar las opciones para compartir.
- Selecciona el botón Insertar y recibirá un código
<iframe>– copialo. - Insértalo en el cuadro de entrada a continuación, y observa cuál es el resultado en la salida .
También puedes intentar insertar un mapa de Google :
- Ves a Google Maps y encuentra un mapa que te guste.
- Haz clic en el «Menú Hamburger» (tres líneas horizontales) en la esquina superior izquierda de la IU.
- Selecciona la opción Compartir o Insertar mapa .
- Selecciona la opción Insertar mapa, que te dará un código
<iframe>– copielo. - Insértalo en el cuadro de entrada a continuación, y observa cuál es el resultado en la salida .
Para utilizarlo correctamente, debemos tener en cuenta los atributos que maneja:
src: URL del recurso incrustadowidthyheight: anchura y altura del iframename: nombre que le damos al iframe (opcional)allowfullscreen: si está presente, permitimos que el recurso mostrado se pueda ampliar a pantalla completaframeborder: borde del iframe (0 para ninguno)allow: conjunto de plugins o funcionalidades que se permiten sobre el iframe, tales como autoplay para reproducir automáticamente un vídeo, gyroscope para girar el vídeo, etc.
Añadir vídeo
Para mostrarlos en nuestras páginas, usaremos la etiqueta HTML <video>, la cuál tiene varios atributos que podemos utilizar:
| Atributo | Descripción |
|---|---|
src | Archivo o URL del video a reproducir. Obligatoria si no tiene etiquetas dentro. |
width | Indica el tamaño de ancho del video. |
height | Indica el tamaño de alto del video. |
Un primer ejemplo muy básico para colocar un video en nuestra página web podría ser el siguiente:
<video src="video.mp4" width="360" height="640"></video>
Al igual que vimos en el apartado de imágenes, tenemos a nuestra disposición el atributo src para indicar la ruta o archivo de video, el atributo width para indicarle un tamaño de ancho y el atributo height para indicar un tamaño de alto.
Indicar los valores de ancho y alto en el HTML es una buena práctica, porque reservamos el tamaño inicialmente aunque el video no se haya descargado, y así evitamos posibles saltos o cambios de tamaño que desembocan en comportamientos molestos e inesperados al cargar una web.
Ojo: Si lo que quieres es insertar videos desde Youtube, Vimeo u otro servicio alternativo, debes utilizar la etiqueta <iframe> que hemos visto en lugar de la etiqueta <video>. Esta última sólo sirve para archivos en formato de video directamente.
<video src="videos/prueba.mp4" controls></video>
El atributo controls, si está presente, muestra los controles para reproducir o pausar el vídeo. A diferencia de las imágenes, el vídeo no se distorsiona si el tamaño de la zona de reproducción no coincide con las proporciones del vídeo. El espacio que quede sin llenar se dejará con un fondo negro.
En ocasiones, puede que el navegador no disponga de los codecs necesarios para poder reproducir el vídeo. En este caso, podemos ofrecer diferentes alternativas con diferentes formatos, y que el navegador utilice la primera que pueda reproducir. Esto se consigue añadiendo distintos bloques source dentro del bloque video y que cada uno apunte a su propia URL de vídeo:
<video width="720" controls>
<source src="videos/prueba.mp4" type="video/mp4">
<source src="videos/prueba.webm" type="video/webm">
</video>
Las etiquetas <video>, al igual que las etiquetas <audio> que veremos más adelante, tienen una serie de atributos , es decir, atributos de verdadero o falso, para activar o desactivar características. Para activarlas, simplemente tenemos que indicar el atributo en la etiqueta, para desactivarlas, simplemente lo omitimos.
Estas características son las siguientes:
| Atributo | Descripción |
|---|---|
autoplay | Comienza a reproducir el video automáticamente. OJO, está sujeto a normas del navegador. |
loop | Vuelve a iniciar el video cuando finaliza su reproducción (en bucle). |
muted | Establece que el video se reproduzca con sonido muteado (silenciado). |
controls | Muestra los controles de reproducción (por defecto no se muestran). |
playsinline | Reproduce el video en línea, es decir, en su área de reproducción. |
Una aclaración sobre el atributo playsinline: En algunos dispositivos móviles, al reproducir el video, este se muestra en pantalla completa, dejando la web en un segundo plano. Si establecemos el atributo playsinline, obligaremos a que el video se reproduzca en el lugar donde se encuentra.
Veamos un sencillo ejemplo aplicado:
<video src="video.mp4" autoplay muted loop></video>
Este video se reproducirá automáticamente, silenciado y en modo bucle, es decir, cuando llegue al final, comenzará a reproducirse de nuevo. Ten en cuenta que un video .mp4 que no tenga el atributo controls, por norma general, el usuario lo interpretará como si fuera una imagen o .gif animado. Si no ve claramente que hay una barra de controles, no caerá en que se trata de un video.
Añadir audio
Al igual que hemos visto con los archivos de video, también es posible añadir archivos de audio en nuestra web para colocar conversaciones de voz, podcasts, sonidos o simplemente usar música como ambientación.
En versiones anteriores de HTML se usaba una etiqueta HTML obsoleta denominada <bgsound> que realizaba algo similar. Actualmente, no debe ser utilizada. Hoy en día, utilizaremos la etiqueta HTML <audio>, que funciona prácticamente igual que <video>, sólo que utilizando archivos de audio.
La etiqueta <audio> tiene varios atributos que podemos utilizar:
| Atributo | Descripción |
|---|---|
src | Audio a reproducir. Obligatoria si no contiene etiquetas <source>. |
preload | Indica como realizar la precarga del audio. |
Se emplea del mismo modo y con los mismos atributos y subetiquetas que video (src, controls, source, etc), salvo algunos elementos, como width o height, que aquí no tienen sentido al carecer un audio de dimensiones visuales.
<audio controls>
<source src="canciones/cancion1.mp3" type="audio/mp3">
<source src="canciones/cancion1.wav" type="audio/wav">
</audio>
Otros elementos
Desde versiones anteriores de HTML 5, podemos emplear una etiqueta llamada object para hacer referencia distintos tipos de contenido multimedia. Por ejemplo, podemos emplearlo para cargar imágenes, como alternativa a img (aunque es preferible utilizar esta última):
<object data="img/logo.svg" width="100%"></object>
Los elementos <embed> y <object> desempeñan una función diferente en comparación con <iframe>; estos elementos son herramientas de incrustación de propósito general para insertar varios tipos de contenido externo, que incluyen tecnologías de complementos como Java Applets y Flash, PDF (que se puede mostrar en un navegador con un complemento de PDF) e incluso contenido como videos, SVG e imágenes.
Nota: Un complemento es un software que proporciona acceso a contenido que el navegador no puede leer de forma nativa.
Sin embargo, es poco probable que utilices mucho estos elementos. Los Applets no se han utilizado durante años, Flash ya no es muy popular debido a varias razones (consulta El caso contra los complementos, a continuación), los PDF suelen ser mejor enlazados que incrustados, y otros contenidos como imágenes y videos tienen elementos mucho mejores y más fáciles para manejarlos. Los complementos y estos métodos de incrustación son realmente una tecnología heredada, y los mencionamos principalmente en caso de que los encuentres en ciertas circunstancias como intranets o proyectos empresariales.