Ed37

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

Saiba como aplicar a teoria na prática

E D I T O R A

I SSN 1806 - 0099

9 771806 009009

00037

R$ 9,90

Estudo de caso: o projeto interativo da Brastemp (AgênciaClick) E-mais: agências digitais conquistando o mercado internacional Entrevista: padrões web, uma barreira ou um caminho?

Tecnologia: trabalhando com criação em ActionScript

4 :: quem somos

Editorial

Equipe Direção Geral Adriana Melo

Cadê o recheio??????

adriana@arteccom.com.br

opinião sobre um produto deles que eu estava consumindo. Entrei no site.

Achei o contato... Que bom! (é, algumas vezes não encontramos o contato).

Quando me deparo com um formulário enorme, com endereço, profissão, estado civil etc., pensei: “o interessado deveria ser o fabricante, me facilitar o acesso, afinal, eu poderia contribuir para a qualidade de seu produto e para suas vendas. Eu estaria até disposta a perder 1 minuto, pela credibilidade da marca, mas não 5!”. Fechei. Existem outras marcas por aí.

Então, tanto se fala de Web 2.0, foco no usuário, troca de experiências, mas o básico ainda não é feito. Enfim, me pergunto: temos tanto tempo para interagir assim? Com acesso a e-mail, celular, MSN, Skype... Definitivamente não. O tempo vai continuar sendo o mesmo, nosso dia vai continuar tendo 24 horas. E agora ainda temos que encontrar tempo para conversar com as marcas dos produtos que consumimos! Conversaremos apenas com as marcas que nos encantarem e olhe lá. Então, nosso desafio agora é criar ambientes que realmente atraiam a atenção do usuário. Será um processo de seleção natural. O nosso cliente não deixará de conversar com um amigo para trocar

Direção de Redação Luis Rocha luis@arteccom.com.br

Criação e Diagramação Camila Oliveira camila@arteccom.com.br

Leandro Camacho leandro@arteccom.com.br

Ilustração Beto Vieira beto@arteccom.com.br

Publicidade Bruno Pettendorfer Débora Carvalho publicidade@arteccom.com.br

Gerência de Tecnologia Fabio Pinheiro fabio@arteccom.com.br

Desenvolvimento Web Cadu Sant'Anna cadu@arteccom.com.br

Financeiro Cristiane Dalmati cristiane@arteccom.com.br

Atendimento e Assinaturas Luanna Chacon luanna@arteccom.com.br

experiências com nossa marca. A não ser que... Aí que estará a oportunidade de demonstrar seu diferencial.

Bem, mas comecei falando de interatividade porque a WEBDESIGN pretende, ainda este ano, focar bastante neste assunto. Queremos trazer para vocês, em 2007, as melhores soluções, estratégias e experiências

A Arteccom é uma empresa de design, especializada na criação de sites e responsável pelos seguintes projetos: Revista Webdesign :: www.arteccom.com.br/webdesign Concurso Peixe Grande :: www.arteccom.com.br/ webdesign/peixegrande Encontro de Web Design :: www.arteccom.com.br/encontro Fórum Internacional de Design e Tecnologia Digital :: 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

coleção super especial “Café com Criação” e outras surpresas.

www.arteccom.com.br

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

:: 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.

Ontem, eu ia enviar um e-mail para a Bauducco. Queria dar minha

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

contato pág. 6 emails

pág. 56 tecnologia na web: ActionScript pág. 60 tutorial: Produtividade 2.0 - Parte 3

pág. 6 fale conosco com a palavra fique por den tro pág. 8 métricas e mercado pág. 10 direito na web pág. 11 post-it

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

pág. 64 tecnologia: Abel Reis pág. 66 arquitetura da informação: Luiz Agner pág. 68 marketing: René de Paula Jr. pág. 70 bula da Catunda: Marcela Catunda pág. 72 webdesign: Luli Radfahrer

6 :: emails

na web Assunto: Direito PC ou Mac? Gostaria de saber se a revista já publicou alguma matéria sobre qual a melhor plataforma para um webdesigner trabalhar: PC ou Mac? Falo em termos gerais, desde a construção do layout até a publicação do site.

Anderson de Almeida almeida@animabits.com.br

Oi, Anderson, como vai? Ainda não publicamos nada sobre o assunto.

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

tamanhos 1024x768 (35%) e acima

Ferreira vem explicando como

de 1024x768 (2%).

