Trazando el horizonte digital: Una inmersión en HTML5 y sus innovaciones para experiencias Web Modernas
Introducción a HTML 5, ¿Qué es?
Html 5 es un lenguaje de etiquetas que tiene como objetivo mejorar la experiencia del usuario con herramientas que permiten la personalización de los sitios web, esta nueva actualización permite que los sitios web tengan un único lenguaje porque permite que tenga compatibilidad con los navegadores web y Esta actualización fue publicada el 28 de octubre del 2014 en el World Wide Web Consortium.
En esta nueva actualización se incluyeron diversas etiquetas que permiten incluir contenido multimedia sin la necesidad de plugin. Esto permite que los documentos tengan un tamaño inferior, lo que disminuye el tiempo de carga.
Entonces permite que los recursos gráficos y audiovisuales puedan ser analizados de manera óptima en cualquier tipo de navegador y dispositivo, dentro de las herramientas que posee se encuentra la geolocalización que permite personalizar la experiencia ya que ofrecerá contendió específico por región incluyendo su idioma de preferencia y También incluye la posibilidad de implementar acciones de reproducción e interacción creando experiencias cómodas y completas a los usuarios.
Por las características de esta nueva actualización, se convierte en una herramienta demasiado importante para ofrecer a los usuarios una mejor experiencia al visitar los sitios webs. Para los desarrolladores también ha sido una herramienta útil y gracias a esta actualización en el ámbito de las páginas web y desarrollo de aplicaciones se ha visto un gran avance a nivel utilitario y a nivel estético dando una experiencia tanto para usuario como para desarrollador formidable.
El (hipertext markup language), el número cinco hace referencia a la versión del programa, imagen en webp
se trata del lenguaje de codificación más conocido, es utilizado para estructurar y mejorar la experiencia del usuario en el uso de las páginas web
La evolución del Internet y la importancia de HTML5:
En esta nueva era digital, HTML 5 se ha convertido en el lenguaje insignia para editar, crear y presentar contenido en la web, innovando con algunas de las siguientes características en el desarrollo web actual.
Capacidad de almacenamiento local en Html 5
Esta Novedad da la facilidad a las páginas web que necesitan almacenar datos en el equipo del usuario y trabajar sin conexión a internet, algunos de los ejemplos de esta categoría son:
- Data atributos- Es el más sencillo y flexible permitiendo almacenar en atributos data con etiquetas HTML pilares de información
- Sessión Storage- Cuando el usuario tiene ventanas abiertas, los pares de claves de valor son almacenados a nivel local, pero cuando la ventana sea cerrada estos datos desaparecerán.
- Local-storage– Almacena igual pares de claves de valor, Sin embargo, está información perdura con el tiempo sin importar que el usuario cierre su ventana en el navegador.
- WebSQL Database-HTML 5 nos da la oportunidad de almacenar una base de datos local con estructura de tablas en el navegador usando SQL.
- IndexDB Storage- Esta optimización nos permite almacenar en la base de datos local NoSQL La información o datos requeridos utilizando objetos de JavaScript
- File System API- Su función se basa en permitirnos almacenar ficheros binarios de forma local, siendo útil para los casos en que se requiera almacenar videos o audio de forma local para posterior reproducción.
- Offline Page/Application Cache- las ultimas actualizaciones de HTML 5 permiten definir políticas de “cache” esto consiste en que todo el contenido descargado no llegue a estar disponible o al momento que se quiera acceder de una forma más rápida, se pueda lograr con el contenido que están en la cache.
Mejora para motores de búsqueda con Html 5
HTML 5 Brinda una estructura más clara y concisa para el contenido en línea, facilitando para los motores de búsqueda entender y organizar el contenido de manera funcional, esto lo podemos lograr gracias a las siguientes herramientas:
- Web Sockets- Esta característica se basa en una interfaz de programación de aplicaciones (API) la cual permite una conexión permanente entre una página y el servidor en tiempo real, permite crear plataformas web de manera más fácil y que se actualicen en tiempo real.
- Web Storage– Permite a las aplicaciones web aumentar su capacidad de almacenamiento de datos en el navegador, incrementando la posibilidad de recuperarlos de forma más inteligente y obteniendo más control en como los navegadores guardan ciertos tipos de páginas para agilizar la carga.
- Reducción del código JavaScript- Optimiza el rendimiento de los navegadores ya que entre menos JavaScript hay un aumento de la velocidad y rendimiento en la carga de las páginas web
- Aumento de la interoperabilidad– Las nuevas actualizaciones de HTML5 es el analizador de navegación “parser” donde se si se identifica un error en el código de una página web el analizador dará respuesta y solución inmediata, para seguir navegando sin inconvenientes.
Compatibilidad con multimedia
HTML 5 Llega brindándonos la posibilidad de incluir archivos de audio y video sin la necesidad de requerir el uso de un complemento como (Flash) dándole a los desarrolladores la posibilidad de incluir contenido multimedia a sus sitios web dando la oportunidad de una experiencia al usuario más fluida y sin interrupciones
Compatibilidad con dispositivos móviles
La nueva versión de HTML 5 incluye la mejora en gráficos y animaciones con el elemento <Canva> lo que le permite al programador la opción de dibujar gráficos y animaciones sin la necesidad de usar plugin externos.
HTML 5 también innova con la posibilidad de adaptación de la pantalla a diferentes tamaños dando más accesibilidad a distintos tipos de usuarios y otra de las grandes ventajas y es que viene con tecnología de código abierto dándole la oportunidad a cualquier desarrollador de utilizarla sin tener que pagar por licencias y también llega con la compatibilidad para dispositivos iOS o Android ampliando la cantidad de usuarios que pueden usar estas API.
En el tema de actualizaciones HTML 5 cuenta con un sistema de herramientas y frameworks de desarrollo web que le permiten a las aplicaciones actualizarse automáticamente entonces cuando se actualiza el sitio web entonces en el momento que se esté desarrollando una aplicación para dispositivo móvil con HTML 5 se recomienda optimizar la carga de velocidad de la aplicación, esto debido a que los usuarios de dispositivo móvil cuentan con una conexión a internet más lenta que los usuarios de escritorio y también se les recomienda a los desarrolladores que hagan pruebas exhaustivas a sus aplicaciones en distintos dispositivos móviles para verificar su correcto funcionamiento dándole al usuario una óptima experiencia al momento de usarla.
Tipos de archivos compatibles con HTML5
Posee una alta compatibilidad con archivos de imagen como: JPEG, GIF, PNG, SVG Y Web, en cuanto a los archivos de audio y video se encuentran: Mp3, Mp4, WAV, AAC, Ogg, para utilizar los archivos multimedia, se debe verificar la compatibilidad de los formatos que se desean utilizar con el navegador web
Etiquetas multimedia
HTML5 brinda al desarrollador diferentes etiquetas que permiten agregar contenido multimedia y esto permite aumentar el llamativo y atractivo visual creando una mejor experiencia al usuario. Además, estas etiquetas podrán crear experiencias personalizadas en cuanto a la presentación del contenido. Entre estas modificaciones se encuentran la reproducción automática y la introducción de subtítulos.
Tipo de etiquetas en Html 5:
Etiqueta de imagen:
- Img: Su función es poder insertar imágenes en el sitio web
- Picture: Permite seleccionar imágenes en diferentes resoluciones y tamaños para facilitar su visualización.
- Source: Se encuentra dentro de la etiqueta picture y es utilizada para agregar diversas versiones de imagen según el dispositivo que el usuario vaya a utilizar, esto va a acompañado de la media query ya que permite la selección de imágenes apropiadas en base a la resolución de la pantalla del dispositivo.
- Figure: Permite agrupar imágenes con un título o descripción especifica
- Figcaption: Esta etiqueta viene incluida en la etiqueta figure y permite la creación de textos
Etiqueta de audio y video:
- Audio/ video: Se utiliza para insertar audio /video al sitio web
- Source: Da información de la URL y el tipo de archivo
- Track: Se utiliza para agregar descripciones de audio/ video y va acompañado de la etiqueta src y kind
- Audio controls / video controls: Se utiliza para agregar botones de reproducción – pausa y volumen.
- Audio autoplay / video autoplay: Permite que de manera automática se reproduzca los archivos de audio.
Geolocalización en HTML 5
Una de las novedades con las que llega HTML 5 es la geolocalización del usuario siempre y cuando el usuario acepte y este en un navegador que soporte esta actualización. Esta API se apoya entonces de varios medios para lograr la ubicación del usuario como la dirección IP, la localización GPS, Wifi y redes de telefonía móvil, esta última HTML 5 se apoya de las torres de telefonía donde el usuario ha estado conectado para brindar esta información.
Para utilizar el API debe existir compatibilidad con el navegador y verificar si el navegador permite utilizar esta función.
Funciones principales:
- Función callback de error: Tiene como función manejar diversos errores que se generen durante la operación, entre ellos esta:
- Error desconocido
- Time out en respuesta
- Ubicación bloqueada
- Ubicación en Google: Para obtener nuestra ubicación actual en un mapa específicamente en Google se enlazan el API de geolocalización y el API de Google Maps donde se convertirán las coordinadas de latitud y longitud y finalmente se creará un mapa con la información de la ubicación
En el siguiente video se encuentran de manera detallada las características y funcionamiento de HTLM5 donde se puede abordar un poco más profundo el tema de HTML 5
Link video YouTube: https: https://youtu.be/hKPYkxdbRiY
Créditos:
Autor: Alan Kalef Bermúdez Ramirez
Editor: Carlos Iván Pinzón Romero
Código: UCPAG4-1
Universidad: Universidad Central
Fuentes
Garro, A. (2014, enero 28). ¿Qué es HTML5? Arkaitzgarro.com. https://www.arkaitzgarro.com/html5/capitulo-1.html Ridge, B. V. (2023, agosto 20). La Importancia de HTML5 en el Desarrollo Web Actual. MEDIUM Multimedia Agencia de Marketing Digital; Medium Multimedia. https://www.mediummultimedia.com/web/cual-es-la-funcion-de-html5/ Álvarez, C. (2015, enero 24). HTML5 y sus tipos de almacenamiento. Genbeta.com; Genbeta dev. https://www.genbeta.com/desarrollo/html5-y-sus-tipos-de-almacenamiento Larios, I. (2023, marzo 21). Explorando las etiquetas multimedia de HTML5: Cómo crear contenido atractivo y dinámico. Designicode. https://designicode.com/2023/03/21/explorando-las-etiquetas-multimedia-de-html5-como-crear-contenido-atractivo-y-dinamico/
