Clerkcode02/app-screenshot-showcase

Presentación de capturas de pantalla de la aplicación

Las capturas de pantalla reales son la fuente de la verdad. Nunca fabriques, redibujes, retoques ni "mejores" la interfaz de usuario de la aplicación. Nunca alteres el texto dentro de las capturas de pantalla.

Dos tipos de dispositivo. Reportar, Revisar y Resolver son pantallas de la aplicación móvil para ciudadanos (device: "mobile", renderizadas en PhoneFrame, vertical). Asignar y Responder ocurren en la vista web del centro de operaciones, no en la aplicación móvil (device: "web", renderizadas en BrowserFrame, horizontal); consulta sos-content-accuracy "Datos verificados del producto". Acierta esto en la captura: una captura de pantalla de un panel web forzada en un marco de teléfono tergiversa el producto.

Dónde van los archivos

Qué	Ubicación de colocación (usuario)	Salida (generada)
Capturas de pantalla de la aplicación (PNG/JPG, resolución completa)	assets/screenshots-raw/	public/screenshots/<id>.webp (+ .avif)
Logotipo, icono de aplicación, marcas	assets/brand-raw/	public/brand/
Imagen Open Graph (1200×630)	assets/brand-raw/og-image.png	public/brand/og-image.jpg

assets/ no se despliega. Solo los archivos optimizados en public/ se envían.

Convención de nombres

<orden>-<propósito-de-la-pantalla>.png, en kebab-case y minúsculas, p.ej. 01-home.png, 02-category-select.png, 03-report-form.png, 04-report-submitted.png, 06-welcome.png, 07-register.png, 08-verify.png, 09-login.png. Si los archivos del usuario tienen nombres arbitrarios, inspecciona cada uno y cambia el nombre según el propósito.

Identificadores actuales del manifiesto y lo que cada uno debe contener:

id (base del nombre de archivo)	Dispositivo	Pantalla
hero-primary	mobile	Pantalla de inicio
hero-secondary	mobile	Pantalla de selección de categoría
how-report	mobile	Formulario de reporte (capturando/enviando un incidente)
how-review	mobile	Pantalla de confirmación después de enviar
how-assign	web	Vista web del centro de operaciones: reporte siendo asignado
how-respond	web	Vista web del centro de operaciones: guía de ruta/ubicación del respondedor
how-resolve	mobile	Pantalla de estado que muestra un reporte resuelto
register-welcome	mobile	Pantalla de bienvenida / primera apertura
register-form	mobile	Pantalla de detalles de registro
register-verify	mobile	Pantalla de verificación (omitir si la aplicación no tiene ninguna)
register-home	mobile	Pantalla de inicio de sesión

Capturas de pantalla móviles: verticales, directamente del teléfono, sin recortar. Capturas de pantalla web (how-assign, how-respond): capturas de navegador en horizontal de la vista del centro de operaciones, sin recortar.

Flujo de trabajo de captura (cada nuevo lote)

1. Inspecciona cada imagen (ábela). Identifica el propósito: bienvenida, registro, verificación, inicio de sesión, inicio, selector de categorías, formulario de reporte, cámara/captura, confirmación, estado/seguimiento, notificaciones, vista de respondedor, mapa/ruta, otro.
2. Revisión de privacidad — busca nombres reales, números de teléfono, correos electrónicos, direcciones, rostros, números de placa, ubicaciones exactas del hogar, IDs, tokens. Si se encuentran: detente y pide al usuario una versión limpia. NO difumines/edites tú mismo a menos que el usuario lo solicite explícitamente, y luego solo difumina, nunca alteres la interfaz de usuario.
3. Registra las dimensiones y la relación de aspecto. Nunca recortes la interfaz de usuario ni estires. La barra de estado puede permanecer como está.
4. Optimiza: npm run optimize:screenshots (sharp): genera WebP q≈82 y AVIF q≈60 con un ancho máximo de 1080px, mantén la relación de aspecto original, elimina metadatos (EXIF/GPS). Mantén el texto legible — haz zoom para verificar el texto pequeño de la interfaz de usuario después de la compresión.
5. Registra en src/config/screenshots.ts (ver el esquema a continuación).
6. Coloca usando la tabla de mapeo; propón la colocación al usuario en una lista corta si es ambiguo.
7. Verifica el diseño en 320/768/1440, sin CLS, texto alternativo presente, solo hero usa priority.
8. Actualiza docs/assets-guide.md con el registro de captura.

Esquema del manifiesto

// src/config/screenshots.ts
export type ScreenPurpose =
  | "welcome" | "register" | "verify" | "login" | "home"
  | "category" | "report-form" | "capture" | "submitted"
  | "status" | "notifications" | "responder" | "map" | "other";

