Your SlideShare is downloading. ×
0
Escola de Design Unisinos Especialização em Design Gráfico Design de Hipermídia
 
Hipermídia e interfaces
Web e softwares que usam a internet para “trabalhar”
Processos de projeto
Tendências
Computadores calculam e armazenam. Computadores contém dados. Internet conecta redes de computadores. Computadores são org...
Digitalização <ul><li>Dos meios de produção (“criamos conteúdo através de”): word, powerpoint, excel, photoshop,  web ) </...
<ul><li>Comunicação Mediada por Computadores (CMC) </li></ul><ul><li>Tecnologias da Informação e da Comunicação (TICs) </l...
A evolução da computação está  ligada ao cálculo e armazenamento.
O computador realiza operações. Essa faceta de máquina de processar, calcular, buscar resultados é fundamental para pensar...
 
Enquanto isso...
2001 2008 Professor at the  Visual Arts Department,  University of California - San Diego  (UCSD). 
<ul><li>Examinando a interface, começando pela idéia de “tela”. </li></ul>
<ul><li>A tela é uma tecnologia muito  anterior  às possibilidades recentes (VR) que tomamos contato hoje, da Renascença a...
<ul><li>As soluções de Virtual Reality eram muito comentadas à época. </li></ul>
<ul><li>Como o computador apresenta  continuidades e desafios  em relação à tradição da tela?  </li></ul><ul><li>McLuhan e...
Genealogia da tela. <ul><li>Classical Screen </li></ul><ul><li>A cultura visual do período moderno é caracterizada por um ...
<ul><li>A moldura (frame) separa dois espaços absolutamente diferentes que de alguma forma coexistem.  </li></ul>
<ul><li>Herança da pintura: pensar nas proporções e nas nomenclaturas portrait e landscape usadas hoje. </li></ul>
<ul><li>Dynamic screen </li></ul><ul><li>A tela que disponibiliza uma imagem que muda no tempo. A tela do cinema, tv, víde...
<ul><li>Já aparecia na tela clássica, mas agora aumenta a noção de  “preenchimento completo da tela pela imagem”, descarte...
A tela é agressiva.  Ela filtra o entorno.
<ul><li>Esta relação-protocolo de visualização (tela quer sua atenção total)  é desafiada com a chegada da tela do computa...
<ul><li>A tela do cinema resulta de uma evolução de dispositivos do século 18 e 19. </li></ul><ul><li>A tela do computador...
radar <ul><li>Ao contrário da fotografia e do cinema (imagens estáticas, ou imagens estáticas em seqüência), vemos pela 1ª...
<ul><li>A tela de tempo real é o terceiro tipo de tela, inaugurada pelo radar. </li></ul>
<ul><li>Janelas coexistentes no lugar de uma única imagem, princípio da Graphical User Interface (GUI).  </li></ul>
<ul><li>A concentração da visualização deixa de ser em apenas uma imagem. Blocos de dados de texto, imagem, vídeo sugerem ...
Tela interativa <ul><li>A informação processada passa a ser representada na tela de tempo real: lugar de inserir e retirar...
<ul><li>Ao mudar algo na tela, mudamos algo na memória do computador </li></ul>
<ul><li>Clássica </li></ul>Dinâmica –  Real time – Interativa
A tela e o corpo <ul><li>A tela representa uma relação entre o espaço do espectador e o espaço da representação. </li></ul...
<ul><li>As formas de representação ocidental pedem que o sujeito fique parado.  </li></ul>
<ul><li>Um ponto de vista, “descolado” do corpo. </li></ul>
<ul><li>A invenção da perspectiva radicaliza ainda mais essa relação: o ponto de vista está pronto. </li></ul><ul><li>A te...
<ul><li>Os aparatos que lidam com a luz  e projeção conduziriam depois ao cinema requisita que o espectador se “aprisione”...
<ul><li>Nesse sentido, também passamos de um mundo estável e estático (fotografias iniciais) para a “aventura da viagem”co...
<ul><li>Salas de cinema: prisões, caverna de Platão. Representação confundida com perpcepção. </li></ul>
<ul><li>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...
<ul><li>Continuamos grudados à máquina, mas agora precisamos nos mexer.  </li></ul>
<ul><li>A VR continuaria a tradição da simulação. Teríamos na tela a mudança da representação para a simulação.  </li></ul>
<ul><li>Pinturas de mosaicos, afrescos, nas paredes fundiam-se com a arquitetura e o “real” enquanto as telas da pintura e...
<ul><li>O próximo passo (então) é carregar as telas que nos aprisionam conosco: a retina e tela vão se fundir. Mas ainda v...
 
