guía impresión

39
MODERNIZACIÓN DE APLICACIONES Guía básica para la ¿estancado? quantum data systems

Upload: daniel-gonima

Post on 25-Jul-2016

236 views

Category:

Documents


4 download

DESCRIPTION

Lleve a su empresa a los más altos niveles de competitividad y saque el máximo provecho a sus productos Progress con la modernización de sus aplicaciones.

TRANSCRIPT

Page 1: Guía impresión

MODERNIZACIÓNDE APLICACIONES

Guía básica para la

¿estancado?

quantumdata systems

Page 2: Guía impresión

Índice

IntroducciónEquipoCondicionesMetodología Arquitectura de Desarrollo

Capa CORE Desarrollo de la Capa de Acceso a Datos

Desarrollo de la Capa de Componentes del Negocio

Resumen

Experiencia de Usuario Mapa de Navegación

Look & Feel

Diseño de Pantallas

Directorio Gráfico

Documentos para la implementación

Capa de Presentación Modernización Orientada a Aplicaciones Web

Modernización Orientada a la Gestión De Procesos De Negocio

Modernización Orientrada a Aplicaciones Móviles

Nuestras Herramientas

Resultados

Anexos

1. 2. 3.4.

4.1.

4.2. -

-

-

4.3. -

-

-

-

-

4.4. -

-

-

5.

6.

7.

Page 3: Guía impresión

1. IntroducciónLos sitios web, web móvil y aplicaciones se vuelven cada vez más y más complejos en la medida en que la industria, la tecnología, las herramientas y las metodologías de desarrollo avanzan. Lo que solían ser medios rígidos y estáticos se ha transformado en espacios nuevos de interacción donde los usuarios tienen nuevas experiencias.

Sin importar que tanto ha cambiado nuestra forma de concebir aplicaciones como desarrolladores y sin importar el trabajo de fondo que se le haya invertido a una iniciativa de desarrollo, al final el éxito depende de la percepción de un usuario que se pregunta. ¿Esta aplicación me genera algún valor? ¿Es útil? ¿Me agrada?

Responda a las necesidades de su negocio, lleve a su empresa a los más altos niveles de competitividad y saque el máximo provecho a sus productos Progress con la modernización de sus aplicaciones.

¿Que es la Modernización de Aplicaciones?

Es el proceso en el cual se toma una aplicación legada hecha en 4GL/ABL Progress, y se cambia a nuevas tecnologías que permitan la convivencia con tecnologías legadas, siempre y cuando se genere valor y una experiencia positiva para el usuario.

El presente documentofue concebido por el Equipo de Expertos Progress en Quantum Data System

quantumdata systems

Page 4: Guía impresión

2. EquipoMuchas organizaciones han tercerizado los servicios de desarrollo lo cual trae ventajas y desventajas. Estas organizaciones suelen tener guías y políticas para sus comunicaciones, que no existen necesariamente para el desarrollo de software.

Esto no implica necesariamente un equipo de desarrollo de aplicaciones centralizado. En Quantum, todos los diseña-dores de experiencia de usuario informan a un gerente, separado de la ingeniería, para promover la coherencia de la experiencia de usuario (UX) en todas las plataformas.

Gerente de Proyecto: Es el líder del proyecto de desarrollo de cara al cliente, a los ingenieros y diseñadores.

Arquitecto Empresarial:Define la estructura del proceso de modernización. Interactúa con el director de desarrollo, diseñadores y gestores de calidad.

Arquitecto Móvil:Dirige como se van a construir las aplicaciones móviles e interactúa con el diseñador de Experiencia de Usuario para lograr la mayor usabilidad en los dispositivos.

Director de Desarrollo: Coordina el equipo de desarrolladores de las distintas capas.

Diseñador de la Experiencia de Usuario (UX):Es la persona encargada de definir los estándares de la interfaz gráfica para asegurar la usabilidad, utilidad y eficien-cia de cara al usuario final.

Director de Producto:Define los casos de uso y la funcionalidad de las aplicaciones.

Gerente de Proyecto

ArquitectoMóvil

Arquitecto Empresarial

Director deDesarrollo

Diseñador UX

Desarrollador

Desarrollador

Gestor de Calidad

Director deProducto

Page 5: Guía impresión

Conocimientos técnicos de la persona que puede desarrollar el proceso de modernización:

Conocimiento de programación ABL

Conocimiento de programación orientada a objetos

Conocer el objetivo de cada uno los componentes OERA (Arquitectura de Referencia Open Edge) o en su defecto los objetivos de SOA (Arquitectura Orientada a Servicios)

Conocimiento del negocio

Conocimiente en desarrollo JavaScript

Conocimiento HTML

2. Equipo

OERASOA

Page 6: Guía impresión

CORELas aplicaciones empresariales suelen tener un desarrollo minucioso de su capa CORE, fruto de años de implementación, pruebas y correcciones. El aprovechamiento de esta capa es fundamental en nuestro trabajo de modernización.

Despliegue HíbridoEl proceso de modernización se hace a partir de entregas parciales que se despliegan para poner a prueba. Estas funcionan de manera simultánea con la aplicación existente para permitir mantener el servicio durante el proceso.

Desarrollo ÁgilLa implementación de herramientas de desarrollo ágil de aplicaciones como el OE BPM, Rollbase, Kendo UI y Telerik, son complementadas con un amplio abanico de herramientas de trabajo colaborativo que hacen del desarrollo de aplicaciones un trabajo muy ágil y eficiente.

Diseño para el FuturoDesarrollamos aplicaciones pensadas para el futuro haciendo énfasis en la posibilidad de evolucionar y adaptarse rápidamente a los cambios del mercado y las necesidades de la empresa.

Experiencia de UsuarioEl éxito de una aplicación depende de que en la práctica el usuario la encuentre útil, agradable y fácil de usar. Traemos a las aplicaciones empresariales todos los adelantos que ha hecho la industria en este tema, tomando como referencia las aplicaciones comerciales líderes en el mercado.

3. Condiciones

Page 7: Guía impresión

4.1. Arquitectura de desarrollo

La arquitectura técnica que se utiliza para el desarrollo de la modernización se basa en OERA (Arquitectura de referencia de OpenEdge), la cual permite una alta modularidad y escalabilidad. Finalmente se construye una arquitectura orientada a servicios (SOA) que va a permitir interactuar con cualquier interfaz de usuario o sistema. El equipo de Desarrollo de Quantum conformado por Expertos Progress, propone una arquitectura con las siguientes capas:

Presentación: Es la capa que ve el usuario final. Esta capa define la interfaz gráfica y proporciona caracterís-ticas amigables para el usuario final.

Componentes del negocio: Es la encargada de realizar todo el flujo y lógica del negocio que se requiere. Es donde residen los programas que expresan la lógica propia del negocio. Está compuesta por: Interfaces de servicio, Entidades, tareas y flujos de trabajo.

