agosto 2005 :: ano 2 :: nº 20 :: www.arteccom.com.

br/webdesign
g

R$ 7,90 e d i t o r a
/

arteccom

Havaianas
confira o making of
deste site que dá um
show de ilustrações
em Flash
g

Helenbar
a musa dos fotologs
conta como aplica
sensibilidade e
expressão em suas
produções

imagem
fotográficas especial

fotografia digital,
g

tratamentos,
ilustrações,
e direitos autorais

debate: tableless limita a criatividade?

veja como os profissionais de criação estão lidando com essa “nova escola” de
desenvolvimento de sites
direitos autorais
3
 Equipe

Editorial
quem somos

Imagem é tudo Direção Geral

Adriana Melo
Comunicar pela imagem é construir uma idéia, combinar elementos, adriana@arteccom.com.br
Direção de Arte
seja numa simples fotografia, onde o cenário e o objeto principal são
Patrícia Maia
planejados, ou no layout de um site, onde as partes (tipografia, cor, patricia@arteccom.com.br
Ilustração
fotos, informações etc.) contribuem na formação de um todo, na Beto Vieira
beto@arteccom.com.br
realização de um conceito.
Diagramação
Nesta edição, vamos explorar o fascínio pela imagem, motivado Jeferso n Costa
jeferson@arteccom.com.br
principalmente pelo surgimento das câmeras digitais, que promoveram o
Direção de Redação

:: 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.
prazer do instantâneo, e sobre as quais não poderíamos deixar de falar. Andr é Philipp e Iunes
andre@arteccom.com.br
Abordaremos desde assuntos mais técnicos, como tratamentos no Redação
Tatiana Serra
Photoshop e formatos para web, passando por fotografia 360º, bancos
tatiana@arteccom.com.br
de imagens, direitos autorais na internet, e chegando a um lado mais Assinaturas
Jan e Costa
lúdico, o dos álbuns vituais.
jane@arteccom.com.br
Teremos também uma entrevista com Helenbar. Seu trabalho sai do Gerência de Tecnologia
Fabi o Pinheiro
plano, brinca com ilustrações e fotografias, sonho e realidade. Helen fabio@arteccom.com.br
Webdeveloping
trasparece expressividade, paixão em suas produções, e muita, muita
Eric Nascimento
personalidade, fazendo de cada uma delas única, exclusiva. É, com eric@arteccom.com.br
Financeiro
certeza, um exemplo de como é possível transpor as barreiras da
Luana Rocha
imagem. Após ler a entrevista, você vai se sentir motivado e terá luana@arteccom.com.br

empolgação de sobra para aplicar em suas próximas criações!

A Arteccom é uma empresa de design, especializada na
Um grande beijo, criação de sites e responsável pelos seguintes projetos:
Revista Webdesign :: www.arteccom.com.br/webdesign
Curso Web para Designers :: www.arteccom.com.br/curso
Encontro de Web Design :: www.arteccom.com.br/encontro
Portal Banana Design :: www.bananadesign.com.br
Projeto Social Magê-Malien :: www.arteccom.com.br/ong

Criação e edição
www.arteccom.com.br
Adriana Melo
Produção gráfica
www.prolgrafica.com.br

Distribuição
www.chinaglia.com.br

4
 menu
apresentação matéria de capa

pág. 4 quem somos pág. 20 entrevista: Helenbar

pág. 5 menu pág. 28 Retratos da web

pág. 40 debate: tableless limita a criatividade
no desenvolvimento de sites?
contato
pág. 6 emails
e-mais
pág. 6 fale conosco
pág. 46 estudo de caso: Havaianas.com.br
pág. 50 artigo: sites de conveniência
fique por dentro
pág. 54 tutorial : Padrões Web 2
pág. 8 direito na web
pág. 10 clipping
com a palavra
pág. 11 adote esta página
pág. 58 webwriting: Bruno Rodrigues
pág. 60 marketing: René de Paula Jr.
portfólio
pág. 62 bula da Catunda: Marcela Catunda
pág. 13 veterano: Aqueles Caras
pág. 64 webdesign: Luli Radfahrer
pág. 18 calouro: Felipe Gomes

5
emails
Assunto: Hospedagem
Olá, caros amigos da revista
Web Design. Gostaria de ler nas
próximas edições uma matéria
falando sobre hosts nacionais,
uma comparação de seus
respectivos preços e planos
(custo/benefício) e uma
entrevista com algum
empresário bem sucedido
dando dicas para quem quer
ingressar no ramo.
Leonardo Pessoa
leozin12@hotmail.com
Um webdesigner deve ser
responsável por tudo ao colocar
a página de seu cliente no ar?
Ele deve registrar, pagar o
domínio, mensalidade etc?
Wagner Rosati
wrccdesign@gmail.com
Caro Wagner,
Acredito que o ideal seja orientar muito
bem o seu cliente, dando o suporte que
ele precisa. Agora, a contratação de
serviços terceirizados geralmente é por
conta do cliente. Mas vamos ouvir
opiniões de vários profissionais numa
próxima edição, atendendo também à
solicitação do nosso amigo Leonardo.
Aguarde.
Assunto: Mercado
Sugestão de pauta: os
executivos de negócios do
webdesign no Brasil e suas
visões sobre o mercado.
Joaquim
quim@criamedia.com.br
Uma revista sobre o mercado de criação
de sites no Brasil, bacana sua idéia! Para
o ano de 2005, já estão definidas as
matérias de capa, partindo das sugestões
dos leitores mesmo. Mas gostamos de
sua idéia também, Joaquim. Vamos
tentar incluí-la em uma matéria no ano
que vem, certo?
fale conosco pelo site www.arteccom.com.br/webdesign
:: Os emails são apresentados resumidamente. :: Sugestões dadas através dos emails enviados à revista passam a ser de propriedade da Arteccom.
6
Olá editores e responsáveis
pela revista Wd! A revista é
ótima, não só por ser a única
no mercado mas porque
vocês fazem por merecer
este conteúdo e sucesso das
reportagens e pelo bom
planejamento das enquetes e
temas. Porém, minha
sugestão é a seguinte: que
haja mais reportagens e
informações direcionadas aos
Assunto: CD na revista
estagiários, calouros, e a
quem pretende seguir estas Olá,tudo bem? Gostei muito
diversas áreas de design, da revista, comprei a
como eu que curso o 1º primeira há dois meses e
grau técnico de WD. E agora vou todo mês às
sinceramente, às vezes fico bancas para verificar os
um pouco perdida no vasto novos números. Gostaria de
Assunto: Iniciantes conteúdo das matérias de deixar aqui algumas
designers avançados.
Bem, estou no começo de sugestões: o site poderia ter
Agradeço e parabenizo a uma página de downloads; a
tudo. Faço o curso de Web
todos da equipe Web Design. revista poderia vir com um
Design na Escola de
Beijos. CD-ROM com exemplos,
Informática Microcamp, Ilha
Helena Carolina
do Governador, no Rio de tutoriais, etc, mesmo que
hc.kitty@uol.com.br
Janeiro, tenho apenas dois custasse um pouco mais; a
parte em que são mostrados
meses de curso e os dois
Paula e Helena, sejam bem-vindas modelos de sites e portfólios
últimos exemplares da
revista. Muito, realmente à comunidade! Procuramos sempre poderia ter uma maior
muito útil está sendo a mesclar informações mais básicas com quantidade de exemplos
Webdesign como fonte de as avançadas, para não desprezar também. Agora, uma
pesquisa e aprendizado. Mas nenhum dos dois públicos. Meu sugestão de matéria: um
gostaria de ter no novo tutorial sobre como criar
conselho é que vocês estudem
exemplar algo voltado enquetes, sistemas de
bastante a parte conceitual do design
especialmente para os “indique este site” e Livro de
(cores, tipografia, equilíbrio etc.) e
iniciantes de web, como Visitas. Aguardo por estas
menos as ferramentas (Flash,
linguagem da internet, como matérias.
Dreamweaver etc.), pelo menos por Flávio Araújo
utilizar pela primeira vez os
enquanto. Assim, vocês terão uma flavioaraujo@click21.com.br
programas Flash, Photoshop,
entre outras dicas que base forte para começar a criar.
porventura acharem Mas continuem conferindo nossas Ufa, Flávio! Com tantos pedidos,
matérias! vamos tentar atender alguns, OK?
importantes.
Paula Estevão Um grande abraço, Muito obrigada pelas sugestões
paulaestevao@ig.com.br
Adriana. valiosíssimas!
7
direito na web
Marianna Furtado é advogada
com pós-graduação em Direito
da Propriedade Intelectual
pela PUC-Rio. Atualmente,
pertence à equipe do escritório
Montaury Pimenta, Machado &
Lioce Advogados.
Envie sua dúvida para:
marianna@montaury.com.br
8
Reprodução de sites
Minha pergunta é bem simples: há proteção autoral na reprodução em outro site
da página de um determinado website?
Eduardo Felix (eduardojfq@gmail.com)
Não há, em nossa legislação, uma solução Quanto às regras de observância dos
para essa questão. Da mesma forma, nossos direitos morais, outrossim, são: constar do
tribunais ainda não decidiram qual seria o website o nome dos autores das músicas, das
melhor enquadramento legal para esse caso fotos, dos textos, bem como exibí-las em sua
que se divide em dois entendimentos: proteção integralidade e autenticidade, tal como
autoral e resguardo contra os atos de concebidas. Uso livre, só diante da utilização
concorrência desleal. de pequenos trechos, observadas as regras
O embasamento legal relacionado a dos três passos (não ser a reprodução
proteção autoral encontra escopo em dois objetivo principal da obra, não lhe prejudicar
incisos do artigo 7º que lista as obras a exploração, não causar prejuízo
protegidas: o inciso X, que protege os injustificado aos autores).
esboços, os projetos e as obras plásticas
concernentes à geografia, topografia,
arquitetura, ciência; e o inciso XIII, que
garante proteção às coletâneas,
enciclopédias e dicionários e, embora retirem
de seu texto os jornais e revistas, concluem
“outras obras que, por sua seleção,
organização ou disposição de seu conteúdo,
constituam uma criação intelectual.
Ademais, websites podem também
conter em seus arquivos obras musicais,
imagens e textos, que têm proteção autoral
autônoma da obra em conjunto. A utilização
das mesmas, salvo criação especial ou
captação autorizada através de arquivos de
livre disponibilização, só poderá ser realizada
com a prévia e expressa autorização de seus
autores, pessoas físicas, ou de seus titulares
a quem as pessoas físicas eventualmente,
mas comprovadamente, tenham transferido
seus direitos patrimoniais.
9
clipping
Sites de relacionamento prendem
atenção de internautas brasileiros
Os sites de relacionamento compõem a área que mais prende a atenção
dos brasileiros na internet. De acordo com um levantamento realizado
pelo Ibope/NetRatings, com o título Web Brasil, divulgado
trimestralmente pela consultoria, os sites de comunidades absorvem
cerca de 20,5% do tempo total de navegação. Em seguida, estão sites
de e-mail (11,3%), portais de interesse geral (10,5%), instituições
financeiras (6,5%) e ferramentas de busca (4,7%). De acordo com o
diretor-executivo do Ibope Inteligência, Marcelo Coutinho, isso é
explicado porque os povos latinos possuem uma cultura comunicativa
forte, que se traduz em uma procura maior por atividades de
relacionamento na internet.
O estudo mostrou ainda que os usuários brasileiros
da Internet destinam 53,2% do tempo
de navegação a apenas cinco
ferramentas disponíveis na rede:
comunidades virtuais, e-mail, portais,
bancos e ferramentas de busca.
(01)
Scripts para toda vida
Procurando scripts prontos? O site ScriptFacil.com garante a todos
os seus usuários uma gama gigantesca de scripts que facilitam  engenheiros chefiada por Hayasaki está
muito o desenvolvimento de sites.O ideal da comunidade  procurando uma forma de fazê-las
ScriptFacil.com  é o crescimento profissional de webdesigners e
webmasters, contribuindo com um grande banco de dados de scripts
e diversos desafios que possibilitam maior interatividade entre o
usuário e o portal, funcionando como incentivo à criatividade dos
internautas, que contribuem com criações fantásticas!
Você pode participar! Envie suas imagens mais criativas, utilizando
o Photoshop. Em breve serão criados outros desafios. Confira no
site http://scriptfacil.com.
China: clínica para viciados em internet
O governo chinês, preocupado com o crescente número de jovens que ficam
horas navegando pelo mundo virtual, anunciou a abertura de uma clínica “para
trazê-los de volta à realidade”, segundo informa a Associated Press.
O Dr. Tao Ran, responsável pela clínica, disse que um grande número de crianças
em vez de ir às aulas, ficam jogando games e batendo papo online todos os dias.
“Elas estão sofrendo de depressão, nervosismo, medo e já não conseguem
interagir como pessoas normais”, esclareceu o Dr. Ran.
Segundo ele, 2,5 milhões de chineses sofrem da síndrome da internet. (03)
(01) http://www.estadao.com.br/tecnologia/internet/2005/jul/14/54.htm
(02) http://www.estadao.com.br/tecnologia/informatica/2005/jul/12/105.htm
(03) http://www.estadao.com.br/tecnologia/internet/2005/jul/05/103.htm
10
Hospedagem com promoção para o
Dia dos Pais
A Digiweb, empresa de hospedagem de sites 100% nacional, irá sortear
um Palm Tungsten em sua promoção de Dia dos Pais. O prêmio é
compatível com Word, Excel, PowerPoint, Outlook e possui tela colorida
de alta definição. A promoção vai só até o começo de Agosto, participe
assinando um plano de hospedagem ou contratando um serviço do
Internet Hosting Center. Clientes da Digiweb que contrataram serviços de
Servidores Dedicados, Semi-Dedicados e Co-location participam
automaticamente. Clientes que indicarem um outro ganham uma
mensalidade e concorrem ao prêmio. Aqueles que contratarem qualquer
serviço adicional para a conta dentro do período da promoção, também
participam. Acesse www.digiweb.com.br/pais/
Japoneses gravam dados em unhas
Cientistas da Universidade de Tokushima, no Japão, desenvolveram
uma tecnologia capaz de gravar até cinco megabits de dados nas unhas.
As informações permanecem legíveis por dias e podem ser usadas para
identificação biométrica e pagamentos automáticos.
Segundo o professor Yoshio Hayasaki, foram
utilizados pulsos de raio laser para armazenar os
dados e, para lê-los, um microscópio de
fluorescência. Em caráter experimental, as
gravações foram feitas em pedaços
soltos de unhas. Agora a equipe de
enquanto as unhas estiverem nos dedos.
(02)
ENG anuncia treinamento de Animação
para Web no Anima Mundi 2005
A ENG DPT & Multimídia anunciou, durante a última edição do Anima
Mundi, que aconteceu no mês passado, no Rio e São Paulo, um novo
treinamento para animação profissional com tecnologia Macromedia
FLASH. O novo curso terá 48 horas de aulas presenciais e 48 horas de
projetos, além de simulados para a Certificação Internacional Macromedia.
O conteúdo programático é dividido em três etapas para excelência técnico-
pedagógica e pode ser obtido no web site da ENG. Entre os recursos que
serão ministrados, os alunos poderão aprender a desenvolver Movieclips,
Storyboarding, desenvolvimento de personagens no Flash, elaboração de
layouts complexos, técnicas de animação, criação de movimento humano,
animação de efeitos especiais, introdução à criação 3D e outras técnicas.
Mais informações: http://www.eng.com.br
 
