Los proyectos web suelen percibirse como una única cosa: una página.
Sin embargo, detrás de cualquier desarrollo existen múltiples capas que cumplen funciones diferentes. Dividir un proyecto en estas 8 capas nos permite planificarlo con claridad, comunicarnos con precisión con asistentes de IA y estructurar el diseño de forma ordenada y consciente.
Todo proyecto comienza con una pregunta:
En esta etapa nos enfocamos exclusivamente en los objetivos y propósitos de diseño, posponiendo las decisiones tecnológicas y de código.
La intención funciona como la brújula para todas las decisiones posteriores.
Las referencias permiten construir un lenguaje compartido. Pueden ser sitios web, obras de net-art, interfaces o libros.
No se trata únicamente de coleccionar enlaces de inspiración, sino de analizarlos y traducirlos en especificaciones visuales y funcionales precisas (hoja de especificación) que guiarán la creación de prompts para la IA.
Todo proyecto trabaja con algún tipo de contenido: texto, imágenes, video o audio.
En el contexto contemporáneo, el contenido puede provenir de redes Web3. Por ejemplo, al leer un token NFT desde la blockchain de Tezos, obtenemos una estructura de metadatos (título, autor, atributos) y un enlace a archivos multimedia alojados en IPFS (sistema de almacenamiento de archivos descentralizado y distribuido).
El sistema visual define cómo se presenta la información. Incluye tipografías, colores, espaciados, grillas, jerarquías de lectura y esquemas de navegación.
Toda esta estructura y composición visual se traduce directamente en **código CSS**, construyendo la estética y el orden de lectura de la página.
Los comportamientos describen aquello que sucede cuando una persona interactúa con la interfaz.
Ejemplos: navegar, hacer clic para filtrar, desplazar para revelar, reproducir un sonido o modificar un parámetro visual. Estas dinámicas de interactividad se traducen directamente en **código JavaScript**.
Muchos de los proyectos necesitan consumir o almacenar información dinámica de forma remota.
No pretendemos escribir motores de bases de datos ni programar el backend complejo de un servidor. En su lugar, aprendemos a conectarnos y consumir datos estructurados (generalmente en formato JSON) mediante APIs públicas, APIs de marketplaces o registros abiertos de la blockchain.
Todo proyecto web requiere un entorno técnico para existir en internet y ser accesible.
Para simplificar y agilizar el despliegue experimental de forma gratuita, nos enfocamos en **Cloudflare Pages**. Cloudflare permite conectar carpetas de código y publicar el sitio web de forma inmediata bajo un subdominio gratuito y seguro, omitiendo la necesidad de comprar dominios o gestionar servidores tradicionales.
De forma complementaria, el código y los archivos finales pueden ser alojados de forma descentralizada en redes Web3.
Un proyecto web nunca está completamente terminado. Cada versión publicada genera nuevas preguntas.
La evolución técnica forma parte del desarrollo. Por eso trabajamos con prototipos rápidos e iteraciones minimalistas (MVP) antes de adentrarnos en arquitecturas complejas.
Aprender a observar un desarrollo web como un sistema compuesto de capas interconectadas ayuda a estructurar mejor tus ideas.
Cuando puedes describir una idea a través de estas capas, resulta sumamente sencillo documentarla, explicarla y desarrollarla en colaboración con agentes de software de IA.