Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz...

Post on 07-Apr-2016

222 views 3 download

Transcript of Rangel@dsc.ufpb.br rangel@lmrs-semarh.ufpb.br DSC/CCT/UFCG Prof.: José Eustáquio Rangel de Queiroz...

rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Prof.: José Eustáquio Rangel de QueirozJosé Eustáquio Rangel de Queiroz

Carga Horária: 60 h60 h

2rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Questões Introdutórias De que trata a disciplina Interface Homem-Máquina

(IHM)?

Por que este curso é importante?

Quanto este curso exige do estudante?

Há de fato problemas relevantes a serem solucionados IHM ou esta é apenas mais uma disciplina para complementação de créditos?

O que é projeto em IHM ?

Por que avaliar uma interface é importante?

3rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Interface Homem-Máquina (IHM) é uma disciplina que trata do projeto, da implementação e da avaliação de sistemas interativos destinados ao uso humano

IHM transcende o projeto de interfaces para sistemas computacionais Diversidade de equipamentos eletro-eletrônicos

automatizados (e.g. forno de micro-ondas, videocassetes, painéis de aeronaves)

Visão Geral

4rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

IHM é uma área interdisciplinar Ciência da Computação (engenharia e projeto

de aplicações de interfaces humanas); Psicologia (aplicação de teorias cognitivas e

análises comportamentais do usuário); Sociologia e Anthropologia (interações entre

tecnologias, contextos de trabalho e corporações);

Projeto Industrial (geração de produtos interativos).

Visão Geral

5rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão GeralEixos-chaves

Abordagens de Projeto e.g. considerações de fatores humanos, diretrizes para

projeto gráfico, engenharia de software, análise da tarefa;

Técnicas e Ferramentas de Implementação e.g. técnicas de prototipagem, caixas de ferramentas de

diálogo, métodos orientados a objetos, representação de dados; e

Técnicas de Avaliação e.g. análise de desempenho, teste de usabilidade,

sondagem da satisfação, inspeção de conformidade de produtos a padrões, heurísticas, guias de estilo, etc.

6rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão Geral Problema simples de projeto:

Faça-me uma caixa

ou seja, Construa-me uma caixa

7rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão Geral Quem usará a caixa? Para que a caixa será usada? Onde a caixa será usada? Qual o artefato que está sendo atualmente usado

em lugar da caixa? Quão importante é que a caixa:

tenha dimensões exatas? seja construída em um material específico? seja resistente a impactos? …

8rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão Geral Questões freqüentemente ouvidas ou

formuladas no contexto de projeto da IHM Quem usará o sistema? Para que o sistema será usado? Qual o sistema que existe atualmente? Qual o contexto de uso do sistema?

9rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão Geral Falha nas respostas relevantes ao contexto

do projeto resultados desastrosos implementações de projetos deficientes

Exemplos Spruce Goose MS-Bob Painel de controle do Three-mile Island ...

10rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Evitar resultados desastrosos Compreensão Contextual

Visão Geral

Tarefas

Usuários

Sistemas

Ambientes

11rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão Geral Projeto e implementação de sistemas úteis

Suprimento da funcionalidade que os usuários necessitam

Projeto e implementação de sistemas usáveis

Suprimento da funcionalidade que pode ser usada com um grau de esforço moderado

12rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão Geral Dificuldades do curso

NÃO se deve à quantidade de tarefas NÃO se deve ao grau de dificuldade dos

exercícios de avaliação NÃO se deve ao dispêndio de tempo

com a execução do projeto DEVE-SE à focalização no projeto

Aprendizado e execução de projetos não é uma atividade trivial

13rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão Geral Por que o projeto da IHM não é trivial?

Projetistas sentem dificuldade em apre(E)nder as tarefas do usuário;

As tarefas e seus domínios podem assumir graus de complexidade elevados;

Há diversos aspectos de naturezas distintas a serem contrabalançados

E.g. projeto gráfico, internacionalização, padrões, desempenho, satisfação, graus de detalhamento, fatores sociais, questões legais, prazos;

14rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Visão Geral Por que o projeto da IHM não é trivial?

Teorias e diretrizes existentes NÃO garantem per si a concepção de BONS projetos;

Projeto iterativo e iNterativo NÃO é simples;

Projeto de interfaces NÃO é projeto gráfico!

15rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Exemplos de Desastres Desastres em IHM

Torrey Canyon Soyuz 11 Bhopal Therac-25 Ônibus Espacial A320

16rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Torrey Canyon - Características Super-petroleiro (Março, 1967)

31.000.000 de galões

