gergobalogh/launch-check

Verificación de lanzamiento: ¿está lista esta página?

El día del lanzamiento trae la mayor parte de la audiencia de una página, y una solución el día 2 pierde a la mayoría. Hazlo bien antes de que se publique la publicación.

Esta lista de verificación se aplica a cualquier página. Mantenla libre de nombres de página y datos de página: escribe aquí una nueva lección como regla general, y guarda la página y sus números en las notas propias del proyecto.

Cómo ejecutarlo

1. Nombra la página. Su tipo (artículo o historia, herramienta o juego, centro), su propósito en una frase y sus pasos: llegó → usable → primer uso → acción principal → funcionó → siguiente paso. Omite los pasos que no apliquen. No agregues entradas, números o acciones solo para cumplir una verificación.
2. Sirve una compilación local (dist/ o el servidor de desarrollo) con analytics bloqueados. Nunca abras la página en vivo.
3. Revisa cada punto en las cuatro pantallas a continuación. Marca cada uno como pasa, falla, no verificado o N/A con una razón. Para un punto que requiera juicio, escribe lo que viste (la oración que reformulaste, la captura de pantalla que viste), no solo "pasa".
4. Bloqueador: arréglalo u obtén una exención explícita del usuario, y verifícalo si no estaba verificado. Recomendación: repórtalo; no detiene el lanzamiento.
5. Escribe el resultado en las notas o el tablero de tareas del proyecto, contando los 29 puntos: Verificación de lanzamiento: 25 pasan, 1 falla, 1 no verificado, 2 N/A; bloqueador: U1 falla; recomendación: S3 no verificado; N/A: U2 (sin entrada), U3 (sin esperas).

Pantallas: móvil 390×844, tableta 820×1180, portátil 1366×768, escritorio grande 1920×1080. Verifica cada una; un diseño amplio mueve las cosas tanto como uno estrecho. Confirma las fallas de diseño con una captura de pantalla, ya que el código fuente por sí solo no puede mostrarlas.

Navegador: un Chromium headless (Playwright) es suficiente, ya que una compilación local no necesita inicio de sesión. Antes de cargar la página, bloquea tu host de analytics en esa pestaña (page.route(/tu-host-analytics/, r => r.abort())), para que las verificaciones nunca cuenten como visitas.

Por tipo de página:

• Artículo o historia: seguir desplazándose es el siguiente paso, por lo que U2 es N/A y U3 si nada espera.
• Herramienta o juego: T2 cubre cualquier texto que tenga la página; el primer uso debe dar un resultado real.
• Centro (hub): la recompensa es encontrar lo correcto, por lo que T1 significa que cada enlace hace lo que promete.

Gancho

• H1 · Bloqueador. Solo desde la primera pantalla, en todos los tamaños, puedes decir en una oración qué obtiene el visitante. La recompensa, no el tema. Escribe esa oración. Si no puedes escribirla, o solo nombra el tema, esto falla.
• H2 · Recomendación. La primera pantalla le da a un desconocido una razón para continuar: un hallazgo específico, número, resultado o pregunta, y uno verdadero. Debería seguir funcionando para alguien que llegue desde una publicación sin contexto.
• H3 · Recomendación. La vista previa del enlace hace la misma promesa. og:image, título y descripción dicen la recompensa. Verifica las etiquetas y la imagen en la compilación.
• H4 · Bloqueador. La primera acción es visible sin desplazarse en todos los tamaños y claramente parece una, con suficiente contraste. En una historia de desplazamiento, la primera acción es el desplazamiento: una señal de desplazamiento visible pasa.

Cuerpo

