02 - Caldero
Cuando lo fácil no es suficiente.
Este fue uno de esos proyectos donde hacer lo fácil no valía. Sabía que podía tirar por el camino rápido, pero me apetecía retarme.
Al final del artículo tendrás una copia del proyecto para que puedas bichearlo tú mismo.
Resumen breve
Se trata de una landing page que muestra el trabajo realizado por el cliente, conectada al CMS (sistema de gestión de contenidos) para hacerlo todo escalable.
En resumen:
Un ticker de proyectos (parte inferior) conectado al CMS con un hover dinámico que muestra imágenes de cada proyecto con un overlay. Con filtrado incluido.
Un manifiesto con scroll automático de texto.
Un logo que aparece al hacer click en toda la web.
Para verlo más claro, puedes ver aquí la página directamente.
Adquisición
Alex Vaughtton (de NocodeHackers) me escribió para hacer este proyecto una realidad. Valoré el reto, tiempos (la idea era tenerlo cuanto antes). Me encajaba, así que estaba dentro.
Al verlo supe que la posibilidad de ir a lo sencillo estaba ahí, sin CMS. En Framer, por defecto, no puedes usar los datos de una misma colección CMS tanto para mostrar el ítem como para alimentar su overlay. Son dos componentes distintos y la herramienta no los conecta de forma nativa.
Pero hacerlo así era muy aburrido. Quería divertirme.
Fue entonces cuando comenzó todo.
Kick-off
El servicio incluía únicamente el desarrollo. El diseño ya venía cerrado en Figma.
Por lo que… con el diseño, copy y contenido listos podíamos comenzar.
Proceso
Empecé por aquello que sabía que podía hacer. La maquetación. Poner cada cosa en su sitio. Ya que, por otro lado había dos funcionalidades que no sabía si las iba a poder hacer y de hacerlas… cuánto tiempo me llevarían:
Conexión de una misma colección de CMS al ítem y a su overlay
Scroll automático del Manifiesto
Maquetar me llevó alrededor de una hora y media.
Decidí continuar con la columna vertebral del proyecto. Conexión de CMS a un ítem y a su overlay.
A pesar de intentarlo con la ayuda de ChatGPT no daba con la clave, lo que me llevó a escribir a un amigo, Fred Moon. Él había hecho ya algo parecido para un cliente suyo. Y así fue… en cuestión de minutos tuvimos la solución. Sobre dicha base yo trabajé (con ayuda de ChatGPT) algunas cosas para que se alineara con este proyecto. Tuve así dos overrides totalmente funcionales.
Estos trabajan juntos para crear dos sistemas interactivos en la web:
Overlay dinámico: Cuando haces hover sobre un elemento, cambia la imagen de fondo con (o sin) animación. Al salir, vuelve la imagen por defecto.
Filtros: Al hacer clic en una categoría, filtra los ítems del CMS, resalta el botón activo y actualiza todo sin recargar.
Con esto listo, quedaba el scroll automático del Manifiesto. Alex lo resolvió con Framer Workshop, tras un par de prompts bien afinados. Brutal.
A partir de aquí era coser y cantar. Tuvimos que modificar alguna cosa basada en feedback del cliente que me llevó a cancelar mi suscripción de ChatGPT, pero eso es otro tema… lo gordo ya había pasado 😅
Con todo listo, hicimos un pequeño QA y finalizamos.
Hand-off
Organizamos una reunión con el cliente en la cual le explicamos (además de mandarle un vídeo) cómo funciona el CMS en Framer y cómo podía hacer alguna edición básica.
Se creó una cuenta de Framer y le transferimos el proyecto.
Materiales/herramientas
Las dos herramientas que nos han ayudado a sacar el proyecto adelante, permitiéndonos ir más allá de las capacidades nativas de Framer han sido:
Framer Workshop. No es la primera vez que lo uso en un proyecto. De verdad, si sabes pedirle las cosas, las hace. El scroll automático y la aparición del logo al hacer clic son gracias a esta herramienta.
ChatGPTClaudeAI. Funciona mucho mejor, al menos para el código. La hemos usado para retocar algunas funcionalidades de los overrides del CMS.
Ah, y como te decía al principio te dejo aquí una copia del proyecto (retocado con info falsa por cuestiones lógicas) para que le eches un ojo y veas cómo está todo 😊
Este proyecto me recordó que a veces hace falta querer divertirse para descubrir cosas nuevas.
Solo necesitas tener criterio, pedir ayuda cuando toca, y saber hasta dónde puedes estirar tu stack.
Como decía Arnold J. Toynbee: “The supreme accomplishment is to blur the line between work and play“.
Si tienes ganas de charlar un poco más acerca de algún punto específico del proyecto, responde a este mismo correo. Te leo.