Entrega arriscada! Canal com 6 milhas de largura Aportamento APENAS numa maré muito alta

(MAS …)

(…) Tripulação experiente e navio automatizado

Exemplos de Desastres

17rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Torrey Canyon - Projeto Controle de leme com 3 posições

automático (posição próxima) manual (posição intermediária) controle (posição distante)

SE o leme falhar, desconectá-lo e cambiar a direção para uma alavanca de controle

Retorno (feedback) audível (clique para grau de mudança de curso)

“Ajuste fino” (até 3º ) em modo automático

Exemplos de Desastres

18rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Torrey Canyon - Uso Posição mal calculada; Mudança de curso significativa necessária; Controle de leme cambiado de automático

para manual; Conversão feita, MAS … … Controle de leme foi cambiado de manual

para controle.

Exemplos de Desastres

19rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Torrey Canyon - Resultado 31.000.000 de galões de petróleo

ATINGIRAM a Inglaterra e a França !!!

Exemplos de Desastres

20rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Torrey Canyon - Problema Retorno da informação (feedback) sobre a

posição de controle do leme sugestão de posição, MAS os olhos estavam

em outra parte clique audível sinalizando mudança de

posição ausência de cliques sinalizou o problema,

MAS muito tarde! Ausência de uma sugestão pode não ser

uma forma eficaz de feedback

Exemplos de Desastres

21rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Soyuz 11 - Características Retorno da estação espacial Salyut

(Junho, 1971) Tripulação altamente treinada,

espaçonave altamente automatizada Segurança e redundância SÃO metas de

projeto

Exemplos de Desastres

22rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Soyuz 11 - Projeto Na entrada na Atmosfera

Retro-foguetes do módulo orbital reduziriam a velocidade da aeronave;

Módulo de comando se separaria do módulo orbital; Foguetes de orientação manteriam o curso; Pára-quedas se abriria, escudo de reentrada seria

descartado, foguetes de aterrissagem disparariam, válvula de equalização da pressão se abriria.

Exemplos de Desastres

23rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Soyuz 11 - Uso Na entrada na Atmosfera

Pinos explosivos separaram o módulo orbital do módulo de comando;

Válvula de equalização da pressão abriu-se, aeronave girou, começou a perder pressão e oxigênio;

A válvula foi fechada manualmente … ... MAS não a tempo de evitar o trágico desfecho.

Exemplos de Desastres

24rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Soyuz 11 - Resultado Soyouz 11 aterrissou, MAS... ... os 3 cosmonautas MORRERAM !!!

Exemplos de Desastres

25rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Soyuz 11 - Problema Segurança e redundância NÃO testadas

sob condições de uso “típicas”!

Como v. testaria tal sistema?

courses.cs.vt.edu/~cs3604/lib/Safety/soyuz11.html http://www.users.wineasy.se/svengrahn/histind/Soyuz11Land/Soyuz11land.html

Exemplos de Desastres

26rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Bhopal - Características Índia (Dezembro, 1984) Pesticida Sevin (isocianato de metila - MIC) “...our safety standards in the U.S. are

identical to those in India or Brazil or some place else. Same equipment, same design, same everything” 1

11 Warren AndersonWarren Anderson, Presidente da Union Carbide

Exemplos de Desastres

27rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Bhopal - Projeto Segurança (?)

medidor de pressão (sala de controle) termômetro (tanques) unidade de refrigeração depurador de soda cáustica sistema de flare sistema de lavagem de gases

Exemplos de Desastres

28rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Bhopal – Uso (1) medidor de pressão

“normal” (10psi, mas era 2psi minutos antes!!!) termômetro

máximo de 77° unidade de refrigeração

líquido de resfriamento drenado e usado fora depurador de soda cáustica

medidor defeituoso indicava falha

Exemplos de Desastres

29rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Bhopal – Uso (2) sistema de flare

tubo de conexão retirado para manutenção tubo NÃO reposto! fora de serviço

sistema de lavagem de gases gás atingiu mais de 100 pés; água SÓ atingiu 40 pés

Exemplos de Desastres

30rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Bhopal - Resultado nuvem de 40 T de isocianato de metila cerca de 200.000 expostos cerca de 2.500 MORTOS!!!

Exemplos de Desastres

31rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Bhopal - Problemas NENHUM treinamento em procedimentos de

emergência Apresentação de ESTADOS, não de

MUDANÇAS DE ESTADO

Exemplos de Desastres

gurukul.ucc.american.edu/ted/BHOPAL.HTM

32rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Therac-25 - Características Equipamento de radioterapia (1985-1987) PDP-11, VT100 Dois modos de operação (apenas!)

