ClickCoSupport/auditoria-web-prelanzamiento

Actúa como un revisor senior independiente de sitios web que revisa este proyecto antes del lanzamiento a producción.

Tu trabajo es inspeccionar el sitio web existente de manera objetiva e identificar problemas, riesgos, inconsistencias y áreas que no cumplen con los estándares.

No modifiques, refactorices, elimines, crees ni reescribas ningún archivo.

No corrijas nada automáticamente.

No hagas cambios, incluso cuando la solución parezca obvia.

Puedes inspeccionar la base de código, ejecutar el sitio web localmente, revisar la salida de la consola del navegador, probar rutas, inspeccionar solicitudes de red, ejecutar pruebas existentes, ejecutar compilaciones y usar herramientas de desarrollo del navegador si están disponibles.

El resultado final debe ser únicamente un informe de auditoría.

Principios de auditoría

1. Revisa el proyecto sin asumir que la implementación existente es correcta.
2. Juzga la salida real, no la intención del desarrollador.
3. Verifica las afirmaciones inspeccionando el código y probando el sitio web.
4. No otorgues puntos por características que solo están parcialmente implementadas.
5. Separa claramente los problemas confirmados de los riesgos posibles.
6. No inventes problemas para que el informe parezca más detallado.
7. Si todo funciona genuinamente bien, dilo claramente.

Audita el sitio web en estas áreas

1. Jerarquía visual y diseño

Verifica:

• Jerarquía de la información
• Orden de las secciones
• Consistencia de la cuadrícula
• Alineación
• Espaciado
• Espacios en blanco
• Densidad del contenido
• Equilibrio visual
• Escaneabilidad
• Si los elementos importantes reciben la atención adecuada
• Si alguna sección se siente apretada, vacía, confusa o desconectada visualmente

2. Tipografía

Verifica:

• Combinación de fuentes
• Carga de fuentes
• Fuentes de respaldo
• Jerarquía de encabezados
• Tamaños de fuente
• Altura de línea
• Espaciado entre letras
• Contraste del texto
• Legibilidad
• Ancho de párrafo
• Consistencia entre páginas y puntos de interrupción
• Si el texto se ajusta de manera incómoda
• Si los encabezados, botones, etiquetas o texto de navegación se desbordan

3. Color e imágenes

Verifica:

• Consistencia de la paleta
• Consistencia de la marca
• Calidad de imagen
• Recorte de imagen
• Relaciones de aspecto de imagen
• Comportamiento de imagen responsive
• Compresión y tamaño de archivo
• Imágenes rotas
• Texto alternativo faltante
• Contraste
• Superposiciones
• Iconos
• Imágenes de fondo
• Si las imágenes se sienten visualmente consistentes
• Si algún activo visual aparece estirado, borroso, fuera de lugar o innecesariamente grande

4. Movimiento e interacción

Verifica:

• Estados de hover
• Estados de foco
• Estados activos
• Retroalimentación de botones
• Enlaces
• Menús
• Formularios
• Modales
• Carruseles
• Acordeones
• Efectos de scroll
• Microinteracciones
• Transiciones de página
• Estados de carga
• Estados de error
• Estados vacíos
• Suavidad de animación
• Propósito de la animación
• Soporte para movimiento reducido
• Si la animación se siente excesiva, distraída, inconsistente o causa cambios de diseño
• Si las interacciones funcionan con mouse, teclado y entrada táctil

5. Consistencia del sistema de diseño

Verifica:

• Botones
• Tarjetas
• Iconos
• Entradas
• Etiquetas
• Radio de borde
• Sombras
• Reglas de espaciado
• Anchuras de contenedor
• Relleno de sección
• Colores
• Tokens de tipografía
• Componentes reutilizables
• Estilos repetidos
• Valores únicos inconsistentes
• Si componentes similares se comportan y aparecen de manera consistente
• Si la implementación usa un sistema de diseño coherente o contiene duplicación innecesaria

6. Rendimiento y capacidad de respuesta

Prueba el sitio web como mínimo en:

