Diseño Web

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

5. Metas de Diseño Simplicidad Consistencia Identidad Robustez Navegabilidad Apariencia visual Compatibilidad

6. Pirámide del Diseño Web 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

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

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

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

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

11. Ejemplos de Aplicaciones Web Gmail 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 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.

14. Retroalimentación visual o de audio

16. DISEÑO AL NIVEL DE COMPONENTES Realizan procesamiento localizado para generar capacidad de contenido y navegación de forma dinámica Ofrecen capacidades de computación o procesamiento de datos dominio de negocios de la WebApp Proporciona cuestionamientos y acceso sofisticado a BD 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

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

22. Diseño de Navegación

23. Diseño Abstracto de la Interfaz

28. 2. Identificar cómo son organizados los ítems de acuerdo con el perfil del usuario y su tarea

29. 3. Decidir qué interfaz debería ver y cómo debería comportarse.

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

32. La estética utilizada es la apropiada.