Ingeniera Web

(IWeb)

Ingeniera Web (IWeb)

Los sistemas y aplicaciones basados en
Web (WebApps) ofrecen un complejo
arreglo de contenido y funcionalidad.
Como la Ingeniera Web es un rea de
relativa creacin, existen algunas
indefiniciones, sin embargo establece
algunos puntos los cuales deben de
contemplar los desarrolladores de
aplicaciones Web.

Ingeniera Web (IWeb)

Escenario
La IWeb es el proceso con el que se crean WebApps
(Aplicaciones Web) de alta calidad.
La IWeb no es un clon perfecto de la ingeniera de
software.

Es cierto que la IWeb al igual que la ingeniera de

software acenta actividades tcnicas y
administrativas.
Sin embargo existen sutiles diferencias en la manera
en como se dirigen las actividades para el desarrollo
del Software, pero el mtodo primordial dicta un
enfoque disciplinado para el desarrollo del sistema

Ingeniera Web (IWeb)

Iniciemos contestando las siguientes
preguntas:
Se pueden aplicar principios,
conceptos y mtodos de la ingeniera
de software al desarrollo Web?

Qu ocurre si persiste un enfoque sin

disciplina?

Ingeniera Web (IWeb)

Se pueden aplicar principios, conceptos y
mtodos de la ingeniera de software al
desarrollo Web?

Si, ya que la ingeniera de software establece

principios, mtodos, tcnicas, mtricas, etc.
las cuales pueden ser aplicadas en cualquier
construccin de software, sin embargo un
desarrollo de un sistema en tiempo real, un
sistema inteligente, as como un sistema Web
o aplicacin Web tiene sus particularidades.

Ingeniera Web (IWeb)

Qu ocurre si persiste un enfoque sin
disciplina?
La ingeniera establece efectuar las
actividades basados en fundamentos
tericos, uso de mtodos, tcnicas,
herramientas, etc. que permiten asegurar
un grado de xito del software
desarrollado

Atributos de los Sistemas y

Aplicaciones Basados en Web

Atributos de los Sistemas y

Aplicaciones Basados en Web
Intensidad de red
Internet, intranet, red,

Concurrencia
Carga impredecible
Desempeo
Espera prolongada

Disponibilidad
24/7/365 (24 horas, 7 das a la semana, 365 das al ao)

Gobernada por los datos

Texto, grficos, audio y video

Sensibilidad al contenido
Calidad y naturaleza esttica

Atributos de los Sistemas y

Aplicaciones Basados en Web
Evolucin continua
Anlogo a la jardinera (constante crecimiento,
poda, evaluar frutos si no sirve se elimina)

Inmediatez
Poner software en el mercado rpidamente

Respuesta inmediata, etc.

Seguridad
Esttica
Presentacin y disposicin de los elementos
agradable de fcil uso

Categoras de Aplicaciones
Informativa
Contenido de slo lectura

De descarga
Personalizable
De interaccin
Cuartos de charla, tableros de anuncios, mensajera instantnea, etc.

Entrada del usuario

La entrada de datos del usuario con base en formularios

Transaccional (Orientada a transacciones)

Operaciones de la organizacin, ejemplo ventas, pedidos, entrada, etc.

De servicios (Orientada a servicios)

Asesora en lnea, gestin de trmites

Portal
Men que canaliza al usuario hacia otra pgina, aplicacin o servicio web

Acceso a bases de datos (consulta, actualizacin, etc.)

Almacn de datos ( Coleccin de grandes volmenes de datos)

Estratos de la Ingeniera de WebApp

Se une la IS (Ingeniera de Software) y la IWeb
(Ingeniera Web) para desarrollar aplicaciones
ms eficaces y eficientes.
Mtodos de IS
Aplicacin de conjunto de tcnicas, mtodos
para construir una WebApp de alta calidad

Modelos de Proceso
Los modelos de procesos IWeb adoptan la filosofa
de desarrollo gil, reduciendo el ciclo de
desarrollo

