Modelado

Conceptual de
aplicaciones Web

MSC –agosto/diciembre 2023

h"ps://www.internetworldstats.com/stats.htm
Si#os
h"ps://www.downgraf.com/inspira3on/web-designer-vs-
web-developer-infographic/

h"ps://www.webfx.com/blog/web-design/web-designers-
vs-web-developers-infographic/

h"ps://www.youtube.com/watch?v=3STKQtwupKE
Planteamiento del problema

Gran impacto en muchos

• El crecimiento de la
Crecimiento y desarrollo ámbitos de la sociedad
Web, como medio de
de Internet en general y (banca, comercio,
aplicación, ha sido
de la Web en par5cular negocios, industria,
exponencial y muy rápido
educación, etc.)

Avances de las
Muchas de las
tecnologías wireless y su Mayor dependencia de
aplicaciones tradicionales
conexión con Internet las aplicaciones web cada
están siendo migradas
están dando lugar a una vez más complejas y
total o parcialmente para
nueva generación de crí5cas
tener acceso a la Web
aplicaciones Web móviles
Ingeniería Web

En el enfoque de
Uno de los principales El enfoque de
ingeniería, el
beneficios del enfoque ingeniería es una
desarrollo de
de ingeniería es que metodología efec5va
aplicaciones web se
permite la para el desarrollo de
trata como un proceso
construcción de aplicaciones web. Al
sistemá5co y
aplicaciones escalables seguir un proceso
disciplinado. Esto
y mantenibles. Al sistemá5co y u5lizar
significa que se sigue
seguir un proceso herramientas y
un conjunto de pasos
definido, se pueden tecnologías adecuadas,
definidos para
iden5ficar y resolver se puede asegurar que
asegurar que la
problemas antes de la aplicación se
aplicación se construya
que se conviertan en construya de manera
de manera eficiente y
grandes obstáculos. eficiente y efec5va.
efec5va.
Evaluación

Punto a evaluar Porcentaje

Desarrollo de proyecto Web 50

Examen de conocimientos 10

Tareas 20

Investigaciones y presentaciones en clase 20

Unidad I
1.El enfoque de ingeniería en el
desarrollo de aplicaciones
Web
2.Consideraciones previas
3.Diferencias en el desarrollo de
aplicaciones Web
4.Ingeniería Web
5.Métodos para la ingeniería
Web
El enfoque de ingeniería en el
desarrollo de aplicaciones Web

• En el enfoque de ingeniería, el desarrollo de

