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):
La descripción nos muestra una breve reseña de lo que ofrece la página Web.
Después de haber hecho la consulta “baseball cards”, nuestra página web aparece como un resultado, con parte de su descripción del 
El título de la página principal de nuestro sitio, muestra el nombre de la empresa y tres áreas de enfoque.
Nuestra página Web aparece como resultado de ello, y como vemos el título aparece en la primera línea.