• T1 · Bloqueador. El cuerpo cumple lo que prometió el gancho, y temprano. La recompensa no espera hasta el final. Si la página es larga, primero viene una versión corta y el resto es elección del visitante.
• T2 · Bloqueador. Se lee bien de principio a fin. Léelo todo en orden, como lo haría un desconocido. Cada parte sigue a la anterior y agrega algo, nada es relleno, y puedes volver a contar todo en una oración.
• T3 · Recomendación. Un punto o número principal por pantalla. El resto va en una tabla o detrás de "más". N/A si la página no presenta números o hallazgos.
• T4 · Bloqueador. Cada número y afirmación tiene una fuente, y todo lo oculto funciona. Abre cada cajón, pestaña y acordeón y sigue cada enlace de fuente. Una sección cerrada sigue siendo parte de la página.
• T5 · Recomendación. El texto copia pasa las reglas de estilo del autor y una verificación de texto escrito por IA, sin texto de marcador de posición, borrador o depuración. El texto de la página se publica bajo el nombre del usuario, así que reporta los problemas y pregunta; no lo reformules solo.

Pantallas

• S1 · Bloqueador. Se ve bien en las cuatro pantallas, en cada paso. Toma una captura de pantalla después de cada paso y mira cada una: nada cortado, superpuesto o sin estilo (los elementos creados por script pueden perder CSS con ámbito), sin desplazamiento lateral. Después de una búsqueda o selección que mueva un mapa, verifica que el resultado caiga en la parte no cubierta por un panel, en todos los tamaños.
• S2 · Bloqueador. Todo el texto es legible en su tamaño renderizado. Mídelo, no lo juzgues a simple vista, y apunta a 12 px o más. Para gráficos SVG: tamaño de fuente × ancho renderizado ÷ ancho viewBox.
• S3 · Recomendación. Utilizable en menos de 2 s en un móvil. Utilizable significa el punto más temprano en que la primera acción funciona. Mídelo desde que comienza la carga, con caché fría y un perfil de CPU y red de móvil especificado. Una ejecución en escritorio sin limitación no puede mostrar un pase en móvil.
• S4 · Bloqueador. La carga lenta y la fallida se ven bien. Prueba redes lentas (CDP Network.emulateNetworkConditions, 9 / 1.6 / 0.75 / 0.4 Mbps) y una carga fallida. Sirve con compresión como la CDN para los tiempos; un servidor local sin compresión exagera cada espera. Captura de pantalla cada 0.5 s en cada transición de carga desde un inicio en frío y mira los fotogramas. Mantén la última imagen buena con una etiqueta de carga; un fallback es solo para fallos. Las etiquetas deben ser correctas durante la carga y después de una falla. N/A si nada se carga tarde.

Uso

• U1 · Bloqueador. Después de cada paso, el siguiente control está en pantalla en todos los tamaños, donde la página deja al visitante. Prueba cada forma de entrar a un paso por separado (ejemplo, escrito, pulsado). Verifica cada destino de desplazamiento, encabezado fijo y el pliegue.
• U2 · Recomendación. Hay una forma de un solo toque para entrar (un ejemplo o preajuste) junto a cualquier entrada de forma libre, y el evento indica cuál se usó. N/A sin entrada de forma libre.
• U3 · Bloqueador. Cualquier espera de más de 2 s muestra progreso y termina en un resultado claro o un error claro. Conduce una respuesta retrasada y una fallida localmente. Un spinner que nunca termina falla. N/A si ninguna acción espera. Un control mostrado antes de que su script haya cargado (un formulario para un mapa perezoso) debe funcionar o ponerse en cola: úsalo durante la carga y después de una carga fallida. Un envío de formulario no manejado recarga la página.

Siguiente paso

• N1 · Recomendación. En el momento del éxito, hay una cosa clara a continuación: una página relacionada, probar otra, jugar de nuevo. Ponlo donde ocurre el éxito, no en el pie de página.
• N2 · Recomendación. Botones de compartir que envían el hallazgo: WhatsApp, Facebook, X y copiar enlace, cada uno llevando una oración escrita con el hallazgo, no solo el título, colocados donde aparece el resultado. La oración es copia pública, así que el usuario la redacta: pregunta. Un centro sin un hallazgo aún necesita una oración del usuario. No inventes uno ni marques esto como N/A solo. El evento share envía la red únicamente, nunca el texto o la URL.

