Prof. Roberto Cabral de Mello Borges

1. INF 043 - Comunicacão Homem-ComputadorParte 9 Prof. Roberto Cabral de Mello Borges Instituto de Informática UFRGS 2007

2. Histórico • 1ª interface gráfica: Xerox em 1973 no computador "Alto", a partir de um projeto do MIT [Ivan Sutherland] • Apple: Macintosh 1985 • Windows: cópia de algumas funções do Mac, em 1987 • Interfaces gráficas são conhecidas como WIMP (Windows, Icons, Menus e Point devices) • O paradigma de interação é conhecido como WYSIWYG (What You See Is What You Get) • Tendência: migrar para o padrão WYGIWYS (What You Get Is What You See)

3. Histórico dos elementos da Interface Gráfica • Menus baseados em teclado • Antes de 1978 • Menus Hierárquicos baseados em teclado • UCSD Pascal - (1978) • Displays Bitmapped • Xerox PARC (Palo Alto Research Center), para computador Alto (1973) • Light Pen como pointer para tela • 1960 • Joysticks • Spacewar games, 1962 • Trackballs • anos 60 • Dispositivo de apontamento com pointer na tela • Douglas Englebart - SRI (anos 70).

4. Histórico dos elementos da Interface Gráfica • Mouse • Douglas Englebart - SRI • Mudança no Cursor para mostrar modo do sistema • William Newman - Xerox PARC • Cursor muda para mostrar contexto • David Tilbrook (Newswhole) (1975) • Menus • LRG - Xerox PARC • Popup Menus • Ingalls (LRG) - Xerox PARC • Pulldown menus • Lisa - Apple • Apple Menu bar • Lisa - Apple Lisa - Versão Inicial

5. 1º mouse

6. Histórico dos elementos da Interface Gráfica • Menus Hierárquicos • Paeth(SSL) - Xerox PARC (Smalltalk) • Desabilitar itens de menus • Lisa - Apple ou Xerox PARC (1982) • Teclas de comando (atalhos) para itens de menus • Lisa - Apple • "Check Marks" ( √ ) em itens de menu • Lisa - Apple • Janelas Sobrepostas • Ingalls(LRG) - Xerox PARC • Janelas lado-a-lado • CSL - Xerox PARC • Filas de eventos • Simula - NCC, Lisa - Apple (1975) Lisa - Versão Final

7. Histórico dos elementos da Interface Gráfica • Icones • David Smith(SDD) - Xerox (Star->Mac->Lisa) • Barras de Rolagem • LRG - Xerox PARC • Push Buttons • LRG - Xerox PARC • Radio Buttons • Kaehler(LRG) - Xerox PARC • Check Boxes • LRG - Xerox PARC • Dimming de botões inativos • David Tilbrook (Newswhole) (1975) • Dialog Boxes • Star - Xerox PARC

8. Histórico dos elementos da Interface Gráfica • Multiplos fontes & estilos no texto • CSL - Xerox PARC (Bravo) (1978) • Move/Copy/Delete • Xerox PARC • Cut/Copy/Paste com mouse • Tesler(SSL) - Xerox PARC (Gypsy, Smalltalk) • Ponto de Seleção entre caracteres • Tesler(SSL) - Xerox PARC (Gypsy & Smalltalk). Smalltalk

9. Macintosh sistema 1 a 6

10. Macintosh sistema 8 e 9

11. Macintosh Sistema X

12. Windows 1

13. Windows 2

14. Windows 3

15. Windows 95

17. INTERFACE GRÁFICA • Elementos da interface gráfica • janelas • menus • ícones • figuras geométricas • caixas de diálogo • caixas de mensagem • barra de ferramentas • controles • som e vídeo

18. Janelas • Partes de uma janela • Barra de título • Botão de menu do sistema • Botão de minimizar • Botão de maximizar • Barra de menu • Área de status/mensagens • Barras de deslizamento

19. Janelas • Janelas divididas • permite visualizar diferentes partes da mesma janela, com barras de rolamento independentes. • Redimensionamento • característica dos ambientes Mac ou Windows de redimensionar janelas em diferentes disposições: • cascata • lado a lado horizontal • lado a lado vertical • redimensionamento manual. • algumas janelas não são dimensionáveis (evitar este bloqueio).

