Ed20

g

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

e d i t o r a

/

R$ 7,90

arteccom

Havaianas

g

g

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

Helenbar

a musa dos fotologs conta como aplica sensibilidade e expressão em suas produções especial fotográficas

imagem fotografia digital, 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

seja numa simples fotografia, onde o cenário e o objeto principal são planejados, ou no layout de um site, onde as partes (tipografia, cor, fotos, informações etc.) contribuem na formação de um todo, na

Direção Geral Adriana Melo adriana@arteccom.com.br

Direção de Arte Patrícia Maia patricia@arteccom.com.br

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

realização de um conceito.

Nesta edição, vamos explorar o fascínio pela imagem, motivado principalmente pelo surgimento das câmeras digitais, que promoveram o prazer do instantâneo, e sobre as quais não poderíamos deixar de falar.

Abordaremos desde assuntos mais técnicos, como tratamentos no Photoshop e formatos para web, passando por fotografia 360º, bancos de imagens, direitos autorais na internet, e chegando a um lado mais lúdico, o dos álbuns vituais.

Diagramação Jeferso n Costa jeferson@arteccom.com.br

Direção de Redação Andr é Philipp e Iunes andre@arteccom.com.br

Redação Tatiana Serra tatiana@arteccom.com.br

Assinaturas Jan e Costa jane@arteccom.com.br

Teremos também uma entrevista com Helenbar. Seu trabalho sai do plano, brinca com ilustrações e fotografias, sonho e realidade. Helen trasparece expressividade, paixão em suas produções, e muita, muita personalidade, fazendo de cada uma delas única, exclusiva. É, com certeza, um exemplo de como é possível transpor as barreiras da imagem. Após ler a entrevista, você vai se sentir motivado e terá

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

Webdeveloping Eric Nascimento eric@arteccom.com.br

Financeiro Luana Rocha luana@arteccom.com.br

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

A Arteccom é uma empresa de design, especializada na criação de sites e responsável pelos seguintes projetos: Revista Webdesign :: www.arteccom.com.br/webdesign 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

Um grande beijo,

Criação e edição

Adriana Melo

www.arteccom.com.br

Produção gráfica www.prolgrafica.com.br

Distribuição www.chinaglia.com.br

4

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

quem somos

Comunicar pela imagem é construir uma idéia, combinar elementos,

Editorial

Imagem é tudo

Equipe

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

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

fique por dentro pág. 8

direito na web

pág. 10 clipping pág. 11 adote esta página portfólio pág. 13 veterano: Aqueles Caras pág. 18 calouro: Felipe Gomes

no desenvolvimento de sites?

e-mais pág. 46 estudo de caso: Havaianas.com.br pág. 50 artigo: sites de conveniência pág. 54 tutorial : Padrões Web 2

com a palavra pág. 58 webwriting: Bruno Rodrigues pág. 60 marketing: René de Paula Jr. pág. 62 bula da Catunda: Marcela Catunda pág. 64 webdesign: Luli Radfahrer

5

emails Assunto: Hospedagem

Olá editores e responsáveis pela revista Wd! A revista é

Olá, caros amigos da revista

ótima, não só por ser a única

Web Design. Gostaria de ler nas

no mercado mas porque

próximas edições uma matéria

vocês fazem por merecer

falando sobre hosts nacionais,

este conteúdo e sucesso das

uma comparação de seus

reportagens e pelo bom

respectivos preços e planos

planejamento das enquetes e

(custo/benefício) e uma

temas. Porém, minha

entrevista com algum

sugestão é a seguinte: que

empresário bem sucedido

haja mais reportagens e

dando dicas para quem quer

informações direcionadas aos

ingressar no ramo.

estagiários, calouros, e a

Leonardo Pessoa leozin12@hotmail.com

Assunto: CD na revista

quem pretende seguir estas

Olá,tudo bem? Gostei muito

diversas áreas de design, Um webdesigner deve ser

da revista, comprei a

como eu que curso o 1º

responsável por tudo ao colocar

primeira há dois meses e

grau técnico de WD. E

a página de seu cliente no ar?

agora vou todo mês às

sinceramente, às vezes fico

Ele deve registrar, pagar o

bancas para verificar os

um pouco perdida no vasto

novos números. Gostaria de

conteúdo das matérias de

deixar aqui algumas

designers avançados.

sugestões: o site poderia ter

Agradeço e parabenizo a

uma página de downloads; a

todos da equipe Web Design.

revista poderia vir com um

Beijos.

CD-ROM com exemplos,

Helena Carolina hc.kitty@uol.com.br

tutoriais, etc, mesmo que

domínio, mensalidade etc?

Wagner Rosati wrccdesign@gmail.com

Assunto: Iniciantes Bem, estou no começo de tudo. Faço o curso de Web

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

Design na Escola de Informática Microcamp, Ilha do Governador, no Rio de Janeiro, tenho apenas dois meses de curso e os dois

parte em que são mostrados Paula e Helena, sejam bem-vindas

modelos de sites e portfólios

revista. Muito, realmente

à comunidade! Procuramos sempre

poderia ter uma maior quantidade de exemplos também. Agora, uma

últimos exemplares da muito útil está sendo a

mesclar informações mais básicas com

próxima edição, atendendo também à

Webdesign como fonte de

as avançadas, para não desprezar

solicitação do nosso amigo Leonardo.

pesquisa e aprendizado. Mas

nenhum dos dois públicos. Meu

Aguarde.

gostaria de ter no novo

conselho é que vocês estudem

exemplar algo voltado

bastante a parte conceitual do design

Assunto: Mercado

custasse um pouco mais; a

especialmente para os iniciantes de web, como

(cores, tipografia, equilíbrio etc.) e menos as ferramentas (Flash,

sugestão de matéria: um tutorial sobre como criar enquetes, sistemas de indique este site e Livro de Visitas. Aguardo por estas matérias.

Sugestão de pauta: os

linguagem da internet, como

executivos de negócios do

utilizar pela primeira vez os

webdesign no Brasil e suas

programas Flash, Photoshop,

visões sobre o mercado.

entre outras dicas que

Joaquim quim@criamedia.com.br

porventura acharem

Mas continuem conferindo nossas

Ufa, Flávio! Com tantos pedidos,

importantes.

matérias!

vamos tentar atender alguns, OK?

Paula Estevão paulaestevao@ig.com.br

Um grande abraço,

Muito obrigada pelas sugestões

Adriana.

valiosíssimas!

Uma revista sobre o mercado de criação de sites no Brasil, bacana sua idéia! Para

Dreamweaver etc.), pelo menos por

Flávio Araújo

enquanto. Assim, vocês terão uma

flavioaraujo@click21.com.br

base forte para começar a criar.

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

7

direito na web

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)

Marianna Furtado é advogada com pós-graduação em Direito da Propriedade Intelectual pela PUC-Rio. Atualmente, pertence à equipe do escritório

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

Lioce Advogados.

protegidas: o inciso X, que protege os

injustificado aos autores).

Envie sua dúvida para:

esboços, os projetos e as obras plásticas

Montaury Pimenta, Machado &

marianna@montaury.com.br

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.

8

exploração,

não

causar

prejuízo

9

clipping Sites de relacionamento prendem atenção de internautas brasileiros

Hospedagem com promoção para o Dia dos Pais

Os sites de relacionamento compõem a área que mais prende a atenção

A Digiweb, empresa de hospedagem de sites 100% nacional, irá sortear

dos brasileiros na internet. De acordo com um levantamento realizado

um Palm Tungsten em sua promoção de Dia dos Pais. O prêmio é

pelo Ibope/NetRatings, com o título Web Brasil, divulgado

compatível com Word, Excel, PowerPoint, Outlook e possui tela colorida

trimestralmente pela consultoria, os sites de comunidades absorvem

de alta definição. A promoção vai só até o começo de Agosto, participe

cerca de 20,5% do tempo total de navegação. Em seguida, estão sites

assinando um plano de hospedagem ou contratando um serviço do

de e-mail (11,3%), portais de interesse geral (10,5%), instituições

Internet Hosting Center. Clientes da Digiweb que contrataram serviços de

financeiras (6,5%) e ferramentas de busca (4,7%). De acordo com o

Servidores Dedicados, Semi-Dedicados e Co-location participam