aplicaciones web se trata como un proceso sistemáAco y
disciplinado. Esto significa que se sigue un conjunto de
pasos definidos para asegurar que la aplicación se
construya de manera eficiente y efecAva.
• Uno de los principales beneficios del enfoque de
ingeniería es que permite la construcción de
aplicaciones escalables y mantenibles. Al seguir un
proceso definido, se pueden idenAficar y resolver
problemas antes de que se conviertan en grandes
obstáculos.
Diferencias en el desarrollo de aplicaciones
Web
• Desarrollo tradicional vs. Desarrollo ágil: El desarrollo tradicional sigue un
proceso secuencial y rígido, mientras que el desarrollo ágil es más flexible y se
enfoca en la colaboración y la entrega temprana de funcionalidades.
• Enfoque de ingeniería vs. Enfoque de programación: El enfoque de ingeniería se
enfoca en el proceso sistemá@co y disciplinado, mientras que el enfoque de
programación se enfoca en la codificación y en la resolución de problemas a
medida que surgen.
• Desarrollo Front-end vs. Desarrollo Back-end: El desarrollo front-end se enfoca en
la interfaz de usuario y la experiencia del usuario, mientras que el desarrollo
back-end se enfoca en la lógica de negocio y la ges@ón de datos.
• Desarrollo Monolí@co vs. Desarrollo basado en microservicios: El desarrollo
monolí@co implica construir una aplicación como una sola unidad, mientras que
el desarrollo basado en microservicios implica dividir la aplicación en pequeños
servicios independientes que se comunican entre sí.
• En conclusión, existen varias diferencias en el desarrollo de aplicaciones web, y la
elección del enfoque adecuado dependerá de las necesidades y obje@vos
específicos del proyecto.
Lectura de arKculo Web Engineering: Resumen
Diferencias entre
desarrollo web y
aplicaciones de escritorio
(análisis en clase tarea )
Web
The Web has become an indispensable technology for
business, commerce, communication, education, engineering,
entertainment, finance, government, industry, media,
medicine, politics, science, and transportatio to name just a
few areas that impact your life.
But being an “indispensable technology” only scratches the
surface of the Web’s impact on each of us.
It has changed the ways in which we buy products (e-
commerce), meet people (online dating), understand the
world (portals), acquire our news (online media), voice our
opinions (blogs), entertain ourselves (everything from music
downloads to online casinos), and go to school (online
learning).
• The conversa,on between you and a Web
applica,on can be passive or ac,ve.
• In a passive conversa,on, you select the
informaAon that is to be presented, but have
no direct control over its volume, type, or
structure.
• In an ac,ve conversa,on, you provide input
so that the informaAon that is presented is
customized to meet your needs specifically.
• When a WebApp is combined with client
and server hardware, opera,ng systems,
network so=ware, and browsers, a Web-
based system emerges
In the early days of the World Wide Web (circa 1990 to 1995),
“websites” consisted of liIle more than a set of linked
hypertext files that presented informaMon using text and
limited graphics.
As Mme passed, Hypertext Markup Language (HTML) was
augmented by development tools and technologies [e.g.,
Extensible Markup Language (XML), Java] that enabled Web
engineers to provide both client-side and server-side
compuMng capability along with content.
Web-based systems and applicaMons were born. Today,
WebApps have evolved into sophisMcated compuMng tools
that not only provide stand-alone funcMonality to the end
user, but also have been integrated with corporate and
governmental databases and applicaMons.
A"ributes are encountered in the
vast majority of WebApps
 cide with the introduction of a new line of security sensors and a set of radically
new Web-based services. They want your help in the development of the WebApp,
which is called SafeHomeAssured.com, and at the same time for you to assist them as
they create new Web services that will increase their market share.

Caso ejemplo
You have been asked to attend a meeting in which basic ideas are discussed.
During the meeting you learn that CPI has engineered a compact, wireless sensor-
controller that will become the core element in a new line of commercial and resi-
dential security systems that it intends to call SafeHome. A snippet of conversation 4 CHAPTER 1 WEB -BASED SYSTEMS

from the meeting is depicted in the sidebar.

S AFE H OME S AFE H OME (CONTINUED)

