UNIVERSIDADE ANHEMBI MORUMBI

DESIGN DIGITAL

GANKO: SITE EXPERIMENTAL BASEADO EM RAQUEL KOGAN

DANIEL GALLONETTI - 08102932

DANILO BUCCIOTTI - 08200807

FABIANA FIGUEIREDO - 08200608

GIOVANNA SOARES - 08102508

ROGER NERY - 08200597

São Paulo

2009

2

UNIVERSIDADE ANHEMBI MORUMBI

DESIGN DIGITAL

GANKO: SITE EXPERIMENTAL BASEADO EM RAQUEL KOGAN

Trabalho apresentado como exigência parcial para a

disciplina Projeto Interdisciplinar, do curso Design Digital

da Universidade Anhembi Morumbi, sob a orientação do

Prof. José Minerini Neto e da Prof.ª Mércia de Assis

Albuquerque.

São Paulo

3

RESUMO

Projeto com tema em arte, design e tecnologia proposto pelo curso Design

Digital no terceiro período, Universidade Anhembi Morumbi. Demonstraremos

nesse artigo científico os estudos sobre imersão e interatividade obtidos na obra

Reflexão de Raquel Kogan. A partir desse estudo desenvolvemos o site

experimental “Ganko”, no qual exploramos o conceito de ambiente virtual e suas

regras (tendo como princípio o estudo de imersão e interatividade).

Palavras-Chaves: Raquel Kogan, Site Experimental, Arte e Tecnologia, Imersão e Interatividade

4

SUMÁRIO

Introdução..................................................................................................................5

1. A Artista.......................................................................................................6

2. Análise da obra escolhida .........................................................................7

3. Sobre arte e tecnologia ..............................................................................9

3.1 Imersão ...........................................................................................9

3.2 Interatividade................................................................................10

4. Proposta de hipermídia............................................................................13

5. O Site .........................................................................................................14

5.1 Conceito........................................................................................14

5.2 Referência Iconográfica ..............................................................15

5.3 Mapa de Conteúdo.......................................................................16

5.4 Mapa de Navegação.....................................................................19

5.5 Tipografia......................................................................................20

5.6 Paleta de Cores ............................................................................21

6. Conclusão .................................................................................................22

Bibliografia...............................................................................................................23

5

INTRODUÇÃO

O projeto da Interdisciplinar do curso design digital da Universidade Anhembi

Morumbi consiste na temática Arte, Design e Tecnologia dentro do qual estudamos a

artista Raquel Kogan. Ao longo desse artigo, você entenderá as razões e coleta de

informações referente à artista. Começando com a artista e analisando a obra que

escolhemos (Reflexão), desde a tecnologia aplicada até sua interpretação. Logo em

seguida propomos nosso problema, que consiste em coleta de informações sobre

Imersão e Interatividade, e o uso dessas técnicas. Após essa reunião de

informações fazemos a proposta de hipermídia, que consiste em como aplicamos a

idéia que coletamos em nosso projeto final. Por fim, concluímos o nosso artigo.

6

1. A ARTISTA

De acordo com o site do Itaú Cultural, Raquel Tasny Kogan nasceu em 1955

em São Paulo. É uma artista multimídia, gravadora e pintora. Formou-se em

Arquitetura e Urbanismo na Universidade Mackenzie.

Fig 1. Raquel Kogan (www.mannual.com.br)

Utiliza números (1, 2, 3, 4, etc.) em seus trabalhos, eles definem o espaço e a

profundidade em suas pinturas e gravuras. Já nos objetos, instalações e

intervenções, são utilizados como meio de interação. Iniciou sua série “Reflexão” em

2003, onde foi apresentada no Ciber@arte 2004, Festival de Novas

Tecnologias+Arte e Comunicação de Bibao, na Espanha. Mais tarde esse trabalho

foi desdobrada nas instalações “Reflexão#2” e “Reflexão#3”. Em 2004 desenvolveu

obras interativas como “Projeção”, no Paço das Artes, intervenção “Fotoarte”, em

Brasília, instalação “401 Lord Palace”, em São Paulo, e objetos interativos no 11º

Salão da Bahia, Salvador.

7

2. ANÁLISE DA OBRA ESCOLHIDA