Búsqueda

Las respuestas de IA de Google (AI Overviews, AI Mode) toman páginas del índice de búsqueda ordinario: una página que se posiciona con un fragmento puede ser citada, y no se necesita ningún archivo o marcado solo de IA. Los datos estructurados deben coincidir con lo que muestra la página.

• F1 · Bloqueador. La página puede ser indexada: una dirección canónica, sin noindex errante, listada en el sitemap. Una página demasiado fina para posicionarse (un stub que solo enlaza a otros lugares, una lista vacía) se mantiene fuera de la búsqueda: noindex y fuera del sitemap, sin otra versión de idioma que apunte a ella.
• F2 · Recomendación. El título dice lo que contiene la página, no solo el nombre del sitio, con el nombre al final; la descripción es propia de la página y no aparece en ninguna otra página.
• F3 · Recomendación. Una línea visible dice quién la hizo, cuándo se publicó y qué tan nuevos son sus datos, con la misma fecha de publicación en los datos estructurados. Cambia la fecha de modificación solo cuando el contenido realmente cambie. N/A para un centro.
• F4 · Bloqueador. Cada imagen en el HTML tiene una fuente y texto alternativo real, incluyendo figuras mostradas solo sin JavaScript. Un <img> vacío falla.
• F5 · Recomendación. Una página construida sobre datos ofrece los datos: un CSV después de una verificación de privacidad (solo los campos que la página ya muestra), una línea de licencia junto a la descarga y marcado Dataset. Un video obtiene marcado VideoObject con un póster. N/A cuando la página no tiene ninguno.

Después del lanzamiento: solicita la indexación de la página en Search Console (la cuenta del usuario, así que pregunta) y agrega la pregunta que responde a la lista de preguntas de respuesta de IA del proyecto, si la mantiene.

Medición

Las verificaciones asumen un rastreador de eventos que respeta la privacidad (Umami, Plausible o similar) con eventos personalizados.

• M1 · Bloqueador. Los eventos están en la compilación que se lanza. Un evento por paso aplicable, uno por acción, el éxito es el efecto y no el clic, y un evento *-leave da el paso más lejano y el tiempo en vista.
• M2 · Bloqueador. Los eventos se disparan a través del rastreador real. Una función de rastreador simulada puede ocultar eventos perdidos. Ejecuta el rastreador real en el nombre de host de producción, con context.route sirviendo la compilación local y capturando el endpoint de envío del rastreador para que nada salga de la máquina. Acciona cada control, también los enlaces de salto: cada evento describe su acción, el fallo no envía éxito, y un salto más allá del contenido no envía evento de lectura. Sigue un enlace externo rastreado en la misma pestaña y verifica que el evento *-leave aún llegue: una solicitud iniciada mientras la página se descarga puede perderse, por lo que dichos enlaces se abren en una nueva pestaña.
• M3 · Bloqueador. Los eventos están listados en docs/analytics.md del proyecto con la hora de publicación, y una especificación de embudo está en docs/funnels/ (guardarlo en la herramienta de analytics necesita el sí del usuario).
• M4 · Bloqueador. Nada de lo que el visitante escribió o eligió se envía a analytics: sin hash en las vistas de página (excluye el hash), sin texto de consulta, sin lugares. Solo etiquetas fijas y cubos.
• M5 · Bloqueador. Los objetivos se escriben antes del lanzamiento (un número por paso que esperas alcanzar), para que la revisión posterior al lanzamiento tenga algo con qué comparar.
• M6 · Bloqueador. Los agentes se mantienen fuera de la página en vivo, porque sus visitas cuentan como tráfico real. Un script de verificación que pueda apuntar a la página en vivo debe bloquear analytics por sí mismo.