Raios X máxima potência via espessa placa metálica radiação de tumores internos

Feixe eletrônico baixa potência, feixe direcionado cobertura localizada

Exemplos de Desastres

33rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Therac-25 - Projeto

Opções type “x” (raios X)

feixe de alta potência (25.000 rads), placa metálica posicionada sob o feixe

type “e” (feixe eletrônico) feixe de baixa potência (200 rads), placa metálica

retraída

type “b”2 (ativar feixe)

2 bbeam – feixe, em inglês

Exemplos de Desastres

modo RAIOS X modo FEIXE E

34rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Therac-25 - Uso type “x” (!!!) <edit mode> “e” “b” feixe de alta potência, placa metálica

retraída mensagem de erro: Malfunction 54 type “b” Malfunction 54 “b” Malfunction

54 …

Exemplos de Desastres

35rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Therac-25 - Resultado paciente MORREU devido à dose

excessiva de radiação!!!

Exemplos de Desastres

courses.cs.vt.edu/~cs3604/lib/Therac_25/Therac_1.html

36rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Therac-25 – Problemas Seqüência de entrada NUNCA testada (!!!)

entrada de dados pelo usuário erro percebido erro corrigido

Falta de clareza no retorno da informação (feedback)

Malfunction 54 não significava NADA para o operador!

Exemplos de Desastres

37rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Aeronave A320 - Características Show aéreo próximo ao aeroporto Mulhouse-

Habsheim (França – Junho, 1988) Tour de force tecnológico

Exemplos de Desastres

flightdeck.ie.orst.edu/FDAI/Phase1/phase1.html

www.gecas.com/tour_airbus320.asp

38rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Ônibus Espacial A320 - Projeto Aeronave com tecnologia fly-by-wire

sistema computadorizado projetado para prevenir erros humanos de pilotagem

Manobras de risco da aeronave, e.g. aterrissagens, ascenções e mergulhos extremos.

5 (cinco) computadores proporcionando

proteção de vôo manutenção da aeronave no curso de vôo (ao

invés de entradas feitas pelo piloto)

Exemplos de Desastres

39rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Ônibus Espacial A320 - Uso estratégia de baixa altitude (100 pés, 130

nós) proteção de vôo desativada, a fim de

permitir manobra a 30 pés, aeronave posicionada para a

subida retardo no acionamento das turbinas

Exemplos de Desastres

40rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Ônibus Espacial A320 - Resultado colisão com árvores impediu a decolagem ... ... a aeronave partiu-se... ... e explodiu ao atingir o solo... ... resultando na MORTE de TODOS os

tripulantes e passageiros!!!

Exemplos de Desastres

41rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Ônibus Espacial A320 – Problemas Piloto praticou a manobra em altitude com

proteção de vôo ativa

EXCESSO de confiança na proteção de vôo

Exemplos de Desastres

42rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

O que É uma interface homem-máquina?

parte do sistema que expande a autonomia do usuário

agente integrador das propriedades físicas da interação, das funções do sistema e do equilíbrio entre a extensão e o controle da funcionalidade

Interface Homem-máquina

43rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

O que é projeto da IHM?

concepção de solução para problema em sistema interativo destinado ao uso humano, de modo a disponibilizá-lo para mais indivíduos

necessidades e expectativas do usuário

resultado da revolução industrial Ergonomia na Europa Fatores Humanos nos EUA

Interface Homem-máquina

44rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Fatores Humanos/Ergonomia

Fatores Humanos/ Ergonomia

Ciência aplicada relativa às características de indivíduos a serem consideradas no projeto e estruturação de artefatos por eles utilizados, de modo a prover uma interação mais efetiva e segura

45rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Fatores Humanos/Ergonomia

Engenharia de Fatores Humanos/ Engenharia de Usabilidade

Aplicação de conhecimentos sobre características humanas, visando o projeto dos aspectos físicos dos sistemas e equipamentos interface com o usuário

46rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Meta Otimização do desempenho do sistema

Compatibilização de processos (sistemas e ambientes) e atributos (usuários)

Projeto, implementação e avaliação dos sistemas ou equipamentos

Tarefas humanas requeridas para a operação, manutenção, controle e suporte dos sistemas ou equipamentos

Ambiente de trabalho Atributos sensoriais, perceptivos, mentais e

físicos dos usuários

Eng. de Fatores Humanos

47rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Engenharia e Psicologia Industrial Operações e equipamentos

Elevação da eficiência

2ª Guerra Mundial Segurança pessoal Visualização de informações em cabines de

aeronaves (sistemas homem-máquina) Deficiência dos controles e visualizadores

Indução de erros

