Apuntes Unidad2 Aplicaciones Web

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


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”


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.


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


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



11

● Algunos ejemplos de Software de diseño: UmbrelloUML, DBDesigner, Mysql Workbench y Visual Paradigm y Editor DIA



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.



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


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(); }

}



15



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


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.


17


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


18


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 (<,>).


<!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>

ejemplo

</body>

</html>

19


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.


<!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>

El lenguaje HTML es tan sencillo que practicamente

se entiende sin estudiar el significado de sus etiquetas principales.

Ademas de textos en negrita, tambien se pueden

poner en cursiva o <del>tachados</del>.

</body>

</html>

20



MODELADO

DE

NEGOCIO MODELADO

DE

REQUISITOS

ANALISIS

DISEÑO

21



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



Ing. Enrique López Durán --- Departamento de Sistemas y COmputación I.T. De Zacatepec

23


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


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


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


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


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


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


● 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


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


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

Apuntes Unidad2 Aplicaciones Web

Documents

Transcript of Apuntes Unidad2 Aplicaciones Web