HTML Básico

Inicio / Tema / HTML Básico / APIs de HTML5 y Elementos Avanzados

APIs de HTML5 y Elementos Avanzados

Introducción a las APIs de HTML5

HTML5 introduce nuevas APIs que permiten agregar funcionalidades avanzadas directamente en el navegador. Estas herramientas enriquecen la experiencia del usuario y permiten que las aplicaciones web sean más interactivas y eficientes.

Mejoras en Audio y Video (`<audio>`, `<video>`, `<source>`)

Con HTML5, la integración de audio y video se ha vuelto más versátil. Puedes usar la etiqueta <source> dentro de <audio> y <video> para proporcionar diferentes formatos, asegurando la compatibilidad en todos los navegadores.

html

"Este código de video usa dos fuentes con diferentes formatos. Si el navegador no soporta el primero, intentará el segundo, mejorando la compatibilidad."

API de Geolocalización

La API de Geolocalización permite obtener la ubicación del usuario, con su consentimiento, para mostrar contenido relevante. Es ideal para aplicaciones de mapas o servicios basados en la localización.

javascript

"Este ejemplo usa la API de Geolocalización para obtener la ubicación del usuario. Se muestra la latitud y la longitud en la consola si el usuario concede el permiso."

API de Arrastrar y Soltar

La API de Arrastrar y Soltar permite mover elementos en una página web de manera interactiva. Con draggable y eventos de arrastre, puedes crear interfaces dinámicas.

html

"En este ejemplo, el div es arrastrable. Al iniciar el arrastre, el evento setData establece el contenido que será arrastrado, en este caso, el texto que dice 'Contenido arrastrado'."

HTML Canvas Básico (`<canvas>`)

La etiqueta <canvas> permite crear gráficos y animaciones en 2D mediante JavaScript. Es útil para gráficos, juegos y visualizaciones.

html

"Aquí usamos la etiqueta canvas con JavaScript para dibujar un rectángulo azul. Primero seleccionamos el canvas y luego definimos el color y el tamaño del rectángulo."

Almacenamiento Web (Local y Session Storage)

HTML5 incluye localStorage y sessionStorage para almacenar datos en el navegador. localStorage persiste incluso después de cerrar el navegador, mientras que sessionStorage se borra al cerrar la sesión.

javascript

"Este código usa localStorage para almacenar y recuperar el nombre 'Juan'. La información almacenada se mantiene disponible incluso después de cerrar el navegador."

Cierre del Capítulo

Ahora sabes cómo usar algunas de las APIs y elementos avanzados que HTML5 tiene para ofrecer. En el próximo capítulo, exploraremos cómo insertar contenido externo en tu sitio web mediante iFrames y otras técnicas de incrustación.

Volver al capítulo anterior

Marcar como leìdo y continuar

Pregúntame lo que sea