INSTITUTO TECNOLGICO SUPERIOR

DE SAN ANDRS TUXTLA

Ingeniera de Software
Modelo de Ingeniera WEB
DOCENTE:
M.T.I MONTSERRAT MASDEFIOL
SUAREZ
INTEGRANTES:

GUADALUPE EDITH HERNNDEZ DURN

NGEL OMAR PREZ GARCA

Introduccin
Uno de los aspectos ms tenidos en cuenta, en el desarrollo
de sitios web es sin duda alguna el diseo grafico y la
organizacin estructural del contenido. En la actualidad la web
est sufriendo grandes cambios, que han obligado a expertos
en el tema a utilizar herramientas y tcnicas basadas en la
ingeniera de software, para poder garantizar el buen
funcionamiento y administracin de los sitios web.

Que es Web?

La World Wide Web (WWW) o Red informtica mundial comnmente conocida

como la Web, es un sistema de distribucin de documentos de hipertexto o
hipermedios interconectados y accesibles va Internet. Con un navegador web,
un usuario visualiza sitios web compuestos de pginas web que pueden
contener texto, imgenes, vdeos u otros contenidos multimedia, y navega a
travs de esas pginas usando hiperenlaces.
Web es un vocablo ingls que significa red, telaraa o malla. El concepto
se utiliza en el mbito tecnolgico para nombrar a una red informtica y, en
general, a Internet (en este caso, suele escribirse como Web, con la W
mayscula).

Evolucin de la
Web
Crecimient
o
desorganiz
ado

Se aplica el
uso de la
Ingeniera

Se
desarrollan
enormes
sistemas
Web

Internet
Es
Tecnologa

Necesaria y til para el

desarrollo global
Es la
Fuente de informacin
ms importante
disponible

Revolucin de las TIC

Utilizacin de la
IW

Explosin de las
redes sociales

Que Es La Ingeniera Web?

Ingeniera
Web
Es

Filosofa
idntica
A

Ingeniera de
Software

Es

Para crear y
mantener

Proceso
utilizado

Aplicaciones
y Sistemas
web
De

Alta Calidad

Quin Lo Hace?
Los ingenieros Web y los desarrolladores de contenido no tcnicos crean las
WebApps.

Por qu es importante?
Conforme las WebApps se integran cada vez ms en las estrategias de
negocios para pequeos y grandes empresas (ejemplo el comercio
electrnico), crese en importancia la necesidad de construir sistemas
confiables, prcticos y adaptables.

Caractersticas de la
Ingeniera
web
Caractersti Explicacin
ca
Intensiva
Intensiva
s
s de
de Red
Red

Inmediat
Inmediat
ez
ez

Esttica
Esttica

Ingenier
a Web

Intensivas de Red

Por naturaleza utiliza una red, debe dar servicio a una

comunidad de clientes

Inmediatez

El tiempo que se tarda en comercializar un sistema web es

mucho ms rpido que otro tipo de software

Evolucin Continua

A diferencia de una aplicacin de escritorio (que utilizan

actualizaciones planificadas), estas pueden tener
actualizaciones cada hora (en algunos casos)

Controlada por el
Contenido

Hace mucho uso de contenidos hipermedia ,para mostrar

textos, imgenes, videos, etc.

Seguridad

Por la disponibilidad a una gran cantidad de usuarios, existen

una

Esttica

Parte de su atractivo son su apariencia e interaccin

Evoluci
Evoluci
n
n
Continua
Continua

Segurida
Segurida
d
d
Controla
Controla
da
da por
por el
el
Contenid
Contenid
o
o

Participantes en el
Proceso

Ingenieros
Dueos Web
Participantes
Administradores
sin Funciones tcnicas

Formulacin y Planeacin

Formulacin
Valora funciones
subyacentes de las
webapps, las funciones
globales que desean los
usuarios y el mbito de
desarrollo

Planeacin
Elementos que deben
definirse para establecer
un flujo de trabajo, un
programa, que permita
rastrear el proyecto
conforme avanza el
tiempo

