Framework unificado para desarrollo de interfaces J2EE

Metodologa para el diseo y desarrollo de Interfaces de Usuario

Versin 0.1

Metodologa para el
diseo y desarrollo de
interfaces de usuario

Versin <0.1>

Historia de Revisin
Fecha Versin Descripcin Responsable
20/06/2005 <0.1> Creacin. Alejandro Bez
Cristian Castaeda
Diego Castaeda

INVESTIGADORES:

ALEJANDRO BAEZ
CRISTIAN CASTAEDA
DIEGO CASTAEDA

DIRECTOR:

JAVIER SNCHEZ
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

TABLA DE CONTENIDO

1. Introduccin......................................................................................................... 3
2. Anlisis, diseo, implementacin y pruebas de una aplicacin en J2EE ............ 4
2.1 Modelo de negocio ....................................................................................................... 4
2.2 Anlisis de requerimientos ........................................................................................... 6
2.2.1 Documento de requerimientos ................................................................ 6
2.2.2 Documento de casos de uso ................................................................... 8
2.3 Diseo del sistema ........................................................................................................ 9
2.4 Diseo de la lgica del negocio.................................................................................. 10
2.4.1 Modelo entidad relacin ........................................................................ 11
2.4.2 Modelo de clases persistentes: ............................................................. 11
2.4.3 Modelo de acceso a los datos (Patrn DAO) ........................................ 11
2.4.4 Definicin de servicios........................................................................... 12
2.5 Diseo de las interfaces de usuario............................................................................. 12
3. Interfaz grfica J2EE ......................................................................................... 12
3.1 Elementos funcionales de una interfaz grafica ........................................................... 13
3.1.1 Validaciones .......................................................................................... 14
3.1.2 Informacin a presentar y recolectar ..................................................... 14
3.1.3 Relacin entre datos ............................................................................. 15
3.1.4 Flujo de Pginas.................................................................................... 15
3.2 Elementos de diseo de una interfaz grafica .............................................................. 15
3.2.1 Diseo estructural ................................................................................. 16
3.2.2 Componentes ........................................................................................ 17
3.2.3 Zona de Mensajes................................................................................. 17
3.2.4 Diagrama de navegabilidad................................................................... 17
4. Otros problemas................................................................................................ 18
4.1 Acciones Extra( Mail, Alertas, tiempos).................................................... 18
4.2 Seguridad................................................................................................. 18
4.3 Reportes................................................................................................... 18
4.4 Performance............................................................................................. 18
4.5 Integracin con otro Software .................................................................. 18
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

1. Introduccin
Uno de los principales problemas en el desarrollo de aplicaciones J2EE es el poco
conocimiento que se tiene de cmo unir la lgica del negocio con la forma en que
se presentara esta a los usuarios finales del software. Es por eso de vital
importancia para el desarrollo de este proyecto, la definicin de una metodologa
que nos ayude a decir como se debe realizar este proceso, para reducir la
complejidad inherente de este tipo de desarrollos.

El objetivo de este documento es presentar una metodologa para el anlisis,

diseo, implementacin y pruebas en desarrollos de software en J2EE, adems de
esto definir como disear las interfaces graficas de usuario en este tipo de
aplicaciones y describir algunos problemas que se deben tener en cuenta en el
desarrollo de interfaces pero que van mas all del alcance de este proyecto.
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

2. Anlisis, diseo, implementacin y pruebas de una

aplicacin en J2EE
Desarrollando el caso de prueba de nuestro proyecto1, se han podido identificar
una serie de etapas que se deben realizar para la construccin de aplicaciones
J2EE. Estas etapas son un modelo general que hemos desarrollado a partir de
nuestra experiencia, pero el orden y cumplimiento de las fases no es obligatorio,
depende de las caractersticas especificas de la aplicacin.

A continuacin se muestran las etapas que consideramos se deben realizar en la

construccin de una aplicacin J2EE:

Modelo de negocio
Anlisis de requerimientos
Diseo del sistema
Diseo de la lgica del negocio
Diseo de las interfaces de usuario
Implementacin
Pruebas

2.1 Modelo de negocio

En esta etapa, se deben definir cuales son los procesos y procedimientos que se
tienen en el escenario para el cual se va a desarrollar la aplicacin. Esto permite
identificar los casos concretos que debe automatizar el sistema, la relacin que
debe existir entre la ingeniera de software y el negocio, con el fin de aclarar el
enfoque que quiere tener el cliente con el software.