diretor-executivo do Ibope Inteligência, Marcelo Coutinho, isso é

automaticamente. Clientes que indicarem um outro ganham uma

explicado porque os povos latinos possuem uma cultura comunicativa

mensalidade e concorrem ao prêmio. Aqueles que contratarem qualquer

forte, que se traduz em uma procura maior por atividades de

serviço adicional para a conta dentro do período da promoção, também

relacionamento na internet.

participam. Acesse www.digiweb.com.br/pais/

O estudo mostrou ainda que os usuários brasileiros

Japoneses gravam dados em unhas

da Internet destinam 53,2% do tempo de navegação a apenas cinco

Cientistas da Universidade de Tokushima, no Japão, desenvolveram

ferramentas disponíveis na rede:

uma tecnologia capaz de gravar até cinco megabits de dados nas unhas.

comunidades virtuais, e-mail, portais,

As informações permanecem legíveis por dias e podem ser usadas para

bancos e ferramentas de busca.

identificação biométrica e pagamentos automáticos.

Segundo o professor Yoshio Hayasaki, foram

(01)

utilizados pulsos de raio laser para armazenar os dados e, para lê-los, um microscópio de fluorescência. Em caráter experimental, as

Scripts para toda vida

gravações foram feitas em pedaços

Procurando scripts prontos? O site ScriptFacil.com garante a todos

soltos de unhas. Agora a equipe de

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

enquanto as unhas estiverem nos dedos.

webmasters, contribuindo com um grande banco de dados de scripts

(02)

e diversos desafios que possibilitam maior interatividade entre o usuário e o portal, funcionando como incentivo à criatividade dos Você pode participar! Envie suas imagens mais criativas, utilizando

ENG anuncia treinamento de Animação para Web no Anima Mundi 2005

o Photoshop. Em breve serão criados outros desafios. Confira no

A ENG DPT & Multimídia anunciou, durante a última edição do Anima

site http://scriptfacil.com.

Mundi, que aconteceu no mês passado, no Rio e São Paulo, um novo

internautas, que contribuem com criações fantásticas!

treinamento para animação profissional com tecnologia Macromedia

China: clínica para viciados em internet

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 governo chinês, preocupado com o crescente número de jovens que ficam

O conteúdo programático é dividido em três etapas para excelência técnico-

horas navegando pelo mundo virtual, anunciou a abertura de uma clínica para

pedagógica e pode ser obtido no web site da ENG. Entre os recursos que

trazê-los de volta à realidade , segundo informa a Associated Press.

serão ministrados, os alunos poderão aprender a desenvolver Movieclips,

O Dr. Tao Ran, responsável pela clínica, disse que um grande número de crianças

Storyboarding, desenvolvimento de personagens no Flash, elaboração de

em vez de ir às aulas, ficam jogando games e batendo papo online todos os dias.

layouts complexos, técnicas de animação, criação de movimento humano,

Elas estão sofrendo de depressão, nervosismo, medo e já não conseguem

animação de efeitos especiais, introdução à criação 3D e outras técnicas.

interagir como pessoas normais , esclareceu o Dr. Ran.

Mais informações: http://www.eng.com.br

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

Errata

(02) http://www.estadao.com.br/tecnologia/informatica/2005/jul/12/105.htm

Na edição anterior, na seção portfólio veterano, a URL da 10 Minutos

(03) http://www.estadao.com.br/tecnologia/internet/2005/jul/05/103.htm

está incorreta. O endereço certo é: www.10minutos.com.br.

10

adote esta página A renda deste anúncio é integralmente revertida para o projeto Magê Malien - Crianças que brilham.

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, 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

adote esta página !

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

11 11

12

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: design bem-humorado

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

Imagem da animação O Duelo

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

Outros caras: os clientes

gráfico , fala o diretor de criação sobre as áreas de atuação da

Para conquistar o sucesso, Aqueles Caras aposta na

empresa.

qualidade do trabalho, no atendimento e no cumprimento de

Após o sucesso no Anima Mundi 2001, a equipe

prazos. É isso que todo cliente procura! Se ele gostar do

aumentou. Bernardo e Julian convidaram os profissionais e

seu trabalho, vai fazer outros com você, vai te indicar

amigos Christian - que assumiu a parte administrativa e

e, nessa hora, você começa a crescer , afirma Bernardo.

atendimento - e Flávio - que assumiu a área de programação e

Quanto aos problemas, o maior enfrentado, segundo o diretor

multimídia. Hoje, a equipe é formada por 11 pessoas - um

de criação, é o próprio cliente. O cliente, na maioria das

diretor comercial, três diretores de criação, uma secretária,

vezes, não sabe exatamente o que quer. Pede pra mudar tudo

dois webdesigners e quatro designers.

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

Imagem da animação O Duelo

14 14

casa), gosta de jogar tênis e de pescar.

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 Os primeiros clientes da produtora foram os amigos e familiares da equipe. Essa é uma situação típica de quem abre seu próprio negócio, e com a gente não foi diferente , diz o diretor de criação.

Depois, foram surgindo outros projetos. Entre eles, Bernardo destaca o site da banda Seu Cuca (www.seucuca.com.br), um dos primeiros feitos pela produtora. Nunca tínhamos feito site para banda e esse foi um desafio .

Outro projeto desenvolvido foi o site da empresa de consultoria tributária Branco Consultores (www.brancoconsultores.com.br). Eles queriam um visual clean e sofisticado, que mantivesse a seriedade da

empresa. Tivemos que tomar cuidado para dosar a quantidade de animações , diz Bernardo.

O Acrobatha (www.acrobatha.com.br) é o site de uma loja carioca de roupas masculinas, criado a partir dos conceitos que as coleções exploravam, como: descontração, bom gosto, conforto, natureza e Rio de Janeiro. Através do site, a Acrobatha tem conseguido alavancar suas vendas e atrair novos clientes. Um bom negócio para Aqueles Caras também! , completa ele.

A produtora também ressalta outros sites, como: www.rrg.com.br, www.100porcentopropaganda.com.br, www.cdgadvogados.com.br, www.facilitynet.com.br etc.

www.seucuca.com.br

www.acrobatha.com.br

www.brancoconsultores.com.br

16 16

www.facilitynet.com.br

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

Felipe decidiu ser webdesigner depois que ganhou um

pessoal do Raul Gil e o de seu programa, o site da produtora

computador do pai e se tornou usuário ativo da internet. Daí em

Luar Company, o da banda Kaic e Kaynan e o novo site (em

diante, ele não parou mais e, desde 2002, já fez um total de 13

desenvolvimento) do artista plástico Ernesto Piva. Para ele,

cursos, tanto de Webdesign como de Webmaster. Atualmente, cursa

valeu a pena investir em sites para clientes de peso no início da

Tecnologia em Design de Mídia Digital, na FIT Faculdade Impacta

carreira. Mesclar conteúdo e design que transmitissem a

(SP), e pretende se formar em 2006.

imagem da tv e do apresentador (Raul Gil), além de deixar o

O misto de conhecimento e criatividade faz de um webdesigner

site o mais leve possível, foram meus principais desafios , diz.

um profissional especial. Para Felipe, tudo que tem forma e expressa

Entre o final de junho e início de julho deste ano, ele lançou

sentimento serve de inspiração. Eu respiro esse negócio de design o

o que, certamente, são suas principais criações no momento: o

dia todo , afirma ele, além de acreditar que toda idéia sempre pode

site da Branding Web Midia (www.brandingwebmidia.com.br),

ficar melhor. Basta tentar!

empresa criada por ele, seu pai e um amigo, cujo foco é prover

É preciso adquirir o máximo de informação possível. Eu tenho o

soluções de propaganda e marketing na web para os diferentes

costume de ler muito, sempre estou com uma revista, livro ou jornal

segmentos ; e o seu site pessoal (www.felipegomes.com.br).

na mão. Também participo de várias comunidades sobre webdesign

Futuramente, Felipe espera ter seu próprio portal, para que os

no Orkut, e acesso vários sites que abordam webdesign , conta

profissionais

Felipe, que gosta muito de tirar fotos, ir ao cinema, jogar boliche,

da

área

compartilhem

conhecimento

desenvolvido. E, por falar em profissionais da web, ele

viajar, ouvir música, andar de skate, tocar bateria e ir à igreja.

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.

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