Aplicacin de Herramientas y Tecnologa

Estratos de la Ingeniera de WebApp

Proceso
A pesar de la rapidez de los ciclos de
desarrollo es importante que:
Adopte el cambio
Aliente la creatividad y la independencia del
equipo de desarrollo y fortalezca la interaccin
con los accionistas de la WebApp
Construya sistemas que utilicen pequeos
equipos de desarrollo
Subraye el desarrollo evolutivo o incremental
mediante el uso de cortos ciclos de desarrollo

Estratos de la Ingeniera de WebApp

Aplique los Mtodos:
Comunicacin: Para facilitar la comunicacin
entre ingenieros Web y los dems
participantes. Recoleccin de necesidades y
requisitos. Evaluacin de solicitudes y cambios.
Anlisis de requisitos: Para proporcionar una
base que permita comprender la funcin que
proporcionar la App al usuario final y los
modos de interaccin que cada clase de
usuario requerir o necesitar

Estratos de la Ingeniera de WebApp

Aplique los Mtodos:
Diseo: Para establecer el contenido de la
aplicacin, la arquitectura de la aplicacin,
los datos de entrada y salida que permitirn
generar informacin al usuario,
Prueba: Para asegurar la fiabilidad de la App y
que esta cumpla con los requerimientos
establecidos. Se aplican tcnicas formales de
pruebas, verificacin de la navegacin,
seguridad, etc.

Estratos de la Ingeniera de WebApp

Aplique Herramientas y Tecnologa:
Uso de lenguajes que permitan se visualice la
App en diferentes Navegadores, leguajes de
programacin estandar y actuales como
HTML5, etc.
Recomendado establecer arquitectura
basados en componentes, lo cual facilita el
mantenimiento actualizacin
Navegadores, herramientas multimedia, etc.,
estndar.

El Proceso de Ingeniera Web

El Proceso de la Ingeniera Web

Recuerde que:
Los atributos de los sistemas y aplicaciones
de la Web, ya que tienen una profunda
influencia sobre el proceso de IWeb que se
elija
La inmediatez y la evolucin continua son
atributos que estn ligados a una
WebApp, se debe elegir un modelo de
proceso gil que produzca liberaciones a
un ritmo vertiginoso

El Proceso de Ingeniera Web

Se establece el proceso en dos fases las
cuales contienen varias actividades, las
fases son:
Definicin del Marco de Trabajo
Refinamiento del Marco de Trabajo

El Proceso de Ingeniera Web

Definicin del Marco de trabajo
Cualquiera de los modelos de proceso gil se
pueden aplicar como un proceso Iweb
La efectividad de cualquier proceso de
ingeniera depende de su adaptabilidad
Antes de definir un marco de trabajo se debe
reconocer que:
Las WebApps con frecuencia se entregan de
manera incremental o de forma evolutiva (va
creciendo)
Los cambios ocurrirn frecuentemente
Los plazos son cortos

El Proceso de Ingeniera Web

Definicin del Marco de Trabajo (continuacin)
Actividades involucradas:
Comunicacin con el cliente
Anlisis del negocio: define el contexto empresarialorganizativo para la WebApp
Formulacin: es una actividad de recopilacin de requisitos
que involucra a todos los participantes
Planeacin
Se crea el plan de proyecto para el desarrollo e incremento
de la WebApp
Modelado
Abarca las tareas de anlisis y diseo
Construccin
Despliegue
La webApp se configura para su ambiente operativo

El Proceso IWeb

El Proceso de Ingeniera Web

Refinamiento del marco de trabajo:
Se ha advertido que el modelo de proceso IWeb
puede ser adaptable

Las tareas asociadas con las actividades del

marco de trabajo IWeb pueden modificarse,
eliminarse o extenderse con base en
caractersticas del problema, el producto, el
proyecto y la gente en el equipo.
ADAPTE LAS MEJORES PRCTICAS PARA ASEGURAR
XITO EN EL PROCESO DE CREACIN DE UNA
APPWEB

