UNIVERSIDAD NACIONAL DE SAN AGUSTÍN DE AREQUIPA

FACULTAD DE INGENIERÍA DE PRODUCCIÓN Y SERVICIOS

SEGUNDA ESPECIALIDAD EN INGENIERÍA INFORMÁTICA

CURSO:
DISEÑO DE APLICACIONES WEB

TEMA:
“MODELADO DE DISEÑO PARA APLICACIONES WEB”
ING. JOSE HERRERA

INTEGRANTES:
YRMA LIDIA DELGADILLO MEDINA
RENZO DE LA GALA GAMARRA
VICTOR YUCRA NÚÑEZ
 
AREQUIPA – PERÚ
2010
MODELO DE DISEÑO PARA APLICACIONES WEB

Jakob Nielsen, afirma: “En esencia, existen dos enfoques básicos del diseño:
el ideal artístico de expresarse uno mismo y el ideal de ingeniería de
resolver un problema para un cliente”.
 ¿QUÉ ES?
El diseño de WebApps abarca actividades técnicas y otras que no son, la
visión y el sentido del contenido se desarrollan como parte del diseño
gráfico.
 ¿QUIÉN LO HACE?
Los ingenieros Web, diseñadores gráficos, desarrolladores de contenido y
otros participantes colaboran en la creación.
 ¿POR QUÉ ES IMPORTANTE?
El diseño permite a un ingeniero Web crear un modelo que puede valorarse
en calidad y mejorarse antes de que se generen el contenido y el código.
MODELO DE DISEÑO PARA APLICACIONES WEB
 ¿CUÁLES SON LOS PASOS?
El diseño del contenido:
El diseño de los objetos
El diseño estético
El diseño arquitectónico
El diseño de la interfaz
El diseño de la navegación
El diseño de componentes
 ¿CUÁL ES EL PRODUCTO OBTENIDO?
Abarca temas de diseño, estética, arquitectura, interfaz, navegación y el nivel de
componente es el producto de trabajo.
 ¿CÓMO PUEDO ESTAR SEGURO DE LO QUE HE HECHO CORRECTAMENTE?
Revisar cada elemento del modelo de diseño para descubrir errores, inconsistencia,
u omisiones.
TEMAS DE DISEÑO PARA INGENIERÍA WEB

GENÉRICAS El diseño resulta en un modelo que guía

la construcción de la WebApp, debe contener
suficiente información para reflejar cómo habrán de
traducir se los requisitos de los participantes en
contenido y código ejecutable.
ESPECÍFICO: Debe abordar atributos clave de una
WebApp.
 DISEÑO Y CALIDAD DE UNA WEBAPP

• El diseño es la actividad de ingeniería que conduce a un producto

de gran calidad.
• Características:
Facilidad de uso
Funcionalidad
Confiabilidad
Eficiencia
Facilidad de mantenimiento
“Los productos se diseñan para encajar mejor en las tendencias
naturales del comportamiento humano, entonces la gente estará
más satisfecha, más completa y será más productiva”. Susan
Weinschenk.
UN ÁRBOL DE REQUISITOS DE CALIDAD
OFFUTT
ATRIBUTOS

SEGURIDAD
La medida clave de la seguridad es la habilidad de la WebApp y su ambiente de
servidor de rechazar el acceso no autorizado e impedir un franco ataque
malévolo.
DISPONIBILIDAD
La medida del porcentaje del tiempo que una WebApp está disponible para
usarla.
ESCALABILIDAD
Construir una WebApp que pueda acomodar el peso del éxito.
TIEMPO EN EL MERCADO
Es una medida de calidad desde un punto de vista de los mercados
Una meta importante de la ingeniería Web es desarrollar sistemas en los que se
proporcionen respuestas afirmativas a todas las preguntas relacionadas con la
calidad.
METAS DE DISEÑO

JEAN KAISER sugiere:

SIMPLICIDAD
Todo con moderación
CONSISTENCIA
El contenido se debe construir de manera consistente
IDENTIDAD
La estética, la interfaz y el diseño de navegación de una WebApp
deben ser consistentes con el dominio de la aplicación para la cual
se va a construir.
ROBUSTEZ
El usuario espera contenido y funciones robustas que sean relevantes
para sus necesidades.
METAS DE DISEÑO
NAVEGABILIDAD
Debe ser simple y consistente y diseñada de modo que
sea intuitiva y predecible.
APARIENCIA VISUAL
Las aplicaciones web son visuales, dinámicas y estéticas.
La belleza está en el ojo del observador.
COMPATIBILIDAD
Una Web se utilizará en una diversidad de ambientes y
se debe diseñar para que sea compatible con cada uno.
PIRÁMIDE DEL DISEÑO IWEB