Un procedimiento se puede entender como un mtodo estructurado para ejecutar

una tarea. Un proceso es un conjunto de procedimientos que se deben realizar
para alcanzar un objetivo, el cual representa una funcin que debe cumplir para el
escenario que se estudiando.

Tpicamente de un procedimiento se debe conocer:

Nombre: identificador nico del procedimiento.

Objetivo: Indica la finalidad que se busca alcanzar con el desarrollo del
procedimiento.
Personas implicadas: Indica las personas encargadas en desarrollar el
procedimiento. (vase numeral tal )
Impacto: Indica los efectos producidos por la ejecucin del
procedimiento.

1
Remitirse a los documentos de requerimientos, casos de uso y arquitectura de la videotienda en la pagina
http://pegasus.javeriana.edu.co/~fwj2ee/
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

Tiempo de realizacin: Indica el tiempo promedio de duracin del

procedimiento.
Descripcin: Indica de manera detallada todos los pasos que se deben
cumplir para la realizacin del procedimiento.
Resultados esperados: Indica los resultados que se deben obtener luego
de la realizacin del procedimiento.

Para un proceso se deben conocer:

Nombre: identificador nico del proceso

Objetivo: Indica la finalidad que se busca alcanzar con el desarrollo del
proceso.
Alcance: Define de manera especfica las reas, departamentos,
procesos, etc. que van a ser afectadas por el proceso y sus resultados.
Importancia: Indica el nivel de prioridad del proceso respecto a otros.
Tiempo de realizacin: Indica el tiempo promedio de duracin del
proceso.
Procesos con los que se relaciona: Indica los procesos que intervienen o
se ven afectados con el desarrollo del proceso.
Resultados esperados: Indica los resultados que se deben obtener luego
de la realizacin del proceso.
Procedimientos implicados: Indica el conjunto de procedimientos que
incluye el desarrollo de este proceso.

Para la recoleccin de la informacin de procesos y procedimientos hemos

definido el siguiente formato:

Numero del proceso:

Nombre del Proceso:
Objetivo:
Alcance:
Importancia:
Tiempo:
Procesos relacionados:
Resultados esperados:
Procedimientos
Nombre Objetivo Personas Impacto Tiempo Descripcin Resultados
Implicadas

Luego de llenar este formato para todos los procesos que se quieren analizar, se
podr determinar que procesos van a ser automatizados por el sistema. Para
estos procesos se debern realizar las etapas posteriores de la metodologa.
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

2.2 Anlisis de requerimientos

El anlisis de requerimientos es la etapa mas importante del desarrollo de

software, para poder hablar de ella primero tenemos que definirla; Para esto
utilizaremos la siguiente definicin que hace Microsoft: El anlisis de
requerimientos es la primera etapa de un proyecto software, en ella se tratan de
definir las condiciones o capacidades necesarias para uno o varios usuarios con el
fin de solucionar un problema o conseguir un objetivo.2

Como se indica en esta definicin, el objetivo de el anlisis de requerimientos es

determinar las condiciones o capacidades que debe cumplir el sistema que se
quiere disear para satisfacer las necesidades de un grupo de usuarios. Para
lograr esto utilizaremos la definicin de requerimientos. Un requerimiento se puede
entender como una descripcin informal de las necesidades y deseos que tiene el
usuario final respecto a un producto de software.

Para lograr el levantamiento de estos requerimientos consideramos que se deben

construir los siguientes artefactos: documento de requerimientos y el documento
de casos de uso.

2.2.1 Documento de requerimientos

En el documento de requerimientos se especifican las caractersticas y
funcionalidades que debera cumplir el sistema, para satisfacer los procesos y
procedimientos que se han determinado para ser automatizados. Este documento
debe contener al menos la siguiente informacin3:

Definicin de los usuarios del sistema

Requerimientos Funcionales
Requerimientos no funcionales
Requerimientos de Interfaz
Glosario

Este anlisis servir como base para el diseo de la aplicacin.

2.2.1.1 Definicin de los usuarios del Sistema

En esta seccin del documento de requerimientos se busca identificar las