reas
El desarrollo de aplicaciones Web posee determinadas caractersticas que lo
hacen diferente del desarrollo de aplicaciones o software tradicional y sistemas
de informacin. La ingeniera de la Web es multidisciplinar y aglutina
contribuciones de diferentes reas:
Diseo de procesos de negocio para aplicaciones web.
Herramientas CASE para aplicaciones web.
Generacin de cdigo para aplicaciones web.
Desarrollo web colaborativo.
Modelado conceptual de aplicaciones web.
Diseo de Modelos de datos para sistemas de informacin web.
Ingeniera web emprica.
Entornos de desarrollo de aplicaciones web integrados.

El Proceso De La IWeb
El proceso que se debe de elegir para el desarrollo de un sitio Web depende mucho de
qu tipo de proyecto se desea implementar o tambin depende de los acuerdos con
los que se lleguen a plantear con el cliente a quien se le va a desarrollar el sitio Web.
Las actividades del marco de trabajo para la ingeniera Web se aplican empleando un
flujo de proceso incremental.
a) Comunicacin con el cliente: se caracteriza por el anlisis del negocio y la
formulacin.
b) Planeacin: se crea un plan de proyecto para el incremento de la WebApp.
c) Modelado: las labores convencionales de anlisis y diseo de ingeniera de
software se adaptan al desarrollo de la WebApp, se mezclan y luego se funden en
la actividad de modelado IWeb.
d) Construccin: las herramientas y la tecnologa IWeb se aplican para construir la
WebApp que se ha modelado.
e) Entrega y retroalimentacin: la WebApp se configura para su ambiente operativo,
se entrega a usuarios finales y luego comienza un periodo de evaluacin.

Metodologas Web

Metodologa WSDM (Web Site Design Method)

Es una metodologa de diseo para sitios web (Web Site Design Method),
donde hay un acercamiento al usuario que define los objetos de
informacin basado en sus requisitos de informacin para el uso de la
Web. En este mtodo se definen una aplicacin Web a partir de los
diferentes grupos de usuarios que vaya a reconocer el sistema.
Propone cuatro etapas:

modelo de usuario.
diseo conceptual.
diseo de la implementacin.
implementacin.

Fase de Modelo de Usuario

Se intenta detectar los perfiles de usuarios para los cuales se construye
la aplicacin. Durante esta fase es necesario determinar:
Quin es el pblico objetivo? Cmo ser la visin de su sitio Web?
Cules son los objetivos de marketing de la empresa? Cules son los
objetivos de su sitio web? Qu mensaje tiene su compaa quiere
transmitir?
El proceso de planificacin estratgica se crea un plan inicial del sitio
web. Se divide en dos subfases siguientes:

Clasificacin de usuarios: Se deben identificar y clasificar a los

usuarios que van a hacer uso del sistema.
Descripcin de los grupos de usuarios: Se describen con ms
detalles los grupos de usuarios detectados en la etapa anterior.

Caractersticas

Es una metodologa, por lo que adicionalmente al proceso define un

conjunto de guas y modelos que permiten una correcta
representacin del sistema a construir.

Es dirigido por la audiencia, por lo cual se enfoca en satisfacer las

necesidades del usuario final

Utiliza tcnicas que permite el desarrollo de aplicaciones web con un

alto contenido semntico.

Ventajas y
desventajas

Ventajas

El definir la misin o alcance claramente permite evitar inconsistencias durante

el proceso de desarrollo.

Al ser un proceso dirigido por la audiencia se enfoca en cumplir las

necesidades de los distintos grupos de usuarios.

WSDM utiliza OWL y RDF las cuales son recomendaciones del W3C (World
Wide Web Consortium).

Permite separar el diseo conceptual del diseo de implementacin, ya que en

la prctica pueden existir muchos escenarios de implementacin para un
mismo modelo conceptual.
Desventajas

La gran cantidad de modelos necesarios para definir un sistema puede llegar a

ser abrumadora an ms si se considera que los lenguajes de modelado que
se utilizan son muy poco conocidos.

Escasa documentacin del proceso.

Falta de apoyo de parte de un grupo u organizacin.

No considera a las Pruebas dentro del proceso de desarrollo.

Fase de Diseo Conceptual

