diseño para aplicaciones web edgar valarezo sergio luján mora · 1. diseño de la interfaz de la...
TRANSCRIPT
![Page 1: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/1.jpg)
Aplicaciones Web
Edgar Valarezo
Sergio Luján Mora
Diseño para Aplicaciones Web
![Page 2: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/2.jpg)
Diseño para Aplicaciones Web
1. Diseño de la interfaz de la WebApp
2. Diseño del Contenido
3. Diseño Arquitectónico
4. Diseño al nivel de componentes
![Page 3: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/3.jpg)
1. Diseño de la interfaz de la WebApp
• Las tres capas de la Web:
![Page 4: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/4.jpg)
1. Diseño de la interfaz de la WebApp
• Prioridades en el diseño:
1. Hacer aplicaciones Web útiles y usables
2. Hacer aplicaciones Web llamativas y «hermosas»
![Page 5: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/5.jpg)
1. Diseño de la interfaz de la WebApp
• Cómo hacemos aplicaciones Web útiles y usables:
a) Tener claro qué debe hacer, qué no debe hacer, y
por qué
b) La aplicación se adapte al usuario, no al revés a) Que la gente normal pueda usar sin tener que convertirse
en gurús de informática
b) Aprovechar las últimas posibilidades tecnológicas
c) «Diseñar lo obvio»
![Page 6: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/6.jpg)
1. Diseño de la interfaz de la WebApp
• Qué es un diseño obvio?
– Intuitivo
• Seguir las reglas del Sentido Común
– Hace las cosas más claras
• Simple de entender
• Fácil de aprender
• Bien organizado
![Page 7: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/7.jpg)
1. Diseño de la interfaz de la WebApp
• Qué no es un diseño obvio?
– Forzar al usuario a que entienda cómo (diablos) funciona
– Hacer temeroso al usuario por la pérdida accidental de sus datos.
– Interrumpir el trabajo para decir que algo está dañado de manera irrecuperable y que debe pulsar «Aceptar», cuando no lo acepta.
![Page 8: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/8.jpg)
1. Diseño de la interfaz de la WebApp
«Justo mi corazonada»
![Page 9: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/9.jpg)
2. Diseño del Contenido
• Esquematizar
• Agrupar
• Simplificar
• Enfocar / Ajustar continuamente
![Page 10: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/10.jpg)
2. Diseño del Contenido
• Separar la presentación del contenido
– Patrón MVC
• M: Modelo
• V: Vista
• C: Controlador
![Page 11: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/11.jpg)
2. Diseño del Contenido
Aspectos a tener en cuenta: • Forma
– Redacción y Ortografía – Vínculos – URL – Facilidad de visualización
• Fondo – Relevancia – Interés – Actualidad
![Page 12: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/12.jpg)
3. Diseño Arquitectónico
Problema
Solución A
Solución B
Solución C Respuesta
• Olvidarse del usuario, enfocarse en la situación
![Page 13: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/13.jpg)
3. Diseño Arquitectónico
• Casos de uso
Paso 1 Paso 2 Paso 3
Paso 1 Paso 2
Situación A
Situación B
![Page 14: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/14.jpg)
4. Diseño al nivel de componentes
• Como los ladrillos que arman una pared
• Funcionalidades que se ensamblan
![Page 15: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/15.jpg)
4. Diseño al nivel de componentes
• Servicios Web
![Page 16: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/16.jpg)
4. Diseño al nivel de componentes
• Servicios Web
– REST: JSON
– SOAP: XML
![Page 17: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/17.jpg)
4. Diseño al nivel de componentes
• Tipos de Interconexión
– ESB
– ETL
![Page 18: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/18.jpg)
4. Diseño al nivel de componentes
• ESB
– Enterprise Service Bus (Bus de Servicios)
![Page 19: Diseño para Aplicaciones Web Edgar Valarezo Sergio Luján Mora · 1. Diseño de la interfaz de la WebApp •Cómo hacemos aplicaciones Web útiles y usables: a) Tener claro qué](https://reader030.vdocuments.co/reader030/viewer/2022041100/5ed66f526ff22a66535f4a2a/html5/thumbnails/19.jpg)
4. Diseño al nivel de componentes
• ETL – Extract, Transform and Load (extraer, transformar y cargar)