Capitulo 19 Modelado De DiseñO

11,167 views
10,862 views

Published on

Diseño Web

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,167
On SlideShare
0
From Embeds
0
Number of Embeds
163
Actions
Shares
0
Downloads
366
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Capitulo 19 Modelado De DiseñO

  1. 1.
  2. 2. “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 ”<br />Jakob Nielsen<br />
  3. 3. Temas de diseño para Ingeniería Web<br />Diseño y calidad de una WebApp<br /><ul><li>¿Cómo se aprecia la calidad de la WebApp?
  4. 4. ¿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?</li></li></ul><li>Diseño y calidad de una WebApp<br />Seguridad<br />Disponibilidad<br />Escalabilidad<br />Tiempo en el Mercado<br />
  5. 5. Metas de Diseño<br />Simplicidad<br />Consistencia<br />Identidad<br />Robustez<br />Navegabilidad<br />Apariencia visual<br />Compatibilidad<br />
  6. 6. Pirámide del Diseño Web<br /> Diseño <br />de la interfaz<br />Diseño estético<br />Diseño de contenido<br />Diseño de navegación<br />Diseño arquitectónico<br />Diseño de componentes<br />
  7. 7. Diseño de la interfaz de la WebApp<br />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.<br />Existen aplicaciones como los webmails, wikis, weblogs, tiendas en línea y la propia Wikipedia que son ejemplos bien conocidos de aplicaciones web.<br />
  8. 8. Toda interfaz del usuario diseñada para una WebApp, debe presentar las siguientes características:<br />- fácil de usar<br />- fácil de aprender<br />- fácil de navegar<br />- intuitiva<br />- consistente<br />- eficiente<br />- libre de errores<br />- funcional<br />Debe ofrecer al usuario final una experiencia satisfactoria y gratificante.<br />
  9. 9. Consideraciones Técnicas<br />Una ventaja es que las aplicaciones web funcionan de manera igual, independientemente de la versión de sistema operativo instalado en el cliente.<br />
  10. 10. Lenguajes de Programación<br />Existen numerosos lenguajes de programación empleados para el desarrollo de aplicaciones web, entre los que destacan:<br /> - PHP<br /> - ASP/ASP.NET<br /> - Java, con sus tecnologías java servelets y JSP<br /> - HTML<br /> - XML<br />
  11. 11. Ejemplos de Aplicaciones Web<br />Gmail por Google. Correo electrónico.<br />
  12. 12. SINTAXIS DE NAVEGACIÓN.<br />Vinculo de Navegación Individual.- Vinculos basados en texto, iconos, botones e interruptores, y metáforas graficas.<br />Barra de Navegación horizontal.- Lista de las principales categorias de contenidos o funcionales (4-7)<br />Columna de Navegación vertical.<br />1.- categorias de contenido o funcionales<br />2.- lista virtual de los principales objetos de contenido de la WebApp, como parte de una jerarquía<br />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.<br />
  13. 13. Mapas de Sitio.- Tabla de contenido para la navegación hacia todos los objetos de contenido y funcionalidad en la WebApp.<br /><ul><li>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
  14. 14. Retroalimentación visual o de audio
  15. 15. En la navegación basada en texto utiliza color que indicaran los vinculos de navegación y vínculos ya recorridos.</li></li></ul><li>EJEMPLOS DE MODELO DE NAVEGACIÓN<br />
  16. 16. DISEÑO AL NIVEL DE COMPONENTES<br />Realizan procesamiento localizado para generar capacidad de contenido y navegación de forma dinámica<br />Ofrecen capacidades de computación o procesamiento de datos dominio de negocios de la WebApp<br />Proporciona cuestionamientos y acceso sofisticado a BD<br />Establecen interfaces de datos con sistemas corporativos externos<br />El Ing. Web deberá diseñar y construir componentes de programa que identicos los componentes de software a implementar<br />
  17. 17. y <br />PATRONES DE DISEÑO HIPERMEDIA<br />Patrones de diseño genérico.- Todo tipo de software<br />Patrones de diseño hipermedia.- Especificos de la WebApp<br />Casa patrón es una regla de tres partes que expresa una relación entre cierto contexto, <br />un problema y una solución<br />Categoría de Patrones<br /><ul><li>Patrones Arquitectónico. Diseño del contenido y la arquitectura WebApp
  18. 18. Patrones de construcción de componentes. Métodos para combinar componentes
  19. 19. Patrones de navegación. Vínculos de navegación y flujo de navegación de la WebApp
  20. 20. Patrones de presentación. Presentación del contenido, presentación al usuario
  21. 21. Patrones de interacción comportamiento/usuario. Interacción usuario maquina </li></li></ul><li>MÉTODO DE DISEÑO HIPERMEDIA ORIENTADO A OBJETOS(MDHOO)<br />Esta compuesto de cuatro actividades de diseño:<br /><ul><li>Diseño Conceptual
  22. 22. Diseño de Navegación
  23. 23. Diseño Abstracto de la Interfaz
  24. 24. Implementación</li></li></ul><li>DISEÑO CONCEPTUAL<br />Crea una representación de los subsistemas, clases y relaciones que definen el dominio de aplicación para la WebApp<br />Aquí se mencionan los requerimientos de la aplicación en estructura y en presentación.<br />Relaciones y colaboraciones entre los objetos.<br />Constituido por: Clases, relaciones, y subsistemas<br />UML.- Crear diagramas de clase, agregados y representaciones de clase compuestas, diagrama de colaboración.<br />Las clases son usadas para derivar nodos y las relaciones para construir los enlaces.<br />
  25. 25. DISEÑO DE NAVEGACIÓN<br />Identifica un conjunto de objetos que se derivan de las clases definidas en el diseño conceptual.<br />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<br />Utiliza un conjunto predefinido de clases de navegación:<br />Nodos, vínculos anclas, y estructuras de acceso(índice de la WebApp, mapa de sitio o paseo guiado)<br />Es construido como una vista sobre un diseño conceptual<br />El diseño de navegación es expresado en dos esquemas: el <br /><ul><li>esquema de clases navegacionales .- nodos, enlaces y estructuras de acceso,(posibles caminos de acceso a los nodos)
  26. 26. esquema de contextos navegacionales.- es un conjunto de nodos, enlaces, clases de contextos, y otros contextos navegacionales (contextos anidados). </li></li></ul><li>DISEÑO ABSTRACTO DE LA INTERFAZ<br />Especifica los objetos de la interfaz que el usuario ve conforme interactúa con la WebApp<br />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<br />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, ).<br />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<br />Requerimientos que el cliente pide como presentación externa para navegar en el sitio<br />
  27. 27. IMPLEMENTACIÓN<br />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.<br /><ul><li>1. Definir los ítems de información que son parte del dominio del problema.
  28. 28. 2. Identificar cómo son organizados los ítems de acuerdo con el perfil del usuario y su tarea
  29. 29. 3. Decidir qué interfaz debería ver y cómo debería comportarse.
  30. 30. 4. Decidir qué información debe ser almacenada.</li></ul>Representa una interacción de diseño que es especifica al ambiente en el que opera la WebApp<br />Las clases, la navegación y la interfaz puede construirse para el ambiente cliente/servidor.<br />
  31. 31. Métricas de diseño para WebApp<br />Proporciona a los Ingenieros Web un indicador de calidad en tiempo real<br />Conjunto de medidas que ofrezcan respuestas a diferentes inquietudes con relación a:<br /><ul><li>Interfaz de usuario ayuda a la facilidad de uso
  32. 32. La estética utilizada es la apropiada.
  33. 33. La navegación es eficiente y directa</li></li></ul><li>

×