Capitulo 19 Modelado De DiseñO
-
Upload
marilyn-jaramillo -
Category
Technology
-
view
10.099 -
download
5
description
Transcript of Capitulo 19 Modelado De DiseñO
“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 ”
Jakob Nielsen
Temas de diseño para Ingeniería Web
¿Cómo se aprecia la calidad de la WebApp? ¿Qué atributos debe exhibir para lograr ser buena a los ojos de
los usuarios y al mismo tiempo mostrar las características técnicas de calidad que permitirán a un ingeniero Web corregir, adaptar, mejorar y apoyar la aplicación a largo plazo?
Diseño y calidad de una WebApp
Diseño y calidad de una WebApp
• Seguridad• Disponibilidad• Escalabilidad• Tiempo en el Mercado
Metas de Diseño
• Simplicidad• Consistencia• Identidad• Robustez• Navegabilidad• Apariencia visual• Compatibilidad
Pirámide del Diseño Web
Diseño de componentes
Diseño arquitectónico
Diseño de navegación
Diseño de contenido
Diseño estético
Diseño de la interfaz
Diseño de la interfaz de la WebApp
• En la ingeniería software se denomina aplicación web a aquellas aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador.
• Existen aplicaciones como los webmails, wikis, weblogs, tiendas en línea y la propia Wikipedia que son ejemplos bien conocidos de aplicaciones web.
• Toda interfaz del usuario diseñada para una WebApp, debe presentar las siguientes características:- fácil de usar- fácil de aprender- fácil de navegar- intuitiva- consistente- eficiente- libre de errores- funcional
• Debe ofrecer al usuario final una experiencia satisfactoria y gratificante.
Consideraciones Técnicas• Una ventaja es que las aplicaciones web
funcionan de manera igual, independientemente de la versión de sistema operativo instalado en el cliente.
Lenguajes de Programación• Existen numerosos lenguajes de programación
empleados para el desarrollo de aplicaciones web, entre los que destacan:- PHP- ASP/ASP.NET- Java, con sus tecnologías java servelets y
JSP- HTML- XML
Ejemplos de Aplicaciones Web• Gmail por Google. Correo electrónico.
Vinculo de Navegación Individual.- Vinculos basados en
texto, iconos, botones e interruptores, y metáforas graficas.
Barra de Navegación horizontal.- Lista de las principales
categorias de contenidos o funcionales (4-7)
Columna de Navegación vertical.
1.- categorias de contenido o funcionales
2.- lista virtual de los principales objetos de contenido de la
WebApp, como parte de una jerarquía
Pestañas.- Es una variación de la barra o columna de
navegación , representa categorias de contenido o funcionales
como marcas que selecionan cuando se requiere un vinculo.
SINTAXIS DE NAVEGACIÓN.
Mapas de Sitio.- Tabla de contenido para la navegación hacia todos
los objetos de contenido y funcionalidad en la WebApp.
Se debe establecer convenciones y auxiliares de navegación como:
iconos, y vínculos gráficos (oprimibles )para que la imagen tenga una
apariencia tridimensional
Retroalimentación visual o de audio
En la navegación basada en texto utiliza color que indicaran los
vinculos de navegación y vínculos ya recorridos.
EJEMPLOS DE MODELO DE NAVEGACIÓN
DISEÑO AL NIVEL DE COMPONENTES
1. Realizan procesamiento localizado para generar capacidad de
contenido y navegación de forma dinámica
2. Ofrecen capacidades de computación o procesamiento de datos
dominio de negocios de la WebApp
3. Proporciona cuestionamientos y acceso sofisticado a BD
4. Establecen interfaces de datos con sistemas corporativos externos
El Ing. Web deberá diseñar y construir componentes de programa que
identicos los componentes de software a implementar
y PATRONES DE DISEÑO HIPERMEDIA
1) Patrones de diseño genérico.- Todo tipo de software
2) Patrones de diseño hipermedia.- Especificos de la WebApp
Casa patrón es una regla de tres partes que expresa una relación entre
cierto contexto,
un problema y una solución
Categoría de Patrones
Patrones Arquitectónico. Diseño del contenido y la arquitectura
WebApp
Patrones de construcción de componentes. Métodos para combinar
componentes
Patrones de navegación. Vínculos de navegación y flujo de
navegación de la WebApp
Patrones de presentación. Presentación del contenido, presentación
al usuario
Patrones de interacción comportamiento/usuario. Interacción
usuario maquina
MÉTODO DE DISEÑO HIPERMEDIA ORIENTADO A
OBJETOS(MDHOO)
Esta compuesto de cuatro actividades de diseño:
Diseño Conceptual
Diseño de Navegación
Diseño Abstracto de la Interfaz
Implementación
DISEÑO CONCEPTUAL
Crea una representación de los subsistemas, clases y relaciones que
definen el dominio de aplicación para la WebApp
Aquí se mencionan los requerimientos de la aplicación en estructura y
en presentación.
Relaciones y colaboraciones entre los objetos.
Constituido por: Clases, relaciones, y subsistemas
UML.- Crear diagramas de clase, agregados y representaciones de
clase compuestas, diagrama de colaboración.
Las clases son usadas para derivar nodos y las relaciones para
construir los enlaces.
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