Mejores Prcticas en Ingeniera Web

Mejores Prcticas en Ingeniera Web

Tomar tiempo para entender las
necesidades del negocio y los objetivos
del producto
Describir como interactuarn los
usuarios con la WebApp aplicando un
enfoque basado en escenarios

Desarrollar un plan del proyecto

Mejores Prcticas en Ingeniera Web

Utilizar algn tiempo para modelar lo que se
construir
Diagrame o modele la arquitectura de su AppWeb
Se recomienda en especial usar diagramacin de UML

Revisar la consistencia y calidad de los modelos

(diagramas UML)
RTF

Utilizar herramientas y tecnologa que permitan

construir el sistema con componentes reutilizables
Disear pruebas amplias y ejecutarlas antes de liberar
el sistema.

Modelado de Anlisis
para Aplicaciones Web

Modelado de Anlisis para

Aplicaciones Web
Un equipo de ingeniera Web debe emprender el
modelado del anlisis (comprender los
requerimientos del usuario), cobra relevancia si:
La WebApp es grande o compleja
El nmero de clientes es grande
El nmero de ingenieros Web participando es
grande
Las metas y los objetivos afectarn la lnea principal
de negocio de la empresa.
El xito de la WebApp tendr fuerte conexin con
el negocio de la empresa

Requisitos para el Anlisis de las

WebApps
El anlisis de requisitos para las
WebApps abarca:
Formulacin
Recopilacin de requisitos
Modelado de anlisis

Requisitos para el Anlisis de las

WebApps
La jerarqua de usuario

Desarrollo de casos de uso

Afinacin del modelo de caso de uso
A continuacin se describen

Requisitos para el Anlisis de las

WebApps
La jerarqua de usuario
Las categoras de usuarios finales que
interactuarn con la WebApp se
identifican como parte de las tareas de
formulacin y de recopilacin de requisitos
Cuando el nmero de usuarios es grande
es aconsejable desarrollar una jerarqua de
usuarios

Requisitos para el Anlisis de las

WebApps
Desarrollo de casos de uso
Conocidos tambin como haces de
funcionalidad
Los casos de uso se desarrollan para cada
categora de usuario descrita en la
jerarqua de usuario

Requisitos para el Anlisis de las

WebApps
Afinacin del modelo de caso de uso
Los casos de uso se organizan en paquetes
funcionales y cada paquete se valora para
verificar que es:
Comprensible
Cohesivo
Libremente acoplados
Jerrquicamente superficial

El Modelado de Anlisis para

WebApps
Actividades de anlisis:
Anlisis de contenido
Anlisis de interaccin
Anlisis de funciones
Anlisis de configuracin

El Modelo de Contenido
Definicin de objetos de contenido
Relaciones y jerarqua de contenido

Clases de anlisis para WebApps

A continuacin se explican

El Modelo de Contenido
Definicin de objetos de contenido
El tipo y forma del contenido abarca un
amplio espectro de elaboracin y
complejidad.
El contenido puede desarrollarse antes de
la implementacin de la WebApp

Un objeto de contenido puede ser una

descripcin textual de un producto
Los objetos de contenido se extraen de los
casos de uso.

El Modelo de Contenido
Relaciones y jerarqua de contenido
Una simple lista de objetos de contenido,
asociada con una breve descripcin de
cada objeto
Diagramas de relacin de entidades o
rboles de datos

El Modelo de Contenido
Clases de anlisis para WebApps

El Modelo de Interaccin
A este modelo de interaccin lo
componen 4 elementos:

Casos de uso
Diagramas de secuencia
Diagramas de estado
Prototipo de interfaz de usuario

El Modelo Funcional
Aborda 2 elementos de procesamiento
de la WebApp y cada uno representa
un grado diferente de abstraccin de
procedimiento:
1) Funcionalidad observable respecto al
usuario
2) Operaciones dentro de las clases de
anlisis que implementan comportamientos
asociados a la clase

El Modelo de Configuracin

