Ruta Full Stack
0✦ 0
Proyectos · Fase 2

P02 · La carta web del restaurante

Entregable: Carta web estática de un restaurante, publicada en Vercel, con QRTiempo: 12-16 h, repartidas en las sesiones 2 a 7
0 de 13 casillas

El encargo (como lo diría el cliente)

"Quiero una carta digital para poner un QR en las mesas. Algo lindo, que se vea bien en el celular. Y que la gente me pueda escribir por WhatsApp para reservar."

Alcance

Incluye: una sola página con la carta (por categorías, con precios, etiquetas y alérgenos), horarios, ubicación, contacto por WhatsApp y pie. Publicada en internet, con QR. No incluye: filtros, buscador ni pedidos (Fase 4), panel para editar la carta (Fase 8), pagos (Fase 9), varios idiomas, dominio propio (Fase 5). Ni una línea de JavaScript.

Parte 1 · El restaurante y tu especificación (sesión 2 · 1,5 h)

Elige el restaurante.

  • Opción A (recomendada si puedes): un restaurante, bar o café real que conozcas. Pide su carta. Si no tienes su permiso para publicarla, el repositorio será privado y no compartirás el enlace.
  • Opción B: usa El Patio, el restaurante de ejemplo de la Parte 2.

Escribe tu especificación respondiendo antes las cinco preguntas del apartado 4.3 de la Fase 2 (si el restaurante es real, pregúntaselas al dueño). Esta es la plantilla; cámbiala con tus palabras y tus decisiones:

# Especificación: carta web de <restaurante>

## Objetivo
Que quien escanee el QR de la mesa vea la carta en su móvil en segundos,
y que pueda escribir por WhatsApp para reservar.

## Público
Clientes sentados a la mesa, con el móvil. También quien busca dónde comer.

## Contenido (en este orden)
1. Cabecera: nombre, tipo de cocina, frase y botón "Reservar por WhatsApp"
2. Menú de categorías: Entradas, Principales, Postres, Bebidas
3. La carta, por categorías. Cada plato: nombre, descripción, precio,
   etiquetas (vegetariano, vegano, sin TACC) y alérgenos
4. Horarios
5. Ubicación, con enlace a Google Maps
6. Contacto: WhatsApp, teléfono, Instagram
7. Pie: nombre, dirección y año

## Restricciones
- Una sola página: solo HTML y CSS. Sin JavaScript.
- Pensada primero para móvil.
- Sin librerías, tipografías ni iconos de otras webs, salvo que yo lo apruebe.
- Todos los datos salen de CONTENIDO.md. Nada inventado.

## Fuera de alcance (en esta fase)
- Filtros, buscador y pedidos → Fase 4
- Panel para editar la carta → Fase 8
- Pagos y reservas con calendario → Fase 9
- Varios idiomas

## Criterios de aceptación
- [ ] A 360 px de ancho se lee sin zoom ni desplazamiento horizontal
- [ ] Están todos los platos de CONTENIDO.md, cada uno con su precio exacto
- [ ] Cada enlace del menú de categorías lleva a su sección
- [ ] El botón de WhatsApp abre un chat con el número y el mensaje de CONTENIDO.md
- [ ] El enlace de ubicación abre Google Maps en la dirección correcta
- [ ] Ningún dato que no esté en CONTENIDO.md; lo que falte aparece como [FALTA: …]
- [ ] No hay JavaScript ni recursos cargados desde otras webs
- [ ] Publicada en una dirección pública que funciona en otro móvil

Parte 2 · Preparar el proyecto: el trío de archivos (sesión 3 · 1,5 h)

La carpeta y Git:

cd ~/Work
mkdir carta-restaurante
cd carta-restaurante
git init
code .

Los tres archivos, escritos por ti (en VS Code):

1. ESPECIFICACION.md → la de la Parte 1.

2. CONTENIDO.md → los datos del restaurante. Si usas El Patio, copia esto y cambia lo que se indica:

# Contenido: El Patio · cocina de barrio
> Datos de ejemplo para practicar. Los precios y alérgenos son ilustrativos:
> en un restaurante real, los confirma el restaurante, plato por plato.

## Negocio
- Nombre: El Patio
- Tipo de cocina: cocina casera de barrio
- Frase: "Comida de casa, sin apuro."
- Dirección: <pon una dirección real de tu ciudad, para poder probar el mapa>
- WhatsApp: <TU número, para poder probar el botón: 549 + código de área sin el 0 + número sin el 15>
- Mensaje de WhatsApp: "Hola, quiero reservar una mesa"
- Teléfono: el mismo que el WhatsApp
- Instagram: (el dueño todavía no lo pasó)

