CSS3 y HTML5 están ya llegando poco a poco, y con ellos toda una nueva batalla por conseguir el mejor marcado. Estas nuevas tecnologías facilitarán también la integración de plantillas o maquetas a los desarrolladores. Por el contrario, tenemos que obtener una nueva ideología y modificar nuestros hábitos de codificación para mantener la Web Accesible.
Poco a poco nos tenemos que familiarizar con estas nuevas tecnologías (css3 y html5), ya que serán las que utilizaremos en un futuro no muy lejano. Todo esto va en continuo progreso así que nos conviene ir entrando en contacto.
Así que hoy vamos a experimentar un poco con estas nuevas tecnologías. Al final de este artículo aprenderemos cómo:
- Uso de Graceful Degradation, las técnicas y tecnologías para mantener las cosas en su lugar en los navegadores.
- Utilizar técnicas de mejoras y las tecnologías para estar al día con las últimas tendencias.
- HTML5 junto a un aumento de la tecnología: microformatos.
- Tener una visión clara de algunas de las más emocionantes nuevas características que CSS3 y HTML5 traerá.
La Mejora Progresiva y el Graceful Degradation
El Graceful Degradation es un término que se usa para definir lo siguiente; Cuando utilizamos las tecnologías mas recientes luego debemos conseguir fijar todo para los distintos navegadores que no la soportan. Esto lo hacemos a diario, creamos un código para Firefox y luego otro alternativo para arreglar los problemas en Internet Explorer y otros navegadores. Como hacemos la mayoría de nosotros (al menos yo), creamos primero el marcado y luego creamos la hoja CSS.
Cuando hablamos de mejora progresiva se refiere a la costumbre de construir primero para los navegadores “menos capaces”, (navegadores antiguos) y, a continuación, para aplicar las últimas tecnologías en los navegadores más potentes o recientes.
Diseño
Os muestro un diseño básico estructura para entender y visualizar claramente la organización del ejemplo de una Web con HTML5, este es la plantilla que conseguiremos maquetar al final del ejemplo:
El marcado
Os escribo el marcado básico inicial que usaremos antes de empezar:
Resumiendo…
3 diferentes comentarios condicionales para IE. En primer lugar incluye un código de Shiv html5 directamente desde Google Code para todas las versiones de IE. La segunda incluye el archivo IE8.js para una mejor compatibilidad de IE7 e inferiores, así como un archivo que ie.css spara solucionar los bugs de Internet Explorer. Y una tercera únicamente para bugs de IE6. Una tercera es simplemente un archivo CSS para arreglar bugs IE6.
Esta es una base muy sólida y de inicio para cualquier proyecto con HTML5 que podríamos hacer en el futuro. Con esto, podemos empezar a asignar etiquetas a las diferentes secciones de nuestro diseño. En la imágen vemos como quedaría la estructura Web de nuestro código:
Ejemplo práctico HTML5
Ahora vemos como quedaría el código HTML5 de nuestro ejemplo:
Smashing HTML5! HTML5 in the year 2022 2009
-
This be the title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo non sapien dapibus blandit nec et leo. Ut ut malesuada tellus.
-
...
-
...
Activando el HTML5
Como hemos dicho antes la mayoría de los navegadores no entienden de HTML5 actualmente. Y desde que están desarrollo se ha discutido por los estilos por defecto que contendran las nuevas etiquetas. Por lo tanto estas etiquetas que no existen paa el navegador vendrán sin estilos, por lo tanto les aplicaremos los estilos para elementos de bloque:
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
Ahora podremos usar estas nuevas etiquetas como si fuesen <div>
Bueno después de una breve explicación os dejamos ver el ejemplo una vez finalizado, para que podáis estudiarlo por completo y ver como funcionan conjuntamente estas 2 nuevas tecnologías (CSS3 HTML5):
Cada vez que veo un artículo de HTML5 de este tipo, veo el gran cambio que va a suponer para las futuras páginas Web que desarollaremos, logicamente el cambio será a mejor, o eso parece. Y para cuando XTHML2?
Bueno pues hablando de XHTML2 y HTML5, como era de esperar les informo de que la W3C ha decidido cancelar el grupo de trabajo de XHTML2 para finales de este año. Y así poder dar más empuje a HTML5 y su gran potencial, ya que realmente esta tecnología es el futuro próximo del desarrollo Web.
La diferencia básica entre HTML y XHTML era que el segundo se basaba en XML. Si HTML5 ya se basa en XML (que no estoy seguro) entonces XHTML2 no tendría sentido (¿?).
Había oido hace tiempo que iban a cancelarlo, pero veo que continuan… o continuarán cuando HTML5 esté listo.
A ver que pasa con todo esto…
Me acabo de encontrar con un comic que publicaron el Smashing Magazine que explica que XHTML 2 no tiene nada que ver con XHTML.
XHTML2 era un intento por crear un lenguaje nuevo. Cito: “It was an attemp at a fresh star, to create a theoretically “pure” vocabulary with the concern for backwards compatibility”. No sabría muy bien como traducirlo, pero es algo así como “un intento de un nuevo comienzo para crear, en teoría, un vocabulario “puro” con poca preocupación por la compatibilidad hacia atrás.
Se podría decir que HTML5 más que la evolución de HTML 4.02 es la evolución de XHTML.
En definitiva, que detengan el proyecto de XHTML2 no significa que no tengamos páginas con marcación extricta y basada en xml.
Hola muy buen artículo, os recomiendo para los que queráis aprender que visitéis la comunidad hispana de desarrolladores de HTML5,
http://www.foroshtml5.com
saludos!