(CDI) Aula02 - História da Interface Gráfica Digital
-
Upload
lizie-nascimento -
Category
Technology
-
view
389 -
download
1
Transcript of (CDI) Aula02 - História da Interface Gráfica Digital
![Page 1: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/1.jpg)
Design de Interfaces Gráficas
Carlos Eduardo Brito NovaisLízie Sancho Nascimento
Unifor - Universidade de Fortaleza
![Page 2: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/2.jpg)
Interface Gráfica
![Page 3: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/3.jpg)
3
Interface

![Page 4: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/4.jpg)
4
Interface

![Page 5: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/5.jpg)
Interface
“Área de comunicacao entre o homem e a máquina.” (ROYO, 2008, p.89)
5
![Page 6: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/6.jpg)
6
Interface

![Page 7: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/7.jpg)
7
Interface

![Page 8: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/8.jpg)
“Desde muito tempo, o homem utiliza instrumentos para comunicar-se com outros homens". (MEGGS, 2013)
8
Interface

![Page 9: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/9.jpg)
De acordo com Giedion (1995), o homem se diferencia dos outros animais, por sua capacidade de utilizar símbolos como instrumentos conceituais.
9
Interface

![Page 10: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/10.jpg)
Onde utilizamos símbolos como instrumentos conceituais?
10
Interface

![Page 11: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/11.jpg)
11
Interface Gráfica do Usuário

![Page 12: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/12.jpg)
"Toda a civilizacao existe em funcao dos símbolos que cria, e o que permanece ao longo da história sao também os símbolos que vao mudando segundo as necessidades sociais de cada época.”
(ROYO, 2008, p. 48)
12
Interface Gráfica do Usuário

![Page 13: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/13.jpg)
É importante ressaltar que a sociedade soube usar dos meios técnicos disponíveis em sua época para se comunicar e, também, para a manipulacao da massa receptora.
13
Interface Gráfica do Usuário

![Page 14: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/14.jpg)
14
Interface Gráfica do Usuário

![Page 15: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/15.jpg)
História da Interface Gráfica
![Page 16: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/16.jpg)
Para Javier Royo, a história do design digital tem a mesma origem da história da interface do usuário, pois o meio de comunicacao apresenta uma superfície, a qual o usuário utiliza-a para ler, essa superfície, é a própria interface.
16
História da Interface Gráfica

![Page 17: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/17.jpg)
1. Evolucao dos Processos de Sinalizacao;
2. Aparicao dos Sistemas Pictográficos Para Transmissao da Informacao;
3. Alguns Marcos Históricos Relacionados Com a Identidade Visual; e
4. Evolucao Tecnológica (a própria evolucao da interface gráfica do usuário).
17
Evolucao dos Diferentes Campos do Design:

![Page 18: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/18.jpg)
Sistemas de sinalizacao como precursores dos sistemas de navegacao.
18
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 19: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/19.jpg)
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
Objetivo:
• Padronizar o sistema de circulacao, a fim de melhorar o trânsito.
19
1.5
1.6

![Page 20: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/20.jpg)
20
1.1. Sistemas de Sinalizacao

![Page 21: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/21.jpg)
21
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 22: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/22.jpg)
22
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 23: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/23.jpg)
Plano de Sinalizacao do Metrô de Londres
23
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 24: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/24.jpg)
24
1.2. Plano de Sinalizacao do Metrô de Londres (Harry Beck,1933)

![Page 25: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/25.jpg)
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
Contribuições de Beck
• Substituicao da fidelidade geográfica para interpretacao diagramática.
• Codificacao das linhas através de cores.
• Aumento da escala onde havia grande volume de linhas passando.
25
1.5
1.6

![Page 26: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/26.jpg)
1. Evolucao dos Processos de Sinalizacao
Como esse sistema contribuiu para o design de informacao nos dias atuais?
26
1.1
1.2
1.3
1.4
1.5
1.6

![Page 27: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/27.jpg)
Viena Convention on Road Signs and Signals
27
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 28: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/28.jpg)
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
Objetivo:
• Padronizar o sistema de circulacao, a fim de melhorar o trânsito.
28
1.5
1.6

