Casita Amarilla es un hotel por horas para parejas adultas en Carrer de Pàdua 83, Barcelona, con habitaciones desde 30 € y reservas por teléfono. Su antigua web en WordPress escondía la información práctica dentro de un diseño de escritorio envejecido: una mala solución para quien compara tarifas o consulta la disponibilidad desde la calle. Primero la sustituimos por páginas prerenderizadas y, más adelante, hicimos evolucionar la entrega hacia una web React renderizada en el servidor y desplegada en Netlify. El producto actual sirve rutas en 20 idiomas, muestra claramente las tarifas y los horarios y mantiene la llamada de reserva al alcance durante todo el recorrido.
Trabajo para cliente. Clutch Developer construyó y mantiene la web, el flujo de publicación, la medición de marketing y las herramientas de informes. El hotel y su atención al cliente pertenecen a Casita Amarilla.
Qué entregamos
- Una web en 20 idiomas. Español, catalán e inglés conviven con otras 17 configuraciones regionales, cada una en su propia ruta, con detección del idioma, una elección persistente del visitante, metadatos localizados, enlaces hreflang y un sitemap generado. La aplicación actual renderiza HTML completo en el servidor mediante TanStack Start y Netlify.
- Un recorrido de reserva pensado primero para el teléfono. Acciones de llamada persistentes, horarios claros, páginas de habitaciones, indicaciones para llegar, preguntas frecuentes y una vista de tarifas mantienen junto al botón de reserva la información necesaria antes de llamar. El número es un enlace
tel:real, no un texto decorativo. - Una migración controlada desde WordPress. Las reglas de redirección llevan las antiguas páginas, entradas y rutas de archivos a destinos activos, mientras las URL canónicas y las comprobaciones del sitemap protegen el traslado de un dominio consolidado a la nueva estructura por idiomas.
- Medición respetuosa con el consentimiento. Las etiquetas de GA4 y Google Ads solo se cargan después del consentimiento. La web registra eventos definidos para llamadas, formularios, cambios de idioma y lectura del blog, y también mantiene contadores agregados propios sin almacenar una dirección IP, un agente de usuario ni un identificador del visitante.
- Contenido e informes bajo control de versiones. Los flujos asistidos por IA ayudan a preparar y revisar textos multilingües para el blog, pero las entradas se publican como código fuente versionado a través del build normal. Los informes privados y una rutina semanal documentada reúnen los datos de la web, búsqueda, publicidad y llamadas en una sola vista operativa.
Diseñar alrededor de la llamada, no de las páginas vistas
La conversión principal es una llamada que confirma la disponibilidad. Eso impone un orden de prioridades estricto a la interfaz. Antes de llamar, el visitante necesita el precio vigente, los horarios, la dirección y suficiente información sobre las habitaciones para decidir. Después, la web debe apartarse. Por eso la acción de reserva aparece en la cabecera y en un control móvil persistente, y se reutiliza el mismo destino en inicio, tarifas, habitaciones, ubicación, preguntas frecuentes y artículos.
Las tarifas eran la parte más densa del recorrido. Los precios dependen de la duración y del día, y los horarios cambian a lo largo de la semana. La implementación centraliza esos datos, calcula el tramo de tarifa actual según la hora de Barcelona y presenta un resumen compacto en pantallas pequeñas antes de la tabla completa. Comprobaciones específicas comparan los resúmenes de tarifas, el aviso del estado actual, los horarios y los enlaces de reserva para que una edición de texto no deje dos páginas con condiciones distintas sin advertirlo. El recorrido de ubicación cumple la misma función práctica: las indicaciones de transporte público y aparcamiento conducen de nuevo a la llamada.
La publicación y la medición forman parte del producto
El blog es una función bajo control de versiones, no un sistema de publicación separado. Las herramientas asistidas por IA pueden redactar o traducir un artículo, pero el texto resultante vive junto a la aplicación, supera comprobaciones de idioma y alcance y se despliega con el mismo build que las tarifas y las páginas de habitaciones. Así, una entrada se puede revisar antes de publicarse y los enlaces, metadatos, fechas y variantes traducidas permanecen ligados al código que los renderiza. También evita que un redactor automatizado tenga una ruta directa y opaca a producción.
Veinte idiomas crean un problema de mantenimiento mayor de lo que sugiere un selector. Una ruta puede llevar el código de idioma correcto y conservar, aun así, un párrafo alternativo, una respuesta de preguntas frecuentes o la descripción de una imagen en español o inglés. La entrega incluye por ello catálogos de idioma generados y comprobaciones del alcance del blog, las redirecciones, la detección de idioma y el contenido de los paquetes. El resultado visible es sencillo —el visitante elige un idioma y la preferencia persiste—, pero la restricción importante consiste en mantener alineados todos los datos compartidos cuando cambian precios, horarios o instrucciones de reserva.
La medición sigue la misma regla. Las etiquetas de Google permanecen desactivadas hasta que el visitante acepta la analítica; después, eventos con nombre distinguen un toque para llamar de un formulario enviado o un artículo leído por completo. Los contadores agregados propios cubren totales básicos de páginas y acciones sin identificar a un visitante. La capa de informes combina esas señales con Search Console, Google Ads y datos históricos del servidor, y documenta cuándo los conjuntos de datos no se pueden comparar directamente. Una lista operativa semanal convierte esa evidencia en trabajo de revisión sin presentar un clic de anuncio como una reserva confirmada.
Alcance y papel del proyecto
El alcance terminado es más amplio que un rediseño: páginas públicas, 20 rutas de idioma, la migración de WordPress, los flujos de llamada y formulario, la gestión del consentimiento, la publicación del blog, la instrumentación analítica y los informes privados. La ruta de contacto distingue una reserva de una consulta general y puede enviar el mensaje mediante un proveedor de correo configurado; si el correo del servidor no está disponible, el navegador prepara la misma solicitud en la aplicación de correo del visitante. No sustituye a recepción ni decide si hay una habitación disponible. La web prepara al visitante para la llamada, lleva el contexto adecuado hasta ese momento y mide los pasos digitales que sí se pueden medir. Casita Amarilla sigue siendo responsable de los precios, la disponibilidad, la atención al cliente y la estancia.
El proyecto pasó de un lanzamiento rápido y prerenderizado a una aplicación renderizada en el servidor a medida que creció su superficie operativa, sin cambiar el objetivo del producto: información clara y un camino corto hasta la llamada de reserva. Sitios web cubre la construcción pública y la migración; Automatización e integraciones cubre los flujos controlados de contenido e informes que la rodean.
Evidencia y límites
Las capturas móviles conservadas muestran las páginas de inicio, tarifas, habitaciones y blog; la web pública permite revisar las rutas por idioma y los enlaces para llamar y reservar. Esto verifica la implementación y el contenido publicados, no el volumen de llamadas, la conversión en reservas ni la ocupación. Casita Amarilla gestiona la disponibilidad, las reservas y la atención al cliente.