You are on page 1of 73

janeiro 2007 :: ano 4 :: nº 37 :: www.revistawebdesign.com.

br

Saiba como aplicar a teoria na prática

Estudo de caso: o projeto interativo da Brastemp (AgênciaClick)


E D I T O R A
I SSN 1806 - 0099 E-mais: agências digitais conquistando o mercado internacional
Entrevista: padrões web, uma barreira ou um caminho?
9 771806 009009 00037
Tecnologia: trabalhando com criação em ActionScript
R$ 9,90
4 :: quem somos

Editorial Equipe
Direção Geral
Cadê o recheio?????? Adriana Melo
adriana@arteccom.com.br
Ontem, eu ia enviar um e-mail para a Bauducco. Queria dar minha Direção de Redação
opinião sobre um produto deles que eu estava consumindo. Entrei no site. Luis Rocha
luis@arteccom.com.br
Achei o contato... Que bom! (é, algumas vezes não encontramos o contato). Criação e Diagramação
Camila Oliveira
Quando me deparo com um formulário enorme, com endereço, profissão,
camila@arteccom.com.br
estado civil etc., pensei: “o interessado deveria ser o fabricante, me facilitar Leandro Camacho
leandro@arteccom.com.br
o acesso, afinal, eu poderia contribuir para a qualidade de seu produto e para Ilustração
Beto Vieira
suas vendas. Eu estaria até disposta a perder 1 minuto, pela credibilidade da
beto@arteccom.com.br

:: A Arteccom não se responsabiliza por informações e opiniões contidas nos artigos assinados, bem como pelo teor dos anúncios publicitários. :: Não é permitida a reprodução de textos ou imagens sem autorização da editora.
marca, mas não 5!”. Fechei. Existem outras marcas por aí. Publicidade
Bruno Pettendorfer
Então, tanto se fala de Web 2.0, foco no usuário, troca de experiências,
Débora Carvalho
mas o básico ainda não é feito. Enfim, me pergunto: temos tanto tempo para publicidade@arteccom.com.br
Gerência de Tecnologia
interagir assim? Com acesso a e-mail, celular, MSN, Skype... Definitivamente
Fabio Pinheiro
não. O tempo vai continuar sendo o mesmo, nosso dia vai continuar tendo fabio@arteccom.com.br
Desenvolvimento Web
24 horas. E agora ainda temos que encontrar tempo para conversar com as Cadu Sant'Anna
cadu@arteccom.com.br
marcas dos produtos que consumimos! Conversaremos apenas com as marcas
Financeiro
que nos encantarem e olhe lá. Então, nosso desafio agora é criar ambientes Cristiane Dalmati
cristiane@arteccom.com.br
que realmente atraiam a atenção do usuário. Será um processo de seleção
Atendimento e Assinaturas
natural. O nosso cliente não deixará de conversar com um amigo para trocar Luanna Chacon
luanna@arteccom.com.br
experiências com nossa marca. A não ser que... Aí que estará a oportunidade
A Arteccom é uma empresa de design, especializada na
de demonstrar seu diferencial. criação de sites e responsável pelos seguintes projetos:
Revista Webdesign :: www.arteccom.com.br/webdesign
Bem, mas comecei falando de interatividade porque a WEBDESIGN Concurso Peixe Grande :: www.arteccom.com.br/
webdesign/peixegrande
pretende, ainda este ano, focar bastante neste assunto. Queremos trazer Encontro de Web Design :: www.arteccom.com.br/encontro
Fórum Internacional de Design e Tecnologia Digital ::
para vocês, em 2007, as melhores soluções, estratégias e experiências www.arteccom.com.br/find
Projeto Social Magê-Malien :: www.arteccom.com.br/ong
com interatividade na web, além de tratarmos de assuntos como aplicação
de vídeos em sites, internet no celular, cases internacionais, faremos uma Criação e edição
www.arteccom.com.br
coleção super especial “Café com Criação” e outras surpresas.
Produção gráfica
Um grande abraço e um feliz 2007! www.prolgrafica.com.br

Adriana Melo Distribuição


www.chinaglia.com.br

9
menu :: 5

apresentação e-mais
pág. 4 quem somos pág. 38 debate: Ultrapasse os limites
pág. 5 menu pág. 46 e-mais: Desbravadores
pág. 51 estudo de caso: Brastemp
pág. 56 tecnologia na web: ActionScript
contato
pág. 60 tutorial: Produtividade 2.0 - Parte 3
pág. 6 emails
pág. 6 fale conosco
com a palavra
pág. 64 tecnologia: Abel Reis
fique por den tro
pág. 66 arquitetura da informação: Luiz Agner
pág. 8 métricas e mercado
pág. 68 marketing: René de Paula Jr.
pág. 10 direito na web
pág. 70 bula da Catunda: Marcela Catunda
pág. 11 post-it
pág. 72 webdesign: Luli Radfahrer

portfólio
pág. 12 agência: Plano B
pág. 18 freelancer: Andrezza Valentin
pág. 20 ilustração: Glauco Diogenes

matéria de capa
pág. 22 entrevista: Padrões web
pág. 30 reportagem: Gestalt
6 :: emails

resolução de tela. A estimativa é da novembro de 2006, iniciamos a


fabricante AOC (www.aoc.com.br), publicação do “Produtividade
que aponta ainda a utilização dos 2.0”, no qual o especialista Elcio
Assunto: Direito na web
PC ou Mac? tamanhos 1024x768 (35%) e acima Ferreira vem explicando como
de 1024x768 (2%). funciona a implementação de
Gostaria de saber se a revista já
Uma dica é usar alguma sistemas de controle de versão. Vá
publicou alguma matéria sobre Assunto: Referências sobre livros
ferramenta de métricas web. O até a página 59 e confira um pouco
qual a melhor plataforma para
Google Analytics (www.google. dessa história. Em breve, sua
um webdesigner trabalhar: PC Tenho algumas revistas e as que
com/analytics/pt-BR) é uma boa sugestão de pauta vai virar tema
ou Mac? Falo em termos gerais, eu tenho realmente são muito
opção: é gratuito, além de revelar de reportagem, ok? Obrigado pela
desde a construção do layout até boas. Gostaria de saber se tem
qual o tipo de resolução de tela ajuda e continue participando!
a publicação do site. alguma edição com uma biblioteca
mais utilizado pelos usuários que
Anderson de Almeida
acessam o seu site. Assunto: Direito
Fonte denaconsulta
web de referência com bons livros
almeida@animabits.com.br
nacionais sobre webdesign. Se
Oi, Anderson, como vai? Ainda não Sou estudante de Desenho não tiver, gostaria de sugerir para
Assunto: Direito
Metodologia de
na web
publicamos nada sobre o assunto. trabalho Industrial e acompanho a Revista uma próxima edição.
Na verdade, existe uma previsão há muito tempo. Recentemente, Dayvison Santos
num trabalho da faculdade, tive de mayvison@hotmail.com
de produzirmos um debate sobre Trabalho em uma fábrica de
o assunto. Nosso intuito é avaliar software. Por lá, utilizamos o escolher um tema para uma loja Dayvison, obrigado pela sua
a opinião dos mais diversos método de desenvolvimento, e criar um plano de negócios. Fiz participação! Mensalmente,
profissionais para podermos indicar homologação e produção para o sobre uma agência de design e a publicamos na seção Post-it,
como o mercado vem trabalhando desenvolvimento dos sistemas. Revista Webdesign (principalmente e dentro das reportagens e
esta questão. Além disso, para que A equipe de web também teve a edição que teve a carteira de entrevistas, algumas dicas sobre
essa avaliação seja mais completa, que se adaptar a esse método. trabalho como imagem de capa) bibliografia especializada na área.
pedimos que os nossos leitores Entretanto, não sabemos se é o foi a principal fonte de pesquisa. A Se puder, acompanhe a revista
também contribuam com este mais adequado para esta área. professora adorou e elogiou muito todo mês, pois procuramos sempre
debate, enviando suas opiniões Gostaria que o tema “método a pesquisa! E numa outra ocasião, trazer boas dicas de livros, ok?
para redacao@arteccom.com.br. de trabalho” fosse abordado foi mencionada a fonte “Brasilêro”
em alguma edição da revista. (que, por sinal, é ótima) e eu já tinha
Assunto: Direito na web
Resolução de tela Como as grandes agências lido sobre ela na revista. Muito
digitais trabalham esta questão? obrigada por estar sempre nos

Tudo bem? Preciso dar uma Como funciona a organização, atualizando e nos enviando material

resposta urgente para o meu os backups e o desenvolvimento de alta qualidade. Forte abraço!
Evelyn Gomes
diretor. Qual é a estatística de dos arquivos? Como é a
evelyn@rosa-shock.com
usuários que utilizam 1024x768 e dinâmica interna de trabalho,
800x600? É urgentíssimo... quando vários desenvolvedores Muito obrigado por este feedback, Desculpe a nossa falha!
Luciane Carvalho e designers atualizam Evelyn! É um grande estímulo para Edição de novembro:
wcfdesign@yahoo.com.br
constantemente o mesmo portal? a nossa equipe saber que a revista - Página 44, onde se lê “um dos
Juliana Diniz tem ajudado em seu crescimento envolvido”, por favor considerar
Luciane, pela urgência, já enviamos
jds.juliana@gmail.com
a informação por e-mail. Mas profissional. Aproveitando o como “um dos envolvidos”;
achamos sua dúvida válida e vamos Juliana, esta sua sugestão é super ensejo, se você gosta de tipografia - Página 73, o olho da coluna do
compartilhá-la com os nossos válida, pois reflete um dos principais inspirada em tipos populares, Luli Radfahrer saiu repetido, com o
outros leitores! Na edição de julho desafios para a constituição de uma recomendamos que você leia a mesmo da edição de outubro;
(nº30), publicamos as seguintes boa dinâmica de trabalho. entrevista de capa da edição de Edição de dezembro:
informações: 63% dos 17,5 milhões Um dos temas citados por você setembro, que fala sobre o projeto - Página 51, na parte superior do
de PCs em funcionamento no vem sendo abordado na seção “Tipos Populares do Brasil” (www. texto, aparece repetida a passagem
Brasil utilizam 800x600 pixels como Tutorial. A partir da edição de sibilina.com/tipos). “...e as regras desse universo”.

fale conosco pelo site www.revistawebdesign.com.br


:: Os emails são apresentados resumidamente. :: Sugestões dadas através dos emails enviados à revista passam a ser de propriedade da Arteccom.
L I Z 2007
FE

DESEJAMOS A TODOS UM ANO REPLETO DE REALIZAÇÕES!

Magê-Malien - Crianças que Brilham


Faça parte você também deste projeto.
Para doação de alimento entre em
contato: arteccom@arteccom.com.br
Informações:
www.arteccom.com.br/ong
8 :: métricas e mercado

Atividades desenvolvidas na internet - comunicação


Atividades Percentual (%) Fonte: TIC Domicílios 2006 (www.nic.
br/indicadores) / 2.286 entrevistados
Enviar e receber e-mail 82,84
Enviar mensagens instantâneas 49,19
Participar de sites de comunidades e relacionamentos 46,57
Participar de chats e/ou listas de discussão 35,00
Criar ou atualizar blogs e/ou websites 12,91
Usar o telefone via internet / videoconferência 10,76

Pesquisa Salarial - 2006 Fonte: Apinfo.com / 11.102 participantes

Brasil DF RJ SP
CLT Terceiro CLT Terceiro CLT Terceiro CLT Terceiro
Webdesigner 1.354,00 1.913,00 1.700,00 2.340,00 1.617,00 2.344,00 1.671,00 2.305,00
Webmaster 1.653,00 2.350,00 1.908,00 2.477,00 1.879,00 2.687,00 1.991,00 2.798,00

Estudo realizado com 42 empresas de


médio e grande porte aponta o e-mail 705 mil
marketing como a ferramenta de comu-
83% nicação digital mais utilizada no país.
Esta é a estimativa de sites referenciados por domínios brasi-
leiros. Isso porque, dos mais de um milhão de domínios regis-
Para o futuro, a previsão envolve o cres-
trados no Brasil, muitos não estão associados a um site. Há
cimento no segmento de conteúdo para
casos em que sites são apontados por mais de um domínio.
dispositivos móveis (76%), seguido pelo
Fonte: Hostmapper (www.hostmapper.com.br)
chat on-line (59%). Fonte: Associação Brasilei-
ra de e-Business (www.ebusinessbrasil.com.br)

369 ...das compras on-line realizadas no


Brasil são efetuadas em sites locais e não
Segundo pesquisa divulgada em novembro de 2006,
este era o total de empresas de hosting operando no 87% em estrangeiros. As categorias que se
destacam são: viagens (50%) e lojas de
mercado brasileiro. Juntas, elas respondem por 65,1%
departamento (25%).
dos domínios registrados no país.
Fonte: Camara-e.net (www.camara-e.net)
Fonte: Hostmapper (www.hostmapper.com.br)

Envie sugestões e críticas para redacao@arteccom.com.br


métricas e mercado :: 9

ViuIsso? Por Michel Lent Schwartzman - michel@viuisso.com.br


Site: www.viuisso.com.br

Notícias e comentários sobre comunicação digital, internet e publicidade

Diretor da Microsoft no reino da pirataria intervalo da final do campeonato de futebol americano.


Sensacional a matéria produzida pelo Estadão, com A veiculação de 30” no SuperBowl custou US$
o diretor mundial de Propriedade Intelectual da ameri- 2 . 5 m i , e n q u a n t o o u p l o a d n o Yo u Tu b e c u s t o u z e ro .
cana Microsoft, Keith Beeman. Eles levaram o executivo O comercial no SuperBowl gerou 500 milhões de im-
até a Santa Ifigênia para conhecer de perto o comércio pressões (potenciais pessoas atingidas), enquanto a
pirata de produtos da sua companhia. veiculação no YouTube atingiu 1.7 milhões de impres-
Na barraca do camelô “Mouse” encontraram até as sões. Sensacional!
versões super recentes do Vista e do Office 2007, que (Via WOMMA: http://tinyurl.com/u2wae)
ainda não estão disponíveis para o consumidor final.
Keith sabe bem que pessoas como “Mouse” Marketing viral no Vitrine
são os que menos ganham e estão na ponta de uma
cadeia de um negócio mundial, que já fatura mais que
o narcotráfico, segundo a Interpol (U$ 516 bilhões por
ano - mais do que os U$ 322 bilhões do narcotráfico).
Leia a ótima matéria no Estadão: http://tinyurl.
com/y67q3d.

YouTube 3 x 1 SuperBowl

Bati um papo sobre marketing viral com a Sabrina


Veja a comparação de investimento e resultado ao se Parlatore para o programa Vitrine da TV Cultura, que
veicular um comercial no YouTube e na TV, no intervalo do Su- foi ao ar no dia 01/12. A matéria mostra os criadores do
perBowl, o evento com a maior audiência da TV americana. ‘Tapa Na Pantera’ e a turma da Fisher America falando
O comercial “Evolution”, de Dove, veiculado no You- s o b re o v i r a l q u e f i z e r a m p a r a C a i x a . P r a q u e m n ã o
Tube e no SuperBowl, conseguiu três vezes mais através da teve a oportunidade de assistir, aqui está o endereço:
sua veiculação na internet do que quando foi veiculado no http://tinyurl.com/y4oz8y.
10 :: direito na web

A extensão das ofensas na internet


Um antigo site de eventos de nossa região quer fazer uma parceria com o Portal que administramos.
Como a característica do site deles é fazer comentários dos “figurões” da cidade, temos medo que um
desses comentários possa dar algum problema jurídico. Como somos responsáveis pelo Portal, gostaria de
desvincular as responsabilidades. Um contrato resolveria o nosso problema?
Gabriel Martins (bie.gabriel@gmail.com)

Um dos assuntos mais controvertidos detalhes são decisivos, em muitos casos),