Acceso a Datos: Contiene los componentes que se encargan de gestionar el acceso a la fuente de datos.

Fuente de Datos: Son los motores de bases de datos, archivos, archivos XML, etc. en donde reside la información del negocio.

Infraestructura común: Define lo que es de uso común entre las capas.

Las capas de componentes del negocio y acceso a datos se denominan CORE para el desarrollo de la presente guía, la funcionalidad de estas capas será desplegada en el servidor de aplicaciones Appserver. La capa de Presentación es desarrollada en OE BPM o Telerik, según la moderni-zación sea Web o Móvil respectivamente.

Acceso a Datos

Componentes de Negocio

PresentaciónExperiencia de Usuario

ServiciosEmpresariales

Fuente de Datos

4. Metodología

Page 8: Guía impresión

Pre-requisitos

Analizar la aplicación y dividirla en módulos con sus respectivas funciones a modernizar. (Anexo 7.1.)

Levantar la información necesaria por función (Alcance, descripción, modelo de entidad - relación y validaciones) (Anexo 7.2.)

Definir el equipo de trabajo que estará involucrado en el proceso de modernización tanto de parte de Quantum como del lado de la organización.

Migrar la base de datos y la aplicación a la última versión disponible de PROGRESS.

4. Metodología 4.2. Capa CORE

Page 9: Guía impresión

4.2. Capa CORE

4.2.1. Desarrollo de la Capa de Acceso a Datos

La capa de Acceso a datos contiene los componentes y clases (.cls) de conexión a los datos. Es la única capa que accede de manera directa a los repositorios, y son recogi-dos desde la capa de lógica de negocio.

Para el desarrollo de esta capa se utiliza Prodataset, lo cual permite reutilizar el código en cada una de las tareas.

Es lo que se conoce típicamente como un CRUD (Creación, Lectura, Actualización y borrado). Para su modernización Progress Software ofrece Wizards en el Developer Studio que agiliza la generación de las clases y los componentes.

4. Metodología

Page 10: Guía impresión

4.2. Capa CORE

4.2.2. Desarrollo de la Capa de componentes de negocio

La capa de componentes de negocio requiere de progra-mación orientada a Objetos, tablas temporales y Prodatasets. Se compone de interfaces de servicio, entidades de negocio, tareas de negocio y flujos de trabajo. (Anexo 7.3.)

4.2.2.1 Definición de las Interfaces de Servicio:

La interfaz de servicio incluye los parametros de entrada y salida definidos para el servicio a desarrollar. (Anexo 7.3.1.)

Se deben definir 2 interfaces de servicio: una para Consul-tar y otra para Crear, Actualizar y Eliminar. A continuación se muestra un ejemplo:

Para modernizar en Ambiente caracter:La interfaz de servicio debe hacer las validaciones que se encuentran en el programa dentro de la forma (FORM), y que no acceden a los datos. Por ejemplo, verifica que el parámetro “identificación del cliente” contenga unicamente números y que el año no exceda los 4 digitos etc.

Para modernizar en Ambiente Gráfico:Se deben tomar todas aquellas validaciones que se generen antes de cometer (commit) la transacción y que no requieran conocer otros datos. Colocar estas validaciones en los datos de entrada.

4. Metodología

Durante este proceso se emplean herramientas de trabajo colaborativo como Google drive para asegurar el trabajo coordinado del equipo.

Page 11: Guía impresión

4.2. Capa CORE

4.2.2.2. Definición de las Entidades de Negocio:Las entidades de negocio son una representación en memo-ria de una estructura, se debe definir en un dataset o en una tabla temporal. (Anexo 7.3.2.)

4.2.2.3. Definición de las entidades de tarea:Las entidades de tarea permiten un puente entre el flujo de trabajo y la capa de acceso a datos. se debe componer por una clase .cls y la definición de sus método deben responder a las necesidades del flujo de trabajo. (Anexo 7.3.3.)

4.2.2.4. Definición del Workflow (Flujo de Trabajo):El workflow debe contener el código necesario para responder a las necesidades del negocio definidas para el servicio. El workflow contiene métodos que se pueden disponibilizar para distintos tipos de interfaces (web, móvil, BPM). En el caso móvil quedan en arquitectura REST. (Anexo 7.3.4.)

Para modernizar en Ambiente CarácterEn un ambiente carácter se debe leer el programa .p, definir el flujo del proceso y llevarlo en función de clases y métodos.

Para modernizar en Ambiente GráficoEn el ambiente gráfico se debe conocer la funcionali-dad del programa .w, definir el flujo del proceso. los procedimientos o funciones se deben incluir dentro del flujo del negocio, y se debe desechar todo lo que este relacionado con la definición de componentes gráficos.

Ver Anexo 6.3. Capa de Componentes de Negocio

4. Metodología

Page 12: Guía impresión

4.2. Capa CORE

4.2.2.5 Resumen

Interfaces de Servicio:Son las encargadas de exponer hacia OE-BPM (vía el adaptador OE) los parámetros de entrada y salida que se han definido en el servicio. Son muy livianas en su progra-mación ABL (Advance Business Language) con extensión .p, no realizan lógica de negocio alguna, sino validación de parámetros (tamaños y tipos de datos), recibo y entrega de datos en los diferentes formatos requeridos.

Entidades de Negocio (Entity):Representan una entidad del modelo de datos. Para esto se debe crear un “Bussiness logic component” por cada entidad de negocio, o según lo que se requiera por el servicio definido, este debe estar compuesto por una o más tablas temporales.

Tareas de Negocio (Task Entity):Se encargan de gestionar la conexión con la capa de acceso a Datos y deben proveer al flujo del negocio (workflow) la información que sea requerida.

Flujos de Negocio (Workflow):Se encargan de llevar a cabo toda la lógica de negocio, y es donde puede persistir la información de la Entidad de Negocio. Son los que mantienen disponibles los servicios REST brindando los beneficios de una arquitectura SOA.

Entidadesde Negocio

Interfaz de Servicio

Cap

a de

C

ompo

nent

esde

l Neg

ocio

4. Metodología

Tareas deNegocio

Flujos deNegocio

Page 13: Guía impresión

Las aplicaciones son herramientas hechas para un usuario final que le dan la oportunidad de generar, consultar e interactuar con la información. En este contexto existe un factor humano sumamente importante que se debe tener en cuenta para el diseño de una Experiencia de Usuario.

¿Quién es usuario?¿Cuáles son sus capacidades, habilidades y motivaciones?¿Cuáles son sus necesidades

y como nos planteamos solucionarlas?

