Un generador es una función. Toma tus datos de un lado y produce un sitio web funcional del otro. La barra lateral derecha ha estado corriendo esa función en cada página del curso — re-renderizando tu página de inicio mientras llenabas cada lección. Esta página es donde la misma función te deja descargar el resultado.
Lo que vas a poder hacer al final
- Verificar tu lista de revisión — cada campo requerido capturado a lo largo de L1-L13.
- Vista previa de las páginas inicio + menú + about + contacto renderizadas en el iframe en vivo.
- Descargar el ZIP — tu sitio completo de restaurante como HTML + CSS plano, listo para desplegar.
Versión en lenguaje sencillo — la lectura rápida
La lista muestra qué está lleno y qué falta. Cada ítem faltante enlaza de vuelta a la lección que lo llena. Cuando todo está verde, haz clic en Descargar. Un archivo ZIP cae en tus Descargas. Descomprímelo y míralo. Ese es tu sitio.
Lo que esta lección hace que las otras no
Doce lecciones te pidieron tomar una decisión y guardarla. Una lección — la 13 — te dio un hábito para seguir usando después del lanzamiento. Esta lección es donde las decisiones guardadas se vuelven una cosa que puedes desplegar. Tres componentes:
- La lista de revisión abajo te dice exactamente qué está lleno y qué falta. Una fila roja significa que el generador va a usar un marcador de posición — clic para saltar a la lección que captura ese dato.
- La vista previa en la barra lateral derecha muestra la página de inicio como va a salir publicada. Es el mismo render que contiene el ZIP — cambia la paleta en la L7 y esta vista previa se vuelve a pintar en tiempo real.
- El botón de descarga empaqueta todo en un ZIP. Cuatro páginas HTML (cada una con CSS en línea), un sitemap, un robots.txt, y un README que te dice cómo alojarlo.
Nada de esto llama a un servidor. El ZIP se construye en tu navegador usando una librería pequeña (JSZip) que la página carga de forma diferida solo cuando haces clic en descargar. Todo lo que guardaste durante el curso vive en el localStorage de tu navegador (un pequeño almacén de clave-valor que los navegadores exponen a las páginas del mismo dominio); esta página lo lee, arma las plantillas, empaca el ZIP, te entrega el archivo. Nunca vemos los datos de tu restaurante.
- 1
- 2
- 3
1. Lo que has armado
Tu lista de revisión
Ocho campos son requeridos para tener un sitio desplegable. Dos son opcionales pero recomendados. Si ves filas rojas, sigue el enlace a la lección que captura ese campo — tu trabajo en este navegador se conserva, la página de la lección lo reflejará cuando llegues.
Revisión
Revisando…Activa JavaScript para ver tu lista de revisión. La lista lee tus respuestas guardadas del curso en este navegador y te dice qué lecciones siguen abiertas.
2. Qué contiene el ZIP
Qué contiene el ZIP
Siete archivos. Juntos son todo el sitio. Puedes abrir index.html en tu navegador localmente para ver cómo se verá tu sitio alojado antes de desplegarlo.
index.htmlPágina de inicio — tu nombre, promesa de una frase, colores anclados a tu paleta, chip de cocina, botón "reservar" que enlaza a la página de contacto.menu.htmlPágina del menú — platos de la L8 con nombres y precios.about.htmlPágina "Acerca de" — tu promesa de una frase de la L3 como entrada, párrafo del cliente de la L4 como apoyo.contact.htmlPágina de contacto — dirección con enlace a Google Maps, teléfono tocable, tabla de horarios semanales.sitemap.xmlLe dice a Google que tus cuatro páginas existen y cuándo se generaron.robots.txtPermite todos los rastreadores. Estándar, aburrido, correcto.README.mdInstrucciones de despliegue para Cloudflare Pages, Netlify y Vercel — ancladas al host que guardes como preferencia en la L15.
Fíjate en lo que no está en el ZIP: nada de JavaScript. Sin fuentes cargadas desde Google. Sin scripts de analítica. Sin banners de cookies. El sitio generado es la cosa más simple posible que resuelve el problema del operador — un sitio plano de HTML rápido, accesible, que carga en menos de 200 ms en un teléfono con dos rayitas de cobertura.
¿Por qué nada de JavaScript? Porque tu trabajo de cara al cliente — los comensales quieren horarios, dirección, menú, teléfono — no lo necesita. Cada kilobyte de JS es un kilobyte que un comensal descarga en una conexión mala, que un lector de pantalla tiene que esperar, que una revisión de seguridad tiene que auditar. El HTML plano carga más rápido, se mantiene accesible y nunca se rompe porque un CDN se cayó.
3. Descarga tu sitio
Descarga tu sitio
Genera el ZIP
El botón de abajo empaqueta tus respuestas actuales en un ZIP nombrado por tu restaurante. Vuelve a ejecutarlo cuando cambies algo — tarda cerca de un segundo.
El botón se habilita cuando los ocho campos requeridos de arriba están en verde. JSZip se carga de forma diferida al hacer clic (un pequeño archivo estático, ~95 KB); nada sale de tu navegador.
Guarda este sitio generado en el Workshop
Mantén un snapshot versionado para que te siga entre dispositivos. El guardado son tus respuestas actuales — vuelve a correr el generador cuando quieras regenerar el ZIP.
Qué cambia esto más adelante
La Lección 15 (despliegue) toma el ZIP que descargas aquí y te lleva por tres hosts gratuitos — Cloudflare Pages, Netlify o Vercel — para tener una URL real apuntando a tu dominio real en menos de treinta minutos. La Lección 16 (el ritmo de 30 días) te da las cuatro tareas recurrentes que evitan que el sitio desplegado se ponga viejo — incluyendo "vuelve a generar cuando agregues un plato" para que la descarga de la L14 se mantenga al día.
Tienes un sitio desplegable, ahora mismo, en este navegador.
La lista de revisión te dice qué está listo y qué sigue abierto. La barra lateral derecha te muestra lo que va a salir publicado. La descarga del ZIP empaqueta todo en un archivo que le puedes pasar a cualquier host. Trece lecciones de decisiones acaban de volverse un sitio web.
El generador es la prueba de que "no fetch, no storage, no account" era la postura correcta desde el principio.
Las Lecciones 15 y 16 están en vivo — despliegue y el ritmo de 30 días.