![Page 29: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/29.jpg)
29
1.3. Viena Convention on Road Signs and Signals (1968)

![Page 30: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/30.jpg)
Federal Design Improvement Program
30
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 31: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/31.jpg)
1.4. Federal Design Improvement Program (1974)

![Page 32: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/32.jpg)
Programa Federal de Melhoria do Design
32
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 33: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/33.jpg)
1.4. Programa de Melhoria do Design Federal (1974)

![Page 34: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/34.jpg)
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
Resultado:• Manual de normas gráficas para
publicacões e comunicacao, com especificacões de tamanhos e formatos de papel, cores, tipografia e sistemas de retícula.
1.5
1.6

![Page 35: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/35.jpg)
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

Sistema De Símbolos Para Passageiros
![Page 36: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/36.jpg)
1.5. Sistema De Símbolos Para Passageiros (1974)

![Page 37: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/37.jpg)
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

Objetivo:• Sistema de símbolos destinados a
passageiros, pedestres e usuários de transportes.
Resultado• Roger Cook e Don Shanosky
elaboraram uma série de símbolos que contribuiu para a unificacao de significados da comunicacao gráfica.
![Page 38: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/38.jpg)
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 39: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/39.jpg)
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

![Page 40: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/40.jpg)
40
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

Metáfora da Interface
![Page 41: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/41.jpg)
41
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

Objetivo:• Influenciado pelo trabalho dos
símbolos Roger Cook e Don Shanosky. A Xerox criou o 1º sistema operacional com interface gráfica, baseado na metáfora da interface.
![Page 42: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/42.jpg)
42
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

Resultado:• O desenvolvimento do sistema de
sinalizacao viário nao só ajudou na ambientacao do usuário ao espaco digital, como também contribuiu para mostrar a importância da sinalizacao na concepcao do ciberespaco.
![Page 43: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/43.jpg)
43
1.6. Sistema MS-DOS (1981)

![Page 44: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/44.jpg)
1.6. Sistema Xerox Star (1984)

![Page 45: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/45.jpg)
1.6. MacOS X Snow Leopard (Apple, 2010)

![Page 46: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/46.jpg)
46
1. Evolucao dos Processos de Sinalizacao
1.1
1.2
1.3
1.4
1.5
1.6

O que mudou de lá para cá?
![Page 47: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/47.jpg)
Fazem parte dos sistemas visuais de informacao toda representacao gráfica que contém um alto grau de informacao e um objetivo didático. Por exemplo: mapas de sites, representacões de processos, que nao podem ser visualizadas pelo usuário, etc.
47
2. Sistemas Pictográficos Para Transmissao da Informacao
2.1
2.2
2.3

![Page 48: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/48.jpg)

![Page 49: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/49.jpg)
Sistemas de sinalizacao como precursores dos sistemas de navegacao.
49
2.1
2. Sistemas pictográficos para transmissao da informacao
2.2
2.3

![Page 50: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/50.jpg)
Objetivo:
• Otto Neurath foi o pioneiro na realizacao de sistemas de signos e símbolos. Ele pretendia criar um sistema de padronização visual para fins educativos. Acreditava que a linguagem visual de signos era compreensível por qualquer cidadao, por mais modesto que fosse seu grau de instrucao.
2.1
2.2
2.3
2. Sistemas pictográficos para transmissao da informacao

![Page 51: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/51.jpg)
Resultado:
• A ideia do Isotype era criar uma linguagem pictográfica mundial. Ainda hoje, ela exerce forte influência na comunicacao das novas tecnologias.
2.1
2.2
2.3
2. Sistemas pictográficos para transmissao da informacao

![Page 52: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/52.jpg)
2.1. Isotype

![Page 53: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/53.jpg)

![Page 54: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/54.jpg)
![Page 55: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/55.jpg)
![Page 56: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/56.jpg)
Design Centrado no Usuário (Will Burtin, 1949)
56
2. Sistemas pictográficos para transmissao da informacao
2.1
2.2
2.3