Entendiendo esto y el contexto en el que se hará uso de las herramientas se debe definir una jerarquía lógica de la información y sus niveles, un mapa de navegación eficiente y fácil de entender, el diseño de interfaces coherentes y consistentes que le permitan recorrer con seguridad la aplicación, entender su constitución, sus alcances y limitaciones y ejecutar procesos de manera intuitiva y eficiente.

Todo este esfuerzo está enfocado en generar una Experiencia de Usuario positiva incidiendo en los aspectos prácticos, emocionales, experimentales y afectivos de la interacción del usuario con un sistema informático. El objetivo es controlar la manera en que el usuario percibe la herrami-enta en términos de utilidad, eficiencia y usabilidad.

A partir de la experiencia que nos ha permitido el trabajo en Quantum Data Systems, nuestro equipo de profesionales interdisciplinarios y altamente capacitados ha desarrollado unas pautas básicas para afrontar estos retos de Moderni-zación de Aplicaciones en términos de la experiencia de usuario y conseguir la máxima satisfacción alcanzando los objetivos planteados por la empresa.

4.3. Experiencia de Usuario4. Metodología

Page 14: Guía impresión

4.3. Experiencia de Usuario

4.3.1. Mapa de Navegación

Un mapa de navegación es un esquema que define la estructura de la aplicación y representa a través de posición, flechas y colores las páginas y posibles direcciones en las cuales un usuario puede desplazarse a través de la aplicación. Algunos de los tipos de navegación más comunes son:

Lineal:Usualmente implementada en procesos que implican una secuencia de acciones en un orden lógico preestablecido. Permite navegar únicamente de una pantalla hacia la siguiente o a la anterior.

Estrella:La navegación en estrella consta de una pantalla central desde la cual se puede acceder a pantallas secundarias y regresar.

Jerárquico:Es un tipo de navegación que distingue claramente la jerarquía de la información que presenta la aplicación. Este mapa es especial para el manejo de grandes cantidades de información.

Compuesto:Usualmente el desarrollo o modernización de aplicaciones hace necesaria la implementación de varios tipos de navegación. En estos casos se utiliza un mapa de naveg-ación compuesto teniendo clara la importancia de establecer un criterio que defina en qué casos se aplica un determinado tipo de navegación.

4. Metodología

Ejemplo de Navegación compuesta donde podemos ver una aplicación con una navegación jerárquica que dentro contiene una serie de aplicaciones de tipo lineal.

Page 15: Guía impresión

4.3.2. Look & Feel

Para el diseño del look and feel en la modernización de aplicaciones es importante tener en cuenta la comuni-cación de la marca de la empresa dueña de la aplicación con el objetivo de hacer un diseño coherente con su discurso. (Anexo 7.4.) Esto hace que la aplicación sea más fácil de asimilar y entender por la familiaridad que tiene el usuario con estos aspectos formales de la comunicación y la relación que ha hecho de dichos aspectos con la marca.

Como resultado se deben establecer pautas al respecto de los colores a utilizar, los tipos de imágenes, las fuentes y sus tamaños, la implementación de íconos y la naturaleza formal de los mismos.

4. Metodología 4.3. Experiencia de Usuario

Ver Anexo 6.4. Manual de marca

Page 16: Guía impresión

4.3.3.Diseño de Pantallas

A partir del estudio de los procesos y el mapa de navegación se identifican y clasifican aquellos que contienen estruc-turas y funciones símilares. Para cada uno de estos grupos se diseña un formato específico de pantalla. Los procesos que tienen una naturaleza única son clasificados como atípicos y se diseña una pantalla específica, única para este proceso. Para el diseño de estas pantallas es especialmente importante basarse en los estándares definidos en look and feel de la aplicación. (Anexo 7.5.)

El diseño de estas pantallas se hace directamente sobre la herramienta Developer Studio o el Telerik AppBuilder (Móvil) en donde se define la estructura principal de sus pantallas y su navegación. El directorio de herramientas prediseñadas que ofrecen programas como Kendo UI hacen del diseño de pantallas algo dinámico, ágil y sencillo. (Anexo 7.6.)

4. Metodología 4.3. Experiencia de Usuario

El Diseño de pantallas debe dar como resultado una lista clara y completa de las pantallas a desarrollar, acompañado con los formatos de pantalla hechos en OE BPM, listos para que los implementadores comiencen su labor.

Ver Anexo 6.5. Formato de Pantallas

Page 17: Guía impresión

4.3.4. Directorio Gráfico

La coherencia y la consistencia dentro de la interfaz gráfica de una aplicación es fundamental para lograr una Experi-encia de Usuario Positiva. Por esta razón es importante, después de definir el Look and Feel y el diseño de las pantallas, estructurar un directorio gráfico en donde se definan con claridad las pautas para el desarrollo de imágenes, ñiconos, botones, colores, fuentes etc.

Este directorio dará las pautas formales de todos los elementos gráficos que conformarán la interfaz para asegurarse que en la aplicación se mantengan coherentes y consistentes entre ellos mismos y con el lenguaje tácito que ya existe para estándares de navegación.

Esto permitirá apropiarse de simbolismos prácticos que resumen la función de un botón a partir de un ícono que el usuario podrá entender intuitivamente. La implementación de códigos consistentes de color permiten una comuni-cación muy eficiente y un entendimiento intuitivo por parte del usuario.

4. Metodología 4.3. Experiencia de Usuario

Page 18: Guía impresión

La capa de Presentación se implementa con OpenEdge BPM para el ámbito Web; La herramienta de desarrollo es el Developer Studio IDE (Integrated Development Environ-ment) con la que se tienen dos posibilidades:

Modernización orientada a Aplicaciones WebModernización orientada a la Gestión de Procesos de Negocio

Si adicionalmente existe la necesidad de aplicación móvil, la capa de Presentación se implementa con la plataforma Telerik. La herramienta de desarrollo es el Telerik AppBuilder ICE (Integrated Cloud Environment), el cual produce aplicaciones móviles para Windows Phone, Android y iPhone OS.

4.4.1. Modernización Orientada a Aplicaciones WebLa primera aproximación o necesidad de la mayoría de organizaciones cuando se embarca en la modernización de sus aplicaciones, es lograr un acceso Web, es decir que a sus aplicaciones se pueda acceder a través de un navegador y desde cualquier lugar del mundo. Se tienen las siguientes fases:

Desarrollo de aplicaciones Web: las aplicaciones web se desarrollan con el Developer Studio; lo primero que se debe hacer es crear el “flujo” de la aplicación, en donde se define la navegabilidad entre las distintas páginas web. Posteriormente se definen los datos (Dataslots) que se van a intercambiar entre las distintas páginas. Finalmente se entra al detalle de cada página web en donde se define el encabezado, el pie de página y el contenido con componentes Drag and Drop.

El contenido de las páginas web se puede estandarizar con hojas de estilos (css) y se define inicialmente con el Editor de Formularios. En este editor se pueden “arrastrar” tablas, páneles, pestañas, elementos Div, listas, campos de texto, áreas de texto, checkbox, combobox, menús, botones, imágenes, entre otros.

