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