funciona a implementação de

Uma dica é usar alguma

sistemas de controle de versão. Vá

ferramenta de métricas web. O

até a página 59 e confira um pouco

Google Analytics (www.google.

dessa história. Em breve, sua

com/analytics/pt-BR) é uma boa

sugestão de pauta vai virar tema

Tenho algumas revistas e as que

opção: é gratuito, além de revelar

de reportagem, ok? Obrigado pela

eu tenho realmente são muito

qual o tipo de resolução de tela

ajuda e continue participando!

boas. Gostaria de saber se tem alguma edição com uma biblioteca

mais utilizado pelos usuários que acessam o seu site.

Assunto: Referências sobre livros

naconsulta web Assunto: Direito Fonte de

de referência com bons livros nacionais sobre webdesign. Se

Assunto: Direito Metodologia de na web trabalho

Na verdade, existe uma previsão

Sou estudante de Desenho

não tiver, gostaria de sugerir para

Industrial e acompanho a Revista

uma próxima edição.

há muito tempo. Recentemente,

Dayvison Santos mayvison@hotmail.com

de produzirmos um debate sobre

Trabalho em uma fábrica de

num trabalho da faculdade, tive 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

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!

diretor. Qual é a estatística de

dos arquivos? Como é a

Evelyn Gomes 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 wcfdesign@yahoo.com.br

e designers atualizam

Evelyn! É um grande estímulo para

Edição de novembro:

constantemente o mesmo portal?

a nossa equipe saber que a revista

- Página 44, onde se lê “um dos

Luciane, pela urgência, já enviamos

Juliana Diniz jds.juliana@gmail.com

tem ajudado em seu crescimento

envolvido”, por favor considerar

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”.

na web Assunto: Direito Resolução de tela

a informação por e-mail. Mas

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.

Z I L FE

2007

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 (%)

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: TIC Domicílios 2006 (www.nic. br/indicadores) / 2.286 entrevistados

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

83%

marketing como a ferramenta de comunicação digital mais utilizada no país.

Para o futuro, a previsão envolve o crescimento no segmento de conteúdo para dispositivos móveis (76%), seguido pelo chat on-line (59%). Fonte: Associação Brasilei-

705 mil Esta é a estimativa de sites referenciados por domínios brasileiros. Isso porque, dos mais de um milhão de domínios registrados no Brasil, muitos não estão associados a um site. Há casos em que sites são apontados por mais de um domínio.

Fonte: Hostmapper (www.hostmapper.com.br)

ra de e-Business (www.ebusinessbrasil.com.br)

369 Segundo pesquisa divulgada em novembro de 2006, este era o total de empresas de hosting operando no mercado brasileiro. Juntas, elas respondem por 65,1% dos domínios registrados no país.

Fonte: Hostmapper (www.hostmapper.com.br)

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

...das compras on-line realizadas no Brasil são efetuadas em sites locais e não

87%

em estrangeiros. As categorias que se destacam são: viagens (50%) e lojas de departamento (25%).

Fonte: Camara-e.net (www.camara-e.net)

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 versões super recentes do Vista e do Office 2007, que

sões. Sensacional!

(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 nas atuais discussões jurídicas sobre a

detalhes são decisivos, em muitos casos), 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

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

Gilberto Martins de Almeida

Gerente Jurídico da IBM, onde trabalhou por 11 anos, no Brasil e nos EUA. Sócio de Martins de Almeida - Advogados, escritório especializado.

Envie sua dúvida para: redacao@arteccom.com.br

hospedado ou num texto postado.

Outra medida possível é fazer constar em portais e páginas “Termos de Uso” ou

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

sabido, todo contrato é considerado “lei

muita clareza, que a responsabilidade pelo

entre as partes”, porém somente entre

conteúdo será exclusivamente do respectivo

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 no novo Código Civil;

Além de contratos adequados, há 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

entro , d r o p 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

Com ou sem tabelas?