20. Menus • Todas as funções do software devem poder ser apresentadas em menus, mesmo que haja um botão com a mesma função já programada. • Tipos de menus sugeridos • dois níveis padrão • menus em cascata (terceiro nível em diante) • menus destacáveis ou popup • menus corrediços.

21. Caixas de Diálogo e de Mensagem • Caixas de Diálogo: • obtém informações do usuário, através de controles • são usadas para parametrizar operações. • Caixas de Mensagem: • comunicam informações ao usuário • podem obter confirmações do usuário • são caixas de diálogo simplificadas. • Caixas de Diálogo-Mensagem: • são caixas que contém ao mesmo tempo mensagens e diálogos.

22. Controles • Geralmente são usados em Caixas de Diálogo • Tipos de Controles: • Texto • Caixa de Edição (Edit Box) • Caixa de Verificação (Verify Box) • Caixa de Lista (List Box) • Caixa de Grupo (Group Box) • Botão de Rádio (Radio Button) • Botão de Seleção Múltipla (Option Button) • Botão de Comando (Command Button) • Barras de Rolagem (Scroll Bar) • Combinação: Caixa de Edição/Caixa de Lista • Controle Giratório.

23. Caixas de Diálogo e Controles Botões de Rádio (Radio Button)

24. Botões de seleção Múltipla e de Controle Botões de Controle Botões de Seleção Múltipla

25. Caixa de Diálogo

26. Controles • Texto • Caixa de Edição (Edit Box) • Caixa de Verificação (Verify Box) • Caixa de Lista (List Box) • Caixa de Grupo (Group Box) • Botão de Rádio (Radio Button) • Botão de Seleção Múltipla (Check Button) • Botão de Comando (Command Button) • Barras de Rolagem (Scroll Bar) • Combinação: Caixa de Edição/Caixa de Lista • Controle Giratório.

27. Botões de Comando • Botões de Ação • iniciam uma ação a partir da caixa de diálogo • Os mais comuns são: OK, Cancel e Close. • Botões de Saltar • fecham a caixa de diálogo atual e abrem uma nova. • um botão de saltar pode enviar o usuário para uma segunda caixa de diálogo com mais detalhes sobre as opções disponíveis na primeira. • Botões de Saltar e Retornar • abrem uma nova caixa mas não fecham a antiga • uma caixa do tipo Details, pode funcionar desta forma • Botões de Desdobrar • expandem a caixa de diálogo atual para mostrar mais opções. • Botões de Dobrar • redobram uma caixa de diálogo

28. Botão de Desdobrar Botão de Dobrar

29. Botões de Rádio • Botões de Rádio Tradicionais • são apresentados por círculos • círculo preenchido por uma bola preta, significa a opção selecionada • quando uma opção estiver selecionada, automaticamente todas as anteriores devem ficar não selecionadas • é usado para seleção de uma opção única e obrigatória, dentre várias • é interessante sempre ter um default. • Botões sob forma de Conjunto de Valores • é um grupo de botões retangulares, onde só um pode ser escolhido • geralmente é usado para escolher cores ou padrões de textura, ou ainda figuras geométricas.

30. Caixas de Verificação Botões de Rádio

33. Botão de Seleção Múltipla ou Caixa de Verificação (Check Box) • são listas com um pequeno quadrado ao lado, que pode ter quaisquer das opções marcadas (com um X) • difere dos botões de rádio, pela possibilidade de poder se marcar uma, duas, três ou mais opções, inclusive todas ou nehuma • há opções que só podem ser ligadas, se outra estiver ligada; neste caso desabilitar a opção secundária (dependente), mostrando-a em cinza, e de forma visual a mostrar a hierarquia • pode-se usar caixas de verificação em combinação com botões de rádio.