caractersticas de los usuarios que interactuaran con el sistema. Para esto se
utilizara la definicin de roles. Un rol es un conjunto de funciones que debe cumplir
el papel de una persona que interacta con el sistema.

Para la definicin de un rol, se deben especificar los siguientes elementos:

2
Para Mayor Informacin dirjase a: Http://www.microsoft.com/spanish/MSDN/estudiantes/ingsoft/ingenieria/analisis.asp
3
Para mas informacin remitirse al estndar IEEE 830-1998 (SRS)
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

Nombre: identificador nico de un grupo de usuarios que interactan con el

sistema.
Funciones: Conjunto de tareas que cumplir este tipo de usuarios.
Privilegios: Conjunto de derechos que deben tener este tipo de usuarios
dentro del sistema.

2.2.1.2 Requerimientos Funcionales

Los requerimientos funcionales son todas las funcionalidades que debe satisfacer
el sistema para cumplir con las necesidades de los usuarios, a partir del anlisis
del negocio que se halla hecho.

Para la definicin de los requerimientos funcionales se deben especificar los

siguientes elementos.

Id: Identifica de manera nica un requerimiento.

Nombre: identificador de un requerimiento.
Descripcin: Indica una funcionalidad que debe cumplir el sistema.
Prioridad: indica la importancia de un requerimiento(Baja, Media, Alta).

2.2.1.3 Requerimientos No Funcionales

Los requerimientos no funcionales son todos aquellas caractersticas que debe

cumplir el sistema para responder de manera adecuada a todos los requerimientos
Funcionales y a las caractersticas de funcionamiento que requiera el usuario.

Para la definicin de los requerimientos no funcionales se deben identificar lo

siguientes elementos:

Id: Identifica de manera nica un requerimiento.

Nombre: identificador de un requerimiento.
Descripcin: Indica una caracterstica del sistema que ayudara a satisfacer
los requerimientos funcionales
Prioridad: indica la importancia de un requerimiento(Baja, Media, Alta).

2.2.1.4 Requerimientos de interfaz

Los requerimientos de interfaz son todos aquellos elementos que debe proveer el
sistema para permitir la interaccin entre el usuario y las funcionalidades que este
tiene, con el fin de que en el proceso de diseo se tenga claridad de las interfaces
que se deben crear y la relacin que debe existir entre ellas.

Para la definicin de los requerimientos de interfaz se deben identificar lo

siguientes elementos:
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

Id: Identifica de manera nica una interfaz grfica

Descripcin: Indica los elementos que debe tener la interfaz.
Requerimientos asociados: Indican las funcionalidades asociadas a la
interfaz grfica.

En este nivel, no se va definir de manera detallada la interfaz, solo se pretende

tener una primera aproximacin a los elementos que deben ser tenidos en cuenta
en el desarrollo de estas.

2.2.2 Documento de casos de uso

Luego de desarrollar el documento de requerimientos, se debe construir el

documento de casos de uso. Este documento consiste bsicamente en la
definicin de un conjunto de casos de uso. Un caso de uso es: narracin que
describe la secuencia de eventos de un actor (agente externo) que utiliza un
sistema para completar un proceso4.

La definicin de estos casos de uso es til para conocer los procesos del dominio
y el ambiente externo, dentro de los cuales se ejecutan los requerimientos
anteriormente descritos.

El documento de casos de uso deber contener al menos la siguiente informacin:

Definicin de actores
Definicin de casos de uso
Diagrama de casos de uso

2.2.2.1 Definicin de actores

En esta seccin del documento de casos de uso, se especificaran el tipo de

personas que de alguna manera interactan en alguno de los procesos del
sistema, estos actores estimulan al sistema con eventos de entrada o la recepcin
de algn resultado que este produzca.

Para la definicin de los actores se deben identificar los siguientes elementos:

Nombre: Identifica de manera nica un tipo de actor.

Papel: Indica el tipo de estimulacin que ejerce el actor sobre el sistema.

2.2.2.2 Definicin de casos de uso

En esta seccin del documento de casos de uso, se definen de manera formal

todos los casos de uso en los cuales se ejecutan cada uno de los requerimientos
funcionales que se especificaron en el documento de requerimientos (vase 2.2.1)

4
UML y Patrones, Larman, 1999.
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

Para la definicin de cada caso de uso se deben tener en cuenta al menos los
siguiente elementos:

Nombre: Identifica de manera nica un caso de uso.

Actores involucrados: Indica los actores que de alguna manera participan
en el desarrollo del caso de uso.
Propsito: Indica la finalidad que se busca con el caso de uso.
Resumen: Breve descripcin de los eventos que se realizan en el caso de
uso.
Tipo: Indica si la implementacin del caso de uso es opcional u obligatoria.
Importancia: Indica el nivel de prioridad del caso de uso(Baja, Media, Alta).
Curso normal y alterno de los eventos: Indica la secuencia de eventos que
suceden en la realizacin del caso de uso, especificando un curso normal y
alterno, dependiendo si se presenta o no algn evento inesperado que
afecte el desarrollo del caso de uso.
Requerimientos que satisface: Hace una referencia a los identificadores de
los requerimientos que satisface el caso uso.

2.2.2.3 Diagrama de casos de uso

En esta seccin del documento de casos de uso, se presenta el diagrama de

casos de uso. Un diagrama de casos de uso Explica grficamente un conjunto de
casos de uso de un sistema, los actores y la relacin entre estos y los casos de
uso.5

Para mayor informacin para la realizacin de estos diagramas a la especificacin

de UML6.

2.3 Diseo del sistema

En el diseo del sistema se pretende definir la arquitectura que utilizara la

aplicacin, con el desarrollo del caso de prueba, hemos credo que es conveniente
utilizar una arquitectura multicapas, donde se tendrn al menos las siguientes
capas:

Interfaz (Web): Se encarga de la presentacin de la aplicacin al usuario.

Servicios (negocio y Web): Se encarga de definir un conjunto de
funcionalidades para que la capa de interfaz se las presente al usuario.
Manejador de persistencia: Se encarga de establecer un puente para que la
capa de servicios acceda a la informacin que reside en la base de datos.
Base de datos: Se encarga de mantener de manera persistente la
informacin del sistema.

5
UML y Patrones, Larman, 1999.
6
UML (Unified Model Language), http://www.uml.org/
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

Este tipo de arquitectura se puede considerar genrico para el desarrollo de

aplicaciones J2EE; en nuestro caso hemos decidido utilizar los siguientes
frameworks:

Interfaz: Java Server Faces (JSF), Tapestry

Servicios: JBoss y Tomcat
Manejador de persistencia: Hibernate
Base de datos: Oracle

Grficamente la arquitectura es:

Tomcat

Intern JBOS ORACLE

et
HIBERNAT
E

La herramienta que se desarrollara, servir para la creacin de aplicaciones con la

arquitectura anteriormente descrita.

2.4 Diseo de la lgica del negocio

En esta etapa se deber disear un modelo apropiado para satisfacer los

requerimientos y casos de uso que se especificaron en etapas anteriores
utilizando la arquitectura que se ha definido.

Realizando nuestro caso de prueba, hemos podido identificar los siguientes items
que al menos se deben realizar7:

Modelo entidad relacin

Modelo de clases persistentes
Modelo de acceso a los datos (Patrn DAO8)
Definicin de servicios

7
El orden de realizacin de estos productos no es estricto. Se puede utilizar otros diagramas tiles para el diseo, para
mayor informacin remtase a la especificacin de UML.
8
Data Access Object, patrn que sirve para encapsular y administrar el acceso a los datos.
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

2.4.1 Modelo entidad relacin

El modelo entidad relacin es uno de los modelos conceptuales mas utilizados

para el diseo de bases de datos, el propsito de este modelo es simplificar el
diseo de bases de datos a partir de descripciones textuales de los
requerimientos9.

Para la construccin de este modelo se utilizan fundamentalmente los siguientes

elementos:

Entidad: Abstraccin que representa un objeto de la vida real.

Atributo: Caracterstica que representa un aspecto comn de la entidad
Relacin: Representa una interaccin entre entidades.

Luego del proceso de anlisis del sistema, se deben establecer un conjunto de

entidades, con sus atributos, que permitan representar todos los objetos que estn
involucrados en el problema a solucionar. Con este conjunto de entidades y con el
documento de casos de uso, se debern establecer las relaciones entre estas.

El objetivo del modelo de entidad relacin es representar grficamente estas

entidades y las relaciones que existen entre ellas, as como definir la estructura
que debe existir en la base de datos10.