Diseño
de la interfaz

Diseño estético

Diseño de contenido

Diseño de navegación

Diseño arquitectónico

Diseño de componentes
DISEÑO DE LA INTERFAZ
PRINCIPIOS Y DIRECTRICES DEL DISEÑO DE
INTERFAZ
Las interfaces efectivas son visualmente aparentes e
indulgentes e implanta en sus propios usuarios una
sensación de control.
BRUCE TOGNOZZI
Identifica:
Anticipación
Al siguiente movimiento del usuario
Comunicación
En la actividad que haya iniciado el usuario
Consistencia
El uso de los controles de navegación, menús, íconos y
estética deben ser consistentes en todo la WebApp.
BRUCE TOGNOZZI
Autonomía controlada
Facilitarle el movimiento al usuario en toda la Web.
Eficiencia
El diseño y la interfaz deben de optimizar la eficiencia laboral
del usuario, no la eficacia del ingeniero.
Flexibilidad
Permitir que algunos usuarios realicen tareas directamente y
exploren la web en forma aleatoria.
Enfoque
La interfaz debe enfocarse en las tareas importantes para el
usuario.
LEY DE FITT

El tiempo para adquirir un objetivo es una función de la

distancia a la que se halla y de su tamaño.
Modela rápidos movimientos dirigidos, donde un
apéndice parte del reposo en una posición de inicio
específica y se mueve hacia el reposo dentro de un
área establecida como objetivo.
PRINCIPIOS Y DIRECTRICES DEL DISEÑO DE INTERFAZ
Objetos de la interfaz humana
Se ha desarrollado una gran librería de objetos de interfaz
humana reutilizados para WebApp.
Reducción de latencia
Debe utilizar la multitarea de forma que el usuario procede
con el trabajo. Además las demoras deben de reconocerse,
de modo que el usuario comprenda lo que está ocurriendo.
Facilidad de aprendizaje
Acentuar un diseño simple e intuitivo que organice el
contenido y la funcionalidad para el usuario.
PRINCIPIOS Y DIRECTRICES DEL DISEÑO DE INTERFAZ
Metáforas
Es fácil de aprenden y usar en tanto sea apropiada para la aplicación y el usuario.
Mantener la integridad del producto de trabajo
Debe guardarse de manera automática de modo que no se perderá si ocurriese
un error.
Legibilidad
Toda información presentada debe ser legible para jóvenes y viejos.
Estado de rastro
El estado de interacción del usuario debe rastrearse y almacenarse para regresar
al lugar donde salió.
Navegación visible
Proporciona la ilusión de que los usuarios están en el mismo lugar y que se les
lleva el trabajo hasta sus lugares.
NIELSEN Y WAGNER SUGIEREN DIRECTRICES:
La rapidez de la lectura en un monitor es de
aproximadamente 25% más lenta que la lectura en
impresos.
Evite los signos de “en construcción”
Los usuarios prefieren no desplazarse
Los menús de navegación y encabezados deben ser
consistentes y disponibles en todas las páginas disponibles
para el usuario.
La estética nunca debe sustituir la funcionabilidad
Las opciones de navegación deben ser obvias
Una interfaz bien diseñada mejora la percepción del usuario
del contenido o servicios que proporciona el sitio.
Mecanismos de Control de la Interfaz
 Los Objetivos de la Interfaz de una WebApp son:
1. Establecer una ventana consistente con el contenido y la funcionalidad que proporciona.
2. Guiar al usuario a través de una serie de interacciones con la WebApp, y
3. Organizar las opciones de navegación y el contenido disponible para el usuario.

 Las opciones de navegación las implementa el diseñador seleccionando de entre varios

mecanismos de interacción:
• Menús de navegación
• Iconos gráficos
• Imágenes gráficas
 Flujo de trabajo en el diseño de la interfaz
 Una vez que se han identificado las tareas del usuario, se crean y analizan sus escenarios
(casos de uso) para definir un conjunto de objetos y acciones de interfaz.
 Las siguientes tareas representan un flujo de trabajo rudimentario para el diseño de la