Errata
Na edição anterior, na seção portfólio veterano, a URL da 10’ Minutos
está incorreta. O endereço certo é: www.10minutos.com.br.
 adote esta página

A renda deste anúncio é integralmente revertida para o projeto Magê Malien - Crianças que brilham.
adote
esta
Anunciando aqui, a AZMT contribuiu com o Magê Malien, projeto social que
possibilita a crianças de comunidades carentes, o acesso à educação, arte e cultura,

página
através da prática da capoeira, dança e oficinas de teatro.

!
Faça como a AZMT, anuncie nesta página e ajude a manter o brilho dessas crianças.

Informações: tel. 21 2253-2464/e-mail publicidade@arteccom.com.br

Visite o site www.arteccom.com.br/magemalien

11
11
12
 portfólio veterano :: Aqueles Caras
Aqueles Caras:
design bem-humorado
Por Tatiana Serra
Contribuiu Vanessa Barbosa

Atraente, animado, experiente, pontual, gosta de conversar e conhecer a fundo seus desejos,

além de sempre lhe dar razão. Um cara assim seria perfeito, não seria? E se fossem alguns
caras? Ou mesmo, aqueles caras? Pois assim é a produtora carioca “Aqueles Caras”, cuja

filosofia é fazer trabalhos divertidos e atraentes, explorando o bom-humor sempre que

possível.

O ponto de partida para o sucesso da produtora, fundada em 2000, foi a conquista do 2º lugar

na categoria Melhor Vídeo de Animação Brasileiro, do Anima Mundi em 2001, com a animação de
“estréia” chamada “Popozão”. “Essa repercussão gerou muitos trabalhos e foi o pontapé inicial

que a produtora precisava”, diz Bernardo Martins Prata, diretor de criação da “Aqueles Caras”.
Ao acessar www.aquelescaras.com.br, o usuário pode conhecer um pouco da criatividade

presente nos projetos da produtora, assim como na ilustração e nas seções do site, que é, no
mínimo, muito divertido!

www.aquelescaras.com.br

13
13
portfólio veterano :: Aqueles Caras

Aqueles Caras?
Você deve estar se perguntando da onde surgiu o nome
da produtora, não está? Ela foi criada pelos sócios e amigos de
infância Bernardo e Julian, o qual trabalhava com 3D e,
insatisfeito com a vida de freelancer, queria montar seu
próprio negócio. Foi então que ele convidou Bernardo, que
trabalhava na área de 2D e web, para juntos montarem uma
produtora. “Nós moramos no mesmo prédio (até hoje!) e, na
época, ele (Julian) transformou seu quarto num home office,
onde ligamos nossos dois computadores em rede. Quanto ao
nome, foi idéia dele. Ele achava engraçado, combinava com
nosso perfil e as pessoas não iriam esquecer. Concordei na
hora! Assim, surgiu Aqueles Caras”, lembra Bernardo.
A produtora almeja se fixar no mercado como uma das
TOP 10 do Brasil e ser sinônimo de criatividade e qualidade.
“Nosso forte é animação 3D e 2D (desenho animado), mas
também trabalhamos com web, ilustração, multimídia e design
gráfico”, fala o diretor de criação sobre as áreas de atuação da
empresa.
Após o sucesso no Anima Mundi 2001, a equipe
aumentou. Bernardo e Julian convidaram os profissionais e
amigos Christian - que assumiu a parte administrativa e
atendimento - e Flávio - que assumiu a área de programação e
multimídia. Hoje, a equipe é formada por 11 pessoas - um
diretor comercial, três diretores de criação, uma secretária,
dois webdesigners e quatro designers.
Imagem da animação “O Duelo”
Imagem da animação “O Duelo”
Outros caras: os clientes
Para conquistar o sucesso, “Aqueles Caras” aposta na
qualidade do trabalho, no atendimento e no cumprimento de
prazos. “É isso que todo cliente procura! Se ele gostar do
seu trabalho, vai fazer outros com você, vai te indicar
e, nessa hora, você começa a crescer”, afirma Bernardo.
Quanto aos problemas, o maior enfrentado, segundo o diretor
de criação, é o próprio cliente. “O cliente, na maioria das
vezes, não sabe exatamente o que quer. Pede pra mudar tudo
várias vezes. Nesses casos, nós devemos tentar ‘arrancar’
dele o maior número de informações e referências possível!
Temos que descobrir o que ele está pensando”, diz Bernardo,
lembrando que o cliente sempre tem razão.
Criar para o bem e para o bom-humor
O diretor de criação da empresa declara que adora
desenhar e usar a criatividade para o bem. “Mas o que me deu
certeza dessa carreira foi quando vi os trabalhos de faculdade
de uma prima minha que estava cursando Desenho Industrial.
Isso foi pouco antes do vestibular e fiquei tão fascinado que
não tive dúvidas na hora de escolher!!”, lembra o designer
carioca de 30 anos, que é viciado em aquários (tem dois em
casa), gosta de jogar tênis e de pescar.

14
14
 portfólio veterano :: Aqueles Caras
Na opinião de Bernardo, “o bom profissional de web é
aquele que gera a idéia primeiro e, depois, procura a
melhor ferramenta para concretizá-la. Quem,além
disso, dominar photoshop, dreamweaver e flash não
terá dificuldades de conseguir emprego. São os
softwares utilizados por 95% dos webdesigners”.
Ainda falando sobre criação, Bernardo diz que a equipe
“Aqueles Caras” adora fazer animações autorais, ou seja, com
seus próprios personagens, e, depois, mandar para festivais,
como o Anima Mundi, para testar a recepção do público. “Nós
fazíamos essas animações no tempo livre, ou entre um Imagem da animação “O Duelo”

trabalho e outro, mas, atualmente, estamos buscando

patrocínio para esse tipo de projeto. Devido a demanda de
trabalhos, não podemos nos dar ao luxo de parar tudo para
desenvolver animações sem fins lucrativos”, declara.

15
15
portfólio veterano :: Aqueles Caras

Dos primeiros aos atuais clientes empresa. Tivemos que tomar cuidado para dosar a quantidade de
animações”, diz Bernardo.
Os primeiros clientes da produtora foram os amigos e familiares da
O Acrobatha (www.acrobatha.com.br) é o site de uma loja carioca de
equipe. “Essa é uma situação típica de quem abre seu próprio
roupas masculinas, criado a partir dos conceitos que as coleções
negócio, e com a gente não foi diferente”, diz o diretor de criação.
exploravam, como: descontração, bom gosto, conforto, natureza e Rio
Depois, foram surgindo outros projetos. Entre eles, Bernardo destaca
de Janeiro. “Através do site, a Acrobatha tem conseguido alavancar
o site da banda Seu Cuca (www.seucuca.com.br), um dos primeiros
suas vendas e atrair novos clientes. Um bom negócio para Aqueles
feitos pela produtora. “Nunca tínhamos feito site para banda e esse
Caras também!”, completa ele.
foi um desafio”.
A produtora também ressalta outros sites, como: www.rrg.com.br,
Outro projeto desenvolvido foi o site da empresa de consultoria
www.100porcentopropaganda.com.br, www.cdgadvogados.com.br,
tributária Branco Consultores (www.brancoconsultores.com.br). “Eles
www.facilitynet.com.br etc.
queriam um visual clean e sofisticado, que mantivesse a seriedade da

www.seucuca.com.br

www.acrobatha.com.br

www.brancoconsultores.com.br www.facilitynet.com.br

16
16
17
portfólio calouro :: Felipe Gomes

Organização, dedicação e foco por Tatiana Serra

Esta é a trinca do sucesso de Felipe Gomes, recém-webdesigner que recebeu a missão de

representar o apresentador de tv Raul Gil na web e, hoje, já tem uma empresa especializada em
soluções para internet, além de outros projetos.

Com apenas 19 anos de idade e menos de um ano de vida Foco na web

profissional, Felipe já tem em seu portfólio, além do site
pessoal do Raul Gil e o de seu programa, o site da produtora
Luar Company, o da banda Kaic e Kaynan e o novo site (em
desenvolvimento) do artista plástico Ernesto Piva. Para ele,
valeu a pena investir em sites para clientes de peso no início da
carreira. “Mesclar conteúdo e design que transmitissem a
imagem da tv e do apresentador (Raul Gil), além de deixar o
site o mais leve possível, foram meus principais desafios”, diz.
Entre o final de junho e início de julho deste ano, ele lançou
o que, certamente, são suas principais criações no momento: o
site da Branding Web Midia (www.brandingwebmidia.com.br),
empresa criada por ele, seu pai e um amigo, cujo foco é “prover
soluções de propaganda e marketing na web para os diferentes
segmentos”; e o seu site pessoal (www.felipegomes.com.br).
Futuramente, Felipe espera ter seu próprio portal, para que os
profissionais da área compartilhem conhecimento
desenvolvido. E, por falar em profissionais da web, ele
considera que “o design para web está se consolidando cada
vez mais, criando seus padrões, suas regras de
desenvolvimento etc”.
Mesmo assim, Felipe acha que “a profissão de
webdesigner já foi melhor remunerada. Agora, com a
popularização da mesma, como era de se esperar, o valor da
profissão cai”. Porém, segundo ele, ainda é possível conseguir
um bom salário nas grandes agências de propaganda e de
internet. E também vale a pena investir em freelances. Ele
mesmo, apesar de ter o foco na web, faz alguns freelances
como design gráfico.
Felipe decidiu ser webdesigner depois que ganhou um
computador do pai e se tornou usuário ativo da internet. Daí em
diante, ele não parou mais e, desde 2002, já fez um total de 13
cursos, tanto de Webdesign como de Webmaster. Atualmente, cursa
Tecnologia em Design de Mídia Digital, na FIT – Faculdade Impacta
(SP), e pretende se formar em 2006.
O misto de conhecimento e criatividade faz de um webdesigner
um profissional especial. Para Felipe, tudo que tem forma e expressa
sentimento serve de inspiração. “Eu respiro esse negócio de design o
dia todo”, afirma ele, além de acreditar que toda idéia sempre pode
ficar melhor. Basta tentar!
É preciso adquirir o máximo de informação possível. “Eu tenho o
costume de ler muito, sempre estou com uma revista, livro ou jornal
na mão. Também participo de várias comunidades sobre webdesign
no Orkut, e acesso vários sites que abordam webdesign”, conta
Felipe, que gosta muito de tirar fotos, ir ao cinema, jogar boliche,
viajar, ouvir música, andar de skate, tocar bateria e ir à igreja.
www.luarcompany.com.br/teste

O site de Felipe Gomes é <www.felipegomes.com.br> e o email para contato, <contato@felipegomes.com.br>.

Para participar da seção portfólio, cadastre-se no site www.arteccom.com.br/webdesign.

18
19
entrevista :: Helenbar

Por Paola Sales

Helena de Barros tem 32 anos, é designer e

professora da Escola Superior de Desenho

Industrial (Esdi). Na Internet, ela é “/helenbar”,

uma das fotologgers mais famosas da rede. São

mais de 600.000 internautas que acompanham

as aventuras de “Alice no país das maravilhas”,

em que a designer mostra seu talento com o

tratamento de imagens. Nesta entrevista,

Helena nos conta um pouco de sua história com

o fotolog e fala sobre o segredo do sucesso de

seu trabalho.

20

WD :: Você fez Desenho Industrial na Esdi em 1994.
Além da graduação, quais cursos você fez? Os livros
também foram importantes na sua formação
profissional?
Helena :: O interesse por imagens existe desde que me
entendo por gente. Fiz escola de arte desde os 8 anos de idade e
comecei a lidar com o computador e Photoshop em 94, na época
do projeto de graduação, com o tema “Design Gráfico e Novas
Tecnologias de Imagem”. Um dos cursos extracurriculares mais
significativos que fiz foi o “Dynamic Encounters”, do Charles
Watson, na Escola de Artes Visuais do Parque Lage, sobre arte e
ciência contemporâneas. Quanto aos livros, é claro que livros
técnicos são muito importantes na nossa formação, mas é a
literatura que enriquece a alma. Algumas leituras são
fundamentais para mim: “O Estrangeiro”, de Albert Camus;
“Cartas a Teo”, de Vincent Van Gogh; “O Teatro e seu Duplo”, de
Antonin Artaud; “Ciranda dos Libertinos”, de Sade; “Grande
Sertões Veredas”, de Guimarães Rosa; “O Retrato de Dorian Gray”
e “Contos”, de Oscar Wilde... Considero também que cineastas
entrevista :: Helenbar
como George Meliés, Ingemar Bergman, David Cronemberg,
David Linch, Roman Polanski, Neil Jordan, Tim Burton, e artistas
como Gilbert and George, Andy Warhol, Pierre et Gilles, Ray
Caesar, Mark Ryden, Jeff Koons, Nan Goldin e Joel Peter Witkin
foram influências fortes na minha vida e no meu trabalho. Gosto
de freqüentar feiras de antiguidade e acho que o contato com
objetos de outras épocas também enriquece muito meu dia-a-dia.
WD :: Como começou o interesse pelo fotolog?
Como foi a escolha deste meio para veicular seu
trabalho? Seus convites de trabalho aumentaram a
partir dele?
Helena :: Foi por acaso. Em junho de 2003, um amigo me
recomendou o site. Criei um login só para ver do que se tratava.
Fiquei maravilhada e surpreendida com as possibilidades de
entretenimento e comunicação que esta comunidade virtual tinha
na época. Comecei a utilizar o serviço por diversão. Sem dúvida,
a maior inovação do fotolog (hoje plagiada por diversos sistemas
similares), é a forma como os usuários estão interligados. As
imagens funcionam como iscas, cada uma com sua singularidade e
21
21
entrevista :: Helenbar
como cada página é repleta de outros links de imagem e texto,
atualizados em tempo real, rapidamente se faz uma grande rede
de comunicação. Outro ponto positivo é que é uma comunidade
bastante heterogênea. Alguns minutos de fotolog, às vezes,
equivalem a ir a uma exposição, encontrar com os amigos ou ler
uma revista de atualidades. Minha atuação profissional não se
alterou, continuo com o mesmo perfil de clientes e projetos.
Mas, do ponto de vista artístico, conquistei um espaço incrível
de divulgação e estímulo. Minha página supera 600.000 visitas
e meu trabalho ficou conhecido internacionalmente, sendo
inclusive matéria de capa da revista da Lewis Carroll Society
Norte Americana.
WD :: Como você fez para divulgar o seu fotolog?
Helena :: Por incrível que pareça, a única coisa que fiz foi
colocar meu trabalho na rede e navegar no sistema. Quando
comecei, o serviço ainda era recente e reunia uma crescente e
fervilhante comunidade, composta em grande parte por artistas,
fotógrafos e curiosos ávidos por trocar informação. Na segunda
semana como fotologger, pulei de 3 para 3.500 visitas e meu
“thumbnail” foi para a página principal como um dos mais vistos do
22
22
site, o que, então, não significava popularidade, mas
curiosidade. A própria estrutura do sistema de navegação se
encarregou da divulgação de forma espontânea, uma espécie de
boca a boca virtual. Todos nós que estávamos tendo destaque
naquela época fomos beneficiados. Pegamos carona na
divulgação, não só dentro do site, como em diversos outros meios
de comunicação que abordavam o fenômeno.
WD :: Você reúne os papéis de fotógrafa, designer e
modelo por opção. Como é esse trabalho de fazer tudo?
Você acha que o trabalho seria diferente se você
tivesse uma equipe?
Helena :: Não sou de fato “modelo” nem “fotógrafa”, faço
isso apenas no meu trabalho pessoal, onde o auto-retrato é a
matéria-prima. Sou a melhor pessoa para interpretar as minhas
idéias, pois sei exatamente o que estou buscando, expressão,
conceito e resultado gráfico. Não tenho que discutir com
ninguém, é completamente autoral. Acho que seria mais difícil
conseguir o mesmo tipo de resultado com uma equipe. Numa
equipe, sempre existem divergências conceituais ou estéticas;
pra funcionar, tem que estar todo mundo muito afinado.
 WD :: Na sua opinião, como uma pessoa pode produzir