Evolução

48rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Atualidade Complexidade progressiva das tecnologias

computacionais Difusão mais efetiva de problemas e acidentes

envolvendo usuários Three-mile Island

Projeto mais ergonômico de artefatos em geral para uso humano

Avanços da indústria de dispositivos médicos Hardware computacional “mais amigável” com o

usuário

Evolução

rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Computador digital concebido em idéias nos

séculos XVIII e XIX

Tecnologia tornou-se disponível nas décadas 40 e 50 do século XX

50rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

MemEx = Memory Expander (primeiros escritos: início dos anos 30)

As we may think(The Atlantic Monthly - Julho 1945)

www.press.jhu.edu/press/books/landow/memex.html

www.theatlantic.com/unbound/flashbks/computer/bushf.htm

www.aedo-to.com/eng/inspiration/future/realizzati/01/ art01.html

Concebido como sistema baseado em microfilme, não em computador

MemEx Vanevar Bush (1890-1974)

51rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

MemEx Vanevar Bush (1890-1974) Possibilidade de armazenamento

de todos os registros/ artigos/ comunicações

Capacidade elevada de memória Itens recuperados por indexação,

palavras-chaves, cruzamento de referências

52rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoMemEx Vanevar Bush (1890-1974)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

53rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Ph.D em 1963 no MIT Laboratory

Dispositivo de entrada: Caneta óptica usada sobre CRT

Possibilidade de desenho e modificação de objetos gráficos através de constraints

Modelo orientado a objetos

Funções de cópia (copy) e colagem (paste)