## Horarios
- Martes a domingo: 12:00 a 15:30 y 20:00 a 00:00
- Lunes: cerrado

## Carta

### Entradas
| Plato | Descripción | Precio | Etiquetas | Alérgenos |
|---|---|---|---|---|
| Empanadas de carne cortada a cuchillo (2 u.) | Masa casera, al horno | $ 4.800 | — | gluten |
| Provoleta a la parrilla | Con orégano y aceite de oliva | $ 7.900 | vegetariano, sin TACC | lácteos |
| Ensalada de estación | Hojas verdes, tomate, zanahoria y semillas | $ 6.500 | vegano, sin TACC | — |

### Principales
| Plato | Descripción | Precio | Etiquetas | Alérgenos |
|---|---|---|---|---|
| Milanesa napolitana con papas fritas | De ternera, con jamón, queso y salsa de tomate | $ 16.900 | — | gluten, huevo, lácteos |
| Bife de chorizo con puré | 350 g, punto a elección | $ 21.500 | sin TACC | lácteos |
| Ñoquis caseros con salsa de tomate | De papa, hechos en el día | $ 12.800 | vegetariano | gluten, huevo |
| Risotto de hongos | Con hongos de estación y parmesano | $ 14.500 | vegetariano, sin TACC | lácteos |
| Pollo al horno con verduras asadas | Cuarto trasero, con calabaza y cebolla | $ 13.900 | sin TACC | — |

### Postres
| Plato | Descripción | Precio | Etiquetas | Alérgenos |
|---|---|---|---|---|
| Flan casero con dulce de leche | — | $ 5.900 | vegetariano, sin TACC | huevo, lácteos |
| Panqueques con dulce de leche | — | $ 6.200 | vegetariano | gluten, huevo, lácteos |
| Ensalada de frutas | Frutas de estación | $ 4.900 | vegano, sin TACC | — |

### Bebidas
| Plato | Descripción | Precio | Etiquetas | Alérgenos |
|---|---|---|---|---|
| Agua mineral, con o sin gas | 500 ml | $ 2.500 | — | — |
| Gaseosa | 500 ml | $ 3.200 | — | — |
| Limonada con menta y jengibre | Jarra de 1 litro | $ 6.900 | vegano | — |
| Copa de vino tinto de la casa | — | $ 5.500 | — | sulfitos |

3. CLAUDE.md → tus reglas para este proyecto:

# Proyecto
Carta web del restaurante <nombre>. Web estática de una sola página: HTML y CSS, sin JavaScript.
Qué construir: ESPECIFICACION.md. Datos del negocio: CONTENIDO.md.

# Sobre mí
Estoy en la Fase 2 de mi roadmap: uso Git y sé leer la estructura de un proyecto,
pero todavía no sé HTML ni CSS. Explícame lo que hagas en lenguaje llano.

# Reglas
- Responde en español.
- Una tarea cada vez. No hagas nada que no esté en la tarea que te pido.
- Antes de crear o cambiar archivos, dime cuáles y por qué.
- No inventes datos del negocio (precios, platos, alérgenos, horarios, opiniones, fotos).
  Si falta algo, pregúntame o deja un marcador visible: [FALTA: qué falta].
- Nada de JavaScript, librerías ni recursos de otras webs (tipografías, iconos, scripts)
  sin preguntarme antes.
- Puedes proponer comandos de Git, pero no hagas commit ni push sin que yo lo confirme.
- Al terminar cada tarea, resume: qué archivos cambiaste, qué decidiste y qué debo comprobar.

Primer commit:

git add .
git status
git commit -m "Añade especificación, contenido y reglas para Claude"

Que Claude critique tu especificación (sin escribir código):

claude

Y dentro, el prompt de crítica del apartado 7 de la Fase 2. Lee la lista que te devuelve y decide tú qué cambiar. Si cambias algo, commit: git commit -am "Ajusta la especificación tras la revisión".

Parte 3 · Construir en seis tareas (sesiones 4 y 5 · 5-6 h)

El ciclo de cada tarea (→ el ciclo de delegación):

  1. git status → limpio.
  2. Shift + Tab hasta el modo plan → pega el encargo → lee el plan (archivos, supuestos, dependencias) → corrige o aprueba.
  3. Vuelve al modo manual y deja que trabaje, leyendo cada permiso.
  4. Revisa: ! git status, ! git diff y el panel de VS Code.
  5. Prueba: ! xdg-open index.html y cada criterio de la tarea. En las DevTools, Ctrl + Shift + M y 360 px de ancho.
  6. Las cuatro preguntas del apartado 4.8 de la Fase 2.
  7. Commit (tú decides el mensaje, o le pides uno a partir del diff).
  8. /clear antes de la siguiente tarea.

