Evolución de los Servicios everilion

Transcripción

1 Cetel Ingeniería de Sistemas S.L. C/ Doctor Sapena 54, 4ª Planta Alicante Evolución de los Servicios everilion Hito 1: Look&Feel básico Versión 1.0 Cetel Ingeniería de Sistemas, S.L. Fecha de creación (everilion - Grupo everis) 4/03/ Página 1 de 18

2 CONTROL DE VERSIÓN DEL DOCUMENTO Versión Fecha Localización Realizado por Comprobado por Aprobado por Razón de la actualización / Detalle de los cambios 1.0 DGB H. Mora Razón: Distribución: Página 2 de 18

3 1. INTRODUCCIÓN MEJORAS INCLUIDAS EN EL HITO MODERNIZACIÓN DE ESTILOS Y COLORES ACTUALIZACIÓN DE ICONOS MODERNIZACIÓN DEL MENÚ DE APLICACIÓN ADAPTACIÓN DE LOS ESTILOS AL ENCABEZADO Y PIE DE LAS PANTALLAS ADAPTACIÓN DE LOS ESTILOS A LA ZONA DE INFORMACIÓN Y CONTROL DE LOS FORMULARIOS REDISEÑO DE PANTALLAS SEGÚN SU DISTRIBUCIÓN EN SECCIONES 8 9. ORGANIZACIÓN DE APARTADOS EN PESTAÑAS DE INFORMACIÓN INTEGRACIÓN DE ESTRUCTURAS DE COMPORTAMIENTO DINÁMICO PARA MOSTRAR Y OCULTAR ZONAS OCULTAR/MOSTRAR CABECERA DE PÁGINA OCULTAR/MOSTRAR PIE DE PÁGINA OCULTAR/MOSTRAR SECCIONES DE DATOS INTEGRACIÓN DE LOS RESULTADOS DE BÚSQUEDA EN LAS PANTALLAS DE FORMULARIOS EJEMPLOS DE INTERFACES Página 3 de 18

4 1. INTRODUCCIÓN El compromiso adquirido de Everilion de mantenerse en la vanguardia de las soluciones web mas avanzadas conlleva un esfuerzo continuado de actualización y mejora de sus productos. Somos conscientes de que éste es el único camino que garantiza que nuestros clientes dispongan de un software adecuado para mejorar su negocio y su posición competitiva. La mayoría de estas actualizaciones se realizan en las capas de software internas y en sus módulos de proceso de datos sin afectar a su apariencia ni a su usabilidad (Look&Feel) con el propósito de mantener un entorno estable y respetar la experiencia del usuario. No obstante, la evolución de los interfaces gráficos y las nuevas capacidades de los dispositivos hardware aconsejan que el próximo paquete de mejoras del sistema vaya acompañado de una evolución de las aplicaciones orientada a modernizar su Look&Feel para incorporar nuevos elementos de funcionalidad que mejoren la usabilidad así como el rendimiento de las aplicaciones. Las mejoras en esta dirección se irán incorporando en el sistema progresivamente para garantizar su correcta asimilación por la comunidad de usuarios distribuyendo su aplicación en sucesivos hitos temporales. 2. MEJORAS INCLUIDAS EN EL HITO 1 La evolución del sistema en este primer hito se centra en los siguientes aspectos: Modernización de estilos y colores. Actualización de iconos. Modernización del menú de aplicación. Adaptación de los estilos al encabezado y pie de las pantallas. Adaptación de los estilos a la zona de información y control del formulario. Rediseño de las pantallas según su distribución en secciones. Organización de apartados en pestañas de información. Introducción de estructuras de comportamiento dinámico para mostrar y ocultar zonas. Integración de los resultados de la búsqueda en las pantallas de formularios. A continuación se describe cada una de estas mejoras en detalle. 3. MODERNIZACIÓN DE ESTILOS Y COLORES La nueva paleta de colores utilizada en el diseño de los interfaces evoluciona para mejorar el contraste de los elementos relevantes y producir una sensación más elegante y moderna. En su concepción se han utilizado elementos avanzados de diseño web, como degradados, bordes redondeados y posicionamiento flotante de controles, incluidos en los nuevos estándares HTML5 y CSS3. La figura siguiente muestra la nueva paleta de colores para el diseño de las pantallas: Página 4 de 18

