facultad de ingeniería universidad de buenos airesmaterias.fi.uba.ar/7508/teoria-2007/gui.pdf ·...
TRANSCRIPT
![Page 1: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/1.jpg)
Facultad de IngenieríaUniversidad de Buenos
Aires
75-08 Sistemas OperativosLic. Ing. Osvaldo Clúa
2007
GUI- Tecnología y diseño
![Page 2: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/2.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 2
Graphical User InterfaceGUI
● Forma parte de la experiencia del usuario al emplear una computadora.
● Permite comunicarse con el sistema usando– WIMP - Windows Icons Menus Pointer.– Elementos de interface o widgets.– Muchas de las operaciones se hacen por
Manipulación Directa.
![Page 3: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/3.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 3
Diseño de la UI
● Forma parte de la ergonomía.
● En muchas partes constituye una materia en sí misma relacionada a la Ingeniería en Software.
● Comprende:– Análisis de
requerimientos– Análisis de uso.– Arquitectura de la
Información a presentar
– Prototipado– Prueba de usabilidad.– Diseño Gráfico.
![Page 4: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/4.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 4
Reglas de Schneiderman
1.Consistencia
2.Permitir atajos
3.Realimentación informativa
4.Clausura– Inicio-medio-final
5.Manejo simple de errores
6.Revertir acciones
7.Mantener al usuario en control
8.Reducir la carga de memoria de corto plazo
![Page 5: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/5.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 5
Algunas guías generales
● Diseñar interacciones, no solo interfaces.
● Tener en cuenta las diferencias.
● Privilegiar la semántica sobre la sintaxis
● Siempre mostrar:– Donde estoy– De donde vengo– Adonde voy– Que puedo hacer
● Diseñar la tarea no la ingeniería.
![Page 6: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/6.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 6
Guías de diseño
● Windows Vista User Experience Guidelines● Apple Human Interface Guidelines● KDE User Interface Guidelines● GNOME Human Interface Guidelines● El SIGCHI de la ACM.● El caso del Robot Asesino
![Page 7: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/7.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 7
Algunos ejemplos ...● Efectos no deseados de
Pokemon● El Hall of Shame● Bad Designs● Un sitio para verificar
colores.● Una enciclopedia sobre
interacciones
![Page 8: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/8.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 8
¿Ingeniería o Tarea?
El GIMP está dirigido a quienes saben fotografía, en cambio el Picasa al usuario final
![Page 9: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/9.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 9
¿Ingeniería o Tarea?
HTML Kit es muy útil para quienes saben html.
iWeb está pensada para la publicación de Webpages personales, photologs, blogs, etc.
![Page 10: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/10.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 10
Arquitectura de UI
● Separar la interface de la aplicación.– Proveer de Terminales Abstractas que
● Aceptan comandos● Lo traducen al formato que entiende la aplicación● lo entregan a la aplicación.
● A éste ciclo se lo conoce como event loop o message loop.
![Page 11: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/11.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 11
Sistema de ventanas
Sistema de Ventanas
Aplicación 1 Aplicación 2 Aplicación 3
Mouse TecladoVentanas
Las aplicaciones son independientes del manejo de los
dispositivos.
![Page 12: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/12.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 12
El Event loop
begin( my_program ) initialize_everything; mainloop: event = next_event; process_event( event ); if ( event = quit ) terminate; else goto mainloop;end;
Seudocódigo según Java
![Page 13: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/13.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 13
En MS Windows
int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow){ MSG msg; while (GetMessage(&msg, NULL, 0, 0) > 0) { TranslateMessage(&msg); DispatchMessage(&msg); } return msg.wParam;}
TranslateMessage(..) se encarga de traducir algunas teclas (up, down) o los aceleradores usando funciones voodoo (no hace falta entenderlas, solo usarlas(sic))DispatchMessage (...) entrega el mensaje al WinProc( ) de la aplicación.
![Page 14: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/14.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 14
Xlib
En general se usan bibliotecas basadas en Xlib.
Es un sistema multiplataforma cliente servidor que corre en modo usuario
![Page 15: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/15.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 15
Event Loop en Xlib
while(1) { XNextEvent(d, &e); /* draw or redraw the window */ if(e.type==Expose) { XFillRectangle(d, w, DefaultGC(d, s), 20, 20, 10, 10); } /* exit on key press */ if(e.type==KeyPress) break; }
XnextEvent( .. ) se bloquea hasta que aparece un evento con foco en la aplicación
![Page 16: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/16.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 16
Widget Toolkits
● Son las unidades básicas para la construcción de Interfaces de Usuarios– Microsoft Foundation Classes– Windows Presentation Foundation– Aqua/Cocoa– Abstract Windowing Toolkit, Swing, SWT– GTK– Qt
● En general proveen sus IDE
![Page 17: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/17.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 17
MVCModelo-Vista-Controlador
● Patrón de diseño usado en muchos de los widget toolkits.– El modelo es el que realiza
el cómputo.– La(s) vista(s) visualizan los
estados del modelo.– El/los Controlador(es)
es/son quien(es) actúan con el usuario y el modelo.
Las líneas de puntos pueden implementarse usando un patrón de observador.
![Page 18: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/18.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 18
Visual Studio
![Page 19: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/19.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 19
Xcode
![Page 20: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/20.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 20
NetBeans y Eclipse
![Page 21: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/21.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 21
QT y QtDesigner
![Page 22: Facultad de Ingeniería Universidad de Buenos Airesmaterias.fi.uba.ar/7508/Teoria-2007/GUI.pdf · Reglas de Schneiderman 1.Consistencia 2.Permitir atajos 3.Realimentación informativa](https://reader031.vdocumento.com/reader031/viewer/2022022615/5ba1ee1509d3f26b6b8d4fbb/html5/thumbnails/22.jpg)
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 22
GTK y Glade