Tarea 1 · Estructura y cabecera

Lee @ESPECIFICACION.md y @CONTENIDO.md.
Tarea 1 de 6: crea index.html y estilos.css con la estructura de la página
(todas las secciones de la especificación, en orden y todavía vacías)
y la cabecera completa: nombre, tipo de cocina, frase y botón "Reservar por WhatsApp".
No hagas todavía la carta ni las demás secciones.
Está terminada cuando la cabecera muestre los datos exactos de CONTENIDO.md
y el botón abra WhatsApp con mi número y el mensaje indicado.
Al terminar, resume qué archivos creaste, qué decidiste y qué debo comprobar.

Comprueba: los datos de la cabecera, letra por letra. Pulsa el botón: ¿se abre WhatsApp (Web o la app) con tu número y el mensaje?

Tarea 2 · La carta

Tarea 2 de 6: la sección de la carta. Todos los platos de @CONTENIDO.md, agrupados
por categoría, cada uno con nombre, descripción, precio, etiquetas y alérgenos.
Usa los precios exactamente como están escritos. No añadas ni quites platos.
No toques la cabecera.
Está terminada cuando estén los 15 platos con su precio exacto.

Comprueba: cuenta los platos (15). Compara cada precio con CONTENIDO.md. ¿Están las etiquetas y los alérgenos de cada uno?

Tarea 3 · Horarios, ubicación y contacto

Tarea 3 de 6: las secciones de horarios, ubicación y contacto, con los datos de
@CONTENIDO.md. El enlace de ubicación tiene que abrir Google Maps buscando la dirección.
Si falta algún dato, no lo inventes: pon [FALTA: qué falta].

Comprueba: el mapa abre la dirección correcta. ¿Qué aparece donde iba el Instagram?

Tarea 4 · Estilos para el móvil

Tarea 4 de 6: el aspecto. Pensado primero para móvil: texto legible sin zoom,
botones fáciles de tocar, precios bien alineados y buen contraste.
Solo CSS en estilos.css: sin librerías, tipografías ni iconos de otras webs.
No cambies el contenido de index.html; si necesitas tocar su estructura para los
estilos, dime exactamente qué y por qué antes de hacerlo.
Está terminada cuando a 360 px de ancho no haya desplazamiento horizontal.

Comprueba: DevTools en modo móvil, 360 px: ¿se puede desplazar hacia los lados? En la pestaña Network, recarga: ¿se pide algo a otras webs?

Tarea 5 · Menú de categorías

Tarea 5 de 6: un menú con las categorías (Entradas, Principales, Postres, Bebidas)
encima de la carta, que lleve a cada sección al tocarlo y se quede fijo arriba al
desplazarse. Solo HTML y CSS: sin JavaScript.

Comprueba: toca cada categoría. Desplázate: ¿se queda fijo? ! grep -n "<script" index.html → no debe salir nada.

Tarea 6 · Pie de página y repaso final

Tarea 6 de 6: el pie de página (nombre, dirección y año).
Después, sin cambiar nada más, repasa el proyecto contra los criterios de aceptación
de @ESPECIFICACION.md y dime, uno por uno, si se cumple y cómo lo comprobaste.

Comprueba: su repaso es una lista para que la verifiques tú, no un aprobado. Marca en tu ESPECIFICACION.md solo los criterios que tú hayas comprobado.

Parte 4 · Leer y anotar el código (sesión 6 · 1,5 h)

Pídele una explicación:

Explícame index.html bloque por bloque, como si no supiera HTML.
Para cada bloque: qué es, qué se ve en la página gracias a él y por qué está ahí.
No cambies nada.

Después, tú escribes encima de cada bloque principal (cabecera, menú de categorías, carta, horarios, ubicación, contacto, pie) un comentario con tus palabras. En HTML, los comentarios se escriben así y no se ven en la página:

<!-- Aquí empieza la carta: cada categoría es una sección con sus platos -->

Haz lo mismo con las tres reglas más importantes de estilos.css (en CSS: /* comentario */). Commit: Anota el código con mis palabras.

Los comentarios de HTML sí se ven si alguien abre el código fuente de la página. En proyectos de práctica no importa; en los de clientes, no se dejan notas personales.

Parte 5 · Cazar invenciones y reportar un error (sesión 6 · 1 h)

Ronda 1 · ¿Inventa? Con todo confirmado (git status limpio), pídele:

Añade una sección de opiniones de clientes para dar confianza.

Pasará una de dos cosas:

  • Te pregunta de dónde sacar las opiniones, o deja [FALTA: …] → tu CLAUDE.md funciona.
  • Se las inventa → acabas de cazar una invención con apariencia perfecta. Publicar opiniones falsas es engañar a los clientes del restaurante. git restore . (y git clean -n si creó archivos nuevos).

