Este será el último artículo de nuestra serie sobre HTML5. A continuación, veremos brevemente qué nuevas tecnologías HTML5 son compatibles con los principales navegadores y analizaremos algunas técnicas que puede utilizar para aprovechar los nuevos elementos de su codificación actual. Finalmente, analizaremos cómo debe comenzar a prepararse para admitir HTML5 en todos los sitios que cree a partir de ahora.
¿Qué características soportan oficialmente los principales navegadores?
A los efectos de este artículo, definiremos "soporte oficial". como se indica en la documentación del desarrollador del navegador. Esto asegurará que no se requieran trucos ni trucos para usar las nuevas funciones y, en cambio, se enfocará en la implementación nativa directamente desde la fuente (¡siéntase libre de agregar sus propios comentarios basados en los resultados de sus propias pruebas!). Teniendo esto en cuenta, echemos un vistazo a las iteraciones actuales de algunos de los principales navegadores.
Firefox 3.5
Dirígete a la página para desarrolladores de Firefox y verás una breve descripción de la compatibilidad con HTML5. Aquí hay una lista de características compatibles:
- elemento de audio
- elemento de video
- elemento lienzo
- Especificación de recursos fuera de línea
- API de arrastrar y soltar
Safari 4
La lista de características de Safari 4 menciona el soporte para las siguientes características:
- Elementos de audio y video (y API asociada)
- Elemento lienzo (en realidad creado por Apple para Dashboard)
- Soporte de aplicaciones sin conexión
Internet Explorer 8
Aunque el Centro de Desarrolladores de Internet Explorer reclama? Apoyo fuerte? para HTML5, no parece haber ningún soporte para el elemento del lienzo (probablemente debido a Silverlight), los elementos de audio / video o la API de la aplicación sin conexión. Aquí hay una lista completa de los elementos soportados de IE 8, ninguno de los cuales parece ser exclusivamente de HTML5. Sin embargo, encontré una mención al soporte de la nueva API de mensajería entre documentos. Siéntase libre de compartir cualquier recurso que tenga sobre el soporte de HTML5 en IE 8 usando los comentarios a continuación.
Ópera 10
El sitio para desarrolladores de Opera publicó un artículo sobre HTML5 en enero que contiene soporte existente. Aquí están las características que el artículo enumera como es soportado actualmente por Opera 10:
- elemento de video
- elemento lienzo
- Mensajes entre documentos
- Eventos enviados por el servidor
- Formularios Web 2.0
Además, aquí hay un informe sobre las especificaciones web actuales compatibles con Opera Presto 2.3 (motor de renderizado de Opera).
Google Chrome
Incapaz de encontrar una lista oficial directamente de Google, me vi obligado a recurrir a un artículo de O'reilly que describe un discurso pronunciado por el vicepresidente de ingeniería de Google en HTML5 y el futuro de las tecnologías web. En su discurso, Vic Gundotra enumeró estas características como compatibles con Google Chrome (además de Firefox, Safari y Opera):
- elemento de video
- elemento lienzo
- API de geolocalización
- Caché de la aplicación (API de la aplicación wep sin conexión)
- API de base de datos
- Trabajadores Web (procesamiento de hilos de fondo)
Engañando
Como puede ver, incluso los navegadores que tienen la mayor compatibilidad con HTML5 todavía no admiten ni siquiera la mitad de las nuevas características y elementos que hemos analizado en artículos recientes. Lo que significa que usar HTML5 hoy no será tan fácil como simplemente lanzar los cambios semánticos que ha aprendido. Lo que necesitaremos es una forma de crear los nuevos elementos en HTML5 utilizando solo las tecnologías web ampliamente utilizadas y compatibles de hoy. Como resultado, JavaScript ofrece un método simple y nativo para hacer exactamente esto. Mediante el uso document.createElement, podemos hacer nuestros propios elementos personalizados que se ajusten a las especificaciones de los que se admiten en HTML5. Claro que es un poco pirateado, pero es lo más cercano que tendrás a la mano en todos los nuevos elementos en un futuro cercano. Usemos el ejemplo de nuestro artículo anterior para ver cómo se vería esto.
Como puede ver, esta página utiliza el encabezado, pie de página, artículo, aparte, navegación y sección de elementos solo para HTML5. Todo lo que tenemos que hacer para que esto funcione es crear esos elementos en JavaScript:
Voila! Ahora puede orientar esos elementos en CSS como si fueran elementos nativos. Advertencia: Este método puede producir resultados muy variados y usted debe utilizar bajo su propio riesgo. Si alguien visita tu sitio con JavaScript desactivado, tu CSS no se apoderará y tu bonito y bonito sitio web HTML5 se verá como si hubiera sido atacado por Godzilla. Sin embargo, este método es ideal para su propia experimentación y debería funcionar con todos los principales navegadores.
Pruebas adicionales
En mis propias pruebas, tanto Safari como Firefox parecían manejar todos los nuevos elementos enumerados anteriormente sin ningún tipo de JavaScript. Si observa el código, puede ver que la página acerca de Safari 4 de Apple utiliza varios elementos HTML5 nuevos y solo implementa JavaScript en el caso de Internet Explorer. ¡Prueba esto en tu navegador y dinos lo que se te ocurre!
Preparando para HTML5
En su sitio, Jon Tangerine sugiere que debemos comenzar a prepararnos para HTML5 utilizando la estructura inherente a los cambios semánticos. Lo que esto significa prácticamente es bastante simple, use clases para imitar la estructura de una página HTML5.Este método no es específico del navegador, se adhiere a todos los estándares actuales, no se basa en scripts y es muy fácil de implementar. Por ejemplo, tomaríamos todas las etiquetas de encabezado en el código anterior y las convertiríamos a
Ahora, si realmente desea prepararse adecuadamente para HTML5, no se limite a lanzar los términos encabezado, pie de página, sección, etc. Oblígate a usar estos términos semánticamente, como si fueran los elementos reales de HTML5. En primer lugar, esto significa usar clase en lugar de carné de identidad donde corresponda. También significa adherirse a las estrictas directrices de HTML5 para cada elemento (descritas en el artículo anterior). Un ejemplo de esto sería usar solo un nav clase en las principales áreas de navegación de una página y no para enlaces de navegación menores como los que se encuentran en el pie de página.
5 sitios usando HTML5
A pesar de que mi consejo oficial es que HTML5 no estará listo para el uso popular por algún tiempo, tengo que admirar los sitios que están tomando la iniciativa para marcar el comienzo del desarrollo web mediante el uso de HTML5 hoy. Aquí hay cinco sitios que hacen precisamente eso. Simplemente haga clic en una foto para ver el sitio. Asegúrese de echar un vistazo al código que cada desarrollador usó para tener una idea de la estructura de algunos ejemplos reales de HTML5. Además, si has desarrollado un sitio en HTML5, ¡queremos verlo! Deja una URL en los comentarios para que podamos revisarla.
Conclusión
Bueno, eso concluye nuestra serie de cuatro partes en HTML5. Hemos analizado los conceptos básicos, cómo utilizar algunos elementos nuevos seleccionados, los principales cambios semánticos y cómo implementar HTML5 ahora mismo. Espero que hayas aprendido mucho y ahora estés más emocionado y menos aprensivo sobre el futuro de HTML. Sus comentarios son fundamentales para lo que escribimos en los artículos, así que díganos qué opinó de la serie y qué le gustaría que veamos en el futuro.