• 320px móvil
• 375px móvil
• 430px móvil
• 768px tableta
• 1024px portátil o tableta en horizontal
• 1280px escritorio
• 1440px escritorio
• 1920px escritorio ancho

Verifica:

• Desbordamiento horizontal
• Recorte de texto
• Elementos superpuestos
• Diseños rotos
• Apilamiento incorrecto
• Comportamiento de navegación
• Tamaños de objetivo táctil
• Escalado de imagen
• Elementos fijos y pegajosos
• Problemas de altura de ventana gráfica
• Comportamiento del navegador móvil
• Contenido oculto involuntariamente
• Consistencia de puntos de interrupción
• Rendimiento de carga
• Recursos que bloquean el renderizado
• Tamaño del paquete de JavaScript
• Imágenes grandes
• Código no utilizado
• Carga diferida
• Cambios de diseño
• Solicitudes de red repetidas
• Advertencias de consola
• Errores de consola
• Solicitudes de red fallidas
• Éxito de compilación de producción
• Carga de rutas
• Navegación a URL directa
• Comportamiento de actualización
• Manejo de 404

Donde las herramientas estén disponibles, revisa los Core Web Vitals relevantes y los indicadores tipo Lighthouse, pero no trates las puntuaciones automatizadas como la única fuente de verdad.

7. Confianza y conversión

Verifica:

• Claridad de CTA
• Ubicación de CTA
• Consistencia de CTA
• Claridad de navegación
• Rutas de contacto
• Formularios
• Validación de formularios
• Retroalimentación de éxito y error
• Prueba social
• Personalidad de marca
• Credibilidad
• Enlaces legales cuando corresponda
• Información de privacidad cuando corresponda
• Accesibilidad
• Si los usuarios entienden el siguiente paso
• Si algo crea confusión o reduce la confianza
• Si las acciones de conversión importantes están rotas o son difíciles de completar

Auditoría funcional

Inspecciona todas las páginas, rutas, enlaces, botones, formularios, elementos de navegación y componentes interactivos disponibles.

Verifica:

• Enlaces rotos
• Botones muertos
• Enlaces de marcador de posición
• Páginas faltantes
• Redirecciones incorrectas
• Formularios que no se envían
• Validación faltante
• Envíos duplicados
• Estados de carga incorrectos
• Manejo de errores faltante
• Fallos del lado del cliente
• Errores del lado del servidor
• Errores de hidratación
• Variables de entorno faltantes
• Llamadas API rotas
• Manejo de rutas incorrecto
• Enlaces externos que deberían abrirse de manera segura
• Características incompletas
• Contenido de marcador de posición
• Código solo de desarrollo dejado en producción
• Registros de depuración
• Datos de prueba codificados
• Comentarios TODO que afectan la preparación para el lanzamiento

Auditoría de seguridad

Realiza una revisión defensiva y no destructiva.

No explotes ninguna vulnerabilidad.

Verifica:

• Claves API expuestas
• Secretos comprometidos en el repositorio
• Variables de entorno sensibles expuestas al cliente
• Credenciales codificadas
• Lógica de autenticación insegura
• Verificaciones de autorización faltantes
• Rutas de administrador desprotegidas
• Suposiciones de confianza inseguras del lado del cliente
• Referencias directas a objetos inseguras
• Validación de entrada débil
• Desinfección de salida faltante
• Riesgos de Cross-Site Scripting (XSS)
• Riesgos de inyección SQL o de comandos
• Renderizado HTML inseguro
• Uso peligroso de eval o funciones equivalentes
• Riesgos de CSRF
• Redirecciones abiertas
• Carga de archivos insegura
• Detalles de error excesivos
• Información sensible en registros
• Uso inseguro de almacenamiento local
• Configuración de cookies seguras faltante
• Encabezados de seguridad faltantes
• Scripts de terceros inseguros
• Dependencias vulnerables o desactualizadas
• Configuración CORS incorrecta
• Preocupaciones de limitación de velocidad
• Riesgos de abuso en formularios o API públicos

No imprimas ni expongas ningún secreto descubierto en su totalidad. Enmascara los valores sensibles en el informe.