En algunos casos, el modelo de

configuracin no es mas que una lista
de atributos tanto del lado del servidor
como del lado del cliente

Anlisis Relacin-Navegacin
La navegacin no slo es la accin de saltar
de pgina a pgina, sino la idea de moverse
a travs de un espacio de informacin.
El anlisis relacin-navegacin proporciona
una serie de pasos de anlisis que luchan por
identificar relaciones entre los elementos
descubiertos como parte de la creacin del
modelo de anlisis

Anlisis Relacin-Navegacin
El enfoque ARN se organiza en 5 pasos:

Anlisis de los participantes

Anlisis de elementos
Anlisis de relaciones
Anlisis de navegacin
Anlisis de evaluacin

RESUMEN PROCESO DE DESARROLLO DE

UNA WEBAPP

RESUMEN PROCESO DE DESARROLLO DE UNA WEBAPP

Planificacin inicial del sitio Web

Planificacin General del proyecto
Definicin del equipo de trabajo
Creacin del comit Web - Establecer
relacin con autoridades y reas
involucradas y funciones.
Definicin de instrumentos de seguimiento
de avances
Arranque del proyecto

RESUMEN PROCESO DE DESARROLLO DE UNA WEBAPP

Definicin del sitio Web, Arquitectura

del Sitio

Definicin de objetivos del sitio

Tipo de audiencia que tendr
Contenidos
Estructura
Sistema de navegacin que soportara
Planificacin
Definicin de la vista del sitio o diseo visual

RESUMEN PROCESO DE DESARROLLO DE UNA WEBAPP

Diseo Web y estndares

Definicin y diseo del(os) acceso(s)
rpido(s)
Accesibilidad (acceso a personas con
capacidades diferenciadas)
Definicin de las nomas para facilitar los
accesos (usabilidad)
Definicin y diseo de elementos grficos y
de multimedia
Definicin y diseo de interaccin con otros
sistemas

RESUMEN PROCESO DE DESARROLLO DE UNA WEBAPP

Diseo Web y eleccin de estndares a

seguir
Definicin y diseo del(os) acceso(s) rpido(s)
Accesibilidad (acceso a personas con
capacidades diferenciadas)
Definicin de las nomas para facilitar los accesos
(usabilidad)
Definicin y diseo de elementos grficos y de
multimedia
Definicin y diseo de interaccin con otros
sistemas
Diseo de actividades que desarrollara el sitio Web

RESUMEN PROCESO DE DESARROLLO DE UNA WEBAPP

Diseo Web y eleccin de estndares a

seguir
Definicin actores
Definicin de procesos
Definicin si el proceso se va a ejecutar en el lado
cliente o en el lado servidor
Anlisis de casos de uso
Diseo del espacio y estructura navegacional (que
objetos pueden ser visitados y alcanzados a travs de
la Aplicacin Web)
Diseo de la presentacin, flujo de la presentacin o
storyboarding (contenido y estructura de la
presentacin)

RESUMEN PROCESO DE DESARROLLO DE UNA WEBAPP

Diseo Web y eleccin de estndares a

seguir
Diseo del plan de pruebas
Pruebas de interfaces y contenidos
Pruebas de funcionalidad y operacin
Pruebas de carga
Pruebas de seguridad
Pruebas de respaldos y recuperacin

RESUMEN PROCESO DE DESARROLLO DE UNA WEBAPP

Diseo Web y eleccin de estndares a seguir

Diseo del plan de lanzamiento de la
Aplicacin Web
Plan de comunicacin para involucrar a las reas
relacionadas
Diseo del plan de capacitacin al usuario
Plan de subir o cargar el Sitio al Servidor
Plan de seguimiento
Plan para la liberacin
Plan de difusin y promocin
Plan para la evaluacin del desempeo

RESUMEN PROCESO DE DESARROLLO DE UNA WEBAPP

Generacin o desarrollo del sitio Web

Desarrollo de la Aplicacin Web siguiendo lo
establecido en el diseo