Se desarrolla el modelado conceptual no tiene el mismo significado que
en OOHDM. Durante el modelado conceptual se realizan dos tareas a la
vez: el modelado de objetos, que es lo que en OOHDM se llama modelo
conceptual y el diseo de la navegacin, que coincide con la idea del
diseo navegacional de OOHDM.
Distingue tres tipos de componentes de navegacin, informacin y
externos.
Cada navegacin consta de tres capas:

Contexto

Navegacin

Capas de informacin.

Fase de Diseo de Implementacin

Se modela la interfaz para cada rol de usuario. Ahora que se tiene una
versin definitiva del plan se puedan comenzar con la construccin del
sitio web Durante esta fase, se tendr lugar lo siguiente:
La construccin de la arquitectura de navegacin del sitio.

Creacin de alta funcionalidad, teniendo como fin a la animacin,

pues har que se propague por todas las pginas de los medios
necesarios con sus los grficos y el texto.
El cdigo de los programas tcnicos y la funcionalidad del sitio.
La creacin y diseo de la pgina principal disponible

Fase de Realizacin de Implementacin

Se codifican todos estos aspectos en el lenguaje concreto que se haya seleccionado.
WSDM es tambin una propuesta viva que est cambiando y adaptndose a nuevos
requisitos.
Se prepara el lanzamiento de la web teniendo en cuenta Cundo entraran a la web?
Antes de la puesta en marcha se garantiza lo siguiente:

Continuo y exhaustivas pruebas que garantizar un impecable final del sitio web.
Trabajo directamente con la empresa para garantizar la tcnica y la usabilidad se
cumplen las normas.
Velar el final del proyecto con la finalidad de ver si se han cumplido los requisitos
planteados.
Crear una fecha de lanzamiento y el plan.

Diagrama de Proceso de WSDM

Metodologa SOHDM
(Scenario-Based Object-Oriented Hypermedia Design Methodology)
Es un Mtodo que Desarrolla Diseo en panoramas (scenario) Orientada a Objetos en
Hipermedia (Scenario - based Object-oriented Hypermedia Design Methodology).
Presenta la necesidad de disponer de un proceso que permita capturar las necesidades
del sistema. Para ello, propone el uso de escenarios.
Esta metodologa tiene semejanzas con, OOHDM y EORM donde se diferencian en el uso
de panoramas, que describen las actividades en los acontecimientos y primitivas de
flujos de actividades. Los panoramas se definen en la fase de anlisis y se utilizan para
modelar los objetos
Consiste en seis fases:

Fase de Anlisis
Fase de Modelado de Objetos
Fase de Diseo de Vistas
Fase de Diseo Navegacional
Fase de Diseo de la Implementacin
Fase de Construccin

ventajas

Tiene en cuenta aspectos como la especificacin de

requisitos haciendo uso de los escenarios
Cubre todas las fases del proceso de desarrollo
Es un proceso sencillo de seguir, aunque se le puede criticar
el hecho de que su nomenclatura est muy cerrada

Diagrama de Proceso de SOHDM

Metodologa RNA
(Relationship-Navigational Analysis)

Es un mtodo de Anlisis de Navegacin Relacional (Relationship

Navigational Analysis), que define una secuencia de pasos que se
utilizarn para el desarrollo de la Web. Es especialmente til para uso de
la Web creados en base de sistema de herencia.
La propuesta de RNA es quizs una de las que ms ha resaltado la
necesidad de trabajar con la especificacin de requisitos, incluyendo
tareas como el anlisis del entorno y de los elementos de inters.
Para uso de la Web creados en base de sistema de herencia. En este
mtodo encontramos cinco fases las cuales son:

Fase de Anlisis del Entorno

Fase de Definicin de Elementos
Fase de Anlisis del Conocimiento
Fase de Anlisis de Navegacin
Fase de Implementacin del Anlisis

Diagrama de Proceso de RNA

Metodologa HFPM
(Hypermedia Flexible Process Modeling Strategy)

La propuesta de HFPM (Olsina, 1998) describe un proceso detallado