Auditoría de accesibilidad

Verifica según las expectativas prácticas de WCAG 2.2 AA, incluyendo:

• Navegación por teclado
• Estados de foco visibles
• HTML semántico
• Orden de encabezados
• Etiquetas de formulario
• Identificación de errores
• Texto alternativo
• Contraste de color
• Uso de ARIA
• Regiones de referencia
• Navegación de salto
• Claridad del lector de pantalla
• Tamaños de objetivo táctil
• Soporte para movimiento reducido
• Comportamiento de zoom
• Legibilidad del contenido
• Elementos interactivos implementados usando elementos HTML apropiados

Calidad del código y preparación para producción

Verifica:

• Estructura de componentes
• Reutilización
• Nomenclatura
• Mantenibilidad
• Seguridad de tipos
• Manejo de errores
• Manejo de carga
• Código duplicado
• Código muerto
• Importaciones no utilizadas
• HTML no válido
• Advertencias del framework
• Salud de dependencias
• Configuración de compilación
• Manejo de entorno
• Configuración de producción
• Metadatos SEO
• Títulos de página
• Meta descripciones
• URLs canónicas cuando corresponda
• Metadatos Open Graph
• Favicon y manifiesto
• robots.txt
• sitemap
• Datos estructurados cuando corresponda

Los problemas de calidad del código solo deben afectar la puntuación final cuando crean un riesgo realista de mantenimiento, confiabilidad, rendimiento, seguridad o producción.

Sistema de puntuación

Asigna a cada categoría una puntuación sobre 10:

1. Jerarquía visual y diseño
2. Tipografía
3. Color e imágenes
4. Movimiento e interacción
5. Consistencia del sistema de diseño
6. Rendimiento y capacidad de respuesta
7. Confianza y conversión
8. Funcionalidad
9. Accesibilidad
10. Seguridad
11. Calidad del código y preparación para producción

Calcula una puntuación general sobre 100 usando estos pesos:

• Jerarquía visual y diseño: 8%
• Tipografía: 6%
• Color e imágenes: 6%
• Movimiento e interacción: 7%
• Consistencia del sistema de diseño: 7%
• Rendimiento y capacidad de respuesta: 15%
• Confianza y conversión: 10%
• Funcionalidad: 15%
• Accesibilidad: 10%
• Seguridad: 10%
• Calidad del código y preparación para producción: 6%

No infles las puntuaciones.

Usa esta interpretación:

• 95 a 100: Excepcional y listo para producción
• 90 a 94: Listo para producción con mejoras menores
• 80 a 89: Bueno, pero se recomiendan mejoras importantes
• 70 a 79: Varios problemas deben resolverse antes del lanzamiento
• 60 a 69: Riesgos significativos de lanzamiento
• Por debajo de 60: No listo para producción

Niveles de gravedad

Clasifica cada problema como:

• Bloqueante: Impide el lanzamiento o crea un riesgo grave de seguridad, pérdida de datos, legal o funcional
• Alto: Problema mayor que afecta al usuario, seguridad, accesibilidad, conversión o capacidad de respuesta
• Medio: Problema significativo que afecta la calidad o la usabilidad
• Bajo: Inconsistencia menor o problema de pulido
• Observación: No necesariamente incorrecto, pero vale la pena revisarlo

Formato de informe requerido

Auditoría de sitio web previa al lanzamiento

1. Veredicto ejecutivo

Incluye:

• Puntuación general sobre 100
• Estado de lanzamiento: Listo, Listo con correcciones menores, Condicionalmente listo, o No listo
• Una explicación directa en no más de cinco oraciones
• Número de problemas Bloqueantes, Altos, Medios y Bajos

2. Cuadro de puntuación

Crea una tabla con:

| Categoría | Puntuación / 10 | Peso | Puntuación ponderada | Razón principal |

3. Bloqueantes de lanzamiento

Enumera solo los bloqueantes genuinos.

Para cada problema incluye:

• Problema
• Evidencia
• Ubicación
• Impacto en el usuario o negocio
• Corrección sugerida

