Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema...
Transcript of Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema...
![Page 1: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/1.jpg)
Sistemas de Interfaces com o Usuário
![Page 2: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/2.jpg)
Proceso de Interação (Eng. Cognitiva)
UsuárioUsuário
SistemaSistema
Golfo de Execução: formulação da intenção; especificação da ação; execução.
Golfo de Avaliação: percepção; interpretação; avaliação.
Norman, 1986
![Page 3: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/3.jpg)
Signos (Semiótica)
Índices
Ícones
Símbolos A
![Page 4: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/4.jpg)
Objetos de comuns interface
![Page 5: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/5.jpg)
Modelo de Programação
Usuário
Dispositivos
Computador
Toolkit de Interface(Motif, SDK, ... )
Toolkit de Interface(Motif, SDK, ... )
SistemaGráfico(Xlib, GDI, ...)
SistemaGráfico(Xlib, GDI, ...)
ProgramaGráfico-Interativo
ProgramaGráfico-Interativo
![Page 6: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/6.jpg)
Programação Convencional
Os comandos são executados segundo uma ordem pré-estabelecida e sequencial.
Programação Convencional
Os comandos são executados segundo uma ordem pré-estabelecida e sequencial.
Programação Convencional
capturadados
inicio
processadados
fim
![Page 7: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/7.jpg)
Técnicas de Interação
Solicitação (Request)
Amostragem (Sample)
Eventos (Event)
![Page 8: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/8.jpg)
Exemplo de Interação no Modo de Solicitação (Request)
{ Gqloc lc; static Gdlimit area = {0.0, 0.1, 0.0, 0.1}; static Glocrec rec = {{NULL}}; static Gloc init = {0, 0.5, 0.5}; ... Message ("Defina um ponto na tela ( ESC cancela )"); do { ginitloc (1, 1, &init, 3, &area, &rec); lc = greqloc (1, 1); if (lc.status == NONE) return; } while (lc.loc.transform != 1);
/* trata as coordenadas utilizando a estrutura lc ( lc.loc.position ) */ ...}
Entrada de umponto da tela
Entrada de umponto da tela
![Page 9: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/9.jpg)
Entradas SimultâneasEntradas Simultâneas
Problemas com solicitação
![Page 10: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/10.jpg)
Modelo de Eventos
Examina eventos,chama os módulosde processamento
Examina eventos,chama os módulosde processamento
Processa EventoTipo 1
Processa EventoTipo 1
Processa EventoTipo 2
Processa EventoTipo 2
Processa EventoTipo 3
Processa EventoTipo 3
Eventos
SistemaGráfico
Programa deAplicação
![Page 11: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/11.jpg)
Eventos típicos (WIMP)
KeyPressKeyReleaseButtonPressButtonReleaseMotion LeaveNotifyEnterNotifyWindowExposureResizeTimerIdle
Janela A
Janela B
Janela C
![Page 12: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/12.jpg)
XEvent report;
/* Select event types wanted */XSelectInput(display, win, ExposureMask | KeyPressMask | StructureNotifyMask);
while (1) { /* get events, use first to display text and graphics */XNextEvent(display, &report);switch (report.type) {
case Expose:...break;
case ButtonPress:...exit(1);
case ConfigureNotify:...break;
default:break;
} /* end switch */} /* end while */
Xlib/ X WindowXlib/ X Window
![Page 13: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/13.jpg)
static int nextevent(EventRecord* theEvent, int* x, int* y){ while (1) {
if (!WaitNextEvent (everyEvent,theEvent,0,0L)) theEvent->what=idleEvent;
switch (theEvent->what) {
case idleEvent: doIdle( ); return 1;
case keyDown: ... return 1 ;
case mouseDown: ... return 1; default: return 1; } }} QuickDraw
/Macintosh
QuickDraw/Macintosh
![Page 14: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/14.jpg)
Janelas e tratadores de eventos
Janela A Janela B
Janela A.1 Janela A.2
Aplicação
Geralmente um tratador de eventos por aplicação
![Page 15: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/15.jpg)
Janelas e tratadores de eventos
Janela A Janela B
Janela A.1 Janela A.2
Aplicação
Tratador de eventos I Tratador de eventos II
![Page 16: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/16.jpg)
int PASCAL WinMain (HANDLE hCopia, HANDLE hCopiaAnterior, LPSTR lpszParamCmd, int nCmdMostrar){ if (!hCopiaAnterior) { classejan.lpfnWndProc = ProcJan ; classejan.lpszClassName = szNomeAplic ; . . . RegisterClass (&classejan) ; }
hjan = CreateWindow (szNomeAplic,... ) ;
ShowWindow (hjan, nCmdMostrar) ; UpdateWindow (hjan) ;
while (GetMessage (&msg, NULL, 0, 0)) { TranslateMessage (&msg) ; DispatchMessage (&msg) ; } return msg.wParam ;}
int PASCAL WinMain (HANDLE hCopia, HANDLE hCopiaAnterior, LPSTR lpszParamCmd, int nCmdMostrar){ if (!hCopiaAnterior) { classejan.lpfnWndProc = ProcJan ; classejan.lpszClassName = szNomeAplic ; . . . RegisterClass (&classejan) ; }
hjan = CreateWindow (szNomeAplic,... ) ;
ShowWindow (hjan, nCmdMostrar) ; UpdateWindow (hjan) ;
while (GetMessage (&msg, NULL, 0, 0)) { TranslateMessage (&msg) ; DispatchMessage (&msg) ; } return msg.wParam ;}
long FAR PASCAL _export ProcJan ( HWND hjan, UINT mensagem, UINT wParam, LONG lParam) { . . . switch (mensagem) { case WM_PAINT: hdc = BeginPaint (hjan, &ps) ; DrawText (hdc, "Ola', Windows!", ... ) ; EndPaint (hjan, &ps) ; return 0 ;
case WM_DESTROY: PostQuitMessage (0) ; return 0 ; } ...}
long FAR PASCAL _export ProcJan ( HWND hjan, UINT mensagem, UINT wParam, LONG lParam) { . . . switch (mensagem) { case WM_PAINT: hdc = BeginPaint (hjan, &ps) ; DrawText (hdc, "Ola', Windows!", ... ) ; EndPaint (hjan, &ps) ; return 0 ;
case WM_DESTROY: PostQuitMessage (0) ; return 0 ; } ...}
MS WindowsMS Windows
![Page 17: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/17.jpg)
Modelo de Call Backs
Examina eventos,chama os módulosde processamento
Examina eventos,chama os módulosde processamento
Processa EventoTipo 1
Processa EventoTipo 1
Processa EventoTipo 2
Processa EventoTipo 2
Processa EventoTipo 3
Processa EventoTipo 3
Eventos
MotifVisual BasicIUP... Programa de
Aplicação
![Page 18: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/18.jpg)
static void repaint(Widget widget, char* client, XmDrawingAreaCallbackStruct *data) { ...} void main(int argc, char *argv[]){ static char *vec[] = {"canvas.uid"}; static MrmRegisterArg regvec[] = { {"a_repaint",(caddr_t)repaint} };
MrmInitialize (); // init UIL toplevel = XtAppInitialize(NULL, "hello", NULL, 0, &argc, argv, NULL, NULL, 0); // init Motif MrmOpenHierarchy (1, vec, NULL, &hier); // load arq MrmRegisterNames (regvec, regnum); // reg callbacks MrmFetchWidget (hier, "main", toplevel, &mainwidget, &class); XtManageChild(mainwidget); // manage main XtRealizeWidget(toplevel); // realize managed child
XtAppMainLoop(XtWidgetToApplicationContext(toplevel));}
MotifMotif
![Page 19: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/19.jpg)
module canvasuil
procedure a_repaint();
object main : XmBulletinBoard {controls { XmDrawingArea canvas; };
};
object canvas : XmDrawingArea { arguments { XmNx = 15; XmNy = 60; }; callbacks { XmNexposeCallback = procedure a_repaint(); }; };
end module;
UIL/MotifUIL/Motif
![Page 20: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/20.jpg)
static int repaint (Ihandle *self){ ... }
void main (void){ IupOpen( ); IupLoad ("canvas.led"); IupSetFunction ("a_repaint", (Icallback)repaint); IupShow (IupGetHandle("main")); IupMainLoop( ); IupClose( );}
main = dialog [TITLE=“IUP Canvas”] ( canvas (a_repaint) )
canvas.led
IUP/LEDIUP/LED
![Page 21: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/21.jpg)
Visual Basic
![Page 22: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/22.jpg)
ToolBook
![Page 23: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/23.jpg)
Nível de abstração e escopo
B
ST
RA
ÇÃ
A
O
ESCOPO MAIOR
Motif SDKIUP/lua
VisualBasic
EDG/vix
ToolBook
ESCOPO MENOR
FACILIDADE
![Page 24: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/24.jpg)
Modelo do IUP/LED
Aplicação = conjunto de diálogos Diálogos = hierarquia de elementos
de interface Especificação de layout
– Concreto X Abstrato
Atributos definem a aparência
![Page 25: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/25.jpg)
Elementos de Interface Primitivos
– Button, Canvas, Frame, Image, Item, Label, List, Submenu, Text, Toggle,Matrix,Multiline
Agrupamento– Dialog, Radio, Menu
Composição– Hbox, Vbox, Zbox
Preenchimento– Fill
![Page 26: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/26.jpg)
DIALOG
HBOX
FILL FILLLABEL
Teste
Texto Centralizado Horizontalmente
Teste
Texto Centralizado Horizontalmente
Composição do layout
![Page 27: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/27.jpg)
DIALOG
HBOX
FILL FILLLABEL
VBOX
FILL FILL
Teste
Texto Centralizado
Centralizando elementos
![Page 28: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/28.jpg)
Layout abstrato
Fill
Fill
Fill
FillCanvas
HBox
Vbox
the_menu = ...
the_canvas = CANVAS[ BUTTON_CB = button_cb, MOTION_CB = motion_cb](repaint_cb)
the_dialog = DIALOG[ MENU=the_menu ]( VBOX( FILL(), HBOX( FILL(), the_canvas, FILL() ), FILL() ))
![Page 29: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/29.jpg)
Esqueleto da aplicação
int main(void){ IupOpen(); carrega_leds(); registra_callbacks(); mostra_dialogo(); IupMainLoop(); IupClose(); return 0;}
int main(void){ IupOpen(); carrega_leds(); registra_callbacks(); mostra_dialogo(); IupMainLoop(); IupClose(); return 0;}
void carrega_leds(void){ IupLoad(“triang.led”);}
void carrega_leds(void){ IupLoad(“triang.led”);}
void registra_callbacks(void){ IupSetFunction(“button_cb”, button_cb); ... IupSetFunction(“repaint_cb”, repaint_cb);}
void registra_callbacks(void){ IupSetFunction(“button_cb”, button_cb); ... IupSetFunction(“repaint_cb”, repaint_cb);}
void mostra_dialogo(void){ IupShow( IupGetHandle(“the_dialog”) );}
void mostra_dialogo(void){ IupShow( IupGetHandle(“the_dialog”) );}
![Page 30: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/30.jpg)
OpenGL/GLUT
#include <glut.h>
void main(int argc, char** argv){
/* Standard GLUT initialization */
glutInit(&argc,argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); /* default, not needed */ glutInitWindowSize(500,500); /* 500 x 500 pixel window */ glutInitWindowPosition(0,0); /* place window top left on display */ glutCreateWindow("Sierpinski Gasket"); /* window title */ glutDisplayFunc(display); /* display callback invoked when window opened */
myinit(); /* set attributes */
glutMainLoop(); /* enter event loop */}
#include <glut.h>
void main(int argc, char** argv){
/* Standard GLUT initialization */
glutInit(&argc,argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); /* default, not needed */ glutInitWindowSize(500,500); /* 500 x 500 pixel window */ glutInitWindowPosition(0,0); /* place window top left on display */ glutCreateWindow("Sierpinski Gasket"); /* window title */ glutDisplayFunc(display); /* display callback invoked when window opened */
myinit(); /* set attributes */
glutMainLoop(); /* enter event loop */}
![Page 31: Sistemas de Interfaces com o Usuário. Proceso de Interação (Eng. Cognitiva) Usuário Sistema Golfo de Execução: l formulação da intenção; l especificação.](https://reader036.fdocumentos.tips/reader036/viewer/2022081602/552fc10b497959413d8c2580/html5/thumbnails/31.jpg)
Exemplo simples da GLUTvoid myinit(void){ /* attributes */ glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */ /* set up viewing w/ 500 x 500 window with origin lower left */ glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL_MODELVIEW);}
void myinit(void){ /* attributes */ glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */ /* set up viewing w/ 500 x 500 window with origin lower left */ glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL_MODELVIEW);}
void display(void){ glClear(GL_COLOR_BUFFER_BIT); /*clear the window */ glColor3f(1.0, 0.0, 0.0); /* draw in red */ glRectf(0.0,0.0, 500.0, 500.0);}
void display(void){ glClear(GL_COLOR_BUFFER_BIT); /*clear the window */ glColor3f(1.0, 0.0, 0.0); /* draw in red */ glRectf(0.0,0.0, 500.0, 500.0);}