como George Meliés, Ingemar Bergman, David Cronemberg,

Além da graduação, quais cursos você fez? Os livros

David Linch, Roman Polanski, Neil Jordan, Tim Burton, e artistas

também

como Gilbert and George, Andy Warhol, Pierre et Gilles, Ray

foram

importantes

na

sua

formação

profissional?

Caesar, Mark Ryden, Jeff Koons, Nan Goldin e Joel Peter Witkin

Helena :: O interesse por imagens existe desde que me

foram influências fortes na minha vida e no meu trabalho. Gosto

entendo por gente. Fiz escola de arte desde os 8 anos de idade e

de freqüentar feiras de antiguidade e acho que o contato com

comecei a lidar com o computador e Photoshop em 94, na época

objetos de outras épocas também enriquece muito meu dia-a-dia.

do projeto de graduação, com o tema Design Gráfico e Novas

WD :: Como começou o interesse pelo fotolog?

Tecnologias de Imagem . Um dos cursos extracurriculares mais

Como foi a escolha deste meio para veicular seu

significativos que fiz foi o Dynamic Encounters , do Charles

trabalho? Seus convites de trabalho aumentaram a

Watson, na Escola de Artes Visuais do Parque Lage, sobre arte e

partir dele?

ciência contemporâneas. Quanto aos livros, é claro que livros

Helena :: Foi por acaso. Em junho de 2003, um amigo me

técnicos são muito importantes na nossa formação, mas é a

recomendou o site. Criei um login só para ver do que se tratava.

literatura que enriquece a alma. Algumas leituras são

Fiquei maravilhada e surpreendida com as possibilidades de

fundamentais para mim: O Estrangeiro , de Albert Camus;

entretenimento e comunicação que esta comunidade virtual tinha

Cartas a Teo , de Vincent Van Gogh; O Teatro e seu Duplo , de

na época. Comecei a utilizar o serviço por diversão. Sem dúvida,

Antonin Artaud; Ciranda dos Libertinos , de Sade; Grande

a maior inovação do fotolog (hoje plagiada por diversos sistemas

Sertões Veredas , de Guimarães Rosa; O Retrato de Dorian Gray

similares), é a forma como os usuários estão interligados. As

e Contos , de Oscar Wilde... Considero também que cineastas

imagens funcionam como iscas, cada uma com sua singularidade e

21 21

entrevista :: Helenbar

WD :: Você fez Desenho Industrial na Esdi em 1994.

entrevista :: Helenbar como cada página é repleta de outros links de imagem e texto,

site, o que, então, não significava popularidade, mas

atualizados em tempo real, rapidamente se faz uma grande rede

curiosidade. A própria estrutura do sistema de navegação se

de comunicação. Outro ponto positivo é que é uma comunidade

encarregou da divulgação de forma espontânea, uma espécie de

bastante heterogênea. Alguns minutos de fotolog, às vezes,

boca a boca virtual. Todos nós que estávamos tendo destaque

equivalem a ir a uma exposição, encontrar com os amigos ou ler

naquela época fomos beneficiados. Pegamos carona na

uma revista de atualidades. Minha atuação profissional não se

divulgação, não só dentro do site, como em diversos outros meios

alterou, continuo com o mesmo perfil de clientes e projetos.

de comunicação que abordavam o fenômeno.

Mas, do ponto de vista artístico, conquistei um espaço incrível

WD :: Você reúne os papéis de fotógrafa, designer e

de divulgação e estímulo. Minha página supera 600.000 visitas

modelo por opção. Como é esse trabalho de fazer tudo?

e meu trabalho ficou conhecido internacionalmente, sendo

Você acha que o trabalho seria diferente se você

inclusive matéria de capa da revista da Lewis Carroll Society

tivesse uma equipe?

Norte Americana.

Helena :: Não sou de fato modelo nem fotógrafa , faço

WD :: Como você fez para divulgar o seu fotolog?

isso apenas no meu trabalho pessoal, onde o auto-retrato é a

Helena :: Por incrível que pareça, a única coisa que fiz foi

matéria-prima. Sou a melhor pessoa para interpretar as minhas

colocar meu trabalho na rede e navegar no sistema. Quando

idéias, pois sei exatamente o que estou buscando, expressão,

comecei, o serviço ainda era recente e reunia uma crescente e

conceito e resultado gráfico. Não tenho que discutir com

fervilhante comunidade, composta em grande parte por artistas,

ninguém, é completamente autoral. Acho que seria mais difícil

fotógrafos e curiosos ávidos por trocar informação. Na segunda

conseguir o mesmo tipo de resultado com uma equipe. Numa

semana como fotologger, pulei de 3 para 3.500 visitas e meu

equipe, sempre existem divergências conceituais ou estéticas;

thumbnail foi para a página principal como um dos mais vistos do

pra funcionar, tem que estar todo mundo muito afinado.

22 22

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

fica madura, produzo o personagem. Como me baseio no auto-

agregamos valores que transcendem a técnica e a máquina.

retrato, sempre começo pela sessão de fotos. Às vezes, tenho

WD :: Ao manipular uma imagem, quais erros devemos evitar para que ela não pareça artificial?

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

Helena :: Trabalhar sem questionar resultados. Durante o

depois, no computador, toda a manipulação, retoque de imagem

processo, podemos perder o rumo ou passar dos limites. Nesse

e construção de cenário. O tempo investido em cada cena

caso, analisar as etapas anteriores é a melhor forma de encontrar

depende muito da complexidade da imagem e da minha

onde erramos e também a solução. Nunca jogo fora o original e as

disponibilidade. Uma imagem razoavelmente complexa leva em

etapas preliminares antes de concluir o trabalho, são um ótimo

torno de 30 a 40h de tratamento. É claro que não de uma vez só.

referencial de comparação.

Na maioria das vezes, trabalho nos finais de semana ou à noite.

WD :: Como você dividiria as etapas do processo

WD :: Que máquinas você utiliza para trabalhar? A

de criação de uma imagem (desde a idéia, preparação

configuração do computador é fundamental? E que

de figurino até a finalização da mesma)? Quanto

softwares são mais indicados?

tempo demora?

Helena :: Sou uma antítese da corrida informata. Trabalho

Helena :: As imagens surgem bem definidas na minha

com um computador de quase 8 anos, um power mac G3

cabeça, como num flash. Às vezes, elas se formam quando vejo

minitower, que já sofreu todos os upgrades possíveis. Do original,

um objeto antigo, vendo um filme, conversando com alguém,

só resta a placa mãe. Pesquiso bastante para conseguir

num sonho, observando o trabalho de outro artista ou lendo um

incrementá-lo e chego a trabalhar com imagens de 500Mb a

livro... A fase de criação é bastante subjetiva, mas sempre

1.5Gb, diariamente. Sou usuária de mac, mas já fui de PC.

envolve também alguma pesquisa de referências. Quando a idéia

Acredito que as plataformas se equivalem, a não ser pelo hábito

24 24

processamento bastante distintas das quais se pode tirar partido.

acho os produtos Adobe bastante competentes (Photoshop,

Um artista escolhe um determinado material por suas características

Illustrator, Pagemaker, InDesign, Acrobat). Mas acredito que a

físicas, circunstanciais, contexto histórico, possibilidade de interação

restrição ou potencialidade não está de fato no software, mas na

e permeabilidade para expressão de uma idéia. Fundamentalmente,

cabeça. Um artista trabalha bem com qualquer ferramenta. Podemos

o método digital é mais ágil e de manipulação indireta, associada ao

desenvolver as mais diferentes formas de expressão em qualquer

computador. O processo analógico tem uma fisicalidade de matrizes

programa, qualquer sistema ou até com um lápis e uma folha de

autônoma (o filme, o processo de revelação química, o negativo, a

papel, não importa.

projeção física da luz e da cor no papel). A escolha de um ou de outro

WD :: Quais são os principais recursos do

processo depende da natureza do trabalho e de quais características

photoshop que você utiliza? Quais são os melhores

são mais convenientes, não só por implicações metodológicas, como

formatos para a web?

também por seus valores simbólicos no sistema de construção e

Helena :: Trabalho muito com máscaras, canais alfa e com

discussão da idéia, até que ela se torne concreta. Em alguns casos,

manipulação da cor e da luz com levels, hue/saturation e curves. E

