Y esto es la mitad del trabajo. La página original tenía todo esto:
No es un texto que alguien edita a mano. Calcula abierto/cerrado en la zona
America/Mexico_City aunque el visitante esté en otro huso, y produce
"abre en 3h 12m" / "cierra en 1h 04m". Sabe que domingo es 8–15 y el resto
20–23, porque el horario es asimétrico y un `
` de texto no puede
saber nada.
Soporta excepciones (ferias, eventos, lluvia) que es exactamente lo que pasa:
el 7 de abril de 2026 el negocio Announces que attended el kartódromo. Los
horarios estáticos mienten. Este motor puede recibir una lista de excepciones.
Capacidad 2 · WhatsApp con mensaje precargado
El mensaje cambia según el estado. Abierto: "quiero pedir para AHORA".
Cerrado: "quiero apartar para HOY en la noche". No es el mismo link con otro
texto — es una decisión de diseño distinta en cada estado.
Por qué importa, y no es opinión: los mensajes precargados de
wa.me con ?text= dan entre 50% y 100% más
conversión que un link genérico de "abrir chat", según el análisis de
Flyn sobre enlaces de catálogo de WhatsApp Business. El cliente recibe un
borrador con contexto y solo tiene que apretar enviar.
Capacidad 3 · El menú vive en WhatsApp, no acá
WhatsApp Business tiene catálogo nativo: hasta 500 ítems con foto, precio y
descripción, carrito dentro de la app, y el pedido llega como un solo
mensaje. Es gratis y ya está construido.
Entonces esta página no tiene un carrito, ni checkout, ni pasarela, ni
inventario. Muestra los cuatro productos que el negocio ya anuncia en su
propio póster —bistec, chorizo, tripa, adobada— y manda el resto a donde
ya está. Además, las apps de delivery cobran entre 5 y 30% de comisión: Rappi, Uber Eats y DiDi Food. Acá el pedido va directo. Eso es hacer menos es más aplicado a la
arquitectura, no a la apariencia.
Capacidad 4 · Tema claro, y por qué no es "invertir"
El tema arranca con prefers-color-scheme y después recuerda la
elección del visitante. Todo por variables, sin librerías.
Pero el acento no se invierte: cambia de rol. En oscuro el amarillo
es texto sobre el fondo. En claro, amarillo como texto sobre blanco
da 1.4:1 — ilegible. Así que en claro el amarillo pasa a ser
superficie: un panel con el número en negro encima, 12.5:1.
El mismo diseño, el mismo componente, dos entornos. Y la metáfora aguanta:
un letrero encendido también es un panel encendido de día.
Contraste medido en los cuatro estados: el mínimo es 4.96:1, arriba de AA.
- claro/abierto, número sobre amarillo → 12.49:1
- claro/cerrado, rojo sobre papel → 5.24:1
- oscuro/abierto, amarillo sobre negro → 12.49:1
- oscuro/cerrado, rojo sobre negro → 7.11:1
Capacidad 5 · El QR es real y está verificado
Apunta a wa.me/524437337846. Se generó localmente, sin
servicio de terceros y sin mandar el número a ningún lado: el número del
negocio nunca salió de esta máquina.
Y se verificó, no se asume:
- Síndromes Reed-Solomon del codeword: todos cero. El bloque es
matemáticamente válido.
- BCH del format info: válido.
- Un decodificador independiente leyó la matriz de vuelta, quitó la máscara, desarmó el zigzag y recuperó la URL exacta.
El QR va sobre un panel blanco fijo en los dos temas. Los lectores son menos fiables con el código invertido, y además un sticker blanco es lo que se pone en un póter.
Capacidad 6 · Las fotos: una hoja de contactos, no un relleno
La página original tenía la misma imagen tres veces y ninguna foto
del local. Poner fotos de stock de tacos sería mentira visual, y esta
propuesta no miente.
Entonces los espacios de foto son un shot list: cuatro tomas con
encuadre y motivo, pensadas para tomarse con el teléfono en una hora de
servicio. No hace falta fotógrafo, ni sesión, ni presupuesto.
La 01 y la 03 no son decorativas: el frente de noche (es la foto que hace que
alguien que pasa por la calle lo ubique — el logo del negocio ya dice
"¡EN CAPULA!") y el logo real en 300×300, que reemplaza la
tipografía del encabezado.
Capacidad 7 · Lo que NO se inventó
Esta es la parte que más me importa mostrar.
La página original prometía en su descripción "puntuaciones, fotos,
videos, servicios" y no tenía ninguno de los cuatro. Prometer es gratis
y carísimo: Google penaliza el contenido que no coincide con la búsqueda.
Acá, explícitamente:
- Sin precios. No los tenemos. Van al catálogo.
- Sin reseñas. No hay ninguna, y no se inventan.
- Sin mapa incrustado. Un link a Mapas resuelve igual y pesa menos.
- Sin fotos de stock. No hay stock de tacos en esta página. Hay
instrucciones de qué tomar.
Un sitio web con huecos honestos rinde más que uno con huecos rellenos.
Capacidad 8 · Schema corregido
La página original declaraba dayOfWeek: "Lunes" — en español.
Schema.org define ese campo como enumeración, y un día en español no es un
valor válido, así que Google probablemente descartaba los horarios. Acá está
la forma compacta, más hasMenu, servesCuisine y
priceRange, que es lo que Google exige para un
FoodEstablishment.
Y los tags Open Graph, que no existían. Sin ellos, compartir el link por WhatsApp —el canal de este negocio— salía pelado, sin imagen ni título.
{
"dayOfWeek": ["Monday"..."Saturday"], // no "Lunes"
"opens": "20:00", "closes": "23:00",
"hasMenu": "https://wa.me/c/ELZORRITA",
"servesCuisine": ["Mexicana"],
"priceRange": "$$"
}
Decisiones de diseño
- Dos tamaños de tipo. Vignelli: "one or two type sizes at the
most". El display y el cuerpo. Las etiquetas son el cuerpo en versalitas
con tracking, no un tercer tamaño.
- Cero esquinas redondeadas. Es rotulación sobre una camioneta, no
una app. Rectángulo, borde duro, tinta plana.
- Un mundo, no un kit. Negro, amarillo del zorro, rojo de cerrado.
Ni un degradado, ni una sombra, ni un glassmorphism.
- Data-ink de Tufte. Cada píxel es dato o es estructura. El mapa
de 200px era chartjunk; la dirección en grande es dato puro.
- El amarillo no se usa en cuatro sitios. Se usa donde significa
"encendido". Si todo resalta, nada resalta.
- Archivo como familia: grotesca diseñada para rotulación e
impresión, con eje de peso. Un tipo que podría *estar* en la camioneta.
No Inter, no Poppins, no la tipografía neutra que la pone todo el mundo.
Accesibilidad (WCAG 2.2)
- El estado nunca se comunica solo con color: la palabra "Abierto"
o "Cerrado" está escrita. El rojo de cerrado da 6.8:1 sobre el fondo.
- Foco visible de 3px en todos los enlaces y botones.
- Objetivos táctiles de 52px mínimo. La barra fija pone la acción dentro
del alcance del pulgar, no arriba donde está el pulgar.
prefers-reduced-motion: todo el sistema de color y forma
se desactiva.- El estado se anuncia por
aria-live a lectores de pantalla.
- Los links tienen texto, no solo ícono.
Lo que falta definir con el dueño
Esto no se inventó. Es la lista que sale de un levantamiento de verdad:
- La dirección no coincide. El logo del negocio dice
"Calle Tanjoan 223". El directorio dice "Tanganxoan #10-b".
Dos direcciones para un solo puesto. Hay que ir a confirmar cuál es.
(El mismo logo también dice "Tropa"; el póster dice "Tripa".)
- Zona de reparto, pedido mínimo y costo. No hay ni un solo dato de
delivery en toda la página original.
- Hora de último pedido. Acá se puso 30 min antes del cierre
como supuesto y está marcado en el código. Hay que confirmarlo.
- Forma de pago: efectivo, transferencia, tarjeta.
- ¿El número de WhatsApp es el de cobro o el personal? Si cierra a
las 11pm, ¿quién responde a las 2am?
- Excepciones de horario: el 7 de abril hubo evento en el
kartódromo. ¿Cerró? ¿Se alargó? Hay que registrarlo.
Lo que esto demuestra sobre el trabajo
No es "una página bonita". Es un levantamiento de requerimientos convertido
en arquitectura: se pregunto qué canal usa el cliente real (WhatsApp, 75% de
penetración en México según Infobip), se discovered que el canal ya existía
y estaba pago, se decidió no construir un carrito y se puso la
energía en lo que sí faltaba —el estado real, el mensaje precargado y un
solo archivo que no pesa nada.
La pregunta que ordena todo el proyecto no es "¿qué quiere el cliente?"
— quiere "una página bonita con más fotos". Es
"¿qué está haciendo hoy este cliente, con qué aplicación, y qué se
rompe?"