export type Slot =
  | "hero-primary" | "hero-secondary"
  | "how-report" | "how-review" | "how-assign" | "how-respond" | "how-resolve"
  | "showcase" | "register-welcome" | "register-form" | "register-verify" | "register-home"
  | "tracking";

export type Device = "mobile" | "web"; // mobile → PhoneFrame, web → BrowserFrame

export interface Screenshot {
  id: string;                 // "03-report-form"
  src: string | null;         // "/screenshots/03-report-form.webp"; null = marcador de posición
  width: number; height: number; // píxeles intrínsecos del archivo optimizado
  alt: string;                // describe lo que muestra la pantalla, de manera factual
  purpose: ScreenPurpose;
  slots: Slot[];
  device: Device;
  caption?: string;
  privacyChecked: boolean;    // debe ser true antes de que src no sea nulo en producción
}
export const screenshots: Screenshot[] = [ /* ... */ ];
export const bySlot = (slot: Slot) => screenshots.filter(s => s.slots.includes(slot));

• Relación de aspecto predeterminada del marcador de posición: 1179×2556 (≈ 9:19.5) para device: "mobile"; 1600×1000 (≈ 16:10) para device: "web" — hasta que se conozcan los tamaños reales.
• La compilación debe advertir (consola en desarrollo) si una captura de pantalla tiene src pero privacyChecked: false.

Mapeo de colocación

Propósito de la pantalla	Ranura(s)	Dispositivo
home	hero-primary, register-home, showcase	mobile
category	hero-secondary, how-report, showcase	mobile
report-form / capture	how-report, showcase	mobile
submitted	how-review, showcase	mobile
status	tracking, how-resolve, showcase	mobile
notifications (assign)	how-assign	web
map/route (respond)	how-respond	web
welcome	register-welcome	mobile
register	register-form	mobile
verify	register-verify (omitir el paso por completo si no existe tal pantalla)	mobile
login	register-home	mobile

showcase solo contiene capturas de pantalla de la aplicación móvil (Reportar, Revisar, Resolver): es la galería de la aplicación ciudadana, no un lugar para la vista web del centro de operaciones.

Reglas de texto alternativo

Describe lo que es visible, no afirmaciones de marketing. Bueno: "Pantalla de selección de categoría que enumera Rescate, Policía, Bomberos y otros tipos de reporte." Malo: "¡Reporte rápido y fácil!" Los duplicados decorativos (p.ej., un reflejo) llevan alt="".

Componentes PhoneFrame / BrowserFrame / DeviceFrame

• PhoneFrame: marco CSS puro, rectángulo redondeado (ink-raised), resalte interior de 1px, delgada inserción de pantalla, píldora opcional de isla dinámica. Sin maquetas PNG del dispositivo.
• BrowserFrame: marco CSS puro de ventana de navegador (mismo lenguaje de superficie), tres puntos cromados simples, sin barra de URL falsa ni interfaz de navegador fabricada. Se usa para pantallas device: "web" (Asignar, Responder).
• DeviceFrame: elige PhoneFrame vs BrowserFrame según screenshot.device — úsalo en los lugares de llamada que renderizan una ranura/etapa genéricamente (Cómo funciona) en lugar de codificar un tipo de marco.
• Hijos: next/image con width/height explícitos del manifiesto, sizes configurado (p.ej. (min-width:1024px) 320px, 70vw), loading="lazy" excepto hero-primary (priority, fetchPriority="high").
• Modo marcador de posición (src === null): pantalla de gradiente neutro, etiqueta pequeña "Ranura de captura de pantalla: — esperando pantalla real de la aplicación", relación de aspecto correcta. Sin elementos de interfaz falsos, sin botones ni texto falsos.
• El contenido de la pantalla debe permanecer erguido y legible: rotación Y máxima de 18°, nunca reflejado.
• Móvil (< 1024px): sin rotación 3D; teléfonos planos, galería de desplazamiento horizontal nativo con snap (snap-x snap-mandatory, scroll-padding), indicador de desplazamiento visible, región enfocable con teclado y aria-label.

Lista de verificación por lote

• Cada imagen inspeccionada y propósito identificado
• Sin datos personales visibles (o el usuario confirmó que son datos de prueba)
• Archivos optimizados < ~180KB cada uno, texto aún legible
• Entradas del manifiesto completas: dimensiones, alt, propósito, ranuras, dispositivo, privacyChecked
• Solo una imagen priority en la página
• Sin desplazamiento de diseño; relaciones de aspecto intactas
• Las ranuras de marcador de posición no utilizadas aún se renderizan correctamente etiquetadas
• Lighthouse móvil re-ejecutado después de la integración