DiseñO Para Web App

10,569 views

Published on

Ingenieria en comunicación multimedia UNEVE

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,569
On SlideShare
0
From Embeds
0
Number of Embeds
436
Actions
Shares
0
Downloads
320
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

DiseñO Para Web App

  1. 1. DISEÑO PARA WebApp Modelado
  2. 2. ¿Qué es? <ul><ul><li>Modelo que guía la construcción de una WebApp. </li></ul></ul><ul><ul><li>Jakob Nielsen : “En esencia, existen dos enfoques básicos del diseño: </li></ul></ul><ul><ul><ul><li>El ideal artístico de expresarse uno mismo y </li></ul></ul></ul><ul><ul><ul><li>El ideal de ingeniería de resolver un problema para el cliente. </li></ul></ul></ul>
  3. 3. ¿Por qué es importante? <ul><li>Permite al Ingeniero Web crear un modelo que pueda valorarse en calidad y </li></ul><ul><li>Mejorarse antes de que se generen el contenido y el código. </li></ul><ul><li>El diseño es el lugar donde se establece la calidad de la WebApp. </li></ul>
  4. 4. Diseño en la IWeb… <ul><li>Cuestiones genéricas como específicas. </li></ul><ul><ul><li>Genéricas: el diseño resulta en un modelo que guía la construcción de la WebApp. </li></ul></ul><ul><ul><li>Específicas: debe abordar atributos clave de una WebApp en una forma que permita al ingeniero Web construir y ponerla a prueba de manera efectiva. </li></ul></ul>
  5. 5. Diseño y calidad de una WebApp…. <ul><li>Es la actividad de ingeniería que conduce a un producto de gran calidad. </li></ul><ul><li>¿qué es calidad? </li></ul><ul><ul><ul><li>En los sistemas basados en Web, la facilidad de uso, funcionalidad, confiabilidad, eficiencia y facilidad de mantenimiento, proporcionan una base útil para valorar la calidad. </li></ul></ul></ul>
  6. 6. Susan Weinschenk…. <ul><li>“ Si 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.” </li></ul>
  7. 7. Árbol de requisitos de calidad en una WebApp
  8. 8. Metas de Diseño... <ul><li>No importa el dominio, tamaño o complejidad de la aplicación: </li></ul><ul><ul><ul><li>Simplicidad . “Todo con medida” </li></ul></ul></ul><ul><ul><ul><li>Consistencia . Mismo patrón. </li></ul></ul></ul><ul><ul><ul><li>Identidad . Identificación con el usuario. </li></ul></ul></ul><ul><ul><ul><li>Robustez . “promesa” implícita al usuario. El usuario espera contenido y funciones que sean relevantes para sus necesidades. </li></ul></ul></ul><ul><ul><ul><li>Navegabilidad . Simple, consistente, intuitiva y predecible. </li></ul></ul></ul><ul><ul><ul><li>Apariencia visual. </li></ul></ul></ul><ul><ul><ul><li>Compatibilidad. Una WebApp se utilizará en una diversidad de ambientes: equipos tipos de conexión a internet, sistemas operativos, navegadores. </li></ul></ul></ul>
  9. 9. Pirámide del diseño IWeb
  10. 10. Diseño de interfaz <ul><li>Características: </li></ul><ul><ul><ul><li>Fácil de aprender </li></ul></ul></ul><ul><ul><ul><li>Fácil de navegar </li></ul></ul></ul><ul><ul><ul><li>Intuitiva </li></ul></ul></ul><ul><ul><ul><li>Consistente </li></ul></ul></ul><ul><ul><ul><li>Eficiente </li></ul></ul></ul><ul><ul><ul><li>Libre de errores </li></ul></ul></ul><ul><ul><ul><li>Funcional </li></ul></ul></ul><ul><ul><ul><li>Debe ofrecer al usuario final una experiencia satisfactoria y gratificante . </li></ul></ul></ul>
  11. 11. <ul><li>“ Si un sitio es perfectamente utilizable pero carece de un estilo de diseño elegante y adecuado, fracasará.” </li></ul><ul><li>Curl Cloninger </li></ul><ul><li>“ El mejor viaje es el que tiene el menor número de pasos. Acorte la distancia entre el usuario y su meta.” </li></ul><ul><li>Anónimo. </li></ul><ul><li>“ La gente tiene muy poca paciencia con los sitios WWW pobremente diseñados.” </li></ul><ul><li>Jakob Nielsen y Annette Wagner. </li></ul>
  12. 12. <ul><li>También llamado diseño gráfico. </li></ul><ul><li>Esfuerzo artístico que complementa los aspectos técnicos de la Iweb. </li></ul><ul><li>Sin él una WebApp puede ser funcional pero no atractiva. </li></ul><ul><li>Lleva a los usuarios a un mundo que incluye un ámbito tanto emocional como intelectual. </li></ul><ul><li>Diseño estético efectivo jerarquía de usuarios del modelo de análisis. </li></ul>Diseño estético
  13. 13. Sitios Web bien diseñados <ul><li>En su artículo “The top twenty Web Design tips”, Marcelle Toor ( http://www.graphics-design.com/Web/feature/tips.html ), sugiere los siguientes sitos Web como ejemplos de buen diseño gráfico: </li></ul><ul><li>www.grantasticdesigns.com </li></ul><ul><li>www.wpdfd.com </li></ul><ul><li>www.workbook.com , sirve de aparador para el trabajo de ilustradores y diseñadores. </li></ul><ul><li>www.pbs.org/riverofsong , serie de televisión para la radio y la televisión. </li></ul><ul><li>www.rkdinc.com , firma de diseño. </li></ul><ul><li>www.commarts.com , publicación para diseñadores gráficos. </li></ul><ul><li>www.btdnyc.com , firma de diseño. </li></ul>
  14. 14. Diseño de contenido <ul><li>Se enfoca en dos asuntos de diseño diferentes: </li></ul><ul><ul><li>Para los objetos de contenido, mecanismos para establecer relaciones unos con otros (ingeniero Web). </li></ul></ul><ul><ul><li>Representación de información dentro de un objeto de contenido específico (la dirigen los publicistas y diseñadores gráficos) </li></ul></ul>
  15. 15. <ul><li>Enlazado con las metas establecidas para la WebApp: </li></ul><ul><ul><li>Contenido que se presentará </li></ul></ul><ul><ul><li>Usuarios que la visitarán </li></ul></ul><ul><ul><li>Filosofía de navegación </li></ul></ul><ul><ul><li>Arquitectura de contenido y arquitectura de la WebApp. </li></ul></ul><ul><ul><ul><li>Forma en que los objetos de contenido se estructuran para su presentación y navegación. </li></ul></ul></ul><ul><ul><ul><li>Forma en que la aplicación se estructura para gestionar la interacción del usuario. </li></ul></ul></ul>Diseño arquitectónico
  16. 16. Diseño de navegación <ul><li>Acceso al contenido y las funciones de la Web. </li></ul><ul><ul><li>Identificar la semántica de navegación para diferentes usuarios </li></ul></ul><ul><ul><li>Definir la mecánica (sintaxis) que logra la navegación. </li></ul></ul><ul><ul><ul><li>Barras de navegación </li></ul></ul></ul><ul><ul><ul><li>Columnas de navegación </li></ul></ul></ul><ul><ul><ul><li>Pestañas </li></ul></ul></ul><ul><ul><ul><li>Mapas de sitio </li></ul></ul></ul>
  17. 17. Casos de Uso: <ul><li>Una estética de alto peinado. </li></ul><ul><li>Una florería de primera. </li></ul><ul><li>Una compañía que se dedica a la venta de dispositivos de seguridad. </li></ul><ul><li>Una banda musical nueva. </li></ul><ul><li>Un acuario </li></ul><ul><li>Una agencia de modelos y edecanes. </li></ul>
  18. 18. Fuente: <ul><li>“ Ingeniería del software ”, un enfoque práctico </li></ul><ul><li>Roger S. Pressman </li></ul><ul><li>Ed. McGraw Hill, sexta edición. </li></ul><ul><li>Páginas Web antes mencionadas. </li></ul>

×