Más información.

Cetel Ingeniería de Sistemas S.L.
C/ Doctor Sapena 54, 4ª Planta
03013 Alicante
Evolución de los Servicios everilion
Hito 1: Look&Feel básico
Versión 1.0
www.cetel.es
Cetel Ingeniería de Sistemas, S.L.
(everilion - Grupo everis)
Página 1 de 18
Fecha de creación
4/03/2012
www.ilionsistemas.com
Look&Feel everilion
CONTROL DE VERSIÓN DEL DOCUMENTO
Versión Fecha
Localización
Realizado por
Razón de la actualización / Detalle de los cambios
1.0
DGB
H. Mora
Razón:
Comprobado por
Aprobado por
Distribución:
www.cetel.es
Página 2 de 18
www.ilionsistemas.com
Look&Feel everilion
1.
INTRODUCCIÓN ................................................................................. 4
2.
MEJORAS INCLUIDAS EN EL HITO 1 ................................................... 4
3.
MODERNIZACIÓN DE ESTILOS Y COLORES ......................................... 4
4.
ACTUALIZACIÓN DE ICONOS .............................................................. 5
5.
MODERNIZACIÓN DEL MENÚ DE APLICACIÓN .................................... 6
6.
ADAPTACIÓN DE LOS ESTILOS AL ENCABEZADO Y PIE DE LAS
PANTALLAS ................................................................................................. 7
7.
ADAPTACIÓN DE LOS ESTILOS A LA ZONA DE INFORMACIÓN Y
CONTROL DE LOS FORMULARIOS ................................................................ 8
8.
REDISEÑO DE PANTALLAS SEGÚN SU DISTRIBUCIÓN EN SECCIONES 8
9.
ORGANIZACIÓN DE APARTADOS EN PESTAÑAS DE INFORMACIÓN .... 9
10. INTEGRACIÓN DE ESTRUCTURAS DE COMPORTAMIENTO DINÁMICO
PARA MOSTRAR Y OCULTAR ZONAS ............................................................ 9
10.1.
10.2.
10.3.
OCULTAR/MOSTRAR CABECERA DE PÁGINA ................................................... 9
OCULTAR/MOSTRAR PIE DE PÁGINA ...........................................................10
OCULTAR/MOSTRAR SECCIONES DE DATOS ..................................................10
11. INTEGRACIÓN DE LOS RESULTADOS DE BÚSQUEDA EN LAS
PANTALLAS DE FORMULARIOS ................................................................. 11
12.
EJEMPLOS DE INTERFACES ............................................................... 13
www.cetel.es
Página 3 de 18
www.ilionsistemas.com
Look&Feel everilion
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:
www.cetel.es
Página 4 de 18
www.ilionsistemas.com
Look&Feel everilion
Figura 1: Paleta de colores básicos
4. ACTUALIZACIÓN DE ICONOS
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
www.cetel.es
Página 5 de 18
www.ilionsistemas.com
Look&Feel everilion
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.
www.cetel.es
Página 6 de 18
www.ilionsistemas.com
Look&Feel everilion
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
PANTALLAS
DE
LOS
ESTILOS
AL
ENCABEZADO
Y
PIE
DE
LAS
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
www.cetel.es
Página 7 de 18
www.ilionsistemas.com
Look&Feel everilion
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
www.cetel.es
Página 8 de 18
www.ilionsistemas.com
Look&Feel everilion
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.
10.1. Ocultar/mostrar cabecera de página
www.cetel.es
Página 9 de 18
www.ilionsistemas.com
Look&Feel everilion
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.
Figura 8: Componente para mostrar/ocultar la cabecera
10.2. Ocultar/mostrar pie de página
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
10.3. 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.
www.cetel.es
Página 10 de 18
www.ilionsistemas.com
Look&Feel everilion
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
www.cetel.es
Página 11 de 18
www.ilionsistemas.com
Look&Feel everilion
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.
www.cetel.es
Página 12 de 18
www.ilionsistemas.com
Look&Feel everilion
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.
www.cetel.es
Página 13 de 18
www.ilionsistemas.com
Look&Feel everilion
Interfaz de CLIENTES:
Figura 16: Interfaz de Clientes
www.cetel.es
Página 14 de 18
www.ilionsistemas.com
Look&Feel everilion
Figura 17: Interfaz de Clientes con panel de búsqueda deslizante
www.cetel.es
Página 15 de 18
www.ilionsistemas.com
Look&Feel everilion
Interfaz de FACTURAS:
Figura 18: Interfaz de Facturas
www.cetel.es
Página 16 de 18
www.ilionsistemas.com
Look&Feel everilion
Figura 19: Interfaz de Facturas con panel de búsqueda deslizante
www.cetel.es
Página 17 de 18
www.ilionsistemas.com
Look&Feel everilion
Cetel Ingeniería de Sistemas S.L.
(Grupo everis)
Av. Manoteras, 52
28050 MADRID
Doctor Sapena 54, 4
03013 ALICANTE
Tel: 902109192
Hnos. Soto Chapuli, 4 Entlo.
03010 ALICANTE
www.everilion.com
Marzo 2012
www.cetel.es
Página 18 de 18
www.ilionsistemas.com