7.9 KiB
La página compuesta
/blocks/landing — una landing verosímil de un producto con 14 de los 18
blocks del tier, a sangre y sin marco de demo.
Es la puerta de cierre de F2b y existe por una razón concreta: el claim del tier
es que sus blocks ensamblan sin fricción, y ese claim es indemostrable block
a block. El outline de encabezados sólo existe CRUZANDO secciones; dos landmarks
sólo chocan cuando hay dos; una costura vertical sólo aparece cuando algo se pone
debajo. El defecto de los 16px de content-section salió la primera vez que otra
sección fue debajo, y A-95 sólo existe cruzado.
Qué compone
banner · site-header · hero · logo-cloud · feature-grid ·
feature-split · stats-band · testimonials · pricing · faq · cta ·
newsletter · site-footer · cookie-consent.
Los cuatro que NO entran, y por qué — el criterio es la naturalidad, no la cobertura:
| Block | Por qué no |
|---|---|
team |
una landing de producto no presenta al equipo; vive en «sobre nosotros» |
contact |
la landing lleva a precios, no a un formulario largo; el contacto es su propia página |
content-section |
es prosa larga (legal, changelog): otro tipo de página |
article-grid |
la banda editorial pertenece al blog o a la home de contenidos |
Una segunda página compuesta (about/blog) los cubriría: es gap con disparador, no alcance de ésta.
Lo que verifica, con su medida
Instrumento: Playwright headless (Chromium), 2026-08-18. El pane del navegador no compone frames — con rAF e IntersectionObserver suspendidos, ni las cascadas ni el foco se pueden medir allí.
| Qué | Medida | Estado |
|---|---|---|
| Outline de encabezados | 1 h1 · 22 encabezados · 0 saltos de nivel (1233333323322333222333) |
✅ |
| Landmarks | banner ×2 (ambos nombrados), navigation ×1, main ×1, contentinfo ×1, region ×6 (5 del FAQ + la barra de cookies) · 0 duplicados sin nombre |
✅ con un gap de canon abajo |
| Ritmo vertical | 0px de hueco entre secciones vecinas: el aire es SIEMPRE el padding de cada Section · costuras 112–192px según los sectionSize que se tocan |
✅ |
| Motion sección a sección | 5 portadoras data-stagger: 1 corre al cargar (está en el primer viewport), las otras 4 en data-animation-pending hasta que su sección entra — medido a 600/1200/2400/3600px |
✅ |
| A-95 | en flujo: solape 0, cabecera fijada en [0,49], hit-test dentro de la cabecera · con ?banner=affix: solape 49px = la altura entera, hit-test dentro de la tira |
⛔ RE-CONFIRMADO |
| Sema en el formulario | un contact-activate en el botón y un solo commit-submit en el form (familia commit, intent fulfill). Sin doble emisión |
✅ |
| Teclado | 70 tabulaciones sin trampa · a 375 el drawer abre con Enter, el foco entra, Escape cierra y el foco vuelve al disparador | ✅ |
| Claro / oscuro / RTL | sin desbordes horizontales en RTL (scrollWidth 1280 = innerWidth) · capturas en los tres | ✅ |
| 375 / 1280 | 9 capturas a 375, 8 a 1280 | ✅ |
Cómo se mide una página con motion de viewport
fullPage: true no sirve: no hace scroll, así que toda cascada bajo el
pliegue se queda en opacidad 0 y la captura sale en blanco. La primera medida de
esta página dijo «la landing está vacía» y era el instrumento. Igual de falso es
saltar de una vez a document.body.scrollHeight: las secciones pasan de debajo a
encima del viewport en un frame y el observador nunca las ve entrar. Se recorre
en pasos y se captura por viewport.
Lo que encontró
| Hallazgo | Dónde | Disposición |
|---|---|---|
Newsletter.Reason medía 2,33:1 sobre el panel (la nota a su lado, 8,5:1) |
block newsletter |
ARREGLADO aquí — la razón toma la tinta del panel como el resto; 2,33 → 8,83:1. Off-panel sigue muted |
banner |
canon Banner |
CERRADO (A-109, 2026-08-19) — el canon dejó de reclamar el rol: <section>, region sólo al nombrarla. La página expone UN banner, el de la cabecera |
A-95: affix="top" tapa la cabecera fijada |
canon Affix + tier |
re-confirmado — la pieza que falta es app-shell (F3.1). La página compone en flujo, que es correcto |
feature-split no tiene parte .Header |
block feature-split |
CERRADO (A-110, 2026-08-19) — la parte existe: el h2 es suyo y las filas cuelgan en h3 por defecto. Esta página dejó de componer el encabezado a mano y de bajar cada fila |
Un AspectRatio 9/16 en una columna partida da un móvil de 995px |
esta página | arreglado aquí — la pantalla del móvil lleva alto fijo, como ya hacía la demo del propio block |
Cómo se ve
Las capturas del día viven en el scratchpad de la sesión (e-1280-*, e-375-*).
Para re-medir: scripts no; las sondas son de sesión y se re-escriben — lo que
persiste es esta tabla y su fecha.
Notas de composición
<main>es del APP, no de ningún block: el tier shippea secciones y sólo la página sabe cuál es el contenido principal. Sin él, todo lo que hay entre la cabecera y el pie no pertenece a ningún landmark.- La tira va en FLUJO, encima de la cabecera: se va con el scroll y la
cabecera se fija contra un borde limpio.
?banner=affixre-escenifica A-95 para poder medirlo en vez de citarlo. - El pie reabre el panel de cookies — el control que toda página debe, y la prueba de que retirar el consentimiento es tan fácil como darlo.