2.4.2 Modelo de clases persistentes:

Este modelo sirve para hacer un mapeo entre la informacin que se encuentra
almacenada en la base de datos y los objetos que se tendrn dentro de la
aplicacin. Es importante aclarar que en este modelo no representara
directamente todas las funcionalidades que debe tener el sistema, sino que servir
como soporte al patrn DAO. En trminos de nuestro contexto, cada una de estas
clases es un POJO11.

2.4.3 Modelo de acceso a los datos (Patrn DAO)

Este modelo sirve para separar el acceso a los datos con la lgica del negocio,
esto permite que se defina un nivel mas que permita la proteccin a la integridad y
consistencia de los datos.

Consiste en definir un conjunto de clases que tendrn un grupo de mtodos que

se encargan de todas las operaciones sobre los POJOs que se definieron en el
modelo de clases persistentes. Tpicamente se tendrn que ofrecer operaciones
CRUD12 y bsquedas.

9
Modelo entidad relacin, http://alvherre.atentus.cl/modBasico/node3.html
10
Para mayor informacin: SILBERSCHATZ, A., et al. Fundamentos de Bases de Datos. Cuarta Edicin. McGraw Hill. 2002
11
Persistent Old Java Object, objeto al cual solo se le definen los atributos, los set y get para accesarlos.
12
Create, Read, Update, Delete. Operaciones que bsicamente se hacen sobre los datos
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

2.4.4 Definicin de servicios

En esta fase se debern definir un conjunto de servicios que se deben proveer
para satisfacer a los requerimientos y funcionalidades que fueron definidos
anteriormente para la aplicacin, es decir, se encargaran de implementar la lgica
del negocio. Estos servicios sern utilizados por el servidor Web para establecer
un puente entre la lgica del negocio y la presentacin.

Para nuestro contexto, consideramos que para un servicio se deben definir:

Precondicin: Es una condicin que ha de satisfacerse justo antes del

comienzo de la ejecucin de un servicio.
Poscondicin: Indica cual debe ser el estado de los datos despus de
haber realizado el servicio.
Definicin: Da una descripcin de lo que debe hacer el servicio
Prototipo del mtodo: Muestra el prototipo de cmo se implementara el
servicio.

Con la definicin de los servicios, se puede tener claro como van a ser
implementados los requerimientos funcionales del sistema; esta informacin ser
vital para el proceso de integracin de la aplicacin.

2.5 Diseo de las interfaces de usuario

Una de las etapas a las que menos tiempo se les invierte es al diseo de las
interfaces graficas

3. Interfaz grfica J2EE

Como ultimo paso de la metodologa encontramos la definicin detallada de las

interfaces grficas, aqu se encuentran los pasos a seguir en la construccin de la
mismas.

Las pantallas deben permitir una forma de interaccin entre el usuario y todas las
funcionalidades que ofrece el sistema, cada una de ellas debe al menos presentar
una funcionalidad para que su creacin este justificada.

Los elementos comunes entre pantallas que se podrian definir son:

Encabezado (Opcional)
Men (Opcional)
Zona de mensajes (error, xito)
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

Zona de Contenido
Hojas de estilo (CSS)13

Los elementos que se deben definir para cada pantalla son:

Informacin a presentar o recolectar

Validaciones
Relacin entre datos
Flujo de paginas

Una practica recomendable para verificar la completitud entre las paginas

definidas y las funcionalidades del sistema es llenar una matriz como la que se
muestra a continuacin:

Pagina 1 Pagina 2 .... Pagina m

Funcionalidad 1 X
Funcionalidad 2 X
.... X
Funcionalidad n X

El marcar la interseccin entre una pagina y una funcionalidad, indica que la

pagina implementa esa funcionalidad.

En esta seccin se describe en detalle componentes y caractersticas de las

interfaces grficas en desarrollos J2EE. Para llevar esto acabo dividimos los
elementos de una interfaz grfica en dos: los que corresponden al diseo de la
interfaz, y los que hacen referencia a su funcionalidad.

3.1 Elementos funcionales de una interfaz grafica

Los elementos funcionales de una interfaz grfica son los que definen el
comportamiento de la misma, es decir aquellos cuyo objetivo es asegurar el
funcionamiento adecuado y coherente de las pantallas del sistema, teniendo en
cuenta los requerimientos que fueron planteados y que se necesita sean
satisfechos.

