Revista Webdesign - Ano I - Número 10 - CORES, da teoria à aplicação na web

outu ou tubr bro o 2004 :: ano1 :: nº10 :: www.arteccom.com. br/webdesign

by

e d i t o r a

R$ 6,90

arteccom

COR ES da teoria à aplicação na web

debate: cor - instinto ou técnica? Norton Amato, diretor de criação da Anydesign, explica como o bom uso das cores facilita a usabilidade e melhora a experiência de consumo

entrevista: Bruno Porto

estudo de caso: Melissa

Dicas para você se aperfeiçoar em composições cromáticas: estude psicologia, sociologia e ergonomia e entenda como o Homem se relaciona com seu meio 

a empresa comemora 25 anos com muit a cor, cor, estilo e mostra como conquistou o público internauta

e-mais: comece a planejar sua campanha de Natal!  já foi o tempo em que quantidade de visitantes era necessariamente sinônimo de sucesso Marcelo  Albagi, Canvas

sites eleitorais Ma rc rWebdesign c el el a C at at u n dentrou a e ns ns in in aa l i da da rdas c om om s pa pa ms ms e mostra oscobastidores m m ui t o b o m hcampanhas um or ! no clima eleições das online

  s    i   a   r   o    t   u   a   s   o    t    i   e   r    i    d

3

E   d   i      t     o Um pinguinho de prosa... r   i      a Lembro quando cursava o terceiro ano da faculdade, min ha grande l    

  s   o   m   o   s   m   e   u   q

professora Eliane Jobim pediu para criarmos um cartaz. E não falou mais

nada. Pairava a dúvida no ar: por onde começar??? Acho que ela discutiria depois nossas tentativas. Tudo Tudo bem... fiquei lá... na minha solidão... éramos eu e o papel... o papel e eu... Hoje recebo alguns emails assim: não sei por onde começar quando preciso criar um site... escolher as cores... Bem, graças ao meu  trauma, sinto-me solidária no dever de ajudá-los a encontrar uma luz no fim do tú nel nel.. Eu, particularmente, começo pelo conceito, ou seja, a idéia que preciso transmitir. Faço Faço um brainstorming para dar asas à imaginação imagi nação e chegar a uma imagem que transmita a idéia de forma sutil, divertida ou direta, enfim, uma imagem com a qual meu público-alvo se identifique. Depois, utilizo out ros elementos gráficos, como a tipografia e as CORES para fortalecerem o conceito. As cores transmitem sensações de acordo com experiências passadas que tivemos com elas. Então, basta definir que sensação queremos transmiti r com a peça gráfica e utilizar as cores que nos levem a este sentimento... Ou seja, fique atento à sua própria SENSIBILIDADE.  Se um pinguinho de tinta cai num pedacinho azul de papel... num instante imagino uma linda gaivo ta voar no céu.  Mas como vocês sempre querem (e devem) saber mais, mais e mais... recolhemos opiniões de vários profissionais e algumas regrinhas para se-

Equipe Direção Geral

  Adriana Melo [email protected] Direção de Arte

Patrícia Maia [email protected] Ilustração

Beto Vieira [email protected] Diagramação

Bruna Werneck  [email protected] Direção de Redação

Bete Veiga [email protected] Redação

 André Philippe Iunes [email protected] Publicidade

Um beijo!

 Assinaturas

Jane Costa  [email protected] Gerência de Tecnologia

Fabio Pinheiro [email protected] Webdeveloping

Eric Nascimento [email protected] Financeiro

Luana Rocha [email protected] Criação e edição www.arteccom.com.br

Produção gráfica www.ediouro.com.br/grafica

 Adriana Melo.

  m   e   s   s   n   e   g   a   m    i   u   o   s   o    t   x   e    t

Daniele Moura [email protected]

Patrocínio www.locaweb.com.br

rem seguidas (ou não). Divirtam-se!

 .   a   r   o    t    i    d   e   a    d   o    ã   ç   a   z    i   r   o    t   u   a

Distribuição www.chinaglia.com.br

  a   s   o    b   r   a    B   a   s   s   e   n   a    V     o    ã   ç   a    d   e    R

  :   o    ã   ç   a   r   o    b   a    l   o    C

  e    d   o    ã   ç   u    d   o   r   p   e   r   a   a    d    i    t    i   m   r   e   p    é   o    ã    N   :   :  .   s   o    i   r    á    t    i   c    i    l    b   u   p   s   o    i   c   n    ú   n   a   s   o    d   r   o   e    t   o    l   e   p   o   m   o   c   m   e    b  ,   s   o    d   a   n    i   s   s   a   s   o   g    i    t   r   a   s   o   n   s   a    d    i    t   n   o   c   s   e    õ    i   n    i   p   o   e   s   e    õ   ç   a   m   r   o    f   n    i   r   o   p   a   z    i    l    i    b   a   s   n   o   p   s   e   r   e   s   o    ã   n   m   o   c   c   e    t   r    A    A   :   :

4

  u   n   e   m apresentação pág. 4 quem somos pág. 5 menu

contato pág. 6 emails pág. 6 fale conosco

fique por dentro pág. 8 direito na web pág. 9 adote esta página pág. 10 clipping

portfólio pág. 13 veterano: Ability pág. 17 calouro: Sauvage Sauvage

matéria de capa pág. 18 entrevista: Bruno Porto pág. 24 da arte à ciência pág. 33 debate: instinto ou técnica?

e-mais pág. 37 estudo de caso: Melissa pág. 41 prepare-se para o natal pág. 46 sites eleitorais pág. 52 tutorial: scripts em várias linguagens

com a palavra pág. 56 estratégia online: Marcello Póvoa pág. 58 webwriting: Marcela Marcela Catunda pág. 60 marketing: René de Paula Jr. pág. 62 experience design: Claudio Toyama Toyama pág. 64 webdesign: Luli Luli Radfahrer

5

  s    l    i   a   m   e Assunto: Edições passadas

dica... Quando meu portfolio estiver pronto, mandarei pra

Assunto: Webdesign contagiosa

Excelente a funcionalidade do

vocês... E novamente

site da revista, digo isso

parabéns pelo trabalho!

Webdesign contagiosa!!! Foi

especialmente me referindo

Como faço pra receber as

isso que eu constatei quando

à ferramenta que possibilita

duas primeiras edições???

levei minha Webdesign pra

a compra de edições

  Valeu!!! Até mais. 

faculdade. Como faço curso

passadas de forma avulsa.

José Rezek   [email protected]

de Projetos em Web Design,

Tenho uma agência de comunicação em POA-RS, e, enfim, encontramos uma revista que abrangesse a questão do projeto de web sites dentro de um composto de comunicação onde se

Oi José! Mas é claro que respondemos um a um... afinal é este o maior diferencial da internet para outras mídias: a interatividade! Para adquirir edições anteriores, acesse: www.arteccom.com.br/webdesign

comportaria como uma ferramenta própria,

Assunto: Link super úteis

avançada, estudada,

Olá! Sinto falta de um tópico

funcional e dirigida, assim

na revista: uma seção com

como se encaixam da mesma

links de sites com banco de

forma veículos como tv, rádio

imagens, sons etc. para

etc. Parabéns.

utilizarmos em nossos sites.

Diego Nogueira [email protected]

Bom, para mim, é a única

Oi Diego. Pois é... nosso intuito é que web sites sejam vistos como bons investimentos e não como custo para as empresas. Para isso, nós, profissionais, precisamos cada vez caprichar mais no desenvolvimento dos mesmos para provarmos que realmente dá resultados, se bem planejado.

personalizada! Obrigado pela

pra minha sala? Todos querem! Fernanda Prevedello [email protected]

Oi Fernanda! Como fiquei feliz com seu email. Você não pode imaginar como foi gratificante recebê-lo! A Jane vai entrar em contato com você, ok? Assunto: Arquitetura de informação

10 Assunto: Viu, Catunda??? Oi Adriana.

exemplar da revista

Parabéns por continuarem

assim?!?) ficar completíssima.

Webdesign no mês de agosto

melhorando a cada edição.

  Abraços de um leitor fiel.

e faço questão de expressar

Na revista número 8 gostei

minha satisfação pelo

muito da matéria sobre como

produto de qualidade por

abrir uma agência web e

vocês apresentado. Os

como medir o retorno.

profissionais careciam de um

Gostaria, se possível, que

referencial para seus

vocês colocassem na revista

trabalhos e agora podemos

ou num site, um modelo de

encontrar um excelente

briefing, isso ajudaria a

embasamento teórico nesta

todos nós da área. Ah! E a

revista.

Catunda é nota 10. A

  Aproveito a oportunidade

primeira matéria que leio

para sugerir um tema:

quando compro a revista é

vocês um artigo sobre

 Arquitetura  Arquitetur a de Informação Informação..

sempre a dela.

publicidade, como fazê-

Desejo conhecer a forma

Sucesso!

correta de lidar com o

Fábio Russo [email protected]

René Pinheiro [email protected]

Querido René: visite o site www.bananadesign.com.br. Lá você encontra vários links super úteis com este conteúdo. E, espero que se torne um membro de NOSSO site também ;-)

Rudá Gonçalves [email protected]

emails! Adorei a resposta

plano especial de assinatura