quando a agilidade e a visibilidade da imagem em tempo real são

prefiro os formatos mais compactos como jpg ou gif.

fundamentais, o digital é indicado e tem também a vantagem de,

WD :: Como você vê o aumento do uso da imagem

quando a manipulação for feita necessariamente no computador,

digital? Você acha que ainda há espaço para as pessoas

poupar as etapas de revelação/ampliação do filme e scaneamento,

que trabalham com máquinas tradicionais?

tornando o processo mais prático e barato. Já o método analógico

Helena :: São muitas questões em jogo. É claro que a imagem

abre uma série de possibilidades diferenciadas, como interferência na

digital já faz parte do nosso presente e, conseqüentemente, do

captura da imagem dentro da câmera (entre a lente e o filme), a

futuro, de forma inevitável. Mas tem muita gente que ainda vive da

manipulação do filme no processo químico,a interferência gráfica na

fotografia tradicional. A transição de profissionais consagrados no

película e gelatinas ou a possibilidade de intervenção no processo de

sistema analógico não é simples e, em algumas situações, ainda é

ampliação, mascarando a projeção da luz no papel, só para citar

mais conveniente trabalhar com filme. Ainda existem divergências ao

alguns exemplos. Não há melhor ou pior resultado, mas o mais

se comparar um cromo de grande formato e qualidade com as

adequado para cada fim, dependendo sempre das restrições,

múltiplas possibilidades de captura digital, mas não há como fugir dos

intenção e objetivo.

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

WD :: Que dica você daria pra quem quer seguir essa carreira?

descartável. Assim como o arte-finalista para o design gráfico,

Helena :: Desista em quanto é tempo! Hahaha... Brincadeiras

talvez o laboratorista esteja fadado ao desaparecimento e esta seja

a parte, não tenho a menor idéia. O mercado globalizado é voraz,

mais uma função a ser incorporada pelo profissional de fotografia da

cruel e circunstancial. As grandes estruturas devoram talentos

era digital. A tecnologia nos atropela evoluindo mais rápido do que

individuais. Sucesso financeiro, estabilidade, realização e qualidade

nossa capacidade de assimilação. Às vezes, é preciso dar alguns

de vida são privilégios de poucos. Minha trajetória é muito particular

passos atrás para aprimorar as coisas.

e não me considero um exemplo do ponto de vista mercadológico.

WD :: No que diz respeito à linguagem fotográfica,

Para mim, é importante trabalhar com dedicação e perseverança

entre uma foto digital e uma analógica, qual traz os

naquilo que gosta, acreditar nos seus valores, desenvolver

melhores resultados (pelo viés artístico)?

interesses que te distingam como indivíduo, ter objetivos que te

Helena :: Se considerarmos apenas o registro da imagem, os dois métodos se equivalem, mas têm características de

façam aprimorar e se satisfazer pessoalmente, pois a realização profissional nem sempre é sinônimo de sucesso no mercado.

25 25

entrevista :: Helenbar

de uso e o folclore de status profissional. Quanto aos softwares,

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

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

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.

1865, ele retratou a vida cotidiana da cidade do Rio de Janeiro, registrando suas particularidades e os hábitos da

muita compressão, tanto de cores como de resolução). Com o

população no fim do século XIX e começo do século XX.

aumento da qualidade dos hardwares e o ganho na velocidade

Responsável por introduzir no Brasil as chapas fotográficas

das conexões, as imagens puderam ganhar um tratamento

coloridas, desenvolvidas pelos irmãos Lumière, Ferrez

mais minucioso, passando a ter maior número de cores (16

também se dedicou ao estudo de novos equipamentos e

milhões) e com maior resolução, conseqüentemente.

materiais fotográficos.

Segundo Daniel Morena, designer da agência 32Bits , a

Fazendo uma ponte para o meio online, após dez anos de

rede encontra-se em uma nova fase, em que as imagens

sua popularização, além da própria evolução da interface da

deixaram de ser vistas como antagônicas ao modelo da web,

web como um todo, pode-se dizer que o ganho que a imagem

para serem um dos seus pontos fortes. Para ele, a arte digital

teve na rede se deu por meio da possibilidade de se adicionar

está em grande expansão, com a troca de arquivos de músicas

movimento e textura a ela. Anúncios online, antes feitos em

e filmes, bem como o crescimento dos diversos serviços de

gifs animados, hoje contam com poderosas ferramentas,

compartilhamento de imagens. É difícil imaginar o que vem

como o Flash e o 3D MAX, por exemplo. Recursos como a foto

pela frente, pois o que é atraente na web é a sua

360º, que possibilitam a criação de ambientações com grande

imprevisibilidade e anarquia. Quem imaginava que um serviço

poder de realismo, proporcionaram uma melhora na

de buscas, depois de tantos já criados, iria revolucionar e

experiência do usuário. Entretanto, alguns limites referentes

democratizar o uso da internet como o Google? , indaga Morena.

ao uso de uma imagem na internet, como o seu tamanho em kbytes e a sua utilização sem o pagamento de direitos

resolução

autorais, podem acarretar em prejuízos ao seu projeto,

O termo bits define a quantidade de cores que existe em uma

tanto de acesso como financeiramente.

imagem e está diretamente relacionado ao seu peso em kbytes.

Sua evolução na rede

Sendo assim: 1 bit > 2 cores

É importante analisar a evolução da imagem no meio

2 bits > 4 cores

online contextualizando-a com o próprio amadurecimento da

3 bits > 8 cores

interface da web, incluindo seus paradigmas de design,

4 bits > 16 cores 5 bits > 32 cores

critérios de navegação e os limites específicos da mídia.

6 bits > 64 cores

Contudo, é fato que a melhora tecnológica, tanto dos

7 bits > 128 cores

dispositivos de navegação quanto dos softwares de criação,

8 bits > 256 cores 15 bits > 32.768 cores

pode ser vista na qualidade das imagens veiculadas atualmente

16 bits > 65.536 cores

na rede. No início, elas eram trabalhadas para monitores de

24 bits > 16.777.216 cores

