Imágenes, sonidos, mapas y video en HTML5

Imágenes en HTML5

El uso de imágenes en HTML se realiza mediante la etiqueta "img", se establece las siguientes propiedades

• Fuente: src=""
• Alto: height=""
• Ancho: width=""
• Descripción: alt=""

Ejemplo:

<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png"
     width="200" 
     height="50" 
     alt="logo de Blogger"/>

En este caso establecemos como fuente de la imagen el logo de Blogger mediante su URL que apunta a un archivo de imagen (pero se puede llamar archivos locales por ejemplo: src="img/foto.png"), un alto de 50px, ancho de 200 px y una descripción que indica que es el logo de Blooger y quedaría de la siguiente manera:



Nota: La descripción es muy importante hoy en día, pues permite que personas con cualquier dificultad visual mediante su navegador y las extensiones para estos casos les indiquen de que se trata aquella imagen que no puedan visualizar.

---

Sonidos en HTML5

El uso de sonidos mediante la etiqueta "audio" es sencillo y la interfaz viene por defecto en cada navegador que permite su uso. Tiene como atributos:

• Controles: controls
• Reproducción automática: autoplay
• Repetición automática: loop
• Pre-carga: preload, para archivos pesados, que puede tomar tres valores:
• Primer caso: preload = "none", no se almacena en el Buffer el archivo.
• Segundo caso: preload = "auto", almacena el archivo.
• Tercer caso: preload = "metada", solo almacena metadatos.

Ejemplo:

<audio src="audio.ogg" controls autoplay loop>
   <p>Mensaje en caso no se pueda reproducir en un navegador</p>
</audio>

En este caso establecemos como fuente un archivo llamado audio.ogg con los controles, reproducción automática y repeticiones activadas.


Nota: Los formatos más comunes y soportados son ogg y mp3, pero no los únicos.

---

Mapas en HTML5

Su inserción es mucho más efectiva empleando servicios de terceros como Google Maps

Ejemplo:

<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d124130.9974978055!2d-72.00929001754207!3d-
13.529842657332434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3
!1m2!1s0x916dd5d826598431%3A0x2aa996cc2318315d!2sCusco!5e0!3m2
!1ses-419!2spe!4v1566252558372!5m2!1ses-419!2spe" 
   width="600" height="450" frameborder="0" 
   style="border:0" allowfullscreen></iframe>

En este caso empleamos el servicio de Google Maps para la ciudad de Cusco:

---

Video en HTML5

Se pueden implementar mediante la etiqueta "video" o desde un servicio de terceros como YouTube

Ejemplos:

<video controls>
  <source src="mine.mp4" type="video/mp4">
</video>

En este caso establecemos como fuente un archivo llamado mine.mp4. Podemos emplear también Youtube.

---