nas atuais discussões jurídicas sobre a se pode alinhar algumas opções básicas.
internet é o das ofensas (injúria, calúnia, Dentre elas, se pode estabelecer
difamação) a terceiros. Os provedores de “filtros” visando (por meio de monitoramento
hospedagem ou de conteúdo tentam se de palavras, ou de visitação de sites,
proteger, por via contratual, estabelecendo ou de revisão no eventual recebimento
cláusulas, respectivamente, com seus de conteúdos para postagem) detectar
Gilberto Martins de Almeida
Advogado formado na PUC/RJ,
usuários e colaboradores, no sentido de se irregularidades, devendo ser aplicados tais
com Mestrado na USP e cursos eximirem de responsabilidades por quaisquer “filtros” a uma amostragem razoável.
em Harvard e no M.I.T. Ex-
ofensas veiculadas por estes últimos num site Outra medida possível é fazer constar
Gerente Jurídico da IBM, onde
trabalhou por 11 anos, no Brasil hospedado ou num texto postado. em portais e páginas “Termos de Uso” ou
e nos EUA. Sócio de Martins de Sucede, entretanto, que como “ Te r m o s d e S e r v i ç o ” e n f a t i z a n d o , c o m
Almeida - Advogados, escritório
especializado.
sabido, todo contrato é considerado “lei muita clareza, que a responsabilidade pelo
entre as partes”, porém somente entre conteúdo será exclusivamente do respectivo
Envie sua dúvida para:
redacao@arteccom.com.br
elas, ou seja, não alcança terceiros, não autor. Mais outra: prever como regra que o
figurantes no contrato. Portanto, perante autor do site ou conteúdo deverá possuir
terceiros, não há como garantir que o elementos que dêem embasamento para o
provedor ficará livre de responder pelos teor do que pretende publicar, e autoriza
atos de seus usuários ou colaboradores. previamente a sua exibição a terceiros, no
O fundamento legal para esta situação é caso de qualquer questionamento, garantindo
triplo, pois resulta: transparência e visibilidade da defesa.
i) da responsabilidade civil, prevista Além de contratos adequados, há
no novo Código Civil; u m s e m - n ú m e ro d e o u t r a s s u g e s t õ e s e
ii) do conceito de que a coletividade recomendações a serem feitas no tocante
(incluindo os terceiros) é equiparada a a este tema, que está rapidamente se
consumidor, logo, protegida pelo Código convertendo num enorme filão de pedidos
do Consumidor; e de indenização por danos morais. Vale a
iii) da Lei de Imprensa, pois o pena visitar o site do Tribunal de Justiça
Judiciário tem, crescentemente, das principais capitais do país e conferir a
estendido o conceito de imprensa a sites quantidade de jurisprudência que já existe
“informativos” ou “noticiosos”. sobre este assunto. E, essencialmente,
Quais alternativas restam, então, tomar medidas para não ser surpreendido,
para os provedores? Embora essa como incauto, e responsabilizado,
resposta demande análise caso a caso como negligente, em meio a “tiroteios”
para que sejam considerados os detalhes quase incontroláveis entre usuários,
específicos de cada provedor (e os colaboradores e terceiros.
post-it :: 11

p o r d entro ,
Fique cas, eventos ias
das di e referênc undo
livros vimentam o m
que mo ign na web
do des

Brasilêro na Dinamarca! Referências sobre construtivismo russo


Se você leu a edição de fevereiro de 2006, vai lembrar que Para quem busca referências visuais sobre a produção referente
conversamos com o designer Crystian Cruz, criador da fonte ao período conhecido como Construtivismo Russo (segundo
Brasilêro (http://tinyurl.com/jdgtw). Para se ter uma idéia do a Wikipédia, caracterizado pela “...utilização constante de
sucesso dos tipos populares brasileiros pelo mundo, a fonte foi geometria, cores primárias, fotomontagem e a tipografia sem
escolhida para compor o site da famosa dupla dinamarquesa serifa”), a dica é acessar o álbum de fotos “USSR posters”
Wulff e Morgenthaler (www.wulffmorgenthaler.com), (http://tinyurl.com/y5p7wz). E para entender a conceituação
especializada em webcomics. histórica do movimento, os livros “Design Gráfico, uma história
concisa”, de Richard Hollis, e “Neoconcretismo”, de Ronaldo
Com ou sem tabelas?
Brito, são boas pedidas de leitura.
Quer conferir se seu site está 100% tableless? Pois então, a dica é
acessar a ferramenta on-line w3tableless (http://w3tableless.com) e
colocar o código de seu projeto para validação. Dicas
Produção tipográfica no Brasil Livro do mês
Falando ainda sobre tipografia, o número de profissionais Coleção “ICONS, Web Design”
criando novas fontes é motivo de orgulho para a produção (E-commerce, Flash Sites, Music Sites, Portfolios e Studios)
nacional do design. Dois bons exemplos: Discord (http://tinyurl. Autor: Julius Wiedemann
com/y3z9pw), de Rafael Neder, e Maryam (http://tinyurl.com/ Editora: TASCHEN (www.taschen.com)
y8dpkl), de Ricardo Esteves.

Fique de olho: vídeos interativos


A equipe criativa da agência AlmapBBDO (www.almapbbdo.
com.br) trouxe uma boa novidade no Natal, com o hotsite da
campanha produzido para a Bauducco (www.natalbauducco.com.
br). Através de um vídeo interativo on-line, o usuário conseguia
interagir com o Papai Noel (respondendo a perguntas como “Se você procura por referências de como anda o design
idade, cor preferida e nome). para web no mundo, um bom caminho é conhecer a coleção
‘ICONS, Web Design’, lançada recentemente pela editora alemã
Produção acadêmica no design para web
TASCHEN. Sob o comando do brasileiro Julius Wiedemann, os
Para começar o ano, a dica acadêmica começa em ritmo de samba,
livros desta série representam um acervo mundial atualizado
mais precisamente sobre a importância de Cartola para a música
em termos de criação e desenvolvimento web. Por lá, é
popular brasileira. Estamos falando do projeto “Um sonho que a
possível descobrir, por exemplo, como criam os profissionais
gente teve” (www.umsonhoqueagenteteve.com.br), apresentado
da Croácia, Estônia, Hong Kong, Índia, Suíça, entre outros. Para
por Claudio Gusmão, Fabio Moita, Letícia Gomes, Marcos Cardinal,
se ter uma idéia do trabalho realizado, na série ‘Portfolios’,
Paola Barone, Rafael Ribeiro e Renato Garcia, no curso de Design
são 200 portfólios de mais de 30 países. O Brasil também
Digital da Universidade Anhembi Morumbi. Se você possui ou
marca presença: o trabalho de brazucas como Pablo Marques
conhece algum trabalho acadêmico interessante, envie sua
(www.pablomarques.com) e Vitor Vilela (www.vitorvilela.
sugestão para redacao@arteccom.com.br.
com.br) revelam como o nosso conhecimento vem recebendo
reconhecimento internacional.”

Participe do Post-it! Envie sugestões para redacao@arteccom.com.br.


12 :: portfólio agência - Plano B

O DESIGN COM MÚLTIPLAS FACES


No mercado web, poucas são as agências com capacidade e disposição de atender
clientes de segmentos tão distintos. Talvez seja por isso que a carioca Plano B (www.plano-
b.com.br) conseguiu construir, ao longo dos seus oito anos de mercado, um bom diferencial
para colocar em seu portfólio empresas e organizações das mais diversas áreas.
“Atendemos clientes nos mais diversos setores: energia, responsabilidade social, cultura,
corporativo (B2B e B2C), comércio, tecnologia, saúde, educação, transporte... Sempre propondo
soluções para diferentes desafios”, explica Pedro Herzog, diretor de projeto da Plano B.
A história da agência se inicia em 1999, quando Pedro e seu amigo Sergio Boiteux,
recém-formados pela ESDI (Escola Superior de Desenho Industrial - www.esdi.uerj.br),
decidem trabalhar juntos.
“A experiência adquirida por cada um dos sócios como estagiários em diversos
escritórios de design foi pré-requisito para iniciar as atividades em uma base sólida.
No início, atuávamos desenvolvendo projetos para pequenas empresas e oferecendo
portfólio agência - Plano B :: 13

“O importante é que o cliente se reconheca como parte integrante do produto final”

serviços terceirizados para outros escritórios de design. Em maneira distinta. O importante é que o cliente se reconheça
2002, Marcos Rogozinski, formado em engenharia de som como parte integrante do produto final”.
pela Berklee College of Music, associou-se ao escritório, Lembrando que a diversidade dos projetos
trazendo sua experiência no desenvolvimento de novas serve ainda como um estímulo ao trabalho de seus
tecnologias e programação”. profissionais. “No início do processo criativo,
Nesta caminhada, um dos principais desafios seria procuramos estimular uma discussão com toda a
conseguir verba para montar a agência dentro de uma equipe. Nessa etapa, todos podem, livremente, sugerir
boa infra-estrutura física. “Além das noites mal dormidas, alternativas para o desenvolvimento do projeto. Além
o escritório iniciou suas atividades em uma pequena sala disso, a diversidade dos projetos cria um processo de
sublocada de uma produtora de cinema. Receber clientes contínuo aprendizado, que ajuda a manter o interesse
naquela sala era sempre complicado. Mais tarde, com pelo desenvolvimento de novas soluções”, diz.
a contratação de uma estagiária, a situação ficou ainda E dentro das transformações que vão ocorrer no
mais crítica. Depois de dois anos, o escritório mudou- m e rc a d o d e i n t e r n e t n o s p r ó x i m o s a n o s , a P l a n o B
se para um local mais amplo, permitindo o crescimento aposta cada vez mais no alinhamento entre a prática
da equipe que hoje conta com oito funcionários fixos do design e as possibilidades tecnológicas. “Os novos
(seis designers e dois programadores) e colaboradores recursos vão sendo incorporados aos projetos na
(redatores, fotógrafos e ilustradores)”. medida em que viabilizam uma interação mais fluida
Muito dessa evolução deve-se a variada oferta de e uma comunicação mais direta. A internet está cada
serviços (nas áreas de design gráfico, vídeo/animação, vez menos restrita à estação de trabalho. Em um futuro
identidade corporativa, exposições e webdesign), que próximo, as questões de interface e usabilidade serão
permitiu, em pouco tempo, que a Plano B conseguisse formuladas para outros ambientes, ampliando ainda
desenvolver um portfólio consistente e diversifi cado. “As mais o mercado”, argumenta Pedro.
principais conquistas são os próprios clientes. Atualmente, a
Plano B atende regularmente empresas, projetos e instituições Plano B: etapas envolvidas nos projetos digitais
como SHV Gas Brasil, Petrobras, Eletrobras, Anima Mundi, 1. Levantamento dos objetivos do cliente e das infor-
Fundação Casa de Rui Barbosa, entre outros”. mações relevantes ao projeto
Apostando na pluralidade 2. Pesquisa
Se fosse definir em uma palavra a característica marcante 3. Arquitetura de informação, estrutura de navega-
dos projetos desenvolvidos pela agência, Pedro Herzog ção e definição das principais ferramentas
aponta a pluralidade como a definição a ser apresentada. 4. Layout das principais páginas, de acordo com a
“Por isso, na hora de selecionar um profissional, além de identidade do projeto
uma avaliação do portfólio, pesa muito a versatilidade, a 5. Programação
capacidade e a vontade de aprender”. 6. Desenvolvimento da interface
Outra característica que confirma a forma como a 7. Testes de usabilidade
Plano B atua no mercado está presente nas etapas de 8. Ajustes
desenvolvimento de seus projetos. “O processo criativo de 9. Treinamento
cada trabalho se inicia no primeiro contato com o cliente 10. Fechamento do projeto
e, como cada cliente tem características e necessidades
diferentes, os projetos também são encaminhados de
14 :: portfólio agência - Plano B

SHV Gas Brasil (SHV.Net) Anima Mundi


www.shvgas.com.br www.animamundi.com.br
Tecnologias utilizadas: ASP, Flash e SQL Server Tecnologias utilizadas: ASP, Flash e SQL Server

O relacionamento com a SHV Gas representa dois gran- A oportunidade para a criação e o desenvolvimento do site do
des projetos: além dos sites da SHV Gas Brasil, Minasgás e Anima Mundi, considerado o maior festival de animação da América
Supergasbras, a agência ficou responsável pelo desenvol- Latina, surgiu através da recomendação de um cliente. “Conquista-
vimento da intranet da empresa, que centraliza ferramen- mos a conta através da participação em uma concorrência. A partir
tas de integração, comunicação interna e de otimização de
de então, a Plano B passou a atender todas as demandas relaciona-
recursos.
das ao projeto nos últimos três anos”, diz Pedro.
Diante de tal experiência, quais seriam as principais
A proposta era transformar o site em uma ferramenta dinâmica
diferenças na criação de interfaces para internet e intra-
que permitisse que os próprios funcionários do festival tivessem
net? “Os sites têm uma estrutura relativamente simples,
autonomia para administrar as informações disponibilizadas na
com navegação direta, ricos em informações sobre seus
rede. “Desenvolvemos um sistema para gerenciamento de todo o
produtos e serviços. São orientados para o consumidor
final e sofrem pequenas atualizações de conteúdo dentro conteúdo do site. Entre as funções deste sistema, destacamos: perfis

da estrutura de navegação proposta. Já a intranet é um de acesso; cadastro de notícias; sistema de votação on-line; grade

projeto mais complexo, em constante desenvolvimento. de programação; mural de fotos; calendário de eventos; cadastro de
A SHV.Net converge informações de todas as diretorias e produtos e links; mala direta para os usuários cadastrados etc.”.
departamentos, sendo constantemente revisada em seu Em relação à arquitetura da informação da versão 2006
conteúdo e estrutura, além do desenvolvimento de novas do site do festival, a agência procurou valorizar também as
ferramentas”. outras categorias que foram surgindo ao longo das edições.
Um aspecto interessante na interface da intranet é a “Embora o Festival Anima Mundi seja a principal referência
utilização de ícones para orientar a navegação dos colabora-
para a maioria dos visitantes, a estrutura deveria apresentar
dores da empresa. “Eles foram construídos a partir de uma
os módulos (Festival Anima Mundi, Anima Mundi Web, Anima
matriz de 25x25 pixels, destacando os tópicos mais utilizados
Mundi Celular e Anima Escola) com o mesmo valor hierárquico.
e contribuindo para uma interface mais leve e amigável”.
Outro fator levado em consideração foi a necessidade de mo-
dificar completamente os padrões de cores, tipografia e estilos
de texto, para cada edição do website. Além disso, a arquite-
tura de cada seção foi replicada para facilitar a navegação do
visitante e também a manutenção do website”.
portfólio agência - Plano B :: 15

Filmes do Serro
www.filmesdoserro.com.br
Tecnologias utilizadas: ASP, Flash e SQL Server

A tradicional produtora de cinema Filmes do Serro propôs um bom desafio


para a Plano B: criar um novo site que apresentasse, com a mesma ênfase, a
empresa e uma área dedicada a biografia e a filmografia de Joaquim Pedro de
Andrade (um dos expoentes do Cinema Novo e fundador da produtora).
“Dessa forma, tivemos que trabalhar na organização e na formatação
de um grande volume de textos e imagens. A composição das barras de
fotos, presentes em todas as páginas, também renderam horas de traba-
lho”, revela Pedro.
Outro detalhe interessante neste projeto refere-se ao equilíbrio das cores
utilizadas para construção da interface do site. “Optamos pelo uso de diferen-
tes paletas para identificar as duas grandes áreas do website. Utilizamos cores
pouco saturadas para as páginas de apresentação e cores mais vibrantes para
destacar e identificar as páginas dos filmes”.
18 :: portfólio freelancer - Andrezza Valentin

Andrezza Valentin
Contato: info@andrezza.com
Site: www.andrezza.com

Estímulos de criação baseados


Responsável pela direção de arte do hotsite “High Definition é Gradiente”
na arte e no design (www.gradiente.com/highdefinition)

Se alguém ainda tem dúvidas sobre a validade de se Analisando o portfólio de Andrezza, é possível per-
investir numa boa formação acadêmica, a trajetória profis- ceber uma forte ligação com a arte. Seria essa uma das
sional de Andrezza Valentin, formada em artes pela FAAP principais influências em seu processo de criação? “Acho
e em design gráfico pelo SENAI, serve para dirimir os prin- que tanto arte como design fazem parte de todos os meus
cipais questionamentos. trabalhos. O que acontece é que, às vezes, eu utilizo alguns
“Se você quisesse realmente estagiar na área de de- conhecimentos adquiridos em arte para a minha produção
sign, você tinha que correr atrás para conseguir porque de design e vice-versa. Quando estou criando um trabalho
as vagas eram disputadíssimas e entrar num estúdio de para web, sempre penso nele de forma espacial e com al-
design ou agência era quase impossível. Naquela época, gum tipo de narrativa. Talvez isso aconteça pelo fato dos
o mercado ainda não estava acostumado a contratar pro- meus trabalhos de arte serem tridimensionais e em grande
fissionais tão jovens. Apesar dessas dificuldades, tínhamos parte efêmeros ou com algum tipo de interação com os
ao nosso favor o fato de o SENAI dar aos alunos uma exce- espaços e/ou público”.
lente base de conhecimento em tipografia, diagramação e Falando ainda sobre seu trabalho, ela procura esti-
teoria das cores. Isso ajudou bastante no meu desenvolvi- mular seu processo de criação buscando diversas fontes
mento profissional, principalmente no início, pois apesar de informação. “Sempre começo vendo referências, re-
de ser muito jovem, eu acabava me destacando pela minha correndo a projetos, artistas e elementos que me impres-
boa formação”, destaca. sionaram de alguma forma. Depois, faço diversas leitu-
Após experimentar como seria o processo de tra- ras do briefing, planejamento e repasso todo o material
balho de um designer gráfico, e descobrir que não seria gráfico do cliente. Aí, é deixar as coisas cozinharem um
este o único segmento que gostaria de atuar, a internet pouco na cabeça e procurar os estímulos certos para
surgiu como o campo ideal para ela demonstrar todo o desenvolver o trabalho”, afirma.
seu potencial. “Quando comecei a trabalhar com web tive Uma lição valiosa que Andrezza aprendeu ao longo de
a sensação de ter me encontrado. Por muito tempo pre- sua carreira de designer está na cuidadosa preparação do
feri a linguagem de internet a qualquer outra, mas agora portfólio. “Quando analiso um portfólio, procuro entender
me sinto à vontade para fazer trabalhos de impresso, o processo de construção dos trabalhos e a evolução de
logos, animações. Demora um tempo para você se sentir um para outro, pois assim você consegue perceber o ritmo
confiante do seu próprio trabalho a ponto de não preci- e a velocidade do processo de aprendizagem da pessoa.
sar se prender a nenhum tipo de linguagem específica. Também presto muita atenção na escolha das cores, fontes
Isso também requer muito estudo e dedicação porque é e diagramação. Esses são os elementos fundamentais de
necessário conhecer bem todas as linguagens para poder qualquer trabalho e é através deles que você percebe o que
mudar facilmente de uma para outra”. o profissional realmente sabe fazer”.

Para participar desta seção, cadastre seu portfólio no site da revista: www.revistawebdesign.com.br.
20 :: portfólio ilustração - Glauco Diogenes

Glauco Diogenes
www.glaucodiogenes.com.br
Wd :: Como define seu estilo e onde você busca as referências para o seu trabalho?
Glauco :: Acredito que a diferença do meu estilo de ilustração está exatamente em utilizar o computador ou o software como
instrumento de trabalho e não como linguagem ou razão do trabalho em si. Com isso, consegui desenvolver um trabalho que,
embora tenha uma estrutura relativamente simples, possui uma essência forte, possibilitando a atuação nos mais diversos tipos
de veículos e mercados, seja nas artes, design, editorial, televisão entre outros. A minha preocupação sempre foi a de desenvolver
um trabalho consistente e não um estilo de verão com prazo de validade determinado.

Filosofia de Boteco - Zapping / Zoomp (2006)

L a r D o c e L a r - P ro g r a m a C a l d e i r ã o d o H u c k ( 2 0 0 6 )

Materiais utilizados: “um


bom briefing, algumas fotos
(Google Images e/ou sites
d e ro y a l t y f re e ) , u m a b o a
dose de paciência, detalhes
q u e ‘ a p a re n t e m e n t e ’ n ã o s ã o
necessários e uma xícara de
café.”
22 :: entrevista - padrões web

Padrões web,
uma barreira ou um caminho?
Ao longo dos últimos quatro anos, certamente você leu os mais diversos conteúdos falando

sobre as vantagens e os porquês para a adoção dos padrões web dentro dos processos de criação

e desenvolvimento de sites.

Passado este tempo, a Revista Webdesign pretende analisar como o mercado reagiu a tamanho

tsunami de informações. Os padrões se tornaram uma barreira ou um caminho no design para web?

Ninguém melhor para responder tal provocação do que o professor Everaldo Bechara, pós-graduado

pela COPPE/UFRJ e coordenador acadêmico do Centro de Treinamento iLearn (www.ilearn.com.br).


entrevista - padrões web :: 23

Wd :: Na edição de abril de 2005, abordamos as van- padrões, você recomendava que os profissionais não
tagens no uso dos padrões web. Neste ínterim, é possível se prendessem a programas e aprendessem a gerar
apontar um aumento na utilização desta metodologia? os códigos através de digitação e “não somente aper-
Bechara :: Com certeza, mas bem menos expressivo tando botões ou arrastando elementos”. De lá para cá,
do que deveria ser, dado que é inevitável que passemos a essa realidade mudou?
utilizar os padrões pelas inúmeras vantagens que sua uti- Bechara :: Não e acho difícil que mude em um curto
lização oferece. É um trabalho diário de esclarecimento, espaço de tempo. Os produtos WYSIWYG (“What You See
pois, apesar de termos vários profissionais utilizando e di- Is What You Get”), que geravam códigos automaticamente
vulgando os padrões, a grande maioria ainda permanece através de uma interface interativa, sem o conhecimento
com total ignorância sobre o assunto, resistindo a sua uti- específico do (X)HTML e CSS, ainda não têm espaço neste
lização por total desconhecimento, utilizando argumentos mercado, embora os esforços de produtos como Adobe
fracos e sem fundamento. Dreamweaver ou Adobe GoLive e Microsoft Expression
Para o mercado governamental, o aumento natural Web Designer tenham avançado neste sentido, mas longe
foi impulsionado pelo decreto 5.296, de acessibilidade, o do ideal. Fazer códigos “na mão” ainda é a forma mais in-
que obriga, por força de lei, que sítios municipais, esta- teligente de criarmos código com os padrões web.
duais e federais se tornem acessíveis. Em análise feita em Um bom profissional é aquele que conhece o con-
sítios governamentais, encontramos incongruências com ceito, a teoria, os fundamentos. A ferramenta, como o
relação aos padrões do W3C (www.w3c.org). Na verdade, próprio nome diz, deve ser utilizada como ferramenta.
o equívoco é pensar que um projeto web acessível pode Uma ferramenta pode mudar, evoluir ou mesmo ser ul-
começar pela própria acessibilidade, quando o correto é trapassada por outras ferramentas. Podemos até decidir
começar um projeto acessível pela sua estrutura (X)HTML, usar outra ferramenta. Os fundamentos não, servem
depois pelo CSS, seguido do Javascript Cross-Browser e para qualquer ferramenta de hoje ou amanhã. Para um
finalmente com questões específicas de acessibilidade, produto A ou produto B. É como fazer uma faculdade ba-
atendendo assim as 65 recomendações do W3C e mais seada em produtos e outra em fundamentos. É óbvio que
questões de usabilidade referentes à acessibilidade. os fundamentos são mais importantes. Você não precisa
Hoje, o grande problema com relação aos sítios do fazer uma faculdade para aprender ferramentas. É jogar
governo é a falta de um órgão fiscalizador independente tempo e dinheiro fora.
e com experiência para avaliar se eles estão realmente Wd :: Em entrevista recente falando sobre os de-
acessíveis, o que implica necessariamente em adoção safios na disseminação dos padrões, o especialista
dos padrões web. Recente estudo divulgado pela ONU Maurício Samy (www.maujor.com) alertava que “...en-
revela que apenas 3% dos sites são acessíveis. Segundo quanto um excelente designer estiver sendo solicitado
a pesquisa, a maioria dos sites não cumpre as normas a codificar sua criação, um especialista em XHTML +
internacionais. O estudo detalha informações sobre 20 CSS tiver que criar o visual, um gênio do PHP tiver
países, inclusive o Brasil. a obrigação de escrever XHTML Strict, o processo
Wd :: Nesta mesma edição, sobre o uso de sof- de aceitação e implementação dos ‘padrões web’ no
tware para o desenvolvimento de sites dentro dos Brasil estará a passos de tartaruga”. Como você ana-
24 :: entrevista - padrões web

lisa a utilização dos padrões entre os profissionais e pois é muito difícil ter um bom conhecimento de tudo.
agências digitais no país? Cabe lembrar, entretanto, que um profissional de desen-
Bechara :: Concordo com o Maurício quando ele diz volvimento web tem que conhecer os padrões.
que o potencial de cada um deve ser aproveitado da melhor Recentemente, fui júri de um evento corporativo na
forma - isto é o ideal. Entretanto, são poucas as empresas web, onde agências digitais eram a maioria das empresas
hoje em dia que podem ter um excelente designer que faça inscritas no concurso. Fiquei impressionado como os pa-
só a criação do site, pois, de acordo com o porte da em- drões web estão muito tímidos neste segmento. Analisei
presa, muitas vezes não existe uma demanda de projetos sites que poderiam ter sido desenvolvidos com padrões
que justifique. Dessa forma, o web designer deve traçar seu web sendo feitos em Flash. Acho que será muito difícil
plano de carreira observando seus objetivos e seu potencial, um web designer que desenvolva dentro dos padrões con-
mas sem ignorar esta demanda do mercado. vencer um diretor de criação a não usar o Flash em um
Entendo que um web designer que hoje crie e de- hotsite, por exemplo, mas temos que ter, no mínimo, uma
senvolva seus projetos adotando os padrões de forma alternativa acessível. É possível criar belas campanhas na
correta e que seja preocupado com usabilidade é um web também com o apoio dos padrões e dando um dife-
profissional bem requisitado pelo mercado. O de- rencial positivo ao projeto.
senvolvedor PHP, ASP.net etc. é outro profissional, o Wd :: Na edição de agosto de 2005, promo-
especialista em Flash é outro, 3D e assim por diante. vemos um debate sobre a existência ou não de limites
Apesar de ainda ser comum no mercado, entendo que para a criação de sites seguindo os padrões. Você
exigir que um mesmo profissional crie e programe em acredita que um dos grandes obstáculos para a sua
uma linguagem de desenvolvimento não é recomendável, disseminação seja o mito dos limites criativos que ele
supostamente traria para os designers?
Bechara :: Essa é uma pergunta que há anos me
fazem, mas como os padrões web ainda não estão po-
pularizados, esta pergunta ainda é muito pertinente.
Infelizmente, somente pensa desta forma quem nunca
teve o menor contato com os padrões web. Quem já
visitou o famoso e popular “css ZenGarden” (www.csszen-
garden.com), ou mesmo já tenha navegado por galerias
de sites em CSS como, por exemplo, o “CSS Mania” (www.
cssmania.com) ou o “CSS Beauty” (www.cssbeauty.com),
já teve a oportunidade e a certeza de que a adoção dos
entrevista - padrões web :: 25

“Recente estudo divulgado a principal ferramenta para o seu desenvolvimento. Em


relação ao uso dos padrões web, quando e como de-
pela ONU revela que apenas vemos procurar desenvolver um site em Flash?
Bechara :: O Flash é uma tecnologia fantástica e até
3% dos sites são acessíveis”
então imbatível em sua categoria. O problema é que, em
padrões web é inevitável. É a forma correta para o de- muitas vezes, faz-se uso do Flash onde não é recomendado.
senvolvimento de um projeto web e permite uma maior Quando devemos usá-lo? Acho praticamente impos-
liberdade de criação aos designers. sível convencermos uma equipe de marketing a trocar, em
Podemos observar diversos sites cujos projetos um hotsite, o Flash pelo XHTML e CSS, considerando as
somente foram possíveis de serem elaborados com as possibilidades de interação do Flash. Alguém já imaginou
técnicas de layouts com CSS. Visitem a categoria de sites aquele hotsite de uma cerveja (www.skolcopa.com.br),
com efeitos especiais (special effects) no “css ZenGarden”. onde uma morena chutava a bola para o gol, durante a
Procurem pelo projeto de nome “Killer Style”, do designer Copa do Mundo de 2006, sendo desenvolvido em XHTML
Scott Kiekbusch. É um layout muito bem sacado, daqueles e CSS no lugar do Flash? Seria um problema sério para o
“por que não pensei em fazer isso antes?” e que é marketing. Temos que ser realistas.
impossível de ser produzido se usássemos tabelas para O Flash existe e devemos usá-lo com cautela, sendo utili-
a criação do mesmo efeito visual. Esse é apenas um dos zado para questões bem específicas. Construir, por exemplo,
exemplos para provarmos para quem ainda tem dúvidas em sites corporativos em Flash é, em minha opinião, altamente de-
adotar os padrões web em seu próximo projeto. saconselhável. Uma questão que é muito importante no Flash
Cabe lembrar que os profissionais que estão iniciando e que devemos discutir é a acessibilidade. Acessibilidade em
agora nesta profissão precisam, desde o seu início, aprender Flash é complexa. Muitas vezes, pela interação na interface,
a forma correta de desenvolver sites, caso contrário, estarão torna-se impossível sua implementação. Portanto, quando for
aprendendo uma forma obsoleta de desenvolvimento. fundamental a utilização do Flash em seu projeto, procure for-
Wd :: Atualmente, observamos a construção de necer uma alternativa acessível.
ambientes digitais que permitem um período de entre- Wd :: Dentre as principais recomendações do W3C,
tenimento para os usuários, sendo que o Flash se tornou quais delas estão sendo efetivamente adotadas pelos

OTIMIZE SUAS AÇÕES DE ENVIO DE E-MAIL.


Monitore seus resultados: saiba quem leu, que horas leu e onde clicou.

GRUPO DB4
“Assim que começamos a usar o Easy Mailing conseguimos despertar nos
clientes do grupo DB4 a importância do e-mail marketing e o resultado que
ele pode gerar se feito de maneira profissional, com documentação, relatórios
e ética. Encontramos nos softwares da Dinamize ferramentas de e-mail
marketing robustas, profissionais e com ótimo custo benefício.” Diogo Boni.

VEJA MAIS DEPOIMENTOS EM NOSSO SITE.

www.easymailing.com.br tel. 55 51 3061.0636


26 :: entrevista - padrões web

“A adoção dos padrões em dispositivos móveis também é uma


questão de cultura e convencimento”
profissionais e agências brasileiras? idéia, apontando, por exemplo, que o tempo de produção,
Bechara :: Quando aplicadas, com certeza as re- seguindo tal metodologia, seria reduzido significativa-
comendações são o (X)HTML e o CSS. A acessibilidade, mente. Diante de sua experiência, qual desses caminhos
infelizmente, também é pouquíssimo adotada, cabendo deve ser adotado pelos profissionais e agências?
muitas vezes a um esforço pessoal do web designer ou do Bechara :: Desenvolver dentro dos padrões web
implementador (client side). Lamentavelmente, algumas é a forma natural e obviamente a forma correta de de-
campanhas podem estar investindo mais em consumo de senvolvermos projetos. Quem desenvolve dentro dos
banda que o necessário, aumentando assim o custo do padrões não pode cobrar um valor maior ou menor
projeto e deixando de lado uma parte do potencial pú- por isso, pois essa é a forma. O valor tem que ser co-
blico-alvo da campanha, não contribuindo para a inclusão brado de forma justa. O reconhecimento por trabalhar
digital e restringindo seu alcance. correto vem por outros caminhos. A satisfação, a reco-
As agências que atendem ao governo têm que se mendação, novos projetos etc. Quem desenvolve fora
capacitar para atender a área governamental, pois para dos padrões é quem está errado e por isso, se o con-
atender a um órgão do governo, as licitações já de- tratante tivesse o conhecimento das vantagens dos
veriam estar exigindo esta implementação, visto que padrões do W3C, nem iria contratá-lo. Na verdade, en-
no dia 03/12/06 esgotou-se o prazo limite dado pelo tretanto, o contratante nem deveria se preocupar com
decreto 5.296 para que os órgãos do governo tenham esses detalhes. Compete ao contratante direcionar
incluído em seus projetos web a acessibilidade, que é seus esforços ao foco de seu negócio e ao designer/
uma das recomendações do W3C e que o governo bra- desenvolvedor servi-lo da forma correta.
sileiro adotou na íntegra. Atualmente, as agências que desenvolvem pro-
Essa exigência, em licitações públicas, abrange qual- jetos segundo os padrões, devido ao número reduzido
quer tecnologia que leva a informação a web, ou seja, de profissionais devidamente capacitados, podem estar
qualquer empresa, de qualquer ramo de atividade que cobrando um valor maior pelos seus projetos em virtude
desenvolve projetos para web, tem, por força da lei, que da escassez deste profissional diferenciado. Com re-
entregar seus projetos acessíveis. Por sua vez, os órgãos lação especificamente a um projeto com acessibilidade,
do governo têm que saber aferir o que está sendo ou o que pelo fato de termos o envolvimento de profissionais com
já foi entregue com essa exigência. A não aferição trará deficiência durante o desenvolvimento/avaliação, natu-
conseqüentemente problemas aos órgãos contratantes, ralmente a quantidade de horas para esse projeto
pois a sociedade cobrará essas funcionalidades. serão maiores e por conseqüência acarretarão
Wd :: No blog FatorW (http://tinyurl.com/ydquku), o um acréscimo ao valor do projeto.
especialista Walmar Andrade levantou uma questão inte- Wd :: Nos últimos dois anos, o movimento
ressante, envolvendo o valor de projetos desenvolvidos Web 2.0 recebeu grande atenção por parte da
através dos padrões. Alguns opinaram que a cobrança de- mídia especializada e gerou acalorados de-
veria ser mais cara, pois tal conhecimento garantiria um bates sobre os rumos da web. Diante deste
diferencial na prestação dos serviços; outros rechaçaram a cenário, de que forma as reco-
entrevista - padrões web :: 27

mendações do W3C se encaixam dentro dos “ideais”


propagados pela Web 2.0? Dicas de leitura
Bechara :: Essas questões estão sendo levantadas
pelo W3C no PFWG (Protocols and Formats Working - Beginning CSS: Cascading Style Sheets for Web
Group), ou seja, a adoção de plataformas ricas dentro Design
dos padrões. O termo Web 2.0 não significa nada a Autor: Richard York
mais do que já fizemos até hoje. O fato de estarmos Editora: Wrox
mais preocupados com os usuários, chamando-os
- Building Accessible Websites
para nossas aplicações ou usando tecnologias mais
Autor: Joe Clark
modernas não deveria ter número de versão. Diga-se de
Editora: New Riders Press
passagem, não vejo absolutamente nada de mirabolante
na chamada Web 2.0. Se analisarmos a usabilidade e a - CSS Mastery: Advanced Web Standards Solu-
adoção da melhor tecnologia para o projeto contratado, tions
encontraremos, na verdade, uma Web 0.2. Nem chegamos Autores: Andy Budd, Cameron Moll e Simon
ainda a Web 1.0. Ainda temos muito para evoluir, mas isso Collison
é assunto longo. A Web 2.0 só está servindo hoje como Editora: APress
marketing e muitos se aproveitam disso.
Wd :: Em breve, a Microsoft vai lançar no mercado - Designing with Web Standards (2ª edição)

a versão 7 do Internet Explorer (IE). Dentre as novi- Autor: Jeffrey Zeldman

dades, a empresa promete melhorar a interpretação Editora: New Riders Press

do CSS em seu navegador (http://tinyurl.com/9wev8).


- Web Standards Solutions: The Markup and
Você acredita que a nova versão vai ajudar na dissemi-
Style Handbook
nação dos padrões web?
Autor: Dan Caderholm
Bechara :: Com o lançamento do IE 7, a Microsoft
Editora: friends of ED
tenta dar uma virada na direção da utilização dos pa-
Fonte: Professor Bechara
drões, visto que estava perdendo terreno para o seu
maior rival, o Firefox. Acreditamos que a Microsoft tenha
percebido o poder do usuário e está procurando atendê-
lo da melhor forma possível.
28 :: entrevista - padrões web

O IE 7 é uma prova deste comprometimento, com


“Um bom profissional é aquele
uma evolução em relação à versão 6. Gostaríamos de ver
o IE concorrendo lado-a-lado com o Firefox, pois desta que conhece o conceito, a
forma todos nós estaríamos ganhando, mas isso ainda vai
teoria, os fundamentos”
demorar. Esperamos também que a Microsoft não leve
tanto tempo para lançar o IE 8, como levou para lançar o IE que toda a equipe envolvida (técnicos e conteudistas) na
7. Parece-me que o tempo de testes/avaliação foi pouco e construção e na manutenção de um site dinâmico dentro
algumas questões de incompatibilidade estão começando dos padrões seja treinada.
a aparecer. Não acredito que, pelo fato de o IE 7 ter sido Wd :: A rápida expansão das tecnologias móveis
lançado, teremos um incremento na disseminação dos pa- promete abrir um novo mercado para quem trabalha
drões web, mas conseqüentemente os desenvolvedores com a criação e o desenvolvimento para mídias in-
estarão mais bem servidos. Agora é ver a fatia de mercado terativas. Além disso, o W3C criou o “Mobile Web
que o IE 7 irá assumir, para termos uma previsão de utili- Best Practices 1.0” (http://tinyurl.com/r2rcl), no qual
zação de técnicas já possíveis para os dois navegadores. aponta as melhores práticas para desenvolvimento
Wd :: Cada vez mais os sites são desenvolvidos de web voltado para dispositivos móveis. Podemos
maneira dinâmica, exigindo uma atualização constante afirmar que o uso de padrões nestes ambientes será
por parte de quem administra tal ambiente. Diante mais facilmente adotado?
deste dinamismo, existe algum tipo de recomendação Bechara :: Assim como a adoção dos padrões em sites
quanto ao período para que o site seja revisado em web, a adoção destes padrões em dispositivos móveis
relação à conformidade com os padrões web? também é uma questão de cultura e convencimento.
Bechara :: A conformidade com os padrões web Como esta área é tradicionalmente mais nova que o
em projetos, dinâmicos ou não, se faz em todos os desenvolvimento de sites e com profissionais, a princípio
momentos. Um site dinâmico é mais complexo, pois mais antenados em tecnologia, acredito que seja mais
depende de mais cuidados em todas as etapas de inclusão fácil sua implementação. Mas, depende de um trabalho de
de conteúdo. É de fundamental importância convencimento e conscientização do profissional.
30 :: gestalt
gestalt :: 31

“Gestalt é a gramática subliminar da Influências na percepção visual


Antes de abordarmos os aspectos que envolvem as
alfabetização visual” (Luli Radfahrer)
leis da Gestalt, é preciso entender quais fatores influen-
ciam na percepção visual da forma em um projeto gráfico.
Você acorda, abre a janela de seu quarto e se depa-
“As influências são diversas e dependem do tipo e da
raccom o dia amanhecendo. De imediato, avista um
natureza do projeto gráfico e da natureza, tipo e intenção
grande plano pintado de cores azuis, contrastando com
da mensagem. No entanto, aqui vão alguns parâmetros
vários blocos de nuvens brancas, que mais parecem gran-
básicos: adequado posicionamento dos elementos visuais
des e apetitosos algodões-doces. Cachorro, borboleta,
no gride da diagramação (texto, imagens, vinhetas, cai-
rinoceronte e girafa. Isso porque, depois da percepção
xas, blocos etc.) no espaço compositivo; adequado con-
do todo, você mira sua visão nas nuvens e começa a defi-
traste de cores (ou das nuanças e tons do preto e branco)
nir em sua mente quais representações aqueles objetos
entre os objetos da diagramação; adequação das famí-
podem formar no céu.
lias tipográficas: tipo, tamanho, cor; aspectos relativos
A passagem acima serve como um bom exemplo da
à legibilidade, acuidade visual (ergonomia), e assim por
maneira como funciona a nossa percepção visual, além de
diante”, diz o professor João Gomes Filho.
demonstrar a importância de se trabalhar os detalhes de um
Como exemplo prático deste cenário, Luli exercita
projeto gráfico para que a transmissão da informação não
nossa imaginação, citando o exato momento no qual
seja prejudicada. Mas onde encontrar embasamento concei-
entramos em um restaurante. “Sabe aquela impressão
tual para alcançarmos tal objetivo? Segundo o livro “Gestalt
de ‘sujo’, ‘opressivo’, ‘suspeito’ ou ‘descolado’ que você
do Objeto”, do professor João Gomes Filho, os estudos e as
tem, mas é incapaz de definir o porquê? Pois é exata-
experiências realizadas pela Escola Gestalt, no campo da Psi-
mente essa ‘impressão’ que um usuário tem de uma
cologia Perceptual da Forma, são um bom caminho para se
página. Ele não dá a mínima para cores ou acabamento,
construir e justificar as bases de qualquer projeto.
mas fica com uma primeira impressão que é muito difí-
“Gestalt é tudo. Ela é a gramática subliminar da alfa-
cil de mudar. Por isso que arquitetos e designers são
betização visual. Ao se compreender e praticar seus princí-
tão obcecados por detalhes: eles são treinados para ver
pios, o designer passa a entender de forma abrangente e
e analisar aquelas partes que, quando somadas, dão um
completa como funciona a percepção no cérebro humano,
resultado muito maior que cada componente individual”.
e, conseqüentemente, no de seu usuário. Não faz o menor
Além disso, não podemos esquecer que o desig-
sentido ser expert em Flash, ActionScript, CSS e usabili-
ner do século XXI trabalha com ambientes simulados, o
dade enquanto se é analfabeto em visualização. Quando
que certamente traz uma série de questionamentos se
isso acontece (e isso acontece quase sempre, o contrário
formos comparar com a maneira como interpretamos
é que é raro) o que se tem é um website cheio de tru-
um objeto dentro de um espaço físico. “Basicamente,
ques que piscam e pulam, mas que deixa uma impressão
muda tudo: o suporte, o brilho, a posição da página, o
geral de algo mal-acabado, técnico, feio etc.”, afirma Luli
ambiente... Como se não bastasse, o objeto gráfico é
Radfahrer, professor-doutor da ECA-USP.
estático, enquanto o interativo é uma máquina funcional,
“Um projeto gráfico pode provocar todos os cinco
que demanda certos comandos para dar as respostas cer-
sentidos. A teoria da Gestalt apresenta hipóteses sobre
tas. Livros têm uma usabilidade pré-determinada e imu-
as manifestações da forma em diversos meios de mani-
tável. Quando criança, você aprende a virar as páginas
festação sensorial. No que diz respeito às artes visuais,
e segurá-lo pelas bordas. Até o fim da vida, essa relação
podemos apontar princípios básicos imprescindíveis: pro-
não muda. Compare isso com um game ou celular, por
ximidade, semelhança, pregnância, continuidade, fecha-
exemplo”, argumenta Luli.
mento, agrupamento, experiência...”, completa Lucas
Para Lucas Hirata, a grande diferença está na provo-
Hirata, designer da Globo.com. A seguir, confira como
cação que cada um dos ambientes (físico e virtual) causa
esse campo do conhecimento pode ajudar no trabalho de
em nossos sentidos. “Projetos digitais podem provocar
criação e desenvolvimento de sites.
32 :: gestalt

“O designer deve se preocupar com a


relevância das partes e como a composição
irá afetar o cérebro do receptor”
(Lucas Hirata)

nossos olhos e ouvidos de maneira realmente impactante. de um usuário. Experimente olhar para a sua mão e para
Projetos impressos podem também ser comidos, cheira- a parede atrás dela e o mundo real se torna muito menos
dos e manipulados. O chocolate ‘SURPRESA’, da Nestlé, é estático do que parece”, diz Luli Radfahrer.
um exemplo clássico. Como a percepção visual está dire- Sobre esta questão, José Ricardo Cereja, coorde-
tamente ligada à vivência de cada um de nós, todas as nador pedagógico da graduação em Design Gráfico do
nossas experiências sensoriais (táteis, olfativas, visuais, Instituto Infnet e professor de Computação Gráfica da
auditivas e gustativas) modificam a maneira como vemos PUC-Rio, ressalta que, em ambientes interativos, a dinâ-
e interpretamos as imagens. Para os nossos olhos, as dife- mica visual estabelece uma relação “tempo versus per-
renças dos sistemas de cores provocam percepções dife- cepção” que influencia na apreensão das imagens. “Isto
rentes nos dois universos. No mundo digital, as cores são é, o tempo de observação que o usuário dedica a uma
luzes emanadas de dispositivos eletrônicos. Em impres- interface pode ser controlado tanto pelo designer que a
sos, as cores são resultados das diversas luzes refletidas projetou, através da composição de elementos e arqui-
no ambiente onde o produto se encontra”, analisa. tetura de navegação, quanto pela velocidade com que a
O que se vê não é o que se percebe? ação do usuário é realizada. Temos ainda as ações moto-
No livro “Gestalt do Objeto”, o professor João ras controlando o tempo de ação e fazendo mudar todo
Gomes Filho aponta que um dos princípios básicos da o aparato visual em segundos. Isto vai influenciar dire-
Gestalt diz que o fenômeno da percepção que acontece tamente a disposição das imagens, fundos, animações,
no cérebro não é idêntico ao que ocorre na retina. Dessa inclusive, no ambiente interativo”.
forma, nossa primeira sensação seria global e unificada, Diante disso, um dos principais desafios é trabalhar
ou seja, não vemos partes isoladas, mas sensações. “A o princípio “figura-fundo” na internet, que se caracteriza
definição é precisa e corretíssima: o que se vê não é o pelo dinamismo e pela interatividade. “O designer deve
que se percebe. Da mesma forma que no exemplo do se preocupar com a relevância das partes e como a com-
restaurante ‘vagabundo’ não é um elemento isolado que posição irá afetar o cérebro do receptor que ele almeja
traz o conceito, mas seu conjunto. É por isso que certas atingir. O importante é ter o bom senso para distinguir
combinações de cores ou roupas que caem muito bem em o que será figura e o que será fundo para cada receptor.
certas pessoas são um horror em outras. A velha história Cores e formas, por exemplo, podem ter significados dife-
do ‘estilo’ contra a pura e simples falta de noção. No pri- rentes para as pessoas. Cabe ao designer construir uma
meiro caso, se acerta sempre. No último, cedo ou tarde linguagem visual capaz de comunicar objetiva e precisa-
a festa acaba. A figura e o fundo se alternam na mente mente seu conteúdo”, explica Lucas Hirata.
gestalt :: 33

Como trabalhar a organização visual? e não apresentam diferenciais. O caminho é desenvolver


Quando analisamos a organização visual de um pro- interfaces com capacidade de pregnância rápida, mas que
jeto, certamente aplicaremos outra lei da Gestalt: a preg- consigam ao mesmo tempo um grau particular de criativi-
nância da forma, cujo significado passa pela maneira como dade”, reforça Lucas.
trabalhamos a organização visual da forma de um objeto. “O cérebro é uma máquina fascinante. Ele se entedia
“Em primeiro lugar, quero dizer que pregnância está quando uma organização é tediosa ou previsível, se inte-
longe de significar excesso ou repetição! Uma boa preg- ressa por estruturas estimulantes que dão acesso a regras
nância em um site significa associar os diversos elemen- desconhecidas e se irrita profundamente com o caos. As
tos que compõem uma página a padrões que os identifi- características básicas da boa pregnância são pratica-
quem mutuamente (cor que lhes dê identidade, padrões mente as mesmas de uma pessoa interessante: o inusi-
de formas e acabamento das mesmas, tipos e resolução tado, diferente da pasmaceira do normal, mas, acima de
semelhante das imagens, uso restrito de famílias de fon- tudo, coerente. Considere as pessoas que você conhece:
tes etc.)”, orienta Cereja. é preferível conversar com um artista que com um buro-
Nesta discussão, o professor cita a relação entre a crata. No entanto, essa preferência só se manterá se o
navegação entre páginas e a fixação da imagem na memó- artista for coerente e consistente em seus argumentos,
ria. “Ou seja, ao passar de uma página para a outra em não um psicopata metido à prima-dona”, acrescenta Luli.
um site, fica um registro do que se viu antes, na memó- Além da pregnância, dois conceitos são considera-
ria, mas por um curto período de tempo, já que as novas dos elementares para se atingir a plenitude em termos de
informações visuais substituirão as primeiras. Portanto, o organização visual: proximidade e semelhança. “Uma vez
que vai garantir que o usuário sinta e perceba o mesmo que a proximidade significa perceber objetos próximos
ambiente serão estes padrões determinados pela uni- como grupos independentes (nosso sistema óptico tende
dade visual entre os elementos. Podemos citar o Portal da a agrupar visualmente elementos próximos) e que a seme-
Petrobras (www.petrobras.com.br) como um bom exemplo lhança trata destes agrupamentos a partir de objetos de
no uso deste conceito”. formas similares, então se pode dizer que, ao desenvol-
Dessa forma, na busca pela pregnância, o segredo ver um site, é possível definir os elementos que guardam
é combinar a coerência no uso dos elementos com uma entre si formas semelhantes e que podem ser agrupados,
pitada de criatividade. “Cores e formas simples são mais próximos uns aos outros, a fim de formarem um conjunto
facilmente identificadas e armazenadas pelo cérebro bem distribuído de informações”, relata Cereja.
humano. Mas, em contrapartida, não provocam impacto Na prática, diz Luli, lembre-se sempre como trabalha-
34 :: gestalt

mos estes conhecimentos no mundo físico. “Em um super- texto, barras de rolagem intermináveis, mistura de cores,
mercado, os sacos de arroz ficam juntos. Em uma festa, áreas claras em contraste direto com áreas escuras, cores
namorados ficam juntos. Coisas de categorias próximas pastéis em excesso, animações piscantes e frenéticas cau-
devem se agrupar ou darão ao usuário um desconforto, que sam uma verdadeira esquizofrenia visual, expulsando o
tende a crescer quanto maior for à distância”, exemplifica. usuário daquele lugar virtual”.
Na busca pela fluidez visual Além disso, traçar previamente o perfil do público-
Atingir uma fluidez visual é considerado um dos prin- alvo pode ser um bom atalho para garantir a continui-
cipais desafios na criação de uma interface digital. Para dade da leitura visual dentro de um site. “A continuidade
isso, vamos recorrer a mais uma das leis da Gestalt, que depende muito da experiência de vida do usuário. Pode-
fala sobre continuidade. No livro “Gestalt do Objeto”, mos dizer que a interpretação de imagens está tão ligada
ficamos sabendo que uma boa continuidade “é a impres- ao histórico de vida do mesmo, quanto às suas habilida-
são visual de como as partes se sucedem através da orga- des visuais. O conhecimento prévio do perfil do usuário
nização perceptiva da forma de modo coerente, sem quebras predominante é um caminho para o desenvolvimento coe-
ou interrupções na sua trajetória ou na sua fluidez visual”. rente de um site. Lógico que é humanamente impossível
Então, a pergunta que fica é: como trabalhar este uma definição 100% precisa. Mas testes de usabilidade e
conceito na web? “A fluidez se consegue com a transmis- grupos focais são caminhos seguros para nortear grandes
são simples e direta da informação. O que implica tam- projetos”, ressalta Lucas.
bém na simplicidade e objetividade na composição dos Evitando os erros mais comuns
elementos visuais, sejam imagens, desenhos, fotos ou ani- Nada melhor do que aprender com os erros para
mações. A continuidade em um site se dá a partir da pri- aperfeiçoar a prática. Levando em consideração as leis da
meira apresentação ao usuário de padrões que atendam Gestalt, a primeira falha observada na criação e no desen-
confortavelmente a sua percepção visual”, orienta Cereja. volvimento de um site envolve o descaso pelas experiên-
Ou seja, o professor recomenda que sejam evitados cias passadas. “Elas auxiliam a navegação em sites. Nor-
vários elementos em uma mesma interface. “Excesso de malmente, os usuários reproduzem padrões de comporta-
gestalt :: 35

mento em sites diferentes”, aponta Lucas.


Outro aspecto a ser considerado está na construção Análise acadêmica da Gestalt
da unidade de um projeto. “Todos se resumem a um só, Bate-papo: João de Souza Leite, professor da
quando se conhece bem a Gestalt: o agrupamento de ESDI e da PUC-Rio
partes sem levar em consideração o todo. Isso leva a uma Como aplicar conceitos formulados sob o
confusão visual sem unidade, que permite ao olho trei- prisma do século XX em mundo marcado atualmente
nado a identificação imediata de um trabalho profissional pelas transformações tecnológicas? Nesta entre-
de um amador, por melhor que seja o último. Clientes não vista, o professor João Leite analisa os principais
têm esse olho treinado, por isso tendem a valorizar idioti- aspectos conceituais envolvendo a utilização das leis
ces como o preço e depois quebrar a cara. De que adianta da Gestalt no design para web. Boa leitura!
comprar um vinho mais barato só para descobrir que sua Wd :: O que devemos considerar na hora de
qualidade é um lixo?”, questiona Luli. trabalhar a percepção visual da forma em um pro-
jeto gráfico?
“A fluidez visual se consegue com Leite :: No mundo contemporâneo, as caracte-
rísticas do sujeito se afastaram de uma concepção onde
a transmissão simples e direta da
a estabilidade do ponto de visão ou de ação desempe-
informação” (José Cereja) nhava papel central. Por outro lado, suas características
passaram a se confundir, circunstancialmente, com as
Segundo o professor Cereja, vamos encontrar expli- características do objeto.
cação para a perpetuação deste tipo de erro, através de Ao utilizar essa oposição clássica da filosofia
uma única palavra: excesso. “Excesso de imagens, excesso entre sujeito e objeto, o que quero dizer é que o
de fontes, excesso de animações, excesso de cores e, ulti- observador deixou de ser concebido como um ser
mamente, excesso de áudio. Há um desequilíbrio na apli- estável, sempre em razoável contraste com o objeto
cação das leis da Gestalt. Principalmente porque é muito da sua observação. Assim, pode-se afirmar não ser
difícil, mas não impossível, contemplar todas. A questão mais possível determinar regras gerais capazes de
é o quanto o designer consegue negociar com seu pró- resolver este tipo de questão em um modo absoluto.
prio conhecimento, ou seja, o quanto está disposto a Os fatores são vários, diferentes em suas categorias
aplicar um pouco de cada lei da Gestalt a fim de simpli- e existem sempre em relação ao contexto em que
ficar o resultado. Em geral, os designers tendem a ver no se dá a exposição do projeto, em que se dá a comu-
ambiente virtual a oportunidade de exercitar livremente nicação. Laços da cultura interferem no processo
toda a sua habilidade estética e tecnológica e aí jogam assim como laços de afeto, estes então, promovidos
toda a sorte de elementos visuais dentro da página”. pelas lógicas as mais diversas.
Assim, para evitar que tal prática continue aconte- Para enumerá-los, deveríamos iniciar pelos cri-
cendo, o especialista afirma que o investimento em pla- térios mais básicos, ou seja, aqueles que permitem
nejamento vai ajudar a garantir o sucesso de um site. “Em que a forma adquira certo destaque do contexto.
geral, os erros estão aí, no início do processo. Planeja-se Em seguida, devemos nos perguntar a respeito das
mal ou quase nunca se planeja e o resultado vai sendo um possibilidades de leitura por parte daqueles a quem
acúmulo de erros. É importante planejar. Nesta fase, se nos dirigimos. Em que medida sou capaz de ler uma
pode então considerar todas as leis da Gestalt e observar imagem de modo diferente de um outro ser? O
a melhor forma de compor elementos, organizar a infor- que condiciona o meu aparato de leitura (entenda-
mação, que tecnologia utilizar, quais as necessidades de se, também, leitura de imagens) e observação, que
comunicação etc.”. é diferente de um indivíduo pertencente a outro
grupo social e cultural?
36 :: gestalt

Wd :: A teoria da Gestalt trabalha muito em cima se estabelecem segundo os instrumentos


dos conceitos de objeto e de forma. Quando trazemos de que dispomos, e quais são eles? Valores
esta realidade para a internet, como definir os termos tipográficos, valores cromáticos, disposição e
“forma” e “objeto” dentro do design para web? ordenamento.
Leite :: Na medida em que tendemos, nós os humanos, No cenário da internet, nos defrontamos com uma
a relacionar os objetos segundo algum tipo de padrão, esta infinidade de problemas de comunicação, justamente em
atitude pode ser definida como uma busca pela forma, ou função da proliferação dos públicos e das intenções. Para
como vontade de forma. Penso, sem o propósito de esta- todos os efeitos, não existem regras absolutas, torno a
belecer definições absolutas, já que me baseio sobretudo dizer. Digamos, um site de compras difere radicalmente de
em minha própria experiência de observador e fazedor de um site educativo, ou ainda, de um site com fins de uma
coisas, que deveríamos buscar nosso entendimento a res- determinada agregação social. E cada tipo demanda solu-
peito da palavra estrutura, qualquer tipo de estrutura em ções adequadas e específicas. Mas seria possível afirmar,
um determinado campo. E quando digo qualquer, quero me com toda certeza, que a habilidade da boa e adequada
referir exatamente a esta qualidade por vezes indecifrável construção de um site passa pela capacidade de conferir
de certas estruturas - certos modos de organização que não valores de forma a diferentes categorias de informação.
se oferecem claramente à nossa percepção, mas que nem Wd :: Quais características marcam a percepção
por isso deixam de ser estruturas. visual quando analisamos a oposição entre o objeto físico
Pois bem, nesse sentido, lidamos constantemente com impresso e o espaço virtual gerado pelo ambiente digital?
objetos agrupados segundo determinados padrões, pode- Leite :: Um objeto impresso é manipulável fisicamente,
mos pensar em unidades e modos de relação entre essas e possui uma concretude em princípio imutável, enquanto
unidades. Ou seja, lidamos com elementos visuais, sejam o projeto digital estabelece outro tipo de relação com o
imagens ou letras, e suas relações de semelhança e apro- observador, que se define como transformador do próprio
ximação, oposição e ruptura, estabelecidas no design. Na projeto. No primeiro, revelam-se dimensões como o tempo
medida em que o reconhecimento dessas unidades e das e o tato, na medida em que a manipulação do objeto per-
suas relações se torna mais consciente, mais objetivamente mite idas e vindas sob total controle do observador. Já no
lidamos com a forma. segundo, digo, no espaço virtual, é possível explodir nossa
Wd :: Falando em organização visual, dois conceitos concepção euclideana de espaço. Dimensões que não se
podem ajudar a trabalhar esta questão: proximidade e expressam pela simulação da realidade através da perspec-
semelhança. De que forma estes conceitos devem ser tra- tiva, mas sim em uma simultaneidade de planos, oferecem
balhados em um site? novos problemas à percepção.
Leite :: Na verdade, tenho minhas dúvidas se o con- Mas a diferença que mais salta aos olhos é a capaci-
ceito de proximidade deva ser tomado em termos de distri- dade de nós, como observadores, estarmos constante-
buição no espaço. Se for possível considerar que o espaço mente alterando o objeto digital. No espaço virtual da rede,
da vida anseia pela ordem, isto implica na percepção da estabelecemos caminhos e ligações quase em uma medida
diferença e da semelhança como conceitos básicos. Se, para pessoal, já que os trajetos percorridos não são necessaria-
o homem comum interessa a ordem, e esta pode lhe facili- mente iguais para todos. Portanto, no projeto digital nos
tar a vida, então é possível entender a idéia de organização defrontamos com um receptor da informação que é clara-
visual através desses dois conceitos. Entenderemos ordem mente um agente ativo neste processo de comunicação.
visual no sentido em que as características formais dos mais
variados elementos sejam organizadas segundo categorias
relativamente reconhecíveis.
O conhecimento, esta velha questão filosófica, se dá
na medida em que conseguimos agrupar diferentes coisas,
segundo determinados aspectos ordenadores que, por fim,
dão forma a categorias. Estas categorias visuais, portanto,
gestalt :: 37

Biblioteca da Gestalt

- Arte e Percepção Visual


Autor: Rudolf Arnhein
Editora: Pioneira

- Como a mente funciona


Autor: Steve Pinker
Editora: Cia. das Letras

- Forma e percepção estética


Autor: Mário Pedrosa
Editora: EdUSP

- Gestalt do Objeto
Autor: João Gomes Filho
Editora: Escrituras

- Making and Breaking the Grid


Autor: Timothy Samara
Editora: Rockport Publishers

- Modos de ver
Autor: John Berger
Editora: Rocco

- O instinto da Linguagem
Autor: Steve Pinker
Editora: Martins Fontes

- O poder do centro
Autor: Rudolf Arnheim
Editora: Edições 70

- Sintaxe da Linguagem Visual


Autor: Donis Dondis
Editora: Martins Fontes

- Visual and attention


Autores: Lawrence Harris e Michale Jenkin
Editora: Universidade de Toronto

Fontes: João Leite,


José Cereja e Lucas Hirata
38 :: debate - ultrapasse os limites

ULTRAPASSE OS LIMITES,
DANDO ASAS À IMAGINAÇÃO
Baixa capacidade de acesso à internet no país, clientes sem conhecimento prévio sobre o

meio, prazos apertados. Se você for fazer uma enquete entre os profissionais sobre os limites que

envolvem os processos criativos na web, estas serão algumas das alegações mais comuns.

O tema sempre foi polêmico. Em 2001, na última edição do Design de Bolso (http://

tinyurl.com/yltjmc), finado e histórico fanzine criado pela dupla Elesbão e Haroldinho, existiam

as seguintes provocações: “As limitações são da rede ou do designer? O problema está na

velocidade de conexão ou na capacidade de criação?”.

Tempos depois, a Revista Webdesign decidiu retomar este debate para descobrir quais

seriam atualmente as principais limitações no design para web e as formas para

vencer esses desafios. Confira a seguir.


debate - ultrapasse os limites :: 39

:: Marcelo Mariano
Diretor de Arte da AgênciaClick
www.marcelomariano.com

“A principal limitação está na dispa-


ridade entre os recursos existentes e as
verdadeiras condições do usuário brasileiro.
O conflito entre o potencial tecnológico e ar-
tístico versus a diversidade de resoluções de tela,
velocidade de conexões, versões de plug-in e capacidade
de processamento das máquinas acabam influenciando di-
retamente no processo criativo.
O designer tem seu trabalho reduzido a determinadas
regras, que geralmente se baseiam na menor resolução, na “A principal limitação está na
pior conexão e assim por diante, privando o restante dos disparidade entre os recursos
usuários de uma experiência mais rica e atraente.
existentes e as verdadeiras
Talvez por isso, no mercado brasileiro, com algumas
exceções, é comum dispensar do processo criativo uma condições do usuário brasileiro”
produção fotográfica de qualidade ou investimentos
específicos em produção de áudio e vídeo. O designer,
muitas vezes, precisa trabalhar com o pouco material que
dispõe, que, na maioria dos casos, são provenientes de
outro tipo de mídia ou de pouca qualidade, obtido através
da própria internet.
Acredito, entretanto, que esses fatores, apesar de
imporem limites, fazem do design para web uma busca
constante pela superação criativa, tornando este processo
cada dia mais interessante.”
40 :: debate - ultrapasse os limites

“Assim como em suas demais modalidades, na web o


design tem dois limitadores principais: fatores técnicos e com-
:: Dado Queiroz
Designer gráfico e sócio-fundador do estudioCrop
portamentais. Tecnicamente, quesitos como largura de banda
www.estudiocrop.com.br e resolução de tela são fortes inimigos da liberdade formal
e de conteúdo. O LCD, a princípio, piora a situação, pois a
maioria dos modelos atuais tem dot pitches (a grosso modo,
o tamanho do pixel) superiores aos dos monitores CRT. Assim,
“Cada profissional deve tentar menos pixels cabem na tela, e mais “serrilhadas” ficam as ima-
alinhar seu comportamento ao de gens e os textos. Já a largura de banda foi um limitador mais
crítico no passado, mas ainda faz com que ferramentas como
seu cliente, visando mais liberdade
vídeos e animações sejam escolhas arriscadas.
para realizar seu potencial” Felizmente, estas questões são constantes e signifi-
cativamente melhoradas - ao contrário dos fatores com-
portamentais, dos quais não se pode dizer o mesmo. O
desconhecimento e a insegurança do cliente, somados à
impaciência e fragilidade financeira do profissional, cos-
tumam gerar catástrofes criativas.
Se a autoridade do cliente passa da conta, sua inseguran-
ça transparece no projeto, através do medo da transgressão e
da busca pelo refúgio daquilo que é conhecido e aceito. Isso
leva ao desgosto do profissional que, por outro lado, muitas
vezes não tem paciência, coragem ou mesmo força de vontade
para defender racionalmente sua visão.
Ao contrário das limitações técnicas, as comporta-
mentais são muito improváveis de se modificar sistemati-
camente. Cabe então a cada profissional tentar alinhar seu
comportamento ao de seu cliente, visando mais liberdade
para realizar seu potencial.”
debate - ultrapasse os limites :: 41

sky is the limit” (O céu é o limite). Daí, você chega no céu


e cai sem o pára-quedas, porque alguém não no alto posto
:: Adhemas Batista da empresa não aprova, ou porque o céu estava meio
Designer Director na Hello Design
www.adhemas.com
escuro, chuvoso e não dá para implementar a idéia no
prazo necessário. Mas é bom enfatizar, são casos e casos,
“Para quem vivenciou o início da internet, tivemos não dá para colocar como uma limitação generalizada.
muitas limitações para se criar um website: as ferramentas Tirando os casos à parte, estou cada vez mais feliz de
eram pobres, a leitura dos browsers era muito simples e trabalhar com design para websites. Vejo clientes com a
confusa, cada um fazia a sua maneira, os programas de mente mais aberta, engajada e querendo ter uma imagem
edição de HTML não se entendiam e as linguagens de melhor na rede, explorando mais as possibilidades e
programação não eram muito felizes nas soluções para tentando buscar ou manter-se na liderança. É um ciclo bom
integrar interface visual com as funcionalidades. que traz o céu mais para perto da gente e deixa os limites
Não podemos esquecer também as limitações que menores, arriscando em novas possibilidades. Muitos
fazem parte do ofício, mas que variam, por exemplo, deles querem ter um alcance internacional, coisa que não
de cliente para cliente: um tem material, outro não tem; se via há pouco tempo, querem que a divulgação seja em
um possui orçamento apertado ou não tem verba. Já nível internacional e assim estão de verdade explorando
aconteceram muitas vezes de clientes pedirem para fazer o real potencial da internet, que é reduzir as distâncias e
um tipo de trabalho explorando as melhores possibilidades facilitar a vida das pessoas e empresas.”
da web. Foram horas pensando, muitas outras trabalhadas,
muitas xícaras de café e, no final, o que era uma para ser
uma casa com suítes, sala de jantar, sala de estar, garagem
e playground, virou a casinha do cachorro e sem o cachorro
dentro, só faltou colocar a plaquinha, cuidado com o
cachorro raivoso!
Acho que todos nessa indústria já passaram por
isso. Acredito até que não é só
para a web, todas as mídias têm
esse problema no dia-a-dia. Nos
Estados Unidos, o pessoal tem
uma expressão fantástica: “The

“Não acredito em obstáculos para


se ter um site de qualidade e com
alcance internacional”
42 :: debate - ultrapasse os limites

“Um fator que limita e veta algumas boas idéias é o pra-


zo. Muitas vezes, o projeto chega na produtora com um prazo
:: Ludmilla Rossi relativamente curto para ser desenvolvido e as idéias têm que
Diretora geral da Mkt Virtual
www.mktvirtual.com.br
ser adequadas para esse tempo. Assim, acontece de deixar-
mos de executar algumas coisas por causa de um cronograma
a seguir. A melhor saída, neste caso, é negociar com o cliente
para ver se existe alguma flexibilidade. Quando não existe,
guardamos as idéias mais mirabolantes na gaveta. Além dis-
“Limitações são desafios e a so, quando a criação envolve idéias que necessitem de verba
extra, e o cliente não dispõe dessa verba, a idéia também é
vontade de superá-los pode
descartada ou adaptada.
resultar em design inovador” Outro caso é quando temos a idéia, mas quando ela está
prestes a ser executada, detectamos que ela não é viável por
causa do peso, ou mesmo pelo fator-risco de desenvolvê-la.
Porém, acredito que com a evolução da tecnologia de desen-
volvimento, algumas limitações acabem diminuindo, e como
conseqüência os usuários estarão cada vez mais abertos para
vivenciar uma experiência diferenciada nos sites que nosso
mercado desenvolve.
O público-alvo também pode brecar algumas idéias que a
princípio parecem boas. Em casos mais raros, o próprio clien-
te pode ser uma limitação também. Clientes que não estão
abertos a novas idéias, que contratam desenvolvedores de
qualidade, mas não sabem ouvi-los, podem barrar ou frustrar
criações que poderiam ser bem sucedidas, mas que acabam
nem saindo do papel de rascunho.
O grande lance é pegar um trabalho com todos esses
fatores críticos, desenvolver conceitos bacanas e ainda
deixar o cliente contente com os resultados. Limita-
ções são desafios e a vontade de superá-los pode
resultar em design inovador.”
debate - ultrapasse os limites :: 43

:: Thadeu Morgado
Designer do 8P.com.br no Núcleo de Aplicativos da Globo.com
www.thadeumorgado.com

“ A s b a r re i r a s n o p ro c e s s o c r i a t i v o d i m i n u e m à m e d i d a q u e o
“Estamos deixando para trás aquela fase em que, para nos
envolvimento no projeto aumenta. O trabalho deve começar antes e
intitularmos designers de internet (e suas muitas variáveis), bastava
ir muito além do momento em que o Photoshop é iniciado. O designer
fazer um curso de Dreamweaver, saber um pouco de Flash e sair
deve se envolver em todas as etapas do projeto: é essencial ter um
fazendo páginas por aí.
conhecimento profundo do briefing e dos requerimentos de produto, e,
Hoje, o mercado está acordando para a importância da mídia
a partir daí, estar totalmente envolvido na concepção do site.
internet e o próprio público está exigindo cada vez mais, seja na
As inovações muitas vezes começam ainda na arquitetura, refletindo
facilidade de navegação, objetividade, tecnologia, conteúdo dife-
claramente na hora de criar as interfaces e as soluções gráficas. Deve-
renciado e, sobretudo, emoção, arte e design.
se pensar não na página estática, mas sim no fluxo de navegação do
Com o aperfeiçoamento dos softwares e a disponibilização
usuário pelo site. Entender como o usuário vai utilizar o que está sendo
de bandas cada vez mais largas, estão se tornando mais comuns
proposto é o mais importante ponto no processo de criação.
sites com grandes imagens e filmes interativos que tomam todo o
Outro fator imprescindível é ter um diálogo muito próximo com os
fundo de uma tela. Isso traz um impacto e uma identidade com a
desenvolvedores. Esse canal aberto com a tecnologia abre espaço para
marca muito grandes, lembrando que a pessoa só está lá porque
soluções que, muitas vezes, não são visualizadas. Deve-se não ter medo
ela desejou assim.
de experimentar ao máximo, desenvolver protótipos e testá-los desde o
A interatividade com o público é outro fator que traz a simpli-
início do projeto. Apenas dessa forma é possível interagir com a solução
cidade como ponto chave na navegação. Em tempos onde é comum
criada e ter a idéia da viabilidade (ou não) do design.
se ter uma câmera no bolso, todos querem ter seus 15 minutos de
Limitações sempre irão existir. Por essa razão, manter-se atualizado
fama, disponibilizando fotos e vídeos on-line. Assim, o papel da
com as inovações que surgem a todo o momento e entender o que
internet é tornar isso realidade e da forma mais fácil possível. Sim-
tangencia o nosso trabalho dentro do processo de criação faz com
plicidade é a palavra. Sem deixar a emoção de lado.”
que essas barreiras diminuam consideravelmente. Dessa forma,
soluções simples ou meramente visuais devem ser evitadas,
pois é necessário ter sempre em mente que o usuário
interage com o site, e não apenas olha para ele.”

“Soluções simples ou visuais devem ser evitadas,


pois é necessário ter em mente que o usuário
interage com o site, e não apenas olha para ele”
44 :: debate - ultrapasse os limites

par
gan tici
he pe
prê e
mio
s!

Participação dos assinantes


Quais são os desafios para a criação na internet?

Miriam Paula -
comercial@tecsite.com.br

Os principais desafios para a criação são: manter qualidade e oferecer soluções de nível alto a baixo custo, prazos de entrega
apertadíssimos, desenvolver nos padrões para os diferentes browsers, sem falar na dificuldade de ter seu trabalho reconhecido
e valorizado pelos clientes.
VENC EDORA

vencedor! Adriano de Oliveira


anapolino@gmail.com

Acredito que seja elaborar websites visualmente agradáveis aliado às diversas novas tecnologias de forma que resulte em um
produto bonito, funcional e eficiente.

Cláudia Mucenecki
depcom@adsantamaria.org.br

Creio que os maiores desafios sejam o de identificar o que os usuários de internet buscam em uma navegação. Atingir o
ponto ideal de um layout agradável e usabilidade são questões desafiadoras para um design de interfaces.

Gláucia Roberta
glauciaroberta@gmail.com

O maior desafio é permanecer com um trabalho simples, objetivo, leve, respeitando os princípios de design e mesmo
assim com uma boa dose de criatividade...

Sergio Montes
sergio_montes@ig.com.br

Como em qualquer processo criativo, 1% é inspiração e 99% é transpiração. A conceituação, o briefing, os prazos e as obrigato-
riedades e limitações colocadas por muitos clientes, na maioria das vezes, atrapalham o processo. Assim como o dedo criativo
deles. Muitas das vezes nos obrigam a misturar idéias e conceitos diferentes com cores e tipos que não se relacionam bem e no
final temos que domar aquele “monstro incontrolável” que vira o projeto.

Se você é assinante, participe desta seção pelo site www.arteccom.com.br/webdesign/clube O autor da melhor resposta ganha prêmios.
46 :: e-mais - desbravadores

Desbravadores dos
territórios www ponto com
A máquina do tempo da História do Brasil retorna ao tecer em vários outros setores, inclusive na propaganda
século XVI, mais precisamente na época de expedições on-line. O que é bom! São novas visões, novas cabeças
organizadas pelo governo e por particulares, conhecidas pensando”, afirma André Matarazzo, sócio da Gringo.nu.
como Entradas e Bandeiras, respectivamente. Resumida- “As agências interativas são um tipo de negócio que já
mente, a função dos bandeirantes era capturar escravos fu- nasceu sob o processo de globalização da economia. Nes-
gitivos, buscar povos indígenas para realização de trabalho se novo cenário, é natural que tenhamos programadores
escravo e procurar riquezas minerais. Apesar de cumprirem indianos atuando no mundo todo, designers mexicanos,
uma tarefa cruel, esses homens também colocaram seus diretores de arte brasileiros, gerentes de projetos ingleses,
nomes na história do país como desbravadores de um ter- e por aí vai... Hoje, o conhecimento está aberto a todos, o
ritório até então desconhecido pelos nossos colonizadores, que torna a concorrência global”, complementa Santana
o que possibilitou a abertura de novos negócios. Dardot, diretor de produção da Sapien.
Voltando a Era Digital, o mercado de internet no Brasil O que eles buscam nas agências brasileiras?
presencia uma nova realidade, no qual as agências digitais Certamente, alguns fatores têm contribuído para a
começam a desbravar um segmento ainda pouco explorado abertura do mercado internacional para as agências digitais
comercialmente. Estamos falando do crescimento de pro- do país. Segundo os especialistas, o preço de nossos servi-
jetos interativos internacionais realizados com a marca do ços é extremamente competitivo. “Nós podemos entregar
conhecimento de profissionais brasileiros. ao cliente um serviço de nível internacional com um preço
“Esse boom de outsourcing que existe há anos no abaixo das grandes agências localizadas na Europa e Améri-
setor de TI para a Índia, por exemplo, vai começar a acon- ca do Norte”, diz Tiago Ritter, sócio-diretor da W3Haus.
e-mais - desbravadores :: 47

Além disso, vivemos uma fase de valorização de nos- Oriente Médio pode ser um mercado mais ou menos pro-
sa capacidade criativa. “Somos criativos, nem sempre da missor que a Europa Setentrional, por exemplo, depen-
forma mais óbvia: programadores brasileiros têm passe dendo do serviço a ser oferecido. É importante, nessa fase
valorizado no exterior por buscarem saídas pouco usuais de prospecção de mercados, que abandonemos as noções
para os problemas, não desanimando ante as dificulda- pré-concebidas de que somente determinados mercados
des. É o lado bom do jeitinho brasileiro: o jogo de cintura é que são bons. Às vezes, ótimas oportunidades vêm de
e o gosto pela resolução de problemas”, afirma Gladi- onde menos se espera”, lembra Gladimir.
mir Dutra, gestor executivo da Aldeia - Agência Internet. Para quem duvida da eficácia desta ação, a experi-
“Brasileiro é criativo, faz perguntas, se mete, mobiliza as ência vivida pela W3Haus serve como prova viva. “É bom
pessoas, dá risada, usa bem o humor, faz as coisas com conhecer o terreno em que vai se pisar. Antes de viajar, o
muita paixão. Isso causa uma boa entropia para processos Rodrigo (um dos sócios da agência) fez muita pesquisa e
criativos”, acrescenta André Matarazzo. vários contatos para se inteirar do mercado que iria encon-
Ou seja, adaptação e flexibilidade são diferenciais pro- trar. Nesse aspecto, entendo que não se difere muito de
curados pelo mercado externo. “A nossa maneira em lidar uma iniciativa que se faça no Brasil. A diferença é estar pre-
com diferentes cenários, a forma como nos envolvemos com parado para enfrentar as diferenças culturais desse novo
o que fazemos, a nossa capacidade criativa, a facilidade que mercado”, ressalta Tiago.
temos no contato interpessoal e a mistura cultural (que é Assim, a sugestão é desenvolver um planejamento
uma marca forte da nossa sociedade) nos credencia para com metas a serem atingidas. “Num universo macro, a
interagir com esse ambiente global com uma certa vantagem agência deve buscar o autoconhecimento. Qual é o seu
em relação a outros povos”, analisa Santana Dardot. modelo de negócios? Quais os objetivos e a visão? O plano
Etapas para a expansão de mercado de negócios, o estabelecimento de métricas para o acom-
Deseja expandir seu mercado de atuação para o ex- panhamento dos fatores essenciais do negócio e processos
terior? Então, nada melhor do que ouvir as dicas de quem alinhados aos objetivos da empresa são ferramentas que
já passou por este processo. “A primeira etapa é a seleção podem ser úteis nesse cenário. Depois disso, cabe à agên-
dos mercados de atuação, com base no retorno potencial cia buscar as possíveis oportunidades que melhor aderem
e nas características econômicas e culturais do mesmo. O ao seu modelo de negócios”, afirma Santana.

“Brasileiro é criativo, faz perguntas, mobiliza


as pessoas, usa bem o humor, faz as coisas com
muita paixão” (André Matarazzo)
48 :: e-mais - desbravadores

Definidos estes pontos, lembre-se que a capacitação nanceiros. Embora saibamos que o componente emocional
das equipes vai garantir uma boa realização do processo. sempre fala alto, a decisão deve ser baseada em critérios
“Vale a recomendação de se ter o domínio do inglês e das racionais”, argumenta Gladimir.
terminologias específicas da nossa área. Mais que conhe-
“Vale a recomendação de se ter o domínio
cimento, uma habilidade muito necessária é a percepção
e empatia para percebermos padrões culturais diferentes
do inglês e das terminologias específicas da
dos nossos e nos adaptarmos a eles. Ingleses reagem de nossa área” (Gladimir Dutra)
forma diferente dos portugueses, que reagem diferente Além disso, Tiago, da W3Haus, lembra que é preciso
dos suecos, e por aí vai. Isso vai muito além da linguagem convencer o cliente da seriedade do serviço a ser disponi-
empregada: está nas entrelinhas dos e-mails, nas pausas e bilizado. “É necessário vencer a desconfiança dele, que vai
entonações em uma teleconferência”, alerta Gladimir. ter o seu trabalho realizado por pessoas do outro lado do
Vencendo os obstáculos Atlântico. Em nosso caso, pelo fato de termos uma presença
Como já dizia o poeta mineiro Carlos Drummond de física com dois profissionais dando suporte e atendimento,
Andrade, “no meio do caminho tinha uma pedra, tinha uma o cliente se sente mais amparado. Quando apresentamos
pedra no meio do caminho”. Assim, na trajetória em busca da o resultado final e ele atende às expectativas do cliente, o
ampliação de mercado, alguns desafios precisam ser supera- obstáculo está definitivamente ultrapassado”.
dos. O primeiro deles envolve as diferenças entre o cliente e Cliente: diferenças e vantagens
o fornecedor do serviço. Certamente, a longa caminhada já percorrida
“A língua, a cultura e a comunicação são pontos que, se pelas agências digitais brasileiras com atuação interna-
não são bem trabalhados, podem se apresentar como gran- cional foi suficiente para traçar as características que
des obstáculos. Uma equipe com formação multicultural diferenciam os clientes daqui com os de fora. “Acho
pode surgir como um facilitador nesses quesitos”, que a diferença é, sobretudo, de expectativa
diz Santana. e organização. Por exemplo, marcas estran-
Outra dificuldade está no estabeleci- geiras têm uma estratégia de marketing
mento de canais de prospecção e aten- definida com muita antecedência por seu
dimento. “A falta de flexibilidade p e s s o a l o u a g ê n c i a d e p ro p a g a n d a .
e empatia com um cliente di- Raramente alguém vai te contactar
ferente do usual podem dizendo que precisa de um projeto
gerar ruídos de comu- substancial para ontem. Processo
n i c a ç ã o n o p ro c e s s o de feedback, de coleta de mate-
de trabalho. Antes de rial - na nossa experiência tudo
tudo, a decisão entre corre muito mais seriamente
levar a prospecção e estruturadamente”,diz
ou a produção para André Matarazzo.
o exterior deve ser Como conseqüên-
analisada em termos fi- cia desta organiza-

“O fato de nos estabelecermos


em um outro país é uma prova de
nossa competência e qualidade nos serviços
prestados” (Tiago Ritter)
e-mais - desbravadores :: 49

ção, surge uma maior cobrança. “O cliente que contrata No caso das gaúchas Aldeia e W3Haus, houve uma
um fornecedor offshore (e não estamos falando de países transformação na forma como elas se posicionam no merca-
específi cos, isso se aplica até mesmo ao Brasil) tende a ser do. “Além do aumento do número de projetos, um retorno
mais escolado nas práticas de TI e é, portanto, mais exigente bastante sensível foi o número de contatos comerciais. Pas-
em termos de gestão de processos. Não gostamos de fa- samos a ser percebidos como fornecedores potenciais, o
zer generalizações em relação a países específi cos: há, por que é sempre importante em um processo de posicionamen-
exemplo, ingleses extremamente abertos à inovação, outros to de marca para um determinado mercado”, cita Gladimir.
são mais conservadores. O relacionamento com os clientes “Brincamos que a W3Haus, ao contrário das empresas aéreas,
no exterior, na experiência da Aldeia, tem sido formal, com vai de Porto Alegre à Europa sem escala em São Paulo. Fa-
tendência a suavização do meio para o fi nal do processo”, lando sério, existe uma admiração dos concorrentes e um
relata Gladimir. respeito maior por parte dos clientes. O fato de nos estabele-
Não podemos esquecer também a exigência pelo cermos em um outro país é uma prova de nossa competência
cumprimento rigoroso dos prazos. “Os cronogramas são e qualidade nos serviços prestados”, conta Tiago.
mais respeitados tanto pelo cliente como pela agência Além desses aspectos, podemos citar o crescimento
digital. Além disso, existe uma autonomia maior para a da receita financeira e a possibilidade de participação em
agência. No Brasil, não é raro termos que lidar com algu- projetos inovadores. “Sem contar com o lógico aumento do
mas empresas em que o cliente sente a necessidade de ter orçamento, sentimos também que a organização é melhor, a
o ‘seu dedo’ no trabalho”, cita Tiago. comunicação é mais eficiente, entre outros. Temos também
Vale a pena? a chance de criar conceitos para públicos diferenciados,
Mais do que receber um simples “sim” ou “não” como mais abertos para experimentação, que navegam em banda
resposta a tal pergunta, é preciso saber que tipo de retorno mais larga etc. É importante frisar que clientes ‘interna-
uma agência digital poderá obter ao decidir expandir seu cionais’ variam imensamente. Temos clientes institucionais
mercado de atuação para o exterior. “A Sapien tem obtido americanos que se comunicam com um público geriátrico
elevadas taxas de crescimento a cada ano (13,60% em 2003, - até clientes de pura atitude que se comunicam com os jo-
34,98% em 2004 e 68,02% em 2005). Hoje, atendemos clien- vens de Helsinque, por exemplo. Nem tudo são flores, nem
tes na Europa, Ásia e América. Esse foi um dos fatores que sempre existe uma oportunidade grande de fazer um traba-
contribuiu para o nosso crescimento”, revela Santana. lho extremamente diferenciado”, finaliza Matarazzo.

Como tudo começou?


- Sapien
- Aldeia - Agência Internet “Esse foi um dos objetivos perseguido por nós desde
“Sempre tivemos o desejo de aproveitar nosso poten- o início de nossa atuação. Começou como um objetivo
cial criativo e inovador para diversos perfis de clientes, meio difuso e, com o esforço e a maturidade da em-
mercados e culturas como forma de expandir e qualificar presa, assumiu a forma de uma meta clara”
nosso portfólio de soluções” (Gladimir Dutra) (Santana Dardot)

- Gringo.nu - W3Haus
“Não diria que a Gringo é focada em clientes no exterior, “A partir da iniciativa de um dos sócios (Rodrigo Caudu-
mas gostamos de poder trabalhar com gente de fora. ro). Por motivos pessoais, ele tinha interesse de morar
Acreditamos em um modelo global de atendimento” na Inglaterra e aliou essa vontade ao lado profissional
(André Matarazzo) levando a W3Haus ‘na bagagem” (Tiago Ritter)
50 :: estudo de caso - Brastemp

Brastemp
na era do comércio
eletrônico
personalizado

Você vai comprar um novo refrigera- pela internet uma nova maneira de co-
dor e gostaria de encontrar um lugar onde mercializar seus produtos: é o chamado
pudesse escolher as cores das portas e do comércio eletrônico personalizado, no
gabinete, definir o tipo de voltagem e o qual o usuário vai determinando as ca-
lado de abertura, além de incluir algumas racterísticas de sua compra.
novas funcionalidades, como porta-latas, Os detalhes sobre a criação e o de-
compartimento para laticínios e gavetas e senvolvimento deste novo tipo de am-
prateleiras extras. biente, você confere nesta entrevista rea-
Pois bem, de olho nas transformações lizada com dois especialistas da Agência-
ocorridas nos desejos dos consumidores Click (www.agenciaclick.com.br): Ricardo
nos últimos tempos, a Brastemp (www. Figueira, diretor de criação, e Abel Reis,
brastemp.com.br) vem desenvolvendo VP de Tecnologia e Projetos.
estudo de caso - Brastemp :: 51

Wd :: A Brastemp é uma tradicional marca de eletro- “Entendemos que o importante é adequar-


domésticos no mercado brasileiro e atinge um público se a espontaneidade cognitiva dos
seleto de consumidores. Diante disso, quais são as prin- consumidores” (Ricardo Figueira)
cipais motivações que levam um usuário a visitar o site
da empresa? Quais seriam as diferenças entre o consu- res na compra de um monitor novo ou mais potente.

midor “físico” e o consumidor “virtual” da marca? Mas o importante é que a decisão do projeto partiu do

Ricardo :: Hoje em dia, os consumidores visitam o site pressuposto de atender a todas as necessidades dos usu-

da Brastemp por uma infinidade de motivos. Inclusive, pelos ários. O site projetado não poderia ter uma configuração

mesmos que naturalmente os levariam ao ponto-de-venda. que fosse excludente, ao contrário, que atendesse com boa

As visitas são motivadas por iniciativas ativas da pró- ergonomia a todas as pessoas.

pria marca, como campanhas promocionais de varejo on- Wd :: Em termos de arquitetura da informação, o site

line, comunicação de novos lançamentos, ações de rela- foi dividido em quatro seções principais: Catálogo de Pro-

cionamento, ou pelas próprias necessidades específicas dutos, Loja Virtual, Atendimento ao Consumidor e Dicas da

do consumidor, que variam desde registro de um produto Brastemp. De que forma vocês decidiram quais seriam os

até a configuração de novos eletrodomésticos com gostos, blocos de informação a serem trabalhados na interface?

cores e design personalizados. Ricardo :: Apesar de o site hoje contar com muito

Enfim, a internet acabou integrando todas as relações conteúdo e outras ações e assuntos, essas eram as temá-

já existentes com o consumidor e criou ainda um cenário ticas que refletiam as principais necessidades do usuário

gigantesco de vantagens que influencia diretamente na em grande escala.

sua relação com a marca - que é uma só - independente do Procuramos, praticamente em todos projetos, desen-

ambiente ser real ou virtual. volver a arquitetura de informação do site de forma a refle-

Na cabeça dele, não existe distinção, não existe a tir os hábitos e o entendimento do consumidor, mesmo que

marca virtualmente e a marca fisicamente. Existem, sim, a estrutura interna da empresa seja diferente. Entendemos

experiências proporcionadas por uma marca para atender que o importante é adequar-se a espontaneidade cognitiva

as suas necessidades e são essas experiências que passam dos consumidores.

a influenciar diretamente os seus hábitos de escolha e fre- Wd :: A combinação cromática do site prioriza tona-

qüência aos diversos meios e canais. lidades leves e neutras, como o branco e o cinza, além do

É claro que, por outro lado, os consumidores passam uso do laranja para destacar determinadas informações.

a ter expectativas cada vez mais sofisticadas e que só a fle- Quais fatores influenciaram nesta escolha?

xibilidade, a agilidade e as características de um ambiente Ricardo :: A Brastemp é uma marca tradicional no mer-

interativo podem oferecer. cado, porém altamente moderna e de forte personalidade.

Wd :: A diversidade de resoluções de tela usada Esse foi um dos principais pontos que determinaram na

pelos usuários ainda é uma questão que merece atenção concepção do design do site.

por parte de quem trabalha com a criação e o desenvol- Essas atitudes ou características da marca acabaram

vimento de sites. No caso do site da Brastemp, vocês influenciando a estratégia criativa, passando por três pon-

adotaram o tamanho de 800x600 pixels como padrão. O tos principais.

que determinou esta decisão? O primeiro deles é priorizar o funcional, a escolha do

Ricardo :: Atualmente, no Brasil, a diversidade de reso- usuário, a organização da informação. Em seguida, era pre-

luções utilizadas em computadores é muito variada e o fato é ciso permitir que as imagens dos próprios produtos falas-

influenciado por inúmeros motivos, que vão desde questões sem com o consumidor, transmitindo o espírito da marca

de “acessibilidade” até o “poder aquisitivo” dos consumido- e suas propostas.


52 :: estudo de caso - Brastemp

não parte do princípio do trabalho isolado. Ao contrário,


“O design de um site precisa jogar a favor da
o arquiteto de informação, por exemplo, influencia inclusi-
dinâmica do negócio do cliente”
ve na implementação do ambiente tecnológico, de acordo
(Ricardo Figueira)
com os fluxos e até a performance das aplicações.
Por último, procuramos criar uma plataforma visual É sempre um trabalho de equipe para garantir a consis-
que favorecesse a comunicação de oportunidade ou de mo- tência e, acima de tudo, todo mundo focado na necessidade
mento em função da própria dinâmica de relacionamento do consumidor, dos testadores aos desenvolvedores.
com o consumidor. Wd :: É possível afirmar que o “Brastemp You” se-
Wd :: Em relação ao grid, é possível reparar o uso gue a filosofia emanada pelo movimento Web 2.0, que
de boxes retangulares para determinar a divisão dos ele- é disponibilizar ferramentas que aumentem a interativi-
mentos do site. Por que vocês decidiram trabalhar com dade do usuário com um ambiente digital?
este tipo de forma para apresentar as informações? Ricardo :: O conceito do projeto Brastemp You está
Ricardo :: O site da Brastemp é um ambiente intera- alinhado com necessidades mais sofisticadas do consumidor.
tivo com muito conteúdo, informação, lançamento de pro- Ele está alinhado com uma tendência de comportamento de
dutos, serviços e ainda tem uma dinâmica de atualização e consumo, que está influenciando e vai influenciar também as
operação muito intensa. próximas décadas, quando os produtos, por mais industriais
Assim, a utilização de grids ajuda ao usuário desenvol- e característicos que sejam, receberão a intervenção dos
ver um entendimento ou cognição pelas áreas-fins do site, gostos e características pessoais de seus compradores.
sem prejudicar o ritmo de publicação de tudo que é produ- Eu diria que a Web 2.0 é um pedacinho dessa manifes-
zido para atender as necessidades diárias da marca. tação do conceito de interatividade do mundo com tudo que
O design de um site precisa jogar a favor da dinâmica existe e existirá, inclusive nos meios de produção em larga
do negócio do cliente. Nesse caso, não adianta muito ex- escala e mais complexos como as indústrias e nas fábricas.
perimentalismo, o negócio é desenhar um grid inteligente Wd :: Falando em negócios, a Brastemp possui uma
e graficamente bem concebido. área de comércio eletrônico. Além de facilitar a compra
Wd :: Um dos destaques do site é a seção “Bras- dos produtos, a seção apresenta uma série de informa-
temp You” (http://tinyurl.com/yn7noa), no qual o usu- ções úteis que podem ajudar a esclarecer as principais
ário pode personalizar a compra de um refrigerador ou dúvidas dos consumidores (simulação de consumo de ener-
freezer. Segundo a divulgação oficial da AgênciaClick, gia, fotos dos produtos, características principais etc.).
o trabalho levou dez meses de duração e envolveu as Que tipo de diferenciais vocês utilizaram para destacar os
áreas de arquitetura da informação, design e interface. produtos no site?
Como esses conhecimentos foram aplicados no desenvol- Ricardo :: Nesse caso, o nosso trabalho foi tornar es-
vimento desta funcionalidade? Vocês realizaram testes ses fatores evidentes e principalmente deixá-los absoluta-
de usabilidade para garantir a eficácia da ação? mente organizados por atributos e uma caracterização que
Ricardo :: Brastemp You foi o primeiro case no Brasil pudesse facilitar a comparação com outros produtos, seja
de configuração de um eletrodoméstico customizado pelo da mesma linha ou até mesmo da concorrência.
próprio consumidor. E tudo que de uma forma ou de outra A Brastemp, na verdade, já trabalha com diferenciais
é o “primeiro” necessita de teste. Esse projeto, especifica- na sua essência. O nosso papel foi deixá-los evidentes.
mente, além de ter passado por testes, ainda contou com Wd :: Especialistas apontam que um dos principais
atualizações dinâmicas, conforme a sua performance em desafios para a disseminação do comércio eletrônico
ambiente real. envolve a sensação de segurança para se realizar uma
Em um trabalho como esse, o processo de concepção transação pela internet. Quais elementos podem ajudar
estudo de caso - Brastemp :: 53

a aumentar a confiança de um usuário sobre a segurança “Nas próximas décadas, os


de um site? Como vocês trabalharam esta questão no produtos, por mais industriais
site da Brastemp? e característicos que sejam,
Abel :: O site adota as melhoras práticas e recursos receberão a intervenção dos
técnicos visando preservar o sigilo de informações e a se- gostos e características pessoais
gurança das transações realizadas pelos clientes. Essas
de seus compradores” (Ricardo
ações são acompanhadas de muita orientação e um efi-
Figueira)
ciente canal de contato por chat ou até mesmo telefone. É
assim que se constrói confiança.
Wd :: Um detalhe interessante deste projeto é a dis-
ponibilização de banners como uma espécie de “autopu-
blicidade”, no qual a empresa destaca as suas principais
ofertas e promoções. Quais aspectos determinaram o
conceito da aplicação de espaços publicitários no site?
Ricardo :: O site da Brastemp é detentor de uma gran-
de audiência, tanto em função da afinidade que a sua marca tem
com os brasileiros quanto pelos serviços e oportunidades dispo-
níveis on-line com interesses mais diversificados possíveis.
A partir disso, utilizamos estrategicamente as diversas
áreas de interesse do site para comunicar as oportunidades
específicas e adequadas àquele momento da navegação.
Com isso, podemos aumentar a possibilidade da Bras-
temp desenvolver novos negócios ou se aprofundar na re-
lação com o consumidor.
Wd :: Ainda sobre a publicidade, a página principal
conta com um pop-up bem criativo, que destaca a nova
linha de purificadores de água da empresa. Na edição
de dezembro de 2006, na seção “Métricas e Mercado”,
apresentamos uma pesquisa sobre a rejeição dos usuá-
rios (86%) por este tipo de formato publicitário on-line.
Vocês acreditam que o pop-up é um formato em extin-
ção? Por que vocês decidiram utilizá-lo como canal de
divulgação no site da Brastemp?
Ricardo :: Particularmente, não acredito que o pop-up
é uma ferramenta em extinção. É bem verdade que a comu-
nicação interruptiva vai ficar cada vez mais em desuso, em
função dos mecanismos interativos on-demand, de acordo
com os interesses do usuário. www.brastemp.com.br
Entretanto, existe um fato que caracteriza o pop-up
como uma ferramenta ainda interessante. Apesar do índice
de rejeição ao tipo de comportamento, a afinidade e inte-
54 :: estudo de caso - Brastemp

“Pop-up: apesar do resse das pessoas que realmente clicam nele é altíssima, caracterizando uma
índice de rejeição ao tipo efetivação da comunicação proposta.

de comportamento, a Então, uma vez que o site da Brastemp possui uma audiência já qualificada,

afinidade e interesse das dentro de um interesse específico, há grandes chances dessa linha de comu-
nicação trazer pertinência e interesse ao visitante. Podemos interpretar como
pessoas que realmente
uma sugestão de oportunidade e não uma comunicação invasiva.
clicam nele é altíssima”
Wd :: A acessibilidade é um tema que vem transformando a maneira
(Ricardo Figueira)
como as empresas desenvolvem seus produtos e serviços. Pensando nis-
so, a Brastemp lançou recentemente uma linha de produtos acessíveis aos
consumidores com necessidades diferenciadas (www.brastemp.com.br/in-
dependente). Assim, dentro do site, existe também um espaço dedicado a
exposição desses produtos. Como as normas de acessibilidade on-line foram
aplicadas nesta seção?
Ricardo :: Lembro que, quando criávamos esse site, passamos algumas
vezes pela discussão de aproveitar a oportunidade para entrar nesse assunto
no próprio site.
Entretanto, concluímos que o nosso objetivo deveria ser simplesmente
fazer o site mais acessível, não fazendo disso um assunto para discussão, mas
sendo realmente um site adequado ao público focal.
Para isso, criamos um site tecnologicamente simples, adequado e compa-
tível com todos os mecanismos viabilizadores e de suporte às diversas necessi-
dades especiais, previstas nas normas regentes do HTML para acessibilidade.

Acessibilidade na web X
É criar ou tornar as ferramentas e páginas web acessíveis a um maior número de
usuários, inclusive pessoas com deficiências. A acessibilidade na web beneficia
também pessoas idosas, usuários de navegadores alternativos, usuários de tecnologia
assistiva e de acesso móvel.
Fonte: Serpro (http://tinyurl.com/wsple)

Wd :: Um detalhe interessante nesta seção são os ícones utilizados para


representar cada um dos consumidores com necessidades diferenciadas. Como
vocês definiram os símbolos que representariam cada consumidor (cadeirantes,
deficientes auditivos e deficientes visuais)?
Ricardo :: Buscamos utilizar ícones inspirados nas padronizações de si-
nalização internacional, comum às características específicas para facilitar o
entendimento e, principalmente, a identificação da informação.
Wd :: Disponibilizar formas de contato é fundamental para garantir que
os consumidores possam contribuir com sugestões e críticas que ajudem no
aperfeiçoamento dos produtos e serviços de uma empresa. O canal on-line
de atendimento ao consumidor da Brastemp oferece uma gama variada de
opções (ajuda on-line, formulário, perguntas freqüentes etc.). Quais fatores
estudo de caso - Brastemp :: 55

“Todas as formas de contato e de orientação


devem estar à disposição dos visitantes, sendo
por vezes até mesmo redundante. É isso que dá
segurança ao e-consumidor, pelo menos no Brasil”
(Abel Reis)

determinaram os canais a serem disponibilizados?


Abel :: Todas as formas de contato e de orientação devem
estar à disposição dos visitantes, sendo por vezes até mesmo
redundante. É isso que dá segurança ao e-consumidor, pelo me-
nos no Brasil. Foi isso que constatamos há cerca de três anos,
ao realizar uma pesquisa de expectativas e atitudes do público
internauta.
Wd :: O site recebeu recentemente o prêmio iBest 2006,
pela Academia iBest brasileira, na categoria “Eletro-Eletrô-
nicos” (http://tinyurl.com/y48ovk). Que tipo de retorno este
projeto trouxe para a AgênciaClick?
Ricardo :: A Brastemp é uma marca parceira no desenvol-
vimento de projetos e campanhas que para nós são sempre es-
peciais, seja de varejo ou institucionais. Isso, por conseqüência,
acaba nos dando a oportunidade de ter uma parceria reconhecida
pelo mercado, através de prêmios nacionais e internacionais.
No ano passado, tivemos várias iniciativas premiadas, como
o iBest para o site e um Leão de Ouro, em Cannes (www.can-
neslions.com), para uma peça de varejo. Esse tipo de incentivo
é importante em função do desenvolvimento de um trabalho em
parceria, buscando sempre o melhor para o negócio, para a co-
municação e para a nossa expectativa qualitativa pessoal.

Festival de Publicidade de Cannes X


Criado em 1953 pela SAWA (Screen Advertising Worlds Agencies). Tornou-se
o mais importante prêmio da publicidade mundial. Em 2006, a AgênciaClick
foi premiada com as peças “Purificador de água - Brastemp” (http://tinyurl.
com/y2aulo) e “Sacode - Revista Sexy” (http://tinyurl.com/y6cvt9).
Fonte: Wikipédia (http://tinyurl.com/yxzztm)

Por outro lado, existe, além do reconhecimento da indústria


da comunicação, a incessante busca por resultado, tanto de ven-
das quanto por força de marca, tudo medido dia-a-dia através de
recursos tecnológicos e humanos. Ou seja, tudo é parametrizado e
o resultado é a energia para novos investimentos e iniciativas.
56 :: tecnologia na web

Tecnologia na web
ActionScript: expandindo os limites do desenvolvimento web
Extraordinários efeitos visuais e transições dinâmi- Janota, desenvolvedor especialista em Flash e sócio-di-
cas entre os elementos que compõem a interface do site. retor da DES16N (www.des16n.com.br), o início coincide
Se você entrar em algum fórum ou lista de discussão com o lançamento da versão 3 do Flash. “Nesta época, já
voltada para a criação e o desenvolvimento web, certa- brincava com Flash e Javascript. Em 2000, passei a usar
mente vai se deparar com o endereço www.2advanced. a versão 4, que já trabalhava com variáveis e streaming
com. O site desta agência americana é um bom exemplo de MP3. No Flash 5, veio a interação com XML e assim
no uso de Flash, através da utilização da linguagem de evoluindo aos dias de hoje”.
programação ActionScript. Já a história de Zé Fernando está intimamente ligada
“No início, o Flash era só uma plataforma para dese- com a evolução do Flash. “Comecei a trabalhar com Flash,
nho vetorial e animação. Com o ActionScript, se transfor- na versão 2, em 1997 ou 1998. No começo, o Flash não
mou numa plataforma que permite a execução de código. tinha o ActionScript como é conhecido hoje - ele só supor-
Em termos visuais, permitiu o controle dinâmico de obje- tava meia dúzia de comandos simples, chamados de ‘ac-
tos. Assim, programadores e designers não precisam mais tions’. Ele foi mudando bastante conforme os anos foram
compor animações e outros efeitos na timeline, como feito passando e ainda tem mudado constantemente, com as
originalmente. Além disso, tornou possível todo o tipo de novas versões de ActionScript (2, 3 etc.) e recursos novos
processamento existente em uma linguagem real de pro- que são criados. Assim, posso dizer que comecei a traba-
gramação, como interpretação e manipulação de dados, lhar com ActionScript quando ele nasceu”.
geração de conteúdo em tempo real, interação com scripts Erros mais comuns
no lado servidor etc”, explica o designer de interfaces Zé Nada melhor do que perguntar para quem já vem de-
Fernando (www.zeh.com.br). senvolvendo há um bom tempo quais seriam os erros mais
Sobre as suas vantagens, o especialista afirma que comuns no uso do ActionScript. Com a palavra, os especia-
hoje é mais fácil perguntar se é possível criar algo sem o listas. “Os principais são os erros de tipagem. Os scripts in-
uso de ActionScript. “A resposta é não: sem uma lingua- ternos do Flash exigem sua escrita corretamente. Por exem-
gem para script, qualquer tecnologia de interfaces não é plo: escrever var meu_som:sound = new sound() em vez de
nada além de uma casca sem propósito. Em sites em Flash, var meu_som:Sound = new Sound()”, aponta Dauton.
ActionScript acaba sendo usado principalmente para transi- Outra questão complicada envolve, dentro do Flash, o
ções entre estados dos elementos da interface (eventos de trabalho com um mesmo código dividido em muitos objetos
rollover, fades de conteúdo e outras animações, por exem- diferentes. “Um dos grandes problemas do ActionScript e
plo), criação de conteúdo dinâmico (quando carregado de do Flash, em geral, é que você pode fazer uma mesma coi-
algum sistema externo, como uma consulta num banco de sa de diversas formas diferentes - da mais confusa a mais
dados), diálogo com scripts do lado servidor para executar simples, da mais poderosa a mais limitada. Por exemplo,
tarefas mais avançadas num website (como mandar e-mails alguns programadores podem conseguir terminar uma ta-
ou adicionar registros num banco de dados) etc.” refa, mas de uma forma que o código esteja tão confuso
O começo que qualquer mudança ou manutenção seja impossível. Em-
Para entendermos um pouco mais sobre esta tec- bora isso não seja um ‘erro’ pela definição mais técnica da
nologia, uma boa pedida é descobrir como alguns pro- palavra, acaba sendo um erro prático porque impede que
fissionais começaram a manipulá-la. No caso de Dauton outras pessoas trabalhem no código”, afirma Fernando.
tecnologia na web :: 57

nível médio

O especialista lembra ainda da confusão entre os es- usando ActionScript de cabo a rabo”, diz Fernando.
copos da linguagem. “Ou seja, ao se usar objetos, variáveis Além disso, ele indica exemplos envolvendo as ques-
e funções em muitos lugares diferentes. Quando o progra- tões técnicas. “Bons exemplos de uso de ActionScript são
mador não possui um conhecimento maior da linguagem scripts que redimensionam a interface com muito mais
e de programação orientada a objetos em geral, é comum controle dependendo do tamanho da janela do browser.
criar um código cheio de buracos, que pode até funcionar, Temos ainda os scripts que te permitem fazer algo muito
mas vai estar funcionando na corda bamba, podendo entrar mais visualmente (por exemplo: procurar um livro da Ama-
em parafuso a qualquer momento.” zon e estabelecer relações entre outras publicações sob a
Bons exemplos no uso do ActionScript forma de gráficos interligados), interfaces de usuário mais
Então, onde encontrar bons exemplos da aplicação do amigáveis (as chamadas interfaces ricas), carregamento de
ActionScript, que sirvam de referências para futuros proje- dados dinamicamente (que podem ser interpretados no
tos? “Geralmente, sites que indexam websites (www.the- lado cliente), jogos singleplayer e multiplayer etc.”
fwa.com, por exemplo) são bons índices para isso, já que Dificuldades no aprendizado
90% dos sites listados lá são feitos em Flash e, obviamente, Segundo os especialistas, um dos principais desafios
58 :: tecnologia na web

“Com o ActionScript, o Flash se transfor mou numa platafor ma que per mite a execução
de código” (Zé Fer nando)

para quem deseja se aprofundar na área está no desen-


Evolução do Flash
volvimento de conhecimento lógico, de programação.
“Para designers, essa acaba sendo a principal dificuldade - 1996

ao lidar com a linguagem: não a sintaxe (que sempre está “Chamado de SPLASH (FutureSplash Animator). Era um
programa para animações vetoriais”
disponível em referências ou na ajuda), mas sim a lógica de
programação, objetiva, fria e racional. Depurar um algo- - 1997

ritmo é algo que demora um tempo para se aprender, mas “A versão 2 ainda possuía poucos recursos de programação”

depois que a lógica de uma linguagem é compreendida, - 1998


as outras vêm mais fácil. No caso do ActionScript, tem um “No Flash 3, através da integração do Flash e JavaScript, era
possível desenvolver algumas aplicações”
complicador a mais: entender como o Flash se relaciona
com a linguagem. Existem coisas que parecem óbvias pela - 1999
“O Flash 4 trouxe uma quantidade de scripts internos (actions)”
sintaxe, mas que não funcionam na prática, principalmente
devido à forma como o Flash executa o código (frame por
- 2000 aos dias atuais
frame, seqüencialmente etc). Então, surge muita solução “O Flash 5 traz o ActionScript 1.0, que permitia criar uma
esquisita por causa, exclusivamente, das peculiaridades do interatividade com outras linguagens de servidor, bem como
Flash”, alerta Fernando. otimizar as animações que até então eram feitas via timeline.

Assim, não há outra alternativa: torne a prática como Utilizávamos prototypes, que foram substituídos, apesar de
ainda serem permitidos no uso pelas classes do ActionScript
a principal ferramenta de aprendizado. “Toda e qualquer
2.0, que tem como principal característica à programação
linguagem de programação é como uma linguagem pro-
orientada a objetos (OOP). Já a versão atual, ActionScript 3.0,
priamente dita. Se você estuda inglês e não pratica, cer- está voltada completamente à OOP, onde toda programação
tamente não se desenvolverá e provavelmente nem terá escrita deve pertencer a uma classe”
condições de efetuar uma conversação neste idioma. Na
Fonte: Dauton Janota
programação, examino o fato similarmente. Tudo depende
do interesse em aprender a programar. E, esteja certo, er-
rar é o mais comum na programação. Este fato é o que leva
Dicas de leitura
à experiência. O grande lance é tentar e errar, até chegar
no que se quer. No caminho, você encontrará inúmeras
- “ActionScript for Flash MX: The Definitive Guide”
outras soluções”, orienta Dauton. Autor: Colin Moock
Editora: O’Reilly Media

A história do ActionScript - “Essential ActionScript 2.0”

“Linguagem de programação baseada em ECMAScript. É Autor: Colin Moock


Editora: O’Reilly Media
utilizada para controlar filmes e aplicações no Flash. Visto que o

JavaScript e o ActionScript são baseados na mesma sintaxe do - “Flash Actionscript MX - Documentado e Não Documentado”

ECMAScript, ambos são traduzidos de um para outro facilmente. Autor: Dauton Janota
Editora: Axcel Books
Contudo, o modelo de cliente é diferente: enquanto o JavaScript
- “Flash Animado: Técnicas Avançadas em design e animações”
trabalha com janelas, documentos e formulários, o ActionScript
Autores: Dauton Janota, Rodrigo Piologo e Ricardo Piologo
trabalha com movie-clips, campos de texto e som.”
Editora: Axcel Books

Fonte: Wikipédia (http://pt.wikipedia.org/wiki/ActionScript) Fontes: Dauton Janota e Zé Fernando


tutorial :: 59

Produtividade 2.0 - Parte 3


Elcio Ferreira
Desenvolvedor e instrutor na Visie Padrões Web
http://visie.com.br/

Trac
Mês passado, conhecemos o Subversion, um sistema <Location “/tracvalidar/”>
livre de controle de versão. Esse mês, vamos falar do Trac,
SetHandler mod_python
um sistema minimalista de gerenciamento de projetos inte-
PythonHandler trac.web.modpython_fron-
grado ao Subversion. Não se preocupe, você vai entender
tend
o que ele faz assim que vir as telas. Como fizemos com o
PythonOption TracUriRoot “/tracvali-
Subversion, vamos mostrar a você como instalar o Trac no
dar”
Ubuntu, para que você tenha uma idéia do processo todo.
PythonOption TracEnv /home/dev/trac/
Vamos começar com o comando:
validar

sudo apt-get install trac </Location>

Agora, vamos ao diretório onde você vai manter seus E, claro, reiniciar o Apache:
arquivos do Trac. Eu escolhi /home/dev/trac:
$ sudo invoke-rc.d apache2 restart
cd /home/dev/trac
Fazendo isso, você poderá acessar o Trac em seudo-
Em seguida crie o pacote de arquivos para o seu pro- minio.com/tracvalidar e verá uma tela assim:
jeto do Subversion:

trac-admin initenv validar

O Trac vai perguntar a você o nome do projeto, a


string de conexão ao banco de dados, onde, se você não
pretende usar uma base de dados específica, basta aper-
tar ENTER, o caminho para o repositório, no meu caso /
home/dev/subversion/validar, e o diretório dos templates
do Trac, onde você também pode apertar ENTER tranqüila-
mente. Ao final, garanta que o Apache conseguirá acessar
o diretório que o Trac criou:

$ sudo chown -R www-data /home/dev/trac/*

Por fim, vamos criar um diretório virtual no Apache


Clicando em “Browse Source”, você poderá navegar
apontando para o Trac. Para isso basta inserir, em seu apa-
pelo código-fonte dos arquivos do projeto:
che2.conf ou no arquivo de configuração do seu site:
60 :: tutorial

extremo. Isso é importante porque o commit e deploy


de sua aplicação provavelmente será feito muitas vezes.
Algumas dicas para otimizar e automatizar o processo de
desenvolvimento e deploy:
1. O controle de versão deve ser seu único repo-
sitório de código.
Clicando em “Timeline”, confira todo o histórico de Ninguém copia código do servidor de desenvolvi-
alterações no projeto, além de saber exatamente que ar- mento para a sua máquina e vice-versa. Ninguém copia
quivos foram criados ou alterados, quando e por quem: código do servidor de desenvolvimento para o de pro-
dução. O caminho do código é entre os diversos lugares
em que ele tem que estar e o repositório do controle de
versão. Você vai desenvolver?
Baixe o código do repositório, altere e suba no-
vamente para o repositório. Vai colocar o código que
você acabou de escrever no servidor de testes/homo-
logação? No servidor de testes você faz check out do
código que está no repositório.
Mais do que isso, você pode em cada arquivo, para O processo de deploy automatizado vai copiar para
cada alteração, exatamente o que foi alterado: o servidor de produção o código do repositório. Nunca
mais você vai ter que se preocupar com versões dife-
rentes do código.
2. Coloque tudo o que se refere ao projeto no
controle de versão.
Seus scripts de criação de banco de dados, a docu-
mentação do seu sistema, seus artefatos de modelagem
e tudo o mais que mereça ser guardado.
Da mesma forma que você pode precisar de uma
versão antiga de um trecho de código, pode precisar
de uma versão antiga de um diagrama de classes ou de
O Trac é uma valiosíssima fonte de informação para um documento do sistema.
programadores que resolveram pensar em seu próprio tra- 3. Guarde seu repositório de código com a sua vida.
balho e investir em sua produtividade. É também excelente Ele é seu bem mais valioso. É tudo. Na verdade, isso é
para o acompanhamento do projeto, e inestimável quando muito bom. Você vai precisar fazer backup de um lugar só.
algo quebra em seu sistema e você precisa descobrir o que Este modelo de trabalho vai lhe trazer alguns bene-
mudou e como as coisas eram antes. fícios, entre eles seus desenvolvedores vão gastar menos
Automatização tempo com testes e gerenciamento de código, a qualidade
Bons programadores não se conformam em repetir a do seu código estará assegurada a cada passo e você evi-
mesma tarefa manualmente várias vezes. Se algo pode ser tará erros nos processos de testes e instalação.
automatizado, será. Em fevereiro, vamos começar a falar de desenvol-
O processo de desenvolvimento e publicação de vimento guiado por testes, que faz parte do pacote de
suas aplicações é algo que pode ser automatizado ao produtividade. Até lá!
tutorial :: 61

Dicas

O Trac é mais do que um visualizador do seu repositório do Subversion. Ele contém um Wiki, que você pode
usar para documentação de seu projeto, ou como uma maneira fácil de ter um site do projeto durante o desen-
volvimento, e um sistema de controle de tickets muito bom. Tudo integrado ao controle de versão.
A homepage do Trac está em http://trac.edgewall.org e é feita com o próprio Trac. Há outros excelentes
exemplos do que o Trac é capaz de fazer, como a página de desenvolvimento do Projeto Django: http://code.
djangoproject.org.
Se você também quiser personalizar sua versão do Trac, os arquivos de template estão em /usr/share/trac/
templates e você tem duas alternativas. Pode alterar os templates ali, se quiser que todos os seus sites Trac
nesse servidor sejam alterados. Ou, se quiser personalizar apenas um site, pode criar uma cópia desse diretório
e apontar seu projeto para essa cópia quando usar o comando trac-admin initenv.

Links

- Track Hacks
http://www.trac-hacks.org

- Guia de instalação do Trac


http://colab.interlegis.gov.br/wiki/TracInstall

- Controle de mudança com o Trac


http://www.pronus.eng.br/artigos_tutoriais/gerencia_configuracao/trac.php

- Trac
http://en.wikipedia.org/wiki/Trac
64 :: tecnologia

Abel Reis
Guilhermo Reis
VP de Tecnologia e Projetos da AgênciaClick. Doutorando em Comunicação e Semiótica pela PUC-SP.
Especialista em Arquitetura de Informação e Usabilidade. É autor do Kit de Conhecimento sobre AI
M.Sc. em Engenharia de Sistemas pela UFRJ. Bacharel em Informática e Filosofia. Há 15 anos trabalha
(http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos
com projetos de mídia interativa. É um dos top creatives do mundo, segundo o livro “How to catch the
websites do Banco Real.
big idea”, do consultor Ralf Langwost.
reis@guilhermo.com
abel.reis@agenciaclick.com.br

Vem aí a Web 3.0


Sabemos que a indústria de tecnologia da informação é movida a novidades. É a lógica
da obsolescência contínua e planejada. Por esta razão, vez por outra surgem expressões e
“palavras mágicas” que procuram apresentar ou “vender” ao mercado inovações ou ten-
dências. Às vezes são apenas “espumas e bolhas”, isto é, não dizem nada de novo, ou sim-
plesmente não dizem nada, mas o fazem de modo sofisticado. Porém, este não é o caso da
chamada Web 2.0. Trata-se aqui, a meu ver, de um fenômeno que agora se materializa numa
terceira onda de inovação na internet: a onda das redes sociais.
A primeira onda vai de 1995 (criação da Amazon) a 1999 (quando surge o Napster), onde
os modelos de negócios vitoriosos na web (B2C, em especial) seguiram, principalmente, três
vetores: a redução de custos de procura (exemplo: eBay), a consolidação de grandes portais
de conteúdo e serviços (exemplo: UOL), ou a redução de custos operacionais, onde internet
banking é, neste caso, o melhor exemplo. O destaque desta primeira onda foi a formação
dos grandes centros de atração de audiência, que hoje se encontram bem consolidados.
Tudo segue sem grandes abalos até o surgimento da segunda onda de inovação: a dos
aplicativos P2P (peer-to-peer) - Napster, Gnutella etc. Estamos em 2000. Um ano de muitas
loucuras… Tais aplicações permitem aos usuários se comunicarem diretamente, sem necessa-
riamente envolver servidores centrais. Fazem de qualquer computador na rede um servidor
de onde parte e de onde chega conteúdo digital de todo tipo, de simples mensagens de
texto a CDs de música. Qualquer computador da rede tornava-se assim um centro de audi-
ência natural, por fora dos grandes portais. Mais que isso: por fora dos modelos tradicionais
de venda e distribuição de conteúdo. Napster foi o caso exemplar. O que se destaca, nesta
segunda onda, é a descentralização na distribuição de conteúdo digital. Vale dizer que os
abalos provocados por esta onda foram enormes e ainda estão longe do fim - que o diga a
indústria fonográfica.
Chegamos então a 2002, ano em que os blogs se consolidam. Surgem também os fo-
tologs. E mais que tudo: surgem as ferramentas de redes sociais. São muitos os exemplos:
Friendster, Linkedin, last.fm, del.icio.us, Orkut, digg e muitos outros.
Vejamos um caso: o delicious.com. Trata-se de um repositório onde qualquer internauta
pode guardar endereços de seus sites favoritos, de forma bem organizada, usá-los a partir
de qualquer computador, e ainda colocá-los à disposição de todos os participantes da co-
munidade. O conteúdo do del.icio.us é assim o próprio rastro das atividades de milhares de
internautas na rede.
Vejamos outro exemplo: o last.fm. Uma rádio em rede onde os participantes ouvem e
classificam livremente suas músicas preferidas, compartilhando na comunidade dicas e pre-
tecnologia :: 65

"“ÉOpreciso
que secriar
destaca, nesta
as casas, terceiraas
os prédios, onda, é ae difusão,
praças a pulverização
principalmente as placas
de
de microcentros
sinalização.” de audiência, ou seja, conteúdos em profusão que
interessam a poucos por vez, mas interessam muito"

ferências (playlists). Desse modo, nichos específicos de gosto musical acabam formando, naturalmente, pequenas
audiências segmentadas.
Qual a novidade nesses dois exemplos? A novidade é a força criadora intrínseca (os chamados “efeitos de
rede”) que emerge da web, a partir da atividade rotineira e natural de seus milhões de usuários. E o caso da Wiki-
pédia? Enciclopédia na web criada e atualizada pelos próprios internautas, num modelo colaborativo de produção
de conteúdo, no qual, por “seleção natural”, os verbetes vão sendo melhorados e atualizados.
Creio, assim, que a esperança na web como um espaço criativo, livre e global, onde a rede produz seu pró-
prio conteúdo relevante - de enciclopédias a blogs até simples playlists -, ganha novo alento.
O que se destaca nesta terceira onda é a difusão, a pulverização de microcentros de audiência, ou seja,
conteúdos em profusão que interessam a poucos por vez, mas interessam muito. E mais: repentinamente, tais
conteúdos podem alcançar enorme sucesso de audiência, sem nenhuma ação de marketing espetacular. Falo
do seu blog, dos blogs e fotologs dos seus amigos, das tags no delicious, das wish lists e plogs na Amazon, dos
comentários no digg, das recomendações profissionais no linkedin, e de tantos outros conteúdos cuja autoria
emerge e se organiza de modo inteligente, naturalmente, a partir da vida digital de milhões de pessoas. Isso é
web 2.0.
Resta uma pergunta: a web 2.0 já tem sucessor? Sim. Hoje já se fala numa web 3.0, onde a idéia principal é a
de software oferecido como serviço, pela própria rede, por grandes, médios, pequenos ou micro fornecedores,
sob demanda e pago por uso transacional. Parece que uma nova onda está em formação...
66 :: arquitetura da informação

Luiz Agner
Guilhermo Reis
Ilustrador e designer. Doutorando em Design pela PUC-Rio, é professor da Escola de Comunicação e
Especialista em Arquitetura de Informação e Usabilidade. É autor do Kit de Conhecimento sobre AI
Artes da UniverCidade e da pós em usabilidade de interfaces da PUC-Rio. Além de dar aulas, trabalha
(http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos
atualmente no IBGE. É autor do livro “Ergodesign e arquitetura de informação: trabalhando com o
websites do Banco Real.
usuário” (Quartet, 2006).
reis@guilhermo.com
luizagner@gmail.com

Design e Arquitetura de Informação


Um milhão de novos usuários inserem-se no mundo digital a cada quatro meses, em nosso
país. Como disse Peter Morville, o Brasil é uma sociedade de massa e precisa de mais arquitetos de
informação atuando no mercado. A educação é a chave para isso.
A importância da arquitetura de informação reflete o crescimento da população de pessoas
comuns conectadas aos espaços informacionais. Reflete as necessidades das organizações na
economia global, e a maior compreensão do comportamento humano e de seus aspectos cognitivos,
durante a interação com os sistemas.
Com um volume cada vez maior de informações disponíveis, a crise da sociedade atual é como
transformar informação em conhecimento. Mais informação deveria representar maior compreensão
para guiar a nossa atuação no mundo. Mas não é o que ocorre na prática! O famoso semiótico
Umberto Eco admitiu certa vez que não havia diferença nenhuma entre o New York Times de
domingo e o Pravda, jornal oficial da antiga União Soviética - quando se tratava de impedir o acesso
da população a informações de seu interesse.
Para ajudar a combater a verdadeira cortina de fumaça informacional, é que entram em cena
os conceitos do ergodesign e da arquitetura de informação. Quando eles são aplicados às interfaces
de sistemas, estão geralmente em defesa dos seus usuários. Ou seja, de nós - os trabalhadores,
consumidores e cidadãos.
A confusão entre transmitir dados e criar mensagens com significado teve a sua origem na
atenção demasiada dada aos computadores e na pouca atenção dada aos seres humanos. São os
problemas da usabilidade da interação humano-computador.
As tecnologias de informação e comunicação têm alterado substancialmente o modo como
a informação é organizada e acessada, assim como a quantidade de informação disponível. Por
isso, não é surpreendente a emergência de uma nova profissão para lidar com essas questões: a
arquitetura de informação.
A localizabilidade das informações (ou findability) é o grande conceito da área. Além disso, a
arquitetura preocupa-se também em desenvolver produtos compatíveis com as necessidades de quem
vai utilizá-los. Ou seja, com a usabilidade. Além de ser uma abordagem de pesquisa, a usabilidade pode
ser considerada uma ideologia. Ela implica na crença em certos direitos inalienáveis do homem, como:
- o direito de ser superior à tecnologia;
- o direito de poder controlar o computador;
- o direito à simplicidade;
- e o direito a ter seu tempo respeitado.
O foco da arquitetura de informação é o projeto de ambientes informacionais que forneçam aos
usuários recursos para transformar suas necessidades em ações e atingir seus objetivos com sucesso.
arquitetura da informação :: 67

"A confusão
“É preciso entre
criar transmitir
as casas, dadosase praças
os prédios, criar mensagens com signifi
e principalmente cado
as placas
teve a sua origem na atenção demasiada dada aos computadores e na
de sinalização.”
pouca atenção dada aos seres humanos"

Por isso, a arquitetura de informação é uma atividade inserida no campo da ergonomia.


Como tradição, nas empresas, os designers e programadores são contratados e pagos para enfatizar a dimensão
racional em detrimento do ser humano e do seu contexto (as dimensões ambíguas). A ênfase e o foco estão sempre
na máquina, e não no usuário. No olho desse furacão, os designers, às vezes, perdem a noção de que não estão lá
para desenhar os produtos em si, mas para desenhar o relacionamento dos produtos com os seres humanos. Seria
importante que os conceitos interdisciplinares que definem a AI pudessem ser melhor compreendidos. Para que
possam ser bem aplicados nos cursos de graduação que pretendem formar designers de interfaces, provedores de
conteúdo ou gestores de espaços informacionais.
Se a educação é a chave para o sucesso, a área acadêmica precisa mostrar logo a que veio. Ainda falta no
meio acadêmico uma compreensão ampla dos conceitos relacionados à arquitetura de informação como processo
interdisciplinar. Acho que tanto entre estudantes quanto entre docentes. Ainda bem que essa realidade está
mudando rapidamente, apesar de ainda haver carência de bibliografia em português. O livro que eu escrevi há pouco
(“Ergodesign e arquitetura de informação - Trabalhando com o usuário”) é uma forma de procurar contribuir.
Crédito da foto de Luiz Agner: Julia Caldas
68 :: marketing

René de Paula Jr.


Diretor de produtos do Yahoo Brasil. É profissional de internet desde 1996, passou pelas maiores agências
e empresas do país: Wunderman, AlmapBBDO, AgênciaClick, Banco Real ABN AMRO. É criador da “usina.
com”, portal focado no mundo on-line, e do “radinho de pilha” (www.radinhodepilha.com), comunidade de
profissionais da área.
rene@usina.com

A primeira mega-máquina
Títulos enganam. Esse, por exemplo, é um desses. Se você o viu no índice ou na capa e veio
correndo ler a íntegra, é porque imaginou que eu ia falar sobre:
· playstation 4 de pulso.
· o novo X-XBox implantável no cérebro.
· alguma câmera nova da Sony em que todos saem lindos. Todos.
· um novo supercomputador da IBM que entende, enfim, o ugá-gá dos bebês.
· um celular que conversa sozinho com quem não tem amigos.
· uma Ferrari movida a uísque e Viagra para milionários idem.
· um novo satélite militar americano capaz de depilar 100 mil terroristas ao mesmo tempo.
De cabo a rabo. Com dor, claro.
Deixe-me dar, então, uma boa e uma má notícia. Primeiro a má: não é nada disso. Agora
a boa: estou falando de você.
Na verdade, estou falando de todos nós. Na verdade, estou falando de um xerox velho que
devo ter perdido no porta-malas de algum carro meu (destino fatal de todo xerox grampeado),
e cujo autor só uma boa busca vai ser capaz de resgatar. (Acho que vou perguntar no Yahoo!
Respostas para prestigiar meus nobres colegas :) )
Faz quanto tempo isso? Uns 20 anos? O que me consola é, se um dia encontrar o tal xerox
amarelado, o assunto não vai ter envelhecido nem um pouco, e por duas razões:
1. o tema do “A Primeira Mega-Máquina” eram os faraós construtores de pirâmides, e 20
anos a mais ou a menos não fazem um grão de areia egípcia de diferença.
2. nós, sem nenhum faraó para nos azucrinar, estamos criando coisas faraônicas a cada dia.
A tal da mega-máquina egípcia não era de aço, era de carne. Ou melhor: as engrenagens
eram de carne e osso, o combustível era entusiasmo e fé (e alguma cerveja egípcia, imagino).
Nada disso, porém, teria levantado uma palha sem algo inédito: organização.
Gente aos montes nunca faltou no mundo, mas a grande sacada do faraó é que, com um
pouco de coordenação e um propósito comum, essa gente toda vira uma mega-máquina e faz
coisas antes inimagináveis. Não acredita? Pergunta pra Esfinge :)
Foi tudo uma questão de tecnologia... humana: uma boa equipe de escribas, uns bons
geômetras, outros tantos capatazes e proto-engenheiros e arqueo-arquitetos e voilá, gente
iletrada vira... uma potência construtiva e pedras brutas viram... o Vale dos Reis.
Seis mil anos depois estamos de novo construindo algo monumental, desta vez sem
chibata, sem faraó nem areia entrando no chinelo. Eu, você e mais 1 bilhão (isso mesmo,
somos 1 bilhão de internautas) construímos com nossas próprias mãos comunidades,
produzimos conteúdo, publicamos o que bem entendemos e levantamos bit a bit esse
work-in-progress que é a Web 2.0.
Web 2.0, para mim, é gente. Ponto. Ajax? Antrax? Botox? XML? Sandra e Miele? Na boa,
isso para mim é o de menos. O que conta, para mim, é gente. E gente pode fazer milagres... ou
marketing :: 69

"Criar um ambiente colaborativo é mais do que pendurar


numa página uma série de ferramentas e truques"

não. Uma ferramenta mágica na mão de pessoas pode operar maravilhas... ou não.
Se uma novidade não conquistar corações e mentes vira badulaque, traquitana, quinquilharia no museu
dos grandes micos.
Gente é o corpo e alma da Web 2.0. E gente não funciona sempre igual. Aliás, gente não funciona sempre.
Ao menos, não da maneira que você espera.
Qual o segredo, enfim, para trazer à tona o melhor das pessoas? Como transformar interesses pessoais em
interesse pelo bem coletivo? (Chicotada não vale, ok? Nem poções mágicas.)
Eu arrisco: existe uma “arquitetura da generosidade”, uma “mecânica da participação”, uma “química do
relacionamento”, “elementos catalíticos de colaboração”. Well, eu acho que existe :)
Criar um ambiente colaborativo é mais do que pendurar numa página uma série de ferramentas e truques.
Criar um ambiente colaborativo significa cativar a confiança de pessoas, deixá-las à vontade e sem medo,
reconhecer cada gesto “colaborativo” e deixar claro sempre o benefício ímpar de se ter um espaço onde o
melhor de cada um pode vir à tona.
Sob condições favoráveis, pessoas fazem maravilhas. Mas... como criar e garantir as tais condições
favoráveis? Well, é uma arte. E ciência também ajuda.
Quem vai mover e se mover nesse espaço social? Adolescentes? Então, pesquise sobre as motivações e
dilemas e barreiras e receios e deleites dos adolescentes. Como eles se organizam? Como eles defi nem seu
território? Com gírias e modinhas? Com uma mecânica complexa de reputação e identidade e diferença? Com
SMS e instant messengers? Scrapbooks?
Seja como for, vai ser bem diferente de um espaço para neurocirurgiões. Ou para calouros de faculdade.
Ou para veteranos de faculdade. Ou recém-formados. Ou formandos. Erre a fórmula e o energético de uns
vira o purgante de outros.
Cada grupo e cada fase da vida têm seus códigos próprios, seus espaços e dinâmicas. Respeite isso,
alavanque isso, identifique o que é imperdoável e o que é venerado e desenhe o ambiente como quem
desenha cidades: com praças, ruas, espaços privados e públicos, anonimato e reconhecimento, áreas de
lazer e locais de trabalho.
Nós estamos descobrindo a cada dia do que somos capazes, e isso é bárbaro. E você, meu caro, assim
como eu e todos os que estão com a mão na massa, temos um papel nessa história. Quem cruzar os braços
é uma múmia.
70 :: bula da Catunda

Marcela Catunda
Trabalhou na TV Globo, TV Bandeirantes, TV Gazeta, Manchete e SBT. Foi redatora da DM9DDB
e Supervisora de Criação de Mídia Interativa da Publicis Salles Norton. É sócia do site Banheiro
Feminino, está no Orkut e trabalha como autônoma.

blog - http://pirei.catunda.org
marcelacatunda@terra.com.br

É coisa nossa!
E o estacionamento? É por conta nossa.
E a gasolina? É por conta nossa.
E o almoço perto do cliente? É por conta nossa.
É assim que me sinto muitas vezes indo e voltando das reuniões de freela, num show
de calouros com o som dos anos oitenta pra depois não ganhar nem 10 mangos (que nos
anos oitenta era uma grana). Isso se não tiver pegadinha do “Mallandro”: “Háááááá! Você
pode pegar seu pagamento mês que vem? Glu-gluuu, iê-iééééééééé!!!” Em 2007, gostaria
que as coisas fossem diferentes.
Passei o ano de 2006 como Diretora de Criação, mas resolvi voltar para a vida de ser
freela no ano que tá aí. Tô ficando especialista em pedir demissão. Acho que eu entro na
sala dos caras e eles pensam:
- Lá vem a Catunda se demitir... (risos) E eu me demito mesmo. Seria cômico se não
fosse trágico.
A verdade é que estou ficando mais velha e cada dia com menos paciência para o lado
negro da força dos ambientes coorporativos. Até o mais forte dos Jedis teria problemas
em lidar com uma dedada no olho. Nem Obi Wan Kenobi está preparado para uma briga
de puxão de cabelo e beliscão. Já pensou o Darth Vader brigando igual a uma menininha?
Picuinhas, sacanagens e afins: Tô fora!
D u r a n t e m u i t o t e m p o a c re d i t e i s e r p o s s í v e l m u d a r o m u n d o , a g o r a j á t ô m e
conformando em mudar apenas a minha vida. De repente se cada um de nós fizer uma
mudança pro bem, o mundo muda pra melhor. Eu mudei bem, pra bem longe do endereço
da minha ex-mesa. Agora estou em casa de novo, reaprendendo a ser freela, me adaptando
a escrever sem fumar (larguei o cigarro), longe dos amigos que ficaram lá e pensando
bem antes de sair por aí oferecendo trabalho. Que trabalho? Aquele que te comeu atrás
do “armalho” (que piadinha péssima), mas é sério. A gente precisa tomar cuidado pra na
hora do desespero não pegar a primeira oportunidade e jogar fora nossa liberdade. É
impressionantemente mais fácil encontrar um emprego fixo do que achar empresas que
queiram um relacionamento “freela” com a gente. É sempre aquela coisa: te quero, mas te
quero só pra mim. Te quero muito. Te quero agora, pela manhã, a tarde, a noite. Fala sério!
Que relacionamento mais obsessivo é esse? Me deixa. EU SOU FREE.
O tempo de 2006 passou e agora que eu voltei a ser free já me deparei com a dura
realidade da minha escolha: gastei uns 100 mangos só de estacionamento e queimei uns
bons quilômetros de gasolina. Fora aquele almoço com o cliente, aquele que o cara te leva
num lugar legal achando que você tem grana e na hora da conta divide pelo número de
pessoas presentes na mesa, sem sacar que você comeu tão somente uma salada de alface
bula da Catunda :: 71

"Com menos paciência para o lado negro da força dos


ambientes coorporativos. Até o mais forte dos Jedis teria
problemas em lidar com uma dedada no olho"

com rúcula e rabanetes de 18 mangos (o que já é um assalto). Tenha dó de mim, o senhor comeu um filé
ao molho madeira.
Não é simples ser freela, a gente precisa de fluxo de caixa e aquele pensamento positivo quando
lembra que “não tem nada pra entrar nesse mês”. Auummmm! Mas a vida continua e esse ano vai ser lindo.
Pensamentos positivos nunca são demais, criemos então uma realidade linda e quente onde, caminhando
pela minha marina particular entre iates luxuosos que brilham escandalosamente com o reflexo dourado
do sol de Miami... (me deixa ser cafona que esse peptídeo é meu) passo a mão num daqueles celulares
platinados, cravejados de diamantes e digo “Manda comprar tudo, agora!”. Não sei que “tudo” é esse,
mas os mega milionários do cinema sempre pegam o celular para mandar comprar “tudo”, então eu quero
“tudo” também ora, bolas. O Octopus, do Paul Allen, ia parecer um caiaque perto dos meus iates. O tal
do Airbus 380 ia ser o meu AeroCatunda, ou Catunda Force One.
E essa coisa de criar realidade funciona. Tenho uma amiga que olha o saldo dela negativo de 3 paus
no banco e enxerga um sinal de positivo no lugar do menos e um 8 no lugar do 3. Pô! Em menos de
um minuto, ela sai da miséria e pula pra classe dos bem sucedidos. Tem investimento melhor do que
pensar no positivo?
E pensar pra lá de positivo é uma das minhas promessas para 2007, bem como comprar um bloquinho
de Zona Azul, criar coisas legais, escrever muitos livros* e chegar sempre com o estômago relativamente
forrado em reuniões perto da hora do almoço. Nham! Nham.

* Você já leu “Eu Sento, Rebolo e Ainda Bato um Bolo”? Então, leia! É meu último livro e está à venda nas melhores lojas do ramo. E fique de olho que
virão mais em 2007.
72 :: webdesign

Luli Radfahrer
PhD em Comunicação Digital, já dirigiu a divisão de internet de algumas das maiores agências de
propaganda e de alguns 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.
luli@luli.com.br

Sobre marretas, consumo, atitude e web 2.0


Como ser estrela em uma sociedade que o espetáculo é a única forma
viável de expressão
Tudo parece ter começado como uma brincadeira de um grupo de estudantes
canadenses que não tinham mais o que fazer. Cansados de todo o barulho de mídia para
o lançamento do iPod nano, eles tiveram uma idéia tão inesperada quanto divertidamente
genial: coletar dinheiro de um grupo de amigos, ir até uma loja da Apple, lá comprar um
desses aparelhinhos e destruí-lo no balcão da loja. Registrando, é claro, tudo em vídeo.
A idéia, de tão completamente absurda, acabou atraindo a curiosidade geral. Aos poucos,
mais e mais colegas desses malucos resolveram colaborar com cinco ou dez pratas, por diversos
motivos. Imagino que o principal deva ter sido a diversão com a coragem e cara-de-pau desses
doidões. Algo do tipo que você certamente já fez ou viu fazer na vida, como “te pago uma
cerveja se você tiver a coragem de pular naquela piscina”. Por isso, não adiantava apenas
destruir o brinquedo: era fundamental registrar o ato.
Gosto de imaginar que outro motivo bastante razoável para contribuir com dinheiro
para tal plano diabólico possa ter sido uma resistência inconsciente à cultura do design e ao
culto aos objetos como fetiche pós-moderno. Olhe à sua volta e você perceberá que para
a maioria das pessoas é mais importante o aparelho que seu conteúdo. Nessa relação de
valores tortos, ter um iPod é mais importante que ter nele músicas de boa qualidade, ter um
notebook de última geração é muito mais importante que qualquer trabalho realizado nele,
um carrão importado é gigantescamente mais importante que o imbecil que o dirige e assim
por diante... irritados com a ditadura do consumo, muitos podem ter pago o equivalente a
uma refeição leve no McDonald’s local para se ver vingados por um anti-herói que marreta
um ícone adorado por muitos de forma quase religiosa.
Seja qual for o motivo, racional ou irracional, ativista ou simplesmente mega-nerd, o fato é
que a brincadeira acabou se transformando em um website (smashmyipod.com). Nele, nada de
explicações. Apenas um fórum bagunçado, um design vagabundo e um monte de informações
contraditórias, nenhuma delas de conotação neocomunista ou histérico-ong. Ainda bem. Como
um bom filme ou piada, qualquer esforço para explicá-lo só tende a diminuir seu impacto.
Graças a ferramentas de transferência de microcrédito, como o PayPal, os malucões acabaram
por conseguir os dólares de que tanto precisavam. E cumpriram a promessa, para desespero dos
presentes e do staff da loja que, chocados diante de tal sacrilégio, chamaram a segurança e, no
melhor estilo Jihad, proibiram os moleques de entrar naquele shopping center pelo ano seguinte.
Para muitos de nós, viciados (ou simplesmente acomodados) com o consumo,
uma punição deste porte já seria o suficiente. Mas não subestimemos nossos heróis e
webdesign :: 73

"Aquilo que se chama por aí no mundo de web 2.0 nada mais


é que a real possibilidade de dar ao indivíduo comum uma
voz para que ele possa se expressar"

a gigantesca falta de noção que só os vinte e pouquíssimos anos são capazes de providenciar. Meses
depois, foi a vez do Xbox.
Dessa vez, a estratégia precisava ser refinada. Não bastava chegar na loja e quebrar o brinquedo. Para que
a pancada fosse realmente grande, o website foi usado durante meses para gerar uma espécie de expectativa ao
contrário. Antes do tão esperado lançamento do console, o dinheiro já estava lá. Na véspera do lançamento, eles
acamparam na porta da loja, como muitos outros fãs da tecnologia. Depois de muita espera, chegou a sua vez:
compraram algo que quase ninguém no mundo tinha, só para marretá-lo com vontade. A Microsoft arregalou os
olhos. Seus inimigos espalhados pelo mundo exultaram.
No final de novembro, eles repetiram a dose com o PS3 e com o Nintendo Wii. Cientes que o espetáculo
é muito mais importante que o aparelho, sua vestimenta fica mais e mais arrojada a cada atividade. Os
depoimentos e gestos de fé, paciência e fascínio fazem a alegria dos repórteres e câmeras de TV, todos
crentes que ali está um fiel exemplar dessa “nova geração”. Flashes pipocam. Pouco depois, a marreta desce,
para o desespero de consumidores, funcionários, segurança e público geral completamente perplexo. Em
desprezo, alguns se referem ao ato como coisa de nerd, quando é justamente o contrário.
Para minha enorme alegria, a única coisa que não muda em suas atividades cada vez mais populares e
arrojadas é seu discurso. Nada de político, nada de humanitário, nenhum protesto zangado contra esta ou
aquela corporação, apenas o enorme desprezo e desapego de alguém que comprou um objeto - e, exercendo
seu pátrio poder de direito legítimo, o destrói. Que alívio, meus heróis não se renderam ao “sistema”.
Uma atitude dessas pode não parecer resistência, mas é. E como. Porque faz pensar, leva a rever,
questiona o que aceitamos como “certo” e “errado”. Há menos de um século, Marcel Duchamp expôs como
arte uma coleção de objetos como uma roda de bicicleta e um ferro de passar roupa. Pintou um quadro de
um cachimbo e escreveu embaixo que aquilo não era um cachimbo. Também não foi levado a sério.
Os vídeos foram parar no site deles. Os aparelhos destruídos são negociados no eBay. Cada aparelho
quebrado (iPod, PS3, XBox, Wii) ganhou um novo site. Neles, nenhuma explicação. As críticas e ofensas estão
lá, abertas e explícitas. Algumas têm fúria taleban.
Antes que você pergunte obviedades do gênero “mas o que isso tem a ver com design” ou “não seria
melhor dar esse dinheiro para os pobres”, pense duas vezes: aquilo que se chama por aí no mundo de web 2.0
nada mais é que a real possibilidade de dar ao indivíduo comum uma voz para que ele possa se expressar. Se
o que ele tem a dizer é relevante, não faltarão ouvidos no mundo. Se ele puder ajudar as pessoas a tomarem
consciência do vazio existencial de uma sociedade de consumo, sua contribuição será inestimável. E isso
certamente poderá ajudar muito mais as populações necessitadas que um punhado de notas verdinhas.
A propósito, por uma divertida coincidência, o link de sua última destruição chegou para mim uma semana depois do
ato, exatamente no dia em que ONGs barbudas, cabeludas e furiosas pregavam o “buy nothing day” - dia internacional
de resistência ao consumo de massa, instigando as pessoas ao redor do mundo a não comprarem nada. Irônico, não?
A Brasil Hosting assume a missão de “prestar os Parceria Tehospedo e você, Designer: registro
Promoção assine um plano de hospedagem efetue o de domínio totalmente grátis e até 3 meses
pagamento anual e melhores serviços, oferecer preços justos e respeitar
o consumidor”. Assine agora mesmo um dos nossos de hospedagem para oferecer a seus
ganhe um pendrive ou uma webcam. Confira o clientes. Consulte condições no site.
regulamento em nosso site. planos e sinta a diferença de um hosting com ética.
www.brasilhosting.com www.TeHospedo.com.br
www.siweb.com.br tel: RS (51) 3227.7727 / capitais de SP/RJ/MG/DF/
tel: (48) 4052.9591
tel: (11) 4063.8047 PR/SC 4062.1432, GO (62) 4052.1432
atendimento@brasilhosting.com
info@siweb.com.br comercial@tehospedo.com.br

Oferece hospedagem profissional linux e windows com


Você quer hospedagem de site Profissional? Servidores que
recursos grátis como loja virtual, blog, enquete, boleto.
não saem do ar? Então venha conhecer a Datahosting, temos Hospedagem de Sites a partir de R$ 15,00 mensais com
Possui planos de revenda ideais para webdesigners.
plano individual e de revenda, plataforma linux e windows. 30 dias grátis para testar nossa qualidade. Sistemas para
Suporte qualificado 24 horas e registro de domínios.
*Dizendo que nos conheceu através da revista webdesign, Imobiliárias, Concessionárias e Lojas Virtuais Online.
ganha 1 mês de hospedagem grátis. www.portal123.com/ http://www.braghost.com.br
tel: Minas Gerais (31) 3761.2253 braghost@braghost.com.br
www.datahosting.com.br
São Paulo (11) 4052.9253
tel: (11) 6951.2954 - (11) 6939.7305
suporte@portal123.com.br
atendimento@datahosting.com.br

Provedor fundado no ano de 2001, com infra-estrutura Hospedagem de Sites com infra-estrutura no Brasil, 6
Hospedagem de sites com infra-estrutura de altíssimo
própria e datacenter no Brasil. Plataforma Windows anos no mercado, multi-serviços para você e seus clientes.
nível, planos a partir de R$ 8,90/mês. HTML, PHP, CGI,
com suporte integrado à Net 2.0, ASP e PHP5 no Planos Windows e Linux, antivírus, anti-spam, banco de
Flash, FrontPage, DreamWeaver, MySql, e-mail com
mesmo ambiente, contando ainda com MYSQL gratuito dados, relatórios de acesso, disponibilidade de 99,5%.
anti-vírus/spam, suporte 24x7 entre outros recursos.
e SQLServer 2000. www.creativehost.com.br
www.hphost.com.br
www.iphotel.com.br tel: (11) 3849.1166
tel: (11) 6684.9597
tel: (11) 6971.0438 atendimento@creativehost.com.br
info@hphost.com.br

A Informática Online.Net está preparada para hospedar Hospedagem Profissional PHP a partir de R$ 4,90 - R$ 5 mensais ou R$ 50 ao ano. 800MB de espaço em
seu site, nosso DataCenter possui servidores de última Servidores 64 bits Dual Core - Revenda de Hospedagem. disco, 20GB de transferência,PHP, MySQL, Emails
geração, nossos backbones sempre irão propiciar ao seu Sua melhor opção, Confira! e subdomínios ilimitados.Também registramos seu
visitante uma alta velocidade e estabilidade de conexão. www.infotecnico.com.br domínio. Atendimento imediato pelo MSN.
www.informaticasp.com.br tel: (48) 3235.2761 www.triangulohost.com.br
tel: (11) 6944.2566 contato@infotecnico.com.br tel: (34) 3316-2433
sac@informaticasp.com.br hostmaster@triangulohost.com.br

Hospedagem de Sites, Revenda de Hospedagem e


Registro de Domínios, tecnologia ASP, PHP e .net no
Hospedagem de sites em plataforma Linux e Windows.
mesmo plano, teste grátis por 30 dias e comprove a Hospedagem de Sites com segurança e estabilidade
Registro gratuito de domínios internacionais, acesse o
qualidade de nossa infra-estrutura e atendimento. total para os clientes mais exigentes nas plataformas
nosso site e participe de nossa promoção.
www.redehost.com.br Linux e Windows. Infra-estrutura de altíssima qualidade.
tel: Rio Grande do Sul (51) 3042.2030 www.rjhost.com.br Planos de Revenda e VPS.
São Paulo (11) 4063.7574 tel: (21) 2577.5545 www.ativahost.com
Rio de Janeiro (21) 3527.0848 vendas@rjhost.com.br tel: (21) 2238-3407
comercial@redehost.com.br vendas@ativahost.com

ZARP HOST
E-mail de 1GB, webmail com leitor de notícias e disco virtual.
Hospedagem de Sites
Soluções completas para webdesigners e desenvolvedores.
Qualidade, estabilidade e segurança. Oferecemos registro de domínios e hospedagem em
www.speedhost.com.br ASP, PHP e CGI. Planos a partir de R$ 9,90.
tel: São Paulo (11) 5644-1047 www.zarphost.com.br
Rio de Janeiro (21) 3523-0387 contato@zarphost.com.br
Paraná (41) 3015-3077

Para anunciar nesta seção, envie um e-mail para publicidade@arteccom.com.br, com o título "busca host" ou ligue para (21) 2253.0596