boas fotos com poucos recursos?
Helena :: Ao contrário de fotos técnicas (de estúdio, por
exemplo), em que recursos são fundamentais, uma boa foto
artística é muito mais uma questão do “olhar”, da criatividade, de
cultura e expressão do que de disponibilidade de recursos. De
qualquer forma, se queremos trabalhar seriamente em qualquer
área (não só com fotografia), é muito importante o estudo e a
prática; além da técnica, aprender quais são as questões
fundamentais de linguagem, entender hierarquias e valores
específicos de cada área, construir referências e situar o nosso
trabalho dentro de um contexto. A formação, a sensibilidade e a
experiência do profissional são que qualificam equipamentos caros
e sofisticados, ou que fazem bom uso até de uma “pin hole” (câmera
primária que dispensa o uso de lentes). Aprendi princípios da
fotografia na faculdade, mas não tenho a perícia de uma fotógrafa,
e sim de uma designer usando da foto como matéria-prima.
WD :: Qual é o segredo, na sua opinião, de uma
boa foto?
Helena :: Considero uma boa foto aquela que, além de luz,
cor, foco, enquadramento e assunto, consegue transmitir
situações e sensações universais, que representa, de forma
objetiva ou subjetiva, imagens que todos nós e, ao mesmo
tempo, cada um guarda dentro de si.
WD :: Até onde você acha que o Photoshop auxilia
ou tira a naturalidade de uma imagem (pela utilização
de filtros, efeitos etc.)?
Helena :: Acho que o limite e a adequação do tratamento da
imagem não está no software ou nas suas possibilidades, mas na
intenção e bom senso do operador. O erro acontece quando
tratamos questões e problemas diferentes com as mesmas
soluções. Nunca uso efeitos pré-formatados. O tratamento não
é de fora pra dentro, mas de dentro pra fora. É importante
entender as características e necessidades de cada imagem e
trabalhar com seus elementos estruturais, como cor,
luminosidade, textura e, principalmente, pensar na sensação da
imagem, a expressão que ela carrega. A melhor contribuição que
podemos trazer para o tratamento de imagem e para qualquer

23
entrevista :: Helenbar
outra situação é sempre do ponto de vista humano, quando
agregamos valores que transcendem a técnica e a máquina.
WD :: Ao manipular uma imagem, quais erros
devemos evitar para que ela não pareça artificial?
Helena :: Trabalhar sem questionar resultados. Durante o
processo, podemos perder o rumo ou passar dos limites. Nesse
caso, analisar as etapas anteriores é a melhor forma de encontrar
onde erramos e também a solução. Nunca jogo fora o original e as
etapas preliminares antes de concluir o trabalho, são um ótimo
referencial de comparação.
WD :: Como você dividiria as etapas do processo
de criação de uma imagem (desde a idéia, preparação
de figurino até a finalização da mesma)? Quanto
tempo demora?
Helena :: As imagens surgem bem definidas na minha
cabeça, como num flash. Às vezes, elas se formam quando vejo
um objeto antigo, vendo um filme, conversando com alguém,
num sonho, observando o trabalho de outro artista ou lendo um
livro... A fase de criação é bastante subjetiva, mas sempre
envolve também alguma pesquisa de referências. Quando a idéia
24
24
fica madura, produzo o personagem. Como me baseio no auto-
retrato, sempre começo pela sessão de fotos. Às vezes, tenho
que produzir roupas e encontrar objetos para compor a cena.
Faço as fotos em casa com câmera digital no tripé e timer, e
depois, no computador, toda a manipulação, retoque de imagem
e construção de cenário. O tempo investido em cada cena
depende muito da complexidade da imagem e da minha
disponibilidade. Uma imagem razoavelmente complexa leva em
torno de 30 a 40h de tratamento. É claro que não de uma vez só.
Na maioria das vezes, trabalho nos finais de semana ou à noite.
WD :: Que máquinas você utiliza para trabalhar? A
configuração do computador é fundamental? E que
softwares são mais indicados?
Helena :: Sou uma antítese da corrida informata. Trabalho
com um computador de quase 8 anos, um power mac G3
minitower, que já sofreu todos os upgrades possíveis. Do original,
só resta a placa mãe. Pesquiso bastante para conseguir
incrementá-lo e chego a trabalhar com imagens de 500Mb a
1.5Gb, diariamente. Sou usuária de mac, mas já fui de PC.
Acredito que as plataformas se equivalem, a não ser pelo hábito

de uso e o folclore de status profissional. Quanto aos softwares,
acho os produtos Adobe bastante competentes (Photoshop,
Illustrator, Pagemaker, InDesign, Acrobat). Mas acredito que a
restrição ou potencialidade não está de fato no software, mas na
cabeça. Um artista trabalha bem com qualquer ferramenta. Podemos
desenvolver as mais diferentes formas de expressão em qualquer
programa, qualquer sistema ou até com um lápis e uma folha de
papel, não importa.
WD :: Quais são os principais recursos do
photoshop que você utiliza? Quais são os melhores
formatos para a web?
Helena :: Trabalho muito com máscaras, canais alfa e com
manipulação da cor e da luz com levels, hue/saturation e curves. E
prefiro os formatos mais compactos como jpg ou gif.
WD :: Como você vê o aumento do uso da imagem
digital? Você acha que ainda há espaço para as pessoas
que trabalham com máquinas tradicionais?
Helena :: São muitas questões em jogo. É claro que a imagem
digital já faz parte do nosso presente e, conseqüentemente, do
futuro, de forma inevitável. Mas tem muita gente que ainda vive da
fotografia tradicional. A transição de profissionais consagrados no
sistema analógico não é simples e, em algumas situações, ainda é
mais conveniente trabalhar com filme. Ainda existem divergências ao
se comparar um cromo de grande formato e qualidade com as
múltiplas possibilidades de captura digital, mas não há como fugir dos
excelentes resultados de pós-produção digital que podemos obter. É
um material mais ágil e manipulável e por isso mesmo, também mais
descartável. Assim como o arte-finalista para o design gráfico,
talvez o laboratorista esteja fadado ao desaparecimento e esta seja
mais uma função a ser incorporada pelo profissional de fotografia da
era digital. A tecnologia nos atropela evoluindo mais rápido do que
nossa capacidade de assimilação. Às vezes, é preciso dar alguns
passos atrás para aprimorar as coisas.
WD :: No que diz respeito à linguagem fotográfica,
entre uma foto digital e uma analógica, qual traz os
melhores resultados (pelo viés artístico)?
Helena :: Se considerarmos apenas o registro da imagem, os
dois métodos se equivalem, mas têm características de
entrevista :: Helenbar
processamento bastante distintas das quais se pode tirar partido.
Um artista escolhe um determinado material por suas características
físicas, circunstanciais, contexto histórico, possibilidade de interação
e permeabilidade para expressão de uma idéia. Fundamentalmente,
o método digital é mais ágil e de manipulação indireta, associada ao
computador. O processo analógico tem uma fisicalidade de matrizes
autônoma (o filme, o processo de revelação química, o negativo, a
projeção física da luz e da cor no papel). A escolha de um ou de outro
processo depende da natureza do trabalho e de quais características
são mais convenientes, não só por implicações metodológicas, como
também por seus valores simbólicos no sistema de construção e
discussão da idéia, até que ela se torne concreta. Em alguns casos,
quando a agilidade e a visibilidade da imagem em tempo real são
fundamentais, o digital é indicado e tem também a vantagem de,
quando a manipulação for feita necessariamente no computador,
poupar as etapas de revelação/ampliação do filme e scaneamento,
tornando o processo mais prático e barato. Já o método analógico
abre uma série de possibilidades diferenciadas, como interferência na
captura da imagem dentro da câmera (entre a lente e o filme), a
manipulação do filme no processo químico,a interferência gráfica na
película e gelatinas ou a possibilidade de intervenção no processo de
ampliação, mascarando a projeção da luz no papel, só para citar
alguns exemplos. Não há melhor ou pior resultado, mas o mais
adequado para cada fim, dependendo sempre das restrições,
intenção e objetivo.
WD :: Que dica você daria pra quem quer seguir
essa carreira?
Helena :: Desista em quanto é tempo! Hahaha... Brincadeiras
a parte, não tenho a menor idéia. O mercado globalizado é voraz,
cruel e circunstancial. As grandes estruturas devoram talentos
individuais. Sucesso financeiro, estabilidade, realização e qualidade
de vida são privilégios de poucos. Minha trajetória é muito particular
e não me considero um exemplo do ponto de vista mercadológico.
Para mim, é importante trabalhar com dedicação e perseverança
naquilo que gosta, acreditar nos seus valores, desenvolver
interesses que te distingam como indivíduo, ter objetivos que te
façam aprimorar e se satisfazer pessoalmente, pois a realização
profissional nem sempre é sinônimo de sucesso no mercado.
25
25
26
27
27
retratos da web

Retratos
da web Por André Philippe Iunes
e Paola Sales

Os primeiros indícios da relação do homem com

a imagem datam da época Pré-Histórica.

Desenhos feitos há mais de 20.000 anos nas

paredes das cavernas mostram a necessidade

do ser humano em registrar, por meio de

figuras representativas, sua vida cotidiana e

costumes. Na era Contemporânea, a busca

incessante pela captura da imagem resultou

na invenção de dispositivos que pudessem, de

alguma forma, gravar a luz, originando o

termo fotografia, que provém do grego

(photos + graphein) e pode ser descrito como

“a grafia da luz”.

28
28

Com a evolução das máquinas fotográficas, a estética
passa a ser valorizada como o principal elemento na
diferenciação dos estilos fotográficos. Além do valor
artístico, a foto ganha também grande importância como
elemento informativo. No Brasil, um dos pioneiros em utilizar
a fotografia como forma de documentação, e não somente
como arte, foi Marc Ferrez. Com um trabalho que data desde
1865, ele retratou a vida cotidiana da cidade do Rio de
Janeiro, registrando suas particularidades e os hábitos da
população no fim do século XIX e começo do século XX.
Responsável por introduzir no Brasil as chapas fotográficas
coloridas, desenvolvidas pelos irmãos Lumière, Ferrez
também se dedicou ao estudo de novos equipamentos e
materiais fotográficos.
Fazendo uma ponte para o meio online, após dez anos de
sua popularização, além da própria evolução da interface da
web como um todo, pode-se dizer que o ganho que a imagem
teve na rede se deu por meio da possibilidade de se adicionar
movimento e textura a ela. Anúncios online, antes feitos em
gifs animados, hoje contam com poderosas ferramentas,
como o Flash e o 3D MAX, por exemplo. Recursos como a foto
360º, que possibilitam a criação de ambientações com grande
poder de realismo, proporcionaram uma melhora na
experiência do usuário. Entretanto, alguns limites referentes
ao uso de uma imagem na internet, como o seu tamanho em
kbytes e a sua utilização sem o pagamento de direitos
autorais, podem acarretar em prejuízos ao seu projeto,
tanto de acesso como financeiramente.
Sua evolução na rede
É importante analisar a evolução da imagem no meio
online contextualizando-a com o próprio amadurecimento da
“interface” da web, incluindo seus paradigmas de design,
critérios de navegação e os limites específicos da mídia.
Contudo, é fato que a melhora tecnológica, tanto dos
dispositivos de navegação quanto dos softwares de criação,
pode ser vista na qualidade das imagens veiculadas atualmente
na rede. No início, elas eram trabalhadas para monitores de
256 cores e conexões muito lentas (nesse caso, era exigida
retratos da web
irmãos Lumière :
Os irmãos Lumière, Auguste Marie Louis Nicholas Lumière
(nascido em 1862) e Louis Jean Lumière (nascido em 1864)
nasceram em Besançon, na França. Foram os inventores do
projetor cinematográfico e produziram centenas de filmes curtos,
geralmente documentários da vida diária, e foram fundamentais
no desenvolvimento do Cinema como uma forma de arte
popular. Por isso, são considerados os pais da sétima arte.
muita compressão, tanto de cores como de resolução). Com o
aumento da qualidade dos hardwares e o ganho na velocidade
das conexões, as imagens puderam ganhar um tratamento
mais minucioso, passando a ter maior número de cores (16
milhões) e com maior resolução, conseqüentemente.
Segundo Daniel Morena, designer da agência 32Bits™, a
rede encontra-se em uma nova fase, em que as imagens
deixaram de ser vistas como antagônicas ao modelo da web,
para serem um dos seus pontos fortes. Para ele, a arte digital
está em grande expansão, com a troca de arquivos de músicas
e filmes, bem como o crescimento dos diversos serviços de
compartilhamento de imagens. “É difícil imaginar o que vem
pela frente, pois o que é atraente na web é a sua
imprevisibilidade e anarquia. Quem imaginava que um serviço
de buscas, depois de tantos já criados, iria revolucionar e
democratizar o uso da internet como o Google?”, indaga Morena.
resolução :
O termo “bits” define a quantidade de cores que existe em uma
imagem e está diretamente relacionado ao seu peso em kbytes.
Sendo assim:
1 bit > 2 cores
2 bits > 4 cores
3 bits > 8 cores
4 bits > 16 cores
5 bits > 32 cores
6 bits > 64 cores
7 bits > 128 cores
8 bits > 256 cores
15 bits > 32.768 cores
16 bits > 65.536 cores
24 bits > 16.777.216 cores
32 bits > 16,7 milhões de cores + escala de cinza de 8 bits
29
29
retratos da web

Na opinião de Gustavo Lassala, designer e professor do

