HTML5 – Que nos trae de nuevo

Si hablamos de HTML5, deberíamos también hablar de CSS3 y de Javascript, ya que son los tres componentes que van a compartir protagonismo en la web.

Es por eso que vamos a revisar que novedades traen, y que diferencias aportan respecto a recomendaciones anteriores.

Si queremos hacer un resumen simplista de las novedades que aporta HTML5, podríamos decir algo como esto:

• Simplificación del Doctype ( < !DOCTYPE HTML >)
• Etiquetas semánticas, para poder sustituir DIV y darles sentido
• Etiquetas de audio y video que son atendidas directamente por el navegador
• Integración de la validación de datos en los navegadores
• Etiqueta <canvas> con soporte 2d, y en breve 3D
• Supresión de etiquetas y atributos de formato
• Web Local Storage, lo que deja a las cookies en pañales
• Soporte para arrastrar y soltar

que podemos añadir a las novedades aportadas por CSS3:

• Colores transparentes y/o degradados
• Nuevos selectores
• Bordes redondeados y decorados
• Tipos de letras personalizado
• Presentación de texto en varias columnas
• Transformaciones, transiciones y animación sin Javascript
• Sombras en los textos y cajas

Durante este curso, iremos explicando como utilizar  todos estos recursos, y sobre todo, como podemos encontrar mas información acerca de ellos (ver también Bibliografia)

Finalmente, y cerrando lo que podríamos considerar los prolegómenos del curso, os adjunto  la lista de las principales novedades de HTML5, ya que aunque iremos explicando como trabajar con HTML, siempre lo haremos desde el punto de vista de esta nueva recomendación.

El siguiente cuadro, que he visto en un monton de sitios,…proviene de wikipedia. Y considero que es un interesante resumen de las diferencias existentes entre HTML4.o y HTML 5.0

Notas: En amarillo aquellas etiquetas introducidas en esta nueva versión (en rojo aquellas que fueron eliminadas de la especificación HTML5), en azul las etiquetas que han sido cambiadas todo o en parte y en gris las etiquetas eliminadas de esta versión. Si bien en la práctica los navegadores no lo están teniendo en cuenta para evitar perder cuota de mercado.

Una última recomendación. No todos los navegadores esta preparados para todas las nuevas etiquetas de HTML 5, y las nuevas reglas de CSS3, esto ha hecho que se popularice algo que llaman Polyfill ;  que no es ni mas ni menos que un código (normalmente Javascript), que me permite disponer, en este caso, de las propiedades del HTML5, en aquellos navegadores que todavía no las tengan implementadas. Y eso lo hacen para alguna etiqueta en concreto, o de forma genérica, para cualquier etiqueta.

Durante el curso iremos hablando de ellos, aunque la rutina mas conocida y que nos permite gestionar polyfills es Modernizr,  de visión generalista, que soluciona la mayoría de problemas por incompatibilidad, en Github encontrarás una lista de los polyfill con que podemos solucionar la mayoría de problemas, aunque puede que para algún caso concreto, tengamos que tirar de alguna que otra herramienta.

También hay un sitio, http://www.initializr.com/, que con un pequeño dialogo nos deja lista la estructura de nuestra pagina, pero todo ello lo dejaremos para cuando el HTML no tenga secretos para nosotros.

En http://html5please.com/ encontrareis una preciosa lista acerca de lo que conviene y no conviene usar, y si sois metódicos, en http://fmbip.com/litmus, tenéis la situación actual de la implementación de HTML5.0 y CSS3 en los principales navegadores y versiones; recordad que la recomendación HTML5.0 no tienen previsto que esté acabada hasta 2020, con lo que mientras tanto, deberemos disfrutar de las nuevas herramientas, con mucho cuidado. Y para que no perdáis tiempo, os dejo una dirección que os permitirá conocer que funciona y que no, en vuestro navegador; para ello, solo tenéis que visitar http://html5test.com/

Y antes de aparcar este tema, quiero recordaros que HTML5 adquiere una especial relevancia en el mundo de los móviles; por un lado, su implementación está mucho mas avanzada, ( http://mobilehtml5.org/), y por otro, dispone de la suficiente potencia como para ofrecer una alternativa interesante al desarrollo de aplicaciones de móviles, dejando aparte, que hay productos para transformar un conjunto de paginas HTML5 en una aplicación móvil (phonegap)

Esto es todo lo que quería explicar antes de empezar a trabajar , en el próximo artículo, veremos como preparar nuestra máquina, y como escribir nuestra primera página.