Jay Bolter <ul><li>Jay David Bolter  (born  August 17 ,  1951 ) is the Wesley Chair of New Media and a  professor  in the ...
Richard Grusin <ul><li>Richard Grusin is a Professor of English at Wayne State University, where he teaches courses in fil...
Conceitos associados <ul><li>Mídia </li></ul><ul><li>Mediação </li></ul><ul><li>Interface </li></ul><ul><li>Experiência </...
Premissa básica> <ul><li>Haveria o seguinte contraditório (paradoxo): nossa cultura teria um simultâneo desejo por imedaçã...
Ou seja> <ul><li>Nossa cultura desejaria simultaneamente multiplicar seus mídias e apagar todos os traços de mídia.  O ato...
Imediação: <ul><li>o meio desapareceria para nos deixarmos na presença da “coisa representada”.  Mas a imediação dependeri...
Imediação: <ul><li>A experiência da imediação é hipermediada pela INTERFACE (simuladores).  </li></ul>
Imediação> <ul><li>A origem aponta para a trajetória da representação visual ocidental: a busca permanente por atingir a i...
<ul><li>A hipermediação tem ligação histórica com a fascinação pela “presença do meio”. Ícones e letras integram-se desde ...
<ul><li>As mídias visuais digitais podem ser melhor compreendidas pelas formas pelas quais  homenageiam, rivalizam e revis...
Opacidade e transparência <ul><li>As novas mídias sempre andariam entre a opacidade e a transparência na remidiação que fa...
Discutindo mídia> <ul><li>As tecnologias da mídia envolvem relações que podem ser expressas em termos físicos, sociais, es...
Imediação> <ul><li>O valor estético da “transparência” visando a imediação foi trabalhado pelas mídias antigas nas técnica...
Imediação> <ul><li>Perspectiva: ver através, matematizar o espaço. </li></ul>
Imediação> <ul><li>Apagamento: trabalhar a superfície para apagar as pinceladas. </li></ul><ul><li>Tromp L´oeil: exemplo d...
 
Imediação> <ul><li>Automaticidade: tecnologias fotográficas, cinema e depois televisão. A fotografia se tornou o aperfeiço...
Imediação> <ul><li>Mais tarde, a computação gráfica herda o cartesianismo e a matematização do espaço convocado pela persp...
 
Mediação da mediação <ul><li>Não se media a experiência externa ,mas sim outros mídias. Toda nova tecnologia se define em ...
Horizonte da imediação> <ul><li>Imediação:  o autor se retira mais e o leitor seria mais envolvido. </li></ul>
Porém... <ul><li>A imediação proposta pelos meios seduz as percepções, mas de fato está amparada em atos de mediação contí...
Hipermediação <ul><li>Hipermediação: fascinação pelos mídias (meios). </li></ul><ul><li>Processo e performance são maiores...
Hipermediação <ul><li>Hipermídia:  múltiplas mídias + acesso randômico. </li></ul><ul><li>A interface do desktop não se ap...
Hipermediação <ul><li>A hipermediação já se apresentava em portas e cabines dos séculos XVI e XVII. </li></ul>
Hipermediação <ul><li>Tecnologias mecânicas de reprodução que também traziam a hipermediação: </li></ul><ul><li>Diorama, p...
Diorama
phenakistoscope
Stereoscope
Hipermediação> <ul><li>A fotomontagem teria rompido com esse entendimento. </li></ul>
<ul><li>Colagem, mash-up, DJ. </li></ul>
Hipermediação <ul><li>Quando a tecnologia se torna uma segunda natureza, a experiência hipermediada torna-se igualmente au...
Hipermediação> <ul><li>A lógica da hipermediação expressa a tensão entre o espaço visual como mediado e como um espaço “re...
Imediaçao/Hipermediação <ul><li>A arte explora o sentido da interface, faz com que ela surja aos olhos do usuário, enquant...
Imediação / Hipermediação >>>> Remidiação <ul><li>a representação de um meio em outro. Característica definidora das novas...
Remidiação> <ul><li>Atos de remidiação:  </li></ul><ul><li>empréstimo, arquivamento, remodelagem, absorção. </li></ul>
DINÂMICAS DA REMIDIAÇÃO  em YOUTUBE e  GLOBO MEDIA  CENTER/GLOBO VÍDEOS Dependência, contexto, reforma Imediação e hiperme...
Remidiação como característica  de uma genealogia de mídias Afiliação entre mídias (mais que evolução em só sentido) Remid...
Dependência, Contexto, Reforma TV,  Impresso... “ fala” através das interfaces Da lacuna a intra-remidiação
A watchpage como ocorrência de inter e intra remidiação em GV e YT
YouTube e Globo Media Center/Globo Vídeos são ocorrências na  web  que nasceram dependentes do comportamento de espectação...
Imediação e hipermediação nas interfaces Busca por transparência / mídia “original” Excitação da interface/ reconhecimento...
Interface (começo) <ul><li>Sistema que faz a mediação de um usuário solicitante com um sistema pré-programado que busca at...
World Wide Web <ul><li>Criada em 1991 por Tim-Berners Lee </li></ul><ul><li>Lee propôs a criação de um espaço hipertextual...
Os softwares chamados navegadores, permitem que se acesse os documentos HTML que universalizam a forma de “recepção” do co...
Princípios do Hipertexo <ul><li>Heterogeneidade </li></ul><ul><li>Metamorfose </li></ul><ul><li>Potencialidade </li></ul><...
Heterogeneidade <ul><li>o hipertexto é composto de diferentes nós que podem ser acessados por diferentes caminhos. </li></...
 
