Facultad de Ingeniería de Sistemas

Ingeniería Web

Ing. José L. Galindo H.

Ing. José L. Galindo H.

 4
Los modelos
arquitectónicos
aplicados a Sistemas
Web.

Sección Cuarta
Ing. José L. Galindo H.
 Temas a tratar
 1.Calidad de sitio Web
 2.Diseño de Aplicación Web
 3. Modelos arquitectónicos

Ing. José L. Galindo H.

 1.Calidad de Aplicación
Web
 Requisitos de Calidad de la aplicación Web
 Facilidad de Uso
o Comprensibilidad global del sitio
o Características de retroalimentación en línea y ayuda
o Características de la interfaz y estética
o Características especiales
 Funcionalidad
o Capacidades de búsqueda y recuperación
o Características de navegación y visualización
o Características de la aplicación relacionadas con el dominio
 Confiabilidad
o Correcto procesamiento de vínculos
o Recuperación de errores
o Validación y recuperación de entrada de usuario
 Eficiencia
o Desempeño de tiempo de respuesta
o Rapidez de generación de página
o Rapidez de generación de gráficos
 Facilidad de mantenimiento
o Fácil de corregir
o Adaptabilidad
o Extensibilidad
 1.Calidad de Aplicación
Web
 Atributos de calidad para las WebApps
 Seguridad
 Disponibilidad
 Escalabilidad
 Tiempo en el mercado
 1.Diseño Aplicaciones Web

 Metas de Diseño
 Simplicidad
 Consistencia
 Identidad
 Robustez
 Navegabilidad
 Apariencia visual
 Compatibilidad
 1.Diseño Aplicaciones Web

 Niveles del Diseño Web

 Diseño de la Interfaz.
 Diseño estético
 Diseño del contenido
 Diseño de Navegación
 Diseño Arquitectónico
 Diseño de Componentes
 1.Diseño Aplicaciones Web

 Niveles del Diseño

Web
 Diseño de la Interfaz.
Describe la estructura
y organización de la
interfaz del usuario.
Incluye una
representación de la
plantilla de pantalla,
una definición de los
modos de interacción
y una descripción de
los mecanismos de
navegación
 1.Diseño Aplicaciones Web

 Niveles del Diseño Web

 Diseño Estético. También
llamado diseño gráfico,
describe la “apariencia y
seguimiento” de la
WebApp. Incluye esquema
de color plantilla
geométrica, tamaño de
texto, fuente y ubicación,
uso de gráficos y
decisiones estéticas
relacionadas
 1.Diseño Aplicaciones Web

 Niveles del Diseño

Web
 Diseño de Contenido.
Define la plantilla, la
estructura, el bosquejo
de todo de contenido
que se presenta como
parte del WebApp.
Establece relaciones
entre objetos de
contenido
 1.Diseño Aplicaciones Web

 Niveles del Diseño

Web
 Diseño de Navegación.
Representa el flujo de
navegación entre los
objetos de contenido y
para todas las
funciones de la
WebApp.
 1.Diseño Aplicaciones Web

 Niveles del Diseño

Web
 Diseño Arquitectónico.
Identifica la estructura
hipermedia global para
la WebApp.
 1.Diseño Aplicaciones Web

 Niveles del Diseño

Web
 Diseño de
Componentes.
Desarrolla la lógica de
procesamiento
detallado que se
requiere para
implementar
componentes
funcionales.
 3. Modelo Arquitectónico de una aplicación
Web

 Las aplicaciones deben construirse con el uso de capas

en las que se tome en cuenta las diferentes
preocupaciones; en particular, los datos de la aplicación
se deben separar de los contenidos de la página ( nodos
de navegación), y dichos contenidos, a su vez, deben
estar claramente separados de la apariencia y la
percepción de la interfaz.(Jacyntho y sus colegas.)
 3. Modelo
Arquitectónico

 Arquitectura de comercio
electrónico.
-Arquitectura de dos niveles
-Arquitectura de Multinivel.
 3. Modelo Arquitectónico de una aplicación
Web

 El Modelo Vista
Controlador (MVC).
 Es uno de los modelos de
infraestructura de
WebApp sugeridos para
desacoplar la interfaz del
usuario de la
funcionalidad y el
contenido de información
de la WebApp.
 3. Modelo Arquitectónico de una aplicación
Web

 El Modelo Vista
Controlador (MVC).
 El modelo contiene todo el
contenido especifico de la
aplicación y la lógica de
procesamiento, e incluye
todos los objetos de
contenido, el acceso a
fuentes de datos/información
externas y toda la
funcionalidad de
procesamiento que son
específicos de la aplicación
 3. Modelo Arquitectónico de una aplicación
Web

 El Modelo Vista