A Project Begins
The scene: Meeting room at CPI
Corporation, a (fictional) company
that makes consumer products for home and commer-
cial use
The players: A senior business manager; a product
development manager; a marketing manager; an
engineering manager; and you, the Web engineering
expert
The conversation:
Business manager (to product manager):
Okay, what’s this I hear about your folks developing
a what? A generic universal wireless box?
Product manager: It’s pretty cool . . . about the
size of a small matchbook . . . we can attach it to sen-
sors of all kinds, a digital camera, just about anything
using an IEEE wireless protocol. It allows us to access
the device without wires. We think it’ll lead to a whole
new generation of products.
Business manager (looking at the marketing
manager): You agree?
Marketing manager: I do. In fact, with sales as
flat as they’ve been this year, we need something new.
We’ve been doing a little market research, and we
think we’ve got a line of products and services that
could be big.
Business manager: How big . . . bottom line big?
Marketing manager: It’s a whole new generation
of what we call “home management products.” We
call ’em SafeHome. They use the new wireless inter-
face, provide homeowners or small-business people
with a system that’s controlled by their PC via the
Internet—home security, home surveillance, appliance
and device control—you know, turn down the home
air conditioner while you’re driving home, that sort of
thing. We’re also thinking about video monitoring and
control within a house or business. Just as important,
we intend to vertically integrate the product into our
monitoring services, allowing customers to access their
account via the Web and determine things like when
the system is armed or disarmed, what “events” have
occurred over a defined time period . . . things like
that. We also intend to do most of our maintenance
diagnostics via the Web.
Product manager: Engineering’s done a techni-
cal feasibility study of these ideas. They’re doable at
relatively low cost. Most hardware is off-the-shelf. Soft-
ware for the Web is an issue, but it’s nothing that we
can’t get done. We already registered a domain . . .
SafeHomeAssured.com.
[All CPI managers look directly at you and smile.]
Business manager: Interesting. Now, I asked
about the bottom line.
(continued)
Marketing manager: PCs have penetrated a huge Revenue? Maybe as much as $30 to $40 million in
percentage of all households in the United States. If the second year.
we could price this thing right, it could be a killer-App. Business manager (smiling broadly): Let’s take
Nobody else has our wireless box . . . it’s propri- this to the next level. I’m interested.
etary. We’ll have a 2-year jump on the competition.
And so, a project begins. You’ll notice that there are few details at this stage. Many
things need to be defined, specified, and then implemented. The internal percep-
tion of the product will change, along with the Web-based system that will support
it. But that really doesn’t matter at this early stage. SafeHome has the support of
senior management (who see significant profit potential), and you have an oppor-
tunity to be one of the team that will get the job done.
We’ll return to SafeHome and the SafeHomeAssured.com WebApp repeatedly
throughout this book, using the project as a case study for describing many as-
pects of Web engineering. But for now, let’s return to our introductory discussion
of WebApps and examine their similarity to conventional computer software.
Are WebApps Really Computer Software?
There’s really no debate here—WebApps are computer software in the sense that
they are a collection of executable instructions and data that provide both in-
formation and functionality for end users. The implication, therefore, is that it’s
reasonable to expect that we can develop WebApps by heeding some, if not all,
of the lessons we’ve learned during the many decades we’ve built conventional
computer-based systems. It’s also reasonable to assume that we’ll encounter many,
if not all, of the problems (both cultural and technical) that we experienced during
 Cada WebApp reside en una red y debe atender las necesidades
de una comunidad diversa de clientes.
Intensidad de la
En el caso del producto Safe-Home,2 muchas de las nuevas
red. caracterís3cas que implementará CPI se iniciarán, controlarán
y/o supervisarán a través de la Web. (caso ejemplo)
La red permi3rá la comunicación entre las caracterís3cas
basadas en el cliente de la aplicación web
SafeHomeAssured.com y los servidores establecidos por CPI.
 Concurrencia.
Un gran número de usuarios pueden acceder a la
WebApp a la vez.
En muchos casos, los patrones de uso entre los
usuarios finales variarán mucho.
En algunos casos, las acciones de un usuario o de un
conjunto de usuarios pueden tener un impacto en las
acciones de otros usuarios o en la información
presentada a otros usuarios.
En el caso de SafeHomeAssured.com, decenas de
miles de hogares serán supervisados
simultáneamente, cientos o miles de clientes pueden
acceder a la WebApp en cualquier momento, y
docenas de técnicos de servicio también pueden estar
en línea.
 Carga impredecible.
El número de usuarios de la WebApp puede variar por
órdenes de magnitud de un día a otro.
En el caso de SafeHomeAssured.com, el número de
hogares y negocios que son monitoreados cambiará
lentamente.
Pero la WebApp debe ser capaz de manejar un número
indeterminado de eventos simultáneamente (por
ejemplo, alarma anArrobo, detección de incendios,
detección de monóxido de carbono).
El lunes, se podrían informar de 10 eventos por hora. El
martes, se pueden registrar 100 eventos, y el miércoles
(después de que una región sufra un corte de energía
importante) se pueden reportar miles de eventos por
minuto.
Performance.
Si un usuario de WebApp debe esperar
demasiado tiempo (para el acceso, para el
procesamiento del lado del servidor, para el
formato y la visualización del lado del
cliente), puede decidir ir a otro lugar.
En el caso de SafeHomeAssured.com, el
rendimiento es fundamental, ya que la vida
humana puede estar en juego. Si la
WebApp responde demasiado lentamente
a un evento, puede producirse un litigio.
 Disponibilidad.