Metamorfose <ul><li>O hipertexto está em constante transformação </li></ul><ul><li>Desde a “cor” do link visitado até a or...
 
potencialidade <ul><li>o usuário tem a possibilidade de recriar o hipertexto no momento de seu uso </li></ul>
Complexidade <ul><li>as conexões relacionam diferentes aspectos do hipertexto, mesmo que contraditórios. </li></ul>
cartografia <ul><li>o hipertexto deve oferecer recursos para a orientação flexível entre os caminhos possíveis. </li></ul>
 
Características da hipermídia <ul><li>A hipermídia mistura diferentes tipos de linguagens </li></ul><ul><li>http://postvis...
não-linearidade <ul><li>o usuário não precisa seguir uma seqüência pré-determinada </li></ul>
Interatividade <ul><li>o usuário deve ter papel ativo na fruição da hipermídia. </li></ul>
Navegabilidade <ul><li>o usuário deve ter liberdade para ir aonde quiser, encontrar seu rumo ou se perder </li></ul>
(hiper) Texto -> Mídia <ul><li>Substituição ou evolução? </li></ul>
(hiper) –texto> (mídia) <ul><li>Hipermídia une os conceitos de não-linearidade ( não-linear ),  hipertexto , interface e m...
Mas a “máquina” continua operando nos “bastidores.”
Web <ul><li>Diversos grupos de mídia passam a produzir suas “versões online” quando a Web torna-se,  o lado mídia da Inter...
Blogs “ diários” Gerenciador de conteúdo
 
Website Portal Hotsite Blog
http://www.carolinasebben.blogspot.com/  (w3haus)
Web 2.0 <ul><li>Ao usar a máquina, ela nos usa. </li></ul><ul><li>É um processo, não uma nova versão. </li></ul><ul><li>Es...
Como ver o princípio em ação <ul><li>Sites que  nasceram  sob idéia de publicação, visualização e compartilhamento: YouTub...
Tags (folskonomia)
Mas tem muito mais: <ul><li>Go2web20.net </li></ul><ul><li>Feed My App </li></ul>
Sites que funcionam como organizadores de conteúdo que vem de  outros lugares <ul><li>NetVibes ( www.netvibes.com ) </li><...
Mash-Ups> A + B = C <ul><li>Sites que organizam conteúdo possuem uma espécie de DNA (API) </li></ul><ul><li>Usa-se um DNA ...
 
Exemplos: <ul><li>Diaroogle  (1 API) </li></ul><ul><li>Visual  Headlines (Flickr + CNN) </li></ul>
Algumas conclusões: <ul><li>Decisões estratégicas reúnem dados+mídia </li></ul><ul><li>Mutação permanente.  Interfaces pre...
O sujeito deixa marcas. <ul><li>O lado máquina nos mede, mensura, percebe nossos passos e comportamentos. </li></ul><ul><l...
Muito seguida, mas segue  somente  “ a si mesma” através de  suas variações de profile. Comportamento “HUB”
Segue mais do que é seguida.  Cerca da metade dos updates  são de retorno ao cliente.   Comportamento Pró-Ativo/Atendimento
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 8...
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 ...
781 seguidores, segue 14. Praticamente não dá @,  à exceção do Twisney,  que parece ser  outro user oficial da Disney.  Es...
(...) eles sempre tiram as dúvidas  dos clientes e são educados nas respostas,  o que a torna simpática.  Eles pedem descu...
No entanto, navegando por grande parte  das páginas do MicrosoftVista  não foi possível encontrar nenhuma URL.  Grande par...
Equilíbrio entre número de  seguidores e número que segue.  Ainda que busque alguma  conversação com o usuário,  “ fala mu...
O uso de redes sociais (orkut, myspace, etc)  não pára de crescer no Brasil.
Tá todo mundo conversando: além de crescer, o Brasil é líder mundial de uso de instant messengers (MSN, etc)
 