Configuración de adaptadores: los adaptadores son programas software que le permiten a las páginas web intercambiar información con aplicaciones Progress (a través del AppServer) y con sistemas externos. Estos adaptadores inicialmente deben colocarse en el flujo de las aplicaciones web; posteriormente se debe configurar los datos que el adaptador va a intercambiar en particular.

Desarrollo avanzado de páginas web: las páginas web son manejadas por eventos (ej: hacer clic en un botón, escribir en un campo de texto, etc.); cada uno de los distintos eventos desencadena acciones que son programadas con funciones JavaScript. Las funciones JavaScript son las que hacen que la página sea dinámica.

Muchos componentes gráficos no aparecen en el Editor de Formularios. En este punto se hace bastante útil trabajar con los componentes Kendo UI de Telerik, los cuales son librerías JavaScript que se acoplan al contenido HTML de las páginas web y agilizan bastante el desarrollo.

Publicación y pruebas de una Aplicación Web: para poder probar las aplicaciones web, las mismas de deben publicar en el BP Server (JBoss). El BP Server es un servidor empresarial que permite gestionar el ciclo de vida de las aplicaciones web, las cuales son accedidas a través del navegador (Internet Explorer, Google Chrome, Mozilla Firefox, etc.). Inicialmente las aplicaciones se deben probar y corregir. Una vez se corrigen todos los problemas, se da acceso libre a los usuarios finales.

4. Metodología

4.4.2. Modernización Orientada a la Gestión De Procesos De Negocio

Este tipo de modernización busca que las aplicaciones y la empresa haga gestión de sus procesos de negocio (BPM), con lo cual se brinda un marco de trabajo que organiza las tareas de sus empleados y demás participantes (clientes, proveedores, etc.) de una manera tal que se pueden revisar indicadores en tiempo real y por consiguiente mejorar continuamente los procesos. Se tienen las siguientes fases:

Modelamiento de procesos: inicialmente el conoce-dor de los procesos debe modelarlos con notación BPMN y junto al área de tecnología debe definir en qué pasos del flujo de trabajo (WorkSteps) se interactúa con personas (usuarios, grupos) o con otras aplicaciones (sean Progress o no) y sistemas externos (ej: correo electrónico, FTP, web services, etc.).

Desarrollo de la(s) aplicación(es) del proceso: después de tener el modelo, los ingenieros proceden a diseñar las páginas web (las cuales son visualizadas por las personas) y las distintas interacciones con las aplica-ciones que necesita el proceso; si las aplicaciones son Progress, se acceden a través del AppServer. Opcionalmente, se puede hacer simulación del proceso, en aquellos casos donde se necesiten conocer de forma preliminar los recursos consumidos y tiempos promedios.

Publicación, pruebas y monitoreo de un proceso de negocio: la aplicación desarrollada debe probarse, para lo cual se despliega en el BP Server; En el BP Server, los procesos son visualizados a través de un

Portal BPM; en el Portal BPM se listan las actividades pendientes de cada usuario (tareas) y si el usuario tiene los permisos adecuados se pueden visualizar indicadores que permiten la adecuada gestión y mejora de los procesos. Cada una de las tareas pueden hacer uso de aplicaciones o servicios Progress (capa CORE) y acceder a sistemas externos.

4.4.3. Modernización Orientrada a Aplicaciones Móviles

Una tercera alternativa en la modernización puede ser la de construir aplicaciones móviles. Para esto se utiliza la plataforma Telerik en la nube, concretamente Telerik Platform. Se tienen cuatro grandes fases:

Construcción de la interfaz de usuario: se definen todas las pantallas y su contenido; esto se hace en parte con componentes Drag and Drop y con progra-mación HTML.

Adición de eventos y programación JavaScript: los componentes móviles manejan eventos (presionar un botón, hacer zoom, etc.) a los cuales se les deben definir propiedades y acciones programadas en JavaScipt. Estos componentes pueden ser Kendo UI o elementos HTML.

Conexión al lado CORE: las pantallas desarrolladas anteriormente se deben conectar a una “solución” del lado CORE, es decir a los servicios REST disponibles a través del AppServer.

Pruebas y descarga de la aplicación: finalmente la aplicación se prueba en un simulador web, el cual permite corregir los errores de la aplicación. Finalmente se producen los archivos que se pueden descargar a dispositivos móviles Android, iPhone OS y Windows Phone.

4.4. Capa de Presentación

Page 19: Guía impresión

La capa de Presentación se implementa con OpenEdge BPM para el ámbito Web; La herramienta de desarrollo es el Developer Studio IDE (Integrated Development Environ-ment) con la que se tienen dos posibilidades:

Modernización orientada a Aplicaciones WebModernización orientada a la Gestión de Procesos de Negocio

Si adicionalmente existe la necesidad de aplicación móvil, la capa de Presentación se implementa con la plataforma Telerik. La herramienta de desarrollo es el Telerik AppBuilder ICE (Integrated Cloud Environment), el cual produce aplicaciones móviles para Windows Phone, Android y iPhone OS.

4.4.1. Modernización Orientada a Aplicaciones WebLa primera aproximación o necesidad de la mayoría de organizaciones cuando se embarca en la modernización de sus aplicaciones, es lograr un acceso Web, es decir que a sus aplicaciones se pueda acceder a través de un navegador y desde cualquier lugar del mundo. Se tienen las siguientes fases:

Desarrollo de aplicaciones Web: las aplicaciones web se desarrollan con el Developer Studio; lo primero que se debe hacer es crear el “flujo” de la aplicación, en donde se define la navegabilidad entre las distintas páginas web. Posteriormente se definen los datos (Dataslots) que se van a intercambiar entre las distintas páginas. Finalmente se entra al detalle de cada página web en donde se define el encabezado, el pie de página y el contenido con componentes Drag and Drop.

El contenido de las páginas web se puede estandarizar con hojas de estilos (css) y se define inicialmente con el Editor de Formularios. En este editor se pueden “arrastrar” tablas, páneles, pestañas, elementos Div, listas, campos de texto, áreas de texto, checkbox, combobox, menús, botones, imágenes, entre otros.

Configuración de adaptadores: los adaptadores son programas software que le permiten a las páginas web intercambiar información con aplicaciones Progress (a través del AppServer) y con sistemas externos. Estos adaptadores inicialmente deben colocarse en el flujo de las aplicaciones web; posteriormente se debe configurar los datos que el adaptador va a intercambiar en particular.

Desarrollo avanzado de páginas web: las páginas web son manejadas por eventos (ej: hacer clic en un botón, escribir en un campo de texto, etc.); cada uno de los distintos eventos desencadena acciones que son programadas con funciones JavaScript. Las funciones JavaScript son las que hacen que la página sea dinámica.