![Page 57: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/57.jpg)
História:
• Will Burtin foi um dos pioneiros no design de informacao. Ele também se destacou por pensar o design a partir do usuário, hoje campo conhecido como design centrado no usuário. Ele acreditava que se devia estudar a percepcao que o usuário tinha da informacao.
57
2.1
2.2
2.3
2. Sistemas pictográficos para transmissao da informacao

![Page 58: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/58.jpg)
58
2.2. The Brain

![Page 59: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/59.jpg)
Atlas Geográfico Mundial (Herbert Mayer, 1953)
59
2. Sistemas pictográficos para transmissao da informacao
2.1
2.2
2.3

![Page 60: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/60.jpg)
História:
• Herbert Mayer fez um atlas que transmitia informacões de diversas áreas: astronomia, geografia, etc.
2.1
2.2
2.3
2. Sistemas pictográficos para transmissao da informacao

![Page 61: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/61.jpg)
Resultado:
• “Este trabalho de representacao em mapas representou um dos primeiros grandes trabalhos dedicados à visualizacao da informacao em estado puro (dados, limites geopolíticos etc.) e, portanto, é claro antecedente da representacao da informacao tal como a conduzimos na internet.”(ROYO, 2008, p.57)
2.1
2.2
2.3
2. Sistemas pictográficos para transmissao da informacao

![Page 62: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/62.jpg)
62
![Page 63: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/63.jpg)
No início do século XX surgiram as primeiras iniciativas para padronizar a imagem corporativa das empresas.
63
3. Sistemas de Identidade Visual
3.2
3.1

![Page 64: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/64.jpg)
Identidade Corporativa AEG(Otto Neurath e Peter Behrens)
3.1
3.2
3. Sistemas de Identidade Visual

![Page 65: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/65.jpg)

![Page 66: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/66.jpg)
Objetivo:
• Otto Neurath e Peter Behrens acreditavam na identidade visual coordenada da forma como vemos hoje. Ele acreditava que toda a comunicacao da empresa deveria seguir um conjunto harmônico, coordenado e organizado, desde a marca, vestimenta, faixada das lojas até a moradia dos funcionários.
3.1
3.2
3. Sistemas de Identidade Visual

![Page 67: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/67.jpg)

![Page 68: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/68.jpg)
Resultado:
• Após a Segunda Guerra Mundial, as empresas viram os benefícios de se padronizar a comunicacao.
3. Sistemas de Identidade Visual
3.1
3.2

![Page 69: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/69.jpg)
Escola da forma em Ulm3.1
3.2
3. Sistemas de Identidade Visual

![Page 70: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/70.jpg)

![Page 71: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/71.jpg)
Objetivo:
• A importância da Escola de Ulm reside na renovacao do conceito metodológico aplicado à imagem da marca e aos signos visuais.
• Otl Aicher e Martin Krampen foram uns dos fundadores da escola.
3.1
3.2
3. Sistemas de Identidade Visual

![Page 72: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/72.jpg)
Resultado:
• Estes trabalhos foram resultados de um estudo metodológico que levava a entender a imagem corporativa como uma imagem global que organizava todo o material gráfico.
72
3. Sistemas de Identidade Visual
3.1
3.2

![Page 73: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/73.jpg)

![Page 74: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/74.jpg)

![Page 75: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/75.jpg)

![Page 76: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/76.jpg)

![Page 77: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/77.jpg)

![Page 78: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/78.jpg)

![Page 79: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/79.jpg)
O que essa experiência trouxe para os dias atuais?
79
3. Sistemas de Identidade Visual
3.1
3.2

![Page 80: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/80.jpg)
Consequência:
• Trazendo essa experiência para os dias atuais, a percepcao que o cliente tem do site, aplicativos ou qualquer outro dispositivo deve estar atrelada a marca da empresa. Se a empresa busca passar uma imagem de inovacao, moderna e tecnológica, seu site e produtos devem estar relacionas e devem transmitir essa percepcao.
80
3. Sistemas de Identidade Visual
3.1
3.2