Isso nos faz olhar com mais atenção para entender que: <ul><li>WIKI não é apenas uma enciclopédia </li></ul><ul><li>Blogs ...
Internet é: Máquina + Mídia + Ambiente de relacionamento
Uma caracterização da Internet Banco de Dados Mídia Ambiente de  Relacionamento Internet Web Web 2.0
Resumão: <ul><li>Para projetar experiências com a web, precisamos considerar: </li></ul><ul><li>Suas três facetas (dados, ...
Interfaces, telas e arquitetura de informação
relacionamento  <proposon> mútuo vivo
 
 
mídias Tv Rádio Jornal Revista Web Tv Rádio Jornal Revista Web
 
Quem ou o que são esses espaços?
 
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 é i...
Outros exemplos de  metáforas nos ícones e  Remidiação:  video players
 
<ul><li>Com a hipermídia, a discussão passaria a ser o surgimento, desenvolvimento e transformação das  interfaces que per...
Oops
 
<ul><li>A idéia de ambientação como repetição de elementos de cenário  ou de sonoridade nas telas que não devem se restrin...
 
 
 
No início, havia 2 escolas de AI: - Design estrutural da informação (vocabulários controlados e taxonomias). ´ Fonte: Luci...
<ul><li>1. O design estrutural de ambientes de informação </li></ul><ul><li>compartilhados </li></ul><ul><li>2. A arte e a...
Fonte: Luciana Cattony – plantabaixa.wordpress.com
Luciana Cattony. Arquiteta de Informação da Gerdau. Para mim arquitetura de informação é fazer o  complexo se tornar algo ...
Visão da disciplina Mercado, concorrentes, necessidades  do negócio, restrições tecnológicas, financeiras etc. Quem são, s...
<ul><li>Encurtar  o tempo de construção </li></ul><ul><li>Tornar a manutenção  mais simples </li></ul><ul><li>Tornar a bus...
Entregáveis O que é arquitetura de informação? Atividades e entregáveis Fonte: Luciana Cattony – plantabaixa.wordpress.com
Resgate e levantamento de informações Recebimento da demanda Benchmarking Fonte: Luciana Cattony – plantabaixa.wordpress.com
Inventário / análise de conteúdo  Avaliação de maturidade Avaliação Heurística Estatísticas Fonte: Luciana Cattony – plant...
Pesquisas quantitativas / qualitativas Entrevistas  com usuários Personas Imagem personas: Adaptivepath Focus Group Fonte:...
Testes de usabilidade <ul><ul><li>Card Sorting </li></ul></ul>Imagens: TRY – Consultoria e pesquisa <ul><ul><li>Estudo etn...
Protótipos em papel http://www.nngroup.com/reports/prototyping/video_stills.html Fonte: Luciana Cattony – plantabaixa.word...
Desenvolvimento de wireframes Fonte: Luciana Cattony – plantabaixa.wordpress.com
Wireframes  x Layouts Fonte: Luciana Cattony – plantabaixa.wordpress.com
Wireframes  x Layouts Fonte: Luciana Cattony – plantabaixa.wordpress.com
Acompanhamento do desenvolvimento Fonte: Luciana Cattony – plantabaixa.wordpress.com
<ul><li>Hierarquia da informação </li></ul><ul><li>As informações devem ter pesos diferentes. Foque naquilo que é mais imp...
<ul><li>Apresentação da informação </li></ul><ul><li>Existem maneiras visuais e mais amigáveis para se transmitir uma info...
<ul><li>Apresentação da informação </li></ul><ul><li>Existem maneiras visuais e mais amigáveis para se transmitir uma info...
Upcoming SlideShare
Loading in...5
×

Aula1mdg2edicao

692

Published on

Módulo "Mídias Audiovisuais e Hipermídia" - Especialização em Design Gráfico - Escola de Design Unisinos

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
692
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Aula1mdg2edicao"

  1. 1. Escola de Design Unisinos Especialização em Design Gráfico Design de Hipermídia
  2. 3. Hipermídia e interfaces
  3. 4. Web e softwares que usam a internet para “trabalhar”
  4. 5. Processos de projeto
  5. 6. Tendências
  6. 7. Computadores calculam e armazenam. Computadores contém dados. Internet conecta redes de computadores. Computadores são organizáveis em redes.
  7. 8. Digitalização <ul><li>Dos meios de produção (“criamos conteúdo através de”): word, powerpoint, excel, photoshop, web ) </li></ul><ul><li>Dos suportes (“lugares onde guardamos o conteúdo produzido”): pendrives, DVDs, HDs, CDs, discos virtuais, disquetes... </li></ul><ul><li>Dos processos: (“executamos tarefas com o auxílio de”): cartões eletrônicos, home-banking, celular, microondas, etc. </li></ul>
  8. 9. <ul><li>Comunicação Mediada por Computadores (CMC) </li></ul><ul><li>Tecnologias da Informação e da Comunicação (TICs) </li></ul>
  9. 10. A evolução da computação está ligada ao cálculo e armazenamento.
  10. 11. O computador realiza operações. Essa faceta de máquina de processar, calcular, buscar resultados é fundamental para pensarmos a Internet.
  11. 13. Enquanto isso...
  12. 14. 2001 2008 Professor at the  Visual Arts Department,  University of California - San Diego (UCSD). 
  13. 15. <ul><li>Examinando a interface, começando pela idéia de “tela”. </li></ul>
  14. 16. <ul><li>A tela é uma tecnologia muito anterior às possibilidades recentes (VR) que tomamos contato hoje, da Renascença ao cinema do século XX. </li></ul>
  15. 17. <ul><li>As soluções de Virtual Reality eram muito comentadas à época. </li></ul>
  16. 18. <ul><li>Como o computador apresenta continuidades e desafios em relação à tradição da tela? </li></ul><ul><li>McLuhan e Remidiation. </li></ul>
  17. 19. Genealogia da tela. <ul><li>Classical Screen </li></ul><ul><li>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. </li></ul>
  18. 20. <ul><li>A moldura (frame) separa dois espaços absolutamente diferentes que de alguma forma coexistem. </li></ul>
  19. 21. <ul><li>Herança da pintura: pensar nas proporções e nas nomenclaturas portrait e landscape usadas hoje. </li></ul>
  20. 22. <ul><li>Dynamic screen </li></ul><ul><li>A tela que disponibiliza uma imagem que muda no tempo. A tela do cinema, tv, vídeo. </li></ul><ul><li>Impõe uma outro protoloco de visulização (viewing regime) entre a imagem e o espectador. </li></ul>
  21. 23. <ul><li>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. </li></ul>
  22. 24. A tela é agressiva. Ela filtra o entorno.
  23. 25. <ul><li>Esta relação-protocolo de visualização (tela quer sua atenção total) é desafiada com a chegada da tela do computador . </li></ul>
  24. 26. <ul><li>A tela do cinema resulta de uma evolução de dispositivos do século 18 e 19. </li></ul><ul><li>A tela do computador tem origem no radar. </li></ul><ul><li>Inovação ligada a tecnologias de controle, espionagem, mapeamento, segurança (militares): monitor de vídeo, tela de computador, controles. </li></ul>
  25. 27. radar <ul><li>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). </li></ul>
  26. 28. <ul><li>A tela de tempo real é o terceiro tipo de tela, inaugurada pelo radar. </li></ul>
  27. 29. <ul><li>Janelas coexistentes no lugar de uma única imagem, princípio da Graphical User Interface (GUI). </li></ul>
  28. 30. <ul><li>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. </li></ul>
  29. 31. Tela interativa <ul><li>A informação processada passa a ser representada na tela de tempo real: lugar de inserir e retirar informação de um computador. </li></ul>
  30. 32. <ul><li>Ao mudar algo na tela, mudamos algo na memória do computador </li></ul>
  31. 33. <ul><li>Clássica </li></ul>Dinâmica – Real time – Interativa
  32. 34. A tela e o corpo <ul><li>A tela representa uma relação entre o espaço do espectador e o espaço da representação. </li></ul><ul><li>Com isso, o sujeito estaria existindo nesses dois espaços simultaneamente , princípio que nasce do “corte” promovido pela tela. </li></ul>
  33. 35. <ul><li>As formas de representação ocidental pedem que o sujeito fique parado. </li></ul>
  34. 36. <ul><li>Um ponto de vista, “descolado” do corpo. </li></ul>
  35. 37. <ul><li>A invenção da perspectiva radicaliza ainda mais essa relação: o ponto de vista está pronto. </li></ul><ul><li>A tela funcionaria como um cofre em uma parede, no qual o “visível” foi depositado. </li></ul>
  36. 38. <ul><li>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. </li></ul>
  37. 39. <ul><li>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. </li></ul>
  38. 40. <ul><li>Salas de cinema: prisões, caverna de Platão. Representação confundida com perpcepção. </li></ul>
  39. 41. <ul><li>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). </li></ul>
  40. 42. <ul><li>Continuamos grudados à máquina, mas agora precisamos nos mexer. </li></ul>
  41. 43. <ul><li>A VR continuaria a tradição da simulação. Teríamos na tela a mudança da representação para a simulação. </li></ul>
  42. 44. <ul><li>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). </li></ul>
  43. 45. <ul><li>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. </li></ul>
  44. 47. Jay Bolter <ul><li>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 . </li></ul>
  45. 48. Richard Grusin <ul><li>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. </li></ul>http://premediation.blogspot.com/
  46. 49. Conceitos associados <ul><li>Mídia </li></ul><ul><li>Mediação </li></ul><ul><li>Interface </li></ul><ul><li>Experiência </li></ul>
  47. 50. Premissa básica> <ul><li>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. </li></ul>
  48. 51. Ou seja> <ul><li>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. </li></ul>
  49. 52. Imediação: <ul><li>o meio desapareceria para nos deixarmos na presença da “coisa representada”. Mas a imediação dependeria da hipermediação (além de coexistir). </li></ul>
  50. 53. Imediação: <ul><li>A experiência da imediação é hipermediada pela INTERFACE (simuladores). </li></ul>
  51. 54. Imediação> <ul><li>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. </li></ul>
  52. 55. <ul><li>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. </li></ul>
  53. 56. <ul><li>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. </li></ul>
  54. 57. Opacidade e transparência <ul><li>As novas mídias sempre andariam entre a opacidade e a transparência na remidiação que fazem das mídias anteriores. </li></ul><ul><li>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. </li></ul>
  55. 58. Discutindo mídia> <ul><li>As tecnologias da mídia envolvem relações que podem ser expressas em termos físicos, sociais, estéticos e econômicos. </li></ul><ul><li>Software + Usos + remodelagem = mídia </li></ul>
  56. 59. Imediação> <ul><li>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. </li></ul>
  57. 60. Imediação> <ul><li>Perspectiva: ver através, matematizar o espaço. </li></ul>
  58. 61. Imediação> <ul><li>Apagamento: trabalhar a superfície para apagar as pinceladas. </li></ul><ul><li>Tromp L´oeil: exemplo de buscar “enganar” o olho que acaba reforçando a qualidade do artista que aparece pelo apuro técnico. </li></ul>
  59. 63. Imediação> <ul><li>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. </li></ul>
  60. 64. Imediação> <ul><li>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”). </li></ul>
  61. 66. Mediação da mediação <ul><li>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. </li></ul><ul><li>(isso eles aprenderam com McLuhan) </li></ul>
  62. 67. Horizonte da imediação> <ul><li>Imediação: o autor se retira mais e o leitor seria mais envolvido. </li></ul>
  63. 68. Porém... <ul><li>A imediação proposta pelos meios seduz as percepções, mas de fato está amparada em atos de mediação contínuos (hipermediação). </li></ul>
  64. 69. Hipermediação <ul><li>Hipermediação: fascinação pelos mídias (meios). </li></ul><ul><li>Processo e performance são maiores que o resultado. Espaço heterogêno, janelizado, múltiplos atos de representação. </li></ul>
  65. 70. Hipermediação <ul><li>Hipermídia: múltiplas mídias + acesso randômico. </li></ul><ul><li>A interface do desktop não se apaga. Mídia (conteúdo) e software inclusive conversam. </li></ul>
  66. 71. Hipermediação <ul><li>A hipermediação já se apresentava em portas e cabines dos séculos XVI e XVII. </li></ul>
  67. 72. Hipermediação <ul><li>Tecnologias mecânicas de reprodução que também traziam a hipermediação: </li></ul><ul><li>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. </li></ul>
  68. 73. Diorama
  69. 74. phenakistoscope
  70. 75. Stereoscope
  71. 76. Hipermediação> <ul><li>A fotomontagem teria rompido com esse entendimento. </li></ul>
  72. 77. <ul><li>Colagem, mash-up, DJ. </li></ul>
  73. 78. Hipermediação <ul><li>Quando a tecnologia se torna uma segunda natureza, a experiência hipermediada torna-se igualmente autêntica. </li></ul>
  74. 79. Hipermediação> <ul><li>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. </li></ul><ul><li>Olhar para uma coisa, olhar através da coisa. </li></ul>
  75. 80. Imediaçao/Hipermediação <ul><li>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. </li></ul>
  76. 81. Imediação / Hipermediação >>>> Remidiação <ul><li>a representação de um meio em outro. Característica definidora das novas mídias. </li></ul>
  77. 82. Remidiação> <ul><li>Atos de remidiação: </li></ul><ul><li>empréstimo, arquivamento, remodelagem, absorção. </li></ul>
  78. 83. DINÂMICAS DA REMIDIAÇÃO em YOUTUBE e GLOBO MEDIA CENTER/GLOBO VÍDEOS Dependência, contexto, reforma Imediação e hipermediação nas interfaces
  79. 84. Remidiação como característica de uma genealogia de mídias Afiliação entre mídias (mais que evolução em só sentido) Remidiação das práticas materiais e arranjos sociais
  80. 85. Dependência, Contexto, Reforma TV, Impresso... “ fala” através das interfaces Da lacuna a intra-remidiação
  81. 86. A watchpage como ocorrência de inter e intra remidiação em GV e YT
  82. 87. YouTube e Globo Media Center/Globo Vídeos são ocorrências na web que nasceram dependentes do comportamento de espectação de vídeos já presente no tecido social, mas que do ponto de vista da materialização dessa relação de espectação, disponibilizam-se em webpages que reapropriam princípios de design gráfico e das interfaces de software .
  83. 88. Imediação e hipermediação nas interfaces Busca por transparência / mídia “original” Excitação da interface/ reconhecimento do meio
  84. 89. Interface (começo) <ul><li>Sistema que faz a mediação de um usuário solicitante com um sistema pré-programado que busca atendar as demandas do primeiro. </li></ul><ul><li>Duas áreas gostam de lidar muito com a interface: Design + estudos de HCI (Human-computer Interface) </li></ul><ul><li>Quando temos o Windows e cia, falamos de interfaces gráficas digitais. </li></ul>
  85. 90. World Wide Web <ul><li>Criada em 1991 por Tim-Berners Lee </li></ul><ul><li>Lee 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). </li></ul><ul><li>Nem tudo que é Internet, é web. </li></ul><ul><li>A web fez pela Internet o que o Windows fez pelo computador, tornou a interface “amigável”. </li></ul>
  86. 91. 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.
  87. 92. Princípios do Hipertexo <ul><li>Heterogeneidade </li></ul><ul><li>Metamorfose </li></ul><ul><li>Potencialidade </li></ul><ul><li>Complexidade </li></ul><ul><li>Conectividade </li></ul><ul><li>Cartografia </li></ul>
  88. 93. Heterogeneidade <ul><li>o hipertexto é composto de diferentes nós que podem ser acessados por diferentes caminhos. </li></ul><ul><li>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. </li></ul>
  89. 95. Metamorfose <ul><li>O hipertexto está em constante transformação </li></ul><ul><li>Desde a “cor” do link visitado até a organização dos conteúdos. </li></ul>
  90. 97. potencialidade <ul><li>o usuário tem a possibilidade de recriar o hipertexto no momento de seu uso </li></ul>
  91. 98. Complexidade <ul><li>as conexões relacionam diferentes aspectos do hipertexto, mesmo que contraditórios. </li></ul>
  92. 99. cartografia <ul><li>o hipertexto deve oferecer recursos para a orientação flexível entre os caminhos possíveis. </li></ul>
  93. 101. Características da hipermídia <ul><li>A hipermídia mistura diferentes tipos de linguagens </li></ul><ul><li>http://postvisual.com/theuninvited/en/ </li></ul>Hibridismo
  94. 102. não-linearidade <ul><li>o usuário não precisa seguir uma seqüência pré-determinada </li></ul>
  95. 103. Interatividade <ul><li>o usuário deve ter papel ativo na fruição da hipermídia. </li></ul>
  96. 104. Navegabilidade <ul><li>o usuário deve ter liberdade para ir aonde quiser, encontrar seu rumo ou se perder </li></ul>
  97. 105. (hiper) Texto -> Mídia <ul><li>Substituição ou evolução? </li></ul>
  98. 106. (hiper) –texto> (mídia) <ul><li>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. </li></ul>
  99. 107. Mas a “máquina” continua operando nos “bastidores.”
  100. 108. Web <ul><li>Diversos grupos de mídia passam a produzir suas “versões online” quando a Web torna-se, o lado mídia da Internet. </li></ul>
  101. 109. Blogs “ diários” Gerenciador de conteúdo
  102. 111. Website Portal Hotsite Blog
  103. 112. http://www.carolinasebben.blogspot.com/ (w3haus)
  104. 113. Web 2.0 <ul><li>Ao usar a máquina, ela nos usa. </li></ul><ul><li>É um processo, não uma nova versão. </li></ul><ul><li>Estrutura integrada de funcionalidades e conteúdo, criando serviços. </li></ul><ul><li>Publicação (inserção), visualização (representação), compartilhamento (indexação) das informações. </li></ul>
  105. 114. Como ver o princípio em ação <ul><li>Sites que nasceram sob idéia de publicação, visualização e compartilhamento: YouTube, Flickr, Slideshare, Delicious, etc. </li></ul>
  106. 115. Tags (folskonomia)
  107. 116. Mas tem muito mais: <ul><li>Go2web20.net </li></ul><ul><li>Feed My App </li></ul>
  108. 117. Sites que funcionam como organizadores de conteúdo que vem de outros lugares <ul><li>NetVibes ( www.netvibes.com ) </li></ul><ul><li>NetVibes da Agência Digital AG2 </li></ul>
  109. 118. Mash-Ups> A + B = C <ul><li>Sites que organizam conteúdo possuem uma espécie de DNA (API) </li></ul><ul><li>Usa-se um DNA a favor de um objetivo específico: ver Mashup awards </li></ul><ul><li>b) Ao reunir dois DNAs diferentes, forma-se um terceiro “SER”: Wonderwall e Boulevard of Broken Dreams </li></ul>
  110. 120. Exemplos: <ul><li>Diaroogle (1 API) </li></ul><ul><li>Visual Headlines (Flickr + CNN) </li></ul>
  111. 121. Algumas conclusões: <ul><li>Decisões estratégicas reúnem dados+mídia </li></ul><ul><li>Mutação permanente. Interfaces previstas, mas não previsíveis. </li></ul><ul><li>3. Informação embutível/distribuível para muitos lugares (igual e diferente ao mesmo tempo). </li></ul><ul><li>4. Vida pessoal e vida das marcas cada vez mais diluídas uma na outra? </li></ul>
  112. 122. O sujeito deixa marcas. <ul><li>O lado máquina nos mede, mensura, percebe nossos passos e comportamentos. </li></ul><ul><li>O lado mídia nos oferece ambientes para nos inserirmos em processos gregários, desenvolvermos estratégias identitárias, CONSTRUÍRMOS RELACIONAMENTO. </li></ul>
  113. 123. Muito seguida, mas segue somente “ a si mesma” através de suas variações de profile. Comportamento “HUB”
  114. 124. Segue mais do que é seguida. Cerca da metade dos updates são de retorno ao cliente. Comportamento Pró-Ativo/Atendimento
  115. 125. 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
  116. 126. 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
  117. 127. 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.
  118. 128. (...) 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.
  119. 129. 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.
  120. 130. 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
  121. 131. O uso de redes sociais (orkut, myspace, etc) não pára de crescer no Brasil.
  122. 132. Tá todo mundo conversando: além de crescer, o Brasil é líder mundial de uso de instant messengers (MSN, etc)
  123. 134. Isso nos faz olhar com mais atenção para entender que: <ul><li>WIKI não é apenas uma enciclopédia </li></ul><ul><li>Blogs não são só diários abertos </li></ul><ul><li>YouTube não é TV na Internet </li></ul>Conceitos ligados a isso: emergência (sistema organizado e desorganizado simultaneamente), Folksonomia
  124. 135. Internet é: Máquina + Mídia + Ambiente de relacionamento
  125. 136. Uma caracterização da Internet Banco de Dados Mídia Ambiente de Relacionamento Internet Web Web 2.0
  126. 137. Resumão: <ul><li>Para projetar experiências com a web, precisamos considerar: </li></ul><ul><li>Suas três facetas (dados, mídia, relacionamento) </li></ul><ul><li>Aceitar e usar as características do hipertexto e da hipermídia </li></ul><ul><li>Pensar em combinar os “DNAs” disponíveis </li></ul>
  127. 138. Interfaces, telas e arquitetura de informação
  128. 139. relacionamento <proposon> mútuo vivo
  129. 142. mídias Tv Rádio Jornal Revista Web Tv Rádio Jornal Revista Web
  130. 144. Quem ou o que são esses espaços?
  131. 146. 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).
  132. 147. Outros exemplos de metáforas nos ícones e Remidiação: video players
  133. 149. <ul><li>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) </li></ul>Telas-interfaces-mídias
  134. 150. Oops
  135. 152. <ul><li>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 tela para promover maior empatia do usuário. (idem, p.98) </li></ul>
  136. 156. No início, havia 2 escolas de AI: - Design estrutural da informação (vocabulários controlados e taxonomias). ´ Fonte: Luciana Cattony – plantabaixa.wordpress.com - Desenho de wireframes e mapas do site.
  137. 157. <ul><li>1. O design estrutural de ambientes de informação </li></ul><ul><li>compartilhados </li></ul><ul><li>2. A arte e a ciência da organização e categorização de </li></ul><ul><li>sites, intranets, comunidades online e softwares para </li></ul><ul><li>proporcionar usabilidade e “encontrabilidade” </li></ul><ul><li>3. Uma comunidade de prática emergente focada em levar </li></ul><ul><li>princípios de design e arquitetura ao ambiente digital </li></ul>Segundo o Instituto de Arquitetura de Informação: Fonte: Luciana Cattony – plantabaixa.wordpress.com
  138. 158. Fonte: Luciana Cattony – plantabaixa.wordpress.com
  139. 159. 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
  140. 160. 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
  141. 161. <ul><li>Encurtar o tempo de construção </li></ul><ul><li>Tornar a manutenção mais simples </li></ul><ul><li>Tornar a busca por informações mais rápida </li></ul><ul><li>Simplificar tarefas e processos </li></ul><ul><li>Diminuir a necessidade de treinamentos </li></ul><ul><li>Agregar valor às marcas </li></ul><ul><li>Criar experiências de uso memoráveis </li></ul>Arquitetura de Informação – Objetivos Fonte: Luciana Cattony – plantabaixa.wordpress.com
  142. 162. Entregáveis O que é arquitetura de informação? Atividades e entregáveis Fonte: Luciana Cattony – plantabaixa.wordpress.com
  143. 163. Resgate e levantamento de informações Recebimento da demanda Benchmarking Fonte: Luciana Cattony – plantabaixa.wordpress.com
  144. 164. Inventário / análise de conteúdo Avaliação de maturidade Avaliação Heurística Estatísticas Fonte: Luciana Cattony – plantabaixa.wordpress.com
  145. 165. Pesquisas quantitativas / qualitativas Entrevistas com usuários Personas Imagem personas: Adaptivepath Focus Group Fonte: Luciana Cattony – plantabaixa.wordpress.com
  146. 166. Testes de usabilidade <ul><ul><li>Card Sorting </li></ul></ul>Imagens: TRY – Consultoria e pesquisa <ul><ul><li>Estudo etnográfico </li></ul></ul>Mapa do site Fonte: Luciana Cattony – plantabaixa.wordpress.com
  147. 167. Protótipos em papel http://www.nngroup.com/reports/prototyping/video_stills.html Fonte: Luciana Cattony – plantabaixa.wordpress.com
  148. 168. Desenvolvimento de wireframes Fonte: Luciana Cattony – plantabaixa.wordpress.com
  149. 169. Wireframes x Layouts Fonte: Luciana Cattony – plantabaixa.wordpress.com
  150. 170. Wireframes x Layouts Fonte: Luciana Cattony – plantabaixa.wordpress.com
  151. 171. Acompanhamento do desenvolvimento Fonte: Luciana Cattony – plantabaixa.wordpress.com
  152. 172. <ul><li>Hierarquia da informação </li></ul><ul><li>As informações devem ter pesos diferentes. Foque naquilo que é mais importante e respeite uma hierarquia de informação. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  153. 173. <ul><li>Apresentação da informação </li></ul><ul><li>Existem maneiras visuais e mais amigáveis para se transmitir uma informação. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com
  154. 174. <ul><li>Apresentação da informação </li></ul><ul><li>Existem maneiras visuais e mais amigáveis para se transmitir uma informação. </li></ul>Fonte: Luciana Cattony – plantabaixa.wordpress.com Fonte: Luciana Cattony – plantabaixa.wordpress.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×