Para un correcto desempeo por parte de los mismos es necesario que trabajen
conjuntamente, debido a que todos formarn el sistema y todos hacen que sea
mas claro el funcionamiento del mismo.

Entre los elementos a tener en cuenta encontramos:

13
Las hojas de estilo en cascada permiten estandarizar la forma de presentacin de los componentes en una
pagina. Para mas informacin http://www.csszengarden.com/
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

3.1.1 Validaciones
Validacin: Una validacin se lleva a cabo cuando se compara un dato con un
valor esperado, buscando coherencia e integridad.
Las validaciones que se van tener en cuenta son:

Tipo: Se evala el dato respecto al tipo que se especifico que deba ser.
Los tipo que se tendrn en cuenta son:

o Nmeros (Enteros y decimales).

o Cadena de Caracteres
o Fechas.

Longitud: Dependiendo de la longitud mnima o mxima que se requiera

se evaluar si el dato cumple con esta caracterstica.

Obligatoriedad: Se valida si en algunos casos el usuario tiene que llenar

un campo para realizar una operacin.

Caracteres Especiales: Dependiendo si el usuario necesita que algn

tipo de dato tenga o no caracteres especiales se debe verificar si cumple
con el requisito.

Valores mximos(mnimos): En algunas aplicaciones los datos deben

estar entre unos limites establecido segn los requerimientos del
sistema. Esto tambin debe ser evaluado

Las validaciones que se generen pueden ser agrupadas en cdigo

reutilizable(clase), que funcione para todas las pantallas que requieran las
mismas.

3.1.2 Informacin a presentar y recolectar

La informacin a presentar depender del rol del usuario del sistema ya que cada
uno tiene un nivel de acceso limitado, lo anterior para proteger la confidencialidad
de los datos. As mismo los datos que se obtienen tienen que estar acordes con la
peticin y ser consistentes en ntegros respecto a los almacenados en la base de
datos.

Los datos a recolectar deben tener coherencia respecto a lo que se necesita,

usando las validaciones para asegurar que sean correctos.

Se debe definir previamente que se va a mostrar y recolectar, donde y de que

forma para cada una de las pantallas que se van desarrollar. Si desea ver un
ejemplo dirigirse a el documento de descripcin de pantallas: Caso de prueba
videotienda.
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

3.1.3 Relacin entre datos

Hemos definido un lenguaje para modelar la relacin existente entre los datos, con
el fin de especificar la descripcin de cada una de las interfaces dependiendo de
los datos que se necesitan y se quieren mostrar.

Para mayor informacin dirigirse a el documento de patrones.....

3.1.4 Flujo de Pginas

Para el flujo que se lleva a cabo en cada accin vamos a utilizar los diagramas de
secuencia propuestos por UML, con la siguiente modificacin: Los diagramas de
secuencias comunes muestran el curso normal de un caso de uso, y su transito
por cada una de las clases. En nuestro caso, en vez de clases las cajas
representarn pantallas, por donde transitar el sistema para responder a un
evento.

Diagrama de Secuencia Modificado:

El diagrama de secuencia describir el curso particular de eventos para cada uno

de los casos de uso, mostrando la navegacin a travs de las pantallas definidas,
incluyendo los autores y los eventos generados en dichas operaciones

En el diagrama de secuencia se tiene los elementos:

Pantalla X Pantallas: Dice a que pantalla se hace referencia.

Actor: Persona que interacta con la pantalla.

Operador

Accin: Describe un evento.

Si desea ver un ejemplo dirjase al documento de descripcin de pantallas.

3.2 Elementos de diseo de una interfaz grafica

 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

Los elementos de diseo de una interfaz grafica, son aquellos que hacen
referencia a la presentacin esttica(distribucin, colores, fuentes, etc) de cada
una de las pantallas.

Este diseo es necesario para enfocar a la persona encargada de la construccin

de las paginas en el resultado que se desea alcanzar dejndole poca libertad, esto
evitar contratiempos y mal entendidos.

3.2.1 Diseo estructural

Una buena practica para el desarrollo de interfaces de grficas en J2EE, es hacer
un diseo estructural que consiste en realizar un esquema previo de cmo se van
a visualizar cada una de las pantallas determinando componentes comunes y
singulares en cada de ellas.

