Saltar al contenido principal

Requisitos de capturas de pantalla - Documentación PDF Connect v3

Prioridad 1: Flujo principal (Imprescindible) 📸​

Interfaz principal de la app​

  1. Panel de PDF Connect v3 - Interfaz principal mostrando el diseño moderno
  2. Gestión de biblioteca PDF - Vista de cuadrícula con búsqueda, etiquetas y operaciones masivas
  3. Página de detalle PDF - Vista individual con el botón de vinculación destacado

Vinculación universal​

  1. Desplegable de tipo de página - Todos los tipos compatibles (Productos, Colecciones, Artículos, Páginas, Inicio, Búsqueda)
  2. Modal de selección de recurso - Barra de búsqueda, lista de recursos, paginación, selección múltiple
  3. Vinculación en progreso - Estados de carga y mensajes de confirmación
  4. Visualización de recursos vinculados - Páginas conectadas con opciones para desvincular

Sistema de publicación​

  1. Modal de opciones de publicación - Tres estilos de visualización lado a lado
  2. Integración con editor de temas - Añadiendo bloques PDF a plantillas
  3. Configuración de bloque - Panel de ajustes para cada tipo de visualización

Estilos de visualización en acción​

  1. Ejemplo de PDF integrado - Página de producto con PDF incrustado
  2. Ejemplo de botón PDF - Botón con popup abierto
  3. Ejemplo de lista PDF - Varios PDFs en lista organizada

Prioridad 2: Funciones avanzadas (Importante) 📸​

Estrategia multi-bloque​

  1. Página de producto multi-bloque - Misma página con integrado + botón + lista
  2. Resumen de estado de plantillas - Qué plantillas tienen bloques configurados
  3. Interfaz de selección masiva - Varios elementos seleccionados con contador

Experiencia móvil​

  1. Visualización de PDF en móvil - Los tres estilos en móvil
  2. Interfaz de administración móvil - Vinculación y publicación en móvil
  3. Comportamiento responsive - Cómo se adaptan los PDFs a distintos tamaños

Ejemplos de flujo​

  1. Comparación antes/después - Interfaz antigua vs nueva
  2. Vinculación entre tipos de página - Mismo PDF vinculado a varios tipos
  3. Funcionalidad de búsqueda - Resultados en tiempo real

Prioridad 3: Contenido de apoyo (Deseable) 📸​

Casos de uso​

  1. Documentación de producto - Integración de manual técnico
  2. Catálogos de colecciones - Página de colección con catálogo PDF
  3. Recursos de blog - Artículo con PDF descargable
  4. Funciones en la página de inicio - Folleto de empresa en homepage

Errores y casos límite​

  1. Estados de carga - Qué ve el usuario mientras se procesa
  2. Mensajes de error - Comunicación clara de errores
  3. Estados vacíos - Qué ve un usuario nuevo antes de añadir contenido

Analítica y rendimiento​

  1. Analítica de uso - Métricas de interacción con PDFs (si está disponible)
  2. Indicadores de rendimiento - Datos de velocidad y optimización
  3. Analítica de plantillas - Qué plantillas se usan más

Especificaciones de capturas​

Requisitos técnicos​

  • Resolución: Alta densidad (High-DPI) para visualización nítida
  • Navegador: Chrome o Safari para renderizado consistente
  • Tamaño de ventana: Escritorio estándar (1920x1080) y móvil (375x812)
  • Tema: Tema Shopify limpio y profesional para demos

Requisitos de contenido​

  • PDFs de muestra: Documentos realistas (manual, catálogo, guía)
  • Tienda de prueba: Productos, colecciones, artículos y páginas con contenido relevante
  • Datos limpios: Nombres profesionales, descripciones y contenido organizado

Requisitos de marca​

  • UI consistente: Todas las capturas deben mostrar la misma versión de la app
  • Apariencia profesional: Interfaz limpia y ordenada
  • Foco claro: Resaltar la función específica demostrada

Flujo de trabajo de capturas​

Fase de preparación​

  1. Configurar la tienda de prueba con contenido realista
  2. Crear PDFs de muestra con nombres profesionales
  3. Configurar los tres estilos de visualización
  4. Verificar que todas las funciones funcionen correctamente

Fase de captura​

  1. Tomar capturas de escritorio a resolución completa
  2. Capturar versiones móviles de interfaces clave
  3. Documentar estados de carga y error
  4. Obtener comparaciones antes/después donde aplique

Fase de procesamiento​

  1. Recortar para enfocarse en elementos relevantes
  2. Añadir llamadas/anotaciones cuando ayuden
  3. Mantener estilo visual consistente en todas las imágenes
  4. Optimizar tamaño de archivos para web

Uso dentro de la documentación​

Estrategia de ubicación​

  • Imágenes hero: Cambios de interfaz importantes al inicio del documento
  • Paso a paso: Captura para cada acción en tutoriales
  • Comparación: Antes/después para mejoras principales
  • Referencia: Confirmación visual rápida de ubicación/apariencia

Requisitos de texto alternativo​

Todas las capturas necesitan texto alternativo descriptivo para accesibilidad:

  • Describir qué se muestra en la interfaz
  • Incluir texto clave visible en la imagen
  • Indicar elementos o acciones importantes de la UI
  • Mantenerlo por debajo de 125 caracteres cuando sea posible

Convención de nombres de archivo​

Usa nombres consistentes para facilitar la gestión:

  • pdf-guru-v3-[feature]-[context].png
  • Ejemplo: pdf-guru-v3-linking-page-types.png
  • Ejemplo: pdf-guru-v3-display-embedded-product.png

Este enfoque sistemático garantiza una documentación visual completa y alineada con la calidad de las funciones mejoradas de PDF Connect v3.