Controlador (MVC).
 La vista contiene todas las
funciones especificas de la
interfaz y habilita la
presentación del contenido y
la lógica del procesamiento,
e incluye todos los objetos
del contenido, acceso a
fuentes de datos/información
externas y a toda la
funcionalidad de
procesamiento requerida por
el usuario final.
 3. Modelo Arquitectónico de una aplicación
Web

 El Modelo Vista
Controlador (MVC).
 El controlador gestiona el
acceso al modelo y a la
vista y coordina el flujo de
datos entre ellos.
 En una WebApp, “ la vista
actualiza el controlador
con los datos provenientes
del modelo con base en la
entrada del usuario ”
 Modelos Arquitectónicos
 Frameworks de la arquitectura empresarial
 DoDAF (The Department of Defense
Architecture Framework)
 Gartner (formerly Meta Group)
 TOGAF
 Zachman
 Modelos Arquitectónicos
 DoDAF(The Department of Defense Architecture
Framework)
 Define la forma común para la arquitectura del DoD,
descripción, desarrollo, presentación e integración de
operaciones militares y los procesos de operaciones y
negocios.
 Este framework propone asegurar que las descripciones de
la arquitectura pueden ser comparados y relacionados a
los largo de los limites organizacionales, incluyendo limites
multinacionales.
 Tres vistas relacionadas a la arquitectura
o Vista Operacional
o Vista de Sistema
o Estándares Técnicos
 Modelos Arquitectónicos
 Operational View. Contiene la
descripción de las tareas y
actividades, elementos
operacionales e intercambios
de información requerida
para el cumplimiento de la
misión.

 System VIew. Contiene un

conjuntos de gráficos y
plantillas que describen el
sistema y las interconexiones
proveyendo para el soporte a
las funciones DoD.

 Technical Standars. Contiene

un conjunto de reglas de
gobierno ordenado,
interacciones y
interdependencia de partes o
elementos del sistema
 Modelos Arquitectónicos
 TOGAF(The Open Group
Architecture Framework)
 TOGAF es un framework de
Arquitectura. TOGAF provee
los métodos y herramientas
para ayudar en la aceptación,
producción, uso y
mantenimiento de la
arquitectura empresarial.
Basado en un modelo de
proceso interactivo soportado
por las mejores prácticas y un
conjunto reusable de
arquitecturas existentes.
 Modelos Arquitectónicos
 TOGAF soporta cuatro tipos de
arquitecturas.
 The Business Architecture. Define la
estrategia de negocio, gobernabilidad,
organización, y los factores críticos para
el negocio
 The Data Architecture. Describe la
estructura de la Organización lógica y
física de la data y la administración de
los recursos de información.
 The Application Architecture. Provee la
información de una aplicación, para ser
desplegada, sus interacciones, y sus
relaciones con los procesos principales
de negocio y la organización.
 The Technology Architecture. Describe
las capacidades lógicas del software y el
hardware que son necesarias para
soportar el despliegue del negocio, data
y servicios de aplicación. Incluye la
infraestructura de IT, capas intermedias,
redes, comunicaciones, procesamiento,
estándares, etc.
 Modelos Arquitectónicos
 TOGAF.
Ciclo de vida.
 Modelos Arquitectónicos
 Zachman Framework.
 Se vuelve en un estándar importante para clasificar los
artefactos desarrollados en una arquitectura empresarial.
Es una estructura lógica para la clasificación y organización
de los artefactos de diseño en una empresa que son
significantes para su administración.
 Expresa en un fundamento de clasificación de esquemas en
la disciplina de la Arquitectura/Construcción y
Ingeniería/Manufactura, usado para la clasificación y
organización del diseño de artefactos relacionado a
complejos productos físicos como un edificio o un avión.
Zachman adopta este esquema de clasificación para el
diseño y la construcción de sistemas de información
 Modelos Arquitectónicos
 Zachman Framework. Los seis puntos
importantes son:

 1. The Scope (Contextual)

Viewpoint - aimed at the Planner

 2. The Business Model

(Conceptual) Viewpoint - aimed at
the Owner

 3. The System (Logical) Viewpoint -

aimed at the Designer

 4. The Technology (Physical)

Viewpoint - aimed at the Builder

 5. The Detailed Representations

(Out-of-Context) Viewpoint - aimed
at the Subcontractor

 6. The Functioning Enterprise

Viewpoint
 Modelos Arquitectónicos
 Zachman Framework. Cada
uno de los puntos de vista
responden a las interrogantes:
 1. The Data aspect -
What?
 2. The Function aspect -
How?
 3. The Network aspect -
Where?
 4. The People aspect -
Who?
 5. The Time aspect -
When?
 6. The Motivation aspect -
Why?