que cubre todo el ciclo de vida de un proyecto software. HFPM propone
un total de trece fases para las cuales se especifican a su vez una serie
de tareas, las cuales son:
Descripcin breve del problema. No indica ninguna tcnica concreta
pudiendo realizarse esta descripcin mediante el lenguaje natural.
Descripcin de los requisitos funcionales mediante casos de uso.
Realizar un modelo de datos para esos casos de uso, proponiendo el
uso de un modelo de clases.
Modelar la interfaz de usuario. Para ello, propone el uso de sketches
y prototipos que permitan presentar los datos al usuario.
Modelar los requisitos no funcionales. En stos incluyen la
navegacin, la seguridad.

Fases

Fase de Anlisis
Fase de Modelado de Objetos
Fase de Diseo de Vistas
Fase de Diseo Navegacional
Fase de Diseo de la Implementacin
Fase de Construccin
Fase de Modelado de los requisitos del software
Fase de Planificacin
Fase de Modelado conceptual
Fase de Modelado Navegacional
Fase de Modelado de la Interfaz Abstracta
Fase de Diseo del Entorno
Fase de Capturar y editar los elementos multimedia
Fase de Implementacin
Fase de Verificacin y validacin
Fase de Evaluacin del entorno
Fase de Evaluacin de la calidad
Fase de Mantenimiento
Fase de Documentacin

Caractersticas

El proceso detallado cubre todo el ciclo de vida de desarrollo de la

aplicacin.
Est compuesto por 13 fases.
Describe las tareas y subtareas a realizar en cada fase pero, no ofrece
modelos o tcnicas de modelado.
Incluye al usuario desde el principio del proceso de desarrollo.
Si bien no define lineamientos de modelado, presenta la necesidad de
definir modelos especficos para el usuario.
Presenta la necesidad de elaborar la documentacin especfica a
modelos y actividades desarrolladas en el ciclo de vida.
Aunque la presentacin de las fases es secuencial, HFPM permite la
realizacin de iteraciones en el proceso de desarrollo

Diagrama de Proceso de HFPM

Metodologa OOHDM
(Object Oriented Hypermedia Design Model)
OOHDM es una metodologa de desarrollo propuesta por Rossi y
Schwabe (ROSSI 1996) para la elaboracin de aplicaciones multimedia y
tiene como objetivo simplificar y a la vez hacer ms eficaz el diseo de
aplicaciones hipermedia.
Esta metodologa plantea el diseo de una aplicacin de este tipo a travs
de cinco fases que se desarrollan de un modo iterativo. Estas fases son:

Fase de Interfaz Abstracta

Fase de Implementacin
Fase Navegacional
Fase Conceptual

Caractersticas

Vistas de Navegacin.- Especifican como los objetos de informacin

deben agruparse cuando son explorados por un usuario en una
sesin de navegacin

Contextos de Navegacin.- Son abstracciones de agrupamiento para

organizar el espacio de navegacin.

Separacin de Intereses.- Esta separacin permite que los aspectos

conceptuales, de navegacin y de presentacin se encuentren
completamente separados entre s. Un lenguaje de consulta se utiliza
para conectar los diferentes modelos y puntos de vista.

Ventajas

Ventajas y
desventajas

Es dirigido por casos de uso.

Sus diagramas son realizados en UML.
Es una metodologa Orientada a Objetos.
Es tambin una de las metodologas web ms utilizada y difundida.

Desventajas

Excesivo enfoque en la navegacin y el diseo abstracto de la

interfaz.
No existe una herramienta que automatice la implementacin.

Diagrama de Proceso de OOHDM

Metodologa UWE
(UML-Based Web Engineering)
La metodologa UWE presentado por Koch y sus colegas, para el desarrollo
de aplicaciones Web, est fundada en un entorno Orientado a Objetos
utilizando para esto la notacin "ligera" de UML. UWE proporciona guas
para la construccin de modelos de forma sistemtica, enfocndose en
personalizacin y en estudio de casos de uso. Las actividades de modelado
principales son el anlisis de requerimientos, el diseo conceptual, el
diseo de navegacin y el diseo de presentacin, y producen los
siguientes modelos:

Modelo de Casos de Uso

Modelo Conceptual
Modelo de Navegacin
Modelo de Presentacin

Fases