Muchos componentes gráficos no aparecen en el Editor de Formularios. En este punto se hace bastante útil trabajar con los componentes Kendo UI de Telerik, los cuales son librerías JavaScript que se acoplan al contenido HTML de las páginas web y agilizan bastante el desarrollo.

Publicación y pruebas de una Aplicación Web: para poder probar las aplicaciones web, las mismas de deben publicar en el BP Server (JBoss). El BP Server es un servidor empresarial que permite gestionar el ciclo de vida de las aplicaciones web, las cuales son accedidas a través del navegador (Internet Explorer, Google Chrome, Mozilla Firefox, etc.). Inicialmente las aplicaciones se deben probar y corregir. Una vez se corrigen todos los problemas, se da acceso libre a los usuarios finales.

4.4.2. Modernización Orientada a la Gestión De Procesos De Negocio

Este tipo de modernización busca que las aplicaciones y la empresa haga gestión de sus procesos de negocio (BPM), con lo cual se brinda un marco de trabajo que organiza las tareas de sus empleados y demás participantes (clientes, proveedores, etc.) de una manera tal que se pueden revisar indicadores en tiempo real y por consiguiente mejorar continuamente los procesos. Se tienen las siguientes fases:

Modelamiento de procesos: inicialmente el conoce-dor de los procesos debe modelarlos con notación BPMN y junto al área de tecnología debe definir en qué pasos del flujo de trabajo (WorkSteps) se interactúa con personas (usuarios, grupos) o con otras aplicaciones (sean Progress o no) y sistemas externos (ej: correo electrónico, FTP, web services, etc.).

Desarrollo de la(s) aplicación(es) del proceso: después de tener el modelo, los ingenieros proceden a diseñar las páginas web (las cuales son visualizadas por las personas) y las distintas interacciones con las aplica-ciones que necesita el proceso; si las aplicaciones son Progress, se acceden a través del AppServer. Opcionalmente, se puede hacer simulación del proceso, en aquellos casos donde se necesiten conocer de forma preliminar los recursos consumidos y tiempos promedios.

Publicación, pruebas y monitoreo de un proceso de negocio: la aplicación desarrollada debe probarse, para lo cual se despliega en el BP Server; En el BP Server, los procesos son visualizados a través de un

Portal BPM; en el Portal BPM se listan las actividades pendientes de cada usuario (tareas) y si el usuario tiene los permisos adecuados se pueden visualizar indicadores que permiten la adecuada gestión y mejora de los procesos. Cada una de las tareas pueden hacer uso de aplicaciones o servicios Progress (capa CORE) y acceder a sistemas externos.

4.4.3. Modernización Orientrada a Aplicaciones Móviles

Una tercera alternativa en la modernización puede ser la de construir aplicaciones móviles. Para esto se utiliza la plataforma Telerik en la nube, concretamente Telerik Platform. Se tienen cuatro grandes fases:

Construcción de la interfaz de usuario: se definen todas las pantallas y su contenido; esto se hace en parte con componentes Drag and Drop y con progra-mación HTML.

Adición de eventos y programación JavaScript: los componentes móviles manejan eventos (presionar un botón, hacer zoom, etc.) a los cuales se les deben definir propiedades y acciones programadas en JavaScipt. Estos componentes pueden ser Kendo UI o elementos HTML.

Conexión al lado CORE: las pantallas desarrolladas anteriormente se deben conectar a una “solución” del lado CORE, es decir a los servicios REST disponibles a través del AppServer.

Pruebas y descarga de la aplicación: finalmente la aplicación se prueba en un simulador web, el cual permite corregir los errores de la aplicación. Finalmente se producen los archivos que se pueden descargar a dispositivos móviles Android, iPhone OS y Windows Phone.

4. Metodología 4.4. Capa de Presentación

Page 20: Guía impresión

La capa de Presentación se implementa con OpenEdge BPM para el ámbito Web; La herramienta de desarrollo es el Developer Studio IDE (Integrated Development Environ-ment) con la que se tienen dos posibilidades:

Modernización orientada a Aplicaciones WebModernización orientada a la Gestión de Procesos de Negocio

Si adicionalmente existe la necesidad de aplicación móvil, la capa de Presentación se implementa con la plataforma Telerik. La herramienta de desarrollo es el Telerik AppBuilder ICE (Integrated Cloud Environment), el cual produce aplicaciones móviles para Windows Phone, Android y iPhone OS.

4.4.1. Modernización Orientada a Aplicaciones WebLa primera aproximación o necesidad de la mayoría de organizaciones cuando se embarca en la modernización de sus aplicaciones, es lograr un acceso Web, es decir que a sus aplicaciones se pueda acceder a través de un navegador y desde cualquier lugar del mundo. Se tienen las siguientes fases:

Desarrollo de aplicaciones Web: las aplicaciones web se desarrollan con el Developer Studio; lo primero que se debe hacer es crear el “flujo” de la aplicación, en donde se define la navegabilidad entre las distintas páginas web. Posteriormente se definen los datos (Dataslots) que se van a intercambiar entre las distintas páginas. Finalmente se entra al detalle de cada página web en donde se define el encabezado, el pie de página y el contenido con componentes Drag and Drop.

El contenido de las páginas web se puede estandarizar con hojas de estilos (css) y se define inicialmente con el Editor de Formularios. En este editor se pueden “arrastrar” tablas, páneles, pestañas, elementos Div, listas, campos de texto, áreas de texto, checkbox, combobox, menús, botones, imágenes, entre otros.

Configuración de adaptadores: los adaptadores son programas software que le permiten a las páginas web intercambiar información con aplicaciones Progress (a través del AppServer) y con sistemas externos. Estos adaptadores inicialmente deben colocarse en el flujo de las aplicaciones web; posteriormente se debe configurar los datos que el adaptador va a intercambiar en particular.

Desarrollo avanzado de páginas web: las páginas web son manejadas por eventos (ej: hacer clic en un botón, escribir en un campo de texto, etc.); cada uno de los distintos eventos desencadena acciones que son programadas con funciones JavaScript. Las funciones JavaScript son las que hacen que la página sea dinámica.

Muchos componentes gráficos no aparecen en el Editor de Formularios. En este punto se hace bastante útil trabajar con los componentes Kendo UI de Telerik, los cuales son librerías JavaScript que se acoplan al contenido HTML de las páginas web y agilizan bastante el desarrollo.

Publicación y pruebas de una Aplicación Web: para poder probar las aplicaciones web, las mismas de deben publicar en el BP Server (JBoss). El BP Server es un servidor empresarial que permite gestionar el ciclo de vida de las aplicaciones web, las cuales son accedidas a través del navegador (Internet Explorer, Google Chrome, Mozilla Firefox, etc.). Inicialmente las aplicaciones se deben probar y corregir. Una vez se corrigen todos los problemas, se da acceso libre a los usuarios finales.