256 cores e conexões muito lentas (nesse caso, era exigida

:

32 bits > 16,7 milhões de cores + escala de cinza de 8 bits

29 29

retratos da web

Com a evolução das máquinas fotográficas, a estética

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 ela é publicada sem antes passar pelo programa. É um remédio sem contra-indicações, desde que usado com feeling e na medida certa , destaca Fernanda.

Na sua opinião, o segredo para se obter um bom resultado 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 inúmeros recursos do Photoshop. Eu defendo a autenticidade de uma imagem, mas acho que ela pode ser sempre melhorada para ser bem consumida . Se tivermos uma foto de uma

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

anúncio

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

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

primeiro livro em língua portuguesa sobre o assunto, a foto na mídia digital é mais eficiente quando se trabalha com o detalhe.

dos outros elementos da notícia. Construir o Chunk não é uma

Quando não há muito espaço para uma fotografia em uma

tarefa fácil. Tente, por exemplo, criar um título que traga um

página, o que precisa chamar a atenção do usuário é o centro

aspecto da informação e que não irá se repetir no texto, na foto

nevrálgico da imagem transmitida, por isso a necessidade do

e na legenda , alerta o especialista.

fotógrafo entender qual é o ponto emocional a ser capturado

Entendendo um banco de imagens

na hora do click.

Gratuitos ou pagos, os bancos de imagens visam atender às

Bruno explica que um dos recursos utilizados nos sites

expectativas de quem procura pela imagem ideal para o seu

jornalísticos é o Chunk. Esse método trabalha com duas

trabalho. Em campanhas publicitárias, por exemplo, comprar

realidades permanentes de uma página web: o espaço limitado e

fotos de um banco pode reduzir o custo de produção em até oito

a luta pela atenção. Ele destaca que o Chunk utiliza todos os

vezes, o que acaba interferindo no orçamento de um projeto.

recursos possíveis de uma chamada (título, um pequeno texto,

Existem também os bancos criados pelas próprias empresas com

imagem, legenda e indicações de links) para prender a atenção do

o intuito de facilitar aos seus funcionários a recuperação de

usuário. Entretanto, é preciso que o webwriter não repita um

imagens nos acervos fotográficos. Ricardo Mello, coordenador

aspecto da informação que está sendo apresentada em nenhum

de projetos digitais da agência O Globo, explica que o Infoglobo

32

banco de imagens

redações, o Digicol e o Photostation, auxiliando no trabalho

Para conhecer o acervo da agência O Globo, ele está

:

disponível via web no endereço www.agenciaoglobo.com.br/

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

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.

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

(www.gograph.com.br). Podem também ser encontradas mais

ilustração para a edição online ou impressa. Como a

dicas de bancos de imagens no site Blue Vertigo

fotografia do jornal é totalmente digitalizada, a chegada do

(www.bluevertigo.com.ar).

material é muito mais rápida, bem como o seu acesso para

Imagem no Flash: caso Paparazzo

os redatores e editores.

Para quem utiliza o Flash, o fato de trabalhar com imagens

De acordo com Mello, a primeira tarefa na rotina de

pode se tornar um grande pesadelo devido ao aumento em

atualização do banco é a percepção do que entra no acervo.

kbytes no tamanho de um determinado projeto. Entretanto, o

Muitas das fotos produzidas diariamente não são utilizadas

site de ensaios sensuais Paparazzo prova que a união do Flash

pelo jornal e são arquivadas, deixando de ter referências

com a imagem já pode ser considerada sinônimo de agilidade e

jornalísticas para ter referências conceituais (como lazer,

leveza. André Braz, coordenador de design da equipe de

amor, criatividade etc.) no trabalho de definição de palavras-

criação da Globo.com, explica que o uso dessa ferramenta no

chave. Hoje chegamos ao requinte de colocar uma palavra-

redesenho do site foi justificado pela melhora na experiência

chave que tem uma referência técnica da fotografia, como por

do usuário e na percepção de fluidez e leveza do layout. Ele

exemplo, a expressão contra luz . Se quisermos fotos só no

explica que, no novo projeto, a atualização dos ensaios é feita

contra luz, os usuários desses programas colocam na palavra-

com uma ferramenta própria de gerenciamento de conteúdo.

chave esse termo e terão como retorno só esse tipo de

O Flash é usado apenas na interface com o visitante, e busca

material , explica.

as imagens de um arquivo XML externo. O tempo que levamos

Uma boa opção de banco de imagens brasileiro é o StockBrazil (www.stockbrazil.com.br). Com pouco mais de 4

para subir um novo ensaio é o tempo de cadastrar as fotos e informações na ferramenta , comenta.

anos de mercado, o site se consolidou como a principal

André lembra que o Paparazzo é, por natureza, um site

referência de imagens brasileiras na modalidade Royalty Free,

banda-larga. Para ele, um produto exclusivamente sobre ensaios

tanto no Brasil como no exterior. O banco possui uma vasta

fotográficos não pode ter fotos pequenas e com qualidade

gama de fotos sobre os mais variados temas, tais como

baixa. Ainda assim, tivemos o cuidado de não transformar o uso

negócios, tecnologia, entre outros. Todas as produções são

do Flash em uma barreira para o consumo do conteúdo. O tempo

feitas por fotógrafos, materiais e modelos brasileiros.

de download está muito mais associado às imagens do que ao

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

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

Algumas alternativas gratuitas são: stock.xchng

usadas para trazer ao site uma personalidade convergente ao

(www.sxc.hu), FreeFoto (www.freefoto.com) e Gograph

posicionamento do produto e a sua identidade visual. Estamos

33 33

retratos da web

trabalha com dois sistemas de visualização de fotos nas

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

pode alterar uma foto ou imagem a não ser o próprio autor. A

completa e sensorial nos valores e no sentimento que desejamos

advogada explica que há punições tanto na esfera penal quanto

que o consumidor sinta ao ter contato com a sua marca. Devemos

cível. O infrator pode ser condenado de três meses a quatro

sempre tomar cuidado para que imagens que cumprem este

anos de detenção, além de multa e pagamento de indenização a

objetivo não ganhem mais importância que o conteúdo e a

título de danos morais e danos patrimoniais , alerta.

maneira de consumí-lo, prejudicando, assim, a experiência do

Já para quem teve sua foto utilizada por terceiros sem uma

usuário. Resumindo, a forma não pode atrapalhar a função, mas

autorização, a advogada explica que o primeiro passo a ser

sim favorecê-la , conclui André.

tomado é o envio de uma notificação extrajudicial informando

Os cuidados com a lei

ao infrator que sua conduta está violando os seus direitos.

Especialista em Direito da Propriedade Intelectual, a

Segundo ela, tal notificação terá como objetivo principal

advogada Marianna Furtado alerta: fazer alterações e posterior

prevenir direitos e responsabilidades referentes à conduta do

uso sem autorização de imagens conseguidas na web não

infrator. Após essa medida, e caso o problema ainda não tenha

protege a pessoa de ser processada pelo seu autor. Segundo a

sido resolvido, a parte lesada poderá entrar com uma ação

especialista, pela Lei de Direitos Autorais, nº 9.610/98, ninguém

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

34 34

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,

36 36

ilustração de Guilherme Marconi (www.marconi.cloning.com.br)

retratos da web É 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

Como você vê a popularização do uso da fotografia digital (substituição de

entendê-lo e tratá-lo muito bem para que, assim, não corramos o

fotógrafos profissionais por amadores) e

risco de ter o nosso filme queimado definitivamente.

seu resultado na web?

A princípio eu vejo que ocorrerá uma queda na

Arte na web

qualidade, proporcionalmente à popularização, mas

Veja outros sites de ilustradores na internet:

numa próxima fase os trabalhos dos amadores

http://www.speto.com.br

amadurecerão. Contudo, um bom profissional

http://www.fernandaguedes.com.br

sempre fará a diferença.

http://talktohimselfshow.zip.net

Jefferson - jeffersonparra@uol.com.br A fotografia amadora pode suprir algumas necessidades simples mas nada irá substituir a

Brincando de imagens

visão técnica de um fotógrafo profissional, já

Nestes sites, é possível fazer montagens com partes do rosto humano:

que eles levam em consideração luz,

Ultimate Flash Face - http://flashface.ctapt.de

ambientização e tratamento, e isso acaba

Morphases.com - http://www.morphases.com

refletindo no que a imagem quer transparecer.

Detalhes como estes nem sempre são levados em consideração pelos amadores.

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

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!

Acesse e participe!

www.arteccom.com.br/webdesign

www.arteccom.com.br/webdesign

37 37 37

retratos da web

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 10 dicas básicas de Fotografia Digital

vezes (X). Daí vêm os 2X, 3X, 4X. Já o zoom digital é só um quebra-

por Julio Preuss

galho, melhor fingir que ele nem existe.

Enquadramento

Resolução

Nem sempre a pessoa ou objeto que você está fotografando precisa

Afinal, quantos milhões de pontinhos uma foto precisa ter?

ficar no centro da foto, principalmente quando você quer valorizar

Tecnicamente, 2 megapixels para imprimir em 10x15cm. Mas as

aquela linda paisagem ao fundo. Divida mentalmente o espaço do

câmeras de 3 megapixels valem mais a pena, pois custam quase o

visor em três e experimente alinhar seu ponto de interesse em uma

mesmo e têm 64% mais definição. Acima disso, só faz diferença na

dessas linhas imaginárias fica muito mais artístico .

hora de ampliar muito ou recortar detalhes da foto.

Olho vermelho

Impressão

O flash das câmeras compactas fica muito próximo da lente e pode

Posso obter fotos de verdade com uma câmera digital? Claro que

refletir no fundo dos olhos de pessoas e animais. Evite o problema

sim! Nos laboratórios mais modernos, até as fotos comuns são

com o redutor de olhos vermelhos da câmera, fotografando mais de

digitalizadas antes de serem impressas aquelas que você mandou

perto ou desativando o flash. Ou, então, peça para retocarem os

revelar em uma hora já viraram digitais e você nem soube. Afinal, a

olhos na hora da impressão das fotos.

qualidade é rigorosamente a mesma, se não melhor.

Experimentação

Armazenamento

Esta é a melhor dica para um fotógrafo digital : fotografe muito

Quantas fotos cabem numa câmera digital? Depende da resolução,

quanto mais fotos tirar, mais chances de tirar ótimas fotos. Se você

do nível de qualidade e do tamanho do cartão de memória da câmera,

vai viajar, tire mil fotos, imprima as cem melhores e emoldure

mais fotos de 3 megapixels ocupam, em média, 0,8 megabytes. Logo,

aquelas dez realmente fantásticas. Para fazer isso com filme, você

num cartão de 8MB, cabem 10 fotos, num de 16MB, 20, num de 32

gastaria quase 30 rolos de filme e muito mais dinheiro!

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

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

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

Na minha opinião, o negócio é saber quando usar o padrão Tableless.

Argumentar ausência de criatividade se baseando nas

Se você visitar o site csszengarden.com, vai ver um

limitações do tableless tem que ser visto como preguiça

mesmo conteúdo sendo formatado de mil maneiras diferentes,

mental ou indisposição com o novo.

somente modificando o CSS da página. As vantagens são que

Todos nós profissionais de criação (on e offl ine)

o HTML fica mais rápido pra carregar e o layout mais fácil de

sabemos que o nosso exercício diário consiste em aprender

alterar, além da portabilidade. Pode ser uma vantagem, até

coisas novas e reaprender coisas velhas. Entretanto,

mesmo do ponto de vista criativo, se utilizado com inteligência.

acredito que os não adeptos, em breve, o se tornarão, já

Para portais de conteúdo então, é bem interessante.

que o ser humano persegue a auto-superação, ou seja,

Agora, se você pensar nos recursos rich media que, cada

um feito anterior é uma meta a ser batida. Afinal, hoje em

vez mais, são utilizados na publicidade online, como banners

dia, os sites são frameless , e quem não lembra da

com video e hotsites promocionais cheios de Java Scripts e

discussão sobre os frames?

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.

:: Tiê Lima Criação Shoptime.com :: 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

Não. Tecnicamente, o transporte de um layout, seja

é

vetorial ou rasterizado, para uma implementação baseada

imprescindível na maioria dos projetos e, principalmente, o

em padrões é transparente - a correspondência entre as

design é muito bem contemplado pelos padrões recomendados

duas fases é até maior do que no desenvolvimento com

pelo W3C, em particular pelos Padrões XHTML e CSS. Para

tabelas. Há muito mais liberdade: podemos superpor

percebermos este potencial podemos observar sites de

camadas, o que é impraticável com células de tabelas; e

grandes empresas que adotaram os Padrões Web, tais como o

utilizar pseudo-classes, como:hover para simular efeitos

site da Calça Lee, WIRED, Macromedia e tantos outros. Aconselho

antes possíveis apenas com javascript. Para tirar o máximo

observarmos dois trabalhos: o do Dave Shea com

proveito dos padrões, entretanto, não dá mais para

seu projeto CSSZENGARDEN.com. e o Web Standards

depender de interfaces WYSIWYG - dominar o código HTML/

Awards (www.webstandardsawards.com). Com tantos

CSS passa a ser fundamental.

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

Coordenador de desenvolvimento da Tau Virtual

aos designers.

www.tauvirtual.com.br

:: Prof. Bechara Professor de Padrões Web da iLearn www.ilearn.com.br

42

Rodrigo Webler

debate Acredito que o Tableless esteja para o designer hoje,

Quando a W3C criou os padrões da web, não estavam

assim como o Fireworks foi ao final dos anos 90, um

preocupados em mudar a maneira de desenvolver layouts, e

achado tremendo para os profissionais de web. Lembro

sim, em tornar o trabalho do desenvolvedor web mais prático

que a luta constante para baixar o peso das imagens foi

uma vez que se seguidos todos os padrões o webdesigner

praticamente extinta quando foram lançados os

terá a certeza de ter criado um trabalho modularizado,

softwares de produção web.

escalável e acessível. Não é de hoje que essa mudança vem

Programação Tableless hoje é um novo passo para

crescendo e é uma tendência seguir os WebStandards. Ao meu

redução ainda maior de peso e limpeza de código, o que

ver, a criatividade não pode ser atingida pela escolha de um

obviamente reduz drasticamente o acesso ao conteúdo.

padrão de desenvolvimento, mas deve ser adaptada a essa

Com o peso economizado no código, podemos aproveitar

nova tendência. Para isso, um trabalho desde o início da

para a criação de outras peças - como hotsites, banners e

formação do webdesigner deve ser feito nesse sentido. Para

menus dinâmicos visando fortalecer ainda mais a

que, num futuro próximo, todos os webdesigners vejam o

percepção e o alinhamento conceitual do projeto. As

desenvolvimento em padrões como a única forma de criar

limitações existem, mas isso torna ainda mais desafiador o

layouts para a web.

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

Neto Leal

melhor de si e extrair o máximo de sua criatividade.

imediabrasil.com.br

Cristiano d Alcântara Diretor de Criação da VIVA DIGITAL www.vivadigital.com.br

Diretor Técnico da iMedia

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

46 46

desde 2000.

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

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

vitrine para todo o mundo. O objetivo era criar um ambiente

especializadas em design internacionais que elogiam

sedutor para que as pessoas ficassem encantadas; um ambiente

o novo site das Havaianas.

onde as pessoas se identificassem e quisessem ficar. Além disso,

AB :: Kaliber 10000 da Dinamarca (www.k10k.net): citação

era necessária uma nova ferramenta de relacionamento com o

Deluxe e 3 troféus; Favourite Websites Awards da Inglaterra

público que adora as Havaianas.

(www.favouritewebsiteawards.com): site do dia; Newstoday, da

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,

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?

nossa meta de relacionamento está cumprida. Com certeza, ele

AB :: O novo site de Havaianas precisava ser, em primeiro lugar,

volta pra fazer ainda muitas visitas. Para incrementar mais esse

alegre, brasileiro e colorido. E o desafio era manter todo esse

relacionamento, o site terá ferramentas especiais para cativar

entusiasmo para mostrar absolutamente todos os modelos da

esse público, muito em breve...

sandália, sua história, falar com compradores e outros assuntos

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.

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

WD :: Qual o perfil do cliente online?

Brasil e no exterior. Sendo um dos produtos que melhor

AB :: O cliente de Havaianas que está na web procura se

representam o estilo brasileiro , como foi explorada a

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.

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

WD :: Quais eram os objetivos da marca ao entrar no

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

O site todo é inspirado no Brasil e as animações remetem ao conceito de mix cultural

enquanto ele navega?

AB :: Enquanto o usuário recebe uma animação, o sistema carrega as outras animações próximas da ilustração

sem deixar de apresentar muito colorido ao usuário.

Como se deu o tratamento das cores no site?

que ele está vendo no momento. Assim, gradativamente, a

AB :: Criei uma grande paleta com cores que não

composição vai se formando. E, dessa forma, o site carrega

brigam entre si. Tons fortes e chamativos que não se

mais rápido.

anulam. Cada ilustração segue uma linha de cor, sendo que

WD :: Praticamente todo mundo usa as

algumas têm variação de tons frios, outras de tons quentes,

sandálias Havaianas, independente da idade, da

tons da terra etc. Assim, foi mais fácil obter harmonia. Não

classe social, e seja de que tribo for. Com

existiu nenhuma regra específica para a utilização de cores.

diferentes

A única quase inexistente é o preto.

desenhos,

cores,

movimentos

e

ilustrações, o site representa a versatilidade da marca. Fale sobre a escolha do design, das cores e das ilustrações para o site.

WD :: Quais serão os próximos lançamentos e novidades do site?

AB :: Em breve, teremos muitas novidades no site.

AB :: O primeiro estudo do site foi feito com algumas

Estamos preparando novas seções, com a história das

ilustrações simples sem cor, somente para o cliente

Havaianas, área para colecionadores, exportações e uma

entender a criação. Aprovado o conceito, coloquei o fone

nova loja virtual; ferramentas de relacionamento com o

de ouvido e ouvi muita música, até que as primeiras

público. Isso e muito mais.

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

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

a

Volkswagen;

inevitável o uso do verde-amarelo no site das

Chocolates

Havaianas. Porém, nota-se que todas as cores,

(www.mizunobr.com.br); Cerveja Antarctica (http://

inclusive as da bandeira do Brasil, estão em harmonia,

www.soudaboa.com.br); entre outros.

48

Twix

para

(http://www.twix.com.br);

Mizuno

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

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,

faturamento do e-commerce deve crescer 24%, de acordo com dados da E-Consulting divulgados na web.

o

Martins,

diretor

Comercial

da

Interlize

Com o foco no sucesso e no melhor para o consumidor, os sites de comércio eletrônico estão investindo em sua infra-estrutura. O Submarino, por exemplo, 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

50

época para todos os varejistas.

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

América Latina, celebra seu sexto ano e lança seus serviços no Chile

O podcast é um sistema de produção e difusão de arquivos

(www.buscape.cl), consolidando sua liderança, pois já havia

sonoros que guardam similitudes com o formato dos programas 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

México (www.buscape.com.mx).

de som, o usuário grava um programa, salva como arquivo de

A maturidade do comércio eletrônico teria ajudado a

:

som e, depois, torna-o disponível em sites que são indexados 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 ecommerce 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

Brasil é referência em e-commerce

sites de conveniência

Cartão de crédito: o mais temido e o mais usado

plataformas de meios eletrônicos de pagamento. Por exemplo, a

Para conquistar um cliente online é preciso lhe oferecer

plataforma m-Cash, desenvolvida pela Megadata, empresa de

alternativas de pagamento seguras e ágeis. O cartão de crédito

tecnologia associada ao grupo Ibope, utiliza o telefone celular

costuma ser a opção mais usada e, ao mesmo tempo, mais temida

como validador da transação e pretende agregar muito aos

neste meio. Para quem não tem ou não quer usar o cartão para

negócios online no Brasil.

compras na web, o boleto bancário aparece como uma boa alternativa.

Serviços Online x Serviços Convencionais

Segundo Abel, também há riscos com relação à segurança da

Hoje em dia, é possível realizar transações bancárias via

informação. Mas trata-se de um aspecto inerente a transações

internet, compras no supermercado e, até mesmo, comprar um carro

comerciais em qualquer meio .

por meios virtuais. Mas, será que, futuramente, alguns serviços

Os meios de pagamento usados na internet brasileira são, praticamente, os mesmos dos países-referência. Nos Estados

online substituirão serviços convencionais, ou eles apenas surgem como mais uma opção de compra?

Unidos, 95% das transações de internet são realizadas por meio de

Para o diretor comercial da Interlize, os serviços online são uma

cartões de crédito, segundo informações da Câmara-e.net. Já no

opção. Segundo ele, produtos sem personalização, como calçados,

Brasil, o percentual caiu de 90% para 80%, recentemente. Talvez

brinquedos, CDs, DVDs e eletrodomésticos, são mais vendáveis e

por uma parcela dos consumidores ainda desconfiarem do uso de

possuem números mais representativos em compras via internet.

cartão de crédito via internet, ou mesmo por uma questão cultural, o

Ainda assim, uma parcela do mercado optará por comprar em lojas

fato é que o perfil do consumidor brasileiro virtual pede outras

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

52

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 maior campanha do varejo eletrônico brasileiro coordenada pela Câmara Brasileira de Comércio Eletrônico (Camara-e.net). Entre os dias 1º e 10 de julho, as lojas Americanas.com, Extra.com.br, LivrariaCultura.com.br, LivrariaSaraiva.com.br, MagazineLuiza.com.br, Marisa.com.br, Shoptime.com.br, Siciliano.com.br, SomLivre.com, Submarino.com.br e

coordenação da Camara-e.net. Esta é uma iniciativa destinada a levar aos usuários da web informações úteis para uma navegação mais segura na rede, e tem como membros, além das lojas participantes do LiquidaWeb, as empresas American Express, Banco do Brasil, McAfee, Microsoft, entre outras.

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 Janeiro) à solução de comércio eletrônico da Interlize, a empresa constatou a

www.fiat.com.br

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.

A Agência Click é uma agência que integra planejamento, criação e

Direct Commerce®

:

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

sites de conveniência

:

Liquidaweb

tutorial

Padrões Web 2

Prof. Everaldo Bechara e Prof. Maurício Samy Silva Professores do Centro de Treinamento iLearn falacom@iLearn.com.br

XHTML, a evolução do HTML

definidos. Código este que proporciona todos os benefícios do XML

XHTML é uma reformulação do HTML 4 como uma aplicação

sem as complexidades do SGML.

XML. W3C

XHTML é uma linguagem de marcação bastante familiar

Neste artigo vamos conversar um pouco sobre a linguagem de

para quem conhece HTML, e a transformação de um documento

marcação XHTML, contando como surgiu, descrevendo o que é,

HTML existente para XHTML é uma tarefa bem simples, como

mostrando qual a sua finalidade, apontando razões para se adotar

veremos adiante.

esta linguagem desde já, bem como exemplificando e comparando com

Vantagens de se usar XHTML

o HTML em alguns trechos de código.

Enumeram-se várias e efetivas vantagens em se usar marcação

Apresentaremos seus aspectos estruturais e semânticos, bem como ressaltaremos a posição da linguagem no contexto das Web Standards.

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

O que significa XHTML ?

compatibilidade da linguagem XHTML com as futuras aplicações de

XHTML é a sigla em inglês para eXtensible HyperText

usuários, garantindo, desde já, que as criações XHTML conservar-se-

Markup Language, que em português pode ser traduzido para

ão estáveis por longos anos, bem como a retro compatibilidade com

Linguagem Extensível para Marcação de Hipertexto, escrita para

aplicações existentes.

substituir o HTML e é uma Recomendação estável do W3C desde

A Internet do futuro aponta para versões de browsers e

26 de janeiro de 2000, revisada em 01 de agosto de 2002, portanto,

agentes de usuários em geral, cada vez mais compatíveis e conformes

uma Web Standard.

com XML e, em consequência, mais rígidos e menos complacentes com

Como surgiu XHTML ?

marcação que se vale de códigos mal formados, sintaticamente

Todas as linguagens de marcação para a web são baseadas em

incorretos e que se utilizam de elementos e atributos

SGML (Standard Generalized Markup Language), uma

desatualizados ( deprecated ), segundo as recomendações do

metalinguagem complexa, projetada para máquinas com a finalidade

W3C. Antigos e ultrapassados esquemas e esboços do HTML tendem

de servir de base para criação de outras linguagens.

a ter seu espaço cada vez mais reduzido no ambiente da web.

SGML foi usado para criar o HTML (HyperText Markup

Desenvolvedores de documentos e projetistas de aplicações de

Language) e o XML (eXtensible Markup Language), também

usuários estão constantemente descobrindo novos caminhos para

metalinguagens, porém, ambas bem mais simples.

expressar suas idéias com utilização de novas marcações. Em XML, é

Em XML, você cria suas próprias tags e atributos para

relativamente simples criar novos elementos e novos atributos. A

escrever um documento web, ou seja, é você quem cria sua

família XHTML está projetada de modo a acomodar estas extensões

linguagem de marcação.

dentro dos módulos XHTML e de técnicas para desenvolver novos

XHTML foi criado dentro deste conceito e, por isso, é uma aplicação XML. As tags e atributos do XHTML foram criadas,

recomendação

aproveitando-se as conhecidas tags e atributos do HTML 4.

Uma recomendação é considerada estável quando a

Assim, é válido afirmar que, ao usar XHTML, estamos escrevendo um código XML, onde as tags e os atributos já estão

54

estável

recomendação já se encontra em um grau de maturidade suficiente para o W3C.

:

tutorial módulos de conformidade com XHTML (a serem descritos nas

organizações membro do W3C, a fabricantes de software, de

futuras especificações de modularização XHTML).

hardware e dos mais diversos equipamentos e componentes

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.

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

A família XHTML foi concebida tendo em mente a

www.maujor.com/w3c/xhtml10_2ed.html, onde você encontrará

operabilidade com as aplicações de usuários gerais. Através

em português a Recomendação W3C de 26 de janeiro de 2000,

de um novo mecanismo de definição das aplicações de

revisada em 1 de agosto de 2002 - XHTML 1.0 The Extensible

usuários e de documentos, os servidores, proxies e

HyperText Markup Language (Segunda Edição) - Uma

aplicações de usuário estarão capacitados a uma melhor

reformulação do HTML 4 em XML 1.0

transformação de conteúdos.

As diferenças entre XHTML e HTML

Por fim, será possível desenvolver conteúdos em

Não cabe no espaço deste artigo e nem é nosso objetivo

conformidade com XHTML que sejam compatíveis com qualquer

detalhar as diferenças, mas apontamos, a título de ilustração,

aplicação de usuário XHTML.

algumas delas:

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

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

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

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>

as aplicações de usuários baseadas em HTML, antigas

<li>Laranja</LI>

e já ultrapassadas.

<LI>Banana</LI>

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

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

Os elementos vazios, devem ter uma tag de fechamento ou a tag de abertura deve possuir ao final o código />

</ul>

Errado: <br><hr> b)

