conceitos de internet, web, hipermídia e ai - especialização design grafico
DESCRIPTION
Módulo "Mídias Audiovisuais e Hipermídia" - Especialização em Design Gráfico - Escola de Design UnisinosTRANSCRIPT
![Page 1: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/1.jpg)
Escola de Design UnisinosEspecialização em Design GráficoDesign de Hipermídia
![Page 2: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/2.jpg)
O QUE ACONTECEU PARA ESTARMOS TRATANDO DE DESIGN DE HIPERMÍDIA?
![Page 3: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/3.jpg)
Hipermídia e interfaces
![Page 4: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/4.jpg)
Web e softwares que usam a internet para “trabalhar”
![Page 5: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/5.jpg)
Processos de projeto
![Page 6: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/6.jpg)
Tendências
![Page 7: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/7.jpg)
Computadores calculam e armazenam.
Computadores contém dados.
Internet conecta redes de
computadores.
Computadores são organizáveis
em redes.
![Page 8: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/8.jpg)
Digitalização
Dos meios de produção (“criamos
conteúdo através de”): word, powerpoint,
excel, photoshop, web)
Dos suportes (“lugares onde guardamos
o conteúdo produzido”): pendrives,
DVDs, HDs, CDs, discos virtuais,
disquetes...
Dos processos: (“executamos tarefas
com o auxílio de”): cartões eletrônicos,
home-banking, celular, microondas, etc.
![Page 9: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/9.jpg)
Comunicação Mediada por
Computadores (CMC)
Tecnologias da Informação e da
Comunicação (TICs)
![Page 10: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/10.jpg)
A evolução da
computação está
ligada ao cálculo e
armazenamento.
![Page 11: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/11.jpg)
O computador realiza operações. Essa
faceta de máquina de processar, calcular,
buscar resultados é fundamental para
pensarmos a Internet.
![Page 12: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/12.jpg)
![Page 13: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/13.jpg)
![Page 14: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/14.jpg)
2001
2008
Professor at the Visual Arts Department, University of California - San Diego (UCSD).
![Page 15: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/15.jpg)
Examinando a interface, começando pela idéia de “tela”.
![Page 16: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/16.jpg)
A tela é uma tecnologia muito
anterior às possibilidades recentes
(VR) que tomamos contato hoje, da Renascença ao cinema do século XX.
![Page 17: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/17.jpg)
As soluções de Virtual Reality eram muito comentadas à época.
![Page 18: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/18.jpg)
Como o computador apresenta
continuidades e desafios em
relação à tradição da tela?
McLuhan e Remidiation.
![Page 19: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/19.jpg)
Genealogia da tela.
Classical Screen
A cultura visual do período moderno é caracterizada por um intrigante fenômeno – a existência de um outro espaço virtual, um outro mundo tridimensional fechado por uma moldura e situado dentro do nosso espaço normal.
![Page 20: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/20.jpg)
A moldura (frame) separa dois espaços absolutamente diferentes que de alguma forma coexistem.
![Page 21: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/21.jpg)
Herança da pintura: pensar nas proporções e nas nomenclaturas portrait e landscape usadas hoje.
![Page 22: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/22.jpg)
Dynamic screen
A tela que disponibiliza uma imagem que muda no tempo. A tela do cinema, tv, vídeo.
Impõe uma outro protoloco de visulização (viewing regime) entre a imagem e o espectador.
![Page 23: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/23.jpg)
Já aparecia na tela clássica, mas agora
aumenta a noção de “preenchimento completo da tela pela imagem”, descarte do espaço “ao redor” da tela pelo foco que a
mesma requisita. Imersão.
![Page 24: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/24.jpg)
A tela é agressiva.
Ela filtra o entorno.
![Page 25: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/25.jpg)
Esta relação-protocolo de visualização (tela
quer sua atenção total) é desafiada com a chegada da tela do computador.
![Page 26: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/26.jpg)
A tela do cinema resulta de uma evolução de dispositivos do século 18 e 19.
A tela do computador tem origem no radar.
Inovação ligada a tecnologias de controle, espionagem, mapeamento, segurança (militares): monitor de vídeo, tela de computador, controles.
![Page 27: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/27.jpg)
radar
Ao contrário da fotografia e do cinema (imagens estáticas, ou imagens estáticas em seqüência), vemos pela 1ª vez uma tela cuja imagem pode mudar em tempo real, mostrando mudanças no referente (posição de objeto, live vídeo ou mudança nos dados do computador).
![Page 28: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/28.jpg)
A tela de tempo real é o terceiro tipo de tela, inaugurada pelo radar.
![Page 29: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/29.jpg)
Janelas coexistentes no lugar de uma única imagem, princípio da Graphical User Interface (GUI).
![Page 30: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/30.jpg)
A concentração da visualização deixa de ser em apenas uma imagem. Blocos de dados de texto, imagem, vídeo sugerem que a tela do computador tem mais a ver com design gráfico e janelas.
![Page 31: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/31.jpg)
Tela interativa
A informação processada passa a ser representada na tela de tempo real: lugar de inserir e retirar informação de um computador.
![Page 32: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/32.jpg)
Ao mudar algo na tela, mudamos algo na memória do computador
![Page 33: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/33.jpg)
Clássica
Dinâmica
– Real time –
Interativa
![Page 34: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/34.jpg)
A tela e o corpo
A tela representa uma relação entre o espaço do espectador e o espaço da representação.
Com isso, o sujeito estaria existindo nesses dois espaços simultaneamente, princípio que nasce do “corte” promovido pela tela.
![Page 35: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/35.jpg)
As formas de representação ocidental pedem que o sujeito fique parado.
![Page 36: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/36.jpg)
Um ponto de vista, “descolado” do corpo.
![Page 37: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/37.jpg)
A invenção da perspectiva radicaliza ainda mais essa relação: o ponto de vista está pronto.
A tela funcionaria como um cofre em uma parede, no qual o “visível” foi depositado.
![Page 38: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/38.jpg)
Os aparatos que lidam com a luz e projeção conduziriam depois ao cinema requisita que o espectador se “aprisione” para - imóvel -assistir à imagens.
![Page 39: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/39.jpg)
Nesse sentido, também passamos de um mundo estável e estático (fotografias iniciais) para a “aventura da viagem”com a imagem em movimento, ainda que aprisionados.
![Page 40: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/40.jpg)
Salas de cinema: prisões, caverna de Platão. Representação confundida com perpcepção.
![Page 41: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/41.jpg)
A realidade virtual leva a câmera para a cabeça do usuário. Para olhar no espaço virtual é preciso olhar no espaço físico. O usuário precisa “trabalhar” (jogar?) para ver (lembrando o funcionário de Flusser).
![Page 42: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/42.jpg)
Continuamos grudados à máquina, mas agora precisamos nos mexer.
![Page 43: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/43.jpg)
A VR continuaria a tradição da simulação. Teríamos na tela a mudança da representação para a simulação.
![Page 44: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/44.jpg)
Pinturas de mosaicos, afrescos, nas paredes fundiam-se com a arquitetura e o “real” enquanto as telas da pintura em diante reforçavam a representação (e pediam a mobilidade do espectador). A tradição da simulação, portanto, é anterior às telas digitais (museus de cera, naturalismo, realismo, etc).
![Page 45: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/45.jpg)
O próximo passo (então) é carregar as telas que nos aprisionam conosco: a retina e tela vão se fundir. Mas ainda vivemos na sociedade da tela achatada, retangular que participa do nosso espaço como uma janela para outro lugar, a sociedade da tela.
![Page 46: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/46.jpg)
REMIDIAÇÃO
![Page 47: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/47.jpg)
Jay Bolter
Jay David Bolter (born August 17, 1951) is the Wesley Chair of New Media and a professor in the School of Literature, Communication and Culture at the Georgia Institute of Technology.
![Page 48: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/48.jpg)
Richard Grusin
Richard Grusin is a Professor of English at Wayne State University, where he teaches courses in film and media studies, new media theory, and American Studies.
http://premediation.blogspot.com/
![Page 49: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/49.jpg)
Conceitos associados
Mídia
Mediação
Interface
Experiência
![Page 50: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/50.jpg)
Premissa básica>
Haveria o seguinte contraditório (paradoxo): nossa cultura teria um simultâneo desejo por imedação e hipermediação, a dupla lógica da remidiação.
![Page 51: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/51.jpg)
Ou seja>
Nossa cultura desejaria simultaneamente multiplicar seus mídias e apagar todos os traços de mídia. O ato de multiplicar visaria o apagamento, idealmente.
![Page 52: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/52.jpg)
Imediação:
o meio desapareceria para nos deixarmos na presença da “coisa representada”. Mas a imediação dependeria da hipermediação (além de coexistir).
![Page 53: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/53.jpg)
Imediação:
A experiência da imediação é hipermediada pela INTERFACE (simuladores).
![Page 54: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/54.jpg)
Imediação>
A origem aponta para a trajetória da representação visual ocidental: a busca permanente por atingir a imediação implicaria em colocar o espectador no mesmo lugar dos objetos visualizados.
![Page 55: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/55.jpg)
A hipermediação tem ligação histórica com a fascinação pela “presença do meio”. Ícones e letras integram-se desde os manuscritos medievais.
![Page 56: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/56.jpg)
As mídias visuais digitais podem ser melhor compreendidas pelas formas pelas quais
homenageiam, rivalizam e revisam a
pintura em perspectiva, fotografia, filme, televisão e impresso. O que é novo sobre as “novas mídias” seria a forma particular com que estes aspectos são tratados entre as mídias novas e antigas.
![Page 57: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/57.jpg)
Opacidade e transparência
As novas mídias sempre andariam entre a opacidade e a transparência na remidiação que fazem das mídias anteriores.
Ao ver as formas de representação do passado, destaca-se as preocupações de transparecer-se para chegar ao real e o encantamento com a opacidade do próprio meio.
![Page 58: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/58.jpg)
Discutindo mídia>
As tecnologias da mídia envolvem relações que podem ser expressas em termos físicos, sociais, estéticos e econômicos.
Software + Usos + remodelagem = mídia
![Page 59: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/59.jpg)
Imediação>
O valor estético da “transparência” visando a imediação foi trabalhado pelas mídias antigas
nas técnicas de perspectiva, apagamento e automaticidade.
![Page 60: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/60.jpg)
Imediação>
Perspectiva: ver através, matematizar o espaço.
![Page 61: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/61.jpg)
Imediação>
Apagamento: trabalhar a superfície para apagar as pinceladas.
Tromp L´oeil: exemplo de buscar “enganar” o olho que acaba reforçando a qualidade do artista que aparece pelo apuro técnico.
![Page 62: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/62.jpg)
![Page 63: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/63.jpg)
Imediação>
Automaticidade: tecnologias fotográficas, cinema e depois televisão. A fotografia se tornou o aperfeiçoamento da perspectiva linear. A remoção do artista que ficava entre o espectador e a realidade da imagem.
![Page 64: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/64.jpg)
Imediação>
Mais tarde, a computação gráfica herda o cartesianismo e a matematização do espaço convocado pela perspectiva. Aí, é o programador que é “apagado” da experiência do software, ele não
“transparece” através da interface (todos os software são “iguais”).
![Page 65: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/65.jpg)
![Page 66: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/66.jpg)
Mediação da mediação
Não se media a experiência externa ,mas sim outros mídias. Toda nova tecnologia se define em relação com formas anteriores de representação.
(isso eles aprenderam com McLuhan)
![Page 67: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/67.jpg)
Horizonte da imediação>
Imediação: o autor se retira mais e o leitor seria mais envolvido.
![Page 68: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/68.jpg)
Porém...
A imediação proposta pelos meios seduz as percepções, mas de fato está amparada em atos de mediação contínuos (hipermediação).
![Page 69: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/69.jpg)
Hipermediação
Hipermediação: fascinação pelos mídias (meios).
Processo e performance são maiores que o resultado. Espaço heterogêno, janelizado, múltiplos atos de representação.
![Page 70: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/70.jpg)
Hipermediação
Hipermídia: múltiplas mídias + acesso randômico.
A interface do desktop não se apaga. Mídia (conteúdo) e software inclusive conversam.
![Page 71: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/71.jpg)
Hipermediação
A hipermediação já se apresentava em portas e cabines dos séculos XVI e XVII.
![Page 72: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/72.jpg)
Hipermediação
Tecnologias mecânicas de reprodução que também traziam a hipermediação:
Diorama, phenakistoscope, stereoscope: internalizavam a transparência da “imagem em movimento” dentro da estrutura hipermediada. Mas a vitória foi da maior transparência (ou ilusão de) dada pela fotografia.
![Page 73: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/73.jpg)
Diorama
![Page 74: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/74.jpg)
phenakistoscope
![Page 75: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/75.jpg)
Stereoscope
![Page 76: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/76.jpg)
Hipermediação>
A fotomontagem teria rompido com esse entendimento.
![Page 77: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/77.jpg)
Colagem, mash-up, DJ.
![Page 78: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/78.jpg)
Hipermediação
Quando a tecnologia se torna uma segunda natureza, a experiência hipermediada torna-se igualmente autêntica.
![Page 79: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/79.jpg)
Hipermediação>
A lógica da hipermediação expressa a tensão entre o espaço visual como mediado e como um espaço “real” que fica “além” da mediação.
Olhar para uma coisa, olhar através da coisa.
![Page 80: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/80.jpg)
Imediaçao/Hipermediação
A arte explora o sentido da interface, faz com que ela surja aos olhos do usuário, enquanto a “engenharia” aperfeiçoa a tecnologia para que ela desapareça.
![Page 81: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/81.jpg)
Imediação / Hipermediação>>>> Remidiação
a representação de um meio em outro. Característica definidora das novas mídias.
![Page 82: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/82.jpg)
Remidiação>
Atos de remidiação:
empréstimo, arquivamento, remodelagem, absorção.
![Page 83: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/83.jpg)
Dependência, contexto, reforma
Imediação e hipermediação nas interfaces
![Page 84: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/84.jpg)
![Page 85: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/85.jpg)
![Page 86: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/86.jpg)
![Page 87: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/87.jpg)
![Page 88: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/88.jpg)
![Page 89: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/89.jpg)
Sistema que faz a mediação de um
usuário solicitante com um sistema pré-
programado que busca atendar as
demandas do primeiro.
Duas áreas gostam de lidar muito com a
interface: Design + estudos de HCI
(Human-computer Interface)
Quando temos o Windows e cia, falamos
de interfaces gráficas digitais.
![Page 90: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/90.jpg)
Criada em 1991 por Tim-Berners LeeLee propôs a criação de um espaço hipertextual
global e aberto, no qual qualquer informação pudesse ser acessada através de um único Universal Document Identifier (Identificador
Universal de Documentos).
Nem tudo que é Internet, é web.
A web fez pela Internet o que o Windows fez pelo computador, tornou a interface “amigável”.
![Page 91: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/91.jpg)
Os softwares chamados
navegadores, permitem que se
acesse os documentos HTML
que universalizam a forma de
“recepção” do conteúdo que se
desejasse fazer circular pela
Internet. Textos, imagens,
sons, vídeos começam
a aparecer nas
interfaces gráficas
digitais da web.
O usuário ao requisitar uma
página, faz um “pedido” ao
servidor que a disponibilize.
![Page 92: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/92.jpg)
Heterogeneidade
Metamorfose
Potencialidade
Complexidade
Conectividade
Cartografia
![Page 93: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/93.jpg)
Heterogeneidade
o hipertexto é composto de diferentes nós que podem ser acessados por diferentes caminhos.
Todos os caminhos podem levar à sua marca. OU talvez não necessariamente no lugar que você queria que as pessoas chegassem ao pensar na sua marca.
![Page 94: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/94.jpg)
![Page 95: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/95.jpg)
Metamorfose
O hipertexto está em constante transformação
Desde a “cor” do link visitado até a organização dos conteúdos.
![Page 96: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/96.jpg)
![Page 97: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/97.jpg)
potencialidade
o usuário tem a possibilidade de recriar o hipertexto no momento de seu uso
![Page 98: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/98.jpg)
Complexidade
as conexões relacionam diferentes aspectos do hipertexto, mesmo que contraditórios.
![Page 99: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/99.jpg)
cartografia
o hipertexto deve oferecer recursos para a orientação flexível entre os caminhos possíveis.
![Page 100: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/100.jpg)
![Page 101: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/101.jpg)
Características da hipermídia
A hipermídia mistura diferentes tipos de linguagens
http://postvisual.com/theuninvited/en/
Hibridismo
![Page 102: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/102.jpg)
não-linearidade
o usuário não precisa seguir uma seqüência pré-determinada
![Page 103: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/103.jpg)
Interatividade
o usuário deve ter papel ativo na fruição da hipermídia.
![Page 104: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/104.jpg)
Navegabilidade
o usuário deve ter liberdade para ir aonde quiser, encontrar seu rumo ou se perder
![Page 105: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/105.jpg)
(hiper) Texto -> Mídia
Substituição ou evolução?
![Page 106: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/106.jpg)
(hiper) –texto> (mídia)
Hipermídia une os conceitos de não-linearidade (não-linear), hipertexto, interface e multimídia numa só linguagem. Traduzida erroneamente como mero suporte, hipermídia não se configura só como meio de transmissão de mensagens, e sim como uma linguagem com características próprias, com sua própria gramática. Hipermídia, diferentemente de multimídia, não é a mera reunião dos meios existentes, e sim a fusão desses meios a partir de elementos não-lineares.
![Page 107: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/107.jpg)
Mas a “máquina” continua operandonos “bastidores.”
![Page 108: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/108.jpg)
Web
Diversos grupos de mídia passam a
produzir suas “versões online” quando a
Web torna-se, o lado mídia da
Internet.
![Page 109: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/109.jpg)
Blogs“diários”
Gerenciador
de conteúdo
![Page 110: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/110.jpg)
![Page 113: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/113.jpg)
Web 2.0
Ao usar a máquina, ela nos usa.
É um processo, não uma nova versão.
Estrutura integrada de funcionalidades e conteúdo, criando serviços.
Publicação (inserção), visualização (representação), compartilhamento (indexação) das informações.
![Page 114: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/114.jpg)
Como ver o princípio em ação
Sites que nasceram sob idéia de publicação, visualização e compartilhamento: YouTube, Flickr, Slideshare, Delicious, etc.
![Page 115: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/115.jpg)
Tags (folskonomia)
![Page 117: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/117.jpg)
Sites que funcionam como organizadores de conteúdo que vem de outros lugares NetVibes (www.netvibes.com)
NetVibes da Agência Digital AG2
![Page 118: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/118.jpg)
Mash-Ups> A + B = C
Sites que organizam conteúdo possuem uma espécie de DNA (API)
a) Usa-se um DNA a favor de um objetivo específico: ver Mashup awards
b) Ao reunir dois DNAs diferentes, forma-se um terceiro “SER”: Wonderwall e Boulevard of Broken Dreams
![Page 119: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/119.jpg)
![Page 120: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/120.jpg)
Exemplos:
Diaroogle (1 API)
Visual Headlines (Flickr + CNN)
![Page 121: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/121.jpg)
Algumas conclusões:
1. Decisões estratégicas reúnem dados+mídia
2. Mutação permanente. Interfaces previstas, mas não previsíveis.
3. Informação embutível/distribuível para muitos lugares (igual e diferente ao mesmo tempo).
4. Vida pessoal e vida das marcas cada vez mais diluídas uma na outra?
![Page 122: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/122.jpg)
O sujeito deixa marcas.
O lado máquina nos mede, mensura, percebe nossos passos e comportamentos.
O lado mídia nos oferece ambientes para nos inserirmos em processos gregários, desenvolvermos estratégias identitárias, CONSTRUÍRMOS RELACIONAMENTO.
![Page 123: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/123.jpg)
Muito seguida, mas segue
somente
“a si mesma” através de
suas variações de profile.
Comportamento “HUB”
![Page 124: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/124.jpg)
Segue mais do que é seguida.
Cerca da metade dos updates
são de retorno ao cliente.
Comportamento Pró-Ativo/Atendimento
![Page 125: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/125.jpg)
Mais seguida do que segue. 2 followers
novos em media por dia.
O uso foi específico da ação NikePlus.
No entanto, são 8600 Citações para @nike
vs. 795 citações para @nikeplus.
A Nikeplus não envia nenhum tweet
desde o dia 13 de agosto de 2008.
Enquanto isso, vários usuários
que estão seguindo a marca
ainda mandam tweets relacionados,
tanto a marca como a suas campanhas.
Comportamento Sazonal
+ “Efeito” Morto-Vivo
![Page 126: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/126.jpg)
Não segue
ninguém e
é seguida por
mais de
9 mil users.
Há pouca transparência
da marca no seu
Twitter,
pois tudo o que é
postado
lá são notícias sobre
a empresa que
já são de
conhecimento geral
![Page 127: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/127.jpg)
781 seguidores, segue 14.
Praticamente não dá @,
à exceção do Twisney,
que parece ser
outro user oficial da Disney.
Este sim interage com
usuários do twitter em replies.
![Page 128: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/128.jpg)
(...) eles sempre tiram as dúvidas
dos clientes e são educados nas respostas,
o que a torna simpática.
Eles pedem desculpas
quando não podem responder
as dúvidas com rapidez,
anunciam seu profile
em outras redes sociais
e aspectos humanos
como um artigo sobre
sua responsabilidade global.
![Page 129: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/129.jpg)
No entanto, navegando por grande parte
das páginas do MicrosoftVista
não foi possível encontrar nenhuma URL.
Grande parte do conteúdo dos tweets
são notícias relacionadas
ao Vista e à Microsoft,
e até mesmo ao seu antecessor, o XP.
A outra parcela dos tweets, mais informal,
fica pelas respostas e conversas que
acabam sendo criadas pelos usuários.
![Page 130: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/130.jpg)
Equilíbrio entre número de
seguidores e número que segue.
Ainda que busque alguma
conversação com o usuário,
“fala muito de si mesma”.
Crescimento de 5 seguidores por dia.
Uma pessoa “real”
Identificada no
profile
![Page 131: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/131.jpg)
O uso de redes sociais (orkut, myspace, etc)
não pára de crescer no Brasil.
![Page 132: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/132.jpg)
Tá todo
mundo
conversando:
além de
crescer, o
Brasil é líder
mundial
de uso de
instant
messengers
(MSN, etc)
![Page 133: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/133.jpg)
![Page 134: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/134.jpg)
Isso nos faz olhar com mais atenção para entender que:
WIKI não é apenas uma enciclopédia
Blogs não são só diários abertos
YouTube não é TV na Internet
Conceitos ligados a isso: emergência
(sistema organizado e desorganizado
simultaneamente), Folksonomia
![Page 135: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/135.jpg)
Internet é: Máquina + Mídia +
Ambiente de relacionamento
![Page 136: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/136.jpg)
Banco de Dados MídiaAmbiente de
Relacionamento
Internet Web Web 2.0
![Page 137: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/137.jpg)
Resumão:
Para projetar experiências com a web, precisamos considerar:
Suas três facetas (dados, mídia, relacionamento)
Aceitar e usar as características do hipertexto e da hipermídia
Pensar em combinar os “DNAs” disponíveis
![Page 138: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/138.jpg)
Interfaces, telas e
arquitetura de
informação
![Page 139: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/139.jpg)
relacionamento
<proposon>mútuo vivo
![Page 140: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/140.jpg)
CANVAS
REPRESENTAÇÃO
![Page 141: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/141.jpg)
TELAS
![Page 142: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/142.jpg)
mídias
Tv
Rádio
Jornal
Revista
WebTv
Rádio
Jornal
Revista
Web
![Page 143: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/143.jpg)
INFORMAÇÕES
![Page 144: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/144.jpg)
SEGUNDO MANOVITCH, A TELA OU
INTERFACE DO COMPUTADOR É AQUELA
QUE “SEPARA DOIS ESPAÇOS
ABSOLUTAMENTE DIFERENTES E
QUE DE ALGUMA MANEIRA
COEXISTEM”.
Quem ou o que são esses espaços?
![Page 145: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/145.jpg)
“INTERFACEAR OU ATENDER SIMULTANEAMENTE A DOIS OU MAIS PÓLOS DE UM SISTEMA DE INFORMAÇÕES IMPLICA EM, DE UM LADO, CUMPRIR COM OS PROCEDIMENTOS CONTIDOS NO PÓLO INANIMADO, MAS PLANEJADO E PRÉ-DEFINIDO DO SISTEMA, E DE OUTRO LADO, ATENDER A DEMANDA DE EXPECTATIVAS PREVISÍVEIS POR PARTE DO INDIVÍDUO USUÁRIO E SOLICITANTE.” (FREITAS, P. 188)
![Page 146: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/146.jpg)
“OFERECER POSSIBILIDADE DE USO, COM LINGUAGENS DECODIFICÁVEIS A UM OU MAIS INDIVÍDUOS USUÁRIOS PODE SER CONSIDERADO O PRINCIPAL DESAFIO DE UMA INTERFACE”(FREITAS,P. 189)
A função da metáfora fica
bem clara conforme
a conclusão de Steven Johnson,
que diz que ela ajuda a
imaginar o que é informado,
propiciando a visão do todo
em uma única tela (Gosciola, 2003, 92).
![Page 147: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/147.jpg)
Outros exemplos de
metáforas nos ícones e
Remidiação: video players
![Page 148: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/148.jpg)
TELAS-INTERFACES-MÍDIAS
![Page 149: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/149.jpg)
Com a hipermídia, a discussão passaria a ser o surgimento, desenvolvimento e
transformação das interfaces que permitem comunicação e uso por imersão. (Freitas, p. 195)
Telas-interfaces-mídias
![Page 150: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/150.jpg)
Oops
![Page 151: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/151.jpg)
NUMA ANALOGIA ENTRE O DESIGN NA RELAÇÃO HUMANA NO CAMPO DO “REAL”, EM TERMOS DE PASSAGENS ENTRE AMBIENTES, O AUTOR AFIRMA QUE NO CIBERESPAÇO, “[O]S ELEMENTOS ALI PRESENTES, QUANDO PERMITEM A MOVIMENTAÇÃO DE SUA ESTRUTURA, APRESENTAM UM QUADRO HIERÁRQUICO DE MOVIMENTAÇÃO COM DIFERENTES GRAUS DE PERMISSIVIDADE”.
![Page 152: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/152.jpg)
A idéia de ambientação como repetição de elementos de cenário ou de sonoridade nas telas que não devem se restringir ao seu próprio espaço. Devem sim, dar indicações que cada uma é uma continuidade física, em representação, da outra, permitindo que se visualize a continuidade do ambiente a cada telapara promover maior empatia do usuário. (idem, p.98)
![Page 153: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/153.jpg)
![Page 154: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/154.jpg)
PARA O PLANEJAMENTO DE UMA INTERFACE, “DEVE-SE LEVAR EM CONSIDERAÇÃO O HISTÓRICO DAS EXPERIÊNCIAS”VIVENCIADAS DO INDIVÍDUO QUE SE PRETENDE SENSIBILIZAR, PODENDO-SE, ENTÃO, PROJETAR UM CONJUNTO DE ELEMENTOS ESTIMULANTES EM UM SISTEMA ESPECÍFICO DE INFORMAÇÕES, OBJETIVANDO-SE SUA INTERPRETAÇÃO UNÍVOCA E PREVIAMENTE DETERMINADA” (P. 191)
![Page 155: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/155.jpg)
![Page 156: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/156.jpg)
No início, havia 2 escolas de AI:
- Desenho de
wireframes e
mapas do site.
- Design estrutural da
informação (vocabulários
controlados e taxonomias).
´
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 157: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/157.jpg)
1. O design estrutural de ambientes de informação
compartilhados
2. A arte e a ciência da organização e categorização de
sites, intranets, comunidades online e softwares para
proporcionar usabilidade e “encontrabilidade”
3. Uma comunidade de prática emergente focada em levar
princípios de design e arquitetura ao ambiente digital
Segundo o Instituto de Arquitetura de Informação:
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 158: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/158.jpg)
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 159: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/159.jpg)
Luciana Cattony. Arquiteta de Informação da Gerdau.
Para mim arquitetura de informação é fazer o complexo se tornar algo
simples. É entender as necessidades do cliente, do seu negócio e
traduzí-las em ambientes amigáveis e intuitivos para o usuário.
Costumo dizer que o arquiteto de informação é como se fosse um
intérprete entre o cliente e o usuário, já que ele contribui
significativamente para que a comunicação e o intercâmbio /
compartilhamento de informações e experiências entre esses dois
lados sejam feitos de maneira eficaz.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 160: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/160.jpg)
Visão da disciplina
Mercado,
concorrentes,
necessidades
do negócio,
restrições
tecnológicas,
financeiras etc.
Quem são,
suas
necessidades,
hábitos,
maneiras
de navegar,
expectativas
etc.
O que o
site tem a
oferecer,
como será
criado o
conteúdo
etc.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 161: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/161.jpg)
• Encurtar o tempo de construção
• Tornar a manutenção mais simples
• Tornar a busca por informações mais
rápida
• Simplificar tarefas e processos
• Diminuir a necessidade de
treinamentos
• Agregar valor às marcas
• Criar experiências de uso memoráveis
Arquitetura de Informação –
Objetivos
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 162: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/162.jpg)
Entregáveis
O que é arquitetura de informação?
Atividades e entregáveis
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 163: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/163.jpg)
Resgate e levantamento de informações
Recebimento da demanda
Benchmarking
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 164: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/164.jpg)
Inventário / análise de conteúdo
Avaliação de maturidade
Avaliação Heurística
EstatísticasFonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 165: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/165.jpg)
Pesquisas quantitativas / qualitativas
Entrevistas
com usuáriosPersonas
Imagem personas: Adaptivepath
Focus Group
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 166: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/166.jpg)
Testes de usabilidade
Card Sorting
Imagens: TRY – Consultoria e pesquisa
Estudo etnográfico
Mapa do site
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 167: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/167.jpg)
Protótipos em papel
http://www.nngroup.com/reports/prototyping/video_stills.html
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 168: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/168.jpg)
Desenvolvimento de wireframes
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 169: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/169.jpg)
Wireframes x Layouts
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 170: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/170.jpg)
Wireframes x Layouts
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 171: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/171.jpg)
Acompanhamento do desenvolvimento
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 172: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/172.jpg)
• Hierarquia da informação
As informações devem ter pesos diferentes. Foque naquilo que é mais
importante e respeite uma hierarquia de informação.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 173: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/173.jpg)
• Apresentação da informação
Existem maneiras visuais e mais amigáveis para se transmitir uma informação.
Fonte: Luciana Cattony – plantabaixa.wordpress.com
![Page 174: Conceitos de Internet, Web, Hipermídia e AI - Especialização Design Grafico](https://reader034.vdocuments.site/reader034/viewer/2022052311/5588cb6fd8b42ae46d8b459d/html5/thumbnails/174.jpg)
• Apresentação da informação
Existem maneiras visuais e mais amigáveis para se transmitir uma informação.Fonte: Luciana Cattony – plantabaixa.wordpress.com
Fonte: Luciana Cattony – plantabaixa.wordpress.com