Gridexamples.com: lo que te aporta trabajar en un Side Project

Este Enero hemos decidido comenzar el año en SiloCreativo de una forma distinta. Hemos suavizado la carga de trabajo durante dos semanas para tener tiempo y dedicarlo a crear un Side Project (o Proyecto paralelo si prefieres llamarlo así).

Si no has oído hablar nunca sobre lo que es un Side Project, una búsqueda en Wikipedia y encontrarás que la definición viene del campo de la música, cuando dos o más miembros de otras bandas se unen para grabar un disco o dar un concierto, generalmente con otro estilo, sin abandonar sus agrupaciones de origen. Aplicado a nuestro campo, se trataría de crear un proyecto entre varios compañeros saliendo de tu área de confort, generalmente en poco tiempo y/o en tu tiempo libre.

Con estas premisas solo nos hacía falta una idea, que en realidad la encontramos el año pasado redactando uno de nuestros tutoriales sobre CSS Grid. La cuestión es que en dicho artículo queríamos hacer referencia a alguna web en producción que ya estuviera utilizando CSS Grid y fue casi imposible encontrar alguna. Ir web por web inspeccionando código no era factible y no existía ningún showcase ni recopilatorio que tuvieran sitios reales en lugar de ejemplos y demos en Codepen. ¿Porqué no realizarlo nosotros? Así nació gridexamples.com

Cómo creamos un recopilatorio de ejemplos de CSS Grid

La idea detrás de gridexamples.com es sencilla, un showcase o recopilatorio de ejemplos de sitios en producción (sitios que estén visibles y funcionando), a modo de portfolio. Al visitante le sirve para aprender CSS Grid con ejemplos reales y a los diseñadores para poder mostrar su trabajo.

Sitios en producción con CSS Grid
Para la el diseño de la home hemos optado por una rejilla que muestra los diseños desde dos columnas hasta seis, dependiendo de la resolución de la pantalla.

Los primeros diseños los hemos seleccionado y programado para que se vayan publicando con una periodicidad relativa, pero la idea es que los propios diseñadores puedan remitir sus diseños a través de un formulario de envío de nuevos ejemplos. Esa es la idea, puesto que al tratarse de un side project el objetivo no es dedicarle demasiado tiempo a medio plazo.

En cuanto al funcionamiento interno, el site funciona bajo WordPress con un tema que hemos diseñado a medida, muy sencillo, con estilos para las páginas de listados (index.php y archive.php) y para la vista individual de cada ejemplo (single.php) donde se recogen la url de la web, el autor, las categorías, tags y otros ejemplos relacionados.

Ejemplo de web maquetado con CSS Grid
Para la página individual de cada ejemplo hemos optado por tres layout distintos según la resolución pero con el mismo HTML. Ventajas de CSS Grid!

Para la maquetación, optamos por CSS Grid (era obligatorio usarlo en una web donde vamos a hablar de CSS Grid), por lo que si visitas la web con un navegador antiguo es posible que algunas cosas salgan descuadradas. Aquí la compatibilidad actual de Grid Layout

Qué hemos aprendido al desarrollar un Side Project

Desarrollar un proyecto de este tipo tiene muchos beneficios para el equipo. Por un lado tienes que salir de tu área de confort y probar cosas nuevas, cosas que no haces en tu día a día y que sirve para desconectar, aprender algo que no sabías y también para divertirte. Por ello hemos cambiado los roles en algunas tareas durante el desarrollo del proyecto, así por ejemplo Alfonso diseñó el logotipo y la página individual de los ejemplos además de las tareas de maquetación, Verónica tocó algo de código además de sus tareas de diseño y yo diseñé la home y aprendí un poco más sobre CSS Grid.

El objetivo inicial de desarrollarlo en una semana lo cumplimos, sin embargo durante las semanas siguientes hemos realizado algunos cambios y mejoras, siempre que sea de forma voluntaria y sin quitar tiempo a otros proyectos, ya que seguiremos recibiendo los mismos beneficios en cuanto a aprendizaje tal y como hablábamos.

En nuestro caso, el proyecto estaba muy relacionado con nuestro día a día, y por ello el cambio de rol era la forma de salir de nuestra área de confort. Sin embargo, en el mini-juego que hicimos para la felicitación navideña cada uno asumió su rol, pero en ese caso para desarrollar un resultado final muy distinto a lo que solemos hacer en nuestro día a día.

Así que ya sabes, si tienes una idea en mente, por muy loca que sea, reserva una semana al año para desarrollarla, aprenderás mucho dedicándole el tiempo justo. Y si de camino conoces alguna web realizada con CSS Grid, estaría genial que nos la mandaras al showcase. Gracias de antemano! 😀

Comentarios (4)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *