Quantcast
Channel: Microsiervos
Viewing all articles
Browse latest Browse all 4878

Los tutoriales de Layout Land: técnicas CSS Grid y Flexbox para crear páginas web adaptables

$
0
0

Los vídeos de Layout Land son probablemente la mejor forma de pasar un rato aprendiendo sobre CSS, Flexbox y diseño web que hay actualmente. Son un admirable trabajo de Jen Simmons, una infatigable diseñadora de Mozilla que además es miembro del Grupo de Trabajo de CSS del W3C (wiki), donde lleva más de una década trabajando en la definición de estándares y creando herramientas para trabajar con ellos.

Descubrí sus primeros vídeos sobre Flexbox y CSS Grid buscando soluciones a algunos problemas técnicos. A partir de ese momento revisar todos los vídeos que ha publicado en su canal –unos 18 en apenas un mes– se convirtió en una peregrinación diaria. Quizá los mejores 10 o 15 minutos del día.

JenSimmons

No sólo es que Simmons lo explique bien y con un excelente estilo, es que además lo hace con ejemplos visuales, ideas prácticas y consideraciones de todo tipo – como la forma de crear un CSS resiliente que funcione tanto en navegadores modernos como antiguos o cómo ser creativo cuando se trabaja para diversos dispositivos.

CSS Grid Flexbox
Soporte en los navegadores de CSS Grid y Flexbox: más del 85-95% / CanIUse.com

Layout Land tiene ya miles de personas suscritas y seguro que alcanza pronto cifras astronómicas; es uno de esos sitios de «suscripción obligatoria», donde a cada minuto dedicado se le saca partido.

Aunque la web de Layout Land todavía está «en obras» –hay que apuntarse para recibir el aviso cuando se lance– el código de muchos ejemplos se puede ver en acción en The Experimental Layout Lab of Jen Simmons. Hay ejemplos tanto de CSS Grid (cuya traducción como cuadrículas o rejillas no cuajará) como de Flexbox (cajas flexibles).

Como recalca Simmons, no se trata de elegir entre CSS Grid o Flexbox, porque muchas veces pueden usarse juntos. La práctica totalidad de los navegadores modernos ya los soportan de un modo u otro –y sin necesidad de JavaScript, JQuery y similares– y hay formas bastante simples de adaptar el código por si acaso algún dispositivo no lo soporta (pensando en «cosas raras» como PCs anclados con Internet Explorer antiguos, «neveras con Internet», móviles antiguos y cosas así).

Relacionado:

# Enlace Permanente


Viewing all articles
Browse latest Browse all 4878

Trending Articles