os

elementos

(tags)

devem

estar

Certo: <br /><hr />

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.

Conclusão Como uma aplicação XML, o XHTML é bem mais rigoroso que o nosso velho e conhecido HTML. O XHTML é mais

Exemplo:

poderoso e importante para a comunidade web que o HTML.

Errado: <div><p>Meu parágrafo<div><p>

Com o XHTML, temos todos os benefícios do XML e, com isso estamos criando a tão desejada Web Semântica. Aplicações

Certo: <div><p>Meu parágrafo<p><div>

como o Google se beneficiam desta semântica, e você também, descobrirá as maravilhas do X do XHTML.

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

Até o próximo tutorial no qual estaremos abordando mais sobre o poder do XHTML.

#%

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

webwriting

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

É simples: uma página vende, digamos, um DVD de última

um bom tempo. É a criatividade e a pesquisa a serviço da

geração, mas a estrutura editorial está montada no formato

originalidade e você à frente dos outros. Este deve ser um

Informações sobre este modelo/O que é um DVD/O diferencial da

movimento constante, o de criar um conteúdo sempre mais

marca , troque tudo de lugar. Que tal atrair a atenção do visitante

completo que o do site do vizinho.

com o primeiro item, O que é um DVD ? Por incrível que pareça,

Conteúdo dinâmico