![Page 81: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/81.jpg)
A história da interface gráfica do usuário acompanha a evolucao tecnológica.
Quanto mais espaços foram criados, mais interfaces foram desenvolvidas.
81
4. Evolucao Tecnológica
4.1
4.2
4.3
4.4
4.5
4.6

![Page 82: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/82.jpg)
Pré-História
Visualizar a Informática
Mudanca de Paradigma
Interface Gráfica Atual
Internet e Ciberespaco
Guerra dos Navegadores
82
4. Evolucao Tecnológica
4.1
4.2
4.3
4.4
4.5
4.6

![Page 83: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/83.jpg)
Pré-história:
• Antes dos computadores eletrônicos, existiam pessoas especializadas para controlá-los, pois o homem era quem deveria compreender a máquina e nao o contrário. Usabilidade era algo que ainda estava bem distante de se alcancar.
83
4. Evolucao Tecnológica
4.2
4.3
4.4
4.5
4.6
4.1

![Page 84: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/84.jpg)
Na época da interface pré-gráfica, Charles Babbage idealizou uma máquina analítica, chamada de diferencial, que seria capaz de receber, armazenar, processar e exibir dados.
84
4. Evolucao Tecnológica
4.2
4.3
4.4
4.5
4.6
4.1

![Page 85: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/85.jpg)
85
4.1. Máquina diferencial de Charles Babbage (1835)

![Page 86: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/86.jpg)
Em 1890, Hollerith inventou o primeiro sistema de processamento de informacao, afim de processar e tratar dados administrativos para o censo norte-americano. Ele era composto por uma leitora de cartões perfurados, calculava e imprimia resultados.
86
4. Evolucao Tecnológica
4.2
4.3
4.4
4.5
4.6
4.1

![Page 87: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/87.jpg)
4.1. Cartao Perfurado (Hollerith, 1890)

![Page 88: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/88.jpg)
Royo (2008) fala que conforme o avanco das tecnologias, o tamanho desses dispositivos iam diminuindo, vide o caso do ENIAC, primeiro computador eletrônico, o qual pesava mais de 30 toneladas. Com esse crescimento, a capacidade de cálculo e memória aumentaram até chegar aos gráficos atuais.
88
4. Evolucao Tecnológica
4.2
4.3
4.4
4.5
4.6
4.1

![Page 89: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/89.jpg)
89
4.1. ENIC (J. Eckert e J. Mauchly (1945))

![Page 90: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/90.jpg)
Foi no MIT que apareceram os primeiros resultados de pesquisas em relacao às imagens geradas por computador.
90
4. Evolucao Tecnológica
4.3
4.4
4.5
4.6
4.2
4.1

![Page 91: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/91.jpg)
91
4.2. Sketchpad (Ivan Sutherland, 1962)

![Page 92: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/92.jpg)
O Sketchpad foi a primeira interface aplicada ao desenho, o início do Computer-Aided Design (C.A.D.).
92
4. Evolucao Tecnológica
4.3
4.4
4.5
4.6
4.2
4.1

![Page 93: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/93.jpg)
4.2. Dynabook (Alan Kay, 1960)

![Page 94: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/94.jpg)
O Dynabook seria uma plataforma criada para um computador pessoal usando sistema de orientacao gráfica dentro da interface e fácil de usar por alunos de educacao primária
94
4. Evolucao Tecnológica
4.3
4.4
4.5
4.6
4.2
4.1

![Page 95: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/95.jpg)
95
4.2. Protótipo do Dynabook

![Page 96: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/96.jpg)
96
4.2. Mouse (Douglas Engelbart, 1968)

![Page 97: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/97.jpg)
A invencao do mouse gerou o princípio da manipulacao direta da interface.
97
4. Evolucao Tecnológica
4.3
4.4
4.5
4.6
4.2
4.1

![Page 98: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/98.jpg)
Mudanca de paradigma em relacao a informacao
98
4. Evolucao Tecnológica
4.4
4.5
4.6
4.1
4.2
4.3