Fase De Captura, Anlisis Y

Requisitos
Fase De Diseo Del Sistema
Fase De Codificacin Del Software
Fase de Pruebas
Fase de Implementacin
Fase de Mantenimiento

Especificacin

De

Caractersticas

El proceso de UWE alcanza todo el ciclo de vida de desarrollo de

aplicaciones web.
Est compuesto por 3 fases o etapas.
Se centra en el usuario en la etapa de la captura de requerimientos
Centra su atencin en aplicaciones Web personalizadas o
adaptativas.
En la fase de captura de requerimientos, hace la separacin entre
actividades de especificacin y validacin de requerimientos.
Utiliza UML extendido denominado UML Profile, para generar los
modelos propuestos en el proceso.

Diagrama de Proceso de UWE

Metodologa W2000
W2000 (Baresi, Garzotto & Paolini, 2001) supone una propuesta que
ampla la notacin de UML con conceptos para modelar elementos de
multimedia heredados de la propuesta HDM (Hypermedia Design Model)
(Garzotto, Schwabe & Paolini, 1993). El proceso de desarrollo de W2000
se divide en tres etapas:

Fase de Anlisis de requerimientos

Fase de Diseo de hipermedia
Fase de Diseo de los servicios
Fase de Actividades de personalizacin

Ventajas

Ventajas y
desventajas

Utilizacin de los requisitos de navegacin mostrando posibles navegacin de

cada actos
Utilizacin de los requisitos funcionales asociado cada rol y las interacciones
producidas en el sistema
Contempla los requisito navegacionales de personalizacin y transacciones

Desventajas

No garantiza informacin de la interfaz usuario

No evala la tcnica de captura de datos a necesitar
No contempla los requisitos de datos de interfaz al usuario y no funcionales
No maneja ningn mtodo para captura de requisitos
No maneja la validacin

Diagrama de Proceso de W2000

Metodologa AWE (gil Web Engineering)

Un proceso de desarrollo gil o cualquier otra metodologa que se utilice,
nicamente nos brindan una segunda oportunidad para afianzar el xito o
el fracaso del proyecto web. La meta principal de AWE (gil Web
Engineering) es satisfacer los objetivos del proyecto web sin dejar de
lado la documentacin, tcnicas y herramientas que lo hacen posible.
AWE es un proceso iterativo e incremental, permite una entrega rpida y
continua de versiones de software web, tiene la capacidad de manejar
eficientemente los cambios en los requerimientos incluso en etapas
avanzadas del desarrollo.

Fase de Anlisis del Negocio

Fase de Requerimientos
Fase de Diseo
Fase de Pruebas
Fase de Implementacin

Ventajas

Ventajas y
desventajas

En comparacin con otras metodologas no requiere q1ue se recaben

datos en entrevistas lluvia de ideas casos de uso o cuestionarios
El proceso de desarrollo se disminuya en tiempo ya que no se tienen
que hacer consultas
Es una metodologa que tiene como objetivo el dselo de la pgina o
sitio web a crear

Desventajas

Dado que se introduce los requerimientos de datos, interfaz,

navegacin, personalizacin, al usuario o usuarios pueden o no
gustarles el dselo
Usuarios renuentes al diseo
Incomodidad de interfaz

Diagrama de Proceso de AWE

Metodologa NDT
(Navigational Development Techniques)

NDT (Escalona, Mejias, Torres, & Reina, 2002) es una

propuesta metodolgica que se centra en las primeras
fases del ciclo de vida y ofrece un proceso para
especificar, analizar y disear los aspectos de
navegacin de la aplicacin.
NDT propone un proceso de desarrollo:

Fase de Captura y definicin de requisitos

Fase de Anlisis

Ventajas

Ventajas y
desventajas

Contempla los requisitos de almacenamiento de informacin funcional de iteracin y no

funcional
Ofrece una herramienta NDT-Tool que sirve como soporte en la aplicacin de sus tcnicas
Valida los requisitos si no son correctos se regresa a la etapa que tiene errores
Con los resultados de NDT se puede continuar el ciclo de vida con cualquier otra
metodologa
Se aplica una serie de revisiones para detectar errores