Quer conferir se seu site está 100% tableless? Pois então, a dica é acessar a ferramenta on-line w3tableless (http://w3tableless.com) e

concisa”, de Richard Hollis, e “Neoconcretismo”, de Ronaldo Brito, são boas pedidas de leitura.

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

Produção acadêmica no design para web

‘ICONS, Web Design’, lançada recentemente pela editora alemã

Para começar o ano, a dica acadêmica começa em ritmo de samba, mais precisamente sobre a importância de Cartola para a música popular brasileira. Estamos falando do projeto “Um sonho que a gente teve” (www.umsonhoqueagenteteve.com.br), apresentado por Claudio Gusmão, Fabio Moita, Letícia Gomes, Marcos Cardinal, Paola Barone, Rafael Ribeiro e Renato Garcia, no curso de Design Digital da Universidade Anhembi Morumbi. Se você possui ou conhece algum trabalho acadêmico interessante, envie sua sugestão para redacao@arteccom.com.br.

TASCHEN. Sob o comando do brasileiro Julius Wiedemann, os livros desta série representam um acervo mundial atualizado em termos de criação e desenvolvimento web. Por lá, é possível descobrir, por exemplo, como criam os profissionais da Croácia, Estônia, Hong Kong, Índia, Suíça, entre outros. Para se ter uma idéia do trabalho realizado, na série ‘Portfolios’, são 200 portfólios de mais de 30 países. O Brasil também marca presença: o trabalho de brazucas como Pablo Marques (www.pablomarques.com) e Vitor Vilela (www.vitorvilela. 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.planob.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 recursos.

Diante de tal experiência, quais seriam as principais diferenças na criação de interfaces para internet e intranet? “Os sites têm uma estrutura relativamente simples, com navegação direta, ricos em informações sobre seus produtos e serviços. São orientados para o consumidor

de então, a Plano B passou a atender todas as demandas relacionadas ao projeto nos últimos três anos”, diz Pedro.

A proposta era transformar o site em uma ferramenta dinâmica que permitisse que os próprios funcionários do festival tivessem autonomia para administrar as informações disponibilizadas na rede. “Desenvolvemos um sistema para gerenciamento de todo o

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 utilização de ícones para orientar a navegação dos colaboradores da empresa. “Eles foram construídos a partir de uma matriz de 25x25 pixels, destacando os tópicos mais utilizados e contribuindo para uma interface mais leve e amigável”.

“Embora o Festival Anima Mundi seja a principal referência para a maioria dos visitantes, a estrutura deveria apresentar os módulos (Festival Anima Mundi, Anima Mundi Web, Anima Mundi Celular e Anima Escola) com o mesmo valor hierárquico.

Outro fator levado em consideração foi a necessidade de modificar completamente os padrões de cores, tipografia e estilos de texto, para cada edição do website. Além disso, a arquitetura 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 trabalho”, 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 diferentes 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 na arte e no design

Responsável pela direção de arte do hotsite “High Definition é Gradiente” (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 do que deveria ser, dado que é inevitável que passemos a

tando botões ou arrastando elementos”. De lá para cá, 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 governo é a falta de um órgão fiscalizador independente

fazer uma faculdade para aprender ferramentas. É jogar 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 popularizados, 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.csszengarden.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 pela ONU revela que apenas 3% dos sites são acessíveis”

a principal ferramenta para o seu desenvolvimento. Em relação ao uso dos padrões web, quando e como devemos procurar desenvolver um site em Flash?

Bechara :: O Flash é uma tecnologia fantástica e até 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 para nossas aplicações ou usando tecnologias mais modernas não deveria ter número de versão. Diga-se de passagem, não vejo absolutamente nada de mirabolante

- Building Accessible Websites Autor: Joe Clark Editora: New Riders Press

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).

Você acredita que a nova versão vai ajudar na disseminação dos padrões web?

Bechara :: Com o lançamento do IE 7, a Microsoft

- Web Standards Solutions: The Markup and Style Handbook Autor: Dan Caderholm Editora: friends of ED

tenta dar uma virada na direção da utilização dos padrõ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.

Fonte: Professor Bechara

28 :: entrevista - padrões web

O IE 7 é uma prova deste comprometimento, com uma evolução em relação à versão 6. Gostaríamos de ver

“Um bom profissional é aquele

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 alfabetização visual” (Luli Radfahrer) Você acorda, abre a janela de seu quarto e se deparaccom o dia amanhecendo. De imediato, avista um grande plano pintado de cores azuis, contrastando com vários blocos de nuvens brancas, que mais parecem grandes e apetitosos algodões-doces. Cachorro, borboleta, rinoceronte e girafa. Isso porque, depois da percepção do todo, você mira sua visão nas nuvens e começa a definir em sua mente quais representações aqueles objetos podem formar no céu.

A passagem acima serve como um bom exemplo da maneira como funciona a nossa percepção visual, além de demonstrar a importância de se trabalhar os detalhes de um projeto gráfico para que a transmissão da informação não seja prejudicada. Mas onde encontrar embasamento conceitual para alcançarmos tal objetivo? Segundo o livro “Gestalt do Objeto”, do professor João Gomes Filho, os estudos e as experiências realizadas pela Escola Gestalt, no campo da Psicologia Perceptual da Forma, são um bom caminho para se construir e justificar as bases de qualquer projeto.

“Gestalt é tudo. Ela é a gramática subliminar da alfabetização visual. Ao se compreender e praticar seus princípios, o designer passa a entender de forma abrangente e completa como funciona a percepção no cérebro humano, e, conseqüentemente, no de seu usuário. Não faz o menor sentido ser expert em Flash, ActionScript, CSS e usabilidade enquanto se é analfabeto em visualização. Quando isso acontece (e isso acontece quase sempre, o contrário é que é raro) o que se tem é um website cheio de truques que piscam e pulam, mas que deixa uma impressão geral de algo mal-acabado, técnico, feio etc.”, afirma Luli Radfahrer, professor-doutor da ECA-USP. “Um projeto gráfico pode provocar todos os cinco sentidos. A teoria da Gestalt apresenta hipóteses sobre as manifestações da forma em diversos meios de manifestação sensorial. No que diz respeito às artes visuais, podemos apontar princípios básicos imprescindíveis: proximidade, semelhança, pregnância, continuidade, fechamento, agrupamento, experiência...”, completa Lucas Hirata, designer da Globo.com. A seguir, confira como esse campo do conhecimento pode ajudar no trabalho de criação e desenvolvimento de sites.

Influências na percepção visual Antes de abordarmos os aspectos que envolvem as leis da Gestalt, é preciso entender quais fatores influenciam na percepção visual da forma em um projeto gráfico.

“As influências são diversas e dependem do tipo e da natureza do projeto gráfico e da natureza, tipo e intenção da mensagem. No entanto, aqui vão alguns parâmetros básicos: adequado posicionamento dos elementos visuais no gride da diagramação (texto, imagens, vinhetas, caixas, blocos etc.) no espaço compositivo; adequado contraste de cores (ou das nuanças e tons do preto e branco) entre os objetos da diagramação; adequação das famílias tipográficas: tipo, tamanho, cor; aspectos relativos à legibilidade, acuidade visual (ergonomia), e assim por diante”, diz o professor João Gomes Filho.

Como exemplo prático deste cenário, Luli exercita nossa imaginação, citando o exato momento no qual entramos em um restaurante. “Sabe aquela impressão de ‘sujo’, ‘opressivo’, ‘suspeito’ ou ‘descolado’ que você tem, mas é incapaz de definir o porquê? Pois é exatamente essa ‘impressão’ que um usuário tem de uma página. Ele não dá a mínima para cores ou acabamento, mas fica com uma primeira impressão que é muito difícil de mudar. Por isso que arquitetos e designers são tão obcecados por detalhes: eles são treinados para ver e analisar aquelas partes que, quando somadas, dão um resultado muito maior que cada componente individual”.

Além disso, não podemos esquecer que o designer do século XXI trabalha com ambientes simulados, o que certamente traz uma série de questionamentos se formos comparar com a maneira como interpretamos um objeto dentro de um espaço físico. “Basicamente, muda tudo: o suporte, o brilho, a posição da página, o ambiente... Como se não bastasse, o objeto gráfico é estático, enquanto o interativo é uma máquina funcional, que demanda certos comandos para dar as respostas certas. Livros têm uma usabilidade pré-determinada e imutável. Quando criança, você aprende a virar as páginas e segurá-lo pelas bordas. Até o fim da vida, essa relação não muda. Compare isso com um game ou celular, por exemplo”, argumenta Luli.

Para Lucas Hirata, a grande diferença está na provocação que cada um dos ambientes (físico e virtual) causa em nossos sentidos. “Projetos digitais podem provocar

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 da unidade de um projeto. “Todos se resumem a um só, quando se conhece bem a Gestalt: o agrupamento de

Análise acadêmica da Gestalt Bate-papo: João de Souza Leite, professor da 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 qualidade é um lixo?”, questiona Luli.

Wd :: O que devemos considerar na hora de trabalhar a percepção visual da forma em um projeto gráfico?

“A fluidez visual se consegue com a transmissão simples e direta da informação” (José Cereja)

Leite :: No mundo contemporâneo, as características do sujeito se afastaram de uma concepção onde a estabilidade do ponto de visão ou de ação desempenhava 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 por isso deixam de ser estruturas.

Pois bem, nesse sentido, lidamos constantemente com

Wd :: Quais características marcam a percepção visual quando analisamos a oposição entre o objeto físico 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 disparidade entre os recursos existentes e as verdadeiras condições do usuário brasileiro.

O conflito entre o potencial tecnológico e artí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 diretamente 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.

Talvez por isso, no mercado brasileiro, com algumas exceções, é comum dispensar do processo criativo uma 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.”

existentes e as verdadeiras condições do usuário brasileiro”

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,

“Cada profissional deve tentar alinhar seu comportamento ao de seu cliente, visando mais liberdade para realizar seu potencial”

o tamanho do pixel) superiores aos dos monitores CRT. Assim, menos pixels cabem na tela, e mais “serrilhadas” ficam as imagens e os textos. Já a largura de banda foi um limitador mais crítico no passado, mas ainda faz com que ferramentas como vídeos e animações sejam escolhas arriscadas.

Felizmente, estas questões são constantes e significativamente melhoradas - ao contrário dos fatores comportamentais, 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, costumam 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 comportamentais são muito improváveis de se modificar sistematicamente. 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 Designer Director na Hello Design www.adhemas.com

da empresa não aprova, ou porque o céu estava meio 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 prazo. Muitas vezes, o projeto chega na produtora com um prazo :: Ludmilla Rossi Diretora geral da Mkt Virtual www.mktvirtual.com.br

relativamente curto para ser desenvolvido e as idéias têm que ser adequadas para esse tempo. Assim, acontece de deixarmos 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 vontade de superá-los pode resultar em design inovador”

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 é descartada ou adaptada.

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 desenvolvimento, 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 cliente 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 difeclaramente na hora de criar as interfaces e as soluções gráficas. Deverenciado 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 simpliiní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. Simtangencia 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

gan

par he

tici 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

VENC

EDORA

vencedor!

e valorizado pelos clientes.

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 obrigatoriedades 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 setor de TI para a Índia, por exemplo, vai começar a acon-

abaixo das grandes agências localizadas na Europa e América 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 conhecimento, uma habilidade muito necessária é a percepção e empatia para percebermos padrões culturais diferentes dos nossos e nos adaptarmos a eles. Ingleses reagem de

“Vale a recomendação de se ter o domínio do inglês e das terminologias específicas da 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 pode surgir como um facilitador nesses quesitos”, diz Santana.

Outra dificuldade está no estabelecimento de canais de prospecção e atendimento. “A falta de flexibilidade e empatia com um cliente diferente do usual podem gerar ruídos de comu-

diferenciam os clientes daqui com os de fora. “Acho que a diferença é, sobretudo, de expectativa e organização. Por exemplo, marcas estrangeiras têm uma estratégia de marketing definida com muita antecedência por seu 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 .

Raramente alguém vai te contactar dizendo que precisa de um projeto 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 levar a prospecção ou a produção para o exterior deve ser analisada em termos fi-

“O fato de nos estabelecermos em um outro país é uma prova de nossa competência e qualidade nos serviços prestados” (Tiago Ritter)

corre muito mais seriamente e estruturadamente”,diz André Matarazzo.

Como conseqüência desta organiza-

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 cumprimento rigoroso dos prazos. “Os cronogramas são

cermos em um outro país é uma prova de nossa competência 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 eletrodomésticos no mercado brasileiro e atinge um público seleto de consumidores. Diante disso, quais são as prin-

“Entendemos que o importante é adequarse a espontaneidade cognitiva dos consumidores” (Ricardo Figueira)

cipais motivações que levam um usuário a visitar o site da empresa? Quais seriam as diferenças entre o consumidor “físico” e o consumidor “virtual” da marca?

res na compra de um monitor novo ou mais potente.

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 ambiente ser real ou virtual.

Procuramos, praticamente em todos projetos, desenvolver 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 freqüência aos diversos meios e canais. É claro que, por outro lado, os consumidores passam a ter expectativas cada vez mais sofisticadas e que só a flexibilidade, a agilidade e as características de um ambiente interativo podem oferecer.

Wd :: A diversidade de resoluções de tela usada pelos usuários ainda é uma questão que merece atenção

Wd :: A combinação cromática do site prioriza tonalidades leves e neutras, como o branco e o cinza, além do uso do laranja para destacar determinadas informações.

Quais fatores influenciaram nesta escolha?

Ricardo :: A Brastemp é uma marca tradicional no mercado, porém altamente moderna e de forte personalidade.

Esse foi um dos principais pontos que determinaram na 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

“O design de um site precisa jogar a favor da dinâmica do negócio do cliente” (Ricardo Figueira)

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

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.

o arquiteto de informação, por exemplo, influencia inclusive na implementação do ambiente tecnológico, de acordo com os fluxos e até a performance das aplicações.

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 desenvolver um entendimento ou cognição pelas áreas-fins do site, sem prejudicar o ritmo de publicação de tudo que é produzido para atender as necessidades diárias da marca.

O design de um site precisa jogar a favor da dinâmica do negócio do cliente. Nesse caso, não adianta muito experimentalismo, o negócio é desenhar um grid inteligente e graficamente bem concebido.

e característicos que sejam, receberão a intervenção dos gostos e características pessoais de seus compradores.

Eu diria que a Web 2.0 é um pedacinho dessa manifestação do conceito de interatividade do mundo com tudo que existe e existirá, inclusive nos meios de produção em larga escala e mais complexos como as indústrias e nas fábricas.

Wd :: Falando em negócios, a Brastemp possui uma á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 de configuração de um eletrodoméstico customizado pelo próprio consumidor. E tudo que de uma forma ou de outra é o “primeiro” necessita de teste. Esse projeto, especifica-

pudesse facilitar a comparação com outros produtos, seja da mesma linha ou até mesmo da concorrência.

A Brastemp, na verdade, já trabalha com diferenciais 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 de um site? Como vocês trabalharam esta questão no site da Brastemp?

Abel :: O site adota as melhoras práticas e recursos técnicos visando preservar o sigilo de informações e a segurança das transações realizadas pelos clientes. Essas ações são acompanhadas de muita orientação e um efi-

“Nas próximas décadas, os produtos, por mais industriais e característicos que sejam, receberão a intervenção dos gostos e características pessoais de seus compradores” (Ricardo 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 disponibilização de banners como uma espécie de “autopublicidade”, 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 grande audiência, tanto em função da afinidade que a sua marca tem com os brasileiros quanto pelos serviços e oportunidades disponí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 Brastemp desenvolver novos negócios ou se aprofundar na relaçã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 comunicaçã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.

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-

www.brastemp.com.br

54 :: estudo de caso - Brastemp

“Pop-up: apesar do índice de rejeição ao tipo de comportamento, a afinidade e interesse das pessoas que realmente clicam nele é altíssima” (Ricardo Figueira)

resse das pessoas que realmente clicam nele é altíssima, caracterizando uma efetivação da comunicação proposta.

Então, uma vez que o site da Brastemp possui uma audiência já qualificada, dentro de um interesse específico, há grandes chances dessa linha de comunicação trazer pertinência e interesse ao visitante. Podemos interpretar como uma sugestão de oportunidade e não uma comunicação invasiva.

Wd :: A acessibilidade é um tema que vem transformando a maneira como as empresas desenvolvem seus produtos e serviços. Pensando nisso, a Brastemp lançou recentemente uma linha de produtos acessíveis aos consumidores com necessidades diferenciadas (www.brastemp.com.br/independente). 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 compatível com todos os mecanismos viabilizadores e de suporte às diversas necessidades 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 sinalizaçã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 menos 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 desenvolvimento de projetos e campanhas que para nós são sempre especiais, 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.canneslions.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 comunicaçã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 vendas 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 no lado servidor etc”, explica o designer de interfaces Zé Fernando (www.zeh.com.br).

Erros mais comuns Nada melhor do que perguntar para quem já vem desenvolvendo 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 desenvolvimento de conhecimento lógico, de programação.

Evolução do Flash

“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

disponível em referências ou na ajuda), mas sim a lógica de

programa para animações vetoriais”

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

complicador a mais: entender como o Flash se relaciona

possível desenvolver algumas aplicações”

com a linguagem. Existem coisas que parecem óbvias pela

- 1999

sintaxe, mas que não funcionam na prática, principalmente devido à forma como o Flash executa o código (frame por

“O Flash 4 trouxe uma quantidade de scripts internos (actions)” - 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 a principal ferramenta de aprendizado. “Toda e qualquer linguagem de programação é como uma linguagem pro-

Utilizávamos prototypes, que foram substituídos, apesar de ainda serem permitidos no uso pelas classes do ActionScript 2.0, que tem como principal característica à programação 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, errar é o mais comum na programação. Este fato é o que leva à experiência. O grande lance é tentar e errar, até chegar no que se quer. No caminho, você encontrará inúmeras outras soluções”, orienta Dauton.

Dicas de leitura - “ActionScript for Flash MX: The Definitive Guide” 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

utilizada para controlar filmes e aplicações no Flash. Visto que o

Editora: O’Reilly Media

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

Contudo, o modelo de cliente é diferente: enquanto o JavaScript trabalha com janelas, documentos e formulários, o ActionScript trabalha com movie-clips, campos de texto e som.”

Fonte: Wikipédia (http://pt.wikipedia.org/wiki/ActionScript)

Editora: Axcel Books - “Flash Animado: Técnicas Avançadas em design e animações” Autores: Dauton Janota, Rodrigo Piologo e Ricardo Piologo Editora: Axcel Books 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 integrado ao Subversion. Não se preocupe, você vai entender

PythonHandler trac.web.modpython_frontend

o que ele faz assim que vir as telas. Como fizemos com o Subversion, vamos mostrar a você como instalar o Trac no

PythonOption TracUriRoot “/tracvalidar”

Ubuntu, para que você tenha uma idéia do processo todo.

Vamos começar com o comando: sudo apt-get install trac

Agora, vamos ao diretório onde você vai manter seus

PythonOption TracEnv /home/dev/trac/ validar </Location>

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 seudoEm 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 apertar 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üilamente. 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 apontando para o Trac. Para isso basta inserir, em seu apache2.conf ou no arquivo de configuração do seu site:

Clicando em “Browse Source”, você poderá navegar pelo código-fonte dos arquivos do projeto:

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 repositó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 produçã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 novamente para o repositório. Vai colocar o código que você acabou de escrever no servidor de testes/homologaçã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 cada alteração, exatamente o que foi alterado:

O processo de deploy automatizado vai copiar para o servidor de produção o código do repositório. Nunca mais você vai ter que se preocupar com versões diferentes 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 documentaçã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 programadores que resolveram pensar em seu próprio trabalho e investir em sua produtividade. É também excelente para o acompanhamento do projeto, e inestimável quando algo quebra em seu sistema e você precisa descobrir o que mudou e como as coisas eram antes.

um documento do sistema.

3. Guarde seu repositório de código com a sua vida.

Ele é seu bem mais valioso. É tudo. Na verdade, isso é muito bom. Você vai precisar fazer backup de um lugar só.

Este modelo de trabalho vai lhe trazer alguns benefí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 automatizado, será.

O processo de desenvolvimento e publicação de suas aplicações é algo que pode ser automatizado ao

tará erros nos processos de testes e instalação.

Em fevereiro, vamos começar a falar de desenvolvimento guiado por testes, que faz parte do pacote de 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 desenvolvimento, 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 tendências. Às vezes são apenas “espumas e bolhas”, isto é, não dizem nada de novo, ou simplesmente 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 necessariamente 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 fotologs. 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 comunidade. 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 terceiraas onda, é ae difusão, a pulverização as casas, os prédios, praças 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 Wikipé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 entre transmitir dadosase praças criar mensagens com signifi cado “É preciso criar as casas, os prédios, e principalmente 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?

Promoção assine um plano de hospedagem efetue o pagamento anual e ganhe um pendrive ou uma webcam. Confira o regulamento em nosso site. www.siweb.com.br tel: (11) 4063.8047 info@siweb.com.br

Você quer hospedagem de site Profissional? Servidores que não saem do ar? Então venha conhecer a Datahosting, temos plano individual e de revenda, plataforma linux e windows. *Dizendo que nos conheceu através da revista webdesign, ganha 1 mês de hospedagem grátis. www.datahosting.com.br tel: (11) 6951.2954 - (11) 6939.7305 atendimento@datahosting.com.br

A Brasil Hosting assume a missão de “prestar os melhores serviços, oferecer preços justos e respeitar o consumidor”. Assine agora mesmo um dos nossos planos e sinta a diferença de um hosting com ética. www.brasilhosting.com tel: (48) 4052.9591 atendimento@brasilhosting.com

Oferece hospedagem profissional linux e windows com recursos grátis como loja virtual, blog, enquete, boleto.

Possui planos de revenda ideais para webdesigners.

Suporte qualificado 24 horas e registro de domínios. www.portal123.com/ tel: Minas Gerais (31) 3761.2253 São Paulo (11) 4052.9253 suporte@portal123.com.br

Parceria Tehospedo e você, Designer: registro de domínio totalmente grátis e até 3 meses de hospedagem para oferecer a seus clientes. Consulte condições no site. www.TeHospedo.com.br tel: RS (51) 3227.7727 / capitais de SP/RJ/MG/DF/ PR/SC 4062.1432, GO (62) 4052.1432 comercial@tehospedo.com.br

Hospedagem de Sites a partir de R$ 15,00 mensais com 30 dias grátis para testar nossa qualidade. Sistemas para Imobiliárias, Concessionárias e Lojas Virtuais Online. http://www.braghost.com.br braghost@braghost.com.br

Hospedagem de sites com infra-estrutura de altíssimo nível, planos a partir de R$ 8,90/mês. HTML, PHP, CGI, Flash, FrontPage, DreamWeaver, MySql, e-mail com anti-vírus/spam, suporte 24x7 entre outros recursos. www.hphost.com.br tel: (11) 6684.9597 info@hphost.com.br

Provedor fundado no ano de 2001, com infra-estrutura própria e datacenter no Brasil. Plataforma Windows com suporte integrado à Net 2.0, ASP e PHP5 no mesmo ambiente, contando ainda com MYSQL gratuito e SQLServer 2000. www.iphotel.com.br tel: (11) 6971.0438

Hospedagem de Sites com infra-estrutura no Brasil, 6 anos no mercado, multi-serviços para você e seus clientes.

Planos Windows e Linux, antivírus, anti-spam, banco de dados, relatórios de acesso, disponibilidade de 99,5%. www.creativehost.com.br tel: (11) 3849.1166 atendimento@creativehost.com.br

A Informática Online.Net está preparada para hospedar seu site, nosso DataCenter possui servidores de última geração, nossos backbones sempre irão propiciar ao seu visitante uma alta velocidade e estabilidade de conexão. www.informaticasp.com.br tel: (11) 6944.2566 sac@informaticasp.com.br

Hospedagem Profissional PHP a partir de R$ 4,90 Servidores 64 bits Dual Core - Revenda de Hospedagem.

Sua melhor opção, Confira! www.infotecnico.com.br tel: (48) 3235.2761 contato@infotecnico.com.br

R$ 5 mensais ou R$ 50 ao ano. 800MB de espaço em disco, 20GB de transferência,PHP, MySQL, Emails e subdomínios ilimitados.Também registramos seu domínio. Atendimento imediato pelo MSN. www.triangulohost.com.br tel: (34) 3316-2433 hostmaster@triangulohost.com.br

Hospedagem de Sites, Revenda de Hospedagem e Registro de Domínios, tecnologia ASP, PHP e .net no mesmo plano, teste grátis por 30 dias e comprove a qualidade de nossa infra-estrutura e atendimento. www.redehost.com.br tel: Rio Grande do Sul (51) 3042.2030 São Paulo (11) 4063.7574 Rio de Janeiro (21) 3527.0848 comercial@redehost.com.br

Hospedagem de sites em plataforma Linux e Windows.

Registro gratuito de domínios internacionais, acesse o nosso site e participe de nossa promoção. www.rjhost.com.br tel: (21) 2577.5545 vendas@rjhost.com.br

Hospedagem de Sites com segurança e estabilidade total para os clientes mais exigentes nas plataformas Linux e Windows. Infra-estrutura de altíssima qualidade.

Planos de Revenda e VPS. www.ativahost.com tel: (21) 2238-3407 vendas@ativahost.com

ZARP HOST E-mail de 1GB, webmail com leitor de notícias e disco virtual.

Soluções completas para webdesigners e desenvolvedores.

Qualidade, estabilidade e segurança. www.speedhost.com.br tel: São Paulo (11) 5644-1047 Rio de Janeiro (21) 3523-0387 Paraná (41) 3015-3077

Hospedagem de Sites Oferecemos registro de domínios e hospedagem em ASP, PHP e CGI. Planos a partir de R$ 9,90. www.zarphost.com.br contato@zarphost.com.br

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