Facultad de IngenieríaUniversidad de Buenos
Aires
75-08 Sistemas OperativosLic. Ing. Osvaldo Clúa
2007
GUI- Tecnología y diseño
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.
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.
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
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.
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
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
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
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.
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.
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.
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
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.
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
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
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
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.
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 18
Visual Studio
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 19
Xcode
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 20
NetBeans y Eclipse
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 21
QT y QtDesigner
75-08 Sistemas OperativosProf. Lic. Ing. Osvaldo ClúaFIUBA 2007 22
GTK y Glade
Top Related