Una de las ventajas de realizar este diseo es la identificacin de elementos

comunes que pueden ser utilizados en todas las pantallas, lo cual que mejora el
tiempo de desarrollo.

Otra ventajas es que se le da uniformidad al sistema haciendo que este sea mas
agradable estticamente.

Entre los elementos que se deben tener en cuenta en el diseo encontramos:

3.2.1.1 Encabezado
El encabezado se ubica en la parte superior de la pagina, por lo general contiene
un logo o una imagen que identifique la aplicacin, es recomendable utilizar
frames para que esta imagen se cargue solo una vez.

3.2.1.2 Men
El men es necesario para una navegabilidad rpida, se puede ubicar en varios
lugares y debe ser accesible desde cualquier pgina. Es una buena practica de
programacin web el utilizar mens, para no tener que regresar a paginas y
causar mayor demora.

3.2.1.3 Zona de Contenido

La zona de contenido cambia constantemente, dependiendo de la operacin
requerida por el usuario, en esta zona se podrn visualizar el resto de paginas de
la aplicacin y a las que se pueda dirigir segn el tipo de rol de usuario que este
en interaccin.
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

3.2.2 Componentes
Un componente es un elemento que posee unas caractersticas definidas, las
cuales sirven para el cumplimiento de un objetivo para el que fue creado.

Los componentes a usarse deben ser definidos en el diseo estructural, algunos

son comunes pero la gran mayora son nicos para cada pagina. Al observar
cuales se necesitan, tambin se debe tener en cuenta como van a configurarse, es
decir como se van a manejar las validaciones y cuales se van a hacer.

Al definir los componentes desde el comienzo se tiene la ventaja de que se tendr

estipulado lo que se necesita para el desarrollo de las pantallas, as no se incluirn
componentes que no aporten, porque todos estarn cumpliendo con un objetivo.

En el documento de Descripcin de Pantallas y Navegabilidad se encuentra un

ejemplo de cmo se definen las validaciones y los componentes necesarios para
el caso de prueba.

3.2.3 Zona de Mensajes

Esta zona se encarga de mostrar diferentes mensajes los cuales pueden se tipo:
informativos, de error o xito. La implementacin de esta zona puede ser de varios
maneras descritas a continuacin:

Panel de Mensajes: Consisten en un panel que aparece en

consecuencia a un evento, mostrando el mensaje asociado que explica
la razn de este; Este panel es independiente de la pagina involucrada y
tiene un botn para continuar en la aplicacin en el siguiente paso del
flujo.
Estilo de campos: Consisten en resaltar el campo don de hubo errores
con el fin que usuario lo identifique para su posterior correccin ,
adicionalmente se usa un comentario en frente de este campo en
colores llamativos que especifica la razn del error.
Mensajes en la parte superior o inferior: Consiste en ubicar el mensaje
en la parte superior o inferior de la pagina, donde se especifique que lo
genero, ya sea la razn de un error o la confirmacin exitoso de una
operacin.

Vale aclarar que cualquiera de los diseos anteriores es valido y adicionalmente

que se pueden hacer mezclas entre estos utilizando dos o los tres al mismo
tiempo.

3.2.4 Diagrama de navegabilidad

Este diagrama es una herramienta til para identificar la navegabilidad que existe
entre las pantallas especificadas para la aplicacin. Se construye a partir del
direccionamiento que se describe para cada una de las pantallas que se definieron
en la etapa anterior.
 Framework unificado para desarrollo de interfaces J2EE
Metodologa para el diseo y desarrollo de Interfaces de Usuario
Versin 0.1

Para nuestro caso particular, este diagrama consta de 3 componentes

fundamentales que son:

P1 Representacin de una pantalla

Indica direccionamiento de una pantalla a otra

Etiqueta Indica el evento que genero el direccionamiento

Para mayor detalle sobre elementos y caractersticas de las interfaces graficas

remtase al numeral 3 de este documento.

Luego de la construccin de este diagrama se habr terminado el uso de la

metodologa y se deber comenzar el proceso de implementacin de la aplicacin.

4. Otros problemas

4.1 Acciones Extra( Mail, Alertas, tiempos)

4.2 Seguridad

4.3 Reportes

4.4 Performance

4.5 Integracin con otro Software