Senai em São Paulo, a grande tendência na web diz respeito à
imagem em movimento, com a inclusão de som, randomizações,
programações avançadas, hipertexto etc. “Depois de dez anos,
a internet começa a assumir uma linguagem própria, algo entre o
vídeo game, a televisão,o cinema e o livro. Um reflexo disso é
que, cada vez menos, existem projetos online elaborados como
simples reproduções de peças gráficas, coisa muito comum no
início da rede”, lembra Gustavo.
Até que ponto o uso do Photoshop é recomendado?
Seja no meio online ou no offline, é impossível não citar o
Photoshop como a principal ferramenta para o tratamento e
edição de imagens. Mas até que ponto devemos modificar,
corrigir ou alterar um trabalho, por exemplo? Para Fernanda
Coronado, coordenadora do estúdio fotográfico do site de
comércio eletrônico Submarino, nenhuma foto produzida por “Depois de dez anos, a internet começa a
ela é publicada sem antes passar pelo programa. “É um
assumir uma linguagem própria, algo entre o
remédio sem contra-indicações, desde que usado com feeling e
na medida certa”, destaca Fernanda. vídeo game, a televisão, o cinema e o livro.
Na sua opinião, o segredo para se obter um bom resultado
Um reflexo disso é que, cada vez menos,
em uma imagem é saber aliar as técnicas da foto no momento do
“click”, já tendo em mente o que pode ser feito depois com os existem projetos online elaborados como
inúmeros recursos do Photoshop. “Eu defendo a autenticidade
simples reproduções de peças gráficas, coisa
de uma imagem, mas acho que ela pode ser sempre melhorada
para ser bem ‘consumida’. Se tivermos uma foto de uma muito comum no início da rede” Gustavo Lassala
paisagem com um belo dia, mas o céu não saiu tão azul na foto,
vale a pena corrigir isso no Photoshop. Se eu tenho um produto dependendo da natureza de cada projeto fotográfico,
que está riscado ou danificado, trabalhar esses problemas no certos equipamentos estão absolutamente aptos a
programa torna-se essencial, afinal, o produto a ser vendido satisfazer a exigência de qualidade de um bom diretor de
não vai chegar riscado para o cliente. Exemplos clássicos e arte. Sendo assim, uso o Photoshop apenas para dar
simples, mas que ocorrem muito”, ressalta. retoques de luz, pele, texturas etc”, explica o diretor.
Mesmo com o grande poder de manipulação que o Foi justamente apostando nesta combinação que a
programa proporciona, na opinião de Fabio Meneghini, W/Brasil lançou uma das campanhas mais famosas da
diretor de arte da agência W/Brasil, campanhas visuais em sandália Melissa, utilizando bonecas como modelos:
que este software é praticamente o astro principal vêm “Primeiro, fotografamos a modelo real com o figurino e o
diminuindo. “Uma boa idéia que não dependa do Photoshop cabelo já finais e, depois, trocamos o seu rosto por um de
normalmente é melhor do que uma outra boa idéia que não boneca. Em média, cada fusão demorou dois dias de
viva sem ele. Há exceções, é claro, mas acho que, trabalho”, conta Fabio.

30
 Sensibilidade: como trabalhar uma boa imagem?
Uma imagem pode transmitir uma variedade de sensações e
sentimentos. Dependendo de como ela é feita, é possível
trabalhar um clima alegre ou, por outro lado, algo mais
melancólico e sombrio. Daniel Morena explica que não há
fórmulas, mas sim a utilização de recursos de linguagem. Para ele,
os principais dizem respeito ao uso da cor, à construção de ritmos
na imagem, à composição e ao uso do espaço negativo. “Para se
criar qualquer imagem, é preciso que tenhamos um vocabulário

anúncio
visual apurado e a técnica adequada. O olhar é um ato
consciente de decidir o que é relevante no que vemos. Somos
nossas escolhas visuais. Não importa se estamos fazendo um site
ou fotografando”, lembra Daniel.
Gustavo Lassala revela que qualquer clima pode ser
conseguido por meio da convergência dos elementos que
constroem uma imagem. Isso inclui não só o enquadramento,
mas também o estudo de cores e a manipulação dos softwares
adequados. Compartilhando da mesma opinião de Daniel, ele
lembra que é preciso treinar muito o ‘olhar’. “Pesquise, estude
composição visual, cores e entenda os detalhes e propriedades
técnicas de todo o processo. É importante salientar o aspecto

ilustração do site www.melissa.com.br

31
retratos da web
subjetivo deste conjunto e dizer que o que determina se uma
imagem é boa ou ruim é se ela cumpre o objetivo proposto em
um briefing”.
Fotojornalismo online e suas técnicas
É inquestionável hoje a importância dada pelas empresas
jornalísticas à internet. No caso do jornalismo digital, o que o
diferencia do praticado no meio impresso diz respeito não
somente aos formatos dos textos jornalísticos, mas também à
finalidade das imagens. Para Bruno Rodrigues, coordenador de
informação do site Petrobras, instrutor de Webwriting e autor do
primeiro livro em língua portuguesa sobre o assunto, a foto na
mídia digital é mais eficiente quando se trabalha com o detalhe.
Quando não há muito espaço para uma fotografia em uma
página, o que precisa chamar a atenção do usuário é o centro
nevrálgico da imagem transmitida, por isso a necessidade do
fotógrafo entender qual é o “ponto emocional” a ser capturado
na hora do click.
Bruno explica que um dos recursos utilizados nos sites
jornalísticos é o Chunk. Esse método trabalha com duas
realidades permanentes de uma página web: o espaço limitado e
a luta pela atenção. Ele destaca que o Chunk utiliza todos os
recursos possíveis de uma chamada (título, um pequeno texto,
imagem, legenda e indicações de links) para prender a atenção do
usuário. Entretanto, é preciso que o webwriter não repita um
aspecto da informação que está sendo apresentada em nenhum
32
“Para se criar qualquer imagem, é preciso que
tenhamos um vocabulário visual apurado e a
técnica adequada. O olhar é um ato consciente
de decidir o que é relevante no que vemos.
Somos nossas escolhas visuais. Não importa
se estamos fazendo um site ou fotografando”
Daniel Morena
dos outros elementos da notícia. “Construir o Chunk não é uma
tarefa fácil. Tente, por exemplo, criar um título que traga um
aspecto da informação e que não irá se repetir no texto, na foto
e na legenda”, alerta o especialista.
Entendendo um banco de imagens
Gratuitos ou pagos, os bancos de imagens visam atender às
expectativas de quem procura pela imagem ideal para o seu
trabalho. Em campanhas publicitárias, por exemplo, comprar
fotos de um banco pode reduzir o custo de produção em até oito
vezes, o que acaba interferindo no orçamento de um projeto.
Existem também os bancos criados pelas próprias empresas com
o intuito de facilitar aos seus funcionários a recuperação de
imagens nos acervos fotográficos. Ricardo Mello, coordenador
de projetos digitais da agência O Globo, explica que o Infoglobo

trabalha com dois sistemas de visualização de fotos nas
redações, o Digicol e o Photostation, auxiliando no trabalho
jornalístico diário.
O banco mantido por Ricardo possui não só fotos do
acervo do Globo, mas também do trabalho de fotógrafos
convidados, totalizando aproximadamente cinco milhões de
imagens. Com interfaces diferenciadas, os dois sistemas
buscam em um único banco as imagens que servirão de
ilustração para a edição online ou impressa. Como a
fotografia do jornal é totalmente digitalizada, a chegada do
material é muito mais rápida, bem como o seu acesso para
os redatores e editores.
De acordo com Mello, a primeira tarefa na rotina de
atualização do banco é a percepção do que entra no acervo.
Muitas das fotos produzidas diariamente não são utilizadas
pelo jornal e são arquivadas, deixando de ter referências
jornalísticas para ter referências conceituais (como lazer,
amor, criatividade etc.) no trabalho de definição de palavras-
chave. “Hoje chegamos ao requinte de colocar uma palavra-
chave que tem uma referência técnica da fotografia, como por
exemplo, a expressão ‘contra luz’. Se quisermos fotos só no
contra luz, os usuários desses programas colocam na palavra-
chave esse termo e terão como retorno só esse tipo de
material”, explica.
Uma boa opção de banco de imagens brasileiro é o
StockBrazil (www.stockbrazil.com.br). Com pouco mais de 4
anos de mercado, o site se consolidou como a principal
referência de imagens brasileiras na modalidade Royalty Free,
tanto no Brasil como no exterior. O banco possui uma vasta
gama de fotos sobre os mais variados temas, tais como
negócios, tecnologia, entre outros. Todas as produções são
feitas por fotógrafos, materiais e modelos brasileiros.
Outros bancos de imagens pagos bastante conhecidos
são: Getty Images (www.gettyimages.com), Corbis
(www.corbis.com), The Image Works (www.stockphotos.com)
e FotoSearch (www.fotosearch.com.br).
Algumas alternativas gratuitas são: stock.xchng
(www.sxc.hu), FreeFoto (www.freefoto.com) e Gograph
retratos da web
banco de imagens :
Para conhecer o acervo da agência O Globo, ele está
disponível via web no endereço www.agenciaoglobo.com.br/
bancodeimagens. Além disso, a agência conta com uma equipe
dedicada exclusivamente à pesquisa a partir do briefing ou
tema solicitado por um cliente externo.
(www.gograph.com.br). Podem também ser encontradas mais
dicas de bancos de imagens no site Blue Vertigo
(www.bluevertigo.com.ar).
Imagem no Flash: caso Paparazzo
Para quem utiliza o Flash, o fato de trabalhar com imagens
pode se tornar um grande pesadelo devido ao aumento em
kbytes no tamanho de um determinado projeto. Entretanto, o
site de ensaios sensuais Paparazzo prova que a união do Flash
com a imagem já pode ser considerada sinônimo de agilidade e
leveza. André Braz, coordenador de design da equipe de
criação da Globo.com, explica que o uso dessa ferramenta no
redesenho do site foi justificado pela melhora na experiência
do usuário e na percepção de fluidez e leveza do layout. Ele
explica que, no novo projeto, a atualização dos ensaios é feita
com uma ferramenta própria de gerenciamento de conteúdo.
“O Flash é usado apenas na interface com o visitante, e busca
as imagens de um arquivo XML externo. O tempo que levamos
para subir um novo ensaio é o tempo de cadastrar as fotos e
informações na ferramenta”, comenta.
André lembra que o Paparazzo é, por natureza, um site
banda-larga. Para ele, um produto exclusivamente sobre ensaios
fotográficos não pode ter fotos pequenas e com qualidade
baixa. “Ainda assim, tivemos o cuidado de não transformar o uso
do Flash em uma barreira para o consumo do conteúdo. O tempo
de download está muito mais associado às imagens do que ao
ambiente onde elas estão inseridas. Quem consome imagens já
está acostumado a esperar por seu download, seja em uma
conexão discada ou em um acesso de banda-larga”, ressalta.
O coordenador enfatiza que as imagens podem e devem ser
usadas para trazer ao site uma personalidade convergente ao
posicionamento do produto e a sua identidade visual. “Estamos
33
33
retratos da web
foto em 360º do Outeiro da Glória, no Rio de Janeiro, por Ayrton Camargo (www.ayrton.com)
falando de algo mais emocional e intangível. É uma imersão
completa e sensorial nos valores e no sentimento que desejamos
que o consumidor sinta ao ter contato com a sua marca. Devemos
sempre tomar cuidado para que imagens que cumprem este
objetivo não ganhem mais importância que o conteúdo e a
maneira de consumí-lo, prejudicando, assim, a experiência do
usuário. Resumindo, a forma não pode atrapalhar a função, mas
sim favorecê-la”, conclui André.
Os cuidados com a lei
Especialista em Direito da Propriedade Intelectual, a
advogada Marianna Furtado alerta: fazer alterações e posterior
uso sem autorização de imagens conseguidas na web não
protege a pessoa de ser processada pelo seu autor. Segundo a
especialista, pela Lei de Direitos Autorais, nº 9.610/98, ninguém
34
34
pode alterar uma foto ou imagem a não ser o próprio autor. A
advogada explica que há punições tanto na esfera penal quanto
cível. “O infrator pode ser condenado de três meses a quatro
anos de detenção, além de multa e pagamento de indenização a
título de danos morais e danos patrimoniais”, alerta.
Já para quem teve sua foto utilizada por terceiros sem uma
autorização, a advogada explica que o primeiro passo a ser
tomado é o envio de uma notificação extrajudicial informando
ao infrator que sua conduta está violando os seus direitos.
Segundo ela, tal notificação terá como objetivo principal
prevenir direitos e responsabilidades referentes à conduta do
infrator. Após essa medida, e caso o problema ainda não tenha
sido resolvido, a parte lesada poderá entrar com uma ação
judicial solicitando indenização a título de perdas e danos, tanto
morais quanto patrimoniais.
Imagens 360º: o mundo dentro do monitor
Já se imaginou parar na rua e dar um giro de 360º sobre o
próprio eixo, observando todos os detalhes a sua volta? Pois bem,
para quem já teve a oportunidade de navegar por uma foto
360º, a sensação é bem semelhante. Utilizado para retratar
tanto ambientes internos quanto externos, como saguões de
35
Aposte na sua carreira
retratos da web