Apunta en la la bitácora qué pasó y por qué.

Ronda 2 · Un buen informe de error. Rompe tú algo a propósito: en index.html, borra dos dígitos del número del enlace de WhatsApp y guarda. Pulsa el botón: WhatsApp avisará de que el número no es válido. Ahora, en una conversación nueva (/clear), pásale el problema sin decirle dónde está:

Estaba haciendo: pulsar "Reservar por WhatsApp" en la cabecera.
Esperaba: que se abriera un chat con el número de CONTENIDO.md.
Pasó: <copia el aviso exacto de WhatsApp>.
Explícame la causa antes de cambiar nada.

¿Lo encuentra? Deja que lo arregle, revisa el diff y haz commit.

Parte 6 · Publicar: GitHub, Vercel, vista previa y QR (sesión 7 · 2,5 h)

1. A GitHub. Si el restaurante es El Patio o tienes permiso del dueño, público (sirve para tu portfolio); si no, --private:

gh repo create carta-restaurante --public --source=. --remote=origin --push

2. A Vercel.

  1. Entra en https://vercel.com y regístrate con Continue with GitHub.
  2. Cuando pida acceso a tus repositorios, elige solo el repositorio carta-restaurante, no todos. Es el principio de dar el mínimo acceso necesario.
  3. Add New… → Project → importa carta-restaurante. Framework Preset: Other. Pulsa Deploy.
  4. En un minuto tendrás una dirección del tipo https://carta-restaurante.vercel.app.

(Los nombres de los botones pueden cambiar: el recorrido es siempre "entrar con GitHub → importar el repositorio → desplegar".)

3. Pruébala en tu móvil, con datos móviles (sin wifi): la carta, el botón de WhatsApp, el mapa.

4. Un cambio por pull request, con vista previa. El dueño avisa: "los feriados abrimos solo al mediodía".

  1. Primero el dato: añádelo tú a la sección de horarios de CONTENIDO.md. Los datos los pone el cliente, no la IA.
  2. Rama nueva: git switch -c horario-feriados
  3. Commit del cambio en CONTENIDO.md.
  4. Encárgale a Claude que lo refleje en la página (tarea pequeña, con su criterio) y aplica el ciclo.
  5. Sube y abre el pull request:
git push -u origin horario-feriados
gh pr create --fill
gh pr view --web
  1. En el pull request, Vercel deja un comentario con el enlace de la vista previa. Ábrelo: es tu cambio, publicado aparte, sin tocar la carta real. Si te pide iniciar sesión en Vercel, es la protección de vistas previas (apartado 4.11 de la Fase 2).
  2. Si está bien: Merge pull request en GitHub. En un minuto, la dirección principal muestra el cambio. Después:
git switch main
git pull

5. El QR.

sudo pacman -S qrencode
qrencode -o carta-qr.png -s 10 "https://<tu-direccion>.vercel.app"
xdg-open carta-qr.png

Escanéalo con tu móvil y con otro distinto. Haz commit del QR: es parte de la entrega a un cliente.

Criterios de aceptación

  • ESPECIFICACION.md y CONTENIDO.md escritos por mí, y la especificación criticada por Claude
  • CLAUDE.md con mis reglas, incluida la de no inventar datos
  • Seis tareas, cada una con su plan revisado y su commit (git log --oneline)
  • Todos los criterios de ESPECIFICACION.md comprobados por mí, no solo por Claude
  • Ningún dato que no esté en CONTENIDO.md; el Instagram aparece como [FALTA: …]
  • Sin JavaScript ni recursos de otras webs (comprobado con grep y con la pestaña Network)
  • El código anotado con al menos siete comentarios con mis palabras
  • La prueba de las opiniones hecha y apuntada en la bitácora
  • Un error resuelto a partir de un informe con las cuatro partes
  • Publicada en una dirección pública que funciona en otro móvil, con datos móviles
  • Un cambio que pasó por pull request y vista previa antes de llegar a main
  • Un QR que abre la carta, probado en dos móviles
  • Los tres prompts que mejor me funcionaron, guardados en Prompts para Claude

Cómo verificar que está bien

  1. Abre la carta en el móvil de otra persona y pídele que reserve por WhatsApp sin explicarle nada. ¿Lo consigue sin ayuda?
  2. Tapa el código y explica en voz alta qué hace cada bloque de index.html, apoyándote solo en tus comentarios.
  3. Repasa git log --oneline: ¿se entiende la historia del proyecto solo con los mensajes?

Qué has aprendido al terminarlo

(Rellénalo tú en 3-4 líneas. Sobre todo: ¿qué encargo te salió mal la primera vez, y cómo lo arreglaste?)