10 diciembre, 2023

Todo Programación

Cursos, código fuente y ejemplos.

Html 5 – Capítulo 07 – Elementos avanzados

2 minutos de lectura
Html 5, Capítulo 07, Elementos avanzados

La versión más reciente, HTML5, no solo ofrece las características básicas de la web, sino que también introduce elementos avanzados que permiten una mayor interactividad y riqueza en la experiencia del usuario. En este capítulo, exploraremos algunos de estos elementos avanzados, como <canvas>, <svg>, <audio> y <video>, junto con ejercicios resueltos para comprender mejor su uso.

<canvas>: Gráficos Dinámicos

El elemento <canvas> proporciona una superficie rectangular en la que puedes dibujar gráficos y animaciones a través de JavaScript. Es especialmente útil para crear visualizaciones personalizadas, juegos simples y otras experiencias interactivas.

Teoría:

<canvas id="miCanvas" width="400" height="200"></canvas>
  • El atributo id permite acceder al elemento en JavaScript.
  • Los atributos width y height definen el tamaño del lienzo en píxeles.

Ejercicio Resuelto:

<canvas id="miCanvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById('miCanvas');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 100, 100);
</script>

Este código crea un lienzo azul de 400×200 píxeles y dibuja un rectángulo azul en las coordenadas (50, 50) con un ancho y alto de 100 píxeles.

<svg>: Gráficos Vectoriales Escalables

El elemento <svg> permite la creación de gráficos vectoriales escalables, que son ideales para crear imágenes nítidas a cualquier resolución.

Teoría:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>
  • Los elementos gráficos, como <circle>, se utilizan para dibujar formas.
  • Los atributos como cx (coordenada x del centro), cy (coordenada y del centro) y r (radio) definen el círculo.
  • El atributo fill establece el color de relleno.

Ejercicio Resuelto:

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

Este código crea un rectángulo azul en coordenadas (10, 10) con un ancho y alto de 80 unidades.

<audio> y <video>: Multimedia Integrada

Los elementos <audio> y <video> permiten la reproducción de contenido multimedia, como audio y video, directamente en la página web.

Teoría:

<audio controls>
  <source src="mi-audio.mp3" type="audio/mpeg" />
  Tu navegador no admite el elemento de audio.
</audio>

<video controls width="400" height="300">
  <source src="mi-video.mp4" type="video/mp4" />
  Tu navegador no admite el elemento de video.
</video>
  • El atributo controls agrega controles de reproducción.
  • El elemento <source> define la fuente y el tipo de archivo multimedia.
  • El contenido alternativo se muestra si el navegador no admite el elemento.

Ejercicio Resuelto:

<audio controls>
  <source src="mi-cancion.mp3" type="audio/mpeg" />
  Tu navegador no admite el elemento de audio.
</audio>

<video controls width="400" height="300">
  <source src="mi-video.mp4" type="video/mp4" />
  Tu navegador no admite el elemento de video.
</video>

Este código inserta un reproductor de audio y video con controles en la página.

Conclusiones

HTML5 introduce elementos avanzados como <canvas>, <svg>, <audio> y <video>, que permiten crear experiencias web más interactivas y atractivas. Mediante ejercicios resueltos, hemos demostrado cómo utilizar estos elementos para dibujar gráficos, mostrar imágenes vectoriales y reproducir contenido multimedia.


Copyright © Todos los derechos reservados. | Newsphere por AF themes.