hotéis e pontos turísticos, por exemplo, esse recurso seu real objeto e qual será o foco da arte. Depois faço
proporciona uma maneira diferente de lidar com a uns riscos para definir a diagramação dos objetos e aí sim
experiência do usuário ao ver uma foto. Para criar a faço o acerto final. Com esses passos concluídos,
ambientação, é preciso antes fazer um conjunto de imagens transfiro para o computador, lapidando a arte até chegar
em seqüência para depois fazer sua junção. Entretanto, ao resultado esperado”, explica o ilustrador.
Ayrton Camargo, especialista nesse tipo de trabalho, Independente se o profissional é ilustrador, designer,
destaca que existem câmeras fotográficas que captam de ou programador, sem sombra de dúvida, quem trabalha e
uma só vez um determinado ambiente, mas destaca que são produz para o meio online sabe da importância de se
muito limitadas, além de custarem caro. transmitir uma boa imagem na rede. Não só a literal, pura e
Ayrton lembra que a imagem 360º ficou mais difundida simples, mas sim, e de forma mais ampla, a que se restringe
na web a partir de 1996, quando a Apple lançou o Quick Time ao layout de um site, englobando todo o seu conjunto de
Virtual Reality, que, segundo ele, é a melhor e mais usada cores, harmonia e o equilíbrio entre os elementos. Talvez,
tecnologia para a veiculação desses ambientes. “Esse tipo de nenhum outro meio tenha um apelo estético tão grande
foto é muito bem aceita no mercado. Já realizei trabalhos quanto a internet, e nenhum outro tenha que explorar
para hotéis, como o Copacabana Palace, e empresas, como a formas de comunicação que resultem na qualidade visual
BR Petrobrás, ESSO e Shell. É preciso lembrar também que aliada à eficácia da informação.
podemos realizar imagens em 360º de produtos ou pessoas,
permitindo, até mesmo, girar o objeto fotografado”, explica.
Ilustrações: a arte sobre pixels
Com o intuito de transmitir uma mensagem, seja com
humor, delicadeza, sátira ou, até mesmo, uma reprodução fiel
de uma imagem ou objeto, o ofício da ilustração ganha alguns
fortes aliados tecnológicos, como a mesa digitalizadora, ou
tablet, como é conhecida em inglês. Com ela, é possível ao
artista desenhar diretamente no computador, sem precisar
reproduzir no papel para só depois scanear. A vantagem é
que, além de ser uma prancha de desenho, ela também tem a
função de mouse convencional. Arrastar a ponta da caneta
sobre a prancha digital é como clicar e arrastar. Conforme o
modelo de mesa, a caneta de desenho inclui uma borracha
virtual, útil para reparar possíveis erros.
Mas, para quem ilustra da forma tradicional, ou seja,
lápis e papel, o Photoshop torna-se essencial para dar os
acabamentos finais referentes à coloração, textura e à
ambientação do desenho. Para o ilustrador Guilherme
Marconi (http://marconi.cloning.com.br), o bom e velho
p a p e l a i n d a é o s e u p r i n c i p a l a l i a d o . “A o f az e r u m a
ilustração, primeiro escrevo o que espero do desenho, ilustração de Guilherme Marconi (www.marconi.cloning.com.br)

36
36

É preciso lembrar que, no mundo atual, a imagem não se
restringe somente a representações figurativas de algo. Para as
empresas, por exemplo, seu conjunto de ações e valores serve
como o “lápis e o papel” na hora de construir uma imagem
institucional aos seus clientes. Na rede, certas premissas também
têm que ser colocadas em prática. Não adianta um site possuir um
belo layout, se os canais de comunicação com o usuário são
deficientes. Dessa maneira, diferentemente dos fotógrafos
pioneiros do século XIX, na web competitiva de hoje, não cabem
mais experimentações quanto à construção da imagem que
queremos passar ao nosso usuário. Nesse caso, é preciso
entendê-lo e tratá-lo muito bem para que, assim, não corramos o
risco de ter o nosso “filme queimado” definitivamente.
Arte na web
Veja outros sites de ilustradores na internet:
http://www.speto.com.br
http://www.fernandaguedes.com.br
http://talktohimselfshow.zip.net
Brincando de imagens
Nestes sites, é possível fazer montagens com partes do rosto humano:
Ultimate Flash Face - http://flashface.ctapt.de
Morphases.com - http://www.morphases.com
Que recurso você MAIS utiliza para
gerar imagens para a criação de sites?
74% Banco de imagens gratuito
20% Fotografia própria
10% Banco de imagens pago
9% Ilustração
6% Fotografia profissional
Acesse e participe!
www.arteccom.com.br/webdesign
retratos da web
Como você vê a popularização do uso da
fotografia digital (substituição de
fotógrafos profissionais por amadores) e
seu resultado na web?
A princípio eu vejo que ocorrerá uma queda na
qualidade, proporcionalmente à popularização, mas
numa próxima fase os trabalhos dos amadores
amadurecerão. Contudo, um bom profissional
sempre fará a diferença.
Jefferson - jeffersonparra@uol.com.br
A fotografia amadora pode suprir algumas
necessidades simples mas nada irá substituir a
visão técnica de um fotógrafo profissional, já
que eles levam em consideração luz,
ambientização e tratamento, e isso acaba
refletindo no que a imagem quer transparecer.
Detalhes como estes nem sempre são levados
em consideração pelos amadores.
Fernanda Prevedello -
fernandawebdesigner@yahoo.com
Creio que é necessário um certo conhecimento para
realizar esta função. Mas devido à grande demanda
e o fácil acesso aos equipamentos, designers estão
fazendo por conta própria, o que reflete no preço
final dos projetos, assim como na qualidade.
Renato Cruz - renato@rinovare.com.br
Acesse e participe!
www.arteccom.com.br/webdesign
37
37
37
retratos da web
10 dicas básicas de Fotografia Digital
por Julio Preuss
Resolução
Afinal, quantos milhões de pontinhos uma foto precisa ter?
Tecnicamente, 2 megapixels para imprimir em 10x15cm. Mas as
câmeras de 3 megapixels valem mais a pena, pois custam quase o
mesmo e têm 64% mais definição. Acima disso, só faz diferença na
hora de ampliar muito ou recortar detalhes da foto.
Impressão
Posso obter fotos “de verdade” com uma câmera digital? Claro que
sim! Nos laboratórios mais modernos, até as fotos comuns são
digitalizadas antes de serem impressas – aquelas que você mandou
revelar em uma hora já viraram digitais e você nem soube. Afinal, a
qualidade é rigorosamente a mesma, se não melhor.
Armazenamento
Quantas fotos “cabem” numa câmera digital? Depende da resolução,
do nível de qualidade e do tamanho do cartão de memória da câmera,
mais fotos de 3 megapixels ocupam, em média, 0,8 megabytes. Logo,
num cartão de 8MB, cabem 10 fotos, num de 16MB, 20, num de 32
MB, 40, e assim por diante.
Acessórios
Quando for comprar a câmera, pense logo nos acessórios. Um cartão
de memória adicional e baterias recarregáveis são praticamente
indispensáveis para você poder fotografar à vontade. Verifique o
tipo de cartão e de bateria que cada câmera usa antes de comprá-la,
pois alguns podem ser bem mais caros.
Lentes
Não são só os megapixels que determinam a qualidade da foto digital.
Boas lentes, de marcas com tradição em fotografia, fazem toda a
diferença. Pense nos fabricantes que você associaria a fotografia
cinco anos atrás – quase sempre as lentes que eles usam nas câmeras
digitais são de melhor qualidade.
Foco
Quase todas as câmeras digitais, exceto as mais simples, precisam
38
focalizar a imagem antes de fotografar. Pressione o disparador de
leve e espere a câmera encontrar o foco antes de tirar a foto, ou ela
pode sair embaçada. Alguns modelos acendem uma luz no visor ou
indicam no monitor quando a cena está em foco.
Zoom
Quando as lentes de uma câmera conseguem aproximar e afastar a
imagem, dizemos que elas têm zoom ótico. A proporção entre a
aproximação máxima e mínima indica o fator de zoom em número de
“vezes” (X). Daí vêm os 2X, 3X, 4X. Já o zoom digital é só um quebra-
galho, melhor fingir que ele nem existe.
Enquadramento
Nem sempre a pessoa ou objeto que você está fotografando precisa
ficar no centro da foto, principalmente quando você quer valorizar
aquela linda paisagem ao fundo. Divida mentalmente o espaço do
visor em três e experimente alinhar seu ponto de interesse em uma
dessas linhas imaginárias – fica muito mais “artístico”.
Olho vermelho
O flash das câmeras compactas fica muito próximo da lente e pode
refletir no fundo dos olhos de pessoas e animais. Evite o problema
com o redutor de olhos vermelhos da câmera, fotografando mais de
perto ou desativando o flash. Ou, então, peça para retocarem os
olhos na hora da impressão das fotos.
Experimentação
Esta é a melhor dica para um “fotógrafo digital”: fotografe muito –
quanto mais fotos tirar, mais chances de tirar ótimas fotos. Se você
vai viajar, tire mil fotos, imprima as cem melhores e emoldure
aquelas dez realmente fantásticas. Para fazer isso com filme, você
gastaria quase 30 rolos de filme e muito mais dinheiro!
Julio Preuss é jornalista
especializado em tecnologia,
consultor de imagem digital e
colaborador do site Fórum PCs,
onde é responsável pela área de
fotografia digital. Referência
sobre o assunto no país, Julio
lançou o livro Fotografia Digital:
Da Compra da Câmera à
Impressão das Fotos, da Editora
Axcel Books, já disponível nas
livrarias.
39
debate

Tableless limita a criatividade

no desenvolvimento de sites?
Confira o debate com grandes profissionais da área e tire suas conclusões sobre como lidar

com este novo formato.

Não. Muito pelo contrário. A adoção dos Standards para desenvolvimento de projetos web ajuda tanto na hora de criar e
pensar em layouts mais arrojados quanto na hora de montá-los.
Com relação a criatividade, acredito que essa adoção trouxe um benefício muito grande que é o de não estar tão
preocupado em “como” o layout será montado, já que os Standards proporcionam uma flexibilidade grande quando o
desenvolvedor for transformar o projeto gráfico em código legível para os browsers. Dessa forma e de acordo com o princípio
básico de propiciar o trabalho da forma e do conteúdo de maneira independente, o designer pode focar um pouco mais sua
atenção para princípios de usabilidade, interação com a interface e outras variáveis que, pela correria dos prazos ou por puro
desconhecimento, ficam de fora do processo criativo.

:: Laert Yamazaki
Diretor de Criação
da Idéia 3 Digital
www.idéia3digital.com.br

40

“Argumentar ausência de criatividade se baseando nas limitações do tableless tem
que ser visto como preguiça mental ou indisposição com o novo. ” Tiê Lima
Definitivamente, não. Tanto que não vejo a hora do
site do Shoptime ser em Tableless.
Argumentar ausência de criatividade se baseando nas
limitações do tableless tem que ser visto como preguiça
mental ou indisposição com o novo.
Todos nós profissionais de criação (on e offl ine)
sabemos que o nosso exercício diário consiste em aprender
coisas novas e reaprender coisas velhas. Entretanto,
acredito que os não adeptos, em breve, o se tornarão, já
que o ser humano persegue a auto-superação, ou seja,
um feito anterior é uma meta a ser batida. Afinal, hoje em
dia, os sites são “frameless”, e quem não lembra da
discussão sobre os frames?
:: Tiê Lima
Criação
Shoptime.com
debate
Na minha opinião, o negócio é saber quando usar o
padrão Tableless.
Se você visitar o site csszengarden.com, vai ver um
mesmo conteúdo sendo formatado de mil maneiras diferentes,
somente modificando o CSS da página. As vantagens são que
o HTML fica mais rápido pra carregar e o layout mais fácil de
alterar, além da portabilidade. Pode ser uma vantagem, até
mesmo do ponto de vista criativo, se utilizado com inteligência.
Para portais de conteúdo então, é bem interessante.
Agora, se você pensar nos recursos rich media que, cada
vez mais, são utilizados na publicidade online, como banners
com video e hotsites promocionais cheios de Java Scripts e
animações em Flash, aí, o Tableless não faz o menor sentido e
pode sim ser um fator limitante pra criativade dos designers e
diretores de criação.
:: Marcelo Albagli
Diretor de criação da Canvas
www.canvas.com.br
41
41
debate
“Com tantos layouts bonitos e dentro dos Padrões Web seria um engano acharmos que o
uso dos Padrões limita a criatividade” Prof. Bechara
Esta é uma ótima pergunta. Muitos alunos me perguntam
exatamente isso. A utilização dos Padrões Web
imprescindível na maioria dos projetos e, principalmente, o
design é muito bem contemplado pelos padrões recomendados
pelo W3C, em particular pelos Padrões XHTML e CSS. Para
percebermos este potencial podemos observar sites de
grandes empresas que adotaram os Padrões Web, tais como o
site da Calça Lee, WIRED, Macromedia e tantos outros. Aconselho
observarmos dois trabalhos: o do Dave Shea com
seu projeto CSSZENGARDEN.com. e o Web Standards
Awards (www.webstandardsawards.com). Com tantos
layouts bonitos e dentro dos Padrões Web seria um engano
acharmos que o uso dos Padrões limita a criatividade. Pelo
contrário - os Padrões dão muito mais liberdade de criação
aos designers.
:: Prof. Bechara
Professor de Padrões Web da iLearn
www.ilearn.com.br
42
Não. Tecnicamente, o transporte de um layout, seja
é vetorial ou rasterizado, para uma implementação baseada
em padrões é transparente - a correspondência entre as
duas fases é até maior do que no desenvolvimento com
tabelas. Há muito mais liberdade: podemos superpor
camadas, o que é impraticável com células de tabelas; e
utilizar pseudo-classes, como:hover para simular efeitos
antes possíveis apenas com javascript. Para tirar o máximo
proveito dos padrões, entretanto, não dá mais para
depender de interfaces WYSIWYG - dominar o código HTML/
CSS passa a ser fundamental.
Rodrigo Webler
Coordenador de desenvolvimento
da Tau Virtual
www.tauvirtual.com.br

Acredito que o Tableless esteja para o designer hoje,
assim como o Fireworks foi ao final dos anos 90, um
achado tremendo para os profissionais de web. Lembro
que a luta constante para baixar o peso das imagens foi
praticamente extinta quando foram lançados os
softwares de produção web.
Programação Tableless hoje é um novo passo para
redução ainda maior de peso e limpeza de código, o que
obviamente reduz drasticamente o acesso ao conteúdo.
Com o peso economizado no código, podemos aproveitar
para a criação de outras peças - como hotsites, banners e
menus dinâmicos – visando fortalecer ainda mais a
percepção e o alinhamento conceitual do projeto. As
limitações existem, mas isso torna ainda mais desafiador o
processo criativo. Como já disse o publicitário Washington
Olivetto - “A Criatividade é um cachorro preto, babando e
correndo atrás de você”. Aí cabe a cada profissional dar o
melhor de si e extrair o máximo de sua criatividade.
Cristiano d’Alcântara
Diretor de Criação
da VIVA DIGITAL
www.vivadigital.com.br
debate
Quando a W3C criou os padrões da web, não estavam
preocupados em mudar a maneira de desenvolver layouts, e
sim, em tornar o trabalho do desenvolvedor web mais prático
uma vez que se seguidos todos os padrões o webdesigner
terá a certeza de ter criado um trabalho modularizado,
escalável e acessível. Não é de hoje que essa mudança vem
crescendo e é uma tendência seguir os WebStandards. Ao meu
ver, a criatividade não pode ser atingida pela escolha de um
padrão de desenvolvimento, mas deve ser adaptada a essa
nova tendência. Para isso, um trabalho desde o início da
formação do webdesigner deve ser feito nesse sentido. Para
que, num futuro próximo, todos os webdesigners vejam o
desenvolvimento em padrões como a única forma de criar
layouts para a web.
Neto Leal
Diretor Técnico da iMedia
imediabrasil.com.br
“As limitações existem, mas isso torna
ainda mais desafiador o processo
criativo” Cristiano D’Alcântara
43
43
44
45
45
debate
estudo de caso :: Havaianas.com.br

Havaianas.com.br:
um legítimo
mix digital Por Tatiana Serra

Livre para explorar cores, linguagens e expressar

diferentes culturas, sem perder a brasilidade, a

AlmapBBDO fez do site da Havaianas uma mistura

equilibrada “made in Brazil”.

No ar desde junho de 2005 e acompanhando as inovações da

sandália, o novo site das Havaianas seduz o usuário a um mundo
colorido, animado e criativo, equilibrando conteúdo, movimento,
design e música. Acompanhe a entrevista com Adhemas Batista,
diretor de arte da AlmapBBDO (www.almapBBDO.com.br), e saiba
como foi criado e desenvolvido o www.havaianas.com.br, site que
divulga os produtos da empresa, interage com o público e tem até
uma loja virtual.
WD :: Quando surgiu o novo site das Havaianas?
Desde quando a marca está na web?
AB :: O novo site de Havaianas entrou no ar no início de junho
deste ano. Foi criado para substituir o antigo site da marca, no ar
www.havaianas.com.br desde 2000.

46
46

WD :: Quais eram os objetivos da marca ao entrar no
mundo virtual?
AB :: O novo site foi criado para acompanhar as inovações
do próprio produto, que teve um aumento considerável nas
exportações, ganha novos modelos sempre e precisa de uma
vitrine para todo o mundo. O objetivo era criar um ambiente
sedutor para que as pessoas ficassem encantadas; um ambiente
onde as pessoas se identificassem e quisessem ficar. Além disso,
era necessária uma nova ferramenta de relacionamento com o
público que adora as Havaianas.
WD :: Fale sobre o papel do site como ferramenta de
relacionamento com o consumidor de Havaianas.
AB :: O site tem a função de causar desejo através de todo
o “life style” que envolve o mundo de Havaianas, através de
todas as tribos e todo o glamour que estão contidos nele. E
quando o consumidor é fisgado por esse sentimento de desejo,
nossa meta de relacionamento está cumprida. Com certeza, ele
volta pra fazer ainda muitas visitas. Para incrementar mais esse
relacionamento, o site terá ferramentas especiais para cativar
esse público, muito em breve...
WD :: Além de divulgar seus produtos, a empresa
Havaianas também vende através de seu site?
AB :: A loja virtual de Havaianas está presente na web há 5
anos e vende desde sandálias que você encontra na loja, até
modelos com numeração mais difícil de encontrar no mercado.
WD :: Qual o perfil do cliente online?
AB :: O cliente de Havaianas que está na web procura se
inteirar de todos os produtos, gosta de moda, quer saber das
novidades e também quer comprar. Tem gente que até faz parte de
comunidade das Havaianas no Orkut e no Beltrano.
estudo de caso :: Havaianas.com.br
WD :: Como tem sido o retorno do público com relação
ao novo site e com relação à loja virtual?
AB :: Recebemos muitos elogios dos usuários brasileiros e de
muitas revistas especializadas em design internacionais.
WD :: Cite algumas dessas revistas
especializadas em design internacionais que elogiam
o novo site das Havaianas.
AB :: Kaliber 10000 da Dinamarca (www.k10k.net): citação
“Deluxe” e 3 troféus; Favourite Websites Awards da Inglaterra
(www.favouritewebsiteawards.com): site do dia; Newstoday, da
Holanda; Design is Kinky, da Austrália; Linkdup, da Inglaterra; Digital
Abstracts, da Letônia; BD4D (By Designer for Designers), da
Inglaterra; F.E.D (Fresh Eletronic Delivery), revista por e-mail;
Funkbuilders, de Singapura; entre outros.
WD :: Quais foram os principais desafios enfrentados
durante a criação e o desenvolvimento do site?
AB :: O novo site de Havaianas precisava ser, em primeiro lugar,
alegre, brasileiro e colorido. E o desafio era manter todo esse
entusiasmo para mostrar absolutamente todos os modelos da
sandália, sua história, falar com compradores e outros assuntos
mais específicos. A idéia foi fazer um grande mundo colorido,
animado e criativo. A navegação foi pensada para fluir junto com o
movimento das animações. A maior dificuldade foi orquestrar todo o
conteúdo com o design e trilhas diferentes para cada área.
WD :: Hoje, as sandálias Havaianas estão na moda, no
Brasil e no exterior. Sendo um dos produtos que melhor
representam o “estilo brasileiro”, como foi explorada a
imagem da marca no site?
AB :: Esse foi o melhor exercício deste projeto, pois podíamos
explorar todas as cores, todas as linguagens e expressar todas as
47
estudo de caso :: Havaianas.com.br
culturas sem perder nossa brasilidade. Você pode encontrar
desenhos inspirados em figuras orientais, africanas e em
ícones americanos. Mas, sempre vai ter lá alguma coisa
remetendo ao Brasil. Digamos que o site é uma tentativa de
mostrar a cara brasileira: um verdadeiro mix cultural.
WD :: Que técnicas foram utilizadas na criação do site?
AB :: Ilustrações vetoriais, muita animação em flash e
uma programação que controla o quanto o usuário recebe de
informação enquanto navega.
WD :: Como funciona a programação que
controla as informações recebidas pelo usuário
enquanto ele navega?
AB :: Enquanto o usuário recebe uma animação, o
sistema carrega as outras animações próximas da ilustração
que ele está vendo no momento. Assim, gradativamente, a
composição vai se formando. E, dessa forma, o site carrega
mais rápido.
WD :: Praticamente todo mundo usa as
sandálias Havaianas, independente da idade, da
classe social, e seja de que “tribo” for. Com
diferentes desenhos, cores, movimentos e A única quase inexistente é o preto.
ilustrações, o site representa a versatilidade da
marca. Fale sobre a escolha do design, das cores e
das ilustrações para o site.
AB :: O primeiro estudo do site foi feito com algumas
ilustrações simples sem cor, somente para o cliente
entender a criação. Aprovado o conceito, coloquei o fone
de ouvido e ouvi muita música, até que as primeiras
ilustrações foram aparecendo e uma puxou a outra, sempre
seguindo o estilo do modelo da sandália. Dinossauros para as
Havaianas Kids, carros e pranchas para as Havaianas Surf,
elementos selvagens para o tema Trekking etc.
WD :: Diante de um produto tão brasileiro, seria
inevitável o uso do verde-amarelo no site das
Havaianas. Porém, nota-se que todas as cores,
inclusive as da bandeira do Brasil, estão em harmonia,
48
O site todo é inspirado no Brasil e as animações
remetem ao conceito de mix cultural
sem deixar de apresentar muito colorido ao usuário.
Como se deu o tratamento das cores no site?
AB :: Criei uma grande paleta com cores que não
brigam entre si. Tons fortes e chamativos que não se
anulam. Cada ilustração segue uma linha de cor, sendo que
algumas têm variação de tons frios, outras de tons quentes,
tons da terra etc. Assim, foi mais fácil obter harmonia. Não
existiu nenhuma regra específica para a utilização de cores.
WD :: Quais serão os próximos lançamentos e
novidades do site?
AB :: Em breve, teremos muitas novidades no site.
Estamos preparando novas seções, com a história das
Havaianas, área para colecionadores, exportações e uma
nova loja virtual; ferramentas de relacionamento com o
público. Isso e muito mais.
WD :: Destaque alguns dos principais projetos
realizados pela AlmapBBDO.
AB :: O novo site do Achocolatado Toddy (http://
www.toddy.com.br); The Legend of Omaha (http://
www.legendofomaha.com.br), para a Volkswagen;
Chocolates Twix (http://www.twix.com.br); Mizuno
(www.mizunobr.com.br); Cerveja Antarctica (http://
www.soudaboa.com.br); entre outros.
49
sites de conveniência

Economizando sola de sapato Por Tatiana Serra

Saiba como o e-commerce vem atraindo quem busca conveniência, rapidez, praticidade e

segurança na hora de fazer suas compras.

O e-commerce vem crescendo nos últimos quatro anos e compras sem sair de casa como grande alternativa, devido a

colaborando para uma considerável mudança no comércio em violência que vivemos nos grandes centros urbanos”, diz

geral. As causas desta expansão são o aumento do número de Cláudio Martins, diretor Comercial da Interlize

internautas e as possibilidades e vantagens da compra online. (www.interlize.com.br); enquanto Abel Reis, VP de Tecnologia

Como conseqüência, tem-se a também expansão das e Projetos da Agência Click (www.agenciaclick.com.br), destaca

exportações, além da geração de empregos e de renda. Mas o a facilidade de encontrar produtos que podem não existir nas

receio quanto à segurança na web é um dos pontos que ainda lojas físicas, a facilidade de comparação de preços de produtos,

impedem um maior crescimento do comércio eletrônico. Apesar a conveniência de atendimento a qualquer hora e lugar, e a

disso, a conveniência, a rapidez e a praticidade parecem possibilidade de atendimento personalizado.

superar qualquer empecilho. Em 2005, o Com o foco no sucesso e no melhor para o consumidor, os

faturamento do e-commerce deve crescer 24%, sites de comércio eletrônico estão investindo em sua

de acordo com dados da E-Consulting infra-estrutura. O Submarino, por exemplo,

divulgados na web. anunciou que pretende crescer entre 50% e

A evolução do e-commerce tem trazido 60% ainda neste ano. A empresa investe

muito benefícios para o País. “Podemos e se prepara para o Natal, a melhor

destacar a possibilidade de efetuar as época para todos os varejistas.

50
 sites de conveniência
Brasil é referência em e-commerce possibilidades vão além da conveniência. Nestes casos, trata-se de
Nos últimos anos, o comércio eletrônico na América Latina vem uma experiência de consumo única e altamente personalizada (por
se expandindo, e ainda há um forte potencial para oferta de exemplo: os podcasts)”, explica ele.
produtos e serviços pela internet. “Se compararmos com outros René e Claúdio compartilham da mesma opinião quanto a
países da América Latina, o e-commerce brasileiro dá um banho: lojas possibilidade de integração da loja com outros serviços, como SMS,
robustas, maduras, meios de pagamento confiáveis, números RSS ou, até mesmo, telefone. “Eu me recordo de uma loja online em
expressivos... É admirável!”, declara René de Paula Jr., criador do que trabalhei. O cartão de crédito podia ser passado por telefone,
portal Usina.com (www.usina.com) e do site Radinho de Pilha no meio do processo de compra”, lembra René, enfatizando que isto
(www.radinhodepilha.com.br) e, atual diretor de internet da seria questionável em termos de segurança, mas ótimo em termos de
Wunderman - agência de marketing direto do grupo WPP. redução do medo da compra online.
E por falar no mercado latino, o BuscaPé
(www.buscape.com.br), maior site de comparação de preços da podcast :
O podcast é um sistema de produção e difusão de arquivos
América Latina, celebra seu sexto ano e lança seus serviços no Chile
sonoros que guardam similitudes com o formato dos programas
(www.buscape.cl), consolidando sua liderança, pois já havia de rádio. Funciona da seguinte forma: com um computador
ingressado também na Argentina (www.buscape.com.ar) e no doméstico equipado com um microfone e softwares de edição
de som, o usuário grava um programa, salva como arquivo de
México (www.buscape.com.mx).
som e, depois, torna-o disponível em sites que são indexados
A maturidade do comércio eletrônico teria ajudado a em agregadores RSS (Really Simple Syndication).
amadurecer também o consumidor. “A exigência por cumprimento
de prazos, por qualidade de atendimento e, sobretudo, por
preços competitivos é uma característica recente e louvável no
consumidor brasileiro”, afirma René, lembrando que o e-
commerce também aumenta bastante as opções de quem vive
fora dos grandes centros. Na contramão disso, Cláudio Martins
acha que o crescimento do e-commerce pode colaborar para que
haja menos indivíduos convivendo socialmente.
Vantagens além da conveniência
A comodidade tem sido uma das maiores causas da
evolução do e-commerce em vários setores. Para se ter uma
idéia, milhares de farmácias no Brasil movimentam bilhões de
dólares por ano, e o comércio eletrônico já participa ativamente
deste mercado. Com isso, construir sites de farmácias online,
por exemplo, passa a ser um dos setores em expansão para os
profissionais de web, já que a maioria dos sites existentes ainda
não tem muita qualidade.
Na opinião de Abel, se pensarmos apenas nos produtos
físicos, as vantagens do e-commerce se voltam para as questões
de conveniência. Por outro lado, “se pensarmos em produtos
digitais (música, vídeo, software, jogos, e-books), as

51
51
sites de conveniência
Cartão de crédito: o mais temido e o mais usado
Para conquistar um cliente online é preciso lhe oferecer
alternativas de pagamento seguras e ágeis. O cartão de crédito
costuma ser a opção mais usada e, ao mesmo tempo, mais temida
neste meio. Para quem não tem ou não quer usar o cartão para
compras na web, o boleto bancário aparece como uma boa alternativa.
Segundo Abel, também há riscos com relação à segurança da
informação. “Mas trata-se de um aspecto inerente a transações
comerciais em qualquer meio”.
Os meios de pagamento usados na internet brasileira são,
praticamente, os mesmos dos países-referência. Nos Estados
Unidos, 95% das transações de internet são realizadas por meio de
cartões de crédito, segundo informações da Câmara-e.net. Já no
Brasil, o percentual caiu de 90% para 80%, recentemente. Talvez
por uma parcela dos consumidores ainda “desconfiarem” do uso de
cartão de crédito via internet, ou mesmo por uma questão cultural, o
fato é que o perfil do consumidor brasileiro virtual pede outras
52
plataformas de meios eletrônicos de pagamento. Por exemplo, a
plataforma m-Cash, desenvolvida pela Megadata, empresa de
tecnologia associada ao grupo Ibope, utiliza o telefone celular
como validador da transação e pretende agregar muito aos
negócios online no Brasil.
Serviços Online x Serviços Convencionais
Hoje em dia, é possível realizar transações bancárias via
internet, compras no supermercado e, até mesmo, comprar um carro
por meios virtuais. Mas, será que, futuramente, alguns serviços
online substituirão serviços convencionais, ou eles apenas surgem
como mais uma opção de compra?
Para o diretor comercial da Interlize, os serviços online são uma
opção. Segundo ele, produtos sem personalização, como calçados,
brinquedos, CDs, DVDs e eletrodomésticos, são mais vendáveis e
possuem números mais representativos em compras via internet.
“Ainda assim, uma parcela do mercado optará por comprar em lojas
físicas. Exceções à regra são os produtos de natureza online que foram
criados na internet e para a internet, como serviços de publicidade
online, assinatura de sites de conteúdo, compra de MP3 etc”.
A venda física pode não desaparecer, mas, certamente, sofrerá
mutações. Para Abel, “os pontos de venda físicos agregarão ao
processo de compra cada vez mais ‘experiências memoráveis’ e de
envolvimento/sedução do consumidor”. Na opinião de René, é sempre
desejável ter um leque de opções. “Mas essas opções todas têm seus
custos e benefícios, e não me espantaria se, para alguns casos, uma
das opções fosse descartada por invisibilidade. (Não me espantaria,
inclusive, se a opção descartada fosse... a internet)”, afirma ele.
www.buscape.com.br
 sites de conveniência
Liquidaweb Movimento Internet Segura :
Para que as empresas demonstrassem publicamente sua adesão ao O Movimento Internet Segura foi criado em setembro de 2004, sob a
Movimento Internet Segura (MIS), foi realizada a Liquidaweb, a coordenação da Camara-e.net. Esta é uma iniciativa destinada a
maior campanha do varejo eletrônico brasileiro coordenada pela Câmara levar aos usuários da web informações úteis para uma navegação
Brasileira de Comércio Eletrônico (Camara-e.net). Entre os dias 1º e 10 de mais segura na rede, e tem como membros, além das lojas
julho, as lojas Americanas.com, Extra.com.br, LivrariaCultura.com.br, participantes do LiquidaWeb, as empresas American Express, Banco
LivrariaSaraiva.com.br, MagazineLuiza.com.br, Marisa.com.br, do Brasil, McAfee, Microsoft, entre outras.
Shoptime.com.br, Siciliano.com.br, SomLivre.com, Submarino.com.br e
TokStok.com.br ofereceram descontos de até 50%, facilidades de
pagamento e, em alguns casos, isenção de tarifa de frete para as
pessoas que fizeram compras em seus sites. O projeto tem patrocínio da
VISA e apoio da PHILIPS. No endereço www.internetsegura.org, o
internauta recebe informações didáticas sobre segurança e integridade
na navegação pela Internet.

www.brastemp.com.br

www.carrefour.com.br

E-commerce nas empresas

A Interlize disponibiliza tecnologia de ponta para estruturação de empresas
que objetivem a comercialização de produtos e serviços pela internet. Entre
os projetos de e-commerce da empresa, Cláudio Martins destaca a
implantação da solução de comércio eletrônico Direct Commerce® no
Portal de Busca Aonde.com, com formas de pagamento online visando a
venda de assinaturas para o cadastramento no site; dezenas de lojas virtuais
de varejo com a solução Direct Commerce®; entre outros.
Com a integração do serviço CDL-Rio (Clube de Diretores Lojistas do Rio de
www.fiat.com.br
Janeiro) à solução de comércio eletrônico da Interlize, a empresa constatou a
redução no número de fraudes nas lojas virtuais que utilizam o “OK!” (Serviço
de Conferência Automática de Endereços). Como diferencial na realização dos
projetos, Cláudio aposta em tecnologia, segurança e expertise em e-commerce.
Direct Commerce® :
A Agência Click é uma agência que integra planejamento, criação e
tecnologia em projetos de internet. Entre os principais trabalhos da agência O Direct Commerce® é uma ferramenta para criação de lojas
voltados para o mercado e-commerce, Abel Reis destaca os atuais projetos virtuais que possibilita a administração de conteúdo via painel
Fiat (www.fiat.com.br), empresa pioneira em venda online de carros no de controle, diversas formas de pagamentos online, carrinho
Brasil; Brastemp (www.brastemp.com.br); Consul (www.consul.com.br) e de compras, estoque, integração com telefonia móvel celular e
Carrefour (www.carrefour.com.br). E, entre os vários outros do passado, ele sistema anti-fraude.
relembra o projeto H.Stern.

53
53
tutorial
Padrões Web 2
XHTML, a evolução do HTML
“XHTML é uma reformulação do HTML 4 como uma aplicação
XML.” – W3C
Neste artigo vamos conversar um pouco sobre a linguagem de
marcação XHTML, contando como surgiu, descrevendo o que é,
mostrando qual a sua finalidade, apontando razões para se adotar
esta linguagem desde já, bem como exemplificando e comparando com
o HTML em alguns trechos de código.
Apresentaremos seus aspectos estruturais e semânticos,
bem como ressaltaremos a posição da linguagem no contexto
das Web Standards.
O que significa XHTML ?
XHTML é a sigla em inglês para eXtensible HyperText
Markup Language, que em português pode ser traduzido para
Linguagem Extensível para Marcação de Hipertexto, escrita para
substituir o HTML e é uma Recomendação estável do W3C desde
26 de janeiro de 2000, revisada em 01 de agosto de 2002, portanto,
uma Web Standard.
Como surgiu XHTML ?
Todas as linguagens de marcação para a web são baseadas em
SGML (Standard Generalized Markup Language), uma
metalinguagem complexa, projetada para máquinas com a finalidade
de servir de base para criação de outras linguagens.
SGML foi usado para criar o HTML (HyperText Markup
Language) e o XML (eXtensible Markup Language), também
metalinguagens, porém, ambas bem mais simples.
Em XML, você cria suas próprias tags e atributos para
escrever um documento web, ou seja, é você quem cria sua
linguagem de marcação.
XHTML foi criado dentro deste conceito e, por isso, é uma
aplicação XML. As tags e atributos do XHTML foram criadas,
aproveitando-se as conhecidas tags e atributos do HTML 4.
Assim, é válido afirmar que, ao usar XHTML, estamos
escrevendo um código XML, onde as tags e os atributos já estão
54
Prof. Everaldo Bechara e Prof. Maurício Samy Silva
Professores do Centro de Treinamento iLearn
falacom@iLearn.com.br
definidos. Código este que proporciona todos os benefícios do XML
sem as complexidades do SGML.
XHTML é uma linguagem de marcação bastante familiar
para quem conhece HTML, e a transformação de um documento
HTML existente para XHTML é uma tarefa bem simples, como
veremos adiante.
Vantagens de se usar XHTML
Enumeram-se várias e efetivas vantagens em se usar marcação
XHTML nos novos documentos produzidos para a web ou migrar os
documentos atuais, escritos em HTML.
E, dentre estas vantagens, destaca-se em primeiro plano a
compatibilidade da linguagem XHTML com as futuras aplicações de
usuários, garantindo, desde já, que as criações XHTML conservar-se-
ão estáveis por longos anos, bem como a retro compatibilidade com
aplicações existentes.
A Internet do futuro aponta para versões de browsers e
agentes de usuários em geral, cada vez mais compatíveis e conformes
com XML e, em consequência, mais rígidos e menos complacentes com
marcação que se vale de códigos mal formados, sintaticamente
incorretos e que se utilizam de elementos e atributos
desatualizados (“deprecated”), segundo as recomendações do
W3C. Antigos e ultrapassados esquemas e esboços do HTML tendem
a ter seu espaço cada vez mais reduzido no ambiente da web.
Desenvolvedores de documentos e projetistas de aplicações de
usuários estão constantemente descobrindo novos caminhos para
expressar suas idéias com utilização de novas marcações. Em XML, é
relativamente simples criar novos elementos e novos atributos. A
família XHTML está projetada de modo a acomodar estas extensões
dentro dos módulos XHTML e de técnicas para desenvolver novos
recomendação estável :
Uma recomendação é considerada estável quando a
recomendação já se encontra em um grau de maturidade
suficiente para o W3C.

módulos de conformidade com XHTML (a serem descritos nas
futuras especificações de modularização XHTML).
Estes módulos permitirão a integração das facilidades
existentes com as facilidades futuras ao projetarem-se novas
aplicações de conteúdos e de usuários.
Modos alternativos de acesso a internet estão sendo
introduzidos constantemente.
A família XHTML foi concebida tendo em mente a
operabilidade com as aplicações de usuários gerais. Através
de um novo mecanismo de definição das aplicações de
usuários e de documentos, os servidores, proxies e
aplicações de usuário estarão capacitados a uma melhor
transformação de conteúdos.
Por fim, será possível desenvolver conteúdos em
conformidade com XHTML que sejam compatíveis com qualquer
aplicação de usuário XHTML.
XHTML é a linguagem da web do futuro desde já a
disposição de projetistas e desenvolvedores web.
XHTML é um código consistente que dispensa uso de truques
e “hacks” para contornar “bugs”.
Editar um código XHTML existente é uma tarefa bem simples
por se tratar de uma escrita limpa, estruturada e evidente.
O tempo de carregamento de uma página XHTML é mais
rápido, pois os browsers têm a interpretar uma marcação bem
formada sem ter que “adivinhar” e decidir sobre como renderizar
os erros de sintaxe existentes no código. Com isso, estaremos
contribuindo na construção da Web Semântica, um esforço
constante do W3C.
Uma página XHTML é mais acessível aos browsers e
aplicações de usuário em geral, incrementando a operabilidade e
a portabilidade dos documentos web.
Uma página XHTML é totalmente compatível com
as aplicações de usuários baseadas em HTML, antigas
e já ultrapassadas.
XHTML é uma Web Standard
Isto significa que trata-se de uma linguagem estável,
oficialmente especificada pelo W3C, depois de ter passado por
uma ampla e exaustiva discussão técnica, aberta a todas as
tutorial
organizações membro do W3C, a fabricantes de software, de
hardware e dos mais diversos equipamentos e componentes
direta ou inderetamente envolvidos com a web, bem como ao
público em geral, através de listas de discussão.
Uma Recomendação do W3C tem um longo caminho de
debates e análises antes de tornar-se uma web Standard.
Se desejar, pode acessar no endereço http://
www.maujor.com/w3c/xhtml10_2ed.html, onde você encontrará
em português a Recomendação W3C de 26 de janeiro de 2000,
revisada em 1 de agosto de 2002 - XHTML™ 1.0 The Extensible
HyperText Markup Language (Segunda Edição) - Uma
reformulação do HTML 4 em XML 1.0
As diferenças entre XHTML e HTML
Não cabe no espaço deste artigo e nem é nosso objetivo
detalhar as diferenças, mas apontamos, a título de ilustração,
algumas delas:
a-) todas as tags e atributos devem ser escritas em letras
minúsculas;
b-) os elementos (tags) devem estar convenientemente
aninhados;
c-) os documentos devem ser bem formados;
d-) o uso de tags de fechamento é obrigatório;
e-) elementos vazios devem ser fechados;
e algumas outras mais...
a) todas as tags e atributos devem ser escritas em
letras minúsculas
XML é case-sensitive (sensível ao tamanho da letra).
Uma vez que XHTML é uma aplicação XML, também é
case-sensitive.
Exemplo:
<UL>
<li>Laranja</LI>
<LI>Banana</LI>
<LI>Maçã</li>
</ul>
O código acima é perfeitamente válido quando se escreve
uma marcação para lista não ordenada em HTML.
55
tutorial

