INGENIERÍA WEB

Dra. Ana Cori Morón

 CONTENIDO

• ARQUITECTURA DE CONTENIDO
• ARQUITECTURAS WEB
• DISEÑO DE LA NAVEGACIÓN
 DISEÑO ARQUITECTÓNICO

• El diseño arquitectónico para una aplicación web está ligado con el

contenido que se va a presentar, con los usuarios que la visitarán y con la
filosofía de navegación.
• El diseño de la arquitectura esta formada por la arquitectura del contenido y
la arquitectura de la aplicación web.
• En la mayoría de los casos el diseño arquitectónico se lleva a cabo en
paralelo con el de la interfaz, el estético y del contenido.
 ARQUITECTURA DE LA INFORMACIÓN

•  La arquitectura de contenido es la arquitectura de la información la cual es

el esqueleto de todo proyecto web.
• Louis Rosenfeld y Peter Morville, arquitectura de la información es el arte y
la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar
a los usuarios a manejar la información.
• Pilares de la arquitectura de la información, contexto del negocio,( objetivos
del negocio), el contenido (objetivos del contenido), nuestra audiencia (los
ususarios).
• Costo de no encontrar la información es muy alto.
 ARQUITECTURA DEL CONTENIDO

• Se centra en la presentación y navegación de los objetos de contenido.

• Define la estructura general de los hipermedios(objetos de contenido) de la aplicación
web. Según Pressman se pueden elegir entre cuatro distintas estructuras de
contenido, aunque en ocasiones se crean arquitecturas personalizadas.
• Estructuras lineales, estructuras de malla, estructuras jerárquicas, estructuras de red.
• La arquitectura de información ayuda en la organización, navegación y búsqueda de
contenido.
 ESTRUCTURAS LINEALES

• Es usado en casos de secuencia

predecible de interacciones.
• Por ejemplo los tutoriales,
primero muestran información
de prerrequisitos y luego
muestran imágenes, videos,
audios.
 ESTRUCTURA DE MALLA

• Es una opción que se utiliza cuando es posible

organizar el contenido de la aplicación web en forma
categórica en dos dimensiones.
• Por ejemplo considere un sitio electrónico que vende
palos de golf. La dimensión horizontal de la malla
representa el tipo de palo(material) y la dimensión
vertical representa las ofertas que hacen los
fabricantes de palos de golf.
 ESTRUCTURA JERARQUICA

• Existe un flujo de control horizontal y

vertical.
• El contenido presentado en la rama del
lado izquierdo de la jerarquía puede
tener vínculos que lleven directamente
al contenido que existe en la rama del
lado derecho.
• Permite una navegación rápida por el
contenido de la aplicación web pero
genera confusión para el usuario.
 ESTRUCTURA DE RED

• Los componentes arquitectónicos de la aplicación web

están conectados por medio de vínculos a cada
componente del sistema.
• Este enfoque permite gran flexibilidad en la navegación
pero al mismo tiempo confunde al usuario.
 ARQUITECTURA DE LA APLICACIÓN WEB

• Se encarga de administrar la interacción con el usuario, tareas de procesamiento

interno.
• Describe la infraestructura de la aplicación web que permita alcanzar los objetivos
empresariales .
• Las aplicaciones deben construirse con el empleo de capas en las que se tomen en
cuenta distintos problemas, deben separarse los datos de la aplicación de los
contenidos(nodos de navegación) y también deben separarse el aspecto y la
sensación de la interfaz(paginas).
 NIVELES DE ARQUITECTURA

Arquitectura de 2 NIVELES
(Anastopoulos and Romberg 2001), usa
un servidor web para proveer servicios
para un cliente.
Por ejemplo, petición de un cliente
directamente a las paginas sin requerir
ninguna lógica de procesamiento en la
capa del servidor.
Esta arquitectura es adecuada para
aplicaciones web sencillas.
 NIVELES DE ARQUITECTURA