![Page 99: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/99.jpg)
Essa mudanca diz respeito à forma em que a informacao era pensada. Em princípio, se pensava em informação estanque, depois, em informação compartilhada.
99
4. Evolucao Tecnológica
4.4
4.5
4.6
4.1
4.2
4.3

![Page 100: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/100.jpg)
100
4.3. Hipertexto (Theodore Holm Nelson, 1960)

![Page 101: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/101.jpg)
101
4.3. Arpanet (SRI, UCLA, UCSB e UU; 1969)

![Page 102: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/102.jpg)
102
4.3. Atari (Nolan Bushnell; 1980)

![Page 103: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/103.jpg)
Os jogos de arcade, como o Pong, foram a primeira forma de utilizacao exclusiva do computador para puro entretenimento.
103
4. Evolucao Tecnológica
4.4
4.5
4.6
4.1
4.2
4.3

![Page 104: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/104.jpg)
Interface Gráfica Atual
104
4. Evolucao Tecnológica
4.5
4.6
4.1
4.2
4.3
4.4

![Page 105: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/105.jpg)
105
4.4. Desktop e WIMP (Alan Kay, 1960)

![Page 106: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/106.jpg)
O Xerox Parc é considerado o primeiro computador de uma interface gráfica.
4. Evolucao Tecnológica
4.5
4.6
4.1
4.2
4.3
4.4

![Page 107: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/107.jpg)
4.4. Apple Lisa (Apple, 1976)

![Page 108: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/108.jpg)
No projeto Lisa é que foi estabelecido a ideia de interface amiga do usuário.
4. Evolucao Tecnológica
4.5
4.6
4.1
4.2
4.3
4.4

![Page 109: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/109.jpg)
4.4. Viewtel (Birmingham Post and Mail, 1979)

![Page 110: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/110.jpg)
Considerado o primeiro jornal do mundo que tinha por base um suporte eletrônico.
Era necessário um aparelho decodificador e funcionava de segunda a sábado, doze horas por dia.
4. Evolucao Tecnológica
4.5
4.6
4.1
4.2
4.3
4.4

![Page 111: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/111.jpg)
4.4. Apple Lisa (Apple, 1976)

![Page 112: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/112.jpg)
4.4. Macintosh (Apple, 1984)

![Page 113: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/113.jpg)
Estabeleceu-se entre os usuários uma nova forma de entender a interface gráfica; pela primeira vez foram utilizados os menus deslocáveis.Como resultado, houve a recuperacao da linguagem pictográfica para a gestao da informacao e a sinalizacao do espaco de informacao.O sucesso definitivo desse novo modelo de interface chegou em 1984 com o Macintosh.
4. Evolucao Tecnológica
4.5
4.6
4.1
4.2
4.3
4.4

![Page 114: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/114.jpg)
Internet e Ciberespaco
114
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 115: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/115.jpg)
Um dos avancos mais importantes no que se refere à história da interatividade é o progresso das telecomunicacões.
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 116: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/116.jpg)
4.5. Habitat (Lucas Films, 1984)

![Page 117: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/117.jpg)
Comunidades Virtuais acessíveis a milhares de computadores pessoais unidos entre si via modem.
Nesse espaco as pessoas poderiam fazer negócios, publicar jornais, assim como muitas outras coisas que podem ser feitas em um lugar real.
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 118: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/118.jpg)
4.5. Habitat (Lucas Films, 1984)

![Page 119: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/119.jpg)
O Habitat indica o caminho a ser seguido pelas interfaces gráficas que têm a responsabilidade de conectar muita gente entre si por meio de comunidade virtuais, com comunicacao em tempo real.
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 120: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/120.jpg)
4.5. Hypercard (Bill Atkinson, 1987)

![Page 121: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/121.jpg)
Desenvolvido como uma ferramenta com a finalidade de buscar, administrar e guardar todo tipo de informacao e ligá-la entre si.
Foi um dos primeiros sistemas hipermédia de sucesso antes do surgimento do World Wide Web.
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 122: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/122.jpg)
Curiosamente, Atkinson utilizou o ícone de uma casa (home) para representar a tela principal.
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 123: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/123.jpg)
4.5. Internet e Ciberespaco (Tim Berners-Lee, 1989)