Sketchpad Ivan Sutherland (1938- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

54rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Funções de cópia (copy) e colagem

(paste)

Sketchpad Ivan Sutherland (1938- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

55rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico

Fundador do Augmentation Research Center (1963)

Diversas contribuições para o domínio da interação usuário-computador – mouse, NLS, interface gráfica com o usuário

www.livinginternet.com/?w/wi_engelbart.htm

www.bootstrap.org/engelbart/hist_pix/index.jsp

www.histech.rwth-aachen.de/www/quellen/engelbart/ahi62index.html

Augment/NLSDouglas Engelbart (1925- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

56rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoMouse Douglas Engelbart (1925- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

57rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Demonstração pública do NLS, em 1968 (90 minutos de vídeo)

NLS: oN Line System

NLS foi o 2° sistema computacional conectado à ARPANET

Breve HistóricoAugment/NLS

Douglas Engelbart (1925- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

58rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoAugment/NLS

Douglas Engelbart (1925- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

Características pioneiras do NLS: mouse edição em visualizador 2D endereçamento e indexação de objetos in-file hipermídia processamento outline controle de visualização flexível multi-janelas edição cross-file

59rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoAugment/NLS

Douglas Engelbart (1925- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

Características pioneiras do NLS: e-mail com hipermídia controle de versões de documentos teleconferência via tela compartilhada reuniões mediadas por computador ajuda sensível ao contexto arquitetura cliente-servidor distribuída sintaxe de comandos uniforme

60rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoAugment/NLS

Douglas Engelbart (1925- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

Características pioneiras do NLS: módulo front-end de "interface com o usuário"

universal interpretador de linguagem de comandos

orientado a gramática protocolos para terminais virtuais protocolos para chamada de procedimentos

remotos "Metalinguagem de Comandos" compilável

61rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoAugment/NLS

Douglas Engelbart (1925- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

62rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Concepção do 1° computador pessoal

(final dos anos 60 – University of Utah) a suportar uma linguagem gráfica e de simulação

www.cosc.canterbury.ac.nz/~wolfgang/cosc205/smalltalk1.html

FLEX: FLExible EXtendable (FLEX Machine e FLEX Language)

www.users.qwest.net/~rvossler/vision.html

www.mprove.de/diplom/gui/kay69.html#IIAf

FLEX Alan Kay (1940- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

63rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Precursor do Dynabook, do Star

(XEROX) e do Mac (Apple)

www.ieee.org/organizations/history_center/cht_papers/Barnes.pdf

FLEX Alan Kay (1940- )

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

64rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Precursor do Dynabook, do Star

(XEROX) e do Mac (Apple)

www.ieee.org/organizations/history_center/cht_papers/Barnes.pdf

Alto XEROX PARC (1973)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

65rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Primeira estação de trabalho pessoal

Primeiras iniciativas efetivas de desenvolvimento de:

mouse edição WYSIWYG gráficos bit-map

Incorporação dos resultados de pesquisa de:

rede local impressão a laser todos os conceitos modernos de computação

distribuída cliente/servidor

Alto XEROX PARC (1973)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

66rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Licenciamento do mouse (1971) e do

Alto (1973) para a XEROX

Fato mais surpreendente: uso por apenas um usuário (PC)

Visualizador gráfico P&B com pixels resolução: 808 x 606 pixels

Alto XEROX PARC (1973)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

67rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Interface gráfica (GUI):

janelas controladas pelo cursor dispositivo de entrada: mouse menu popup (controle de tarefas)

Impressora a laser Ethernet

Alto XEROX PARC (1973)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

68rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Sistema de edição de documentos para

o Alto Charles Simonyi & Butler Lampson

Editor de texto WYSIWYG com facilidades de:

sublinhado negrito itálico família de fontes caracteres com largura variável divisão de tela

Bravo XEROX PARC (1974)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

69rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Versão melhorada do Bravo

Larry Tessler

Protótipo Gypsy Incorporação de estilos - capacidade de

controle da aparência de documentos Simonyi integrou-se à Microsoft

desenvolvimento do MS Word

BravoX XEROX PARC (1976-1978)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

70rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Projetado como sistema para

automação de escritórios Computador para profissionais em

organizações de negócios Meta-chave: o computador invisível

para o usuário Primeiro computador fundamentado

em engenharia de usabilidade prototipagem e análise em papel teste de usabilidade e refinamento

iterativo

Star XEROX (1981)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

71rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico

GUI fácil de apre(E)nder janelas passíveis de superposição uso de ícones para a manipulação do

sistema (manipulação direta) ícones diferentes para tipos diferentes de

arquivos “desvendamento” progressivo

Star XEROX (1981)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

www.thocp.net/hardware/xerox_star.htm www.geocities.com/SiliconValley/Office/7101/retrospect/

72rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoStar XEROX (1981)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

Arquitetura fechada

73rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico GUI (1)

Star XEROX (1981)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

74rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico GUI (2)Star XEROX (1981)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

75rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Início do desenvolvimento em 1979

como sistema com interface textual Reprojeto como sistema gráfico

similar ao Star da XEROX GUI muito similar à do Star

Lisa Apple (1983)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

http://www.pegasus3d.com/apple_screens.html

76rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Lisa 7/7

LisaWrite - processador de texto5

LisaCalc - planilha eletrônica LisaGraph - editor gráfico LisaList - agenda LisaProject - gerenciador de projetos LisaDraw - aplicativo de desenho LisaTerminal - aplicativo de comunicações

via modem

Lisa Apple (1983)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

77rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoLisa Apple (1983)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

GUI

78rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Steve Jobs - líder do projeto do

Macintosh Jef Raskin - projeto original Uso profundamente vinculado ao

projeto físico GUI muito similar à do Lisa

Macintosh Apple (1984)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

79rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

GUIMacintosh Apple (1984)

80rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Problema do Mac - apenas 128 kB de

memória Aplicações bem escritas - MacWrite e

MacDraw Mac 512k, Mac512ke e Mac Plus foram

lançados para “salvar” o Mac Novas aplicações - Pagemaker, Word

Excel

Macintosh Apple (1984)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

http://www.ideafinder.com/history/inventors/jobs.htm http://www.landsnail.com/apple/local/design/macintosh.html

81rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve Histórico Problema do Mac - apenas 128 kB de

memória Aplicações bem escritas - MacWrite e

MacDraw Mac 512k, Mac512ke e Mac Plus foram

lançados para “salvar” o Mac Novas aplicações - Pagemaker, Word

Excel

Macintosh Apple (1984)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

http://www.ideafinder.com/history/inventors/jobs.htm http://www.landsnail.com/apple/local/design/macintosh.html

82rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Breve HistóricoWindows

Microsoft (1985)

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

Descendente do DOS,Windows 1.0 – 3.11 e Windows 9x

Descendente doWindows NT

Descendente do DOS,Windows 1.0 – 3.11 e Windows 9x

Descendente doWindows NT

83rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

Exercício 01

1945 M e m e x1963 Sketchpad1968 Augment1969 F L E X1973 A l t o1974 B r a v o1981 S t a r1983 L i s a1984 M a c1985 Windows

Realizar um estudo comparativo da família Windows em nível da interface com o usuário.

rang

el@

dsc.

ufpb

.br

ran

gel@

lmrs

-sem

arh.

ufpb

.br

DSC/CCT/UFCG

José Eustáquio Rangel de Queiroz

DEPARTAMENTO DE SISTEMAS E COMPUTAÇÃO

UNIVERSIDADE FEDERAL DE CAMPINA GRANDECENTRO DE CIÊNCIAS E TECNOLOGIA