muitos ainda podem desconhecer todas as funcionalidades e

A informação ficou antiga? Não há como atualizá-la? Existe

diferenciais deste aparelho (possíveis compradores, por exemplo...).

uma ótima solução: transforme-a em pauta jornalística para o

Depois, parta para O diferencial da marca e feche com

próprio site. Em outras palavras, abra a embalagem e deixe a

Informações sobre este modelo . Você estará dizendo a mesma coisa,

informação falar por si mesma.

na mesma página, mas, apenas com esta inversão de estrutura, terá

Exemplo: as informações sobre o Relatório Anual da empresa,

fisgado um público diverso daquele que tentava atrair antes.

disponíveis desde meados do ano, estão no porão do site, criando

Já que falei tanto em Disney, que tal uma visita ao

poeira? Que tal apurar qual é o processo de organização deste

www.disney.com? Perceba como foi bem pensada a arquitetura da

documento, sua real utilidade, quem o consulta, etc.?

informação básica na primeira página do portal.

É o valor adicional ao conteúdo expande a informação, cria novos motivos para que ele seja visitado, demonstra atenção em

Em setembro, o Bruno irá ministrar um workshop sobre

relação ao material disponibilizado. É como dar uma descarga de vida

Webwriting e Arquitetura da Informação em São Paulo, na