![Page 124: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/124.jpg)
O advento da internet modificou completamente a nossa forma de interagir. Eram as ideias de Ted Nelson em estado latente.
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 125: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/125.jpg)
4.5. Mosaic (Marc Andressen, 1991)

![Page 126: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/126.jpg)
Considerado o primeiro navegador popular, permitia passar de uma página para outra clicando o mouse em uma série de ícones
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 127: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/127.jpg)
4.5. Navigator (Netscape, 1994)

![Page 128: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/128.jpg)
Netscape foi responsável por consolidar o público da internet.
4. Evolucao Tecnológica
4.6
4.1
4.2
4.3

4.4
4.5
![Page 129: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/129.jpg)
Guerra dos navegadores
129
4. Evolucao Tecnológica
4.1
4.2
4.3

4.4
4.5
4.6
![Page 130: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/130.jpg)
Guerra dos Browsers foi o nome dado a um período na história da Internet (1995 a 1999) no qual a Netscape perde a sua lideranca absoluta no mercado para a Microsoft e o Internet Explorer.
130
4. Evolucao Tecnológica
4.1
4.2
4.3

4.4
4.5
4.6
![Page 131: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/131.jpg)
131
![Page 132: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/132.jpg)
132
![Page 133: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/133.jpg)
4.6. Internet Explorer 1.0 e 2.0 (Microsoft, 1995)

![Page 134: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/134.jpg)
A tela enche-se de ícones em uma tentativa de oferecer mais servicos e arrebatar o mercado.
134
4. Evolucao Tecnológica
4.1
4.2
4.3

4.4
4.5
4.6
![Page 135: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/135.jpg)
4.6. Mosaic 2.0 (NCSA, 1995)

![Page 136: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/136.jpg)
Essa versao inclui dois ícones a mais: Recarga e Salvar Documento.
Até esse momento era o navegador que conseguia, com cinco ícones, a maior concisao de acões
136
4. Evolucao Tecnológica
4.1
4.2
4.3

4.4
4.5
4.6
![Page 137: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/137.jpg)
4.6. Navigator (Netscape, 1996)

![Page 138: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/138.jpg)
Apresenta uma importante melhora ao colocar dentro da janela de navegacao um ícone que levava a um programa de correio eletrônico.
138
4. Evolucao Tecnológica
4.1
4.2
4.3

4.4
4.5
4.6
![Page 139: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/139.jpg)
4.6. Internet Explorer 3.0 (Microsoft, 1996)

![Page 140: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/140.jpg)
Essa versao do IE marcou eliminacao dos botões quadrados como conhecíamos.
Apesar desse avanco o Netscape continuava com maior consistência gráfica em relacao ao conjunto de todos os ícones.
140
4. Evolucao Tecnológica
4.1
4.2
4.3

4.4
4.5
4.6
![Page 141: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/141.jpg)
4.6. Mosaic 3.0 (NCSA, 1997)

![Page 142: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/142.jpg)
Levava a navegacao com apenas 5 botões para um janela flutuante.
142
4. Evolucao Tecnológica
4.1
4.2
4.3

4.4
4.5
4.6
![Page 143: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/143.jpg)
4.6. Chrome (Google)

![Page 144: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/144.jpg)
O Navegador Chrome retoma a interface do Mosaic ao incluir uma lista mínima de ícones e integrar funcões como uma página do próprio navegador
144
4. Evolucao Tecnológica
4.1
4.2
4.3

4.4
4.5
4.6
![Page 145: (CDI) Aula02 - História da Interface Gráfica Digital](https://reader035.fdocumentos.com/reader035/viewer/2022062401/58ef25131a28ab06458b461d/html5/thumbnails/145.jpg)
Design de Interfaces Gráficas
Carlos Eduardo Brito NovaisLízie Sancho Nascimento
Unifor - Universidade de Fortaleza