revista (posso chamar

la, troca de banners etc...

respondem um a um os

quando vêem a minha... Tem

  Adquiri meu primeiro

Como leitor, sugiro a

Cara, que legal, vocês

meu colegas ficam loucos

coisa que falta para a nossa

Assunto: Publicidade

Assunto: Edições passadas

Obrigada pela dica, Nádia. Iremos incluir este tema em nossa próxima edição, de novembro, que trata de usabilidade, ok? É só aguardar.

conteúdo de um site, critérios hierárquicos, dentre outros

Olá Rudá! Na edição 2 (capa rosa) fundamentos para concluir  Como atrair clientes para seu site  uma distribuição ordenada do falamos sobre este tema, troca de conteúdo de um projeto web. banners etc. Futuramente podemos  Atenciosamente, aprofundá-lo, absorvendo sua Nádia Devigilli sugestão. Obrigada! [email protected]

Bem, Fábio, já enviei um modelinho de briefing por email para você. Pois é, a Catunda está fazendo muito sucesso... você não imagina o quanto foi difícil convencê-la c onvencê-la a escrever, ela é muito humilde, mas uma super profissional, divertida e inteligente!

fale conosco pelo site www.arteccom.com.br/webdesign :: Os emails são apresentados resumidamente. :: Sugestões dadas através dos emails enviados à revista passam a ser de propriedade da Arteccom.

6

orme publicitário informe publicitário informe publicitário informe publicitário

 Atualização de sites e intranets: o eterno dilema Trabalho burocrático atola equipes de criação e desenvolvimento; programa democratiza inserção de conteúdo se m pôr em risco o layout da página  A internet é, hoje, a extensão eletrônica e letrônica de uma empresa.

num ambiente semelhante ao browser browser,, no qual os produtores de

É nela que encontramos informações sobre produtos, serviços,

conteúdo inserem as informações e os demais elementos (imagens,

áreas de atuação e de abrangência geográfica e preços. Apesar

sons, vídeo etc.) sem o risco de danificar o trabalho prévio de desen-

da evolução do mundo digital, a grande dificuldade di ficuldade das compa-

volvimento da página. Com a solução, os webmasters decidem o que

nhias na internet ainda é atualizar e gerenciar seu conteúdo com

pode ser editado e quem vai publicar, publicar, graças a um novo sistema de

rapidez e eficiência.

aprovação e administração, que permite o gerenciamento de cone-

O principal motivo é a sobrecarga de trabalho dos

xões, rastreamento, senhas e privilégios de usuários.

webmasters. Esses profissionais altamente especializados especializados gastam

Outro ponto forte da tecnologia é a inclusão do recurso

cerca de metade de seu tempo com atualizações simples simp les nas páginas

Flash Paper 2, que permite a conversão, com um só clique, de

do site ou da intranet. Como o conteúdo informativo é produzido por

qualquer arquivo passível de impressão para o formato Flash.

profissionais sem conhecimento da linguagem técnica, as equipes de

Sua grande vantagem é que os documentos ficam disponíveis na

desenvolvimento desenvolvime nto e criação ficam atoladas no trabalho mecânico de

própria página, ou seja, é um elemento element o de design mais leve e fle-

atualização e perdem um tempo precioso, que poderia poderi a ser utilizado

xível que abre em qualquer navegador em menos de um segundo,

no que fazem melhor: melhor : criar e desenvolver desenvol ver..

além de executar no plug-in do Flash Player. Player.

 Atualizações constantes são extremamente importantes,

Sucesso comprovado

mas não agregam valor aos projetos dos webmasters. É muito

 A adoção do Contribute pela Universidade do O este de

mais produtivo para a empresa e para os clientes que a experi-

Santa Catarina (Unoesc), por exemplo, foi responsável responsáv el pela redu-

ência desses profissionais seja inteiramente dedicada à criação

ção de 20% nos custos de TI relacionados ao desenvolvimento e

de novas funcionalidades, áreas ou templates do site, em vez de

de 32% em mão de obra, afirma Lindamir Secchi Gadler, coorde-

desperdiçada em desgastantes idas e vindas de arquivos e tabe-

nadora de TI da universidade. A universidade. A solução agilizou significativa-

las produzidos por usuários que poderiam ser eles mesmos res-

mente as atividades de atualização na Internet , explicou ela.

ponsáveis pela atualização do conteúdo na página.

Outro exemplo bem-sucedido é o portal do Departamento de Ser-

Faz parte do importante papel dos webmasters zelar pela

viços à Criança e à Família do município norte-americano de Ala-

integridade do site. Eles só podem delegar as tarefas de atuali-

meda (www.acgov.org), que usa a ferramenta para manter seu

zação se houver garantia de que layouts e funcionalidades serão

Guia Prático Online. Agora usuários não-técnicos passaram a

preservados. É para resolver definitivamente esse problema que

atualizar sem que o código ou layout seja modificado, o que ge-

a Macromedia lançou a terceira versão do Contribute, softwar e

rou uma economia de US$ 250 mil dólares só no primeiro ano,

para atualização de páginas e conteúdo que vem se popularizanpopular izan-

destacou Jim Damien, diretor de TI do departamento.

do por facilitar o árduo trabalho dos webmasters.

Para baixar uma versão de teste gratuita do

Com ele, toda a atualização é feita por usuários não-técnicos

Contribute 3 e obter mais informações, acesse:

sem que o código ou layout possa ser modificado. modif icado. Tudo acontece

http://www.macromedia.com/software/contribute.

7

   b   e   w   a   n   o    t    i   e   r    i    d

 Autor-funcionário Oi! Acabei de comprar a revista e vi a novidade da seção de direito na web. Muito boa idéia essa! Eu mesmo, há um certo tempo, e stou com uma dúvida. Trabalho no suporte (help desk) de uma empresa de médio porte. O sócio da empresa quando ficou sabendo que eu desen volvia sites, me pediu que eu cri asse um para a empresa. Outros dois técnicos me ajudaram na criação, mas eu fiz a maior parte do trabalho. Quem tem o direito autoral sobre o site?

Leandro Albuquerque, [email protected]   A pergunta do leitor é relativa à Marianna Furtado é advogada com pós-graduação em Direito

titularidade dos direitos autorais da obra re-

contratual a respeito, pertence ao organizador da obra.

alizada sob encomenda, contrato de trabalho

Caso a obra seja solicitada, mediante

ou prestação de serviços. Como você não

contrato de prestação de serviços, a uma

detalhou as condições estipuladas para a cri-

pessoa física ou jurídica, que se responsabili-

Lioce Advogados.

ação do site, vamos falar sobre as formas

za pela organização do processo criativo, en-

Envie sua dúvida para:

mais comuns de contratação de serviços para

volvendo a participação de diversos autores

a criação de uma obra.

(obra coletiva), a titularidade dos direitos

da Propriedade Intelectual pela PUC-Rio. Atualmente, pertence à equipe do escritório Montaury Pimenta, Machado & 

[email protected]

Se a criação da obra é solicitada a uma

patrimoniais pertencerá ao organizador da

ou mais pessoas físicas, através de contrato

obra. Somente através de estipulação

de trabalho ou prestação de serviços, deve

contratual o solicitante da obra poderá vi r a

ser respeitada a regra de que os direitos au-

deter a titularidade dos direitos patrimoniais

torais morais e patrimoniais pertencem exclu-

sobre o conjunto da obra.

sivamente às pessoas físicas criadoras da

É importante esclarecer que em todos

obra, salvo se houver estipulação contratual

esses casos, o direito sob discussão é o

em contrário (nesse caso, referente apenas

patrimonial, já que o moral permanecerá

aos direitos patrimoniais, uma vez que os di-

sempre com a(s) pessoa(s) física(s) cria-

reitos morais sempre ficam com os criadores).

dora(s) da obra.

Já quando a pessoa física ou jurídica é quem toma a iniciativa da organização do processo criativo do site, contratando como empregados ou prestadores de serviços, diversas pessoas físicas para a criação da obra, a titularidade dos direitos patrimoniais, ainda que não haja qualquer estipulação

8

  a   n    i   g    á   p   a    t   s   e   e    t   o    d   a

adotou esta página

 Que cada indivíduo procure auxiliar os  A Fábrica Digital desenvolveu o software Publique! para que Webdesigners criem sites seus próprios interesses Filipenses dinâmicos, visualmente arrojados, sem necessidade de   Adotando esta página, a Fábrica Digital contribuiu com R$ 600,00 para a programação. Devido à esta manutenção do projeto Mage-Malien  Crianças que Brilham, beneficiando facilidade, o Publique! já é o integralmente integralmen te crianças e jovens de comunidades menos favorecidas. O projeto possibilita o gerenciador de conteúdo mais acesso de crianças ao universo da educação, da arte e da cultura através de cursos e oficinas ministrados utilizado no Brasil, em sites e gratuitamente pela equipe Beriba-Rei Capoeira. Ocupando de maneira sadia suas horas de lazer, os jovens intranets de organizações de aprendem o exercício pleno da cidadania. todos os portes. Visite nosso site  A Arteccom acredita na construção de um futuro melhor e agradece este gesto de solidariedade! www.fabricadigital.com.br e  Você também pode ajudar a manter o brilho dessas crianças: l igue para (21) 2253-0596 ou torne-se também nosso parceiro. Contatos: envie um email para [email protected] e adote esta página! [email protected] Para conhecer o projeto Magê-Malien, visite o site www.arteccom.com.br/magemalien. Tel. (21) 2548-7877

interesses alheios e não somente os

9

  g   n    i   p   p    i    l   c Estudantes constroem lavadora falante Estudantes de engenharia da Universidade de Michigan, nos Estados Unidos, construíram uma máquina de lavar que fala. A invenção foi fruto de um desafio proposto pelo professor Erik Goodman a seus alunos, com o objetivo de beneficiar portadores de deficiência visual.  A lavadora falante está sendo testada pelo casal de cegos Michael e Carla Hudson. Michael, diretor do centr o de recursos para deficientes físicos da universidade, diz que sua esposa ficou maravilhada com a invenção. (01)

Cientistas quebram recorde de velocidade com Internet2 Cientistas do Caltech (Instituto de Tecnologia da Califórnia) e do Cern (Organização Européia para Pesquisa Nuclear) quebraram um novo recorde de velocidade com a Internet2, a segunda geração de redes de computadores mundial. Por essa rede, atualmente disponível apenas para universidades e institutos de pesquisa, os cientistas cons eguiram transmitir 859 GB de dados em menos de 17 minutos, uma velocidade de 6,63 Gbps (gigabits por segundo). A distância entre as duas instituições é de mais de 17 mil km. Com essa velocidade, é possível transmitir transmitir o equivalente a um DVD inteiro em quatro segundos.

(02)

Falha Nossa Na edição nº 9, na seção Debate, os sites dos partic ipantes Laert  Yamazaki e Adílson Batista sairam errados. Quem quiser conhecer mais sobre eles, os endereços corretos são, respectivamente, e .

Hotmail e outros nomes da web estão no Guinness

Brasil é a capital dos hackers 

O Hotmail aparece na edição 2005 d o Guinness, o Livro dos Recorde s, como o maior provedor mundial da rede  em fevereiro, quando o levantamento foi fechado, o serviço da Microsoft tinha 170 milhões de contas ativas.  A edição 2005 do Guinness, que será lançada no país e m novembro, traz várias curiosidades do mundo da tecnologia e da internet. Por exemplo: o país com o maior número de internautas é os Estados Unid os (eram 159 milhões ao final de 2002), mas o país com maior penetração de web é a Suécia, com 554,18 internautas para cada mil habitantes.

O Brasil se tornou a capital mundial dos hackers e da fraude na internet, segundo especialistas reunidos em Brasília para a primeira conferência internacional de combate ao crime eletrônico. De acordo com dados apresentados pela Polícia Federal no evento, o Brasil é a casa de oito a cada dez hackers no mundo.

(03)

(04)

II Semana RIOfazDESIGN  Acontece na Fecomércio/Senac, entre os dias 4 e 12 de novembro, a II Semana  Acontece RIOfazDESIGN. O evento premiará, com o Selo RIOfazDESIGN 2004, empresas e instituições do Estado do Rio de Janeiro que mais vêm investindo em design. Será realizada também uma exposiç ão com os trabalhos das entidades ganhadoras do selo, bem como os dos vencedores do concurso RIOnovosDESIGNERS. A Fecomércio/Senac fica na Rua Marquês de  Abrantes 99, Flamengo, Rio de Janeiro. Mais informações pelo e-mail [email protected] om.br ou no site .

(04)

10

  g   n    i   p   p    i    l   c Shakespeare ressurge na internet  A Biblioteca Britânica está disponibilizando online 93 cópias de 21 peças do dramaturgo inglês, que foram impressas ainda durante sua vida. Essas edições individuais mostram como os textos de Shakespear Shakespearee sofreram alterações piratas e lançam dúvidas sobre a idéia de versões definitivas de sua obra. No site dedicado às raridades shakespearianas, é possível comparar textos publicados em diferentes periodos, como o Hamlet de 1603 e o de 1611.

(05) Homem usa internet e satélite para seguir ex-namorada Um homem foi preso nos Estados Unidos por usar um sistema de GPS, de rastreamento por satélite, para perseguir sua ex-namorada.  Ara Gabrielyan supostamente conectou um celular e um aparelho GPS ao carro da ex-namorada para rastrear os movimentos dela. A ex-namorada, que não foi identificada, começou a suspeitar de Gabrielyan quando ele começou a aparecer repentinamente em vários lugares.  As suspeitas foram confirmadas quando ela pegou Gabrielyan debaixo de seu carro, tentando trocar a bateria do celular celular.. (06)

(01)

 Yahoo! compra a Musicmatch por US$ 160 milhões O portal de internet americano Yahoo! anunciou a compra da empresa Musicmatch, especializada na tecnologia de distribuição digital de música, por US$ 160 milhões. A compra permitirá ao Yahoo! alcançar quase 23 milhões de consumid ores, contra 12,9 milhões atualmente. Criada em 1997, a Musicmatch é considerada uma pioneira da tecnologia de administração de música digital. Seus ativos incluem a Musicmatch Radio, a Musicmatch Music Store, o software Musicmatch Jukebox, que permite aos usuários baixar, baixar, escutar e gravar música pela internet, e a Musicmatch on Demand, um serviço de assinatura que permite o download de mais de 700 mil músicas em qualquer computador, computador, assim como o envio dos arquivos para outra pessoa de maneira legal. (07)

Banana Design: novas seções, mais conteúdo O Banana Design, site de conteúdo especializado em design e programação para a web, está lançando a seção Tutorial, com um guia de referência sobre novos programas e tecnologias. Na seção Artigo, que conta com um time renomado de colunistas, é possível conhecer a opinião dos melhores especialistas em internet. O site possui ainda um fórum, em que se pode tirar dúvidas e ampliar a rede de contato com outros profissionais da área.(05)

Robô come moscas para gerar energia Cientistas britânicos estão desenvolvendo um robô que irá comer moscas para gerar sua própria energia.  A idéia é que os insetos capturados pelo EcoBot 2 sejam digeridos em um compartimento especial, que irá quebrar moléculas de açúcar do exoesqueleto do inseto para produzir corrente elétrica. Por enquanto, o robô tem sido alimentado manualmente, pois o mecanismo para pegar os insetos ainda está sendo desenvolvido. O único lado ruim desse robô autônomo provavelmente será o seu cheiro já que os cientistas estudam atrair as moscas usando excremento ou água de esgoto.

(08)

http://www.estadao.com.br/tecnologia/informatica/2004/set/13/88.htm

(02) http://www1.folha.uol.com.br/folha/informatica/ult124u16898.shtml (03) http://info.abril.com.br/aberto/infonews/082004/19082004-7.shl (04) http://www1.folha.uol.com.br/folha/bbc/ult272u35237.shtml (05)

http://www.estadao.com.br/tecnologia/internet/2004/set/10/47.htm

(06) http://www1.folha.uol.com.br/folha/informatica/ult124u16902.shtml (07) http://www1.folha.uol.com.br/folha/informatica/ult124u16968.shtml (08) http://www1.folha.uol.com.br/folha/ciencia/ult306u12387.shtml

11

12

  y    t    i    l    i    b    A   :   :   o   n   a   r   e    t   e   v   o    i    l    ó    f    t   r   o   p

 Ability: dos games ao meio online  por André Philippe Iunes 

Por mais que muitos pensem que o dom vem de berço, não há talento que se desenvolva sem um mínimo de dedicação. Perseverança, insistência e determinação talvez sejam as palavras de ordem para quem procura a tão almejada luz no fim do túnel. Para Rodrigo Tigre, diretor geral da agênc ia Ability, saber extrair das dificul dades o aprendizado para a sua vida e das oportunidades a chance de seguir nov os rumos foi de vital importância para trilhar bons caminhos na carreira.

Com 30 anos e formado em Marketing, Market ing, Rodrigo começou a trabalhar com internet devido a um fato curioso. Em 1996, quando ainda era dono de uma editora de jogos e softwares infantis em CD-ROM, ele teve o seu destino profissional traçado em uma feira de Games em Las Vegas. Ao cruzar por um dos stands, algo me chamou a atenção. Quase passei direto, mas resolvi voltar e conheci a Games Mania, que possuía um portal de informações sobre jogos de computador. Conheci os donos do site e acabamos ficando amigos. Doi s meses depois www.ability.com.br

13

  y    t    i    l    i    b    A   :   :   o   n   a   r   e    t   e   v   o    i    l    ó    f    t   r   o   p

 Somos uma empresa focada no cliente, procuramos sempre ver o que é melhor para ele, mesmo que isso não seja o melhor para nós no primeiro momento 

estava sendo lançando no Brasil a sua versão em português e foi assim que eu comecei a me envolver com a web. Alguns ano s depois a editora acabou e fiquei me dedicando inteirament e à internet, coisa que faço até hoje. Fundada em 1997, a Ability atua como uma produtora digital, com trabalhos realizados na área de desenvolvimento de sistemas para web, criação de campanhas online, além da prestação de consultoria. O Shoptime, primeiro cliente da agência, foi conquistado no mesmo ano e serviu como um desafio para a agência. Apesar de inicialmente preferirem algo mais institucional, sugerimos fazer um site de e-commerce, o que na época era um passo muito ousado. O negócio deu tão certo que em 2000 o si te já respondia por 20% do faturamento total de vendas. A partir daí, a empresa montou a sua própria equipe interna de programação e design, lembra o diretor. Exemplos de sucesso

Com clientes como a Embratel, Sony Music, Banco Modal, Cultura Inglesa, entre outros, a Ability conta atualme nte com uma equipe de 23 profissionais, incluindo gerentes de projetos e desenvolvimento, designers, redatores e programadores. Dentre seus trabalhos, destacam- se o portal de Serviço de Informação Médica (SIM online) da GlaxoSmithKline. O site reúne mais de 1GB em arquivos informativos sobre doenças e aplicações dos medicamentos da empresa. O principal objetivo da GlaxoSmithKline é o de informar os médicos e seus representantes comerciais sobre os produtos que fabricam. Sendo assim, todo o conteúdo é incluído de forma dinâmica, explica Rodrigo. Outro trabalho interessante feito pela produtora foi o E-Kids, desenvolvido para o curso de idiomas Cultura Inglesa. O objetivo foi possibilitar que alunos estudem em casa, pelo computador pessoal. Este projeto é dividido por livro, lição e exercício, em que foram produzidos diversos jogos como caça-palavras, jogo da forca e memória. Segundo Rodrigo, dessa forma as crianças podem aprimorar e fixar o conteúdo aprendido em sala de aula. O sistema foi todo desenvolvido com as tecnologias t ecnologias Flash, Action Actio n Script e ASP. Também Também é utilizado um banco de dados para o armazenamento de imagens e sons e para o relacionamento relacioname nto dos jogos com suas respectivas lições, destaca.

14

Esboço e telas de exercícios desenvolvidos para o E-Kids da Cultura Inglesa

  y    t    i    l    i    b    A   :   :   o   n   a   r   e    t   e   v   o    i    l    ó    f    t   r   o   p

Com o objetivo de reformular todo o portal de acesso gratuito da Embratel, o Click 21, a Ability desenvolveu para este projeto um novo layout e tornou o seu conteúdo dinâmico. Neste caso, também foi implementado um sistema administrativo para gerenciar e alimentar o site com informações. O portal conta também com uma ferramenta de regionalização, que direciona um

www.click21.com.br

dado específico a um determinado usuário conforme a sua região. O sistema é todo baseado em Java (J2EE) com banco de dados SQL server.. Segundo ele, a tecnologia Java permite server a modularização do sistema, assim como a sua escalabilidade, que possibilita possibili ta o crescimento do sistema sem a necessidade de reprogramá-lo. Qual o segredo?

Ganhadora de diversos prêmios, entre eles três TOP3 conquistados no IBest entre 1999 e 2003 e de melhor portal nas categorias automóvel e serviços online, Rodrigo lembra que o grande diferencial dos produtos da  Ability se deve à forma como a produtora trabalha e se dedica a seus projetos. Somos uma empresa focada no cliente, procuramos sempre ver o que é melhor para ele, mesmo que isso não seja o melhor para nós no primeiro momento. Estamos com uma meta agressiva para o ano que vem, esperamos aumentar em 30% o nosso faturamento. O mercado está mais animado com a internet, principal-

www.sim-gsk.com.br

15 15

  y    t    i    l    i    b    A   :   :   o   n   a   r   e    t   e   v   o    i    l    ó    f    t   r   o   p

mente as grandes empresas, nosso principal

todo um trabalho. Em sua opinião, descobrir

alvo hoje em dia. dia.   

qual é a real necessidad necessidadee de um projeto é

Para ele, um dos principais problemas

sempre um desafio. Ele cita que alguns cli-

que o designer pode enfrentar na profissão

entes têm a dificuldade de passar exata-

diz respeito ao briefing, que mal feito, in-

mente o que eles querem, fazendo mudan-

completo ou pouco explicado pode arruinar

ças constantes, até mesmo no briefing. A saída é conversar e especificar ao máximo para que isso não aconteça. Rodrigo busca inspiração para seu trabalho navegando pela internet, sempre procurando novas referências. Segundo ele, a web é um meio propício para comparar trabalhos e obter idéias.  Se uma pessoa souber analisar bem o que existe no mercado, pode

www.oab-rj.org.br

fazer um apanhado de exemplos e desenvolver um site realmente funcional.

É importante estar atento às tendência s que estão surgindo, ler muito e ficar por dentro do que há de bom na rede. re de. Ele lembra também que é fundamental para o profissional de internet ouvir outras opiniões, procurando informações que mewww.sonymusic.com.br

lhorem o seu trabalho. Ouço as pessoas que estão ao meu redor, pois sempre têm algo a acrescentar.  Acho que com bom senso e uma boa conversa, resolvemos metade de qualquer problema. Além disso, é muito importante você ser persistente. Em nossa vida, sempre enfrentamos dificuldades e é como as encaramos que determina o nosso sucesso,

www.automovel.com.br

16

finaliza.

O poder da propaganda boca a boca Foi desta forma que Diogo Catem Adiala, 23 anos, entrou para o mercado e conquista até hoje os trabalhos que compõem seu portfólio.

Começou sua carreira como freelancer no final de 2002, mas sempre alternou com trabalho fixo em agências. Hoje, dedica-se completamente aos freelas que consegue com a indicação de amigos e clientes: é o poder da propaganda boca a boca, garante. Assim, recebe em média méd ia um projeto por mês e segue ampliando a lista de clientes, que não é pequena: Nalco Brasil, www.sauvage.com.br

Duquerne Mudanças, Coppead  UFRJ, Bukan  School of Krav Mag a, Isbet  Central de Estágios, Truly Nolen, entre outros. Formado em webdesign pelo Instituto Infnet no Rio, Diogo cursava Informática na Universidade Universidade Estácio de Sá, quando decidiu há dois anos trancar a matrícula. Agora vou começar design gráfico. Tem mais a ver comigo comigo,, afirma. Como vantagens de trabalhar por conta própria, o webdesigner destaca a liberdade de escolher seus horários e o contato direto diret o com o cliente, sem intermediários.  Os problemas são a instabilidade e a concorrênci a com os sobrinhos, que degradam o valor do trabalho no mercado.

www.camiladezorzi.com.br

Para Diogo, um bom profissional não precisa necessariamente ser formado e sim ter vocação, disciplina, determinação, gostar do que faz e ficar atento às novidades. Por outro lado, reconhece a importância da formação acadêmica. Na faculdade a pessoa troca experiências com alunos e professores. Obtém conhecimentos cultural, técnico e profissional. Não basta apenas saber usar ferramentas, né? 

Daqui a cinco anos, tem esperança de atuar em um mercado onde os clientes saibam valorizar o webdesign em todos os aspectos, tanto financeiro como profissional. Espero ter concorrentes realmente profissionais, que não desvalorizem a www.isbet.org.br

profissão, jogando o valor do trabalho lá embaixo. Afinal, sempre terá espaço para quem é realmente realment e bom e que busca ficar cada dia di a melhor.  melhor.  Para renovar as energias, Diogo foge para lugares bem tranqüilos e se inspira na natureza. Ecléti co, o rapaz também curte animação, ilustração e a cultura japonesa. Ele se autodefine como extrovertido e otimista. Estou sempre rindo e de bem com a vida. Profissionalmente Profissiona lmente sou muito perfeccionista, criativo criat ivo e procuro estar sempre estudando, trocando idéias e me reciclando. É isso aí Diogo,

www.conexaoturismo.com

manter o alto astral é fundamental!

O site da Sauvage é e o email para contato, . Para participar da seção portfólio, cadastre-se no site www.arteccom.com.br/webdesign.

17 17

  e   g   a   v   u   a    S   :   :   o   r   u   o    l   a   c   o    i    l    ó    f    t   r   o   p

  a    t   s    i   v   e   r    t   n   e

Em uma conversa informal e bem-humorada, Bruno Porto, diretor da Associação dos Designers Gráficos (ADG Brasil), revela à Webdesign os vários elementos que envolvem o estudo de cores. Professor da UniverCidad e (RJ) e autor do livro Memórias Tipográficas, o designer põe em questão assuntos polêmicos como a psicologia das cores e a sua aplicação. Como ele mesmo cita: a cor não é o único fator visual determinante, muito menos tem poderes mágicos. De Monty Phyton e o Cálice Sagrado  a Saul Bass e Eugênio Hirsch, Bruno também faz faz um breve panorama da interação do webdesign com os aspectos comerciais e sociais da profissão. Caso esteja indeciso por alguma composição cromática, confira nesta entrevista por que é importante conhecer todo o contexto no qual uma cor pode estar inserida.

Nem tudo são cores... por André Philippe Iunes

18

  a    t   s    i   v   e   r    t   n   e

Wd :: Dependendo da natureza de um projeto e do seu público-alvo há uma estratégia quanto à escolha de determinada gama de cores? Bruno :: Geralmente, um site comercial não se encontra sozinho no mundo e está atrelado a outras interfaces gráficas, como uma embalagem, um cartão de visitas, um banner, uniformes institucionais e promocionais ou mesmo uma sede que possui uma sinalização. Um pro jeto de comunicação visual, seja corporativo ou de identidade, compreende muitos suportes para informações, e o ideal é projetar este sistema para que haja pouca variação dos elementos que identificam o negócio que representa, entre eles as cores. Em outras palavras, um folder, folder, im-

Wd :: Pela sua experiência, quais aspec-

presso em CMYK ou serigrafado com cores especiais Pantone, não pode

tos relevantes devem ser observados

apresentar um determinado tom de l aranja que não tenha a mesma apli-

quanto ao estudo de cores na web? O que

cação em uma van promocional, pintada em tinta automotiva ou

deve ser levado em conta com relação à

adesivada por meio de plottagem, e também em um site, com cores RGB.

sua utilização em sites?

 Atualmente,  Atual mente, como a web é uma ferramenta essencial na comunicação, um

Bruno :: Há quatro elementos visuais que

site não pode ser desenvolvido separadamente, separadamente, apenas como suporte

agem na nossa percepção: forma, tama-

promocional ou uma marketices dessas, ou mesmo depois dos outros

nho, cor e textura. Ou seja, tudo q ue é vi-

itens, pois cada vez mais o consumidor tem mais contato com a interface

sível possui uma forma, uma definição re-

dita virtual do que com a real. Como alguns amigos com quem você tro-

lativa de proporções e uma superfície ca-

ca mais emails e scraps no Orkut do que bate-papo tomando um chopp ou

racterística.

mesmo ao telefone.

 A cor é um dos fatores mais importan tes

No caso de um site atrelado a uma infinidade de aplicações com fornece-

nesta história, pois é o que nos p ermite

dores e suportes diversos, e que certamente será visto por monit ores de

visualizar a forma, distinguindo-a do seu

calibres diferentes, sugiro que todos, pelo menos por enquanto, corram

fundo, daí definindo o tamanho, a textu-

para as 216 cores da paleta websafe.

ra etc. Um exemplo, o dourado em uma superfície lisa é freqüentemente usado para transmitir sofisticação, elegância e nobreza. Essas coisas de convites de casamento a relatórios anuais. Já em uma superfície com tex-

O bom uso das cores em um

tura rugosa, de ferrugem, carcomida,

site deve considerar:

como em uma placa velha, já vira decadên-

3% 10% 10 % 26% 26 % 61% 61 %

Não sei Intuição Metodologia  Ambos

  Acesse o site www.arteccom.com.br/webdesign e participe!

cia, velhice. Ou seja, cor isoladamente não é tudo. Há também o fator cultural, que pode se manifestar em produtos (site também é um produto) que são consumidos tanto em países com diferentes referências em rela-

19

  a    t   s    i   v   e   r    t   n   e

 Amplie seu vocabulário visual  ção às cores, como por grupos sociais específicos. Cito como exemplo um trabalho de logotipo que Marcelo Martinez e eu fizemos há sete anos para uma empresa ligada à indústria da moda. Buscávamos diferenciar a imagem desta empresa das suas concorrentes no segmento, que em sua grande maioria usava tons pastéis, independente dos estilos adotados. Desenvolvemos um l ogo forte, tanto nas formas como nas cores, e de fácil aplicação, usando vermelho e preto. Apresentamos para o cliente, explican-

quando o logo o riginal  foi selecionado e inclu-

do os motivos, mostrando os layouts das aplicações e um

ído em um livro da Supon Design Group ch ama-

ensaio do que seria o manual da marca. O cliente disse que

do Visual Impact .

adorou, mas perguntou se poderíamos trocar o vermelho

Wd :: Com relação à psicologia das cores,

por azul. Explicamos que com isso a marca perderia em im-

como um webdesigner pode agregar valor a

pacto, pois o vermelho é uma cor que não sofre com mu-

uma determinada cor utilizada em um

danças de tendências na moda etc. Ele finalment e se jus-

layout?

tificou, dizendo ser vascaíno, e declarando que c om essas

Bruno :: Assim como o argumento estapafúrdio

cores a logo fica muito próximo ao símbolo do Flamengo,

do meu cliente, algumas destas listas que

entendem?. Esse obviamente é um daqueles clientes, dos

apontam supostas associações entre cores e

quais ninguém está livre, que pede para levar os layouts

significados são de uma patetice ímpar, ímpar, como a

para casa para mostrar p ara a mulher opinar Frustrante,

que confere a países com determinadas cores

mas nossa satisfação pessoal veio alguns meses depois

nas suas bandeiras sucesso garantido garantido.. Chegaria a ser hilário se não fosse perigoso ver profissionais de diversas áreas do design, marketing e comunicação repetirem, muitas vezes por escrito, essas bobagens antecedidas de  Estudos comprovam que. que. A cor não é o único fator visual determinante, muito menos tem poderes mágicos. Se pintarem uma foto de uma tartaruga atropelada na estrada de vermelho e laranja não vai te dar fome, e se azul fosse a única garantia de refrescância a CocaCola estava falida. Esse empirismo todo me lembra uma cena da comédia Monty Phyton e o Cálice Sagrado em que

20

  a    t   s    i   v   e   r    t   n   e

o Rei Arthur e seus cavaleiros deveriam responder corretamente a três perguntas para atravessarem uma ponte sobre um desfiladeiro ou serem lançados à morte. O primeiro se apresenta e escuta: Qual o seu nome?  Arthur,, responde. O que procura? O Cáli Arthur ce Sagrado. Qual sua cor favorita? Azul. Ok, pode passar pass ar.. Quando o segundo cavaleicaval eiro se apresenta, tendo ouvido as perguntas e respostas anteriores, diz seu nome, seu objetivo e na pergunta referente a sua cor favorita, responde: Azul NÃO, Vermelho!  E é arremessado para a morte. Não confie em fórmulas. Cada caso é um caso (como cada cavaleiro é um cavaleiro), com suas circunstância circunstâncias, s, contextos, objetivos e caracterí características. sticas. Wd :: Na hora de elaborar um site, alguns profissionais costumam trabalhar intuitivamente. Até que ponto há uma fronteira entre o instinto e a técnica quanto ao estudo de cores? Bruno :: Bom, depende até que ponto você está podendo se arris car car,, e ao site do cliente. Experimenta mandar um sujeito que   saca um pouco de portunhol traduzir as palestras estrangeiras de um congresso de medicina. O cara vai no inst into, não tem muita técnica, mas improvisa bem. No ano seguinte é até provável que haja um recorde na quantidade de erros médicos no país, por extração desnecessária de orgãos ou algo do gênero. Você pode mandar o cara que fala portunhol apanhar sua amiga mexicana no

 A cor não é o único fator visual determinante, muito menos tem poderes mágicos. Se pintarem uma foto de uma tartaruga atropelada na estrada de vermelho e laranja não vai te dar fome, e se azul fosse a única garantia de refrescância a Coca-Cola estava falida 

aeroporto, mas quanto melhor for o sujeito, quanto mais ele soub er er,, melhores são suas chances de sucesso. Ainda mais se você quer chamar isso que faz de profissional.

21

  a    t   s    i   v   e   r    t   n   e

Wd :: Além de livros e publicações especializadas, como um designer pode se aperfeiçoar e obter assim maior sensibilidade para poder criar uma composição cromática bem equilibrada? Bruno :: Que tal estudar estud ar,, e estudar muito, e estudar est udar sempre? Tem funcionado há séculos! Quando falamos em cursar uma faculdade, estamos dizendo como nas antigas tribos vá aprender com os mais velhos, os que sabem mais. Podem não saber tudo, mas sabem mistérios que você nem sonha que existem. Acabou a faculdade, que em princípio é um processo ordenado de transmissão de conhecimentos, faça cursos, workshops, assista palestras, participe de seminários e congressos. Amplie seu vocabulário visual. Aquele cartaz do Saul Bass e aquela capa do Eugênio Hirsch vão te ajudar a resolver o layout daquele site. Não na base da cópia da estrutura ou adotando aquelas fontes específicas, mas vão te educando visualmente para poder desenvolver a sua própria solução.

O designer  gráfico, de produto, d e interface, de jóias, de ambientes  é tão bom quão vasto for seu repertório de soluções. Se este é limitado, maiores s ão as chances de termos trabalhos medíocres, e é só olhar em volta. Veja o que  já foi experimentado, informe-se sobre o que já foi feito, e aos poucos  pois uma profissão se aprende aos poucos, não importa a velocidade do mundo moderno, da sua conexão ou da sua máquina, ou o que dizem os tutoriais e cursos de rápida duração  vá juntando as peç as de informação e montando suas soluções. Sabemos q ue a história se repete, o que significa que as pessoas, independente da quantidade de piercings e tatuagens e hábitos alimentares esdrúxulos, se comportam de forma semelhante. Para se

 Para se aperfeiçoar em composição cromática, estude psicologia, sociologia e ergonomia, e entenda como o Homem se relaciona consigo mesmo, com os outros e com seu meio físico  22

aperfeiçoar em composição cromática, estude psicologia, sociologia e ergonomia, e entenda com o o Homem se relaciona consigo mesmo, com os outros e com seu meio físico. Livros e revistas são depositórios do conhecimento humano, e de maneira geral mais responsável e amp la que a web. Odeio dizer isto, mas nem tudo se encontra no Google.

23

  a    i   c   n    ê    i   c    à   e    t   r   a   a    d

Teoria das cores: É inegável dizer que a cor é um elemento fundamental na estética de uma página na web. Por causa de suas qualidades atrativas, pode-se usar determinadas cores para identificar áreas ou um determinado grupo de informações. Entretanto, nem todos as utilizam coerentemente, praticando exageros devido a gostos pessoais duvidosos. Certos cuidados quanto ao seu uso são de extrema importância e

 Amarelo :: Estimula a criatividade, é uma cor vibrante e alegre.  Amarelo Incentiva a conversação. Em excesso é cansativa.

conhecer a sua teoria é vital na hora de saber lidar com a sua

 Aloísio Magalhães

  m   a   r   o    f   a    i   r    é    t   a   m   a    l   e   p   s   o    d   a    h    l   a   p   s   e   s   e   r   o   c   s   a    d   s   o    d   a   c    i    f    i   n   g    i   s   s    O

24

 .   n   o    t    t    i   u    G   o   r    d   e    P   e    d        l    i   s   a   r    B   o    d   s   o   g   o    L       o   r   v    i    l   o    d   s   o    d   a   r    i    t

X

Considerado um dos designers mais expressivos de sua época, Aloísio Magalhães foi pioneiro do design gráfico no Brasil e sempre defendeu conceitos como a Brasilidade do design e a recuperaçãoo da memória artística e cultural do recuperaçã país. Falecido em 13 de junho de 1982, Aloísio tinha formação em Direito e foi membro do grupo de vanguarda O Gráfico Amador em Recife, na década de 60. Entre seus trabalhos, destacam-se o design das notas do cruzeiro novo e a identidade visual de empresas como Petrobrás, Light, Souza Cruz, Embratur, Embratur, Unibanco, Xerox, entre outras.

criatividade.

Segundo Aloísio Magalhães: Design é a compatibilização entre intuiç ão e metodologia. Essa frase nos faz pensar sobre a tênue linha que separa a técnica d o instinto e até onde esses element os se interagem na hora da criação. Com relação ao uso das cores, esse divisor torna-se ainda mais imperceptível, visto que muitos ainda desconhecem a total aplicação dos conceitos cromáticos em um layout.

  a    i   c   n    ê    i   c

da arte à ciência Na web , evi tar o uso g ratuit o das cores e dar ênfase ao seu seu aspect aspectoo de códig códigoo é funfundamental na hora de desenhar uma interface de grande complexidade organizacional. É p reciso, antes de tudo, lembrar que um site é, em princípio, um projeto de design de informação. Todos Todos os elementos, inclu sive as cores, devem convergir para que a experiência do usuário seja a mais eficiente e confortável possível. Neste caso, é necessário ter um conhecimento teórico sobre o funcionamento das cores como variável informativa, algo que se estuda na chamada semiolog ia gráfica.

Código

   à   e    t   r   a   a    d

X

O código de uma cor é a maneira de relacioná-la a uma informação. Uma cor pode agrupar elementos que se correlacionam, como também dar destaque a certos itens e indicar uma seqüência de navegação.

Colorindo a mente do seu usuário  Alguns estudiosos defendem a idéia de que as cores realçam a identidade de uma marca e provocam associações e sensações em uma determinada pessoa, agindo no nível do inconsciente. No li vro Logos do Brasil, o autor Pedro Guitton cita que, com o uso adequado de uma cor cor,, é possível despertar despertar,, além de outras impressões, o apetit e, a pressa e a criatividad e.  Verde :: É considerada por muitos a cor da natureza, logo, equilibra e acalma. Mais precisamente: o verde claro tranqüiliza e o verde escuro transmite eficiência.

Para Rodolfo Capetto, professor de design da Escola Superior de Desenho Industrial da Universidade do Estado do Rio de Janeiro (Esdi/Uerj), as teorias que associam as cores a determinadas emoções são contraditórias. Esse pensamento perde força quando se descobre, por exemplo, que o vermelho, chamada cor quente, é fisicamente uma cor fria, e o azul, chamada cor fria, é fis icamente uma cor quente, explica o professor.

Cores quentes

X

Temperatura de cor é um conceito importante em física, astronomia e fotografia. Medida em graus Kelvin, é a temperatur temperaturaa na qual se precisa levar um corpo negro (objeto hipotético que absorveria 100% dos comprimentos de onda) para que ele emita luz numa determinada cor. Na medida em que ele esquenta, passa a emitir uma luz avermelhada. Aquecendo mais, passa a emitir uma luz amarelada. Aumentando ainda mais a temperatura temperatura,, tornase azulada. Assim, o azul é uma cor mais quente, no aspecto físico, que o vermelho. Uma curiosidade: em astronomia, a cor das estrelas é usada para medir a sua temperatura. As vermelhas são mais frias e as azuis mais quentes.

25

  a    i   c   n    ê    i   c    à   e    t   r   a   a    d

Segundo ele, o papel do designer é o de questionar essas teorias, criando um entendimento dos vários referenciais que o usuário possa ter em mente, devid o a sua herança cultural, e surpreendê-lo com uma solução nova e personalizada que atenda aos parâmetros e requisitos de cada projeto. Cada caso é um c aso. Ao planejar um trabalho, é preciso primeiro saber se existe uma cor institucional que deve ser usada e como integrá-la com as demais cores do layout. Tem que se trabalhar de forma que a cor mantenha as características do negócio do cliente e

 Vermelho :: Estimulante, excitante,  Vermelho direciona e transmite energia. Pode deixar as pessoas agitadas e irritadas.

que a interface permaneça perfeitamente funcional. Esses são problemas que, às vezes, tornam-se difíceis de resolver,, e não há fórmulas, cada caso preci sa ser estudado inver dividualmente, destaca Capetto. De acordo com Carlos Bahiana, professor de design da Universidade Unicarioca e especialista em usabilidade, no que diz respeito à aplicação cromática em uma interface, existem aspectos fisiológicos, culturais, circuns-

contextualização de significado como, por exemplo, as

tanciais e contextuais que afetam significati vamente a re-

mensagens de erro que podem ocorrer em um sistema.

ação a determinadas cores. Com relação a sites, ele lembra

Nesse sentido, é adequado associar as noções dos concei-

que a escolha por um conjunto de cores que traga o me-

tos de usabili dade ao emprego cor reto de cada cor.

lhor resultado deve ser feita levando-se em consideração

Estudos ergonômicos permitem também compreender

qual contexto a cor está inserida, o púb lico-alvo e qual es-

melhor a adequação das cores quanto ao seu uso e públicos-

tratégia de negócio da empresa.

alvos. Para Carlos Bahiana, a usabilidade, implementada a

 A importância da cor na web e a sua cultura

partir de um estudo ergonômico, permite não só conceber

Do ponto de vista da arqui tetura da informação, as

uma arquitetura mais adequada, como também, por exemplo,

cores têm sido usadas como auxílio na organização do con-

especificar melhor a utilização de uma determinada cor como

teúdo, facilitando a compreensão das informações e na

elemento de interação com o usuário.

Cor e Cultura  Albert Badre, professor da Escola de Psicologia da Georgia Institute of Technology, Technology, realizou pesquisas, do ponto de vista cultural, sobre preferências em design de interfaces e as relacionou como  marcadores culturais. As informações foram coletadas por meio do Cultural Issues Questionnaire, aplicado durante a 8ª WWW User Survey do Graphic, Visualization, & Usability Center (http:// www.gvu.gatech.edu/user_surveys/survey-1997-10/).

não atraentes. Também confirmam-se diferenças culturais na percepção e uso de cores. Enquanto vermelho significa perigo ou  pare  par e nos EUA, na China denota felicidade. Verde significa fertilidade e força no Egito, enquanto nos EUA significa seguro ou prossiga  e, na França, representa criminalidade. Portanto, o estudo do público-alvo do site deve levar em consideração a percepção do uso de cores, evitando-se assim a ambigüidade.

Em seu estudo, ele percebeu que chineses preferem fortemente páginas mais coloridas enquanto que os alemães declararam não apreciá-las. Ingleses, franceses e espanhóis indicaram clara preferência por elementos gráficos, enquanto alemães os acharam

Para quem quiser saber mais sobre as aplicações cromáticas, o site www.mariaclaudiacortes.com www.mariacla udiacortes.com apresenta um interessante e bemhumorado estudo sobre a psicologia das cores, incluindo seus diferentes significados em cada cultura. Vale a pena conferir!

26

 Tem que se trabalhar de forma que a cor mantenha as características do negócio do cliente e que a interface permaneça perfeitamente funcional  Rodolfo Capetto

Com relação à internet, Carlos ressalta que o designer deve observar três aspec tos básicos no uso de uma cor. O primeiro é o tecnológico, que diz respeito à capacidade que o equipament o do usuário tem de reproduzir cores. O segundo é cultural, que atende às expectativas e preferências de cada visitante e, por último, a usabilidade, em que a legibilidade, leitura, contextualização, funcionalidade e visibilidade são levadas em consideração. Para ele, atualmente, cultura e usabilidade vêm se fundindo na medida em que os estudos sobre estes assuntos tornam a navegação mais eficaz para determinados públicos. Hoje esta é uma das maiores preocupações na produção de sites. Pode-se dizer que o layout, assim como a seleção de imagens e a própria arquitetura do site, tem sido considerado com o elemento cultural. São bastante conhecidas as diversas listas de significados das cores, eventualmente acompanhadas de alguma associação à nacionalidade, afirma Carlos. O problema é mais complexo, envolvendo correntes cul turais dentro dos países e variações p or gênero. Segundo o professor, professor, projetos voltados ao público mundial têm buscado atingir uma certa neutralidade cultural. Por outro lado, outros trabalhos, voltados para grupos específicos e geograficamente localizados, buscam a especialização cultural, enfatizando traços e preferências. Em ambos os casos, a cor tem papel importante e conhecer as

27

  a    i   c   n    ê    i   c    à   e    t   r   a   a    d

Especialista em design de interfaces, o professor Carlos Bahiana dá algumas dicas importantes sobre o uso de cores na web:

Branco :: Considerada a melhor cor para demonstrar limpeza, é ofuscant e, levando a um certo cansaço mental. O ideal ideal é sempre combiná-la com out ra cor.

:: Cuidado com os excessos. A quantidade de cores usadas na web, ao contrário dos impressos, não representa qualquer aumento de custo, o que pode l evar a um certo abuso; :: A qualidade e capacidade dos dispositivos pelos quais se verá o design têm enorme variação, ou seja, significa que di ficilmente duas pessoas verão as mesmas cores em monitores diferentes. Variações sutis de saturação, tonalidade ou luminância podem não ser percebidas ou se apresentarem alteradas. Por exemplo, o contraste entre vermelho e verde (cores complementares, primárias no sistema RGB) é apenas cromático, desaparecendo quase completamente quando reduzidos a tons de cinza. :: Um terceiro aspecto, este psicológico e independente do meio em que a cor é observada, diz respeito ao grau de complexidade visual percebida. Duas interfaces com o mesmo número de elementos de tela e com o mesmo layout podem ser percebidas como entulhadas, vulgares, confusas ou como limpas, elegantes e funcionais, dependendo da quantidade e características tonais utilizadas. :: Considerando-se que o contraste, cromático ou luminoso, é o que nos permite distinguir um objeto de outro ou do fundo em que ele está inserido, está claro que a uti lização de cores contrastantes ressalta a presença de um determinado elemento no layout.

características característic as de cada público é fundament fundamental. al.

muitas pessoas estão falando alto, todas tentando se fazer

Cuidados com os excessos

ouvir pelo visitante que acabou de abrir a porta. Ele não vai

O uso de uma grande variação de cores em uma

entender nada, vai ter dificuldade em dar atenção a cada

interface pode ser prejudicial. Para Carlos Bahiana, na ten-

solicitaç ão e, a menos que precise muito de alguma infor-

tativa de fazer o site ficar mais atraente e enfeitado, vão-

mação ali dentro, irá embora imediatamente, explica.

se aplicando detalhes de c or or,, preenchendo os vazios de um

Outro problema está relacionado à legibilidade. Exis-

layout mal concebido. Infelizmente não existe uma fórmu-

tem algumas regras quanto ao uso das cores q ue devem

la mágica ou receita de bolo. Cada cor é uma voz e a

ser obedecidas para que não haja dificuldade de leitura. O

interface deve funcionar como um coral. Se você não sabe

contraste entre a cor de fundo e o texto é requi sito básico

o que está fazendo e começa a juntar vozes aleatoriamen-

para quem não quer perder seu usuário logo de primeira.

te, ou a partir de critérios pess oais e sem embasamento,

No livro A Prática da Simplicidad e e,, Jakob Nielsen cita q ue

não terá um coral, mas uma balbúrdia, alerta o professor.

a ótima legibilidade requer o texto preto em fundo branco,

Ele condena o uso de diversas cores fortes em um

em que ele denomina como texto positivo. Já o contrário,

layout para dar destaque a uma grande quantidade de ele-

ou seja, texto branco em fundo preto, chamado texto ne-

mentos, na tentativa de acomodar pressões de patrocina-

gativo,, causa quase a mesma eficácia de leitura. Entretangativo

dores, anunciantes ou políticas. O resultado pode ser

to, o autor diz que esta inversão de cores gera no

comparado a uma sala sem tratamento acústico, em que

internauta uma cert a desaceleração ao ler.

28

  a    i   c   n    ê    i   c

Nielsen recomenda, além do uso de

apenas 256 cores. Quando se produz com

fontes de tamanho suficiente para que

cores diferentes das 216 protegidas, os

possam ser lidas sem dificuldade, o uso de

navegadores as convertem para uma outra

cores de fundo lisas ou padrões de fundos

cor mais próxima, dentro das 40 cores que

sutis. Os elementos gráficos de fundo,

variam de uma plataforma para outra, o

principalmente quando muito coloridos,

que poderá comprometer a qualidade do

podem interferir na capacidade de reco-

seu trabalho.

nhecer as formas das palavras. É impor-

Carlos Bahiana explica que cada com-

tante lembrar também a importância de

binação de hardware (placa de vídeo e

saber trabalhar com as cores nos links. Ge-

drives), sistema operacional e navegador

ralmente, os links já visitados pelo usuário

resulta em um determinado conjunto de

são diferenciados dos que ainda não foram

cores reprodutíveis em cada computador.

vistos pelo uso de outras cores. Quando

Quando uma cor é especificada no site e

não é respeitada essa regra, o sentido de

não está presente na paleta do equipamento

estrutura e localização do visit ante da pá-

do usuário, a cor mais próxima é represen-

gina fica deficiente e a navegação sofre

tada na tela, eventualmente entremeada

uma perda significativa em sua eficácia.

de pontos de outra cor que, comb inada à

Cores protegidas para navegadores

primeira, tenta reproduzir a cor especificada.

Na hora de se trabalhar em um

É o chamado d ither ither..

layout, é preciso ter em mente que exis-

Ele alerta que mesmo a utilização de

tem diversos tipos de monitores de com-

cores seguras não garante que o usuário

putador, com capacidade e gama de cores

veja na tela o mesmo que o webdesigner

variadas, além de diversas configurações de profundidade de bits. Embora seja interessante trabalhar usando uma combinação de 16 milhões de cores, grande parte de seus usuários verão seu site em máquinas capazes de reproduzir imagens com

 Azul :: Transmite segurança e confiança, além de tranqüilidade. Em exagero pode deprimir as pessoas. Turquesa :: Passa a sensação de frescor, relaxamento, abre a mente. Porém transmite uma certa imaturidade.

Dither

X

Para evitar a ocorrência do dither, deve-se usar um conjunto de cores, bastante limitado, que pode ser considerado seguro para a maioria das combinações de hardware, sistema operacional e navegador. Este conjunto são as 216 cores protegidas, também conhecido como paleta websafe. Quanto mais baixa a resolução da tela e o número de cores disponíveis, mais perceptível e incômodo é o dither. Outro dado importante é o progressivo aumento de resolução de tela, que já está superando os 800x600. Quanto maior a resolução, mais próximos ficam os pontos resultantes do dither. Com a tendência natural do olho humano de fundir pontos próximos, o efeito eventual do dither fica reduzido. Bits

X

O termo se refere à quantidade de cores que existe em uma imagem. Esta quantidade pode ter um enorme impacto no  peso (tamanho em bytes) do arquivo. 1 bit :: 2 cores 2 bits :: 4 cores 3 bits :: 8 cores 4 bits :: 16 cores 5 bits :: 32 cores 6 bits :: 64 cores 7 bits :: 128 cores 8 bits :: 256 cores 15 bits :: 32.768 cores 16 bits :: 65.536 cores 24 bits :: 16.777.216 de cores 32 bits :: 16,7 milhões + escala de cinza de 8 bits

29

   à   e    t   r   a   a    d

  a    i   c   n    ê    i   c    à   e    t   r   a   a    d

 Cada cor é uma voz 

planejou na hora. A qualidade da placa de

Ele destaca que é preciso fazer uma

e a interface deve

vídeo e do monitor monitor,, além de regulagens de

diferenciação entre achar que uma cor é

brilho e contraste, torna a correspondência

ou não adequada baseando-se apenas no

de tom e matiz uma incógnita para o

gosto pessoal e no instinto e a decisão

designer.. Felizmente, este quadro está mudesigner

embasada no conhecimento e na experi-

dando cada vez mais rápido. Placas de vídeo

ência. Achar, todos podem, não custa

capazes de reproduzir cores em 16 bits (64K 

nada e tem o valor do palpite. Saber é

fazendo e começa

cores) ou mais, já se tornaram comuns.

para quem estudou a técnica e a aplicou.

a juntar vozes 

  Além disso, tanto sistemas operacionais

O fato de um profissional, que estudou a

como navegadores têm padronizado a re-

técnica e tem experiência na sua aplica-

produção de cores.

ção, parecer trabalhar intuitivamente

Cor, técnica e instinto

pode levar à impressão de que o estudo é

funcionar como um coral. Se você não sabe o que está

aleatoriamente, ou a partir de critérios

O uso adequado das cores é uma etapa

pessoais e sem embasamento, não terá um coral, mas uma balbúrdia  Carlos Bahiana

Harmonização

X

Na hora de escolher as cores em um projeto, é importante levar em consideração sua harmonização, que consiste em alguns princípios fundamentais como similaridade, familiaridade, equilíbrio, ordem e ambigüidade.  Veja, também, o box Maneiras de harmonizar as cores e tornar seu layout mais equilibrado na página ao lado.

importante da comuni cação na web e, para

Segundo Rodolfo Capetto, a intuição

o webdesigner ter o domínio dos conceitos

é a destilação da experiência. É quando

cromáticos, além do conhecimento dos prin-

você não precisa mais pensar conscien-

cípios ergonômicos, é essencial para o de-

temente para saber o que deve ser feito,

senvolvimento de um bom layout. Ao esco-

pois já pensou muito, em várias situações

lher uma cor em um determinado projeto

semelhantes no passado, ressalta o pro-

online, conhecer as estratégias sobre

fessor.. Entretanto, ele afirma que apesar fessor

harmonização e os diferentes níveis de

de haver um nível de conhecimento que

contraste podem auxiliar a legibilidade e a organização do conteúdo em seu site. Para Carlos Bahiana, contar puramente com a intuição ou instinto é um risco que o profissional não deve se expor. expor. Certa vez, discutindo a relevância de estudar design, me perguntaram se haviam designers com diploma melhores do que outros

Contraste

vem da vivência profissioX

O contraste é uma forma de acrescentar um destaque visual a uma página. Com relação às cores, pode ser definido como uma diferença entre elementos semelhantes. Em um layout equilibrado, a visão do usuário se volta para os contrastes mais extremos. Estudos demonstram que um olhar é i mediatamente atraído para as partes de uma interface que são extremamente diferentes do que está a sua volta.

que cursaram uma universi-

30

dispensável.

nal, o estudo teórico e técnico das propriedades da cor, como de outros elementos visuais com que o designer trabalha, é essencial para fundamentar o trabalho e garantir que as soluções sejam mais sólidas. Sendo assim, aqui fica a dica: cor não é só arte, mas também uma ciência, e o seu uso indis-

dade. Minha resposta continua contin ua sendo a mes-

criminado poderá fazer do seu site um

ma daquela época: não conheço quem tenha

 arco-íris sem o almejado pote de ouro

piorado estudando.

ao final, que é o seu usuário.

  a    i   c   n    ê    i   c    à   e    t   r   a

Preto :: Utilizado sozinho é austero e confere isolamento. Associado ao branco sugere um ar moderno. As composições do preto com outras cores podem ser bem alegres e esportivas.

Círculo cromático

Maneiras de harmonizar as cores e tornar o seu layout mais equilibrado: :: por monocromia :: quando se usam diferentes valores de luminância de uma mesma cor. cor. :: por complementa complementaridade ridade simples :: utilização de duas cores opostas no círculo cromático. Este é um esquema a ser analisado com cuidado, como no caso do uso de vermelho e verde. Pode-se ter uma área maior com uma cor fria, deixando a área menor com sua cor complementar quente. :: por complementaridade contígua :: mais agradável, em geral, que a harmonia por complementaridade simples. É feita por duas cores vizinhas e uma terceira oposta a elas no círculo cromático. Neste caso, é importante determinar qual será a cor predominante, aquela que chamará mais atenção na interface. Evita-se, exceto em casos especiais, que a cor dominante ocupe a maior área da tela.

X

Desenhado por Johannes Itte, em 1928. No centro do círculo estão as cores primárias, que são magenta, amarelo e azul cyan. Essas cores são usadas na criação de todas as outras. Combinando as primárias duas a duas, em proporções similares, surgem três cores secundárias: vermelho, verde e violeta. As seis cores terciárias são formadas misturando uma primária e uma secundária adjacente, como por exemplo: magenta com vermelho, magenta com violeta, amarelo com verde, amarelo com vermelho, azul cyan com verde ou azul cyan com violeta etc.

:: por tríade :: imagine um triângulo eqüilátero sobre o círculo cromático e utilize as cores sob os vértices. :: por temperatura :: cores de maior (violetas, azuis, verdes) ou menor (vermelho, laranja, amarelo) freqüência no espectro luminoso. É recomendável o uso de branco como cor de alívio no texto, separadores, áreas de respiração ou elementos acessórios, principalmente se forem utilizadas cores quentes. :: por analogia :: utilização de cores vizinhas no círculo cromático, como por exemplo, o amarelo, laranja e vermelho. Outra preocupação é com o equilíbrio visual. Elementos escuros tendem a ser engolidos visualmente por um fundo claro, o chamado contraste de luminância. Com isso, parecem menores. Se as áreas forem igualmente distribuídas entre uma cor quente e uma cor fria de igual luminância, a cor quente predominará. Em uma interface em que prevalecem prevalecem cores frias, as cores quentes chamam atenção, atraindo o olhar. Em uma interface em que predominam cores escuras, as cores mais claras atrairão o olhar.. Isso provoca um efeito de ordenação na leitura. Usadas incorretamente, estes tipos de contrastes podem provocar dispersão no usuário, olhar sendo prejudiciais para o layout.

31

  a    d

32

  e    t   a    b   e    d

Cores: como conciliar instinto e técnica? No que diz respeito ao uso das cores na web, sab er caminhar pela tênue linha que separa a intuição da técnica é uma tarefa difícil, nem sempre bem definida entre os profissionais da área. Até onde o instinto e o conhecimento t ácito são importantes na hora de elaborar uma composição cromática é tema de debate nesta edição. Intuitivo ou teórico, compartilhe da experiência destes profissionais e tire as suas próprias conclusões. Conhecimento tácito

:

Conhecimento adquirido por longos períodos de experiência e cumprimento de determinadas tarefas, durante as quais o profissional desenvolve um sentido e uma capacidade de fazer julgamentos intuitivos sobre um assunto específico.

Sempre, sob qualq uer natureza do ponto de vista do design, cor, tipografia ou outro elemento visível constituem em informações e devem interagir interagir.. A definição desses dess es elementos é parte do projeto, relaciona-se ao conceito, à estrutura, ao conteúdo e aos parâmetros, sendo o público-alvo um deles. Em projetos de design, qualquer definição visual é estratégica e, naturalmente, pretende conquistar o usuário. Cor envolve não só aspectos psicológicos, psicológ icos, mas também culturais e técnicos. O entendimento desses aspectos, por meio da formação e da experiência, é pré-requisito p ara a boa qualidade dos resultados. Aqui novamente não se deve dissociar o elemento cor dos outros elementos visuais. Por mais bem definida que seja, a cor utilizada só obterá valor se todos os outros elementos também forem bem definidos e articulados.  A intuição é uma grande aliada na atividade conce itual do designer, do escultor, do arquiteto, do cienti sta, do artista etc., desde que fundamen tada na razão e no conhecimento. O desenvolvimento da sensibilidade decorre do interesse: um olhar analítico e crítico sobre o repertório de casos disponíveis na web é exercício fundamental. Como dica de leitura, cito autores clássicos no panorama do

design: Johannes Itten, Josef Alb ers, Karl Gerstner, Gerstner, Ostwald e Munsell. :: Arísio Rabin Professor da ESDI, Escola Superior de Desenho Industrial www.esdi.uerj.br

Por fim, não se deve resumir problemas a critérios ou fórmulas pré-concebidas, assim como um designer designe r não deve se limitar. limitar. Não abrir mão de uma determinada determinad a gama de cores, por exemplo, é uma limitação auto-imposta e desnecessária. Aconselho ler Interaction of Color Color,, de Josef Albers, pois auxiliará nessa compreensão.

33

  e    t   a    b   e    d Discorrer sobre cores é sempre garantia

res e limitações que devem ser levados em

de um debate cheio de controvérsias e muit a

conta na escolha das cores a serem utiliza-

discussão. Falar sobre o seu uso na web tor-

das. Entre eles, destaco o pleno conhecimen-

na-se ainda mais complexo, devido às ques-

to sobre o público-alvo. É primordial que um

tões técnicas inerentes a essa mídia.

site seja produzido, seguindo um visual har-

 Após ser captada pela visão, a cor é pro-

mônico para quem o acessa. Para que isso

cessada pelo cérebro, formada, quantificada

aconteça, o designer deve ficar atento a as-

e avaliada, tornando-se um elemento de sig-

pectos como a faixa etária, a cultura, a posi-

nificado. Nessa etapa o cérebro identifica

ção social e geográfica, assim como as parti-

qual cor é vista e a relaciona com experiências experiênc ias

cularidades do segmento para o qual está cri-

anteriores para lhe atribuir valores. Desse

ando e até a qualidade do equipamento utili-

modo, pode-se considerar que os seres hu-

zado pela audiência.

manos têm uma resp osta emociona l à cor, cor,

Já entre as limitações, destaca-se o uso

fundamentada no contexto cultural em que

mais restrito de cores, ou seja, deve-se

se insere.

manter um padrão visual compatível em meio

Para o designer, designer, é importante estudar estu dar e

às variações entre as diferentes plataformas

compreender quais poderão ser esses valo-

utilizadas pelos p elos usuários. Outro Outr o fator, fator, é a ne-

res atribuídos, uma vez que são passíveis de

cessidade de adaptação do meio offline para

interpretações e, portanto, podem variar de

o meio online. Neste caso, o webdesigner é

pessoa para pessoa.

forçado a se submeter ao conceito e escolha

  As cores são muito importantes uma

posição das cores em CMYK para RGB e, mais

interface gráfica, não só pelo seu valor

restrito ainda, para as cores consideradas

estético, mas pelo poder em criar códi-

 safe for web é um desafio pertinente àque-

para

o

desenvolvimento

de

gos estruturais e estratégicos em determinadas situações. Se bem utilizadas,

:: Eduardo Vieira Diretor de criação da Tribo 12 www.tribo12.com.br

34

de cores já definidas no meio offline. A trans-

les que trabalham com web.   A questão técnica e teórica

podem facilitar o processo de comunicação,

deve consolidar o funcionamento e

direcionando o olhar do leitor a regiões espe-

usabilidade do site, expressos em

cíficas da página. Ao contrário, criam um ruí-

combinações equilibradas e harmôni-

do e dificultam a leitura. Um exemplo seria a

cas, contrastes e saturação adequados

diminuição de contraste entre texto e fundo.

para leitura e visibilidade dos demais

Nesse processo de comunicação, e assim

componentes de um layout, dentro dos

como no desenvolvimento de um site, ques-

limitadores que a web oferece. O uso de

tões intuitivas vão defrontar com questões

poucas cores e escolha de paletas seguras,

técnicas. Uma não deve anular a outra, mas

coerentes ao tema e harmônicas entre si,

se complementar, de modo a afinar a compo-

certamente evitará surpresas. Nesse caso, é

sição e a arte final.

muito importante o feeling do designer ao

 Ao delinear um layout, há diversos fato-

captar essas particularidades em um projeto.

  e    t   a    b   e    d  A única forma de conciliar intuição com técnica é dominar bem o assunto em questão, para só depois ter conhecimento suficiente para ousar quebrar algumas regras básicas. Quando estamos

desenvolvendo projetos pessoais, pessoais , a liberdade de paleta é grande, pois não existe muita preocupação sob re o público que vai acessar o seu material. O mais importante nesse caso é a experimentaçã experimentaçãoo em si. Em todo caso, quanto mais você experimentar, mais propriedade terá para decidir que cores usar em projetos comerciais, pois você sabe quais não funcionam muito bem, e quais são as combinações mais interessantes.

:: Mark Al Sócio-fundador da Nitrocorpz www.nitrocorpz.com.br

35

  e    t   a    b   e    d Como diria Johannes Itten, ilustre professor da escola de

tímulos ficam armazenados na memória e são usados como

arte alemã Bauhaus: Cor é vida, um mundo sem cores aparen-  atalhos mentais. mentais. Como diria Lesl ie Cabarga, autor de l ivros ta estar morto. Assim como a chama produz luz, a luz produz

best sellers sobre cores: Nosso proc esso mental de seleção

cor.. Assim como a entonação confere cor à fala, a cor c onfere cor

envolve milhões de Gigabytes, oriundo de sonhos conscientes

 som à forma forma.. A importância do uso criterioso das cores e

ou inconscientes, memórias emocionais ou qualquer outra as-

seus contrastes ocupam um nobre espaço em qualquer criação.

sociação socia ção de cor c or.  . 

Seja na pureza abstrata de Mondrian, em um objeto decorativo, na sinalização de trânsito trân sito ou em um site na web.

 A bagagem cultural no uso das cores não pode ser ignorada, ainda mais se considerarmos os últimos dois mil anos de

O desenvolvimento da técnica de aplicação e reprodução de

evolução e experimentação.  Atualment  Atualmente, e, o uso da cor

cores evoluiu muito no decorrer dos tempos. Muitas teorias e

está muito mais ligado a conceitos do que a teori as. As

modelos matemáticos foram inventados, inventados , acompanhados da gran-

regras artísticas de hoje prezam a liberdade, desde que coe-

de experimentação artística. Atualmente, além do conheci-

rentes e relevantes ao conceito pro posto. O uso da cor é cada

mento acumulado, dispomos da facilidade do computa-

vez mais emblemático, com inúmeras referências a estilos e

dor nesta árdua tarefa de combinação e reprodução

ícones presentes no inconsciente coletivo.

cromática. O caminho das pedras e a garantia de acerto já estão

 A aplicação e combinação de cores no design de websites

traçados e documentados, seja por meio da solução matemática

não fogem à regra. Tudo Tudo deve ser pensado e calculado, calculad o, pois o

ou pelo fruto da subjetividade do inconsciente humano. Mais uma

uso eficiente da cor pressupõe o aproveitamento desses ata-

vez, parafraseando Itten:  Se você desconhece a técnica e

lhos mentais. A utilização criteriosa da cor auxilia na compreen-

é capaz de criar obras primas em cores, então este des-

são de um layout ou navegação. Usar cores para determi-

conhecimento é o seu caminho. Mas se você não é ca-

nar qual o caminho os olhos do seu internauta deve-

paz de criar obras primas com seu desconhecimento,

rão seguir, atribuindo uma hierarquia ao seu conteú-

você deve procurar a técnica .

do, é um artifício que facilita a usabilidade e uma me-

 A prática e a experimentação garantem um maior crit ério

lhor experiência de consumo .

e consciência no uso de cores. Já disseram que um gênio é

O uso comedido e consistente das cores transparece uma

99% transpiração e apenas 1% inspiração. Strauss, talentoso

maior segurança ao usuário. Assim ele, inconscientemente,

músico do século XIX, confessava que soment e quatro ou seis

terá seus atalhos mentais e saberá identificar rapidamente

compassos de suas composições nasciam da inspiração, os de-

onde deseja clic ar e que conteúdo quer acessar, garantindo

mais compassos eram apenas um trabalho de elabor ação. O

maior conforto na utilização do seu site ou sistema. O mesmo

repertório absorvido por cada indivíduo durante sua vida ga-

processo mental ocorre em crianças pequenas, q ue se sentem

rante um vasto acervo de combinações e associações cromáti-

mais seguras em assistir a um determinado filme diversas ve-

cas, perpetuando o sentido icono gráfico da cor. cor. Este conjunto

zes, por terem certeza de como será a sua história e seu final.

de experiências exerce uma grande influência, agradável ou

Exatamente o recurso usado na série Teletubbies. Então, viva

não, consciente ou inconsciente no cérebro humano. Esses es-

os Teletubbies!

:: Norton Amato Diretor de criação da Anydesign.net www.anydesign.net

36

  a   s   s    i    l   e   m   :   :   o   s   a   c   e    d   o    d   u    t   s   e

Melissa: explosão de cores na web Inovação, tecnologia e muito, muito charme. Estas são as características da Melissa, que, desde 1979, vem conquistando as mentes, quer dizer, os pés das brasileiras . E para comemorar 25 anos de sucesso, a agência Grafia, que desenvolve os sites e cuida da gestão de e-commerce da marca há quatro anos, produziu o Melissa Celebration. Em entrevista à Webdesign, o sócio-proprietário da empresa, Luciano Burgel, conta como foi desenvolver esse projeto.

37

  a   s   s    i    l   e   m   :   :   o   s   a   c   e    d   o    d   u    t   s   e

Wd: Como foi o desenvolvimen-

leções anteriores. Os assuntos mais solicitados foram: moda com Melissa e games.

to do site

Wd: No site antigo, o usuário escolhia a cor de fundo da

Melissa

página e isso não foi mantido no atual. Como era a res-

Celebration?

posta dos usuários a essa opção de personalização?

Quanto tempo  A opção de escolher a cor do fundo foi uma experiência bem durou todo o

interessante.. Recebemos muitos emails elogiando a possibiliinteressante

processo, desde

dade, com declarações sobre o fundo que mais gostavam. A

o planejamento

intenção da troca da cor foi criar mais interativid ade entre o

até a implementação?

site e o usuário e dar a sensação de movimento e atualização.

O site celebra os 25 anos da marca e traz a nova coleção

Ou seja, sempre que o usuário entrasse no site encontraria

 Celebration com os modelos para o verão 2005. Além do novo

novas cores e matérias. No projeto atual, optamos por criar

layout, há muitas novidades no conteúdo. O p rojeto foi desen-

fundos diferentes para cada canal. Porém, ao longo da nova

volvido em 35 dias, todo em Flash dinâmico, interligado int erligado a banco

coleção, vamos disponibilizar novas opções de fundos.

de dados. Ao todo, envolveu oito profissionais, dentre eles,

Wd: Vocês acompanhavam quantos usuários mudavam

de criação, programação e planejamento.

a cor de fundo? Existia uma cor preferida?

Wd: Na nova coleção, há um resgate do primeiro dese-

Sim. Todas Todas as ações no site são moni toradas. Cerca de 70%

nho da sandália aranha, a mais famosa da marca, e no

dos usuários trocavam a cor e a rosa era preferida das

site é utilizado o logo original da Melissa. Outros elemen-

internautas.

tos de nostalgia foram utilizados?

Wd: A Melissa é um produto que tem como público-alvo

O site da Melissa é remodelado duas vezes ao ano, sempre

desde crianças até mulheres de 30 anos. Houve a prefe-

seguindo o tema da coleção que está sendo lançada. Para cada

rência por algum desses públicos no novo projeto?

uma é produzida uma identidade visual diferente, com elemen-

Os novos canais criados no Melissa Celebration foram justa-

tos e cores que predominam nos lançamentos. Todo o material

mente planejados para atingir estes públicos. O Zona Fun é

é enviado pelo cliente, como as fotos, por exemp lo. No caso

para a garotada de 7 a 13 anos. Já o canal Closet Melissa, Melissa,

do Celebration, todo o layout foi produzido para comemorar

voltada para as adolescentes de 13 a 24 anos, dá dicas de

os 25 anos da marca, por isso traz elementos que contam a his-

combinações de roupas com as sandálias da nova coleção em

tória da Melissa. O site temático de cada coleção recebe, em

um editorial de moda exclusivo produzido pela Grafia. Outra

média, 160 mil visitantes por mês.

novidade é o Game Melissa chamad o A Fábrica Maluca. Os

Wd: Uma questão que sempre aparece em qualquer pro-

links, que fazem su-

 jeto de design é o limite entre a intuição e a técnica no

cesso entre as me-

uso das cores. Como vocês lidam com esta questão? São

ninas de todo o

feitos testes de usabilidade ou de aceitação do público?

Brasil, como o

Procuramos usar o padrão de cores usado na coleção atual.  Mel Responde, Quanto à usabilidade, definimos o site em canais: Coleção  Galera Melissa e 2005  Closet  Zona Fun  Mondo Melissa. Estes canais  Fala Sério, tamforam criados de acordo com pesquisas feitas nos sites de co- bém fazem parte do canal.   A outra seção é a Mondo

38

Melissa, dedicada às mulheres de 20 a 30 anos. Este canal traz informações sobre as ações de marketing da Melissa, como festas, agitos e bastidores. Apresenta também notícias sobre a marca no Brasil e no mundo. Wd: O Zona Fun possui muitas atrações que promovem a interatividade com o público. De que forma o usuário é estimulado? Como é feita a atualização desta área e qual o software utilizado?

Recebemos cerca de dois mil emails por mês de meninas que querem participar d a Galera Melissa, onde elas podem conhecer outras internautas apaixonadas pela Melissa e formar uma comunidade, e da seção Ninguém merece, merec e, contando os micos que pagam em festas fest as e comemorações. Este é um espaço muito divertido e totalmente voltado para esta faixa etária.  As usuárias são incentivadas, pois respondemos todas as mensagens e enviamos ações de email marketing semanais, divulg ando quem está na galera Melissa e novidades do site.  A atualização é realizada semanalmente por um sistema criado pela Grafia, no qual o Flash está interligado em banco de dados. Um a vez atualizado no banco, automaticamentee está disponível no site. automaticament Wd: De que forma essas áreas de informação (como Mondo Melissa e Closet) e interatividade (como a Fun) geram retorno para a empresa?

 A principal função do site é oferecer um canal direto entre a marca e o público. A intenção é que os usuários sintam-se no mundo da Melissa quando acessam o site. É um canal aberto, onde o usuário pode falar com a Melissa sobre qualquer coisa, fazer um elogio, contar seu mico, enviar sua foto, procurar uma loja, fazer com-

39

pras online, saber como usar a sua Melissa etc. No caso do Mondo Melissa, Melis sa, a intenção é oferecer informações sobre a marca no mundo para um público mais maduro, inclusive imprensa imprens a e mercado externo, pois a Melissa est á em um processo de internacionalização da Marca, chegando aos Estados Unidos, México e Europa. O Closet foi criado em função da última pesquisa, onde constatou-se uma necessidade das consumidoras de saber como usar a sua sandália, com que combinar etc. E conseguimos mensurar mensu rar o retorno para a empresa através do aumento de visitas ao site, do número de pessoas no mailing, das compras na loja virtual, do número de emails em ails recebidos, rec ebidos, das d as respostas respos tas às pesquisas e enquetes. enquetes. Todos Todos esses índices têm mostrado números muito satisfató satis fatórios, rios, que crescem a cada mês. Wd: Uma característica marcante dos produtos Melissa é a cor e este é um dos maiores desafios num projeto para web. Vocês adotaram alguma medida de precaução para que as cores dos produtos não sejam muito distorcidas a cada pc?

 As fotos dos produtos são enviadas pelo cliente em CMYK com o ICC profile já s etado. A única precaução que tomamos é salvar estas imagens em JPG, preservando assim a configuração do ICC profile.

ICC Profile

:

Existem diversas traduções possíveis para o nome Profile, como: perfil, curva, correlação, descrição, tabela, característica característica,, mapa e dados. O Profile definido pelo ICC (International Color Consortium) é um arquivo digital de dados para a descrição das características de cor de um dispositivo, tal como um scanner, impressora ou monitor de vídeo. O objetivo deste arquivo é ser empregado pelo software de gerenciamento de cor para manter a consistência de imagens quando lidas, visualizadas, ou impressas em diversos equipamentos. Fonte: http://www.itgcom.com

40

Prepare-se para o Natal! Se você acha que é muito cedo para pensar em Natal, talvez ainda não tenha se dado conta de que pouco mais de dois meses nos separam das festas de fim de ano. Embora não seja nossa intenção, quase sempre acabamos deixando tudo para a última hora e repetimos cheios de culpa: Ano que vem vai ser diferente!. Por essas e outras, trouxemos este assunto para a pauta desta edição, pois concorrência acirrada não é mais privilégio do comércio tradicional, mas também do comércio online. Então, nada melhor do que antecipar-se no planejamento e na organização da sua campanha natalina, o que só vai aumentar suas chances de êxito. A seguir, Marcelo Albagli, diretor de criação da agência Canvas, nos conta um pouco de sua experiência nesse tipo de campanha.

41

   l   a    t   a   n   o   a   r   a   p   e   s     e   r   a   p   e   r   p

   l   a    t   a   n   o   a   r   a   p   e   s     e   r   a   p   e   r   p

transformações da sociedade contemporânea descarta quase que instantaneamente modismos ou tendências, ou seja, o atual hoje pode ser obsoleto amanhã, literalmente. Foi-se o tempo em que se classificava um público-alvo por sexo, faixa etária e classe social. Conforme atesta Albagli, esboçar um perfil psicológico desse público públ ico já não é suficiente: Tentamos sempre traçar também uma espécie de perfil tecnológico do nosso público-alvo  se ele acessa a internet de casa ou do trabalho, qual a velocidade da conexão, que plugins usa, qual a sua resolução de tela, sistema operacional... Isso é importante para definirmos como serão nossas peças,  Tempo é dinheiro 

 Um dos resultados

ou seja, se o que pretendemos criar poderá

Sábio ditado... Quanto maior o tempo

de fato ser visto pelo público ou não. Por mais

disponível para a elaboração de uma campa-

que os microcomputadores estejam cada vez

nha, maior a possibilidade de alcançar as

mais potentes, e o acesso cada vez mais rápi-

metas visadas. Isso porque a estratégia uti-

do, isso ainda é relevante na concepção de

lizada deve basear-se em um complexo

uma campanha online online..

somatório de fatores envolvendo público-

Paralelamente às mudanças nos públi-

alvo, instrumento de abordagem, tecnologia

cos-alvos, tem-se a alteração de comporta-

a ser aplicada etc.. Normalmente temos tra-

mento de anunciantes. Para Marcelo, as

balhado com prazos que variam de um a um

empresas estão cada vez mais maduras e

mês e meio, mas nesse ano mesmo já lança-

exigentes na concepção de suas campanhas

mos um hotsite que ficou três meses em p ro-

online. Antes, para se vender uma idéia, era

dução (da concepção à finalização), e em

necessário falar sobre uma série de conceitos

dezembro vamos lançar um projeto de email

(como interatividade, usabilidad e etc.), que

ricos e inovadores  marketing com o qual estamos trabalhando

hoje em dia já são mais ou menos dominados

do amadurecimento das empresas é uma maior receptividade a formatos mais

desde junho, revela Marcelo.

pelo público em geral. Um dos resultados diredi re-

 Acertando em cheio no público-alvo

to disso é uma maior receptividade a forma-

Se a internet se popularizou, o universo de usuários não apenas sofreu um aumento

42

tos mais ricos e inovadores, por exemplo exemplo.. Usando a isca certa

significativo, mas sobretudo se diversificou.

 A escolha do instrumento de abordagem

Dentro desse contexto, definir e traçar um

está estreitamente ligada à definição do perfil

perfil do público que se deseja atingir tornou-

do público-alvo . Quanto mais precisa e cor-

se uma tarefa nada simples. A rapidez das

reta tal definição, maior a possibilidade de

adequação do meio à mensagem. Fora isso, é

da. Além disso, sabemos que o fator privaci-

fundamental levar-se em conta o objetivo e a

dade na web assume um caráter todo especi-

verba do cliente. Se já temos uma base de

al; a reação negativa do usuário a pop-ups

usuários definida no início de uma campanha,

 intrusos ou a mensagens indesejadas são

formada por pessoas que já conheçam a mar-

exemplos típicos disso. Portanto, para esti-

ca ou os produtos do anunciante, então é

mular o visitante a interagir com a peça,

muito provável que o disparo de uma

criatividade é fundamental fundamental..

newsletter faça parte da ação, já que a

Destacando-se na multidão

receptividade à mensagem será muito mais

Na época de Natal a concorrência pare-

provável. Do contrário, outra possiblidade

ce tomar proporções ainda maiores do que

seria tentar criar o estímulo necessário para

nos demais meses do ano, o que faz da arte

que as pessoas se cadastrassem espontane-

de vender uma atividade mais difícil do que

amente no site d o anunciante, explica Mar-

de costume. Achar um diferencial capaz de

celo. E complementa: Sobre eficiência da

tirar o cliente do anonimato torna-se mais

comunicação, sempre temos como meta, aqui

desafiador do que nunca, já que o b ombar-

na Canvas, o equilíbrio entre dois elementos

deio de informações comerciais multiplica-se.

que consideramos primordiais: o fator sur-

Haja análise de mercado e estratégia de ven-

presa da criação e a facilidade de acesso. Em

das! Essa disputa pela nossa atenção é jus-

qualquer meio, o tempo que se tem para cap-

tamente o que dificulta, cada vez mais, a as-

turar a atenção do espectador é muito p e-

similação de uma campanha. Nosso inimigo,

queno, e isso na internet é mais delicado ain-

portanto, não é só a marca ou o p roduto

   l   a    t   a   n   o   a   r   a   p   e   s     e   r   a   p   e   r   p

43

   l   a    t   a   n   o   a   r   a   p   e   s     e   r   a   Para definir o   p   e   r sucesso de uma   p campanha é preciso saber o que se está buscando. Já foi o tempo em que quantidade de visitantes era necessariamente sinônimo de sucesso 

concorrente. Se no Natal o comércio percebe

grande nas informações que precisamos para

um aumento de vendas, pense no aumento de

aumentar a eficácia da nossa comunicação.

mensagens às quais somos expostos nesta

Esse acompanhamento estratégi co é um tra-

época, confirma Albagli.

balho contínuo, que deve ser feito de maneira

 A estratégia começa lá atrás

séria e consciente, e que certamente aumen-

Uma boa estratégia não dispensa o pas-

ta as chances de sucesso d e qualquer campa-

sado. Campanhas anteriores podem trazer

nha online.

dados preciosos, mesmo que implícitos, para

Nem só de cifrões é feito o retorno

uma elaboração bem feita. Um estudo minuci-

Mensurar o retorno de qualquer cam-

oso de tais informações aponta acertos, fa-

panha é algo muito relativo. Avaliar o de-

lhas, resultados e peculiaridades essenciais

sempenho considerando o retorno financei-

para projetar a nova campanha. Segundo

ro isoladamente mascara resultados e influ-

Marcelo Albagli, o planejamento baseia-se

encia estratégias posteriores. Nem sempre

 principalmente na experiência acumulada de

a venda efetiva do produto ou serviço é o

anos anteriores. O nível de detalhe nas res-

único objetivo do cliente. Existem diversos

postas que conseguimos obter por pesquisas

fatores que podem ser avaliados para cal-

online, acompanhamento dos logs de acesso,

cular o retorno de uma campanha, ou de

e até mesmo através dos emails enviados pe-

uma peça, como, por exemplo, o tempo de

los usuários, nos garante uma precisão muito

permanência do visit ante no site, as taxas de click-through de um banner banner,, o índice de retorno de usuários, entre várias outros, mais ou menos específicos. Campanhas nem sempre são concebidas com o intuito de transformar cada clique do usuário em uma venda online, embora obviamente o retorno financeiro seja o objetivo em médio e longo prazo. Exemplos típicos são campanhas de branding ou para qualificação da base. Para definir o sucesso de uma campanha, é preciso saber o que se está buscando. Já foi o tempo em que quantidade de visitantes era necessariamente sinônimo de sucesso. Muitas vezes estamos procurando

44

por um público bastante específico, ou por uma ação específica, e nesse caso quantidade não é sinônimo de qualidad e, analisa Marcelo.  A diferença entre sucesso e fracasso pode estar na antecedência

Uma campanha de Natal bem sucedida pressupõe um planejamento que englobe uma série de passos antecedentes a ela. Se a data mais comercial do ano por si só já induz ao consumo e favorece as vendas, sejam tradic ionais ou online, nem por isso a estratégia a ser utilizada merece um tratamento menos exigente. Ao contrário, deve-se extrair o máximo de idéias que o evento proporciona para potencializar os recursos disp oníveis. Talvez Talvez o maior pecado que se pode cometer nesse tipo de camp anha é querer que ela funcione independente de outras ações anteriores, pois o fato de ser Natal não é garantia de sucesso. A oportunidade do Natal deve ser aproveitada em conjunto com outras ações, qu e irão garantir que a marca esteja presente na memória das pessoas  e isso é decisivo na hora de converter o público em consumidores. Conhecemos bem as características do Natal: a cor da época é o vermelho e a personagem principal, o Papai Noel. O maior acerto talvez seja saber aproveitar esse fato para decidir como se posicionar nesse momento. É Branding

:

Branding é o conjunto de ações ligadas à administração das marcas. São ações que, tomadas com conhecimento e competência, levam as marcas além da sua natureza econômica, passando a fazer parte da cultura, e influenciar a vida das pessoas. Ações com capacidade de simplificar e enriquecer nossas vidas num mundo cada vez mais confuso e complexo.

possível alcançar o destaque que a nossa marca precisa criando uma concepção completamente diferente, ou completamente em sintonia com essas características. Tudo vai depender do produto, do público-alvo e, claro, das pessoas por trás da concepção e desenvolvime desenvolvimento nto da campanha, conclui Marcelo.

Fonte: www.campus.com.br

45

  s    i   a   r   o    t    i   e    l   e   s   e    t    i   s

Do palanque virtual É época de eleições, de exercer a cidad ania e decidir em quem depositar o voto de confiança. O ano é de 2004 e, além das campanhas feitas em jornais, rádios, televisão, e das fortunas gastas com material gráfico, nota-se que a internet tem se mostrado como uma ferramenta estratégica e de fundamental importância nesta corrida às urnas. É percebido que a campanha digital proporciona, talvez, uma vantagem que as outras mídias não podem oferecer em tempo real: a interação direta com o eleitor eleitor.. A possibilidade de criar no site chats, enquetes e fóruns de discuss ão gera uma valiosa relação entre o candidato e seu eleitor, eleitor, beneficiando assim a troca de idéias e informações sobre os tem as que envolvem a

Candidato Cesar Maia :: Rio de Janeiro

sua candidatura.

O desenvolvimento do site do candidato Cesar Maia começou há dois anos, quando os primeiros esboços ainda estavam sendo planejados com base na antiga página do prefeito em exercício. Para Luís Mendes, gerente de internet da equipe de Cesar Maia, o trabalho foi transformar o site pessoal do candidato em um veículo de campanha, que exigiria uma outra dinâmica. Já vínhamos traçando a linha de comunicação do candidato, revelando, principalmente, o pensamento de suas ações para a educação, esportes, comunidades carentes etc. 

Levando em consideração os números atuais da internet no Brasil, pode-se dizer que a campanha política que não valoriza a web parte para a disputa eleitoral em grande desvantagem. Foi-se o tempo em que o marketing político tratava o candidato como um simples produto a ser vendido em uma embalagem bonitinha e cheia de firulas. As últimas elei ções têm mostrado que um jingle bem feito e programas eleitorais de boa qualidade não sustentam por si só uma boa imagem política. É preciso que ela se faça espontaneamente, pela divulgação de idéias e ideais. Para estudar o assunto, a Webdesign analisou alguns sites de candidatos à prefeitura das cidades do Rio de Janeiro e São Paulo e entrevistou as suas respectivas equipes. Essa análise rendeu dicas interessantes de como conciliar as t écnicas do marketing político aos preceitos da comunicação online e seus paradigmas. A intenção não é a de identificar qual site ou proposta de campanha é a melhor melhor,, mas sim a de fazer um raio X, sem nenhum tipo de partidarismo ou identificação identificaç ão de idéias, das estratégias adotadas pelos candidatos no meio online.

46

Segundo Luís, o site tem uma estrutura de navegação orgânica, que se caracteriza pela capacidade de dar múltiplas visibilidades ao mesmo conteúdo. Segundo o gerente, como a candidatura de Cesar busca a reeleição, deve-se destacar na arquitetura da informação o que foi e o que está sendo realizado e os avanços programados programados para o futuro. Existem projetos sociais importantes desconhecidos pelo público que mais acessa a internet, até porque não convive diretamente com eles, destaca. Luís explica que, em uma visão macro de atuação, uma eleição não é tão diferente de uma grande campanha de varejo. Existem ações em que se destacam os programas de TV e comerciais do horário gratuito eleitoral e, em uma linha mais corp o-a-corpo, que são as ações de rua, existem as panfletagens e a militância. Ele lembra que em alguns casos existem eventos, como showmícios e ações complementares, que têm suas ferramentas específicas: A internet entra nesse caso. Sua atuação é complementar e não tem a pretensão de atingir toda a população, ressalta.

  s    i   a   r   o    t    i   e    l   e   s   e    t    i   s

à urna eletrônica  André Philippe Iunes 

O gerente de internet destaca que o site desenvolvido para o candidato é fácil, intuitivo e claro para ser compreendido por qualquer segmento. Isso significa que o j ovem de 11 anos de uma comunidade carente que ent rar em um laboratório laboratór io de informática de uma escola municipal e acessar o site terá um conteúdo tão consistente quanto um investidor de 30 anos que se preocupa com o futuro da cidade. O importante é que o conteúdo seja interessante para todos.  Apresentado  Apres entado com consistência e responsabilidade. Sem promessas vazias, enfatiza Luiz.

Candidato Jorge Bittar :: Rio de Janeiro Com o objetivo de alcançar três tipos específicos de público: o eleitor, eleitor, a imprensa e a militância de uma forma geral, o site do candidato Jorge Bittar é o que possui a interface mais diferenciada. Para Gerson Penha, responsável pelo planejamento editorial, estrutura de navegação e layout, as informações contidas no site são fáceis de serem encontradas pelo usuário. Ele explica que a diferença entre a campanha feita para a TV para a do meio online, é que na primeira, o compromisso com o emocional se dá de maneira mais enfática, na intenção de persuadir o eleitor. Já na internet, além das técnicas de sedução do visitante, o papel do site político é o de detalhar e tornar disponíveis informações que nem sempre se encaixam no horário eleitoral gratuito, seja pelo formato ou por sua relevância. Todas as informações contidas no site são atualizadas por meio de uma ferramenta de gerenciamento de conteúdo. O aplicativo permite que um editor conectado à internet possa alimentar o site sem conhecimentos técnicos. Quando uma foto é atualizada, por exemplo, o sistema gera automaticamente outros formatos: o original em alta resolução, para jornalistas, uma pequena para a página inicial, uma para a própria matéria e, por último, uma foto ampliada, porém em baixa resolução. Segundo Marco  Aurélio,, responsável pela área tecnológica, o grande diferencial do site do Bittar está  Aurélio na interatividade e dinamicidade das informações, tanto na home quanto nas demais páginas, garantidas pela facilidade de publicação da ferramenta de gestão de conteúdo. : wysiwyg

www.cesarmaia25.com.br

Com a intenção de oferecer o maior número de informações sobre o candidato, Marco explica que a interatividade com o usuário está garantida desde a possibilidade do internauta perguntar e obter respostas, a downloads de material de campanha, fotos para jornalistas e solicitação de newsletter,, gerada e enviada pelo Editor do site. newsletter No módulo wysiwyg, o autor ou editor identifica,

Significa what you see is what you get (o que você vê é o que você obtém). Nomenclatura referente aos famosos editores de html, como o Dreamweaver, Dreamweaver, Frontpage etc, em que o usuário tem a possibilidade de editar uma página diretamente pelo seu layout.

47

  s    i   a   r   o    t    i   e    l   e   s   e    t    i   s

antes mesmo da publicação da matéria, alguns detalhes de formatação, como as quebras de linha, altura e ti pologia das fontes. Em relação à disposição das informações em sua interface, existe um espaço para uma manchete giratória que, segundo Marco, chama mais a atenção do que as demais por estar em movimento. Há também a seção de apoios, que a cada acesso muda aleatoriamente o nome de quem está apoiando o candidato. O site conta também com uma ferramenta de busca que retorna a pesqu isa do usuário em todas as seções.

Candidato Luís Paulo Conde :: Rio de Janeiro O site do ex-prefeito Luis Paulo Conde teve todo o seu planejamento voltado para alimentar a mídia com informações sobre sua candidatura. Com uma ferramenta de gestão do conteúdo, a equipe de jornalistas tem acesso a todas as seções, podendo inclusive otimizar a navegação principal, conforme as possíveis estratégias adotadas. Segundo Luciana Nery, gerente de internet da campanha, o site do Conde oferece ao candidato a oportunidade de de aprofundar determinadas determinadas questões. É possível detalha r propostas e esclarecer dúvidas a respeito de situações que surgem no decorrer das eleições. Muitas vezes, esse tipo de esclarecimento não pode ser feito em aparições de TV ou matérias de jornal, por limitações de espaço e tempo. 

www.bittar13.com.br

Luciana explica que a internet, além do aprofundamento das propostas propostas do candidato, permite que os usuários conheçam mais sobre as suas realizações. É possível  refrescar a memória do eleitor, destacando os projetos de Conde. Também temos por hábito responder a todos os emails, o que oferece ainda mais um canal de comunicação. Ela lembra que o site é como se fosse um espelho da campanha.  Acompanhamos toda a agenda do candidato e reagimos a todos os temas que estão em voga na mídia, questões que surgiram em debates e declarações de Conde sobre os fatos atuais.  A gerente explica que todo o site foi planejado visando buscar o maior número possível de usuários. O layout obedeceu a um projeto no qual as informações pudessem ser encontradas com muita facilidade, evitando assim problemas como o click duplo e outros decorrentes da falta de um estudo de usabilidade. Esforçamo-nos Esforçamo-nos para democratizarr o uso do site, para que fosse acessado por pessoas que se conectam via democratiza banda estreita. Por isso o fizemos leve, com poucas imagens, rápido de carregar. carregar. Como pretendemos nos comunic ar com cariocas de todos os bairros, estamos dedicando espaço a todos eles. Se um bairro é citado, a matéria relacionará as principais conquistas de Conde na região e suas propostas para lá. Dessa forma, atingimos a todos de uma forma mais concreta, destaca. Com respeito à divulgação do site, Luciana explica que o horário eleitoral gratuito fez com que as visitas diárias crescessem muito e se tornassem relevantes na estratégia de campanha. Acompanhamos Acompanhamos quais assuntos despertam mais interesse nos eleitores, para então podermos expandir o assunto. Apesar de não haver ações específicas de divulgação, o endereço da página é citado em todo o material de campanha. Além disso, ela lembra que o site conta com a colaboração espontânea de seus visitantes, que adicionam a URL em seus websites, e com isso geram tráfego.

Candidata Jandira Feghali :: Rio de Janeiro Com uma navegação dividida em três colunas principais, característica também observada entre quase todos os sites analisados, o site da candidata Jandira Feghali

48

www.conde15.com.br

possui uma navegação simples e intuitiva. Segun do Gustavo Alves, editor da página, a preocupação em torná-la mais acessível foi uma constante no seu planejamento.  Tivemos  Tivem os o cuidado de usar a linguagem mais acessível possível, sem perder em qualidade de conteúdo. Utilizamos aplicativos mais leves, funcionais com acessos discados e banda larga, explica. Para o editor, editor, a internet é um veícul o único, pois permi te unir sons, i magens e texto: ela é hoje a terceira mídia mais import ante de uma grande campanha, atrás some nte do rádio e da TV. Entretanto, ele alerta para o problema da exclusão digital, que vai contra os objetivos principais de uma campanha eleitoral, que é atingir o maior número possível de pessoas. Temos um exército de excluídos digit ais no país, e isto é um problema com relação ao alcance desta mídia, ressalta Gustavo.

www.jandira65.com.br

Com uma equipe formada por um editor de conteúdo, uma repórter, um webdesigner e um fotógrafo, o site é atualizado de três a quatro vezes ao dia. Na opinião de Gustavo, os eleitores querem conhecer o máximo possível dos candidatos, sua história, sua família e propostas. Há dez anos, as únicas fontes de informação sobre os candidatos eram eles mesmos ou as críticas de seus adversários. Hoje, possuímos uma série infindável de recursos para formar nossa opinião. Se o candidato oferece a maior parte desses dados em um único lugar, lugar, ele poupa tempo de pesquisa do usuário e se torna mais acessível.  Com relação à divulgação da página, Gustavo explica que todos os materiais de campanha remetem remetem ao site e trazem o seu endereço: Até mesmo os adesivos têm a URL estampada, desta forma alavancamos os page views, que hoje chegam a um novo visitante por minuto. Como em praticamente praticamente todos os si tes analisados, o da candidata Jandira Feghali também possui uma ferramenta de aferição de acessos. Com ela é possível a equipe traçar um direcionamento melhor para as estratégias que serão adotadas. Tabulamos Tabulamos estes dados coletados diariamente como controle de audiência, mensurando os assuntos de maior interesse pelos internautas e pelos concorrentes que visitam nosso site, conclui Gustavo.

Candidato José Serra :: São Paulo Quanto mais completo, variado e ágil for o serviço, mais pessoas, com certeza, vai atrair e cativar. É a partir desta premissa que Mary Zaidan, chefe de redação da campanha de José Serra à prefeitura de São Paulo, define como deve ser um site político. Semelhante aos outros projetos analisados, ela explica que existiu uma preocupação em elaborar um site amigável, de fácil navegação, capaz de atender aqueles que têm tecnologias simples, como linhas discadas e equipamentos de menor porte. A equipe de concepção e criação chegou a um formato que considera ideal para que todos os eleitores e cidadãos poss am receber informações e interagi r com a campanha de José Serra, destaca Mary.

www.serra45.org.br

Com experiência de mais de 10 anos na área política, a jornalista destaca que todas as formas de mídia contribuem para a divulgação da imagem do candidato. Para ela, a rapidez e a interatividade próprias do meio online possibilitam um contato ainda maior com o eleitor, que recebe todas as informaç ões e pode, se quiser, participar das atividades da campanha. Ao acessar o site de José Serra é possível acompanhar a evolução de sua campanha, a definição de todos os itens do Programa Serra Prefeito, a agenda do dia, tanto do candid ato quanto dos grupos que elaboram o programa de governo e da mobilização. mobilização. Mary l embra ainda que o usuário pode imprimir qualquer material de campanha, gravar o jingle e ver as in serções de TV no Comitê Virtual,

49

  s    i   a   r   o    t    i   e    l   e   s   e    t    i   s

  s    i   a   r   o    t    i   e    l   e   s   e    t    i   s

além de espaços específicos para enviar sugestões e comunicar-se com a campanha. Mary ressalta que a proposta que deu formato ao site foi, evidentemente, a de reunir o maior volume de informações de interesse do eleitor e de todos que quiserem acompanhar a campanha e divulgar a imagem do candidato. Mas, explica que até pelas características de dinamismo da linguagem da internet, o site pode receber alterações, incluindo novos itens. Na noite de segunda-feira, dia 30 de julho, data do debate realizado pela Rede Record, as equipes de tecnologia e imprensa da campanha puderam, juntas, atualizar as notícias de forma ininterrupta, até o final do evento, com textos e imagens up to date. É a rede cumprindo o seu papel de fornecer informações em tempo real, destaca. Como nos outros sites analisados, a linguagem escolhida é majoritariame majoritariamente nte  jornalística,, com prioridade para o noticiário distribuído nos vários itens da página. Em  jornalística alguns ícones, há espaço para uma ação mais publicitária, em especial no Comitê Virtual e no material de apresentação do candidato. No que diz respeito à missão do site, Mary diz que a página está dando o retorno esperado à campanha. O site tem cumprido o nosso objetivo de manter um relacionamento estreito de duas vias com o eleitor interessado em informar-se ou participar de alguma forma, além de democratizar todas as informações, conclui a jornalista.

Candidata Marta Suplicy :: São Paulo Com um layout que comporta uma grande quantidade de informações, o site da candidata Marta Suplicy foi concebido com o objetivo de alimentar a militância com dados sobre a campanha e as realizações do seu atual governo. Para Flávio Paes, coordenador do site da atual prefeita, mais do que divulgar a imagem política da candidata, o site divulga o seu trabalho e ainda esclarece questionamentos levantados por seus adversários. Desde o início, procuramos nos comunicar com os paulistanos de uma maneira mais geral, explicando tudo de forma simples e objetiva. Levamos em consideraç ão também o fato de que o eleitor nem sempre conhece em profundi dade as questões relativas à cidade cidade,, destaca.

www.martaprefeita.com.br

Na opinião do coordenador coordenador,, em uma campanha política, a boa presença online tornase vital para cativar os indecisos, pois o site pode oferecer informações informações de qualidade que permitam ao eleitor analisar as realizações e as propostas de cada candidato.  Ficamoss muito felizes quando recebemos mensagens de internautas que decidiram  Ficamo votar na Marta depois que entenderam, por exemplo, uma idéia exposta no site. Isso faz parte do trabalho da equipe de comunicação que atualiza a página. Em di a de debate, por exemplo, publicamos cerca de 30 notícias no período de aproximadamente três horas, esclarecendo os ataques dos adversários e fornecendo subsídios para o trabalho da imprensa.  Entre os dias 2 de julho, quando o site foi lançado, até o dia 30 do mesmo mês, Flávio lembra que foram publicadas cerca de 500 notícias e quase 200 imagens, que podem ser util izadas, em alta resolução, pelos jornalistas. Ele explica que o ponto de partida para divulgar o endereço da página da candidata foi feito pelo mailing do Partido dos Trabalhadores Tr abalhadores (PT). E quando o objetivo é conciliar as técnicas do marketing político às estratégias do marketing online, o coordenado coordenadorr explica que ao tratar o visitante com respeito e ética, falando sempre a verdade, conquista-se credibilidade, o que por sua vez ajuda a conquistar eleitores.

50

 Você visita ou já visitou sites de candidatos às eleições? 27% Sim 73% Não Participe das enquetes acessando o site www.arteccom.com.br/webdesign

Flávio lembra que, além da grande quantidade inf ormações contidas no site, ele é atualizado de forma a auxiliar as demais ações da campanha, como os programas de rádio e TV, por exemplo. Por meio de ferramentas de medição dos acessos ao site, é possível aperfeiçoar o projeto projeto editorial. Além disso, é fundamental também a análise das mensagens enviadas pelo canal Fale Conosco, que permite ao internauta fazer comentários, apresentar sugestões à equipe de programa de governo ou simplesmente mandar o seu recado à candidata candidata,, conclui.

Troca de farpas digitais

 A internet é fantástica para todos os tipos de eleitores. Os que já decidiram o voto pelo candidato encontram referências importantes que consolidam a sua escolha. Para os indecisos, é uma ferramenta incrível para a comparação de propostas, de perfil dos candidat os, das preocupações de cada um e para a tomada de decisão. Para os desmobilizados é uma forma de deixar uma pulga atrás da orelha. E, para quem vota em um outro candidato, sempre há a chance do efeito comparativo, de encontrar uma informação que tenha mais a ver com ele. Na opinião de Luís Mendes, gerente de i nternet da campanha de Cesar Maia, as estratégias são montadas neste sentido. Vale recordar o site de José Serra em 2002, c omo ele atuou no sentido de atac ar o Ciro Gomes, com humor, mas contundente. Ou o de Bush e Cheney entrand o de sola em Kerry e Edwards. Muitos dos ataques são pesados e geram desgastes. Outros são bem fundamentados e chacoalham cert ezas do eleitor. Muitos eleitores do Ciro abandonaram o barco naquele momento, lembra. Entretanto, deve-se pensar bem antes de fazer ataques. Segundo Luís, no caso da polarizada eleição nos EUA, isso é mais fácil de acontecer pelo próprio maniqueísmo natural da sociedade americana. Ele alerta que quem gasta mais espaço citando o nome do candidato adversário no site do que o do próprio está seguindo o caminho errado. É o que acontece lá fora. Faça uma busca cruzando os nomes Kerry e Bush. Há dias em que o número de citações a Kerry no site d e Bush chega a ser constrangedor constrangedor.. Enquanto isso, o site do Kerry é focado no propos itivo. Mas isso faz parte do  jogo político, explica. Com relação ao marketing político, Luís destaca que nada subs titui em eficácia a comunicação comuni cação um a um, o contato di reto com eleitor, seja na rua ou na web. Ele enfatiza que um bom email personalizado tem muito mais chances d e converter um eleito r.  Parece uma ação individual, mas um eleitor convencido pode propaga propagarr sua mensagem para outros. E isso é muito mais importante do que mandar uma mensagem em massa. Ainda estamos no meio do caminho e muitas coi-

sas ainda surgirão nesse terreno da campanha política online, conclui. 51

   l   a    i   r   o    t   u    t

scripts em várias linguagens Construindo sites com

  por Natelson Nascimento  Nascimento 

 Às vezes temos que desenvolver sites compl exos onde o uso de uma só linguagem não resolve todos os problemas, ou temos que acrescentar um item a um site já existente, que seria muito mais simples e rápido se desenvolvido em uma l inguagem diferente da atual. Isso seria muito simples, se as informações de sessões do site não tivessem que ser compartilha-

*/ ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] GO

O segundo passo é criar funções ASP que criem a chave da Sessão e que insiram os dados no banco de dados. sessao_site.asp

das, já que em linguagem diferentes isto não é possível, e se nenhuma das informações fosse sensível como senhas, que não podem ser enviadas diretamente de um formulár io, por exemplo. O que fazer nestes casos? Há uma técnica simples para resolver este problema que é o uso de banco de dados, no qual se pode gravar um có-

<%  Funcao que gera a chave usando um function do proprio Sql Server para  gerarr chaves randomicas. Se voce for usar outro banco de dados,  gera  voce pode escrever o seu proprio codigo para geracao de chaves randomicas.   Ha varios exemplos disso na internet em diversas linguagens.

digo de sessão e um usuário como chave, e as informações necessárias para o compartilhamento das páginas escritas escrita s em linguagens diferentes. Vamos usar aqui como exemplo as linguagens ASP e ASP.Net e o banco de dados Sql Server, mas pode ser usada qualquer combinação de linguagem e banco de dados para esta tarefa. O exemplo aqui trata de um site ASP que precisa passar informações infor mações para páginas ASP.Net O primeiro passo é criar a tabela que guardará as informai nformações que serão compartilhadas entre as linguagens. A tabela tem que ter como chave o código da sessão, o usuário que gerou a sessão, e a data e hora em que esta foi criada, para facilitar consultas e validações vali dações futuras, e um campo do tipo ntext (string com comprimento variável) que guardará as informações que serão compartilhadas entre as linguagens. CREATE TABLE [SESSAO_SITE] ( [cod_sessao] [nvarchar] (100) NULL , /* codigo da sessao */ [data] [datetime] [datetime] NULL NULL , /* data que foi criada criada a sessão sessão */ [parametro] [ntext] , /* parâmetros da sessão */ [usuario] [nvarchar] (100) NULL /*usuario que criou a sessao

52

Function GeraRandomicoSql(objConexaoSql) Set objChave = Server.CreateObject(ADODB.RecordSet) sQueryChave = SELECT NewId() as Chave  objChave.Open sQueryChave, objConexaoSql sChaveRandomica = objChave(Chave) objChave.Close Set objChave = Nothing GeraRandomicoSql = sChaveRandomica End Function   FUNCAO QUE GRAVA NA TABELA SESSAO_SITE TODAS AS SESSIONS UTILIZADAS NO MOMENTO, SEPARAS POR |    RECEBE COMO PARAMETRO UM OBJETO DE CONEXAO JA CRIADO E O USUÁRIO QUE GEROU A SESSAO Function Gera_SessaoSite(objConexaoSql, sUsuario) boolInicial = True sParametro =    Loop que percorre cada Session do Asp e monsta em uma string no formato:  nome_session=valor_session|nome_session2=valor_session2.... For Each item in Session.Contents If not IsObject(Session.Contents(item)) Then If not boolInicial Then

sParametro = sParametro & |  Else boolInicial = False End If  sParametro = sParametro & item & = &  Session.Contents(item) End If  Next sCod_sessao = GeraRandomicoSql(objConexaoSql) sUsuario = Trim(sUsuario) SParametro = Replace(SParametro,, Replace(SParametro,,) ) como se trata de u ma query, tira os apostrofos e aspas caso hajam para evitar erros na execução da query sQuerySessao = INSERT INTO SESSAO_SITE(cod_sessao, data, parametro, usuario) VALUES ( & sCod_sessao &  ,GETDATE(), ,GETDATE(),  & SParametro &  , &  sUsuario & )   Executa a query objConexaoSql.Execute sQuerySessao  seta o retorno da funcao com o valor da chave criada Gera_SessaoSite = sCod_sessao End Function %>

O terceiro passo é montar este quebra-cabeça dentro da sua aplicação. Para demonstrar isso vamos imaginar que temos uma página ASP de um site de consultoria. Um usuário x teve que efetua r um login para utilizar o site, e tem diversas Sessions criadas com informações sobre seu perfil de usuário e status, e Sessions que estejam ligadas ao cadastro do cliente que ele está consultando. O usuário está dentro de uma página de cadastro de um cliente, e nela há um l ink  que leva a uma página .aspx (ASP.Net) que mostra um gráfico sobre o faturamento mensal daquele cliente. Segue abaixo o código do link da página ASP: <% Set objConexaoSql = Server.CreateObject(ADODB.Connection) objConexaoSql.Open DATA SOURCE=IP da base;DATABASE=nome_base;U base;DAT ABASE=nome_base;UID=usuario_base;PWD=senha_base;  ID=usuario_base;PWD=senha_base;  %> &usuario=webdesign>teste <% objConexaoSql.Close Set objConexaoSql = Nothing %>

 Ao clicar no link, o usuário chamará a página .aspx com o código abaixo com o código abaixo: <%@ Page Language=C# %>

53

   l   a    i   r   o    t   u    t <%@ import Namespace=System.IO %> <%@ import Namespace=System.Web %> <%@ import Namespace=System.Data.SqlClient %> <script runat=server> void Page_Load(Object send er er,, EventArgs e) { /* GUARDA EM SESSIONS O VALOR DA COD_SESSAO QUE   VEIO NA URL E O USUARIO */ Session[cod_sessao] Session[cod_sessa o] = Request.QueryString[cod_sessao].ToString(); Session[usuario] = Request.QueryString[ Request.QueryString[usuario].T usuario].ToString(); oString();   /* PEGA DO BANCO OS PARAMETROS COM BASE NO COD_SESSAO E USUARIO */   /* CRIA A CONEXAO COM O SQL, USO AQUI UM DRIVER PRÓPRIO PARA O SQL SERVER, PARA SIMPLIFICAR O EXEMPLO, MAS O .NET TEM OUTROS DRIVERS PARA OUTRAS BASES DE DADOS */ SqlConnection conexao = new SqlConnection(DATA SOURCE=IP da base;DATABASE=nome_base;UID=usuario_base;PWD=senha_base;); /* MONTA A STRING QUE FARA A BUSCA NA TABELA SESSAO_SITE */ string sQuery=SELECT parametro FROM SESSAO_SITE WHERE cod_sessao= + Session[cod_sessao] +  AND usuario= + Session[usuario] + ; /* CRIA UM OBJETO COMMAND PARA DEFINIR A INSTRUCAO SQL */ SqlCommand comando = new SqlCommand(sQuery, conexao); /* ABRE A CONEXAO */ conexao.Open();   /* CRIA-SE UM OBJETO DATAREADER COM O RESULTADO */ SqlDataReader s = comando.ExecuteReader(); comando.ExecuteReader(); tr y { string sParametros= sParametros=; ; /* SE RETORNOU ALGO SETA UMA STRING COM O VALOR  DO CAMPO PARAMETRO */ while(s.Read()) { sParametros=s[parametro].ToString(); }   /* USA O METODO SPLIT PARA SEPARAR EM UM ARRAY A STRING USANDO COMO */   /* DELIMITADOR O CARACETER | */ string[] obj=sParametros.Split(|.T obj=sParametros.Split(|.ToCharArray()); oCharArray());   /* FAZ UM LOOP PARA PERCORRER CADA ITEM

54

DO ARRAY CRIADO E SETAR CADA UMA DAS SESSIONS NECESSARIAS */ for(int i=0;i

Com os dados conseguidos no banco de dados a partir da chave única que foi passada na URL e o usuário, fica fácil compartilhar as sessões entre sites e fazer as devidas validações de segurança que se queira, para garantir que um usuário que não tenha a devida permissão não acesse aquele item do site. Se o método de passar todas as informações fosse via formulário, por exemplo, seria muito simples um usuário mal- intencionado criar um site qualquer que enviasse estas informações e  hackear a página .aspx, colhendo as informações que quisesse do cliente do site de consultoria. Este método de gravar os valores de sessões no banco de dados para serem compartilhados entre páginas de diferentes linguagens também é utilizado em sites que queiram manter a sessão do usuário criada nos casos de conexão perdida ou de sessão expirada, mas isto já é um assunto para discutirmos em outra ocasião.  Agora é só usar a imaginação e ficar livre para usar as linguagens que melhor se adequarem a sua necessidade.

55

  e   n    i    l   n   o   a    i   g    é    t   a   r    t   s   e

Marcello Póvoa Criou a MPP Solutions, empresa de consultoria estratégica, criação e desenvolvimento em mídia interativa. Foi Diretor da Globo.com e da IconMediaLab (Nova Iorque) com inúmeros projetos premiados internacionalmente. Possui Masters of Science in Communications Design pelo Pratt Institute (NY) e MBA em Administração pela Coppead, UFRJ. É autor do livro Anatomia da Internet (Casa da Palavra). [email protected]

Uma nova forma de escutar (e consumir) música Saiu em agosto, no Brasil, o iPod Mini da Apple, um show de marketing, design e tecnol ogia.  A experiência do usuário Um player MP3 não é nenhuma novidade. nov idade. No entanto, um player play er do tamanho de um cartão de visitas, com 4GB (cerca de 1000 músicas) e um desenho industrial estupendamente bem resolvido em forma e função já seria o suficiente para chamar atenção. Some ao hardware do iPod Mini, o software softw are iTunes rodando no PC. O iTunes é uma ferramenta de administração admin istração de MP3 e loja de comércio eletrônico eletrô nico ao mesmo tempo. Tudo trabalhando em perfeita sincronia sob uma usabilidade intuitiva e poderosa. O resultado é um produto criativo conceitualmente, manufaturado com qualidade de produção industrial e software  e com uma característica muito importante: realmente funciona. O resultado é uma experiência impactante, o suficiente para mudar a forma como escutamos e consumimos música  o colunista que vos escreve testou o produto pessoalmente. Após começar a converter alguns CDs para MP3, chega-se a uma conclusão mórbida: CDs têm seu atestado de óbito assinado como forma de distribuição de música. É muito mais prático, agradável e poderoso poder buscar músicas em um HD por parâmetros como artista, estilo musical ou álbum. Ao mesmo tempo, a capacidade de personalização, criando seus playlists gera uma experiência musical muito mai s agradável  já que está exatamente a seu gosto. O player MP3 é no final das contas u m servidor de música, que o usuário pode ligar ao aparelho de som da sala e servir músicas lit eralmente por dias seguidos se quiser. quiser. O servidor  é, no entanto, pequeno o suficiente para acoplar a seu braço com uma ergonômica banda acessória ( também com a assinatura do departamento de desenho industrial da Apple ), e sair andando ou mesmo correndo com o equivalente 60 CDs acoplados a seu corpo. O software iTunes O iTunes roda no PC (Windows ou Mac) e é uma super ferramenta para converter e gerenciar suas músicas em formato digital. Ao mesmo tempo é uma loja, onde pode-se comprar músi cas individualmente ou álbuns inteiros. No Brasil, a loja pode ser vista, mas infelizmente a conclusão da compra ainda não funciona. A loja é um acordo da Apple com gravadoras para distribuir música digitalmente e legalmente. Assumindo que o preço é correto ao mercado, é uma experiência de consumo muito mais prática: direto do PC para o iPod  e para o aparelho de som da sua casa. Steve Jobs foi um interlocutor interlocuto r com a indústri indústriaa fonográfica durante a crise Napster. A primeira reação da indústria foi eliminar através de ações legais o novo canal de distribuição distribui ção digital que surgia com o Napster

56

  e   n    i    l   n   o   a    i   g    é    t   a   r    t   s   e

 Quando o produto é bom, seu posicionamento de marketing correto e o preço certo ao mercado, os resultados inevitavelmente aparecem   e a internet. Jobs convenceu os executivos da música que a ten-

últimos oito anos, impulsionada pela venda de iPods. De

tativa de eliminar o canal digital era infrutífera. infrut ífera. O caminho seria

acordo com o relatório, foram 860 mil unidades vendidas no

aprender como capitalizar neste canal, criando uma nova forma

trimeste, contribuindo para um lucro líquido de US$ 61 mi-

de geração de receita. Destas conversas surgiu a loja do iTunes,

lhões. O sucesso, no entanto, está gerando problemas na

que continua a gerar faturamento mesmo depois depoi s da compra do

cadeia de manufatura e distri buição  o que pode atrapa-

player iPod. Ou seja, é um sistema que se retroalimenta do ponto

lhar vendas futuras.

de vista econômico. Boas conseqüências Quando o produto é bom, seu posicionamento de

 Ao que parece, a Apple aprendeu a dura lição do passado de que o quesito qualidade não é a única métrica métr ica de sucesso. O sistema iPod e iTunes iTunes é brilhantemente bem resolv ido por to-

marketing correto e

dos os ângulos: do marketing, ao design, à tecnologia. O su-

o preço certo ao

cesso não é, definitivamente, uma coincidência do destino.

mercado (ao menos no americano, por enquanto), os resultados inevitavelmente aparecem. A Apple fechou o último trim trimesestre com o maior faturamento líquido dos

57

  g   n    i    t    i   r   w    b   e   w

Marcela Catunda Trabalhou nas redes Bandeirantes, TV Gazeta, Manchete e Globo. Foi redatora da DM9DDB e supervisora de criação de mídia interativa da Publicis Salles Norton. Atualmente é autônoma. [email protected]

Um é pouco, dois é bom, três é demais!! Sexta-feira chuvosa 10:45 minutos Sala de Espera. Leio uma Caras em que a Xuxa ainda flertava Luci ano Safir enquanto penso:   Por que diabos marcaram essa maldita reunião para as dez da manhã?   Quer um café Marcela?  oferece a simpática recepcioni sta.   Mais um? Já tomei uns cinco litros.  respondo achando a recepcionista não mais tão simpática.   Não quer um agora com leite?  ai meu Deus ela insistiu. Nem respondi. Graças a minha Santa Clara fomos interrompidas.   Pode entrar Marcela, o senhor Fulano de Tal vai atender você. Chega então uma outra pessoa que me acompanha até a sala de reuniões. Sexta-feira chuvosa 10:55 minutos Sala de Reunião.   Olá Marcela. Eu sou a assistente do Fulano. Ele está acabando uma reuni ãozinha com a equipe e já vem atender você.  e parte. Me deixou sozinha, eu penso. O que eu vou fazer se tenho cabeça pra pensar? Então fiquei pensando nas coisas boas que podiam estar por vir. vir. Era uma grande produtora e pela primeira vez eu era chamada para um trabalho com eles. Eu seria a roteirista de um mega projeto. Legal! Sexta-feira chovendo pacas 11:25 minutos Sala de Reunião. Meu Deus, alguém arranca aquele relógio da parede. Sexta-feira trovejando 11:35 minutos Sala de Reunião.  Vou embora. Eu não sou palhaça. Sexta-feira relampejando 11:45 minutos Sala de Reunião. Não fui embora. Sou palhaça?   Oi Marcela, desculpe o atraso.- entra o Fulano estendendo a mão. Não respondo nada e também estendo a minha mão. Fazer o quê?   Fiz você esperar muito?  por que ele puxou esse assun to?   Tudo bem.  falsa.   Mas vai valer a pena ter esperado. É um grande projeto.

58

  g   n    i    t    i   r   w    b   e   w

 Não aceitei porque não consegui entender nem quem mandava ali. Seria o elefante o dono do circo? 

Conheço o Vale a Pena Ver De Novo, mas o vale a pena

  Grande!  concorda Beltrano.

ter esperado... (tudo bem era apenas uma licença poética).

  E o que faz a Matilde?  pergunto.

Ouvi atenta e concluí: er a mesmo um super projeto.

  A Matilde é diretora do Projeto.  responde Cicrano.

Sexta-feira ainda chuvosa 12:45 minutos

  Vocês estão me chamando para ser assistente de dire-

Sala de Reunião. Entra então em cena o número dois.   Oi Marcela, esse é o Beltrano meu sócio aqui na Produtora.  diz Fulano. Depois das apresentações retomamos retomamo s nosso papo, quer dizer, era o que eu pensava, mas não foi o que qu e aconteceu.   Não é bem assim viu Fulano, eu tava agorinha falando

ção?  que pergunta idiota.   É, mas o trabalho engloba também o evento receptivo.  Você  V ocê podia dar uma mão na produção. Isso aqui tá a maior zona.  confessa o Fulano. Pô! Esses caras querem uma roteirista ou uma diarista? Sexta-feira o mundo cai lá fora 16:02 minutos Sala da minha casa.

com o Cicrano e a gente mudou umas coisas. A Marcela não

Chego em casa, tiro os sapatos, me jogo no sofá, meus

devia só escrever esse roteiro, ela devia acompanhar a edi-

gatos pulam no meu colo e fico ali pensando naquela manhã

ção. Fica com mais molho.

maluca. Não aceitei o trabalho. Não por não precisar dele , ou

Mais molho? E então imagino um prato de spaguetti. Pô!

por não ser uma boa proposta. Não aceitei porque n ão conse-

São quase uma da tarde e eu não almocei ainda. Será que nin-

gui entender nem quem mandava ali. Seria o elefante o dono

guém vai pedir nem um Mac Donalds?

do circo?

  Eu pensei numas coisas. Vejam o que vocês acham...  E começou a falar e falou, falou, falou e não parou mais. Sexta-feira ainda chuvosa 13:10 minutos Sala de Reunião.   Legal. Eu acho que vai ser importante acompanhar a edição e fazer o roteiro. Mesmo porque eu adoro editar. editar.  e fui sincera.

Tô fora! Quem sabe em uma próxima oportunidade.  adoro essa frase. É! Vida de freela é assim mesmo. A gente tem essa vantagem. E então abri meu Ítalo Calvino e tive um final de tarde ensolarado...

  Cadê o Cicrano? Pede pra ele dar um pulinho aqui pra conhecer a Marcela.  diz Fulano para Beltrano. E o Cicrano chegou, mas vamos pular as apresentações. Sexta-feira relampejando, trovejando e chovendo pedra 13:55 minutos Sala de Reunião.   Não. A gente não precisa de roteirista. Vocês tão malucos? Eu já tô com tudo na cabeça. A Marcela podia é dar uma força para a Matilde.  diz o Cicrano.   Boa.  diz Fulano.

59

  g   n    i    t   e    k   r   a   m

René de Paula Jr. Especialista em e-business, profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, Agência Click, Banco Real ABN AMRO. É criador da usina.com, portal focado no mundo online, e do radinho de pilha  (www.radinhodepilha.com), (www.radinho depilha.com), comunidade de profissionais da área. [email protected]

Teste da anta O site era bárbaro, ficamos todos boquiabertos. Nos idos de 98 não havia muitos sites como aquele. Hoje hotsites de produto em Flash e tal são carne de vaca, mas, na época, nem se falava em hotsite e as coisas eram feitas em Shockwav e mesmo. Bacana mesmo é que o site era a cara do produto, um carro o riginalíssimo, bem-humorado, cool. Site legal, carro legal, tudo super promissor não fosse por um... alce.  Alce é um bicho descomunal, enorme, que faz vaca parecer pônei. Parece que tem muito nos países nórdicos, têm tantos que um dos testes de segurança para um carro é o teste do alce. O teste é mais ou menos assim: você está numa estrada dirigindo feliz e contente em alta velocidade. E se um alce surge do nada? Well, frente a essa pergunta o carrinho deu a resposta errada: capotou feio. Nem sei se o motorista se machucou, mas o acidente foi fatal para carreira do modelo. Acho que agora relançaram e tal, vi um outro dia. Mas o alce deixou sua pegada na história automobilí stica.  E se...? não é uma pergunta que brasi leiros gostam de fazer. Deus é brasileiro, não é? Por que se preocupar? Os crentes que me perdoem, mas internet é diabólica. Devia se chamar inFernet. Não há anjos da guarda, guarda , não adianta rezar re zar,, e nenhuma vela de set e dias espanta hacker hac ker.. Em suma: algo vai dar errado. Sempre. E é nessas horas que você distingue o bom profissional da anta: diante diant e de um desastre, ele capota ou reage a tempo? Por que erros acontecem tanto? Por conta da inelutável Lei de Murphy, Murphy, se algo pode dar errado, dará? Sim, mas por outra razão mais positiva: a cada dia que passa, projetos interativo s envolvem mais e mais frentes: email , call center, center, negócios, conteúdo, CRM... Cada frente dessas tem mil alces na tocaia. Quer um exemplo? Você tem dois fornecedores de int ernet para escolher. escolher. Cada um traz um projeto mais bacaninha que o outro . Como escolher? Joga um alce na pista: - e se o projeto der super certo e tivermos milhares de usuários usuários entrando ao mesmo tempo? tempo? ou - e se todos os visitantes ficarem tão impressionados que vão mandar zilhões de email s? ou - e se não dermos conta dos pedidos? ou - e se o seu designer ganhar um prêmio e mudar pra Londres? ou - e se eu quiser atualizar o site de meia em meia hora? Como você pode ver, ver, sucesso em excesso também dá encrenca. E por mais que os fornecedores prometam maravilh as, nem todos estão preparados para o tranco do dar certo demais.

60

  g   n    i    t   e    k   r   a m

 E se...? não é uma pergunta que brasileiros gostam de fazer. Deus é brasileiro, não é? Por que se preocupar? 

Se problemas vão acontecer quer a gente se previna ou

Há perguntas mais dramáticas: e se o fornecedor falir? E

não, por que a gente não relaxa de uma vez? Sim, você pode

se tivermos problemas depois do projeto estar entregue? E se

relaxar e gozar, mas de preferência bem lon ge de mim.

o fornecedor não cumprir o prometido? E se forem necessárias

Problemas conhecidos a gente previne de saída. Expe riências anteriores (e cicatrizes e calos) ajudam muito, mas um bom exercício de e se... pode prevenir muita coisa. Por exemplo: você recebe um layout todo diagramadinho, diagramadinho ,

alterações? E se for preciso migrar de hospedagem?  Antes de se encantar com discursos discur sos legais, cool e criativos,, veja se o airbag funciona. Ou então torça para criarem ativos recall de profissionais com defeito de fábrica.

alinhadinho e tal. Com um pouco de imaginação, você se per-

Paranóia? Não. Ter Ter algo online é ter uma vitrine perma-

gunta: e se esse texto for muito maior? E se a foto vier num

nente, mas vitrines são de vidro. E atire a primeira pedra quem

tamanho maior? E se eu precisar ti rar esse conteúdo do ar ra-

nunca capotou.

pidamente? E se eu tiver que alterar alguma coisa no meio da madrugada? E se o usuário digitar errado o endereço? E se o usuário apertar o BACK? E se o usuário adicionar essa página ao bookmark? E se o usuário preferir telefonar?  Alces não faltam.

61

  n   g    i   s   e    d   e   c   n   e    i   r   e   p   x   e

Claudio Toyama Sócio-fundador da Brand Experience|Studio  consultoria em experiência do cliente e marcas, em Londres. Mestre em interatividade e multimídia (London Institute), formouse em Administração pela FGV, fez pós-graduações em Marketing (CEAG) e Comunicação e Artes (Mackenzie), e especializou-se em Design Gráfico (Istituto Europeo di Design  Comunicazione em Milão, Itália). [email protected]

 Visão: o sentido mais paparicado na internet No artigo anterior mencionei o que está sendo desenvolvido para a internet no que diz respeito a interfaces olfativas (impressoras (impr essoras de cheiro). Hoje estarei abordando a visão, que, no meu parecer é o sentido mais paparicado dentre todos os sentidos neste meio... A audição é o primo pobre, mas pelo menos faz parte da família... Os outros sentidos, como mencionado em artigos anteriores, têm sido abordados ainda com muita timidez dados os altos custos de produção e distribuição e, por isto mesmo, encontram-se em um estágio primário de desenvolvimento. Há muitas plataformas sendo desenvolvidas com ênfase na visão... Algu mas delas, aliás, estão emergindo da pobreza de interação (vide telefones celulares) para ambient es portáteis, cujo conteúdo é altamente sofisticado (telefones celulares com conexão 3G os quais são usados para transmissão de fotos e vídeo). Dentre as inúmeras interfaces que estão na porta de saída dos laboratóri os e centros de pesquisa, escolhi duas que causarão um grande impacto quando forem finalmente viabil izadas para as massas. Estas são: 1 .Óculos Sony Glasstron 2 .Realidade aumentada aumentada  Vamos falar a respeito de cada uma delas: 1. Óculos Sony Glasstron O iPod, cuja capacidade de armazenamento chega a 10 mil músicas, tornou-se uma febre mundial (abrindo parênteses  mais uma vez o som sai na dianteira na história das tecnologias que mexem com nossos sentidos). Mas qual o próximo passo? Dentre os aparelhos já disponíveis no mercado, temos os DVD players portáteis e os vídeo players com o Creative Zen Portable Media Centre, capaz de armazenar até 80 horas de vídeo, 5 mil músicas ou 50 mil fotos. Mas, se por um lado capacidade de armazenagem é o que não falta, por outro, out ro, as telas deixam a desejar deseja r, não por sua resolução, resoluçã o, mas pelo seu tamanho. Não seria ótimo se tivéssemos conosco uma tela de 52 polegadas portátil que nos deixasse assistir ao filme de nosso interesse em qualquer lugar que desejássemos? Os óculos Glasstron da Sony possibilit am exatamente isto. Estes são compostos por duas mini telas LCD que quando usados dão a impressão de estarmos diante de um telão de 52 polegadas a dois metros de distância. Mas esta tecnologia, por ser muito nova no mercado, ainda está restrita à camada mais abastada que pode dispor de US$ 2.000, em média, por um par de óculos deste gênero. 2. Realidade aumentada Quando uma pessoa é instruída em um determinado assunt o, ela percebe a realidade de uma forma diferente daquela que ainda não foi iniciada neste mesmo assunto. Um exemplo co62

 A realidade aumentada está sendo disponibilizada na forma de óculos semitransparentes que adicionam uma camada de realidade virtual às imagens reais 

tidiano seria um leigo abri ndo o capô de um carro e vendo ca-

Para aquelas pessoas que querem sempre saber mais so-

bos, fios, peças metálicas, circuitos eletrônicos. Pode até fazer

bre o mundo a sua volta, este seria o tão al mejado upgrade 

uma vaga idéia do nome e qual a utilida de de algumas destas

de seus cérebros, podendo virar experts instant âneos em

peças, mas não terá a compreensão do t odo e quase com cer-

qualquer assunto que desejasse desejassem. m.

teza não saberá que parafuso apertar para que o motor comece novamente a funcionar.

Neste artigo mencionei somente duas das inúmeras tecnologias que vêm sendo desenvolvidas para a visão. Todas

Neste mesmo cenário, o mecânico de automóveis enxer-

elas necessitarão de profissionais altamente capacitados nas

ga uma realidade filtrada ou, neste caso aumentada, aumentada, por

áreas de design gráfico, information design, arquitetura da

sua capacitação técnica. Para este indivíduo, o que ele tem a

informação e usabilidade, entre outras áreas. Você acha que

sua frente são: carburador carburador,, filtro, distribuidor, bateria etc. e

está preparado? ;-)

sabe como o conjunto destas peças faz com que o carro ande.

 Até nosso próximo encontro!

 A realidade aumentada está sendo disponibilizada na forma de óculos semitransparentes que adicionam uma camada de realidade virtual às imagens reais. No exemplo citado acima, quando o leigo abri sse o capô do carro, ele veria uma camada (layer) projetada em cima das peças reais, que explicaria o nome e função de cada uma delas e, se conectado ao computador de bordo e à internet, apontaria para a peça com defeito, bem como qual a oficina mais próxima onde poderia ser trocada. Mas este é somente um dos inúmeros exemplos de aplicação da realidade aumentada. Imaginem ir a um museu e ter à sua disposição um expert demonstrando e ensinando in-loco o porquê daquela escultura ser importante para a humanidade, por quem foi esculpida, em período etc.

63

  n   g    i   s   e    d   e   c   n   e    i   r   e   p   x   e

  n   g    i   s   e    d    b   e   w

Luli Radfahrer PhD em Comunicação Digital, já dirigiu a div isão de internet de algumas das maiores agências de propaganda e de a lguns dos maiores portais do Brasil. Hoje, é Professor-Doutor da ECA-USP, Diretor Associado do Museu de Arte Contemporânea e consultor independente. Autor do livro design/web/design:2, administra uma comunidade de difusão do conhecimento digital pelo país.

[email protected]

Usabilidade: ame-a e odeie-a Em um cibermundo frio e digital, eis um assunto que provoca emoções, às vezes quase tão exaltadas como as provocadas por jogos de futebo l. Em todos os lugares, designers de web, planejadores, arquitetos de informação e publicitários online são apaixonados, odeiam ou se incomodam com o tema e às vezes discutem animadamente, a ponto de ninguém ser indiferente a ele. Ainda bem. Usabilidade é um fator polêmico, controverso, mas muito importante na defini ção e estruturação de websites. Em um equivalente do design de objetos, ela é como a ergonomia: irritante, porém necessária; fundamental, entretanto monótona. Seus defensores argumentam que de nada adianta uma bela cadeira que seja desconfortável, seus opositores afirmam que o leve desconforto é o motor da inovação. E ambos estão certos. Os argumentos pró-usabilidade são tão conhecidos quanto chatos. Seu principal é que um site é tanto melhor quanto mai or for o número de usuários que tem acesso a ele. Para isso, quanto mais conhecida e fácil for a interface, melhor. melhor. Deficientes visuais, velhinhas, quarentões sem experiência digital, crianças, todos têm que ter acesso fácil e rápido. Já dá pra imaginar como deve ser emocionante uma interface dessas, em que não pode é a regra. Por outro lado, os argumentos contra a usabilidade são emocionantes e se apóiam nos videogames, mostrando que continuaríamos a usar DOS e a jogar telejogos se não se inventassem coisas esquisitas, novas, difíceis, que obriguem o usuário a deixar de ser preguiçoso e se dedicar a aprender a operar o novo sistema. O mesmo se dá com operações mais complexas com eletrônicos, computadores etc. Desse jeito parece até que a usabilidade deixa os sites como corredores de Fórmula 1 em dia de chuva, nivelando-os por baixo, o que não é verdade. Os dois lados representados aqui são exagerados: inovação e usabilidade, usadas com parcimônia, combinam muito bem. Quem  já trocou de marca de telefone celu lar sabe que, por mais que o apa relho seja belo e poderoso, a facilidade de uso é muitas vezes fun damental. Como não há regras para o conjunto de botões que deve ser apertado, pouco importam as novidades do telefone se você tem que apertar sete vezes um botão para acessar sua agenda de telefones. Como sempre, o que vale é o bom senso e cabe à equipe de planejamento e implementação (designer incluído) definir o que é mais important e: acesso ou inovação. Se o website é de um serviço, entende-se que sua eficácia seja medida pelo número de atendimentos e, portanto, ele deve ser o mais aberto possível. Entretanto, se o objetivo de um website for seu conceito, se o produto representado tiver que ter personalidade e se impor perante seu público, então o importante é atitude.

64

  n   g    i   s   e    d    b   e w

 Cabe à equipe de planejamento e implementação definir o que é mais importante: acesso ou inovação 

Nesse caso é muito mais importante a atitude que o acesso e alguma dificuldade é até bem-vinda, pois mostra que o produto não é para qualque r um. Falem bem ou falem mal, o importante é que o designer nunca deixe de considerar a usabilidade em seus projetos. Mas, sempre que possível, ele deve evitar se pautar por ela. Em outras palavras, é como um poste de rua. Se você está sóbrio, serve como iluminação. Se está bêbado, como apoio.

65

66