Este diseño considera un diseño del Sistema para ser usado desde diferentes dispositivos, ya sean computadores con Sistemas Operativos Microsoft, diferentes distribuciones de Linux, iPads, iPhones, Tablet Android o Smartphone. Las diferentes interfaces deberán ser capaces de adaptarse al tamaño de las pantallas que los actores utilicen sin afectar con ello la funcionalidad y usabilidad de la plataforma PCS.
Para cumplir con lo anterior, se deberá emplear tecnologías Web capaces de cumplir con este principio, dando prioridad a la implementación de interfaces de usuario utilizando Frameworks CSS ya establecidos en el mercado, además de tecnologías que permitan la implementación de Aplicaciones Web Progresivas- conocidas como PWA (Progressive Web Applications) con el objetivo de generar una solución convergente y única, no importando el dispositivo cliente.
Las Aplicaciones PWA o tecnología Progresiva permitirá que las aplicaciones Hibridas del PCS tengan funcionalidades de trabajar Off line y habilitación de GPS, información complementado en el apartado de Plataformas móviles.
Figura 21 Diagrama Responsive
Especificación Técnica del Componente
Considerando que el interfaz front end del PCS, pueda ser accedido desde distintos dispositivos, nace la necesidad de contar con aplicaciones que sean adaptativas a cada uno de estos dispositivos en cuanto a su resolución y orientación de visualización.
Media Queries:
Son un componente CSS que permite detectar el dispositivo que está accediendo al front end y hacer el despliegue más recomendado por medio de distintos formatos definidos en el CSS. Se definen 5 formatos a priori (320 px, 480 px, 768 px, 1024 px, 1200 px).
Adicionalmente, se deben considerar los siguientes parámetros mínimos: Ancho, altura, ancho resolución pantalla, altura resolución pantalla, orientación (retrato/paisaje), resolución, anchura máxima, anchura mínima.
Meta etiqueta Viewport:
Se define como parte del diseño del front end el uso de una meta etiqueta Viewport que contenga los parámetros que permitan definir el área de la pantalla disponible al renderizar un documento, escala/Zoom que debe mostrar. Los parámetros mínimos a considerar son: Width, Height, Initial-Scale, User-Scale, Minimum Scale, Maximum Scale.