5 4. ACTUALIZACIÓN DE ICONOS Figura 1: Paleta de colores básicos Los nuevos iconos del interfaz mantienen la línea estilizada del diseño de pantallas. La correspondencia entre los nuevos y los antiguos iconos se indica en la siguiente figura. Figura 2: Correspondencia entre nuevos y antiguos iconos Página 5 de 18

6 5. MODERNIZACIÓN DEL MENÚ DE APLICACIÓN En la línea de aplicar las nuevas tecnologías de programación a la construcción de los componentes del sistema, el menú de la aplicación evoluciona desde un componente basado en Java hacia construcciones HTML compatibles con todos los navegadores. Página 6 de 18

7 En la siguiente figura se el aspecto del nuevo menú comparado con el anterior. Figura 3a: Menú de aplicación nuevo Figura 3b: Menú de aplicación obsoleto 6. ADAPTACIÓN DE LOS ESTILOS AL ENCABEZADO Y PIE DE LAS PANTALLAS El encabezado y pie de las pantallas se moderniza con los nuevos estilos y colores. Se añaden los enlaces de acceso frecuente al encabezado de las pantallas. En la siguiente figura se muestran esquemáticamente los cambios incorporados en una pantalla de ejemplo. Encabezado: Figura 4a: Encabezado de Menú nuevo Figura 4b: Encabezado de Menú obsoleto Pie: Figura 4a: Pie de Menú nuevo Figura 4b: Pie de Menú obsoleto Página 7 de 18

8 7. ADAPTACIÓN DE LOS ESTILOS A LA ZONA DE INFORMACIÓN Y CONTROL DE LOS FORMULARIOS La sección de información y control contiene la identificación del objeto que se esta visualizando en el formulario y los enlaces extra a los que se accede desde el mismo. El cambio de interfaz incluye esa información sin romper con la línea estética seguida hasta el momento en el diseño de la pantalla. En la siguiente figura se muestran esquemáticamente un ejemplo de estos cambios en una pantalla. Figura 5a: Interfaz de información nuevo Figura 5b: Interfaz de información obsoleto 8. REDISEÑO DE PANTALLAS SEGÚN SU DISTRIBUCIÓN EN SECCIONES El nuevo diseño ha transformado los formularios convirtiendo las estructuras para agrupar la información basadas en carpetas a otras basadas en secciones. Este cambio permite identificar mejor las zonas de datos de la pantalla y decidir qué información se desea visualizar en cada momento. En la siguiente figura se muestran esquemáticamente los cambios incorporados en una pantalla de ejemplo. Figura 6a: Distribución en secciones nuevo Página 8 de 18

9 Figura 6b: Distribución en secciones obsoleto 9. ORGANIZACIÓN DE APARTADOS EN PESTAÑAS DE INFORMACIÓN Aquellas secciones en las que la información está distribuida en múltiples apartados, se organizarán en una estructura de pestañas (tabs) que faciliten el acceso a sus contenidos. Esta aportación marcará la diferencia entre las secciones de datos que permiten su visualización simultánea y las pestañas de visualización alternativa que en la versión anterior se mezclaban con el mismo diseño. La figura siguiente muestra un ejemplo de esta organización para los datos financieros del formulario de facturas. Figura 7a: Nueva organización de apartados en pestañas Figura 7b: Antigua organización de apartados en carpetas 10. INTEGRACIÓN DE ESTRUCTURAS DE COMPORTAMIENTO DINÁMICO PARA MOSTRAR Y OCULTAR ZONAS Con el objetivo de maximizar el área de pantalla dedicada a visualizar la información de interés se han incluido en este paquete de mejoras una serie de componentes que permiten ocultar zonas de la pantalla cuya visualización no es relevante. Esas zonas corresponden a la cabecera y/o pie de la página y las secciones de datos Ocultar/mostrar cabecera de página Página 9 de 18