4.4.2. Modernización Orientada a la Gestión De Procesos De Negocio

Este tipo de modernización busca que las aplicaciones y la empresa haga gestión de sus procesos de negocio (BPM), con lo cual se brinda un marco de trabajo que organiza las tareas de sus empleados y demás participantes (clientes, proveedores, etc.) de una manera tal que se pueden revisar indicadores en tiempo real y por consiguiente mejorar continuamente los procesos. Se tienen las siguientes fases:

Modelamiento de procesos: inicialmente el conoce-dor de los procesos debe modelarlos con notación BPMN y junto al área de tecnología debe definir en qué pasos del flujo de trabajo (WorkSteps) se interactúa con personas (usuarios, grupos) o con otras aplicaciones (sean Progress o no) y sistemas externos (ej: correo electrónico, FTP, web services, etc.).

Desarrollo de la(s) aplicación(es) del proceso: después de tener el modelo, los ingenieros proceden a diseñar las páginas web (las cuales son visualizadas por las personas) y las distintas interacciones con las aplica-ciones que necesita el proceso; si las aplicaciones son Progress, se acceden a través del AppServer. Opcionalmente, se puede hacer simulación del proceso, en aquellos casos donde se necesiten conocer de forma preliminar los recursos consumidos y tiempos promedios.

Publicación, pruebas y monitoreo de un proceso de negocio: la aplicación desarrollada debe probarse, para lo cual se despliega en el BP Server; En el BP Server, los procesos son visualizados a través de un

Portal BPM; en el Portal BPM se listan las actividades pendientes de cada usuario (tareas) y si el usuario tiene los permisos adecuados se pueden visualizar indicadores que permiten la adecuada gestión y mejora de los procesos. Cada una de las tareas pueden hacer uso de aplicaciones o servicios Progress (capa CORE) y acceder a sistemas externos.

4.4.3. Modernización Orientrada a Aplicaciones Móviles

Una tercera alternativa en la modernización puede ser la de construir aplicaciones móviles. Para esto se utiliza la plataforma Telerik en la nube, concretamente Telerik Platform. Se tienen cuatro grandes fases:

Construcción de la interfaz de usuario: se definen todas las pantallas y su contenido; esto se hace en parte con componentes Drag and Drop y con progra-mación HTML.

Adición de eventos y programación JavaScript: los componentes móviles manejan eventos (presionar un botón, hacer zoom, etc.) a los cuales se les deben definir propiedades y acciones programadas en JavaScipt. Estos componentes pueden ser Kendo UI o elementos HTML.

Conexión al lado CORE: las pantallas desarrolladas anteriormente se deben conectar a una “solución” del lado CORE, es decir a los servicios REST disponibles a través del AppServer.

Pruebas y descarga de la aplicación: finalmente la aplicación se prueba en un simulador web, el cual permite corregir los errores de la aplicación. Finalmente se producen los archivos que se pueden descargar a dispositivos móviles Android, iPhone OS y Windows Phone.

4. Metodología 4.4. Capa de Presentación

Page 21: Guía impresión

La capa de Presentación se implementa con OpenEdge BPM para el ámbito Web; La herramienta de desarrollo es el Developer Studio IDE (Integrated Development Environ-ment) con la que se tienen dos posibilidades:

Modernización orientada a Aplicaciones WebModernización orientada a la Gestión de Procesos de Negocio

Si adicionalmente existe la necesidad de aplicación móvil, la capa de Presentación se implementa con la plataforma Telerik. La herramienta de desarrollo es el Telerik AppBuilder ICE (Integrated Cloud Environment), el cual produce aplicaciones móviles para Windows Phone, Android y iPhone OS.

4.4.1. Modernización Orientada a Aplicaciones WebLa primera aproximación o necesidad de la mayoría de organizaciones cuando se embarca en la modernización de sus aplicaciones, es lograr un acceso Web, es decir que a sus aplicaciones se pueda acceder a través de un navegador y desde cualquier lugar del mundo. Se tienen las siguientes fases:

Desarrollo de aplicaciones Web: las aplicaciones web se desarrollan con el Developer Studio; lo primero que se debe hacer es crear el “flujo” de la aplicación, en donde se define la navegabilidad entre las distintas páginas web. Posteriormente se definen los datos (Dataslots) que se van a intercambiar entre las distintas páginas. Finalmente se entra al detalle de cada página web en donde se define el encabezado, el pie de página y el contenido con componentes Drag and Drop.

El contenido de las páginas web se puede estandarizar con hojas de estilos (css) y se define inicialmente con el Editor de Formularios. En este editor se pueden “arrastrar” tablas, páneles, pestañas, elementos Div, listas, campos de texto, áreas de texto, checkbox, combobox, menús, botones, imágenes, entre otros.

Configuración de adaptadores: los adaptadores son programas software que le permiten a las páginas web intercambiar información con aplicaciones Progress (a través del AppServer) y con sistemas externos. Estos adaptadores inicialmente deben colocarse en el flujo de las aplicaciones web; posteriormente se debe configurar los datos que el adaptador va a intercambiar en particular.

Desarrollo avanzado de páginas web: las páginas web son manejadas por eventos (ej: hacer clic en un botón, escribir en un campo de texto, etc.); cada uno de los distintos eventos desencadena acciones que son programadas con funciones JavaScript. Las funciones JavaScript son las que hacen que la página sea dinámica.

Muchos componentes gráficos no aparecen en el Editor de Formularios. En este punto se hace bastante útil trabajar con los componentes Kendo UI de Telerik, los cuales son librerías JavaScript que se acoplan al contenido HTML de las páginas web y agilizan bastante el desarrollo.

Publicación y pruebas de una Aplicación Web: para poder probar las aplicaciones web, las mismas de deben publicar en el BP Server (JBoss). El BP Server es un servidor empresarial que permite gestionar el ciclo de vida de las aplicaciones web, las cuales son accedidas a través del navegador (Internet Explorer, Google Chrome, Mozilla Firefox, etc.). Inicialmente las aplicaciones se deben probar y corregir. Una vez se corrigen todos los problemas, se da acceso libre a los usuarios finales.

4.4.2. Modernización Orientada a la Gestión De Procesos De Negocio

Este tipo de modernización busca que las aplicaciones y la empresa haga gestión de sus procesos de negocio (BPM), con lo cual se brinda un marco de trabajo que organiza las tareas de sus empleados y demás participantes (clientes, proveedores, etc.) de una manera tal que se pueden revisar indicadores en tiempo real y por consiguiente mejorar continuamente los procesos. Se tienen las siguientes fases:

Modelamiento de procesos: inicialmente el conoce-dor de los procesos debe modelarlos con notación BPMN y junto al área de tecnología debe definir en qué pasos del flujo de trabajo (WorkSteps) se interactúa con personas (usuarios, grupos) o con otras aplicaciones (sean Progress o no) y sistemas externos (ej: correo electrónico, FTP, web services, etc.).

Desarrollo de la(s) aplicación(es) del proceso: después de tener el modelo, los ingenieros proceden a diseñar las páginas web (las cuales son visualizadas por las personas) y las distintas interacciones con las aplica-ciones que necesita el proceso; si las aplicaciones son Progress, se acceden a través del AppServer. Opcionalmente, se puede hacer simulación del proceso, en aquellos casos donde se necesiten conocer de forma preliminar los recursos consumidos y tiempos promedios.

Publicación, pruebas y monitoreo de un proceso de negocio: la aplicación desarrollada debe probarse, para lo cual se despliega en el BP Server; En el BP Server, los procesos son visualizados a través de un

Portal BPM; en el Portal BPM se listan las actividades pendientes de cada usuario (tareas) y si el usuario tiene los permisos adecuados se pueden visualizar indicadores que permiten la adecuada gestión y mejora de los procesos. Cada una de las tareas pueden hacer uso de aplicaciones o servicios Progress (capa CORE) y acceder a sistemas externos.

4.4.3. Modernización Orientrada a Aplicaciones Móviles

Una tercera alternativa en la modernización puede ser la de construir aplicaciones móviles. Para esto se utiliza la plataforma Telerik en la nube, concretamente Telerik Platform. Se tienen cuatro grandes fases:

Construcción de la interfaz de usuario: se definen todas las pantallas y su contenido; esto se hace en parte con componentes Drag and Drop y con progra-mación HTML.

Adición de eventos y programación JavaScript: los componentes móviles manejan eventos (presionar un botón, hacer zoom, etc.) a los cuales se les deben definir propiedades y acciones programadas en JavaScipt. Estos componentes pueden ser Kendo UI o elementos HTML.

Conexión al lado CORE: las pantallas desarrolladas anteriormente se deben conectar a una “solución” del lado CORE, es decir a los servicios REST disponibles a través del AppServer.

Pruebas y descarga de la aplicación: finalmente la aplicación se prueba en un simulador web, el cual permite corregir los errores de la aplicación. Finalmente se producen los archivos que se pueden descargar a dispositivos móviles Android, iPhone OS y Windows Phone.

4. Metodología 4.4. Capa de Presentación

Integrity

Fecha de inicio:

Fecha Final:

Nombre:

Lugar:

Page 22: Guía impresión

5. Nuestras Herramientas

El equipo de desarrollo y modernización de aplicaciones de Quantum Data Systems asume el reto de re plantear su metodología de desarrollo con el objetivo de traer los últimos avances de la industria a las aplicaciones empre-sariales de manera ágil y eficiente.

Algunas de las herramientas más importantes para el desarrollo ágil, el control de los archivos, y la coordinación de los equipos están a la mano de todos a través del internet. Servicios gratuitos como los que ofrece Skype, Google Drive, Dropbox, Toggl son parte de las herramien-tas de uso diario dentro de nuestro equipo. Sin embargo en nuestro propósito de lograr los mejores resultados, hemos desarrollado una serie de herramientas propias que nos permite hablar de nuestra metodología de desarrollo ágil como única e innovadora.

Portal AdministrativoEn su gran mayoría las aplicaciones empresariales son utilizada por diferentes actores que incluyen, proveedores, clientes, empleados, gerentes, adminis-tradores. Nuestro equipo ha desarrollado una plataforma de administración que tras una rápida configuración permite la generación de los diferentes, roles y perfiles de usuarios que accederán a la aplicación, determinando facilmente sus permisos, accesos y restricciones sin la necesidad de código.(Anexo 7.1.)

Generador Automático de PantallasLa disposición de la información en parámetros y tablas es un formato recurrente entre las aplicaciones empresariales que manejan gran cantidad de información. Nuestro equipo ha desarrollado una herramienta sencilla que permite en cuestión de minutos generar todas las páginas necesarias para la presentación de la información en tablas sencillas y complejas, con la posibilidad de consultar información, crear, editar o eliminar registros.(Anexo 7.1.) Generador Automático de ReportesNuestro equipo de desarrollo a generado una herramienta que permite al usuario final construir los reportes que necesita, como los necesita sin el uso de código, a través de una interfaz sencilla e intuitiva ahorrando horas de trabajo, liberando el equipo de desarrollo.(Anexo 7.1.)

Page 23: Guía impresión

A continuación, este documento presentará un ejemplo de los resultados alcanzados en el proceso de modernización de “Integrity”, una robusta aplicación desarrollada con el objetivo de ser la solución integral corporativa para la operatividad de la empresa.

Integrity es una aplicación originalmente desarrollada en modo caracter a la cual los usuarios pueden acceder a traves de un perfil previamente definido, teniendo acceso específicamente a los procesos que cada usuario tiene permiso según su perfíl y función dentro de la empresa.

Los procesos más importantes de esta aplicación se desenvuelven en el área de Nómina. La dirección y admin-istración de los recursos comerciales y el ejercicio corpora-tivo, administrativo y contable.

En el transcurso de los años la aplicación ha demostrado ser altamente eficiente y de suma importancia para el correcto funcionamiento de las empresas que hoy en día hacen uso de ella. Sin embargo, su interfaz de tipo caracter y su imposibilidad de acceso por internet o dispositivos móviles ha hecho que esta aplicación desarrolle una variedad de problemas y deficiencias.

El trabajo de modernización de esta robusta aplicación fue llevado a cabo por el equipo de Modernización de Aplica- ciones de Quantum Data Systems, equipo que ha venido trabajando en el mejoramiento de la metodología de modernización a partir de la tecnología Progress con el fin de ofrecer a nuestros clientes las mejores oportunidades de aprovechamiento de sus sistemas informáticos e inversiones tecnológicas. Llevando el mundo de las aplica- ciones empresariales al futuro.

6. Resultados

Integrity

Page 24: Guía impresión
Page 25: Guía impresión

IntegrityIntegrity

Fecha de inicio:

Fecha Final:

Nombre:

Lugar:

Page 26: Guía impresión

A continuación encontrará la lista de documentos anexos a los cuales se hace referencia a través del contenido de esta guía. Estos anexos tienen como objetivo ilustrar de manera profunda y altamente técnica las acciones y procesos llevados a cabo en el proceso de modernización.

Estos documentos anexos son originales y corresponden al proceso de modernización de la aplicación Integrity que se menciona en el punto anterior, su uso es indispensable para el equipo completo de modernización, es por esta razón que nuestro equipo puede acceder y trabajar en ellos a partir de una nube compartida de manera simultánea.

7. Anexos

Page 27: Guía impresión

