Webs
Terrazza Campailla: un sitio para el barroco de Módica, a cambio de hospitalidad
Análisis, cuatro propuestas gráficas navegables y el sitio nuevo, en italiano y en inglés, para un alojamiento turístico en el centro histórico de Módica. Hecho con la Settimana del Baratto: el sitio a cambio de hospitalidad.
-
páginas de análisis
-
propuestas gráficas
-
Lighthouse móvil, desde 57
-
SEO en Lighthouse
En resumen
En breve
- Terrazza Campailla tiene cinco habitaciones temáticas y una terraza solárium en el centro histórico barroco de Módica, Patrimonio de la UNESCO. Los huéspedes le dan un 9,6 sobre 10 con más de cien reseñas.
- El sitio antiguo no decía dónde estaba el alojamiento, no mostraba las reseñas, estaba solo en italiano y enviaba los datos de los visitantes a Facebook sin consentimiento.
- El trabajo nació con la Settimana del Baratto: la renovación del sitio a cambio de noches en Módica, puesta por escrito en un acuerdo de intercambio de prestaciones.
- Primero un análisis de 13 páginas, después cuatro propuestas gráficas navegables y, al final, el sitio en Elementor 4 con la versión inglesa, la adecuación al RGPD, el SEO y el GEO.
- Lighthouse móvil de 57 a 77, SEO de 92 a 100, peso de la home de 5,5 a 2,1 MB. En línea desde el 26 de octubre de 2026.
Un alojamiento premiado, un sitio que no lo decía
Terrazza Campailla tiene cinco habitaciones temáticas y una terraza solárium en el corazón barroco de Módica, a sesenta metros de Piazza Matteotti y del Corso Umberto: la Módica Patrimonio de la UNESCO del chocolate y de las iglesias de San Giorgio y San Pietro. Los huéspedes le dan un 9,6 sobre 10 con más de cien reseñas, y Booking le ha concedido tres Traveller Review Awards (2024, 2025, 2026).
Pero el sitio no contaba nada de esto. No decía dónde estaba el alojamiento, no mostraba las reseñas, desde el teléfono no se podía llamar con un toque, estaba solo en italiano y enviaba los datos de los visitantes a Facebook sin pedir consentimiento.
Un trueque, con la Settimana del Baratto
El trabajo nació con la Settimana del Baratto, la iniciativa que pone en contacto alojamientos turísticos y personas que ofrecen bienes o servicios a cambio de hospitalidad. Sin factura y sin presupuesto en dinero: la renovación del sitio a cambio de noches en Módica.
El trueque quedó por escrito en un acuerdo de intercambio de prestaciones, un contrato atípico (art. 1322 del Código Civil italiano) que lleva el análisis como anexo: las dos partes saben exactamente qué se hace y qué se recibe a cambio. Trabajar desde los Abruzos para un alojamiento en Sicilia tuvo una condición precisa: todo lo que el sitio dice sobre Módica (distancias, aparcamientos, qué ver) tenía que ser cierto y verificable, porque no podía ir a comprobarlo en persona antes de la entrega.
El análisis: entender antes de diseñar
El primer paso fue un análisis de trece páginas, entregado a la titular el 15 de octubre de 2026. Para escribirlo revisé las ocho páginas del menú y el sitemap, pasé las pruebas de Lighthouse en móvil y en ordenador y navegué el sitio como lo haría un huésped, en un iPhone simulado y en una pantalla de 1440 píxeles.
Está escrito para quien gestiona el alojamiento, no para un técnico: cada problema tiene un nivel de urgencia, una explicación sencilla y la solución propuesta. Cubre siete áreas. Legal: el Píxel de Meta activo sin consentimiento, sin política de privacidad ni de cookies, CIN y CIR no visibles. Móvil: contactos no pulsables, ni dirección ni mapa, texto blanco sobre arena con un contraste de 1,85 a 1. Textos: nueve erratas en los títulos. SEO: sin H1, sin meta description, el idioma declarado en inglés, ninguna de las 32 imágenes con texto alternativo. GEO: ningún dato concreto que ChatGPT, Gemini o las AI Overviews de Google pudieran citar. Rendimiento: 57 sobre 100 en móvil y 5,5 MB por página, el 72% de ellos un vídeo de fondo. Estilo: había una identidad, los colores de la piedra de Módica, pero el planteamiento estaba anticuado. El plan de acción en cuatro fases se convirtió después en el anexo del acuerdo.
Cuatro propuestas, cuatro materiales del lugar
Del análisis nacieron cuatro direcciones, cada una con el nombre de un material del lugar: Pietra, la piedra caliza de Módica, tonos cálidos y títulos en mayúsculas; Ulivo, el olivo, crema y verde oliva con un acento terracota; Calce, la cal de los muros, blanca, con el logotipo en el centro y fotos a todo lo ancho; Carrubo, el algarrobo de los montes Iblei, la estructura de Pietra con el verde de Ulivo.
No eran bocetos estáticos. Cada propuesta es un prototipo HTML navegable de cinco páginas (home, habitaciones, dónde estamos, preguntas frecuentes, contacto), con animaciones y versión para teléfono, generado por un único script en Python. Los contenidos reales, es decir las habitaciones con su historia, las preguntas frecuentes, las distancias y las reseñas, están en el script una sola vez: corregir un dato lo corregía en las cuatro propuestas. De cada prototipo se sacó después un PDF para enviar a la titular.
La elección: Carrubo
La titular eligió la cuarta propuesta, Carrubo: Cormorant Garamond para los títulos, Jost para el texto, verde oliva para la barra y los botones, y el título «El barroco desde tu terraza» sobre la foto real de la terraza.
Desde el teléfono una barra fija abajo mantiene WhatsApp y Reservar donde llega el pulgar, y los contenidos fluyen en una sola columna, con las mismas transiciones que en el ordenador.
El sitio, en Elementor 4
La propuesta elegida se reconstruyó en Elementor 4 con los elementos atómicos: clases y variables globales contienen todo el estilo, así que colores, tipografías y espaciados se cambian desde un único sitio, y la titular puede modificar los textos desde el editor visual de siempre sin tocar código.
Aquí al lado, la home en un iPhone, antes y después: a la izquierda la antigua, tal como se documentó en el análisis, con dos recuadros vacíos, sin logotipo y sin título; a la derecha la nueva. La home sigue el esquema propuesto en el análisis: la terraza a pantalla completa, la puntuación justo debajo del título, las habitaciones, una galería de fotos en movimiento continuo, los premios de Booking en un slider, el centro histórico, las preguntas frecuentes, una sección para novios y un formulario que abre el chat de WhatsApp ya rellenado con fechas y número de huéspedes.
Cinco habitaciones, cada una con su historia
Idria, Torre d’Oriente, Amore Vero, Ciarciolo y Castello toman el nombre de lugares de Módica: la iglesia del Idria y su «Marti ri Littria», el barrio del «Dente», que viene de Urienti, es decir Oriente, la escalinata de via Amore Vero, la pedanía de Marina di Modica. Cada ficha cuenta esa historia, además de camas, servicios y capacidad.
Dónde estamos: Módica, en concreto
La página Dónde estamos se abre con un timelapse de San Pietro del día a la noche. El original en 4K pesaba 82 MB, el de la página 1,2 MB, y arranca solo también en iPhone. Después vienen cómo llegar sin escaleras, las distancias a pie a los monumentos y la sección «Barroco, chocolate y mar», donde dejé solo los datos verificables (UNESCO 2002, el terremoto de 1693, el chocolate IGP, Marina di Modica a unos 20 km) y descarté los del sitio antiguo que no resistían una comprobación.
Las preguntas frecuentes responden a diecinueve preguntas reales de los huéspedes. La más importante es «¿Dónde dejo el coche?»: «aparcamiento Módica centro histórico» está entre las búsquedas de Google que más le afectan.
Desde el teléfono, a un toque
Desde el teléfono la barra fija abajo mantiene siempre a mano WhatsApp y Reservar, y el botón de WhatsApp flota sobre la página. Teléfono, email y dirección se abren con un toque: en el sitio antiguo había que copiarlos a mano.
También en inglés, también la página de error
Gran parte de quienes visitan Módica llegan del extranjero. Añadí la versión inglesa con Polylang bajo /en/, con una página gemela para cada página, cabecera y pie incluidos, hreflang, y títulos y descripciones para Google en los dos idiomas.
También la página 404 tiene el estilo del sitio, con Módica de noche. Lo mismo vale para las páginas que WordPress muestra durante las actualizaciones o cuando la base de datos no responde: están escritas en PHP sencillo, porque tienen que funcionar incluso cuando WordPress no arranca.
En regla, y citable por la IA
El banner de cookies pide el consentimiento antes: el Píxel de Meta y las etiquetas de Google solo se activan después de «Aceptar». Verificado en un navegador limpio: antes de elegir y después de «Rechazar», cero peticiones a servicios de terceros. Hay políticas de privacidad y de cookies con las cookies realmente observadas en el sitio, CIN y CIR en el pie de cada página como exige el art. 13-ter del Decreto-ley 145/2023, y las fuentes servidas por el sitio y no por Google.
Para el SEO: títulos, descripciones e imágenes para compartir en cada página, un solo H1, el idioma correcto, texto alternativo en las fotos y redirecciones 301 desde todas las direcciones del sitio antiguo. Las palabras clave vienen de las sugerencias de Google, con una condición legal: el alojamiento es una locación turística y no un B&B, así que «B&B» no aparece en los títulos, aunque sea la búsqueda más frecuente. Para el GEO: datos estructurados LodgingBusiness y FAQPage, y un archivo llms.txt con los datos principales en texto plano, para que ChatGPT, Perplexity y las AI Overviews citen el alojamiento con datos correctos.
Las cifras, antes y después
Mediciones de Google Lighthouse sobre la home, el 15 y el 30 de octubre de 2026. Desde el móvil el rendimiento pasa de 57 a 77, el primer contenido visible de 4,1 a 1,8 segundos, el contenido principal de 9,0 a 5,2 segundos, los desplazamientos de la página de 0,14 a 0,02 y el peso de 5,5 a 2,1 MB. El SEO pasa de 92 a 100.
Desde el ordenador, en cambio, el rendimiento baja de 91 a 87, porque la home nueva tiene muchas más fotos reales del alojamiento: la galería, las habitaciones, los premios, las bodas. El siguiente paso es la caché: cada página abre una sesión PHP, y así la caché del alojamiento web nunca entra en funcionamiento.
Cómo trabajé
El sitio ya estaba en línea, sin entorno de pruebas y sin acceso SSH, en un alojamiento compartido, y en el mismo periodo trabajaban en él otras personas. Por eso: copia de seguridad antes de cada cambio, con un registro de qué cambió y cómo se deshace; cambios por REST API y FTPS con scripts repetibles; las páginas de Elementor construidas con Claude Code y el MCP de Elementor, comparando cada vez el borrador con la versión publicada; el código a medida (animaciones GSAP, galería en movimiento continuo) en WPCode, donde la titular puede leerlo y apagarlo desde el panel; cada cambio verificado en el sitio publicado, como visitante, en ordenador y en iPhone.
Las revisiones pasaron por WhatsApp: una foto que cambiar porque se veía el garaje, el premio 2025 que añadir y, sobre todo, una petición: no repetir las mismas fotos en distintas partes del sitio. Para respetarla comparé las fotos con una huella visual, para encontrar también las tomas iguales guardadas con nombres distintos. Al final el sitio usa más de cincuenta fotos diferentes, y las únicas que se repiten son el logotipo y las insignias de los premios.
¿Necesitas algo parecido? Este proyecto es un ejemplo de creación de sitios web a medida. La primera reunión y el presupuesto son gratuitos: escríbeme y lo hablamos.
El paquete
Qué se entregó
- Análisis del sitio de 13 páginas, con plan de acción
- Cuatro propuestas gráficas navegables, con PDF
- Sitio en Elementor 4 con elementos atómicos
- Versión inglesa con Polylang
- Banner de cookies, política de privacidad y de cookies, CIN y CIR
- SEO, datos estructurados y llms.txt para el GEO
- Redirecciones 301 desde el sitio antiguo
- Página 404 y páginas de mantenimiento a medida
- Animaciones GSAP y galería en WPCode
En detalle
Ficha técnica
- Plataforma: WordPress con Elementor 4, en italiano e inglés
- Año: 2026
- Estado: En producción
- Tecnologías: WordPress, Elementor, GSAP, Polylang, Rank Math, WPCode, Python, SEO
Las imágenes proceden del análisis, de las propuestas gráficas y del sitio publicado. Mediciones de Lighthouse del 15 y del 30 de octubre de 2026.
Hablemos
¿Necesitas un sitio así?
Si tienes un alojamiento que los huéspedes premian y un sitio que no lo cuenta, escríbeme: partimos de un análisis en palabras sencillas y desde ahí decidimos juntos qué hacer.