Contudo, em XHTML deve ser escrito assim: Errado: <p>Parágrafo 1 <p>Parágrafo 2

<ul> Certo: <p>Parágrafo 1</p> <p>Parágrafo 2</p>
<li>Laranja</li>

<li>Banana</li> e) elementos vazios devem ser fechados

<li>Maçã</li>
</ul>
b) os elementos (tags) devem
convenientemente aninhados
Elementos aninhados são como a teoria da pilha, ou seja, o
último que abre é o primeiro que fecha, sendo assim, não
poderemos sobrepor aninhamento de tags.
Exemplo:
Errado: <div><p>Meu parágrafo<div><p>
Certo: <div><p>Meu parágrafo<p><div>
c) os documentos devem ser bem formados
Um documento diz-se bem formado quando está
estruturado de acordo com as regras definidas nas
Recomendações para XML 1.0 [XML].
Todos os elementos XHTML devem estar corretamente
aninhados dentro do elemento raiz <html>.
A estrutura básica do documento deve ser
conforme abaixo:
<html>
Os elementos vazios, devem ter uma tag de fechamento
ou a tag de abertura deve possuir ao final o código />
Errado: <br><hr>
estar Certo: <br /><hr />
Conclusão
Como uma aplicação XML, o XHTML é bem mais rigoroso
que o nosso velho e conhecido HTML. O XHTML é mais
poderoso e importante para a comunidade web que o HTML.
Com o XHTML, temos todos os benefícios do XML e, com isso
estamos criando a tão desejada Web Semântica. Aplicações
como o Google se beneficiam desta semântica, e você também,
descobrirá as maravilhas do “X” do XHTML.
Até o próximo tutorial no qual estaremos abordando mais
sobre o poder do XHTML.