37. Caixas de Lista • São usadas para exibir opções para o usuário, representadas por textos, cores ou gráficos. • Tipos de Caixas de Lista: • Caixa de Lista Padrão de Seleção Simples • todas as opções disponíveis são exibidas e o usuário pode selecionar apenas uma delas • Drop-down de Seleção Simples: • as opções disponíveis só são exibidas quando o usuário dá um click na seta drop-down • Seleção Múltipla Padrão: • todas as opções disponíveis são exibidas • pode ser selecionada mais de uma opção • Drop-down de Seleção Múltipla: • as opções disponíveis só são exibidas quando o usuário dá um click na seta drop-down • pode ser feita mais de 1 seleção, através de Ctrl-Click ou Shift-Click

38. Caixa de Lista Padrão de seleção Simples

39. Caixas de Lista • Caixas de Lista Padrão: • exibem toda a lista de uma só vez • geralmente têm entre 3 e 8 ítens • se as opções da lista representam os possíveis valores dos atributos para uma seleção, o valor corrente deve ser selecionado quando a lista é exibida inicialmente • sendo heterogênea a seleção, nenhum valor deve ser selecionado • quando o espaço é limitado, pode-se substituir listas padrão por listas drop-down

40. Caixa de Lista Drop Down de Seleção Simples

41. Caixas de Lista • Caixas de Lista Drop-down: • até que sejam “clicadas”, exibem apenas a seleção corrente de uma lista • só usar se houver três ou mais opções • se uma lista drop-down contém mais do que 8 ítens, deve possuir barra de rolamento vertical • preferencialmente abrir a lista na opção até então selecionada, posicionando-a no meio da tela (mostrando que há opções mais acima e mais abaixo [se houver, é claro])

42. Caixa de Lista Padrão Caixa de Lista Drop Down

43. Caixas de Texto • São controles de edição, dentro dos quais o usuário digita informações em forma de texto. • A maioria das Caixas de Texto usa apenas uma linha, como por exemplo, a caixa do menu Salvar Como (Save As), no espaço reservado para digitar o nome do arquivo a ser salvo. • Se a caixa for do tipo multilinhas ilimitado, só usar barras de rolagem vertical, quando se digitar uma próxima linha que não caberá mais na tela reservada para a caixa de texto. • Para inserir um Return dentro do texto, usar a convenção de digitar Ctrl-Return.

44. Caixa de Texto

45. Botões Deslizantes • São usados para exibir e ajustar os valores em dimensões contínuas, como em volume, cor, brilho, contraste, matiz, etc. • Consiste em uma barra contendo uma escala ou marca de medida, mais um indicador perpendicular à barra. • O indicador mostra o valor corrente. • O indicador pode ser arrastado pelo mouse. • Pode incluir uma caixa de texto, que mostra o valor corrente associado ao botão, podendo este valor ser alterado manualmente, quando então o botão deverá se ajustar para a posição correspondente.

47. Campos de Texto Estáticos • São usados para exibir valores que serão lidos, mas não alterados, como por exemplo, mensagens de erro ou mensagens informativas. • Nestes campos o usuário não pode alterar ou digitar nada, devendo o teclado ser bloqueado para digitação. • Uma forma de alertar para este tipo de campo é a cor de fundo do campo de texto estático, que deve ser a cor de fundo normal da janela, ao contrário da cor de fundo de um campo de Caixa de Texto, que entra na cor (mais escura) de edição.

48. Caixas de Combinação • É a combinação de um campo texto editável e uma caixa de lista. • É utilizada quando o aplicativo exige uma entrada do usuário e pode exibir uma lista de respostas possíveis. • O usuário pode digitar uma resposta na caixa de texto, caso a resposta correta não esteja disponível na lista. A diferenca básica com a caixa de lista é que na caixa de lista pode-se digitar um ítem completamente novo, que não esteja na lista.

49. Botões de Aumentar e Diminuir • É uma caixa de texto com duas setas (uma para cima e outra para baixo), colocadas à direita da caixa. • É uma caixa de texto especializada, ou seja, aceita apenas um conjunto de valores discretos de entradas ordenadas. • O valor da caixa de texto pode ser manipulado por: • digitação de um novo valor dentro da caixa e texto • dando um click na seta para cima, para aumentar o valor • dando um click na seta para baixo, para diminuir o valor • Aplicações: • ajuste de horários e datas • ajuste de margens e tabulações • ajuste de tamanhos de fontes e objetos

50. Botões de Aumentar e Diminuir