Na obra Reflexão#3 (fig. 2) de Raquel Kogan, há uma grande visibilidade do

conceito de imersão e interatividade. Ela transmite através da reflexão em vidros, de

espelhos e água, uma sensação de infinito visual onde o público interage com

números e integra-se, imergindo dentro da obra, através de números que habitam o

espaço como uma contagem infinita.

Para Raquel Kogan, a obra Reflexão gera em cada pessoa uma interpretação

diferente, ou seja, cada interpretação vem da representação das coisas do mundo

que estão em nossa mente, e é isso que Raquel quer transmitir com sua obra,

explorando a mente das pessoas para diferentes significados através da imersão

delas mesmas na obra Reflexão.

A tecnologia utilizada no trabalho “Reflexão” é o uso, do computador que está

gerando as fileiras de números projetados em uma parede (fig 3). Os sensores

eletrônicos que auxiliam na captação de movimento (para que a velocidade dos

números seja aumentada ou diminuída) e o uso da projeção em frente à parede (tem

como propósito, quando a pessoa passar em frente à projeção, ela ser interferência

na obra. Sendo assim, a sua sombra interfere na projeção, porém a pessoa é

totalmente preenchida pela imagem).(fig. 4)

8

Fig 2. Reflexão #3 (http://apps.divirta-se.uai.com.br)

Fig 3. Reflexão