10 Toda la cabecera de la página se podrá ocultar o mostrar mediante un control situado al final de la misma. En la siguiente figura se indica el aspecto del control Ocultar/mostrar pie de página Figura 8: Componente para mostrar/ocultar la cabecera Al igual que la cabecera de la página, todo el pie compuesto por los controles de operación podrá ser ocultado mediante un control. En la siguiente figura se indica el aspecto del control. Figura 9: Componente para mostrar/ocultar el pie Ocultar/mostrar secciones de datos La distribución en secciones de los contenidos de la página permite seleccionar cuáles se desean mostrar en cada momento. Aunque esta funcionalidad ya se encontraba presente en el sistema con el uso de las carpetas, la nueva versión utiliza tecnologías de programación avanzadas que mejoran el rendimiento de la aplicación. Las secciones se muestran o se ocultan pulsando sobre el icono que se encuentra a la derecha de su barra de título. En la siguiente figura se muestra un esquema del control que gestiona esta funcionalidad. Figura 10: Componente para mostrar/ocultar secciones de datos El aspecto del control cambiará según la sección esté oculta o visible. Se añade como nueva funcionalidad del sistema la posibilidad de mostrar u ocultar todas las secciones de datos simultáneamente. Para ello se añade en la sección de información y control anteriormente descrita, un componente para realizar esta función. En la siguiente figura se muestra un esquema de este componente. Página 10 de 18

11 Figura 11: Componente para mostrar/ocultar conjuntamente las secciones de datos 11. INTEGRACIÓN DE LOS RESULTADOS DE BÚSQUEDA EN LAS PANTALLAS DE FORMULARIOS Tomando como base la experiencia de usuarios para la mejora del sistema, se ha incluido como nueva funcionalidad la posibilidad de mostrar en la misma pantalla de formularios y al mismo tiempo que éstos los resultados de una búsqueda realizada sobre sus campos. Estos resultados se visualizarían en un panel deslizante colocado en la parte izquierda de la pantalla tal como se observa en la siguiente figura. Figura 12: Panel de búsqueda integrado en el interfaz Página 11 de 18

12 Ese panel permitirá navegar por los resultados obtenidos de modo que el usuario podrá pulsar sobre los registros que contiene y visualizar su contenido completo en el formulario adyacente. Inicialmente, cuando se abre un formulario, el panel permanecerá oculto y sin ninguna búsqueda. El panel se mostrará automáticamente en el momento que se realice alguna búsqueda desde el pie de controles de la página. Una vez abierto, desde el propio panel de búsqueda se podrán realizar nuevas búsquedas a través de los controles que contiene para ello dispuestos en su parte superior, como muestra la siguiente figura. Figura 13: Localización de los controles de búsqueda en el panel deslizante El panel de búsqueda mostrará solamente los campos de cada registro que quepan en la zona ocupada por el panel. Con el control del ratón se podrá ampliar esa zona pulsando y arrastrando la barra vertical que separa el panel del formulario. Figura 14: Localización del control de deslizamiento del panel deslizante En la parte central de la barra que separa el panel del formulario se encuentra un control vertical que oculta o muestra completamente el panel con un solo click de ratón. Página 12 de 18

13 Figura 15: Localización del control de ocultar/mostrar el panel deslizante 12. EJEMPLOS DE INTERFACES En esta sección se muestran ejemplos de interfaces rediseñados con las mejoras reseñadas de este primer Hito. Estas aportaciones se trasladarán al resto de pantallas siguiendo los mismos criterios de diseño. Página 13 de 18

14 Interfaz de CLIENTES: Figura 16: Interfaz de Clientes Página 14 de 18

15 Figura 17: Interfaz de Clientes con panel de búsqueda deslizante Página 15 de 18

16 Interfaz de FACTURAS: Figura 18: Interfaz de Facturas Página 16 de 18

17 Figura 19: Interfaz de Facturas con panel de búsqueda deslizante Página 17 de 18

18 Cetel Ingeniería de Sistemas S.L. (Grupo everis) Av. Manoteras, MADRID Doctor Sapena 54, ALICANTE Tel: Hnos. Soto Chapuli, 4 Entlo ALICANTE Marzo Página 18 de 18