Desventajas

NDT no contempla las fases avanzadas del ciclo de vida de desarrollo de una aplicacin
web como podran ser implantacin o mantenimiento
NDT no ofrece nuevos leguajes de modelado
Se tiene que conocer los modelos antecesores a este ya que es basado en ellos
Es necesario que el analista despus de revisar si encuentra errores vuelva a la ingeniera
de requisitos
La fase de requisitos resulta mas compleja puesto que es mas detallada

Diagrama de Proceso de NDT

Metodologa DDDP
(Desegn-Drivem Requiriments Elicitaction)

Design-driven Requirements Elicitation es parte del proceso designdriven que proponen Lowe y Ekluind para el desarrollo de aplicaciones en
el entorno Web La propuesta consiste en realizar la captura, definicin y
validacin de requisitos durante el proceso de diseo. Ello hace
necesario que las actividades de diseo sean realizadas de modo que los
requerimientos pueden ser tratados y administrados.
la incertidumbre del cliente. El ciclo tiene tres fases: evaluacin,
especificacin y construccin. Este proceso fue definido sobre la base de
un exhaustivo anlisis de best practices en el desarrollo de
aplicaciones comerciales para el entorno Web.

Fases de Evaluacin
Fases de Especificacin
Fases de Construccin

Ventajas

Ventajas y
desventajas

los requerimientos son administrados por el usuario

el proceso basa en el uso de prototipos, participacin directa del cliente
el cliente revisa las soluciones
los requerimientos se basan en la solucin
identifica y define los actores

Desventajas

debido a que es muy repetitiva necesita est en constante comunicacin con el

usuario
Para definir los requerimientos primero se tienen que saber las soluciones de los
problemas
El cliente tiene una gran participacin en el proyecto y de no sr correcta puede
afectar y salirse del alcance del proyecto

Diagrama de Proceso de DDDP

Requerimientos tratados por cada metodologa

Herramientas CASE para la recoleccin de

requisitos
Caliber
es
completos que
la
alineacin
necesidades
colaboracin
visualizacin
trazabilidad de

una
solucin
requisitos
garantice el cumplimiento y
de
desarrollo
a
sus
de
negocio.Facilita
la
de
los
interesados,
la
rica,
slida
gestin
y
los requisitos.
Visure es una solucin de ciclo de vida de la
ingeniera de requisitos flexible y completo
capaz de racionalizar sus procesos de requisitos,
lo que permite una colaboracin ms eficaz,
aumentando la calidad, el apoyo a la captura de
requisitos, anlisis, especificacin, validacin y

CaseComplete es una gestin de requisitos de

aplicaciones de software que permite a Serlio
analistas de negocios y desarrolladores de
software para crear y gestionar los casos de
uso y requisitos de software .
RaQuest es una herramienta de gestin de
requisitos de modelado UML Enterprise
Architect herramienta (EA). Con RaQuest,
puede realizar un seguimiento de los cambios
de requisitos y gestionar los requisitos con
una serie de caractersticas. RaQuest es la

Herramientas CASE para la recoleccin de

prototipos
Es una herramienta , que bsicamente nos
permite realizar bocetos en este caso de
nuestras paginas Web , de una manera
sencilla y sin complicaciones, ya que cuenta
con
herramientas
que
contiene
los
elementos tpicos de una Web
Aplicacin para crear prototipos de diseo
interactivos los cuales se pueden presentar
a los clientes.

Herramientas CASE para diseo Web

Amaya es un editor web, es decir, una
herramienta
utilizada
para
crear
y
actualizar documentos directamente en la
Web. Buscar caractersticas se integran a
la perfeccin con las funciones de edicin y
de acceso remoto en un entorno uniforme.
Esuno de los mejores editores de
cdigo
para
la
Webque
existen
actualmente para Mac, una poderosa
herramienta para crear un sitio Web y
ponerlo en la red.

Conclusin
La aplicacin de principios de ingeniera
pueden evitar el caos potencial al que nos
enfrentamos, y poner bajo control el
desarrollo
de
las
aplicaciones
Web,
minimizando
riesgos
y
mejorando
el
mantenimiento y calidad.

GRACIAS