(http://bitedit.com.br/portfolio)

Fig 4. Reflexão

(http://bitedit.com.br/portfolio)

9

3. O PROBLEMA

3.1 IMERSÃO

Partindo do conceito de Daries (GRAU, 2007. p. 233), “Nenhum outro espaço

permite isso, nenhum outro meio de expressão humana”. O autor assim refez a

imersão, o conceito no qual começamos a elaborar o projeto de nosso trabalho.

Baseado na artista Raquel Tasny Kogan, brasileira nascida em 1955 em São Paulo

e formada em 1978 na Universidade Presbiteriana do Mackenzie em Arquitetura e

Urbanismo. Tendo como característica artística a utilização de uma tipografia

descaracterizada, ou seja, o uso de símbolos tipográficos deixa de ter seu valor de

leitura, ela propõe obras de arte que vão desde exposições com pinturas, até

ambientações como o nosso foco “Reflexão”. Antônio Malta Campos diz:

Raquel escreve, mas não dá pra entender nada. É claro! Seus textos

não devem ser lidos, e sim vistos. Uma caligrafia incompreensível,

solta, voltada para todas as direções, preta, branca, cinza, positivo no

negativo, negativo no positivo. [...] (CAMPOS, 98)

Utilizando como base elementos como imersão, começamos a elaborar nosso

projeto. Imersão na era digital tem como características fundamentais apelar não

somente para os olhos, mas também aguçar todos os sentidos humanos. Em seu

trabalho “Reflexão”, Raquel Kogan utiliza esses elementos, criando um ambiente

totalmente escuro, com o piso da sala refletindo a retro projeção de uma grande

parede preenchida com números aleatórios. Toda ambientada em preto, e números

brancos (que variam para tons de laranja e verde), esses números ficam enfileirados

na vertical, em um ritmo de sobe e desce que varia de acordo com sensores

acionados pela presença humana. Quanto mais pessoas no local, maior a

velocidade dos números. Assim, criando uma brincadeira de realidade virtual com o

espectador em sua obra.

Na realidade virtual, a interface é a chave para a obra de arte

midiática e define o caráter de interação e percepção. O efeito é uma

profunda sensação personificada que, no curso, da ‘imersão’, resulta

em um estado emocional ainda mais acentuado pela música.

(CAMPOS, 98)

10

3.2 INTERATIVIDADE

Decidimos desmembrar interatividade de imersão, que apesar de serem

conceitos próximos, possuem importâncias separada. No trabalho Reflexão#3 de

Raquel Kogan, a imersão é proporcionada por todos os fatores explicados

anteriormente, porém ela é intensificada através da interação. Além do grande painel

numérico, os elementos sonoros, visuais e afins, há também a interação com botões

que proporcionam a velocidade e ritmo dos números propostos. Sem a interação do

usuário, o painel fica inativo, sem ritmo nem velocidade. Logo, vimos que a imersão

é dependente da interatividade nesse aspecto. Podemos dizer que:

O conceito da interatividade é bastante antigo e, pelo menos

metaforicamente, toda obra de arte de qualidade traz em si o potencial

interativo. No entanto, com o advento de novas tecnologias, aparece

uma ênfase num determinado tipo de interatividade. No caso

específico da hipermídia, podemos pontuar que a obra em si só se

torna obra no momento em que ela é fruída pelo leitor. Enfim, a leitura

é elemento construtivo na realização do trabalho. (LEÃO, 2001. p. 34)

Interatividade pode ser entendida como o potencial de habilidade de certa

mídia que permite que o usuário exerça influência sobre o conteúdo, tendo uma

relação entre duas ou mais pessoas que, em determinada situação, adaptam seus

comportamentos e ações uns aos outros.(COSTA, 2003)

Para alguns, interatividade é sinônimo de interação, e para outros,

interatividade significa simplesmente uma “troca”. O conceito de interatividade é bem

mais recente que o conceito de interação, que defende a teoria científica de ser as

relações e influências mútuas entre dois ou mais fatores. Isto é, cada fator altera o

outro, a si próprio e também a relação existente entre eles.(COSTA, 2003)

A interatividade é mais do que só interação digital. Ela está na disposição ou

predisposição para mais interação entre os usuários, para mais participação e

intervenção. Não é apenas um ato, uma ação, e sim um processo, uma abertura

11

para mais comunicação, mais trocas e mais participação. A diferença entre

interatividade e interação estaria relacionada ao contato interpessoal, que se dá na

interatividade, já na interação seria um contato mediado.

Ela está relacionada a diversos atos do dia a dia de cada um, como uma

simples troca de e-mail, ou ao assistir a algum programa de televisão em que o

telespectador pode escolher através de ligações telefônicas o conteúdo do

programa, ou em um jogo de videogame em que o jogador executa comandos de

forma a agir como se fosse um dos personagens do jogo.

A interação trata-se de uma ação entre entes (inter + ação = ação entre), e

envolve uma ação entre vários sujeitos. Todos os dias experimentamos formas de

interação técnica e social:

- interação social: diz respeito à relação entre homem-homem, também

denominada simplesmente interação.

- interação técnica: refere-se à relação do homem-técnica, que se caracteriza

pela ação dialógica entre o homem e a máquina, ou a eletrônico-digital, que permite

ao usuário além de interagir com a máquina, também interagir com o conteúdo, ou

seja, a informação. (http://poseducacaoestatistica.vilabol.uol.com.br/interatividade.htm)

Existe uma classificação de interatividade em níveis, analisados em três

critérios: tempos de resposta, qualidade do resultado e complexidade do diálogo.

O tempo, quanto menor for à demora maior será o grau de interatividade, a

qualidade do resultado estaria relacionada à complexidade do sistema. E a

complexidade do diálogo se dá a partir da comparação com um processo de

conversão impessoal.

Referente à interação técnica (recorte de nosso tema), podemos dizer que:

A cultura da atualidade está intimamente ligada à idéia de

interatividade, de interconexão, de inter-relação entre homens,

informações e imagens dos mais variados gêneros. Essa interconexão

diversa e crescente é devida, sobretudo, à enorme expansão das

tecnologias digitais na última década. Com o forte crescimento da

12

oferta e consumo de produtos ditos de última geração, já não se pode

mais falar do futuro que bate às nossas portas, mas simplesmente de

alguns novos hábitos disseminados entre milhões de pessoas por todo

o mundo. [...] (COSTA, 2003. p. 8)

Olhando ao redor, no mundo que vivemos, não é difícil encontrar pequenas

janelas digitais que oferecem interação e atraem nossa atenção, seja para notícias,

avisos, diversão, recados de amigos. São elas os celulares, palmtops, terminais

eletrônicos de bancos, computadores, televisão digital , game boys, tamagochis e

outras coisas. A tecnologia evolui, e os usuários também. Cada vez mais exigindo

algum conteúdo pra determinada forma de interação, em constante mutação. Pode-

se dizer que um ambiente digital vive de nossa atenção e concentração ao que se

passa em seu interior.

[...] É bem verdade, no entanto, que uma das associações

mais comuns quando se pensa em ‘digital’ é com a idéia de

interatividade: ‘Se é digital, é interativo!’. Há uma ligação muito forte

no imaginário popular entre ‘digital’, de um lado, e tudo aquilo com o

que se possa interagir e manipular, de outro. É assim que aparelhos

digitais são anunciados como uma grande evolução porque, dentre

outras coisas, seriam interativos. [...] (COSTA, 2003. p. 17)

13

4. PROPOSTA DE HIPERMÍDIA

Como proposta de hipermídia, iremos reunir os conceitos propostos em

imersão e tentar ambientar em uma proposta digital. Por meio de programas como

Adobe Photoshop, Illustrator, Flash e After Effects, pretendemos criar um ambiente

totalmente único e que dê a sensação de imersão e interatividade. Entregar algo

pré-determinado e fazer com que o nosso surfer se sinta livre pra refletir e tirar o

conceito que desejar. Em alguns brainstorms, chegamos ao conceito de éticas de

internet. Todos os usuários sabem que possuem certas regras a serem seguidas no

meio digital, e pretendemos demonstrá-las de forma que o usuário possa manipulá-

la a sua maneira, porém arcando com as conseqüências. O conceito de imersão e

interatividade estaria incluso nessa proposta, e a “reflexão pessoal” também.

14

5. O SITE

5.1 CONCEITO DE CRIAÇÃO

O conceito que trabalharemos em nosso site são imersão e interatividade,

focando em “éticas” de web. Coisas que devemos ou não fazer, para que coexista

de uma forma saudável com o mundo digital. Criar situações com inúmeros clichês,

porém aplicado de forma dinâmica e por vezes com tom de brincadeira. A página

inicial do site será um ambiente de desktop semelhante ao de Windows, com menu

iniciar e com dois ícones iniciais: Internet e Lixeira. O ícone de Internet onde terão

alguns “sites” que fazem parte da rotina de um usuário comum, e dentro deles

algumas situações. Por exemplo:

Página do Gmail, você recebe uma corrente falando “Oi, meu nome é

Samara. Eu faria 14 anos hoje... se estivesse viva. Se você não reenviar isso pra 35

amigos seus, irei puxar seu pé ao anoitecer”. Nisso aparecem determinadas opções,

por exemplo, “reenviar para 35 amigos” ou “enviar pra caixa de spam”. Se você

enviar para seus amigos, várias “Samaras” irão invadir o seu desktop virtual, ficar

atrapalhando a navegação, até que dê a famosa tela azul do Windows e você

precisará reiniciar o pc (fim de jogo). Fazendo coisas que são ditas como “ético”,

você receberia acesso a novos sites, com novas situações. Ao final, você faria o

“download” de um arquivo, que iria pro desktop. E nela teriam detalhes do grupo,

conceito trabalhado, wallpapers, etc.

Os conceitos de Raquel Kogan estarão totalmente inseridos, a partir do que

obtivemos sobre imersão e interatividade. Como Reflexão#3 de Kogan necessita da

participação do visitante (possui um painel com botões, que ao apertá-los,

movimenta a parede de números), iremos fazer com que a proteção de tela do

computador seja uma parede numérica, caso a pessoa não interaja com o site por

determinado tempo. O processo de todo o trabalho pode ser acompanhado no blog

http://imersimbolo.wordpress.com

15

5.2 REFERÊNCIA ICONOGRÁFICA

Para a construção do site experimental Ganko, tomamos como referênciao

uso do site Jen.Lu, que ambiente um desktop com ícones que levam para algum

trabalho ou situação do mundo virtual.

Fig 5. Site de Jen Lu (http://jen.lu)

16

5.3 MAPA DE CONTEÚDO

Nosso site será uma representação de um desktop (área de trabalho) de um

computador. Nela haverá ícones representando aplicativos/programas como o

Internet Explorer e o bloco de notas. Para acessá-los será necessário clicar duas

vezes em cima de seu ícone.

Na home encontra-se um wallpaper, um menu inferior e os ícones para entrar

nas sessões "internet", "bloco de notas" e "player".

Na sessão "bloco de notas" o usuário encontra informações sobre o projeto

e uma explicação simples sobre a navegação. Esta sessão iniciará aberta no site,

havendo a possibilidade de fechá-la, como uma pasta.

Na sessão "player" o usuário pode escolher uma entre as 10 músicas

adicionadas para escutar enquanto navega no site. Enquanto ele estiver ouvindo,

um ícone representando o player ficará no menu inferior como um atalho rápido para

a sessão.

Na sessão "internet", logo ao entrar, o usuário é repreendido por uma

mensagem dizendo “Seu antivírus está desligado. Gostaria de iniciá-lo e atualizá-lo

agora?" contendo duas respostas: Sim e Não.

Ao clicar em "Sim" uma mensagem aparece dizendo que o usuário está

protegido e que ganhou uma parte de um arquivo "zip", para acessá-lo é necessário

mais 5 partes. Um ícone aparecerá na home. Ao clicar em "Não" algumas

animações na tela acontecerão, mostrando ao usuário que sua escolha não foi boa.

Após a resposta uma pasta se abrirá e nela haverá 5 ícones representando a

sessões "email", "twitter", "fórum", "orkut" e "msn". Ao clicar em uma das sessões o

usuário abrirá uma página falsa representativa no próprio site. Cada sessão tem

uma ação e reação diferente, dependendo da resposta que o usuário escolher.

17

Sempre que visitar uma sessão e escolher uma das respostas, não poderá acessá-

la novamente.

Sessão email: Uma página representativa do gmail aparece e o usuário terá

a opção de clicar em um email corrente, no caso a da "Samara". Ao clicá-la terá

duas opções: (1) mandá-la para todos os seus amigos, ou (2) enviá-la para a caixa

de spam. Ao clicar na primeira opção uma mensagem no canto inferior direito

aparecerá dizendo "Você recebeu 522 emails 'Corrente Samara' de seus amigos." e

várias ilustrações de "Samara" aparecerão na tela do site, impossibilitando a

navegação fácil e agradável. Ao clicar na 2 opção, uma mensagem aparecerá

dizendo que o usuário ganhou outra parte de um arquivo "zip", e que ele precisa das

outras partes para acessá-lo. Outro ícone aparecerá na home.

Sessão Twitter: uma página representativa do twitter aparece e o usuário

terá a opção de adicionar uma mensagem. Ao adicionar a primeira uma mensagem

aparecerá dizendo "Seus amigos não gostam quando você se transforma em um

narrador de jogo de futebol, ou comenta sobre todas as falas da novela." e o usuário

terá a opção de adicionar várias mensagens seguidas. Se o usuário o fizer e

adicionar várias mensagens, o número de "followers" (seguidores no twitter)

diminuirá gradativamente. Após a 10° mensagem um alerta aparece dizendo "Você

não tem mais seguidores". Se o usuário escolher por postar apenas mais uma vez,

ganhará uma parte do "zip".

Sessão Fórum: uma página representando um fórum aparecerá e o usuário

tem a opção de adicionar uma mensagem. Antes de escrevê-la uma mensagem

dizendo “O Fórum não permite gritarias e linguagens de internet”, e aparecerão as

opções (1) “postar em caixa alta e ‘miguxês’” e (2) “postar seguindo as normas da

língua portuguesa”. Se o usuário selecionar a opção 1, uma mensagem aparece

dizendo que foi banido do fórum. Se escolher a opção 2, ganha uma parte do "zip".

Sessão Orkut: uma página representando a rede de relacionamento Orkut

aparecerá e o usuário terá a opção de adicionar uma foto. Aparecerão duas opções,

18

(1) adicionar uma foto pornográfica e (2) adicionar uma foto normal. Se o usuário

selecionar a opção 1, uma mensagem aparecerá dizendo que ele tem novos

recados. Ao clicar na sessão de recados, varias mensagens ofensivas estarão

escritas e um link para uma campanha alertando sobre a pornografia caseira. Se

escolher a opção 2, terão mensagens agradáveis e divertidas na página de recados

e o usuário ganhará uma parte do "zip".

Sessão MSN: uma página representando o programa MSN aparece e o

usuário terá a opção conversar com um amigo. Aparecerá uma mensagem

perguntando: “Você está com muita pressa e precisa saber algo importante.” e

depois duas opções para selecionar: (1) “fazer a pergunta sem regalias” e (2) “falar

oi e ver se esta ocupado antes de fazer a pergunta”. Se o usuário selecionar a opção

1, uma mensagem aparecerá dizendo que seu amigo o bloqueou. Se escolher a

opção 2, seu amigo responderá educadamente a pergunta, e o usuário ganhará uma

parte do "zip".

Sessão “ZIP”: Ao final, se o usuário obtiver todas as partes a sessão ZIP

será liberada e aparecerá na home. Nela conterão todas as informações do trabalho,

e um manual explicativo em PDF de como ser ético e ter boas maneiras na web.

Caso o usuário não receba todas as partes, uma tela azul parecerá no site,

impossibilitando a navegação. Após alguns segundos uma mensagem dizendo que

o site é um trabalho acadêmico, e incentivando o usuário a navegá-lo outra vez, mas

agora optando pelas opções corretas. Um botão escrito “reiniciar” aparecerá, e ao

clicá-lo o site será recarregado.

Proteção de Tela: Caso não haja navegação no site durante alguns minutos,

uma representação de “protetor de tela” aparecerá. Números em fileiras ficarão

descendo e subindo de forma aleatória, representando o trabalho de Kogan

“Reflexão”.

19

5.4 MAPA DE NAVEGAÇÃO

20

5.5 TIPOGRAFIA

Virtual DJ

Bit Low

Bit Light

System

Verdana

Arial

21

5.6 PALETA DE CORES

A nossa paleta de cor trabalhada foi conceituada a partir dos princípios de

tecnologia e internet obtida. Coletando elementos do RGB, chegamos à seguinte

paleta de cor:

22

6. CONCLUSÃO

Coletando elementos de imersão e interatividade, concluímos os pontos que

queremos em nosso projeto de hipermídia. A nossa meta é criar um ambiente

baseado em éticas de web, porém que a pessoa tenha o direito de segui-las ou não,

e assim, junto de elementos como a interação, áudio e afins, transformá-lo em

imersivo. Um ambiente digital já possui essa barreira a ser rompida, afinal é um

ambiente que nos faz acreditar que essa ilusão é real. A curto modo: preparamos o

terreno e o usuário obtêm o seu conceito, singular e único. Não é uma resposta

automática ou exata, é um conceito pessoal, uma construção de idéia interior (como

pensado e aplicado no trabalho Reflexão de Raquel Kogan), porém com

conseqüências do mundo de web. Todos os usuários possuem certa noção do que

pode ser feito no mundo digital, e se fizer mau uso do mesmo, as suas

conseqüências. Queremos demonstrar a maioria dessas situações (e até reforçar

certas gafes), para que o usuário participe do site, aprendendo e reforçando

conceitos, porém de uma forma leve e agradável. Todo esse processo pode ser

acompanhado através do blog do grupo http://imersimbolo.wordpress.com.

23

BIBLIOGRAFIA

COSTA, Rogério da. Folha Explica: A Cultura Digital. 2° edição. São Paulo:

Publifolha, 2003.

DIAZ, Juan Enrique. Além dos meios e mensagens. Introdução à comunicação

como processo, tecnologia, sistema e ciência. 10° edição. São Paulo: Editora Vozes,

2002.

DOMINGUES, Diana. Criação e Interatividade na Ciberarte. 1° edição. São Paulo:

Editora Experimento, 2002.

FRUTIGER, Adrian. Sinais & Símbolos. 2° edição. São Paulo: Martins Fontes,

2007.

GRAU, Oliver. Arte Virtual. Da ilusão à imersão. 1° edição. São Paulo: Editora

Senac, 2007.

LEÃO, Lucia. O Labirinto da Hipermídia. 2° edição. São Paulo: Editora Iluminuras,

2001.

CAMPOS, Antônio Malta. 20x20x240. São Paulo, 1998. Disponível em:

<http://www.raquelkogan.com/20x20x240.html>.

Itaú Cultural. Disponível em:

<http://www.itaucultural.org.br/aplicExternas/enciclopedia_IC/index.cfm?fuseaction=a

artista_criticas&cd_ververb=3970&cd_item=15&cd_idioma=28555>.

http://www.raquelkogan.com