Aplicaciones en Tecnologias Web
Unidad 2Análisis y diseño de aplicaciones
webPor Ing. Enrique López Durán
Semestre: Febrero-junio del 2011
CONTENIDO2.1 Características de las aplicaciones Web
2.2 Tecnologías para el desarrollo de aplicaciones Web
2.3 Determinación de requerimientos para una aplicación Web.
2.4 Diseño de la Bases de Datos a utilizar
2.5 Diseño de la Interfaz Gráfica
2.6 Diseño de procedimientos para tratar la información
2.7 Elaboración de una propuesta para una aplicación Web
2.1 Características de las aplicaciones Web● En la ingeniería de software se denomina aplicación web a las
aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador. Ejemplos: webmails, wikis, weblogs, tiendas en línea y Wikipedia entre otras.
● La ingeniería web es la aplicación de metodologías sistemáticas, disciplinadas y cuantificables al desarrollo eficiente, operación y evolución de aplicaciones de alta calidad en la World Wide Web.
● La ingeniería de la Web es multidisciplinar en: arquitectura de la información, ingeniería de hipermedia/hipertexto, ingeniería de requisitos, diseño de interfaz de usuario, usabilidad, diseño gráfico y de presentación, diseño y análisis de sistemas, ingeniería de software, ingeniería de datos, indexado y recuperación de información, testeo, modelado y simulación, despliegue de aplicaciones, operación de sistemas y gestión de proyectos.
2.1 Características de las aplicaciones Web
● Ahorran tiempo de desarrollo
● No hay problemas de compatibilidad
● No ocupan espacio en el disco duro del usuario
● Las actualizaciones son inmediatas
● El consumo de recursos bajo
● Son Multiplataforma
● Son Portables
● De alta disponibilidad
● Los virus no dañan los datos.
● Permiten la Colaboración
● Los navegadores soportan aplicaciones web ricas (RIAs).
● Se diseñan con Arquitectura de N-Tiers
2.2 Tecnologías para el desarrollo de aplicaciones Web
JAVA ENTERPRISE EDITION (J2EE): Servlets/JSP/JBE/JDBC
.NET FRAMEWORK: ASP, WF, ADO/ODBC/
Ruby on Rails, PHP
Servidores: Jboss, WebSphere, GlassFish, BEALogic, Tomcat, Gerónimo, J2EE
IDEs: Eclipse, Netbeans, OpenLazlo, Visual Studio
Frameworks (MVC): Hiberrnate, Spring, Struts, Drupal
XML, HTML5, AJAX,
UML, UWE,
SMBD
JOOMLA, MOODLE, CLARONLINE
2.3 Determinación de requerimientos para una aplicación Web.
Es el estudio de una empresa o entidad para conocer cómo trabaja y dónde es necesario efectuar mejoras. Los estudios de las empresas generan una evaluación de la forma como funcionan los métodos empleados y si es necesario o posible realizar ajustes.
Requerimiento. Es una característica que debe incluirse en una aplicación web, la cual es proporcionada normalmente por los usuarios.
Requisito. Un requisito define el comportamiento interno de la aplicación web: cálculos, detalles técnicos, manipulación de datos y otras funcionalidades específicas que muestran cómo los casos de uso serán llevados a la práctica. Son complementados por los requisitos no funcionales, que se enfocan en cambio en el diseño o la implementación
Requisito debe ser la traducción de “requierement”
2.3 Determinación de requerimientos para una aplicación Web.
La Ingeniería de requisitos comprende todas las tareas relacionadas con la determinación de las necesidades o de las condiciones a satisfacer para un software nuevo o modificado, tomando en cuenta los diversos requisitos de los inversores, que pueden entrar en conflicto entre ellos.
2.3 Determinación de requerimientos para una aplicación Web.
ACTIVIDADES EN LA DETERMINACION DE REQUERIMIENTOS
1.ANTICIPACION DE REQUISITOS.
a. Ser proactivo.
b. Evitar ser reactivo.
2. INVESTIGACION DE REQUISITOS
a. El contacto directo con el usuario.
b. Técnica de la matriz de pareamiento.
3. ESPECIFICACIONES DE REQUERIMIENTOS.
a.Análisis de datos basados en hechos reales.
b.Identificación de requisitos esenciales.
c.Selección de estrategias para satisfacer los requsitos
9
2.4 Diseño de la Bases de Datos a utilizar
Java RMI CORBA MS.net
Capa de datos
Modelado de datos
Acceso a datos
BD
Capa de aplicaciónes
SMBD JDBC
EDITOR UML SQL
SQL
Aplicaciones
10
2.4 Diseño de la Bases de Datos a utilizar
Java RMI CORBA MS.net
11
● Algunos ejemplos de Software de diseño: UmbrelloUML, DBDesigner, Mysql Workbench y Visual Paradigm y Editor DIA
Java RMI CORBA MS.net
2.4 Diseño de la Bases de Datos a utilizar
12
SQL (Lenguaje 4GL) Es un lenguaje declarativo de acceso a B.D. relacionales
que permite especificar operaciones de declaracion y manipulación de datos. Emplea operadores del álgebra y el cálculo relacional para definir consultas para recuperar información de una B.D.
Java RMI CORBA MS.net
2.4 Diseño de la Bases de Datos a utilizar
Tecnologias JDBC y ODBC
JDBC es una tecnologia de Java para implementar el acceso a B.D., por medio de una biblioteca o API que permite la ejecución de operaciones sobre B.D. desde programas Java independiente del SO Y del SMBD al cual se accede. Utiliza SQL.
13
1. Importar los paquetes Java apropiados
2. Cargar el driver JDBC apropiado
3. Conectar a la B.D.: Especificar la ubicación de la B.D. con URL (jdbc:mysql://servidor:3306/nombreBD) y usando el subprotocolo del SMBD con el nombre de usuario y password correspondiente.
4. Invocar las declaraciones de SQL a la B.D.
5. Recibir resultados y usarlos
6. Cerrar la conexión
Java RMI CORBA MS.net
2.4 Diseño de la Bases de Datos a utilizarProgramación con JDBC
14
Implementación: Resultset para consultas
public static void main (String argv[]){ Statement stmt = cn.createStatement();
ResultSet rs = stmt.executeQuery("select ntarj, nombre " + " from empleados " + "where salario > 40000");
while (rs.next()) {
System.out.println("Ntarj:"+rs.getString(1)+"nombre:"+ rs.getString(2));
}
rs.close(); stmt.close(); con.close();
} catch (Exception e) {e.printStackTrace(); }
}
Java RMI CORBA MS.net
2.4 Diseño de la Bases de Datos a utilizar
15
2.5 Diseño de la Interfaz Gráfica
Java RMI CORBA MS.net
Ing. Enrique López Durán --- Departamento de Sistemas y COmputación I.T. De Zacatepec
PLANEACION DISEÑO IMPLEMENTACION
●Navegabilidad, interactividad, usabilidad,
●Arquitectura de la información y
●La interacción de medios como el audio,
texto, imagen y vídeo
16
2.5 Diseño de la Interfaz Gráfica
Estos documentos o páginas web pueden ser creadas:
* Elaborar archivos de texto en Lenguajes HTML o XHTML* Creación de páginas utilizando un programa WYSIWYG* Generadas por programas del lado servidor.
Las páginas web pueden incluir código u objetos que lo contienen:● Tecnologias ASP, JSP y Flex● Objetos de flash, Applets● JavaScript, ActionScript, VisualBasic Script y PHP.
Java RMI CORBA MS.net
17
2.5 Diseño de la Interfaz Gráfica
Para el diseño de páginas web debemos tener en cuenta tres etapas: * La primera es el diseño visual de la información. En esta etapa
se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un bosquejo o prediseño sobre el papel o con una herramienta de tipo storyboard. Esto facilitará tener un orden claro sobre el diseño.
* La segunda, Consiste en 'escribir' la página web. Usando las herramientas de creación de contenido web
* La tercera, etapa consiste en la optimización de la usabilidad y seguridad
Java RMI CORBA MS.net
18
2.5 Diseño de la Interfaz Gráfica
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>).
Java RMI CORBA MS.net
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo</p>
</body>
</html>
19
2.5 Diseño de la Interfaz Gráfica
XHTML, acrónimo en inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), pensado para sustituir a HTML como estándar para las páginas web. En la versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML.
Java RMI CORBA MS.net
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que practicamente
se entiende sin estudiar el significado de sus etiquetas principales.</p>
<p>Ademas de textos en <strong>negrita</strong>, tambien se pueden
poner <em>en cursiva</em> o <del>tachados</del>.</p>
</body>
</html>
20
2.6 Diseño de procedimientos para tratar la información
Java RMI CORBA MS.net
MODELADO
DE
NEGOCIO MODELADO
DE
REQUISITOS
ANALISIS
DISEÑO
21
2.6 Diseño de procedimientos para tratar la información
Java RMI CORBA MS.net
MODELADODE
NEGOCIO
MODELADODE
REQUISITOSANALISIS DISEÑO
Diagrama De
proceso
Diagrama De Secuencias
Del sistema
Modelo de casos
de uso
Modelo de
dominio
Contratos
Colaboraciones
Diagrama De
Clases
PaquetesPatrones y
Estructuras deDatos
Diseño GUIPersistenciaDistribucion
BPMN UML
ArquitecturaDel
Sistema
22
2.6 Diseño de procedimientos para tratar la información
Java RMI CORBA MS.net
Ing. Enrique López Durán --- Departamento de Sistemas y COmputación I.T. De Zacatepec
23
2.6 Diseño de procedimientos para tratar la información
Modelado de Negocio● Un proceso a implementarse con software debe
indicar:– la secuencia de actividades a realizar por los
integrantes del equipo de desarrollo: o sea el flujo de actividades.
– los productos que deben crearse: qué y cuándo – Una asignación de tareas a cada miembro del
equipo y al equipo como un todo– Heurísticas y– Los criterios para controlar el proceso
24
2.6 Diseño de procedimientos para tratar la información
Basado en el diagrama de casos de uso
• Debe ser iterativo e incremental. Conviene centrarse en los
aspectos críticos en las primeras iteraciones para minimizar riesgos.
Rápida retroalimentación● Establecer un proceso marco:
“Cada empresa de desarrollo debe definir su propio proceso”.
Etapas:
• Identificar y definir los PN (procesos de negocio) según objetivos de la empresa
● Definir un “caso de uso del negocio” para cada PN
● Identificar roles en los PN Modelar el flujo de tareas de cada
PN mediante escenarios (diagramas de secuencia) y diagramas de procesos
Especificar los datos y actividades en cada diagrama de actividades, DA
25
2.6 Diseño de procedimientos para tratar la información
1) Objetivos Estratégicos
2) Subobjetivos Procesos del
Negocio
Atender pedidos
Generarpedidos aproveedor
Gestionaralmacén
Fabricar productos
3) Casos de Uso del Negocio
Fabricar productos
Gestionar almacén
Realizar pedidos a
proveedores
Atender pedidos
Reducir tiempo de fabricación
...Incrementar las ventas
Satisfacer pedidode cliente
Ejemplo: Empresa que fabrica productos bajo demanda
26
2.6 Diseño de procedimientos para tratar la informaciónCasos de Uso de Negocio
Cliente Registrar Pedido
Fabricar Producto
Gestión Almacen
ProveedorPedidos Proveedores
Fabricar Producto Jefe TécnicoOperario Puesto
Gestión Almacen Operario Almacen
: Cliente : Comercial : Jefe Técnico : Jefe Producción
[ok] realizar Producción
responder estudio
aceptar pedido
cursar pedido
estudiar pedido
3) Casos de uso por cada P3 4) Identificar ROLES
5) Crear Escenarios
27
2.6 Diseño de procedimientos para tratar la informaciónDiagramas de Proceso
Flujos de actividades
Mostrar flujo del proceso mediante diagramas de proceso
– Diagramas de actividades con roles
– Actividades complejas se describe en otro diagrama.
– Incluir solo información relevante
Realizar Pedido
Cursar Pedido
Rechazar Pedido
¿es propio?
Confirmar Pedido
¿es viable?
Crear P lantilla
si
Analizar Viabilidad
no
Realizar tarea
Pedir Material
Entregar Contenedor
Operarario AlmacenPuesto ProduccionJefe TécnicoComercialCliente
6 Crear Diagramas de Proceso con BPMN
28
Reglas de restricción:Especifican políticas o condiciones que restringen la estructura y comportamiento de los datos.
● Estímulo-Respuesta
● Restricción de operación
● Restricción de estructura
Reglas de derivación: Especifican políticas o condiciones para inferir nuevos hechos a partir de otros.
2.6 Diseño de procedimientos para tratar la informaciónReglas de Negocio
29
2.6 Diseño de procedimientos para tratar la información
Modelado de requisitosObjetivos:
1) Se establecen los requisitos funcionales y no funcionales del sistema.
2) A partir del modelo del negocio, se construye el modelo de casos de uso y el modelo conceptual.
Tipos de requisitos:● Funcionales● No Funcionales
– Usabilidad– Fiabilidad– Rendimiento– Adaptabilidad,
Mantenimiento, Configurable– Implementación: lenguajes,
herramientas,..– GUI– Legales
30
2.6 Diseño de procedimientos para tratar la información
De los diagramas de proceso...
actor
Concepto del Dominio
Caso de Uso
objeto
actividad
rol
Realizar Pedido
Comercial
Confirmar Pedido
Analizar Viabilidad
Jefe Técnico
Crear Plantilla
Realizar Tarea
Pedir Material
Entregar Contenedor
Operario Almac en
Recoger Contenedor
Puesto Produccion
Retirar Contenedor
Gerente
CajeroPago
Cliente
TPV
11 11
Iniciado por
1
1
1
1Registra Ventas
Venta
1
1
1
1pagado por
1
1
1
1iniciada por
11 11
capturada en
CatalogoProductos
Tiendadireccionnombre
LineaVentacantidad
1..n
1
1..n
1Contenidas en
Producto
1..n1 1..n1
Contiene
1
0..n
1
0..n
Descrita por
Item
0..n1 0..n1
Almacena 1
0..1
1
0..1
Registra venta de
0..n0..n
Describe1
0..n
1..n
1
Usado-por
Casos de uso
Modelo Conceptual
31
2.6 Diseño de procedimientos para tratar la información
Modelado de AnálisisObjetivos:
● A partir de los casos de uso obtener el diseño preliminar del sistema que deberá ser refinado en el modelo del diseño.
● Nivel de abstracción más alto que en el diseño. Visión ideal del sistema.
● Se define una arquitectura del sistema.
● Para cada caso de uso se define un diagrama de secuencia del sistema que muestra los eventos que un actor genera durante la interacción con el sistema (caja negra)
● Cada evento da origen a una operación del sistema
● El efecto de las operaciones se describen mediante contratos especificados mediante una plantilla (opcional).
32
2.6 Diseño de procedimientos para tratar la información
● Para cada operación del sistema se define una colaboración (diagrama de interacción) que muestra cómo deben colaborar los objetos para satisfacer la postcondición expresada en el contrato de dicha operación.
● Diseñar las colaboraciones, asignando responsabilidades a las clases. Se utiizan patrones de diseño.
● Crear el modelo de clases a partir del modelo conceptual, conforme se definen las colaboraciones.
Al modelo de clases● Se añade una clase por cada tipo
de objeto del dominio que participa en la colaboración.
● Se añaden atributos según los contratos.
● Se añaden métodos según las colaboraciones.
Para aquellas clases con objetos con comportamiento dependiente del estado, se construye una máquina de estados:● Dispositivos, Controladores,
Ventanas, etc.
33
2.6 Diseño de procedimientos para tratar la información
Modelado de diseñoObjetivo:
Refinar el diseño del sistema del modelo del análisis considerando los requisitos no funcionales y restricciones del entorno de implementación.
De manera iterativa se refina el modelo de clases y las colaboraciones del análisis hasta obtener un diseño del sistema adecuado para pasar a la implementación.
Consideraciones de diseño● Identificar clases (atributos y
métodos) e interfaces en el modelo de clases del diseño
● Establecer asociaciones entre clases.
● Establecer navegabilidad para todas las asociaciones.
● Determinar visibilidad entre clases.● Incluir relaciones de dependencia
entre clases.
34
2.6 Diseño de procedimientos para tratar la información
Consideraciones de diseño
● Definición de la arquitectura del sistema
● Subsistemas: Paquetes● Patrones de diseño● Estructuras de datos● Diseño del interfaz de
usuario● Manejo de la persistencia● Distribución
35
2.7 Elaboración de una propuesta para un aplicación Web
Aplicaciones
● Ahorro de energía
● Calculadora de CO2
● Administración RRR
● Monitoréa Consumo
● Otras:
– Objetos de aprendizaje
– Diseño instruccional
– Laboratorios virtuales
Requisitos:
● Acceso web
● Persistencia de datos
● Manejo de sesión
● Soporte de pda, tablets, celuilares.
● Uso de beans/JSP
● Diseño con plantilla MVC