interfaz WebApp:
1. Revisar la información contenida en el modelo de análisis y refinarla conforme se
requiera.
2. Desarrollar un bosquejo aproximado de la plantilla de la interfaz de la WebApp.
3. Correlacionar los objetivos del usuario con acciones especificas de la interfaz.
4. Definir un conjunto de tareas de usuario que estén asociadas con cada acción.
5. Elaborar bosquejos con imágenes de la pantalla para cada acción de la interfaz.
6. Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas desde el diseño
estético.
7. Identificar los objetos de la interfaz del usuario que se requieran para implementarla.
8. Desarrollar una representación de procedimiento de la interacción del usuario con la
interfaz.
9. Desarrollar una representación del comportamiento de la interfaz.
10. Describir la plantilla de la interfaz para cada estado.
11. Refinar y revisar el modelo de diseño de la interfaz.

Diseño Estético
 También llamado diseño Grafico, es un esfuerzo artistico que complementa los aspectos
técnicos de la ingenieria web. Sin él, una WebApp puede ser funcional, pero sin
atractivo. Con él, una WebApp lleva a sus usuarios a un mundo que los incluye en un
ambito tanto emocional como intelectual.
 ¿Qué es Estetica? – “La belleza existe en los ojos de quien la ve”. Para desarrollar un
diseño estético efectivo, se pregunta quienes son los usuarios de la WebApp y qué
“apariencia” desean.
Cuestiones de la Plantilla
 Toda pagina web tiene una cantidad limitada de “bien inmueble” que puede usarse para
dar soporte a :
• la estética no funcional,
• características de navegación,
• contenido de información y,
• funcionalidad dirigida al usuario.
 El “desarrollo” de este bien inmueble se planea durante el diseño estético.

 Lineamientos generales de plantilla:

• No temerle al espacio vacio.
• Resaltar el contenido.
• Organizar los elementos de plantilla de arriba a la izquierda hacia abajo a la derecha.
• Agrupar navegación, contenido y función geográficamente dentro de la pagina.
• No extender el bien inmueble con la barra de desplazamiento.
• Considerar la resolución y el tamaño de la ventana de navegador cuando diseñe
plantillas.
Cuestiones de Diseño Grafico
 Considera cada aspecto de la presentación y percepción de una WebApp. El proceso de
diseño gráfico
• Comienza con la plantilla y
• Procede hacia la consideración de:
• Esquemas de color globales,
• tipos de fuentes,
• tamaños y estilos,
• el uso de medios visuales complementarios y
• todos los demás elementos estéticos de una aplicación.

Diseño del Contenido

 Desarrolla una representación de diseño para los objetos de contenido y representa los
mecanismos que se requieren para que establezcan sus relaciones uno con otro.
 Además, se ocupa de la representación de la información dentro de un objeto de
contenido especifico:
• Actividad de diseño que dirigen los publicistas,
• los diseñadores gráficos y
• otros que generan el contenido de una WebApp.
Objetos de Contenido
 Esta alineado de manera mas cercana con un objeto de dato para software convencional.
 Tiene atributos que incluyen información especifica de contenido y atributos específicos
de implementación que se especifican como parte del diseño.

Cuestiones del Diseño de Contenido

 La creación del contenido es el trabajo de los especialistas que diseñan el objeto de
contenido al proporcionar un esbozo de la información que se entregará y una indicación
de los tipos de los objetos de contenido genéricos, mediante los cuales se entregara la
información. También se puede aplicar el diseño estético para representar la apariencia y
percepción adecuados para el contenido.

Diseño Arquitectónico
• Esta enlazado con las metas establecidas para la WebApp, el contenido que se
presentara, los usuarios que se visitaran y la filosofía de navegación que se establezca.
• Aborda la forma en la que la aplicación se estructura para gestionar la interacción del
usuario, manejar las tareas de procesamiento internas, efectuar la navegación y presentar
el contenido.
• Se dirige en paralelo con el diseño de la interfaz, el estético y el de contenido.
Arquitectura de Contenido
Se centra en la definición de la estructura hipermedia global de la WebApp.
El diseño se puede elegir de 4 diferentes estructuras de contenido:

Las estructuras lineales:

Lineal

Página Principal Página 1 Página 2 Página 3

Lineal con alternativas

Página 1 Página 4

Página Principal Página 3

Página 2 Página 5

Lineal con opciones

Página Principal Página 1 Página 2 Página 3

• Las estructuras en retícula.

Camisas Pantalones Chaquetas