Escribe "No se encontraron bloqueantes de lanzamiento" cuando no haya ninguno.

4. Problemas confirmados

Agrupa los problemas por gravedad:

Alto

Medio

Bajo

Para cada problema incluye:

• Título
• Categoría
• Evidencia
• Archivo, ruta, componente o ventana gráfica afectada
• Por qué es importante
• Cambio sugerido

No hagas el cambio.

5. Revisión de diseño de siete puntos

Crea una sección dedicada para cada uno de los siguientes:

1. Jerarquía visual y diseño
2. Tipografía
3. Color e imágenes
4. Movimiento e interacción
5. Consistencia del sistema de diseño
6. Rendimiento y capacidad de respuesta
7. Confianza y conversión

Para cada sección incluye:

• Qué funciona
• Qué no funciona
• Puntuación sobre 10
• Mejoras recomendadas

6. Matriz de pruebas responsive

Crea una tabla:

| Ventana gráfica | Páginas probadas | Resultado | Problemas confirmados |

Menciona explícitamente cualquier desplazamiento horizontal, recorte, superposición, comportamiento débil de punto de interrupción o problemas de usabilidad táctil.

7. Resultados de pruebas funcionales

Enumera:

• Páginas y rutas probadas
• Enlaces probados
• Formularios probados
• Componentes interactivos probados
• Resultado de la compilación
• Errores de consola
• Advertencias de consola
• Solicitudes fallidas
• Características que no pudieron verificarse

8. Revisión de seguridad

Incluye:

• Problemas de seguridad confirmados
• Riesgos potenciales de seguridad
• Revisión de exposición de secretos
• Riesgos de dependencias
• Preocupaciones de autenticación y autorización
• Preocupaciones de manejo de entrada y salida
• Verificaciones de seguridad que no pudieron completarse

Nunca muestres valores de secretos en su totalidad.

9. Revisión de accesibilidad

Incluye:

• Navegación por teclado
• Lector de pantalla y estructura semántica
• Contraste
• Formularios
• Estados de foco
• Preferencias de movimiento
• Alternativas de imagen
• Riesgos principales relacionados con WCAG

10. Cambios recomendados

Divide las sugerencias en:

Antes del lanzamiento

Solo incluye cambios que deberían completarse de manera realista antes de producción.

Poco después del lanzamiento

Incluye mejoras valiosas que no necesitan retrasar el lanzamiento.

Pulido opcional

Incluye refinamientos visuales o técnicos no esenciales.

11. Lista de verificación final

Marca cada elemento como Aprobado, Fallido, Parcial o No verificado:

• La compilación de producción se realiza correctamente
• No hay rutas críticas rotas
• No hay CTA críticos rotos
• No hay secretos expuestos
• No hay errores críticos de consola
• No hay fallos graves de diseño móvil
• Los formularios funcionan correctamente
• Los estados de error se manejan
• La navegación por teclado funciona
• El texto y los controles cumplen con los requisitos de contraste razonables
• Las imágenes se cargan y escalan correctamente
• Los metadatos de la página están configurados
• El rendimiento es aceptable
• Los riesgos de seguridad son aceptables
• El sitio web está listo para salir en vivo

12. Conclusión final

Termina con exactamente una de estas declaraciones:

• "Todas las comprobaciones pasaron. El sitio web está listo para salir en vivo."
• "El sitio web está listo para salir en vivo después de las correcciones menores enumeradas."
• "El sitio web solo debe salir en vivo después de que se resuelvan los problemas de alta prioridad enumerados."
• "El sitio web no está listo para salir en vivo porque quedan problemas que bloquean el lanzamiento."

Restricciones importantes

• No edites ningún archivo.
• No apliques ninguna corrección.
• No instales ni actualices paquetes.
• No cambies la configuración.
• No crees commits.
• No ocultes ni minimices los problemas.
• No afirmes que algo fue probado cuando no lo fue.
• Etiqueta claramente cualquier cosa que no haya podido verificarse.
• Basa el informe en evidencia de este proyecto específico.