Curso IT Fundamentos HTML 015_Nuevas características de HTML5

Nuevas características de HTML5

HTML5 es la última versión de HTML e introduce muchas etiquetas, atributos y funciones nuevas, mejorando enormemente la funcionalidad e interactividad de la web.

Algunas características nuevas interesantes de HTML5:

• El elemento canvas para dibujar
• Los elementos video y audio para la reproducción de medios
• Mejor soporte para almacenamiento local sin conexión
• Nuevos elementos de contenido especial como article, footer, header, nav, section
• Nuevos controles de formulario como calendar, date, time, email, url, search

<canvas>

El elemento <canvas> de HTML5 se utiliza para dibujar gráficos en páginas web. El elemento <canvas> se basa en la API de dibujo de JavaScript y se puede usar para crear varios gráficos, incluidos diagramas, gráficos, animaciones, etc.

Ejemplo:

1
<canvas width="500" height="500">
2
    Su navegador no admite la etiqueta canvas de HTML5.
3
</canvas>
4
<script>
5
    const canvas = document.querySelector("canvas");
6
    // Obtener contexto de dibujo
7
    const ctx = canvas.getContext("2d");
8
    // Dibujar círculo
9
    ctx.beginPath();
10
    ctx.arc(250, 250, 100, 0, 2 * Math.PI);
11
    ctx.fillStyle = "yellow";
12
    ctx.fill();
13
</script>

Efecto:

<svg>

El elemento SVG de HTML5 se utiliza para crear gráficos SVG en páginas web. Los gráficos SVG son gráficos vectoriales basados en XML que se pueden escalar sin pérdidas y son adecuados para diversos propósitos, incluidos:

Los elementos SVG incluyen:

• Elemento <svg>: Define el elemento raíz del gráfico SVG.
• Elemento <path>: Define formas de ruta.
• Elemento <rect>: Define formas rectangulares.
• Elemento <circle>: Define formas circulares.
• Elemento <ellipse>: Define formas elípticas.
• Elemento <line>: Define líneas rectas.
• Elemento <polygon>: Define polígonos.
• Elemento <polyline>: Define polilíneas.
• Elemento <text>: Define texto.
• Elemento <g>: Define un grupo, utilizado para agrupar elementos SVG.
• Elemento <defs>: Define atributos globales que se pueden aplicar a múltiples elementos SVG.

Ejemplo:

1
<svg width="500" height="500">
2
  <circle cx="250" cy="250" r="100" fill="yellow" />
3
</svg>

Efecto:

SVG y Canvas son herramientas para crear gráficos en páginas web. Ambos tienen sus propias ventajas y desventajas y son adecuados para diferentes escenarios.

SVG es un gráfico vectorial basado en XML que se puede escalar sin pérdidas. Esto significa que los gráficos SVG se pueden mostrar en cualquier tamaño sin perder calidad. Los gráficos SVG también se pueden manipular y animar usando CSS y JavaScript.

Canvas es una API de dibujo basada en JavaScript que puede crear gráficos de mapa de bits. Esto significa que los gráficos Canvas no se pueden escalar sin pérdidas, pero se pueden crear gráficos más complejos usando JavaScript. Los gráficos Canvas también se pueden manipular y animar usando JavaScript.

Diferencias específicas entre SVG y Canvas:

• SVG es adecuado para escenarios:

  • Gráficos que necesitan escalarse sin pérdidas, como iconos, logotipos, ilustraciones
  • Gráficos que necesitan manipularse y animarse con CSS y JavaScript

• Canvas es adecuado para escenarios:

  • Escenarios que requieren gráficos complejos, como juegos, animaciones
  • Escenarios que requieren operaciones complejas con JavaScript

Formularios HTML5

HTML5 introduce algunos nuevos tipos de entrada y atributos para mejorar la funcionalidad y facilidad de uso de los formularios.

Nuevos elementos de formulario:

• Elemento <datalist>: Se utiliza para una lista de opciones predefinidas del elemento <input>.

Ejemplo:

1
<label for="browser">Seleccionar navegador:</label>
2
<input list="browsers" id="browser" name="browser" autocomplete="off">
3
<datalist id="browsers">
4
  <option value="Chrome">
5
  <option value="Firefox">
6
  <option value="Safari">
7
  <option value="Edge">
8
  <option value="Opera">
9
</datalist>

Efecto:

Nuevos atributos de formulario:

• Atributo autocomplete de <form> / <input>: Especifica que el campo form o input debe tener la función de autocompletado. Cuando el usuario comienza a escribir en un campo de autocompletado, el navegador debe mostrar las opciones completadas en ese campo.

Ejemplo:

1
<form action="demo-form.php" autocomplete="on">
2
  Apellido:<input type="text" name="fname"><br>
3
  Nombre:<input type="text" name="lname"><br>
4
  Correo electrónico:<input type="email" name="email" autocomplete="off"><br>
5
  <input type="submit">
6
</form>

Efecto:

Nuevos tipos de input:

1
<form action="/submit" method="post">
2
  <label for="name">Nombre:</label>
3
  <input type="text" id="name" required />
4
  <br>
5
  <label for="email">Dirección de correo electrónico:</label>
6
  <input type="email" id="email" required />
7
  <br>
8
  <label for="birthday">Fecha de nacimiento:</label>
9
  <input type="date" id="birthday" required />
10
  <br>
11
  <label for="phone">Número de teléfono:</label>
12
  <input type="tel" id="phone" required />
13
  <br>
14
  <input type="submit" value="Enviar" />
15
</form>

Efecto:

[!Resumen]