• Arquitectura multinivel, requiere un enfoque
de arquitectura multicapa para aplicaciones
más exigentes que se accede con un gran
número de clientes simultáneos o que
proporcionan procesos de negocio complejos
que requieren el acceso a BD, entre otros.
• Por lo general constan de tres capas, la capa
de datos, proporcionando acceso a la datos
de la aplicación, la capa de negocio,
recibiendo la lógica empresarial de la
aplicación en un servidor de aplicaciones, y
finalmente la capa de presentación, que
hace que el resultado de la solicitud sea en
el formato de salida deseado.
 ARQUITECTURA MVC
• Los autores sugieren una
arquitectura de diseño en tres
niveles que separa la interfaz,
la navegación y el
comportamiento de la
aplicación.
• Modelo Vista Controlador:
planteada por Krasner y Pope,
separa la interfaz de usuario,
las funciones del usuario y el
contenido informativo.
• Para cada uno se hace su código independiente, esto garantiza la
mantenibilidad de la aplicación web en futuro.
 MODELO VISTA CONTROLADOR

• El modelo contiene todo el contenido y la lógica de procesamiento

específicos de la aplicación, acceso a fuentes de datos o información
externa especifica de la aplicación.
• La vista c0ntiene todas las funciones especificas de la interfaz del
usuario, todas las funciones permanentes que requiere el usuario final.
• El controlador administra el acceso al modelo y a la vista y coordina flujo
de datos entre ellos.
• En la aplicación web la vista es actualizada por el controlador con datos
del modelo, basándose en las entradas del usuario
 MODELO VISTA CONTROLADOR

• El controlador maneja las solicitudes del usuario, el controlador selecciona

el objeto de vista que sea aplicable en base a la solicitud del usuario,
determinado el tipo de solicitud, se transmite al modelo un pedido de
comportamiento que implementa la funcionalidad o recupera el contenido
requerido para acomodar a la solicitud, el objeto del modelo accede a una
BD, el objeto de vista apropiado debe dar formato y organizar los datos
desarrollados por el modelo para luego trasmitirlos desde el servidor de la
aplicación hacia el navegador del usuario.
 DISEÑO DE LA NAVEGACIÓN

• Una vez definidos los componentes (paginas, textos, u otras

funciones de procesamiento) se continua con la definición de las
rutas de navegación las cuales permiten a los usuarios acceder al
contenido y a las funciones de las aplicación web.
• Para lograr esto se debe hacer lo siguiente:
• Identificar la semántica de navegación para los distintos usuarios.
• Definir la mecánica (sintaxis) para efectuar la navegación
 SEMÁNTICA DE LA NAVEGACIÓN

• Considera la jerarquía del usuario y los casos de uso relacionados.

• Cada actor puede usar la aplicación web en forma algo diferente de acuerdo
a los distintos requerimientos.
• A medida que cada usuario interactúe con la aplicación web, encuentra
una serie de Unidades Semánticas de Navegación(USN).
• Las USN son un conjunto de estructuras de información y navegación que
colaboran con el cumplimiento de un subconjunto de requerimientos del
usuario relacionado.
 SEMÁNTICA DE LA NAVEGACIÓN

• Una USN esta compuesta por un conjunto de elementos de navegación

llamados Formas de Navegar(FdN), que representan la mejor ruta de
navegación para llegar a la meta de un tipo de usuario específico.
• Cada FdN esta organizada como un conjunto de nodos de navegación
(NN).
 SINTAXIS DE NAVEGACIÓN
Define la mecánica de navegación:
•Vinculo de navegación individual: son los vínculos basados en texto,
iconos, botones, gráficos.
•Barra de navegación horizontal: enlista las categorías principales de
contenido. En general se enlistan entre 4 y 7 categorías.
•Columna de navegación vertical: enlista las categorías principales de
contenido. Las columnas de navegación pueden expandirse.
•Pestañas: los mismo que la barra o columna de navegación vertical.
•Mapa del sitio: es una tabla de contenido que incluye todo el contenido
con el fin de navegar hacia todos los objetos.
 SINTAXIS DE NAVEGACIÓN

• Para la navegación basada en texto debe utilizarse color que indique

aquellos vínculos de navegación recorridos .
CREACION DE USN
 Bibliografía

• Pressman, Ingenieria de software

• Pressman, Engineering web