El documento discute los principios y métodos de diseño para aplicaciones web (WebApps). Explica que existen dos enfoques de diseño: el arte y la ingeniería. Luego describe el proceso de diseño de WebApps, incluyendo el diseño conceptual, de navegación, de interfaz y la implementación. También cubre consideraciones como patrones de diseño, lenguajes de programación y métricas para evaluar la calidad del diseño.

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 ”Jakob Nielsen

3. Temas de diseño para Ingeniería WebDiseño y calidad de una WebApp¿Cómo se aprecia la calidad de la WebApp?

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?Diseño y calidad de una WebAppSeguridadDisponibilidadEscalabilidadTiempo en el Mercado

5. Metas de DiseñoSimplicidadConsistenciaIdentidadRobustezNavegabilidadApariencia visualCompatibilidad

6. Pirámide del Diseño Web Diseño de la interfazDiseño estéticoDiseño de contenidoDiseño de navegaciónDiseño arquitectónicoDiseño de componentes

7. Diseño de la interfaz de la WebAppEn 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.

8. 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- funcionalDebe ofrecer al usuario final una experiencia satisfactoria y gratificante.

9. Consideraciones TécnicasUna ventaja es que las aplicaciones web funcionan de manera igual, independientemente de la versión de sistema operativo instalado en el cliente.

10. Lenguajes de ProgramaciónExisten 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

11. Ejemplos de Aplicaciones WebGmail por Google. Correo electrónico.

12. SINTAXIS DE NAVEGACIÓN.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 funcionales2.- lista virtual de los principales objetos de contenido de la WebApp, como parte de una jerarquíaPestañ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.

13. 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

14. Retroalimentación visual o de audio

15. 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

16. DISEÑO AL NIVEL DE COMPONENTESRealizan procesamiento localizado para generar capacidad de contenido y navegación de forma dinámicaOfrecen capacidades de computación o procesamiento de datos dominio de negocios de la WebAppProporciona cuestionamientos y acceso sofisticado a BDEstablecen interfaces de datos con sistemas corporativos externosEl Ing. Web deberá diseñar y construir componentes de programa que identicos los componentes de software a implementar

17. y PATRONES DE DISEÑO HIPERMEDIAPatrones de diseño genérico.- Todo tipo de softwarePatrones de diseño hipermedia.- Especificos de la WebAppCasa patrón es una regla de tres partes que expresa una relación entre cierto contexto, un problema y una soluciónCategoría de PatronesPatrones Arquitectónico. Diseño del contenido y la arquitectura WebApp

18. Patrones de construcción de componentes. Métodos para combinar componentes

19. Patrones de navegación. Vínculos de navegación y flujo de navegación de la WebApp

20. Patrones de presentación. Presentación del contenido, presentación al usuario

21. 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

22. Diseño de Navegación

23. Diseño Abstracto de la Interfaz

24. ImplementaciónDISEÑO CONCEPTUALCrea una representación de los subsistemas, clases y relaciones que definen el dominio de aplicación para la WebAppAquí 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 subsistemasUML.- 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.