Aunque una expectaAva de disponibilidad del 100

por ciento es insoportable, los usuarios de
aplicaciones web populares a menudo exigen
acceso de forma "24/7/365".
En el caso de SafeHomeAssured.com, la
disponibilidad del 100 por ciento es el objeAvo y,
dado que el sistema Aene que ver con la
seguridad del hogar, la WebApp debe estar
diseñada para lograr este ideal (o algo muy
parecido a él).
Impulsada por datos.

La función principal de muchas aplicaciones web es

uElizar hipermedia para presentar contenido de
texto, gráficos, audio y vídeo al usuario final.
En publicidad, las aplicaciones web se uElizan
comúnmente para acceder a la información que
existe en bases de datos que no son una parte
integral del entorno basado en la web (por ejemplo,
comercio electrónico o aplicaciones financieras).
En el caso de SafeHomeAssured.com, todos estos
atributos serán evidentes. Además, la WebApp debe
crear una base de datos que contenga información
sobre cada cliente; la configuración del sistema que
Eene el cliente; y los requisitos de supervisión para
ese sistema, un registro de eventos y un registro de
mantenimiento.
Contenido
sensible.
La calidad y la naturaleza estéEca del contenido sigue siendo un
determinante importante de la calidad de una WebApp.
En el caso de SafeHomeAssured.com, una clase de usuario importante para
la WebApp serán los "civiles", es decir, las personas no técnicas que exigen
una presentación de contenido simple pero significaEva.
Evolución
A diferencia del software de aplicaciones convencional que evoluciona a lo largo de una serie
de versiones planificadas y cronológicamente espaciadas, las WebApps evolucionan
continuamente.

con+nua. No es raro que algunas aplicaciones web (específicamente, su contenido) se actualicen en un

horario minuto a minuto o que el contenido se calcule de forma independiente para cada
solicitud.
La aplicación web SafeHomeAssured.com evolucionará a medida que la percepción del
sistema cambie con el tiempo. La evolución de la WebApp exigirá un enfoque "incremental"
para su desarrollo.
 Inmediatez.
Aunque la inmediatez, la necesidad apremiante de llevar el
so_ware al mercado rápidamente, es una caracterísAca de
muchos dominios de aplicación, las aplicaciones web a
menudo exhiben un Aempo de comercialización que puede
ser cuesAón de unos pocos días o semanas.
Los ingenieros web deben uAlizar métodos de
planificación, análisis, diseño, implementación y pruebas
que se han adaptado a los horarios comprimidos
requeridos para el desarrollo de aplicaciones web.
En el caso de SafeHomeAssured.com, la gesAón del IPC se
centra en un aumento de los ingresos a corto plazo y en los
ingresos significaAvos a medio plazo. Cuando esto ocurre,
la aplicación web es necesaria "ayer".
Seguridad.

Debido a que las WebApps están disponibles a través

del acceso a la red, es diOcil, si no imposible, limitar
la población de usuarios finales que pueden acceder
a la aplicación.
Para proteger el contenido confidencial y
proporcionar modos seguros de transmisión de
datos, se deben implementar fuertes medidas de
seguridad en toda la infraestructura que soporta una
aplicación web y dentro de la aplicación misma.
En el caso de SafeHomeAssured.com, la información
fluye dentro y fuera de los hogares y negocios de las
personas, lo que convierte a la aplicación web en un
objeEvo perfecto para quienes Eenen intenciones
delicEvas. ¡Será mejor que esté seguro!
 EstéAca.
