Lenguaje de Marcas (25/02/2021)

Audio y Video en HTML5 y Práctica de ayuda para Proyecto

En la clase de hoy hemos empezado viendo un tutorial sobre un programa que nos permite grabar la pantalla, de cara al proyecto de Lenguaje de Marcas, donde tenemos que grabar la pantalla mientras explicamos el proceso de creación de nuestro proyecto web. Además hemos continuado viendo una parte del temario sobre audios y videos, que nos ayudarán también en la parte de nuestro proyecto de Lenguaje de Marcas sobre hacer un video, poniendo nuestra voz para explicar el desarrollo de nuestro proyecto.

Las etiquetas para audio y video en HTML5 son: <video> y <audio>. Existen diferentes tipos de formato en los que se puede o se suelen subir los videos y audios como (MP4, WEBM, OGV para vídeos y OPUS,OGG o MP3 para audios).  

Hemos seguido con un ejemplo de como introducir videos en el código html 5 mediante un ejercicio resuelto para ver en Visual Studio Code. Ejercicio en el que se ha añadido mediante algunas etiquetas como, por ejemplo:

<audio controls>

<source src="contenido multimedia" type="audio/mp3"> y <track> para los audios, con sus respectivos atributos para añadir funcionalidades al contenido.

</audio>

<video width="320" height="240" controls>

<source src="contenido multimedia" type="video/webm">

</video>

En la etiqueta del video se pueden añadir atributos como por ejemplo: "autoplay" para que el video se auto reproduzca al mostrar la web en el navegador. "loop" para que el video se reproduzca una y otra vez cada vez que termina. "muted" para iniciar el video con el sonido muteado, etc. 

En la etiqueta de audio también se puede añadir estos atributos anteriores o los que la etiqueta audio soporte, haciendo el mismo efecto pero en un audio.

Aparte hemos seguido viendo otros puntos del temario que nos pueden ayudar a la hora de realizar nuestro proyecto de Lenguaje de Marcas:

La parte de temario relacionado con la optimización de los códigos, optimización de CSS y evitar errores de, por ejemplo, duplicar propiedades varias veces para la misma etiqueta html. Se proporcionan enlaces de sitios web donde nos pueden ayudar a optimizar el código css, eliminando código duplicado por ejemplo.

La parte relacionada con los formularios, la parte html de los formularios concretamente, por si nos faltase algo por hacer o corregir en esta sección del proyecto.