Desde la estandarización del HTML5 en 2008 por el W3C y el desarrollo del  CSS a CSS3, se ha  avanzado mucho en temas como en la animación, efectos (2D-3D), interacción (pseudoclases), el video Html, pero queda un tema pendiente la maquetación web.

La maquetación web suele ser un tema arduo todavía para los deserrolladores, contamos con herramientas como el posicionamiento, floats, overflows o las pseudoclasses :before y :after, pero hacen la maquetación muy costosa y más si le sumamos que debe ser la página responsive, porque debemos adaptar las instrucciones a cada tamaño de pantalla.

De ahí que han surgido dos nuevos temas: Flexbox y Grid Layout.

Flexbox CSS3, es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. El sistema flexbox es una gran mejora, sin embargo, está orientado a estructuras de una sola dimensión, por lo que aún necesitamos algo más potente para estructuras web. Con el paso del tiempo, muchos frameworks y librerías utilizan un sistema grid donde definen una cuadrícula determinada, y modificando los nombres de las clases de los elementos HTML, podemos darle tamaño, posición o colocación.

Antes de comenzar con Grid CSS, es conveniente dominar el sistema Flexbox, ya que Grid toma la filosofía y bases de él, añadiéndole numerosas mejoras y características que permiten crear rápidamente cuadrículas sencillas y potentes.

Paco Luque de Espai (www.espai.es), empezó explicando la evolución del html5 y css3 a través de un ejemplo, donde con la ayuda de los asistentes intentaban maquetar con las herramientas “clásicas”, floats, posicionamientos….. después de dedicarle casi una hora nos mostró como sería la misma maquetación con la tecnología FLexBox de CSS3, que lo hizo en 15 minutos y muchas menos líneas, y después mostró la tecnología Grid, que aunque en este caso para aplicarla tenemos que cambiar la estructura HTML, tardó unos 10 minutos.

La exposición fue como podéis apreciar del todo esclarecedora para alumnos del ciclo de DAW, para no sufrir más una maquetación ardua y complicada. Muchas gracias a Espai por su colaboración en este día de Jornadas Tecnológicas en Stucom