ao seu conteúdo, até então condenado ao esquecimento.

sede da ABA - www.aba.com.br. Para mais informações,

Conteúdo recriado

envie

uma

mensagem

para

Não há como injetar criatividade no conteúdo? Não

email sandrazanetti@aba.com.br.

Sandra

Zanetti

pelo

existe o que pesquisar? O assunto não gera pauta? Há uma saída que atende pelo nome de conteúdo recriado.

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

marketing

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

Vamos para um momento diametralmente oposto:

corresponde a um estado de espírito, a um conjunto de intenções, a

CARRINHO DE COMPRAS

sensibilidades diferentes.

1. se existe um momento que faz um lojista online prender o

Antes que você pense que isso é um acesso agudo de frescurite, vamos ver dois exemplos:

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

HOME

se desvia a atenção, não se gera ruído. Adeus banners, adeus

1. se o usuário não conhece ainda a loja ou se nunca comprou

fanfarra, adeus firulas. Vejam como qualquer bom carrinho de

online, é fundamental passar para ele a impressão de confiabilidade,

compras é de um silêncio e austeridade dignos de uma catedral.

de segurança, de profissionalismo; a home é um momento crítico

2. ok, ok, não podemos distrair o usuário, mas... já que ele está

para isso, pois se essa impressão não fica , o cara não fica um

comprando, será que ele não gostaria de levar algo mais? Se

segundo a mais ali e vai em busca de algo mais limpinho.

soubermos oferecer algo pertinente (como um estojo quando o cara

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

compra uma câmera), isso pode ser muito bem-visto, gerar mais compras e tem que ganhar um nome bacana: cro$$-$elling.

digital , ou está em busca de ofertas sejam quais forem, ou quer

Nós poderíamos continuar esse exercício página por página,

ver os novos lançamentos. Não o deixe a ver navios, seja qual

momento por momento, e eu adoraria. Perguntar e aí? com olhos de

for a praia dele.

cliente e de cliente do cliente é um processo fascinante, mas eu...

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 é

preciso terminar esse artigo, enfim, e eu já tenho desde o início um final na manga:

direito dele, mas nosso cliente vai ficar felicíssimo se conseguirmos

Em webdesign, os fins enriquecem os meios .

motivar o anônimo a deixar alguns dados.

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. Useos 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, é ProfessorDoutor 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

webdesign

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

encontrar alguns profissionais de mais de 60 anos em um

conhecidas que perdem seu potencial de inovação e comunicação,

departamento de criação; 3) A formação para os cursos de artes

tornam-se gastas e ninguém mais nem mesmo os clientes a

visuais é muito mais rica e puxada nestes países que aqui,

agüentam, até que caiam no esquecimento.

democracia acadêmica em que ninguém precisa de diploma; e 4) Na

No design de hoje, a palavra criação é uma ironia triste: a

hora do aperto, é dos gringos que eles gostam mais: conheço muitos

pressão é muito grande, as exigências enormes e os prazos,

paulistas que acham mesmo que estão em Nova Iorque e cariocas

mínimos. Nessas condições, poucos se dão ao trabalho de

que acreditam estar na Califórnia. Com esse panorama, é menos

efetivamente criar algo. O resto faz a reciclagem de produtos,

arriscado se inspirar em propaganda pronta vinda de Londres que

idéias e soluções prontas, repetindo fórmulas sem prazer, sem

arriscar um design arrojado baseado em cordel ou na vaquejada.

relevância, sem descoberta.

É a filosofia do se deu certo lá, não tem porque não dar certo

O processo é tão óbvio que chega a ser ridículo: um gringo tem

aqui , milhões de moscas não podem estar erradas. Daí, não é de se

uma idéia boa seu trabalho é publicado em um anuário qualquer,

estranhar quando as soluções gráficas / estéticas se esgotam e a

que vai parar nas mãos de um designer estafado de um estúdio

maioria dos sites da internet é daquela mesmice insuportável. Me

grande qualquer. Ele se apropria da idéia por cansaço, preguiça ou

parece que a maioria dos designers de produtos digitais se esqueceu

falta de idéia melhor, já que seu cotidiano é uma canseira. Vários

de uma regra pra lá de básica: todas as soluções gráficas têm que

outros fazem o mesmo, estúdios pequenos copiam o trabalho dos

ter um porquê, ou melhor, se não há motivo para se usar um

grandes e... voilá! Até a padaria da esquina usa a mesma solução de

recurso, ele não deve ser usado. Na tv isso é bastante óbvio: a

design. Daí, todo mundo se enche e a fórmula é aposentada até que

maioria dos programas e comerciais evitam abusar dos efeitos. Já

outro gringo tenha outra idéia boa etc etc etc.

os comerciais de varejo de lojas populares

Antes que esta coluna seja inundada por patriotadas, deixe-

Em outras palavras, seguir todas as tendências de design da

me explicar o gringo: 1) Em muitos países que se faz bom design, dá-

internet não é talento. É ingenuidade. Antes de fazer sua próxima

se espaço ao profissional de criação para que renove suas idéias e

interface, pense em seu efeito, propósito e abrangência. Pense em

busque inspiração, ao contrário daqui; 2) Em muitos países ditos

Google, Nike, Amazon. Faça o relevante, crie uma tendência. E deixe

desenvolvidos , se valoriza a experiência e não é nada raro

que os pobres de espírito sigam você.

65

66