<head>

...

</head>

<body>

...

</body>

</html>

d) o uso de tags de fechamento é obrigatório

Para os elementos não-vazios, temos que obrigatoriamente ter
tags de abertura e fechamento, exigências do XML, no qual o rigor é
maior comparado com o HTML. Veja no exemplo:

56
#%
webwriting

Bruno Rodrigues
Autor do primeiro livro brasileiro e terceiro no mundo sobre conteúdo online, intitulado
“Webwriting - Pensando o texto para a mídia digital”. É coordenador de informação do
website Petrobras e titular da primeira coluna sobre Webwriting no mundo, elaborada
desde 1998 e hoje veiculada na revista online ‘WebInsider’. Ministra treinamentos de
Webwriting e Arquitetura da Informação no Brasil e no exterior.
bruno-rodrigues@uol.com.br

Ressuscite seu conteúdo!

Você já foi à Disney?
 Se não, esta é uma boa chance de saber como funciona um parque temático e – depois você
compreenderá o porquê – como o conteúdo informativo de um site deve se comportar.
Qualquer um dos parques Disney – categoria Magic Kingdom – é estruturado em lands (terras),
como a Adventureland, focada nas histórias de aventuras contadas pelos estúdios Disney; a
Tomorrowland, uma visão do que seria nosso futuro, e daí em diante.
 Cada land tem seis ou sete atrações que satisfazem a gregos e troianos, com carrosséis,
montanhas-russas, simuladores, casas mal-assombradas etc. Mas há um detalhe que faz a grande,
imensa diferença: cada land passa por um refurbishment periódico.
Refurbishment, que em bom português significa ‘polimento’, é, há anos, estratégia de marketing e
ponto pacífico entre os executivos da Disney.
 Cada land é repensada a partir de algumas variáveis, como o tempo que cada
atração está disponível, o apelo que ainda tem entre o público e o espaço que ela ocupa no parque.
Estas observações resultam em novas atrações nos lugares das antigas, pavilhões remodelados e
lands inteiras reformuladas.
Mas, por que esta necessidade, quase obsessiva, de tanta novidade? Visite o Mundo Disney e olhe ao
redor: quase metade dos visitantes dos parques retornam em um espaço de tempo entre um e sete anos.
 O que quer dizer que, para um freqüentador – leia-se cliente – não é nada agradável ou estimulante
deparar-se toda vez com as mesmas atrações, por mais que a nova visita seja feita pouco tempo depois.
 O eterno retorno, repleto de novidades, é a fixação dos engravatados Disney e seus engenheiros
criativos, os imagineers.
Isso deveria acontecer em todo site – mas não é o que se vê, infelizmente.
Então, partindo do pressuposto de que um site não é um cemitério de informações, indico três
caminhos a serem tomados para transformar páginas web em ambientes sempre renovados e repletos de
atrativos que farão do seu visitante um cliente fiel.
Conteúdo original
Saber criar desdobramentos para a arquitetura de informação de um site será o diferencial
daqui para frente.
 Exemplo: todo site sobre Brasília indica pontos turísticos, dá dicas de hotéis e restaurantes, aponta
parques ecológicos. Mas por que não ir além? É possível explorar a engenhosidade arquitetônica da
capital, comparando seu traçado com a de outras cidades planejadas, como Washington; sugerir roteiros
alternativos e divertidos pelas cidades-satélites; contar lendas sobre ela, como a do visionário Dom Bosco.

58
“ não é nada agradável ou estimulante deparar-se
toda vez com as mesmas atrações, por mais que a
nova visita seja feita pouco tempo depois”
 Então, é só comemorar: esse conteúdo só você terá, por
um bom tempo. É a criatividade e a pesquisa a serviço da
originalidade – e você à frente dos outros. Este deve ser um
movimento constante, o de criar um conteúdo sempre mais
completo que o do site do vizinho.
Conteúdo dinâmico
A informação ficou antiga? Não há como atualizá-la? Existe
uma ótima solução: transforme-a em pauta jornalística para o
próprio site. Em outras palavras, abra a embalagem e deixe a
informação falar por si mesma.
 Exemplo: as informações sobre o Relatório Anual da empresa,
disponíveis desde meados do ano, estão no ‘porão’ do site, criando
poeira? Que tal apurar qual é o processo de organização deste
documento, sua real utilidade, quem o consulta, etc.?
 É o valor adicional ao conteúdo – expande a informação, cria
novos motivos para que ele seja visitado, demonstra atenção em
relação ao material disponibilizado. É como dar uma descarga de vida
ao seu conteúdo, até então condenado ao esquecimento.
Conteúdo recriado
Não há como injetar criatividade no conteúdo? Não
existe o que pesquisar? O assunto não gera pauta? Há
uma saída que atende pelo nome de conteúdo recriado.
webwriting
É simples: uma página vende, digamos, um DVD de última
geração, mas a estrutura editorial está montada no formato
“Informações sobre este modelo/O que é um DVD/O diferencial da
marca”, troque tudo de lugar. Que tal atrair a atenção do visitante
com o primeiro item, “O que é um DVD”? Por incrível que pareça,
muitos ainda podem desconhecer todas as funcionalidades e
diferenciais deste aparelho (possíveis compradores, por exemplo...).
Depois, parta para “O diferencial da marca” e feche com
“Informações sobre este modelo”. Você estará dizendo a mesma coisa,
na mesma página, mas, apenas com esta inversão de estrutura, terá
fisgado um público diverso daquele que tentava atrair antes.
Já que falei tanto em Disney, que tal uma visita ao
www.disney.com? Perceba como foi bem pensada a arquitetura da
informação básica na primeira página do portal.
Em setembro, o Bruno irá ministrar um workshop sobre
Webwriting e
  Arquitetura da Informação em São Paulo, na
sede da ABA - www.aba.com.br. Para mais informações,
envie uma mensagem para Sandra Zanetti pelo
email sandrazanetti@aba.com.br.
59
marketing

René de Paula Jr.

Atual diretor de internet da Wunderman, agência de marketing direto do grupo WPP,
René é profissional de internet desde 1996, passou pelas maiores agências e empresas
do país: Sony Latin America, AlmapBBDO, Agência Click, Banco Real ABN AMRO. É
criador da “usina.com”, portal focado no mundo online, e do “radinho de pilha”
(www.radinhodepilha.com), comunidade de profissionais da área.
rene@usina.com

