Un visor de documentos puede ser técnicamente funcional y, sin embargo, resultar inutilizable en una pantalla estrecha. Barras de herramientas densas, controles diminutos, paneles laterales sobredimensionados y contenedores con dimensiones fijas convierten rápidamente una vista previa simple en una experiencia frustrante.

Para aplicaciones basadas en Windows con ASP.NET y .NET, Doconut ofrece un SDK de visualización de documentos incrustado para documentos empresariales, archivos PDF, dibujos CAD, archivos de correo electrónico e imágenes. Su aplicación sigue controlando el diseño circundante, la autenticación, la autorización, el almacenamiento y el flujo de trabajo del documento.

Esta guía se centra en esa experiencia circundante: cómo proporcionar al visor incrustado suficiente espacio, hacer que los controles de la aplicación sean cómodos de usar, manejar cambios de orientación y probar documentos realistas sin depender de código fuente del SDK no verificado.

Diseños de visualización de documentos responsivos conectados a un componente del lado del servidor .NET

El Diseño Responsivo Comienza Fuera del Visor

El visor solo puede usar el espacio que su diseño padre le proporcione. Si la aplicación lo coloca dentro de una tarjeta estrecha, le asigna un ancho fijo de escritorio o lo rodea con varios paneles persistentes, el área del documento permanecerá estrecha.

Comience con tres preguntas:

¿Cuál es la tarea principal en esta página?
¿Qué controles de la aplicación deben permanecer visibles mientras se lee?
¿Qué paneles secundarios pueden colapsarse o moverse detrás de un botón?

Para una página dedicada al documento, el visor suele ser el elemento dominante. Los metadatos, comentarios, aprobaciones y acciones del flujo de trabajo pueden seguir estando disponibles sin ocupar espacio permanente del documento.

Planifique el Diseño Según el Espacio Disponible

El comportamiento responsivo debe seguir el espacio disponible para el componente, no suposiciones sobre el nombre de un dispositivo en particular.

Diseño amplio

En una ventana gráfica amplia, la página puede mostrar:

Un panel de miniaturas o de navegación del documento
El lienzo principal del documento
Un panel secundario de flujo de trabajo para comentarios o metadatos
Un conjunto completo de acciones de la aplicación

Cuando un panel secundario se convierte en un cajón, añada el comportamiento de diálogo, la gestión de foco y el etiquetado accesible requeridos por su sistema de diseño.

Haga que los Controles de la Aplicación Sean Táctiles

Los controles alrededor del visor deben ser cómodos de activar sin movimientos precisos del puntero.

Las directrices prácticas incluyen:

Proporcione a los controles interactivos un área objetivo de aproximadamente 44 × 44 píxeles CSS.
Deje suficiente espacio entre acciones destructivas y de uso frecuente.
No dependa del hover para revelar información esencial.
Mantenga los indicadores de foco visibles para los usuarios de teclado.
Proporcione nombres accesibles para los botones que solo contienen íconos.
Evite colocar controles críticos cerca de áreas de gestos del navegador o del sistema.

No sobrescriba los estilos internos de Doconut con selectores adivinados o variables CSS no documentadas. Utilice los recursos oficiales para la versión del SDK instalada y aplique sus reglas responsivas a los contenedores y controles que le pertenecen a la aplicación.

Trate los Paneles Laterales como Espacio de Trabajo Opcional

Las miniaturas, resultados de búsqueda, anotaciones, metadatos y el historial del flujo de trabajo son valiosos, pero no deben competir todos al mismo tiempo con el documento.

En diseños compactos:

Abra un panel lateral solo cuando el usuario lo solicite.
Devuelva el foco al botón que lo abrió después de cerrarlo.
Atrape el foco dentro de los paneles modales cuando sea apropiado.
Dé al panel un título claro y una acción de cierre.
Preserve la ubicación actual del documento al abrir o cerrar el panel.

Si el visor suministra sus propios paneles, pruebe su comportamiento responsivo documentado antes de añadir un segundo sistema de navegación a nivel de aplicación alrededor de ellos.

Mantenga el Espacio de Trabajo del Documento Rápido

El diseño responsivo no es solo visual. Los documentos grandes pueden exponer limitaciones de memoria, ancho de banda y renderizado, especialmente cuando la página también contiene paneles de control complejos o animaciones.

Reduzca el trabajo competidor

Pausa la animación decorativa mientras el usuario está leyendo, evite efectos costosos alrededor del visor y elimine observadores o escuchas de eventos innecesarios.

Reserve espacio de diseño

Asigne al contenedor del visor una altura estable antes de que cargue. Esto evita grandes desplazamientos de diseño y reduce la probabilidad de que los usuarios toquen el control equivocado.

Cargue características secundarias deliberadamente

Los comentarios, el historial de auditoría y los paneles de metadatos extensos no siempre necesitan cargarse con la primera página del documento. Aplácelos hasta que el usuario abra el panel relacionado, según su flujo de trabajo.

Pruebe archivos representativos

Utilice PDFs extensos, hojas de cálculo anchas, dibujos CAD detallados, imágenes grandes y documentos con fuentes inusuales. Un archivo de muestra pequeño no puede revelar los límites de la experiencia de producción.

