Glosario y problemas frecuentes

Todas las palabras que aparecieron en la guía, en el orden en que las vas a necesitar, y qué hacer cuando algo no sale.

Las palabras

Las herramientas

Skill. Una habilidad que se le instala a ChatGPT: instrucciones detalladas de cómo hacer una tarea. Hace que el resultado sea el mismo cada vez. La de The Mariscal se ejecuta escribiendo / y eligiéndola de la lista.

Obsidian. Una aplicación de notas donde las notas se conectan entre sí. La skill la usa como memoria del proyecto: todo lo que se decide queda escrito ahí, y por eso ChatGPT puede retomar donde dejó con un «continuemos».

Bóveda (vault). En Obsidian, una carpeta de notas. «Abrir bóveda» es abrir la carpeta de tu proyecto.

GitHub. La plataforma donde se guarda el código y todas sus versiones. ChatGPT la usa por vos. GitHub Desktop es la aplicación de escritorio para crear repositorios y autorizar tu cuenta.

Repositorio. Una carpeta que GitHub vigila y de la que guarda todas las versiones. Para vos: la carpeta del proyecto.

Vercel. El hosting donde se publica el sitio. Se conecta con GitHub: cuando algo entra en main, lo publica. El plan Hobby es gratis.

La estructura y el diseño

Estructura. Qué páginas tiene el sitio y qué va en cada una, sin diseño. Se saca de capturas de otras webs, de un dibujo a lápiz o de un diseño propio.

Sitemap. La lista de páginas del sitio y cómo se conectan entre sí.

Wireframe. El dibujo de una página sin diseño: blanco, negro y gris. Muestra qué va dónde y cómo cambia en escritorio, tablet y celular.

Responsive. Que el sitio se adapte a cualquier tamaño de pantalla. Tres columnas en la computadora, dos en la tablet, una en el celular.

design.md. El archivo de diseño: el manual de normas del sitio. Colores, tipografías, tamaños, botones. Todas las páginas se construyen desde él, y por eso quedan iguales entre sí.

Referencia. Una imagen que le pasás a ChatGPT para enseñarle qué te gusta. De estructura (le importa la organización) o de diseño (le importan los colores y la tipografía). Nunca se copia; se extrae un criterio.

Marca. El logo, el nombre escrito, el símbolo solo, las versiones en color y en blanco y negro. La skill las genera todas y arma un perfil de marca.

Hero. La primera parte de una página, lo que se ve al entrar. Suele tener el título, una bajada, un botón y una imagen.

Call to action (CTA). El botón que invita a hacer la acción principal: comprar, registrarse, contactar.

Modal (pop-up). Un cartel que aparece por encima de la página.

Prototipo. El sitio entero con el diseño aplicado, en HTML, para revisar y corregir antes de hacer el proyecto final.

Versión. Cada modificación que pedís desde el paso 11 en adelante crea una versión nueva. Nada se pisa; se puede volver a cualquiera.

El proyecto

HTML. El formato de los archivos de las páginas web. Los wireframes y el prototipo son HTML.

React. La librería más usada del mundo para construir sitios web. La hace Facebook.

Framework. Una caja de herramientas ya desarrollada para no empezar de cero. Da estructura y seguridad.

Next.js. El framework que trabaja con React y que usamos para el proyecto final. El estándar para sitios profesionales.

Componente. Una pieza del sitio que se arma una vez y se usa en muchas páginas: la barra de arriba, el pie, una tarjeta de producto. Piezas de Lego.

Localhost. Tu computadora funcionando como servidor web. Ves el sitio en el navegador, pero sólo lo ves vos.

Compilar (build). Exportar el sitio a la versión que se sube a internet. Los errores que en local no se ven, al compilar aparecen. La skill compila en cada paso.

404. La página que aparece cuando alguien entra a una dirección que no existe en el sitio.

content y data. Dos carpetas del proyecto de Next.js. En content están los textos y los productos, en archivos de texto, para editarlos desde Obsidian. En data, lo que la web necesita para funcionar.

Publicar

Desplegar (deploy). Subir el sitio a internet para que todo el mundo lo use.

main. La rama principal: el código que está en producción.

Rama (branch). Una copia paralela de main donde se trabaja sin tocar lo que está publicado.

Commit. Un envío de cambios a GitHub. ChatGPT hace uno al terminar cada paso.

Pull request (PR). La solicitud de unir una rama a main. ChatGPT la abre y la describe; vos la aprobás.

Merge (mergear). Unir los cambios de una rama a main. Se hace apretando un botón en GitHub.

Preview. La versión de prueba que Vercel arma de un pull request antes de mergearlo.

Producción. El sitio funcionando en internet, para todo el mundo.

Framer Motion. Una librería de animaciones para React. Se pide por nombre cuando querés que las cosas se muevan.

Cuando algo no sale

Se me acabó el plan de ChatGPT a la mitad. Cerrá sesión, entrá con otra cuenta (o esperá a que se renueve), importá la misma carpeta y escribí «continuemos». La skill lee Obsidian y sigue donde quedó. No se pierde nada.

ChatGPT dice que no puede publicar en GitHub. Es la autorización de la primera vez. Dásela para siempre. En Mac, también habilitá Accesibilidad y Grabación de pantalla en Privacidad y seguridad.

Me pide permiso para ejecutar un script o usar Chrome. Es normal: el script arma los wireframes, Chrome sirve para sacar capturas y auditar. Aceptá. Y abajo de la caja de texto podés elegir que te pregunte sólo lo importante.

Un wireframe o una página salió cortada. Casi siempre es porque la captura que le pasaste estaba cortada (las páginas con scroll infinito). Decile: «ponelo bien, como en las otras páginas», y si falta algo (el pie, por ejemplo), pedíselo en el mismo mensaje.

ChatGPT siguió solo sin esperar mi respuesta. Apretá «volver a generar la respuesta» y contestale lo que te preguntaba. Así no inventa.

Se queda colgado guardando. Pasa a veces en los pasos largos. Guardá a mano y seguí. Otras veces ChatGPT aprieta guardar solo, y hasta le cambia el nombre al archivo: no es un problema.

Me quedé sin espacio en el disco. ChatGPT deja archivos temporales. Liberá un poco de espacio y decile que continúe. Tené siempre un margen.

Quiero cambiar algo del diseño, pero estoy en el paso de los wireframes. No es el momento. Cada paso corrige lo suyo: la estructura en los wireframes, el diseño al elegir la propuesta, las animaciones al final. Anotalo y pedilo cuando toque.

Hay cosas que no funcionan en el sitio publicado (los filtros, el carrito). Es que hasta ahora hicimos sólo el diseño. Se piden después, como cualquier cambio: con una captura y una descripción.

No sé qué skill pedirle en un cambio. Para diseño: Huashu, UI UX Pro Max, Apple Design. Para animaciones: GPT Taste con Framer Motion. Si no estás seguro, no nombres ninguna: ChatGPT va a consultar la carpeta del proyecto y elegir.

Quiero volver a una versión anterior. Decile «volvamos a la versión 1 del home» (o la que sea). Desde el paso 11, cada cambio quedó guardado como versión.

Lo abandoné una semana. Abrí el proyecto, escribí «continuemos». Eso es todo.