Manga Corta Lino Cuero

Manga Larga Dril Lana

• Las estructuras jerárquicas.
Jerarquía Estrecha

Empleos

Oferta Demanda

Hombres Mujeres Ing. de Sistemas Contadores

Jerarquía Ancha

Página Principal

Servicios Portales Noticias Banca Viajes

• Las estructuras jerárquicas.
Jerarquía Mixta

Página Principal

Servicios Portales Banca

Descargas E-mail Todo en Uno Nacional Internacional

Arquitectura de WebApp
 Describe una infraestructura que permite a un sistema o aplicación basados en web
lograr sus objetivos de negocios.
 Descripción de Jacynto y sus colegas [JAC02]:
 “Las aplicaciones deben construirse con el uso de capas en las que se tomen en cuenta las
diferentes preocupaciones; en particular, los datos de la aplicación se deben separar de
los contenidos de la pagina (nodos de navegación), y dichos contenidos, a su vez, deben
estar claramente separados de la apariencia y la percepción de la interfaz (paginas)”.

 La arquitectura de Modelo-Vista-Controlador (MVC) [KRA88]:

• Modelo – Llamado “Objeto 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.
• Vista – Contiene todas las funciones especificas de la interfaz y habilita la presentación
del contenido y la lógica de procesamiento, e incluye todos los objetos de contenido,
acceso a fuentes de datos/información externas ya toda la funcionalidad de
procesamiento requerida por el usuario final.
• Controlador – Gestiona el acceso al modelo y a la vista y coordina el flujo de datos entre
ellos. Una WebApp, “la vista la actualiza el controlador con datos provenientes del
modelo con base en la entrada del usuario”.
La Arquitectura MVC (Adaptada de [JAC02])
 DISEÑO DE NAVEGACIÓN
Identifica un conjunto de objetos que se derivan de las clases definidas en el diseño
conceptual.
Clases de Navegación o nodos .- Para capsular objetos, se puede usar UML para
crear casos de uso, gráficos de estado y diagrama de secuencia, esto ayudara al
diseñador a comprender mejor los requisitos de navegación
Utiliza un conjunto predefinido de clases de navegación:
Nodos, vínculos anclas, y estructuras de acceso(índice de la WebApp, mapa de sitio o
paseo guiado)
Es construido como una vista sobre un diseño conceptual
El diseño de navegación es expresado en dos esquemas: el
 esquema de clases navegacionales .- nodos, enlaces y estructuras de acceso,(posibles
caminos de acceso a los nodos)
 esquema de contextos navegacionales.- es un conjunto de nodos, enlaces, clases de
contextos, y otros contextos navegacionales (contextos anidados).
 DISEÑO ABSTRACTO DE LA INTERFAZ

Especifica los objetos de la interfaz que el usuario ve conforme interactúa con la

WebApp
Visión Abstracta de datos(VAD).- Representar la relación entre objetos de la
interfaz y objetos de navegación y las características de comportamiento de los
objetos dela interfaz
Plantilla estática.- Representa la metáfora de la interfaz e incluye una
representación de los objetos de navegación dentro de la interfaz y la especificación
de los objetos de la interfaz(menús, botones, iconos, ).
Contiene un componente relacionado con el comportamiento que indica como los
eventos externos disparan la navegación y que transformaciones de la interfaz
ocurren cuando el usuario interactúa con la aplicación
Requerimientos que el cliente pide como presentación externa para navegar en el sitio
 IMPLEMENTACIÓN

Hasta ahora, todos los modelos fueron construidos en forma independiente de la

plataforma de implementación en esta fase se toma en cuenta el entorno en el cual se
va a correr la aplicación.
 1. Definir los ítems de información que son parte del dominio del problema.
 2. Identificar cómo son organizados los ítems de acuerdo con el perfil del usuario y
su tarea
 3. Decidir qué interfaz debería ver y cómo debería comportarse.
 4. Decidir qué información debe ser almacenada.
Representa una interacción de diseño que es especifica al ambiente en el que opera la
WebApp
Las clases, la navegación y la interfaz puede construirse para el ambiente
cliente/servidor.
 Métricas de diseño para WebApp

Proporciona a los Ingenieros Web un indicador de calidad en tiempo real

Conjunto de medidas que ofrezcan respuestas a diferentes inquietudes con
relación a:
 Interfaz de usuario ayuda a la facilidad de uso

 La estética utilizada es la apropiada.

 La navegación es eficiente y directa