Una parte innegable del atrac,vo de una
WebApp es su aspecto y sensación. Cuando
una aplicación ha sido diseñada para
comercializar o vender productos o ideas o
proporcionar servicios que generen ingresos,
la esté,ca puede tener tanto que ver con el
éxito como con el diseño técnico.
En el caso de SafeHomeAssured.com, la
mul,plicidad de contenido y funciones que
proporcionará la WebApp exige que su
presentación sea simple y elegante. La esté,ca
es un elemento clave para la aceptación del
sistema.
Ac#vidad
• Describe las características de tu WebApp que deben ser implementadas
de forma textual, por ejemplo:

• Información sobre la empresa (quiénes son? Dónde están?, etc) y sus

productos y personas
• Especificaciones para todos los componentes de hardware de
seguridad, incluyendo imágenes, descripciones técnicas,
instrucciones de instalación, precios y otra información pertinente
• Asistencia en el diseño del sistema de seguridad que permite a un
cliente especificar un espacio residencial o comercial (por ejemplo,
habitaciones, puertas, ventanas) y luego obtener asistencia de diseño
semiautomatizada para un sistema de seguridad
• Capacidad de comercio electrónico que permite a un cliente pedir
hardware de seguridad y servicios de monitoreo. Esta capacidad se
acoplará a los sistemas de trastienda que admiten la compra de un
cliente.
 FIGURE 1.1
Attributes
WebApp
attributes and Network intensive
categories. Concurrent
Unpredictable loading
Performance sensitive
High availability
Categories
Data driven
Content sensitive Informational
Continuous evolution Download
Immediacy Customizable
Security Interaction
Aesthetics WebApp User input
Transaction-oriented
Service-oriented
Portals
Database access
Data Warehousing

that will lead to the evolution of SafeHomeAssured.com. WebApp attributes and c

 Categorías de las aplicaciones web

Categoría Ejemplos
De información Periódicos en línea, catálogos de
productos, libros electrónicos en línea…
Interactivas Formularios de registro, presentación de
Categorías de información personalizada, juegos en
línea…
las Transaccionales
Workflow
Compra electrónica, banca electrónica…
Sistemas de planificación en línea,
aplicaciones gestión de inventario, monitorización de
estado…
web Entornos de trabajo cooperativo Sistemas de autor distribuido,
herramientas de diseño colaborativas…
Comunidades en línea, marketplaces Grupos de chat, sitios que recomiendan
productos o servicios, marketplaces en
línea, subastas en línea…
Portales web Centros comerciales, intermediarios en
línea…

(Ginige y Murugesan, 2001)

Máster Universitario en Sistemas Inteligentes

 Sistemas web simples vs avanzados

Sistemas web Simples Sistemas web Avanzados

Fundamentalmente presentan Páginas webs complejas
información textual
Los contenidos de información no La información es dinámica, cambia con
Sistemas cambian, son estáticos el tiempo y las necesidades de los
usuarios

web simples Navegación simple Dificultad para navegar y encontrar la

información

vs avanzados Sistemas aislados Sistemas integrados con bases de datos,

No requieren un alto rendimiento
Desarrollados por una sola persona o
por un grupo reducido
Se utilizan para distribuir información
en aplicaciones no críticas
sistemas de planificación…
Requieren un rendimiento alto y
disponibilidad continua
Requieren grandes grupos de desarrollo
con experiencia en diversas áreas
Se emplean en aplicaciones con
cometidos críticos

(Ginige y Murugesan, 2001)

Máster Universitario en Sistemas Inteligentes 36

¿Qué es la Ingeniería Web?
La ingeniería web propone un marco ágil, pero
disciplinado, para la construcción de aplicaciones web
de calidad industrial. Esto parece bastante simple,
pero es muy importante que entiendas dos palabras
clave en nuestra respuesta: ágil y marco.