7.1. División por módulos

Cada una de las funciones que componen los capítulos, representan un proceso puntual que se va a modernizar. Estos procesos son clasificados posteriormente según su naturaleza para asignarles un tipo de pantalla.

La totalidad de la aplicación se divide en capítulos a modernizar.

Cada uno de estos capítulos se identifican

con un nombre y reunen una serie de procesos o

funciones.

División en Módulos

Una aplicación puede tener varias divisiones y subdivisiones. En este caso, encontramos 4 capítulos compuestos por diferentes funciones. Esto permite tener un cronograma y adjudicar fechas de desarrollo.

Page 28: Guía impresión

7.2. Documento de Función

Documento de Función

Con esta plantilla el cliente y nuestros consultores levantan la información propia de cada función con el objetivo de determinar su complejidad, tamaño y alcance.

Page 29: Guía impresión

1. Estado del proceso si se ha desarrollado o no.2. Nombre del proceso basado en una nomenclatura (SICUD) 3. Definición es la descripción sencilla del servicio4. Consecutiva del parámetro en el servicio 5. Nombre del parámetro6. Tipo del dato7. Define si es un dato es de entrada o de salida8. Validación del dato que entra o sale9. Descripción sencilla del parámetro10. Expone un ejemplo de XML o JSON; es uno de los parámetros con el que se comunica el backend con el Frontend.

7.3. Capa de Aceso a Datos

1 2 3 4 5 6 7 8 9 10

Page 30: Guía impresión

Interfaz se servicio

Para el desarrollo de esta interfaz se sugiere utilizar una variable tipo longchar. Este parámetro debe recibir un archivo json o xml con los datos definidos en la plantilla de definición de servicios y un parámetro de salida que indique el éxito o error de la ejecución del servicio.

7.3.1. Capa de Componentes de Negocio

Page 31: Guía impresión

Entidades de Negocio

Para la entidad de negocio se sugiere definir un pro-dataset o tabla temporal, la definición de los campos no debe tener la cláusula “LIKE”.

7.3.2 Capa de Componentes de Negocio

Page 32: Guía impresión

Entidad de Tarea

La entidad de tarea utiliza las entidades de negocio definidas, y entrega la información al flujo de trabajo mediante la tabla temporal o el pro-dataset que se haya definido.

7.3.3. Capa de Componentes de Negocio

Page 33: Guía impresión

7.3.4. Capa de Componentes de Negocio

Workflow – Flujo de trabajo

El flujo de trabajo utiliza la entidad de negocio e invoca la entidad de tarea para obtener la información que requiera para cumplir con lo que se haya definido en el servicio.

Page 34: Guía impresión

Integrity

A B C D E F G H I J K L M N Ñ O P Q R S T V X Y Z

a b c d e f g h i j k l m n ñ o p q r s t v x y z

! ¡ " · $ % & / ( ) = ? ¿ . : , ; @ # ¢ ∞ ÷ “ ” ≠ ´ ‚

A B C D E F G H I J K L M N Ñ O P Q R S T V X Y Z

a b c d e f g h i j k l m n ñ o p q r s t v x y z

! ¡ " · $ % & / ( ) = ? ¿ . : , ; @ # ¢ ∞ ÷ “ ” ≠ ´ ‚

Manual de Marca

El diseño profesional de una marca gráfica incluye un documento que especifica la naturaleza de la marca, su forma, colores, y ambiente gráfico en el que se debe aplicar.

El manual de marca debe ser un punto de partida para el desarrollo de la interfaz gráfica de la aplicación proporcionando un ambiente coherente y consistente con la comunicación que el usuario reconoce de la marca.

7.4. Manual de Marca

R:61 G:157 B:214

R:230 G:119 B:29

R:207 G:0 B:33

R:147 G:189 B:55

Page 35: Guía impresión

Diagnóstico de Pantalla

Con el objetivo de estudiar las pantallas se hace un documento con los pantallazos de la aplicación original y la descripción de los servicios que contiene. A partír de este análisis se agrupan en diferentes tipos de pantalla para el diseño de los formatos propios de cada tipo en un documento de excel que posteriormente se entrega al equipo de implementadores.

7.5. Diagnóstico de las pantallas

Page 36: Guía impresión

Formatos de Pantalla

El presente es un ejemplo de los tipos de pantalla que se diseñaron para la modernización de Integrity (Tipo 3). En este documento se especifica la estructura general de la aplicación y los destalles particulares de este proceso.

El diseño de estos formatos de pantalla se hacen directamente en OE BPM por el diseña-dor de UE y parten del análisis de la aplicación y sus procesos y de la clasificación que se hizo de los mismos.

Una barra horizontal atraviesa de extremo a extremo la pantalla. En esta se despliega el nombre del proceso o aplicación que se está ejecutando en el momento.

Por debajo de la barra horizontal que da título al proceso que se está ejecutando y a la derecha del menú principal se ofrece el espacio para el despliegue de la aplicación, la información y el menú propio del proceso.

Menú de paginado para permitir al usuario navegar a través de las múltiples páginas de resultados que ofrece la aplicación después de una búsqueda.

Menú de la aplicación para filtrar, buscar, agregar, eliminar y editar información propia del proceso.

El menú principal de la aplicación se

presenta en el extremo izquierdo con tres botones

principales dispuestos de

manera vertical.

7.6. Formatos de Pantallas Nuevas

Page 37: Guía impresión

A través de una interfaz sencilla e intuitiva, nos pèrmite crear ágilmente roles y usuarios, asignándole a cada uno las restricciones y permisos de información necesaria para asegurar el óptimo funcionamiento de la empresa. Igualmente, esta herramienta permite el acceso a diferentes procesos de la aplicación habilitando los aspectos de la herramienta esenciales para cada rol o usuario.

8.1. Portal Administrativo

Page 38: Guía impresión

El generador automático brinda la posibilidad de crear de manera inmediata programas y/o pantallas para realizar un CRUD sencillo a las tablas seleccionadas, colocando todos los servicios ABL, dando la posibilidad de organizar los campos segun el orden requerido por la aplicacion.

Ésta herramienta genera la presentacion web a traves del uso de bpm, kendo y java script; a partir de servicios creados por la herramienta o tomando servicios creados por desarrolladores. El resultado son pantallas en formato de grilla en donde el usuario podrá elegir el orden de los campos y cuales de estos seran visibles, bien sea en la grilla o en el menú.

8.2. Generador Automático de Tabla Sencilla

Page 39: Guía impresión

A través de una interfaz sencilla e intuitiva, un usuario final tendrá la posibilidad de construir complejos reportes escenciales para la empresa sin la necesidad de usar código. Ésta herramienta permite simultaneamente, crear, editar, duplicar y eliminar reportes andministrándolos a partir de una página inicial.

8.4. Generador Automático de Reportes