Idéias maquiavélicas
Não sei como você trabalha. Menor idéia. Não que eu seja curioso, não que eu queira saber a tua
receita secreta, se musas sussuram genialidades durante seu sono ou se você, como Hefesto, malha
ferro em brasa no seio de um vulcão. O que importa é o resultado final, não?
Talvez.
O que importa é o que fica, não?
Hmmm... sim. Ou não.
Pense nas pirâmides. Pense no Cristo Redentor. Ou... no Borba Gato. Esses monumentos ficariam
mais monumentais se você estudasse o drama de cada pedrinha? Pouco provável. Estão lá, impávidos
colossos, e ponto.
Mas o ponto é: ninguém “usa” o Borba Gato. Nem as pirâmides. O meu trabalho, por outro lado, por
milhares de lados, muita gente usa. E aí faz diferença sim como as coisas são feitas.
Não que eu seja o rei dos processos. Não que eu vá começar todas as frases deste artigo com “não”.
Mas é que um mínimo de planejamento, de coerência, de consistência, até de manias, ajuda muito.
Falemos em manias, então. Eu tenho uma mania antiga, daquelas que se agravam com o tempo, de
me perguntar: e aí? Ok, é uma pergunta meio curta, três letrinhas, mas, mesmo assim, tem seus dois
lados: o do usuário e o do nosso cliente. O cara clicou no banner e caiu na home. E aí? O que ele pode
querer fazer? O que queremos que ele faça?
Ou então: o que ele espera encontrar? E que impressão queremos que ele tenha? Dois lados: a
necessidade e o desejo do cara com o mouse em punho, e a nece$$idade e o de$ejo do cara com nossa
notinha e um talão de cheques na mão.
Como conciliar esses dois prismas? Para um, temos nomes bacanas, como “user-centric design”, ou
“user experience” etc. Para o outro, temos “persuasive design”, que em português ficaria como design
suasório e, pensando melhor, fiquemos com o anglicismo sem culpas.
Ok, temos que focar no cliente do cliente. Ok, o cliente do cliente tem sempre razão. Mas alguém
tem que pagar as NOSSAS contas, então vale a pena levar isso em conta.
Voltemos à história do “o importante é o que fica”. Lembro-me de um mestre muito querido, Chico de
Assis, que dizia sempre que, ao se criar uma história, o primeiro passo é se pensar no final. Se o desenlace
está claro, você não se perde.
Com webdesign é igual: se você estabelecer de saída aquilo que deve ser o resultado final, aquilo
que “fica”, o processo todo flui melhor.
Por exemplo: uma loja online. Tem vários momentos ali: a home, a página de uma categoria de
produtos, a página de produtos, a página do carrinho de compras, a página de pagamento etc. Veja que

60
“Com webdesign é igual: se você estabelecer de saída
aquilo que deve ser o resultado final, aquilo que “fica”,
o processo todo flui melhor.”
eu usei a palavra “momentos” ao invés de página, porque cada uma
corresponde a um estado de espírito, a um conjunto de intenções, a
sensibilidades diferentes.
Antes que você pense que isso é um acesso agudo de
frescurite, vamos ver dois exemplos:
HOME
1. se o usuário não conhece ainda a loja ou se nunca comprou
online, é fundamental passar para ele a impressão de confiabilidade,
de segurança, de profissionalismo; a home é um momento crítico
para isso, pois se essa impressão não “fica”, o cara não fica um
segundo a mais ali e vai em busca de algo mais limpinho.
2. quem entra numa loja online ou sabe muito bem o produto
que quer (a câmera XYZ-3), ou quer algo vago como “câmera
digital”, ou está em busca de ofertas sejam quais forem, ou quer
ver os novos lançamentos. Não o deixe a ver navios, seja qual
for a praia dele.
3. o pior cenário possível não é o sujeito entrar e sair da loja de
mãos abanando: é ele sair e não sabermos quem ele é. Ir embora é
direito dele, mas nosso cliente vai ficar felicíssimo se conseguirmos
motivar o anônimo a deixar alguns dados.
marketing
Vamos para um momento diametralmente oposto:
CARRINHO DE COMPRAS
1. se existe um momento que faz um lojista online prender o
fôlego, é esse: o usuário no carrinho de compras, prestes a dizer o
grande SIM com seu cartão de crédito. Nessa hora não se brinca, não
se desvia a atenção, não se gera ruído. Adeus banners, adeus
fanfarra, adeus firulas. Vejam como qualquer bom carrinho de
compras é de um silêncio e austeridade dignos de uma catedral.
2. ok, ok, não podemos distrair o usuário, mas... já que ele está
comprando, será que ele não gostaria de levar algo mais? Se
soubermos oferecer algo pertinente (como um estojo quando o cara
compra uma câmera), isso pode ser muito bem-visto, gerar mais
compras e tem que ganhar um nome bacana: cro$$-$elling.
Nós poderíamos continuar esse exercício página por página,
momento por momento, e eu adoraria. Perguntar “e aí?” com olhos de
cliente e de cliente do cliente é um processo fascinante, mas eu...
preciso terminar esse artigo, enfim, e eu já tenho desde o início um
final na manga:
“Em webdesign, os fins enriquecem os meios”.
Abraços!
61
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.
marcelacatunda@terra.com.br

Eu não abro ponto exe

Não abro! Não abro! Não abro.
E sabe o que é mais impressionante disso tudo? Morro de curiosidade de abrir, mas
não abro. Nem morta, nem amarrada, nem sob tortura.
MARCELA, alguém que você ama te mandou flores.
Clique aqui para recebê-las
Como assim, alguém que eu amo? Alguém que me amasse seria o mínimo permitido enquanto
texto para que minha destra mão mausística incorresse no erro do duplo clique executar.
Flores on-line? Ah e lá vou eu pensar, deu espaço eu penso... Fiquei imaginando
os nomes dos vírus trazidos por esse buquê cilada: rosa assassina.exe, margarida
devastadora de hd.exe, Maria Sem Vergonha.spy e mais um imenso jardim que encheria
minha máquina de pragas impiedosas. Pobres gafanhotos.
Não abro. Não abro. Não abro.
MARCELA, você acaba de receber uma música de quem te admira.
Clique aqui para escutá-la
Uma música? Nem se fosse uma inédita de Sidney Magal em parceria com Biafra eu
clicaria. Prefiro serenatas.
Passa outro dia, mas só de manhã se à tarde não chover.
Também não abro. Não abro. Não abro e não escuto. Minha audição é seletiva.
OLÁ. Você recebeu um cartão de amor da XTal.
Para visualizá-lo por favor clique no link abaixo e informe a chave de acesso.
E a chave de acesso chamada de link mais parece uma lista de mês de supermercado.
Fala sério, muito sério. E o mais incrível dessa linha “ponto exe” é que ele vem pra mcatunda,
mcatu, mcapongo, mcatabum. Pô, como o mundo se ama. Que lindo!
Não abro. Não abro. Não abro. Não leio.
MARCELA, alguém que te acha especial lhe enviou uma mensagem animada.
“Obrigado por tudo que você fez e tem feito por mim...”
Clique aqui para ler todo o cartão.
Não, eu não sou curiosa. Eu não vou ler nada, e tem mais, animado vai ficar é o
cara que dá um trato no meu computador, quando souber que vai ganhar umas cinco
horas aqui na frente da minha máquina limpando o cartão especial que eu abri. E o pior
é que, enquanto o cara tira os vírus, vou ter que agüentar ele balançando a cabeça e
rindo da minha cara.

62
“ se der tempo, depois de passar
aquela minha calça jeans favorita,
entra no meu e-mail e joga meus
spams fora, por favor?”

Não abro. Não abro. Não abro.

Na escala evolutiva criativa, caminhando lado a lado aos
pontos exe, temos a linha de SPAM coleção outono/inverno.
Puro luxo.
Recebo quase diariamente um tal de “afrodisíacos on-line. Use-
os e apimente sua vida virtual”. O que seria uma linha de produtos
afrodisíacos on-line? Uma arroba sexy? Imagino o texto: “Dê um http
pra quem você deseja...” Socorro! Perigoso até pensar.
Insuperáveis como sempre, os tratamentos para celulite,
que prometem milagres em uma aplicação. Sei! Aplicação em
você, eles te aplicam o golpe e você tem que correr atrás deles
pra pegar sua grana de volta. Taí, correndo atrás dos caras é
até capaz do milagre suceder. Run celulite run!
Adoro também um tal curso on-line de Marcenaria com mais
de “trocentos” projetos prontos. O spam promete te deixar mais
talentosa que o Gepeto - ensinando você a trabalhar com todos
os tipos de madeiras, acabamentos, revestimentos e ainda dá
todas as noções necessárias para que você construa os móveis
para vossa casa, escritório, jardim, brinquedos ou casas para
animais. Casas pra animais. Pô, o que eu tô fazendo na internet?
Vou parar de “construir sites” e vou fazer casas pra animais.
Brincadeiras a parte, nada mais, mais, mais desagradável
do que ter sua caixa postal lotada de coisas que não servem pra
nada. É deprimente a quantidade de porcarias que recebemos
todos os dias. Hoje, quando vou ler meus e-mails me preparo para
o deletar diário de todo dia. É! Fui redundante.
De repente, sonho alto e me vejo dando as ordens do dia pra
minha super querida e eficiente assistente do lar (sem ela, não sou
ninguém): - Dá uma limpada boa na casa, nos banheiros e capricha
no meu quarto... Ah! Sei que é chato, mas, se der tempo, depois de
passar aquela minha calça jeans favorita, entra no meu e-mail e
joga meus spams e ponto exe(s) fora, por favor? Obrigada.

63
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.
webdesign@luli.com.br

Cultura de Anuário
Você é o que come: ao se entupir de enlatados acaba
fazendo mal ao portfólio.

Qualquer webdesigner tem – tanto em sua estante quanto nos bookmarks de seu browser – uma boa
coleção de links, com páginas populares e exemplos do que se faz de melhor em design pelo mundo. São os
famosos “portfólios” ou “anuários”, que, com títulos modestos a “the best of”, trazem exemplos mundiais
de páginas com layout descolado. Seja qual for o motivo – atualizar-se, coletar novas idéias, reciclar-se ou
simplesmente refrescar a cabeça – muitos designers investem um tempo considerável a folhear as páginas
(ou a navegar por elas) em busca de “referências gráficas” que podem inspirar seu trabalho.
Até aí, nada de mais. Considerando-se que o processo criativo demanda informação e que, em
ambientes restritos e pobres de estímulos, as novas idéias tendem a se esgotar muito rapidamente, a
busca de novas fontes de informação deve mesmo ser estimulada, por mais que o seu cliente esteja
acostumado com esta ou aquela forma de se transmitir uma mensagem.
Porém, para se criar um website de sucesso que produza resultados, o processo não é tão simples
assim. Qualquer forma de comunicação – do discurso de um político em uma CPI à embalagem de uma
maionese – representa uma relação entre o emissor e o receptor de uma mensagem e, para funcionar
bem, deve se adaptar às particularidades de ambos os lados. Não é à toa que as telas que usamos são
chamadas de interface: elas são faces intérpretes entre a percepção humana e a lógica cibernética, dois
sistemas muito diferentes.
Mesmo que todos os anuários fossem verdadeiros, fiéis depositários do material ali contido, ainda
nos faltaria informação sobre o tipo de produto, particularidades do público e outros fatores culturais e
socioeconômicos que afetam a percepção de uma mensagem pelo usuário. Mesmo que essas informações
estivessem presentes, todos sabemos que não há dois povos iguais, dois produtos iguais, dois públicos
iguais, duas épocas iguais...
Para piorar, muitos dos anuários costumam ser tão belos quanto infiéis ao produto final que dizem
anunciar – da mesma forma que a pasta do designer, eles apresentam as telas mais bonitas, normalmente
fora de contexto e não necessariamente aprovadas ou, até mesmo, vistas pelo cliente. É o que se chama
em agência de propaganda de “fantasma” e que, mesmo que tenham valor como peças estéticas, são
inválidas do ponto de vista da comunicação.
Em outras palavras, os anuários são belos livros ou portais para belos websites, mas não muito mais do
que isso. O problema de muitos designers é levá-los a sério ou, muito pior, copiar soluções visuais que se vê
neles. Pois se nem mesmo a peça original pode servir de modelo para a comunicação, o que dizer de uma cópia?
Essa prática de “se inspirar” em soluções de design estrangeiros, além de pouco ética e ineficiente,
pode levar à destruição de uma solução visual por excesso de cópias. É o caso de idéias como a pixel art,

64

“No design de hoje a palavra “criação” é uma ironia
triste: a pressão é muito grande, as exigências
enormes e os prazos, mínimos. Nessas condições,
poucos se dão ao trabalho de efetivamente criar algo”
“descobertas”, copiadas, usadas, usadas, usadas... até ficarem tão
conhecidas que perdem seu potencial de inovação e comunicação,
tornam-se “gastas” e ninguém mais – nem mesmo os clientes – a
agüentam, até que caiam no esquecimento.
No design de hoje, a palavra “criação” é uma ironia triste: a
pressão é muito grande, as exigências enormes e os prazos,
mínimos. Nessas condições, poucos se dão ao trabalho de
efetivamente criar algo. O resto faz a reciclagem de produtos,
idéias e soluções prontas, repetindo fórmulas sem prazer, sem
relevância, sem descoberta.
O processo é tão óbvio que chega a ser ridículo: um gringo tem
uma idéia boa — seu trabalho é publicado em um anuário qualquer,
que vai parar nas mãos de um designer estafado de um estúdio
grande qualquer. Ele se apropria da idéia – por cansaço, preguiça ou
falta de idéia melhor, já que seu cotidiano é uma canseira. Vários
outros fazem o mesmo, estúdios pequenos copiam o trabalho dos
grandes e... voilá! Até a padaria da esquina usa a mesma solução de
design. Daí, todo mundo se enche e a fórmula é aposentada até que
outro gringo tenha outra idéia boa etc etc etc.
Antes que esta coluna seja inundada por patriotadas, deixe-
me explicar o gringo: 1) Em muitos países que se faz bom design, dá-
se espaço ao profissional de criação para que renove suas idéias e
busque inspiração, ao contrário daqui; 2) Em muitos países ditos
“desenvolvidos”, se valoriza a experiência e não é nada raro
webdesign
encontrar alguns profissionais de mais de 60 anos em um
departamento de criação; 3) A formação para os cursos de artes
visuais é muito mais rica e puxada nestes países que aqui,
democracia acadêmica em que ninguém precisa de diploma; e 4) Na
hora do aperto, é dos gringos que eles gostam mais: conheço muitos
paulistas que acham mesmo que estão em Nova Iorque e cariocas
que acreditam estar na Califórnia. Com esse panorama, é menos
arriscado se inspirar em propaganda pronta vinda de Londres que
arriscar um design arrojado baseado em cordel ou na vaquejada.
É a filosofia do “se deu certo lá, não tem porque não dar certo
aqui”, milhões de moscas não podem estar erradas. Daí, não é de se
estranhar quando as soluções gráficas / estéticas se esgotam e a
maioria dos sites da internet é daquela mesmice insuportável. Me
parece que a maioria dos designers de produtos digitais se esqueceu
de uma regra pra lá de básica: todas as soluções gráficas têm que
ter um porquê, ou melhor, se não há motivo para se usar um
recurso, ele não deve ser usado. Na tv isso é bastante óbvio: a
maioria dos programas e comerciais evitam abusar dos efeitos. Já
os comerciais de varejo de lojas populares…
Em outras palavras, seguir todas as tendências de design da
internet não é talento. É ingenuidade. Antes de fazer sua próxima
interface, pense em seu efeito, propósito e abrangência. Pense em
Google, Nike, Amazon. Faça o relevante, crie uma tendência. E deixe
que os pobres de espírito sigam você.
65
66