Un equipo ágil es capaz de responder adecuadamente a los
cambios.
Cambios en el so8ware que se está construyendo, cambios
en los miembros del equipo, cambios debido a la nueva
tecnología, cambios de todo >po que pueden tener un
impacto en el producto que construyen o en el proyecto
que crea el producto.
Un equipo ágil reconoce que el so8ware es desarrollado
por personas que trabajan en equipos y que las habilidades
de estas personas, su capacidad para colaborar, son el
núcleo del éxito del proyecto.
Un marco sienta las bases para un proceso
completo de ingeniería web al iden>ficar un
pequeño número de ac>vidades del marco
que son aplicables a todos los proyectos de
WebApp, independientemente de su tamaño
o complejidad. Además, el marco abarca un
conjunto de ac>vidades generales que son
aplicables en todo el proceso de WebE.
 Las siguientes ac,vidades de WebE forman parte de un marco
genérico y se aplican a la gran mayoría de los proyectos de WebApp:

Comunicación Planeación Modelado Construcción Despliegue

Involucra un fuerte lazo Se establece un plan Abarca la creación de Combina la generación de Entrega un incremento de
con el cliente y otros incremental para el modelos que ayudan al HTML, XML, Java y código WebApp al cliente que lo
stakeholders y abarca la trabajo de la WebE. desarrollador y al cliente a similar con las pruebas evalúa y proporciona
recopilación de requisitos Dónde describe las comprender mejor los necesarias para descubrir comentarios basados en
y otras ac9vidades acciones que se deben requisitos de WebApp y el errores en el código. la evaluación.
necesarias. realizar, así como deben diseño que alcanzará esos
ser conducidas las tareas requisitos.
técnicas, los recursos
requeridos, productos
trabajados o que se deben
producir y un calendario
de trabajo.
 FIGURE 2.1
A WebE process
WebE process
framework.
Process framework
Umbrella activities
Framework activity 1
Web engineering action 1.1
Work tasks
Set of tasks Work products
Quality assurance points
Project milestones

•••
Web engineering action 1.k
Work tasks
Set of tasks Work products
Quality assurance points
Project milestones

•••
Framework activity n
Web engineering action n.1
Work tasks
Set of tasks Work products
Quality assurance points
Project milestones

•••
Web engineering action n.m
Work tasks
Set of tasks Work products
Quality assurance points
Project milestones

risks that are likely, the resources that will be required, the work products t
Métodos para la ingeniería Web
 PTER 2 WEB ENGINEERING

Tools LOS MÉTODOS DE LOS MÉTODOS ESTOS MÉTODOS SE LAS HERRAMIENTAS

INGENIERÍA DE ABARCAN UNA BASAN EN UN DE INGENIERÍA DE
SOFTWARE AMPLIA GAMA DE CONJUNTO DE SOFTWARE
Methods PROPORCIONAN LAS
INSTRUCCIONES
ACCIONES Y TAREAS
QUE INCLUYEN
PRINCIPIOS BÁSICOS
QUE RIGEN CADA
PROPORCIONAN
SOPORTE

Process
TÉCNICAS PARA COMUNICACIÓN, ÁREA DE LA AUTOMATIZADO O
CONSTRUIR ANÁLISIS DE TECNOLOGÍA E SEMIAUTOMATIZADO
SOFTWARE. REQUISITOS, INCLUYEN PARA EL PROCESO Y
MODELADO DE ACTIVIDADES DE LOS MÉTODOS.
A quality focus DISEÑO, MODELADO Y OTRAS CUANDO LAS
CONSTRUCCIÓN DE TÉCNICAS HERRAMIENTAS SE
PROGRAMAS, DESCRIPTIVAS. INTEGRAN PARA QUE
PRUEBAS Y APOYO. LA INFORMACIÓN
CREADA POR UNA
HERRAMIENTA

Software engineering methods provide the technical how-to’s for building

PUEDA SER UTILIZADA
POR OTRA, SE
ESTABLECE UN
ware. Methods encompass a broad array of actions and tasks that include ENTORNO
AUTOMATIZADO
PARA EL APOYO DE LA
mmunication, requirements analysis, design modeling, program construction, INGENIERÍA DE
SOFTWARE.

ing, and support. These methods rely on a set of basic principles that govern
Actividad.
Presentación de artículos.