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