Hubo un hecho importante en los inicios de HTML5 y fue cuando Steve Jobs ya no permitió el uso de componentes Flash en los dispositivos con iOS y se aferró a que HTML5 podría hacer lo que Flash hacía. Ese día en particular Adobe perdió una batalla y Apple la ganó, desde mi punto de vista, creo que todos ganamos porque Flash era un problema para la seguridad de nuestras computadoras sin mencionar que devoraba la memora RAM casi en su totalidad.
Definición, ¿Qué es HTML5?
HTML5 es la versión más nueva del lenguaje de marcado HTML (HyperText Markup Language) y es usado para la estructuración y organización de los contenidos de una página, se podría decir que es el esqueleto de una página web.
Características y mejoras
Semántica
Se crearon nuevas etiquetas con el fin de indicar principalmente a los motores de búsqueda cuál es el contenido principal, de navegación y contextual. De esta forma ayudamos a mejorar la indexación en caso de que los motores de búsqueda no detecten la importancia de cada texto en nuestra página web.
Etiquetas semánticas en HTML5
Body, secction, article, aside, footer, header, nav
Es interesante ver en la página de documentación de Mozilla que hablan sobre secciones explícitas e implícitas, describe que en las explícitas puede haber un tag h1 por cada section en la misma página web, pero en el código fuente de la página de documentación usa la sección implícita donde se estructura la información por medio de las etiquetas h1, h2, h3, h4, h5 y h6.; sin hacer uso de la etiqueta section. Cuando hacemos SEO onPage usamos la sección implícita porque así se genera el código cuando escribimos usando las herramientas WYSIWYG del CMS. Ahora me queda una duda: si estructuramos usando secciones explícitas donde cada sección puede tener su propio h1, ¿cómo afecta al SEO nuestra página con respecto a los motores de búsqueda? ¿Google entiende las secciones explícitas? Estaría bien hacer algunas pruebas.
Para ver más sobre otro tipo de secciones y profundizar más, te recomiendo que veas esta página.
Conectividad
Permite comunicarse con el servidor de formas nuevas e innovadoras.
WebSockets
Es una tecnología avanzada que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor. Con esta API, puede enviar mensajes a un servidor y recibir respuestas basadas en eventos sin tener que sondear al servidor para obtener una respuesta.
Eventos de servidor enviados
Desarrollar una aplicación web que use eventos enviados por el servidor es bastante fácil. Necesitará un poco de código en el servidor para transmitir los eventos a la aplicación web, pero el lado del cliente funciona de manera casi idéntica al manejo de cualquier otro tipo de evento.
WebRTC
Web Real-Time Communications es una tecnología que permite a las aplicaciones web y sitios capturar y opcionalmente transmitir audio y / o medios de video, así como intercambiar datos arbitrarios entre navegadores sin requerir un intermediario. El conjunto de estándares que comprende WebRTC hace posible compartir datos y realizar teleconferencias entre pares, sin requerir que el usuario instale complementos ni ningún otro software de terceros.
Sin conexión y almacenamiento
Permite a las páginas web almacenar datos de forma local del lado del cliente y operar ofline de una manera más eficiente.
Recursos sin conexión
Para permitir que los usuarios continúen interactuando con aplicaciones web y documentos incluso cuando su conexión de red no está disponible, los autores pueden proporcionar un manifiesto que enumera los archivos necesarios para la aplicación web pueda trabajar fuera de línea haciendo que el navegador del usuario conserve una copia de los archivos.
Eventos con y sin conexión
Para construir una buena aplicación web con capacidad fuera de línea, necesita saber cuándo su aplicación está realmente fuera de línea. También necesita saber cuándo su aplicación ha vuelto a estado 'en línea' nuevamente.
WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.
IndexedDB
Es una API de bajo nivel para el almacenamiento del lado del cliente de cantidades significativas de datos estructurados, incluidos archivos / blobs. Esta API usa índices para permitir búsquedas de alto rendimiento de estos datos.
Uso de archivos desde aplicaciones web
Con la API de archivo, que se agregó al DOM en HTML5, ahora es posible que el contenido web solicite al usuario que seleccione archivos locales y luego lea el contenido de esos archivos. Esta selección se puede hacer utilizando un inputelemento HTML o arrastrando y soltando.
Multimedia
Se añade un mejor soporte sobre contenido multimedia permitiendo la reproducción de audio y video sin necesidad de componentes o plugins adicionales haciendo que la página reproduzca de forma nativa dicho contenido, De esta forma nuestra página tarda menos en cargar y su navegación es más rápida.
Gráficos y efectos 2D/3D
Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc. Con todo lo anterior ya no necesitamos de Flash.
Rendimiento e Integración:
En general, podemos prescindir de muchos plugins y mejorar el rendimiento y velocidad optimizando los recursos de hardware. En esta categoría se han implementado: Web Workers, XMLHttpRequest, Motores JIT compilación de JavaScript, History API, el atributo contentEditable, Arrastrar y soltar, Gestión del foco en HTML, Manejadores de protocolo basados en web, requestAnimationFrame, Fullscreen API, API Pointer Lock, Eventos en línea y fuera de línea.
Acceso al dispositivo
Proporciona APIs para el uso de la cámara, eventos táctiles, geolocalización, detección de la orientación del hardware y Pointer Lock.
CSS3
HTML5 con CSS3 se hace una mancuerna estupenda porque podríamos hacer una gran variedad de animaciones y efectos para realizar diseños sofisticados y sorprendentes con mínimos recursos de procesamiento. Se ha ampliado para ser capaz de manejar elementos de estilo de una manera mucho más compleja. Se pueden agregar sombras, bordes redondeados, transiciones, uso de tipografías externas, mejoras en el manejo de columnas y cuadros de distribución flexible.
Compatibilidad
El W3C es una comunidad internacional donde los miembros trabajan en conjunto para la desarrollo de los estándares web. Estas implementaciones aún se siguen desarrollando y podemos ver los avances aquí, cada navegador implementa estas especificaciones a su propio ritmo.
Nuevas Etiquetas
Etiquetas descontinuadas
Ejemplo de una estructura basica de una pagina web en HTML5
Referencia:
https://developer.mozilla.org/es/docs/HTML/HTML5
