Trabajo / Front-end / GMF Reformas · La web nueva
Una web a la altura de la mejor reputación del pueblo
Proyecto 10 de 30 del archivo 01 de 10 en Desarrollo front-end Ver la disciplina completa ↗
Está colgada en este mismo dominio, en vista previa privada, para que el cliente la revise
Mientras GMF decide qué cambia y qué no, la web no es pública: vive en una carpeta de este sitio, no se indexa y pide una contraseña antes de enseñar nada. Si la tienes, el botón te lleva dentro; si no, verás la puerta y nada más. Las capturas de aquí abajo cuentan el resto.
Treinta hallazgos, un diseño aprobado y cero librerías
La web anterior era un Google Sites de cuatro páginas: ni un botón ni un teléfono clicable fuera de la página de contacto, un Google Form incrustado en un iframe ajeno como único formulario, y una plataforma que no deja insertar una sola línea de medición. La auditoría digital lo ordenó en cuatro bloques —conversión, competencia, cliente y accesibilidad— y en treinta hallazgos, empezando por los que no cuestan dinero. Lo que vendía GMF no estaba en su web: estaba en sus reseñas.
La Fase 1 llevó eso a Figma —el diseño UX/UI de la web, en alta fidelidad— y el cliente lo aprobó. La Fase 2 es convertir ese diseño en una web que se pueda publicar en un hosting compartido corriente, sin frameworks, sin gestor de contenidos y sin ninguna dependencia que caduque: HTML, CSS y JavaScript propios, y un único fichero PHP para recibir el formulario. Lo que el cliente paga es la web, no una suscripción.
Páginas estáticas
Portada, seis de servicio, gracias, 404 y tres legalesLibrerías de terceros
Ni jQuery, ni un framework, ni un plugin: 101 KB de CSS y JS propiosIncidencias en axe-core
WCAG 2.1 A/AA en las doce páginas, escritorio y móvilLighthouse en escritorio
Rendimiento 100 · accesibilidad 100 · buenas prácticas 96 · SEO 100. En móvil, 91 de rendimientoLa identidad viene de la marca, no se inventa aquí
El verde y la piedra del arco salen del logotipo; el dorado del lema «Superación y compromiso» se queda como color decorativo porque sobre fondo claro no llega al contraste exigible, y para el texto existe un dorado más oscuro que sí llega. Los titulares van en Poiret One, en mayúsculas e interletradas, y como esa familia sólo existe en un peso y sin cursiva, los destacados se marcan en verde con un subrayado dorado en vez de con una negrita que no existe. El texto es Manrope a 18 píxeles de base.
Una portada que vende lo que las reseñas ya decían
La portada recorre, en el orden en que un cliente decide, lo que la auditoría había señalado como argumento: la valoración de Google arriba del todo, la fecha de entrega firmada por contrato en el titular, cinco garantías por escrito, los seis tipos de obra, el antes y después, la obra real, el proceso en cinco pasos, las opiniones, los precios de partida, la zona y las preguntas que todo el mundo hace antes de reformar. Y al final, el formulario.
Los años de oficio no están escritos: se calculan desde 1998, para que la web no se quede vieja cada enero. Y las cifras se ven con JavaScript apagado, que era un fallo de la versión anterior: antes aparecía un «0».
01 · Seis servicios, seis páginas, un solo origen
Cada tarjeta de «Qué reformamos» abre su página: baños, cocinas, integrales, buhardillas y tejados, piscinas y exteriores, accesibilidad. Las seis tienen la misma estructura —portada con foto, qué incluye, antes y después, galería, plazos y precio, preguntas, otros servicios y el formulario con el tipo de reforma ya preseleccionado— y las seis salen de un único fichero Python que describe cada servicio y las genera.
Lo mismo pasa con la portada: se escribe en un HTML fuente con tres macros —IMG, CMP y GAL— y el generador las convierte en <picture> con sus tres anchos, en comparadores y en tarjetas de galería, leyendo el tamaño real de cada foto para escribir el width y el height. Nadie teclea un srcset a mano, y por eso ninguno está mal.
_src · build.py · servicios.py · index.src.htmlPillow lee las medidas · 418 ficheros de imagen generados
servicios.py con el formulario preseleccionado02 · El antes y después, con un control que entiende el teclado
Ocho comparadores de obras reales, cuatro a la vista y cuatro más al pulsar. Cada uno es un <input type="range"> invisible que cubre la foto: funciona con ratón, con el dedo y con las flechas del teclado, y le dice al lector de pantalla en qué punto está. No hay librería de comparación; hay un control nativo bien colocado.
Al entrar en pantalla, el separador se mueve solo una vez. Es la pista de que aquello se puede arrastrar, y no vuelve a hacerlo. Con «movimiento reducido» activado en el sistema, ni eso.
js/main.js · comparadoresUn range nativo por foto · teclado y lector de pantalla
range nativo: ratón, dedo y flechas03 · Obra real, en casas reales: la galería y su visor
La auditoría lo decía sin rodeos: en una empresa de reformas, la foto es el argumento. Veintiuna fotografías de obra propia, ninguna de banco de imágenes, con filtros por tipo —baños, cocinas, integrales, exteriores, buhardillas— y un visor en <dialog> nativo que atrapa el foco, se cierra con Esc y pasa de foto con las flechas.
Y pesan lo que deben: cada foto existe en tres anchos —480, 960 y 1.400 píxeles— y en dos formatos, WebP con JPG de respaldo, con sus medidas escritas para que la página no salte al cargar. La única imagen que no espera es la del hero, que va precargada.
index.html · galería · js/main.js · visor21 fotos · 5 filtros · <dialog> con foco atrapado
04 · Las opiniones, en una banda oscura y con la nota de Google delante
Doce reseñas reales de Google, citadas con nombre e inicial, en un carrusel con controles, con el estado anunciado al lector de pantalla y que se para si el sistema pide movimiento reducido. La puntuación —5,0 con 33 reseñas— va en una tarjeta propia con el enlace a la ficha de Google Maps, porque la credibilidad de una nota está en poder comprobarla.
La sección es oscura a propósito. Es la única de la portada que lo es, y por eso se ve: la Fase 1 la diseñó como el momento en que la página cambia de voz y habla el cliente.
index.html · opiniones · js/main.js · carrusel12 reseñas · controles, estado anunciado, pausa con movimiento reducido
05 · Precios de partida y financiación, porque nadie en la zona los publica
La auditoría lo ponía en la tabla de lo que un cliente busca y no encontraba: orientación de precio, «no existe»; opiniones, «no existe». Aquí hay tres rangos orientativos —baño, cocina e integral— con lo que incluye cada uno y un aviso claro de que el precio cerrado llega tras la visita. Y un bloque de financiación, porque uno de cada tres clientes de reformas la pediría y, de las dieciséis empresas del corredor sur que miró el benchmarking, sólo una la ofrece.
Los importes están marcados como provisionales hasta que GMF los valide; la ficha lo dice más abajo, en lo que falta.
index.html · precios3 rangos · financiación · nota de que son orientativos
06 · Un formulario que llega, y que sabe decir cuando no
Cuatro campos obligatorios, un mensaje opcional y la casilla de privacidad. El navegador valida primero y pone el foco en el primer error; después el envío va por fetch a un único fichero PHP del propio hosting que vuelve a validar todo, porque la validación del navegador se puede saltar. Si el servidor rechaza un campo, el error aparece debajo de ese campo, no en un mensaje genérico.
Contra el spam, tres capas silenciosas: un campo trampa invisible, un tiempo mínimo de tres segundos —ningún humano rellena cuatro campos en menos— y un máximo de cinco envíos por hora e IP. Al bot se le dice que todo ha ido bien y no se hace nada. Cada solicitud se guarda además en un CSV por si el correo falla, y el consentimiento queda registrado con fecha, versión de la política e IP anonimizada con sal: lo que el RGPD pide y casi nadie hace.
api · presupuesto.php · config.phpValidación doble · 3 capas antispam · registro RGPD · copia en CSV
07 · En el teléfono, que es donde se pide una reforma
Siete de cada diez visitas a una web de reformas llegan desde el móvil, y la auditoría describía el sitio anterior como «reducido a móvil, no optimizado», así que lo que más se midió fue a 390 píxeles. Una barra fija abajo con Llamar, WhatsApp y Presupuesto; un menú a pantalla completa, en oscuro, con esos tres canales siempre al final; y el aviso de cookies compacto, que ya no tapa ni el titular ni la barra.
Dos decisiones pequeñas que se notan: en móvil desaparece el botón flotante de WhatsApp, porque ya está en la barra y tapaba los botones; y la cabecera se compacta entre 961 y 1.520 píxeles para que «Presupuesto gratis» no se corte en un portátil. La v6.1 arregló además un menú que el desenfoque de la cabecera encerraba en una caja de 76 píxeles: los tres primeros enlaces quedaban fuera de pantalla sin poder pulsarse.
css/styles.css · bloque v6 · js/main.js · menúSin desbordamiento horizontal a 390 px en ninguna página
08 · Las páginas de servicio, con la obra en vídeo
Cada servicio tiene su página con su foto precargada, su «qué incluye», sus comparadores, su galería, sus plazos y su precio. Dos de ellas llevan además vídeo de obra grabado por el propio equipo: un baño con lavadora integrada, por dentro, y en la de reformas integrales el mismo piso antes y después, en dos vídeos en pareja.
Los vídeos se reproducen en silencio al entrar en pantalla y se paran al salir; no arrancan si el sistema pide ahorro de datos o movimiento reducido; y el botón «Sonido» activa el audio de uno y silencia los demás. Vienen de originales de WhatsApp pasados por ffmpeg: de 8 y 15 MB a 3,9 y 4,9, con la portada sacada de un fotograma del propio vídeo y sus datos estructurados de VideoObject.
_src/servicios.py · clave video · js/main.js · vídeoReproducción al entrar en pantalla · un sonido a la vez
Nada se carga sin permiso, y la medición tampoco
De serie, la web no habla con nadie más que con Google Fonts. Tag Manager y Microsoft Clarity sólo se cargan si el visitante acepta las cookies, con Consent Mode v2 denegado por defecto. Lo que sí hay desde el primer momento es el plan de medición de la auditoría, escrito en dataLayer: clic en teléfono, en WhatsApp y en los botones de presupuesto —con la zona de la página donde ocurre cada uno—, salida a Google Maps, inicio, error y envío del formulario, la conversión confirmada en la página de gracias y la profundidad de lectura al 25, 50, 75 y 90 %. Cuando GMF pegue sus identificadores, no habrá que tocar una línea.
Lo que se comprobó antes de enseñarla
Una web de reformas se abre en el móvil, en la calle, con datos. Por eso el rendimiento no es una nota de Lighthouse: es que la foto del hero esté precargada, que todo lo demás se cargue cuando toca, que nada salte al aparecer —CLS de cero en todas las páginas medidas— y que los estáticos lleven un año de caché, con el número de versión en la URL para que un cambio se vea el primer día.
La accesibilidad se midió con axe-core en las doce páginas, en escritorio y en móvil, y quedó a cero. No por una pasada final: el contraste de cada color está calculado desde los tokens, el foco se ve, los objetivos táctiles miden 44 píxeles, y los dos componentes que suelen fallar —el comparador y el visor de fotos— se manejan con teclado y le cuentan al lector de pantalla lo que están haciendo.
De CLS
Ninguna página salta al cargar: cada imagen lleva sus medidasRendimiento en móvil
Y 100 · 96 · 100 en accesibilidad, buenas prácticas y SEOContraste mínimo
El verde sobre el papel llega a 5,5:1; el dorado del texto, a 5:1Redirecciones 301
Las direcciones del Google Sites antiguo llegan a su sección nueva, no a un 404Google no se entera de que la web ha cambiado de sitio
El .htaccess fuerza HTTPS y www —una sola dirección canónica— y redirige con 301 cada una de las URL antiguas, acentos incluidos, a la página o la sección que le corresponde ahora: «quiénes somos» a las garantías, «nuestros trabajos / reforma integral de baño» a la página de baños. Las páginas llevan datos estructurados de HomeAndConstructionBusiness con la nota de Google, el horario y los diez municipios, y la portada, además, un FAQPage con las ocho preguntas. El sitemap se fecha solo al construir.
Una web en revisión que no disimula que lo está
Esto no está publicado todavía: está en una vista previa privada, con contraseña, para que el cliente la recorra con calma y diga qué cambia. Lo que queda no depende del código. Faltan por validar los pies de foto y las localidades, las cifras de obra —«800 obras», «300 baños»—, los cuatro precios de partida, la razón social y el CIF del pie y de los textos legales, la revisión jurídica de esos textos, los nombres de las doce reseñas, los identificadores de medición y el destinatario definitivo del formulario.
Mientras tanto, cada una de esas cosas está marcada en el código y en el README, entre corchetes o con una casilla, y el formulario de la vista previa envía las solicitudes al estudio, no al cliente, para que se pueda probar de principio a fin sin que una prueba se convierta en un presupuesto. Cuando GMF dé el visto bueno, la publicación es copiar la carpeta al hosting de reformasgmf.com y rellenar un fichero de configuración.
Pesa la vista previa entera (v9)
Casi todo son las fotos de obra en sus tres anchos y dos formatos, más los dos vídeosFichero de configuración
Destinatarios, remitente y sal: lo único que cambia al publicarVersiones el mismo día
v6, v6.1 y v6.2: el menú móvil, «Inicio» en las interiores y los vídeos de la integralCasillas pendientes del cliente
Textos, precios, CIF, legales, reseñas, formulario, analítica y dominioCómo se enseña una web que todavía no es pública
La vista previa vive en una carpeta de este mismo portfolio, detrás de una puerta en PHP: una contraseña, una cookie de treinta días y una regla de Apache que no deja pasar ninguna petición sin ella. Ocho intentos fallidos bloquean la IP un cuarto de hora. Las páginas llevan noindex y una cabecera que lo repite, y la carpeta está vetada en el robots.txt. El cliente ve la web en su dominio de verdad, con su formulario funcionando, y nadie más la encuentra.
La web, funcionando
Aquí debajo está la web entera, en el marco de siempre. Lo primero que verás es la puerta: escribe la contraseña y el marco carga la portada. Arrastra un comparador, filtra la galería, abre una foto en grande y prueba a enviar el formulario con un teléfono de ocho cifras.
Y usa el control de arriba a la derecha: pon el marco a tamaño teléfono y verás aparecer la barra fija de abajo y el menú a pantalla completa. No hay escalado; se le está entregando un ancho distinto.
Esta copia es la versión 9 real, la última tras la revisión de contenidos con el cliente, con los datos que GMF aún no ha cerrado: los precios, las cifras de obra y los textos legales son provisionales, y la web lo dice donde toca. El formulario funciona de principio a fin, pero mientras dure la revisión las solicitudes llegan al estudio, no a GMF. Sin la contraseña, el marco se queda en la puerta.
HTML, CSS y JS propios · PHP para el formulario · 70 KB de CSS y 31 KB de JavaScript · 0 librerías
De dónde sale
Esta ficha es la tercera de un mismo cliente. La primera es la auditoría digital: cuatro bloques, treinta hallazgos y la frase que lo resume —la mejor reputación del pueblo y la peor web del mercado—. La segunda es la identidad: el logotipo, el verde, la piedra del arco y el dorado del lema, que esta web hereda tal cual. Entre las dos y esta hubo una Fase 1 en Figma, el diseño UX/UI en alta fidelidad que el cliente aprobó.
Hacer las tres cosas cambia cómo se hace cada una. Quien escribe una auditoría sabiendo que la va a implementar deja de redactar recomendaciones y empieza a redactar cosas que se pueden terminar; y quien dibuja una marca sabiendo que la va a maquetar la dibuja con tokens. El resultado es una web que no tiene nada que no se haya decidido antes, y una vista previa en la que el cliente puede comprobar, botón a botón, que lo que se le prometió en un informe está ahí.
Siguiente en Desarrollo front-end
Retina · GAME TV — reconstrucción de interfaz en Next.js