Mantenga el Control de Acceso en el Servidor

La presentación responsiva no cambia las responsabilidades de seguridad de la aplicación. Cada solicitud de documento debe seguir pasando por la autenticación y la autorización específicas del documento.

Para aplicaciones ASP.NET Core, los mecanismos estándar como middleware de autenticación, políticas, reclamaciones, el atributo [Authorize] y la autorización basada en recursos pueden proteger la ruta del servidor que resuelve un documento.

La aplicación debe:

Utilizar identificadores de documento generados por el servidor.
Verificar que el usuario actual pueda acceder al documento solicitado.
Mantener las credenciales de almacenamiento y rutas sin restricciones alejadas del cliente.
Sanitizar los errores mostrados en la página del visor.
Aplicar reglas explícitas de retención a los archivos originales y temporales.
Evitar registrar el contenido de los documentos, secretos o URLs de acceso sensibles.

Ocultar acciones de descarga, impresión o menú contextual puede apoyar el flujo de trabajo previsto, pero no sustituye la autorización del lado del servidor y no puede impedir todas las formas de captura una vez que el contenido es visible.

Integrando Doconut en la Experiencia Responsiva

Doconut suministra la capa de visualización de documentos incrustada, mientras que la aplicación aporta la capa responsiva y el flujo de trabajo empresarial.

Una secuencia de implementación sensata es:

Confirmar los formatos requeridos y las características del visor.
Integrar el paquete compatible de Doconut para su aplicación .NET.
Proteger la resolución del documento con autorización del lado del servidor.
Colocar el visor en un contenedor host fluido y de propiedad de la aplicación.
Diseñar estados compactos para las barras de herramientas de la aplicación y los paneles secundarios.
Probar el redimensionado, la orientación, el foco, la carga y el comportamiento ante errores.
Validar el resultado con documentos similares a los de producción y sesiones concurrentes.

Consulte la verificada página del producto Doconut Viewer para obtener información actual del producto. Use la página oficial de descarga y documentación para la instalación e instrucciones de integración específicas de la versión, en lugar de copiar ejemplos de SDK no documentados de publicaciones de terceros.

Lista de Verificación de Revisión del Visor Responsivo

Diseño

El visor recibe la mayor parte útil de la página.
Los anchos fijos no obligan a desplazamiento horizontal.
Los paneles secundarios colapsan de forma limpia.
El diseño sigue siendo utilizable cuando la altura de la ventana gráfica es limitada.
Los estados de carga y error reservan el espacio apropiado.

Interacción

Los controles de la aplicación tienen tamaños de objetivo cómodos.
Las acciones esenciales no dependen del hover.
Los controles solo con ícono tienen nombres accesibles.
El foco permanece visible y sigue un orden lógico.
Los cajones y diálogos devuelven el foco correctamente.

Documentos

Los PDFs grandes siguen siendo navegables.
Las hojas de cálculo anchas pueden inspeccionarse sin romper el diseño de la página.
Los dibujos detallados conservan un zoom y desplazamiento utilizables.
Los nombres de archivo extensos y los mensajes de error no se desbordan.
Cambiar el tamaño del diseño no reinicia el documento innecesariamente.

Seguridad y operaciones

El servidor autoriza cada solicitud de documento.
Los detalles de almacenamiento permanecen privados.
La retención de archivos y datos temporales está documentada.
Los errores y registros excluyen información sensible.
Los límites de recursos y el comportamiento de sesiones concurrentes están probados.

Preguntas Frecuentes

¿Debe la aplicación mantener páginas de visor separadas para teléfonos y escritorios?

Normalmente, no. Una única página responsiva es más fácil de mantener. Cambie el diseño según el espacio disponible y revele progresivamente los controles secundarios.

¿Puede la aplicación sobrescribir el CSS interno del visor?

Evite selectores y variables no documentadas. Estilice el contenedor host y sus propios controles de aplicación. Use solo los puntos de personalización documentados para la versión de Doconut que despliegue.

¿Deben ocultarse los botones de descarga e impresión en diseños compactos?

Esa es una decisión de producto más que una frontera de seguridad. Si una acción está permitida pero no cabe, colóquela en un menú desbordado accesible. Si no está permitida, haga cumplir esa política en el servidor.

¿Cómo deben probarse los documentos grandes?

Construya una colección de pruebas sanitizada que refleje el recuento real de páginas, tamaños de archivo, fuentes, dibujos y hojas de cálculo. Repita la suite después de cambios en el SDK, .NET, Windows Server o el diseño.

Conclusión

Una experiencia móvil de documentos sólida comienza con un contenedor fluido, un diseño centrado en el documento, controles cómodos, paneles laterales opcionales, comportamiento predecible ante el redimensionado y autorización del lado del servidor.

Doconut puede proporcionar la capacidad de visualización dentro de su aplicación .NET basada en Windows. Su equipo podrá entonces concentrarse en la capa responsiva de la aplicación, las reglas de seguridad y el flujo de trabajo que hacen que el visor se sienta como una parte natural del producto.