novembro 2007 :: ano 4 :: nº 47 :: www.revistawebdesign.com.br
ilustraÇÃo
vetorial Conteúdo gerado pelo usuário: estimula participação efetiva ou gera apenas afinidade com a marca?
Negócios: como se precaver na hora de fechar contratos com clientes no exterior
Joomla!: saiba como instalar e administrar um gerenciador de conteúdo gratuito
Breadcrumbs: quando utilizar este recurso para facilitar a navegação E D I T O R A
R$ 9,90 I SSN 1806 - 0099
9 771806 009009
00047
4 :: quem somos
Editorial ALMA
Equipe Direção Geral Adriana Melo
fechamos o tema com chave de ouro, após ler a entrevista com Glauco Diogenes. Além de falar sobre criação, estilos, técnicas e metodologia, Glauco falou sobre ALMA. ALMA deve ser o “diferencial competitivo” do designer. Utilizar as últimas tecnologias já deixou de ser uma vantagem há bastante tempo. Elas se propagam tão rapidamente quanto se envelhecem. Utilizar fórmulas prontas também não funciona, rapidamente temos acesso aos originais. Então, o que diferencia hoje um projeto no meio de uma multidão? O que o torna atraente? A energia que é desprendida na criação é que reflete a
Direção Executiva Sergio Melo Direção de Redação Luis Rocha Criação, Diagramação e Ilustração Camila Oliveira Leandro Camacho Publicidade Débora Carvalho Atendimento Luanna Chacon Financeiro Cristiane Dalmati
originalidade, a inovação. É tão fácil chegar a um resultado satisfatório com as ferramentas disponíveis. O difícil, que demanda pesquisa, esforço e dedicação, é chegar a um resultado SURPREENDENTE. Estava vendo agora um anúncio de um curso de graduação frisando a quantidade e a qualidade de seus laboratórios e softwares. Parece que
Atendimento aos assinantes atendimento@arteccom.com.br Redação redacao@arteccom.com.br Anuncie publicidade@arteccom.com.br
houve uma inversão de valores. Onde foi parar o capital intelectual? De que adianta ser o mais expert num software se não for compreendida a arte
Revista Webdesign www.revistawebdesign.com.br
da criação? Os objetivos, os conceitos, as metodologias, os processos, a
Curso Web para Designers www.arteccom.com.br/curso
história... Criar é pensar, conceber e desenvolver uma idéia, com base em estudos, pesquisas, experimentos. Então, invista seu tempo desenvolvendo sua capacidade de criação, só assim você estará apto a criar projetos com expressão, com ALMA. Espero que essa coleção tenha “iluminado” ainda mais essas mentes criativas! Um grande abraço e até a próxima,
Encontro de Web Design www.arteccom.com.br/encontro Fórum Internacional de Design e Tecnologia Digital www.arteccom.com.br/find Concurso Peixe Grande www.arteccom.com.br/peixegrande
Criação e edição www.arteccom.com.br
Produção gráfica
Adriana Melo adriana@arteccom.com.br
www.ediouro.com.br
Distribuição www.chinaglia.com.br
Making of da criação Caminhando por alguns quarteirões de um bairro residencial do Rio de Janeiro, é possível encontrar dezenas de caixas de correio exatamente iguais a esta representada na capa. Além de ser um objeto interessante, a figura do pombo correio esculpido é muito bonita. A idéia desta composição foi trabalhar a figura do pombo se separando da caixa, como se ganhasse vida própria. A escolha das cores representa bem essa vitalidade. As linhas de contorno da caixa, assim como os outros traços que compõe a imagem, foram obtidas com o uso de tablet a partir de fotografia. A grande vantagem de trabalhar com vetor é a facilidade de compor uma imagem com elementos obtidos de formas diferentes e de fontes diferentes sem interferir na harmonia da composição. Fale com a equipe de criação: criacao@arteccom.com.br
9
:: A Arteccom não se responsabiliza por informações e opiniões contidas nos artigos assinados, bem como pelo teor dos anúncios publicitários. :: Não é permitida a reprodução de textos ou imagens sem autorização da editora.
Enfim concluímos nossa coleção “Técnicas de Criação”. Acredito que
menu :: 5
apresentação pág. 4 quem somos pág. 5 menu contato pág. 6 emails pág. 6 fale conosco
fique por den tro pág. 8 métricas e mercado pág. 10 direito na web pág. 11 post-it
portfólio pág. 12 agência: Jazzz pág. 18 freelancer: Luci Hidaka pág. 20 ilustração: Rômolo Eduardo matéria de capa pág. 22 Coleção Técnicas de Criação - Volume III: Ilustração vetorial pág. 30 Para ilustrar pág. 34 Passo a passo e-mais pág. 38 debate: O papel do usuário pág. 44 e-mais: Breadcrumb pág. 50 estudo de caso: Last.fm pág. 55 tecnologia na web: CSS pág. 60 tutorial: Joomla! - Parte 1 com a palavra pág. 66 webwriting: Bruno Rodrigues pág. 68 marketing: René de Paula Jr. pág. 70 publicidade on-line: Ricardo Figueira pág. 72 webdesign: Luli Radfahrer
6 :: emails
Assunto: Microformatos Primeiro queria parabenizá-los, sou assinante e não deixo de ler uma matéria sequer em todas as edições. Gostaria de pedir a vocês que publicassem algo sobre Microformatos, a opinião de grandes nomes sobre esse assunto, alguns exemplos que acho que seria muito interessante para a galera que ainda não sabe o que é ou que talvez não tenha ouvido falar ainda. Abraços! Luis Henrique luishenrique@brasclick.com.br Luis, agradecemos o seu apoio! Sobre sua dúvida: o tema já foi abordado na revista, mais precisamente na edição de março de 2006, capa “Comunidades”. Foi na época do lançamento da seção “Tecnologia na Web”. Na reportagem, o especialista Henrique Pereira (www.revolucao.etc.br) apresentou até uma aplicação prática dos microformatos. Fica aí a
Barbara, ficamos felizes que a edição tenha agradado! Sua dúvida
Fireworks. Atuo na área como designer, utilizando o FW, e sempre percebo uma certa
é pertinente. Na prática, quem trabalha com colagem, procura
Recentemente, lancei meu novo
discriminação. Gostaria que
utilizar imagens que tenham seus
portfólio. Utilizei como tema os
fosse abordado este tema para
direitos de uso liberados. O assunto
antigos filmes noir’s da década de
uma discussão mais ampla. Acho
é bom e vai render um artigo para a
40 e 50. Gostaria de sugerir como
muito importante este assunto
coluna Direito na Web, ok?
pauta portfólios que seguem uma
e até agora nunca foi abordado
temática.
publicamente. Não acredito ser
Tom Carvalho
correto uma discriminação e um
tom@tomcarvalho.com
fator determinante para uma
Assunto: Jogo on-line das marcas Parabéns pela revista, a cada
empresa se o designer utilizar X
mês melhor! Gostaria de
O tema é para lá de interessante,
ou Y. O que vale é a competência
sugerir como pauta o tema
Tom! Falar sobre portfólios sempre
e o trabalho final. Abraços e
“Advergames”. Tenho lido um
rende um bom papo, tanto que
parabéns pela excelente revista!
pouco sobre isso, mas não
o assunto já foi abordado em
Everson Pereira
sei até que ponto é possível
duas edições: em janeiro de
everson@eversonjp.com.br
adaptar esse tipo de ação a
2005, quando foi apresentada
qualquer tipo de cliente. Fora
uma extensa reportagem sobre
Everson, são leitores como você
isso, temos o problema do
o assunto, com destaque para as
que nos estimulam a produzir
custo de se criar ou adaptar
dicas de como tornar seu portfólio
uma revista com mais qualidade e
um game. Seria bacana
mais atraente; e no mês de abril
paixão! Obrigado pela fidelidade
uma matéria mostrando as
deste ano, quando falamos o
ao longo desse tempo. Em relação
iniciativas nessa ferramenta,
que as agências procuram avaliar
ao assunto, sua frase “o que vale é
principalmente as ações feitas
na seleção dos portfólios e os
a competência e o trabalho final”
com baixo custo. Grande
itens indispensáveis de serem
resume muito bem o cerne deste
abraço.
apresentados. Quem sabe não
debate. Vamos levar o assunto
Tiago Gouvêa
voltamos a falar do assunto no
para a nossa próxima reunião de
tiago@aprimorar.com
futuro, revelando exemplos da
pauta, ok? Abraços e continue
criatividade dos profissionais na
participando!
nossa dica. Abraços e boa pesquisa! Assunto: Direitos autorais na colagem
Assunto: Portfólios temáticos
Olá, Tiago! Parece que
área?
conseguimos adivinhar seus pensamentos, pois os advergames
Assunto: Photoshop versus Fireworks
DESCULPE A NOSSA FALHA! - Na edição de outubro, na página 25,
Gostaria de parabenizá-los pela
foram destaque de capa da edição
edição de setembro, com a
do mês passado (Graffiti/Stencil)!
coleção sobre técnicas de criação.
Além das etapas envolvidas em
Sou assinante da revista há
tornado...”. Por favor, considerar “...
Perfeita! Mas fiquei com uma
seu desenvolvimento, falamos
dois anos e ela já faz parte da
acaba se tornando...”.
dúvida: se juntarmos imagens e
também dos modelos e dos custos
maneira como eu trabalho. É uma
recriamos situações com elas, não
existentes para a sua produção.
excelente maneira de guiar-se
poderemos ter problemas com
No final da matéria, você poderá
e ficar por dentro de tudo que
direitos autorais destas imagens?
conferir ainda alguns bons
acontece nesse mercado.
Um abraço.
exemplos, como o “Lose Your
Gostaria de sugerir um assunto
Barbara Oliveira
Anger” (www.loseyouranger.com).
para pauta: a “guerra” que
babi.contato@gmail.com
Procure dar uma lida e depois nos
existe entre Photoshop e
na entrevista sobre Graffiti/Stencil, há um erro na passagem “...acaba se
diga o que achou.
fale conosco pelo site www.revistawebdesign.com.br :: Os emails são apresentados resumidamente. :: Sugestões dadas através dos emails enviados à revista passam a ser de propriedade da Arteccom.
8 :: métricas e mercado
Tempo de navegação residencial por internauta - Agosto/2007
432 Total de empresas operando no mercado de hospedagem
País
Tempo médio por pessoa
web. O estudo revela ainda que elas são responsáveis por
Brasil
23h28min
cerca de 70% dos domínios registrados no país. A estima-
EUA
20h00min
Alemanha
18h14min
Japão
17h59min
Austrália
17h44min
Fonte: Ibope//NetRatings (www.ibope.com.br)
tiva é que existam cerca de 880 mil sites referenciados por domínios brasileiros. Fonte: Hostmapper Brasil (www.hostmapper.com.br)
Preços de hospedagem em queda O estudo aponta que, em setembro de 2006, o valor mé-
36,9 milhões
dio dos planos era de R$ 22,19, o custo médio por banda
Total de pessoas com mais de 16 anos, em agosto, com
(Gb) de R$ 7,50 e custo médio de espaço em disco (10Mb),
acesso à internet em qualquer ambiente (casa, trabalho,
R$ 2,15. Em setembro de 2007, esses valores atingiram a
escolas, universidades e outros locais).
média de R$ 20,85, R$ 3,97 e R$ 1,06, respectivamente.
Fonte: Ibope/NetRatings (www.ibope.com.br)
Por valores menores, atualmente o usuário obtém seis vezes mais espaço em disco e uma transferência mensal
3,1 milhões
três vezes maior que em setembro de 2005. Fonte: Hostmapper Brasil (www.hostmapper.com.br)
Número de usuários, em agosto, que acessaram conteúdo relacionado à categoria “Automotivo”. Para se ter uma idéia do tamanho interesse pelo tema, a média de tempo de uso desta categoria atingiu 15 minutos por usuário.
Qual software você costuma utilizar no trabalho com imagens vetoriais?
Fonte: Ibope/NetRatings (www.ibope.com.br)
Total de votos: 252
30 milhões
CorelDraw - 71% Illustrator - 25%
Com este montante de usuários, o Windows Live Messenger
FreeHand - 2%
(e sua versão anterior, o MSN Messenger) lidera a categoria
Inkscape - 2%
de mensagens instantâneas no Brasil. Já o Windows Live
Acesse e participe!
Hotmail aparece como um dos webmails mais utilizados, to-
www.revistawebdesign.com.br
talizando 28,6 milhões de contas ativas. Fonte: Microsoft (www.microsoft.com.br)
Envie sugestões e críticas para redacao@arteccom.com.br
métricas e mercado :: 9
ViuIsso?
Por Michel Lent Schwartzman - michel@viuisso.com.br Site: www.viuisso.com.br
Notícias e comentários sobre comunicação digital, internet e publicidade Saber usar as ferramentas digitais para planejar suas estratégias
Branding básico para crianças Filho de publicitá-
de comunicação é essencial para qualquer profissional que
rio… Publicitário
deseja estar atualizado e ser competitivo.
p o d e s e r. P r a g a -
A t é b e m p o u c o t e m p o , a ú n i c a f o r m a d e a p re n d e r i s s o
rantir, vale dar um
era “na marra”. Pois agora, as pessoas de Rio e São Paulo
deste de presente
já contam com cursos oferecidos por duas das principais
para a criança bem
instituições especializadas em formação para o mercado de
c e d i n h o i r a p re n -
comunicação digital. No Rio, a Infnet oferece o curso “Formação em Marketing
dendo a conhecer as marcas. : )
Digital: Estratégias e práticas de sucesso no ambiente digital”,
viuisso.nada
com 80 horas/aula.
P r a q u e m a i n d a a c e s s a o b l o g d i g i t a n d o o e n d e re ç o e
Em Sampa, quem oferece curso no mesmo segmento é a Jump
usa FireFox, é só fazer assim: escreve viuisso no lugar do
Education, que oferece o certificado em “Planejamento de
endereço e dá enter. Pronto. E viva o Google. : )
Marketing Digital”, programa desenhado para executivos e profissionais que buscam aprimoramento nos conhecimentos
iPhone desbloqueado já vende à vontade no Brasil
do marketing digital, com um total de 60 horas/aula.
Pra quem quiser comprar o
Parabéns às duas instituições por oferecerem este tipo de
iPhone de 8GB devidamente
formação. O mercado agradece. : )
desbloqueado aqui no Brasil, vai encontrar no
Videocast, porque afinal é o lance da Colméia.tv
Mercado Livre por R$ 2.300,
A produtora especia-
em média. Já no Buscapé têm lojas vendendo por R$ 3.300.
lizada em vídeos
Quem resolver trazer lá de fora custa 400 dólares (fica dentro
para canais interati-
do limite de US$ 500 permitido pela alfândega) e só precisa
vos estreou seu vide-
inteirar mais R$ 200 para comprar o desbloqueio. Ou seja,
ocast (www.colmeia.
por quase milzinho já tá dando pra sair falando de iPhone por
tv/blog/tag/colmeia-
estas redondezas.
videocast) em setem-
Mas cuidado para não fazer os updates da Apple, pois parece que
bro. É tipo um “calça
eles travam totalmente os telefones que foram adulterados.
justa” com laptops no colo bem produzido pra kct e inteligente pra kct. Assiste aê, galera!
Formação em Marketing Digital, Rio e Sampa A formação em Marketing Digital é uma necessidade cada vez mais real dentro das empresas e mesmo dentro das agências.
10 :: direito na web
Contratação internacional de desenvolvimento de sites “Há algum tempo tive a oportunidade de desenvolver sites para empresas estrangeiras. Tive contato com duas pessoas diferentes. A primeira era gerente de uma grande empresa que precisava da criação de três sites. Fiz os três e recebi tudo corretamente, conforme combinado. Foi um bom dinheiro e me animei com a idéia de desenvolver para o mercado exterior. Porém, pouco tempo depois, um novo cliente apareceu. Queria a criação de um logotipo, identidade visual e site. Fiz um contrato e enviei por e-mail, ela assinou, escaneou e me retornou, mas creio que tal contrato não tenha validade real, é só uma formalização. Sendo assim, comecei a elaborar o projeto, com a promessa de que o dinheiro seria depositado após dois dias e estaria em minha conta em uma semana. O tempo foi passando, o dinheiro não aparecia e eu já tinha entregado o logotipo e o site estava criando cara. Foi quando a cliente, que eu tinha adicionado no MSN, me bloqueou, sumiu, não respondeu os e-mails... O que fazer num caso desses? Como podemos negociar e fazer contratos com empresas estrangeiras?” Daniel Emiliano - contato@danielemiliano.com.br
Gilberto Martins de Almeida Advogado formado na PUC/RJ,
Como as contratações de desenvolvi-
se for o caso, de associações das quais o deve-
mento de sites no mercado doméstico já apre-
dor faça parte) ou bancárias, e fazer cadastro o
sentam uma série de desafios merecedores de
mais completo possível;
cautelas legais, pode-se bem imaginar que a
com Mestrado na USP e cursos
contratação internacional - isto é, a realizada
em Harvard e no M.I.T. Ex-
com empresa localizada no exterior - acrescen-
Gerente Jurídico da IBM, onde
ta alguns itens tão ou mais problemáticos.
trabalhou por 11 anos, no Brasil e nos EUA. Sócio de Martins de
Em primeiro lugar, há que atentar na for-
Almeida - Advogados, escritório
ma, pois um contrato preparado como arquivo
especializado.
eletrônico, assinado no local de destino, e de-
Envie sua dúvida para:
volvido em cópia escaneada, terá força proban-
redacao@arteccom.com.br
te desde que tenha havido troca de mensagens de e-mail confirmando-a, tenha havido o envio do trabalho requisitado, tenha havido acordo sobre preço, prazo e escopo etc. Vale lembrar que, em havendo suficientes
- exigir pagamentos parciais, conforme cronograma do desenvolvimento; - indagar sobre representante local no Brasil, e incluí-lo como parte no contrato; - prever foro brasileiro (ou, no mínimo, prever que será o foro da parte prejudicada); - tentar emplacar redação em português (ou, no mínimo, bilíngüe, lado a lado); - prever que o contrato será considerado como título executivo; - prever: autorização para emissão de notas promissórias, auditorias presenciais ou remotas, aceitação de meios eletrônicos como prova;
meios de prova, os contratos podem ser até
- prever suspensão ou rescisão automá-
mesmo verbais (embora isto seja menos acon-
ticas do uso do site pelo cliente em caso de
selhável no caso de transações internacionais).
atrasos de pagamento superiores a “X” tem-
Logicamente, cuidados como assinatura
po, e concordância a priori com realização de
digital, arquivo .PDF, certificação de tempo,
busca e apreensão.
selo digital, ata notarial, assinatura por duas
Como se vê, quanto mais proteção se
testemunhas e outros compõem um menu que
queira, maior o investimento em cuidados le-
ajuda a reforçar a força probante da contrata-
gais, dentre o cardápio de medidas oferecidas.
ção, conforme o apetite do interessado.
Do contrário, se pode cair numa situação de ter
Em segundo lugar, e não menos impor-
que ajuizar ação de cobrança no exterior (com
tante, a questão da garantia de efetivação
os custos, em geral elevados, associados), ou
do pagamento do cliente. Para certos negó-
de ter que ajuizar ação no Brasil pedindo que
cios, há a alternativa das cartas de crédito,
uma carta rogatória seja enviada pela Justiça
em que o banco intermediário garante o pa-
brasileira ao Judiciário do país estrangeiro (com
gamento ao credor.
substancial consumo de tempo).
Para outros negócios, entretanto, as cau-
A exportação de serviços é uma ótima saída
telas recomendáveis se situam mais no campo
para a expansão de negócios, mas requer prepa-
prático ou contratual, a exemplo das seguintes:
ração prévia, para não se cair num conto do vigá-
- pedir referências comerciais (inclusive,
rio, ou semelhantes.
post-it :: 11
entro , d r o p Fique cas, eventos ias das di e referênc undo livros vimentam o m que mo ign na web do des Referências sobre ilustração vetorial Como o especial deste mês aborda os detalhes técnicos e conceituais na produção de imagens vetoriais, nada melhor do que apontar links valiosos sobre o assunto: Flash Brasil (www. flash-brasil.com.br), Flash Perfection (www.flashperfection.com), Illustrator Tutorials (www.sketchpad.net/illustrator.htm), Inkscape Brasil (http://twiki.softwarelivre.org/bin/view/InkscapeBrasil), Ponto Flash (www.pontoflash.com.br), Tutorialized (www. tutorialized.com) e WebTutoriais (www.webtutoriais.org). As dicas são da designer Carolina Vigna-Marú (www.vignamaru.com.br).
Um pôster russo por dia A promessa é do blogueiro Alexander Zakharov (http://sovietposter. blogspot.com) e serve como uma dica valiosa para quem gosta de pesquisar materiais visuais sobre a produção gráfica do período do construtivismo russo.
Aos “olhos” dos buscadores Os especialistas da Brane do Brasil (www.brane.com.br) apontam
Blog do mês: Mapa Graffiti No mês passado, a
sete detalhes que podem tornar seu site oculto aos “olhos” dos
coleção “Técnicas de
mecanismos de busca:
Criação” abordou as
1) Introdução: criação de página de entrada antes da home page;
características envolvidas
2) Flash: áreas de conteúdo e menu criados em Flash;
para a concepção de
3) Desenho: layout em frames, efeitos de transição e inserção de
projetos baseados no
imagens sem inclusão de textos explicativos;
Graffiti/Stencil. Dando
4) Navegação: informações ocultas ou mal posicionadas;
continuidade ao assunto,
5) Conteúdo: sucinto e sem derivações a respeito de cada tópico; 6) Contato: sem telefone e e-mail ou difícil de serem encontrados; 7) Atualização: informações antigas e “pobres” em conteúdo.
a indicação deste mês abre espaço para esta arte urbana efêmera, com o Mapa Graffiti (http://mapagraffiti.blogspot.com), que pretende “mapear e perpetuar o graffiti que se faz no Brasil”. Conhece algum blog
Livro do mês
interessante focado em design e criação? Então, mande sua dica
Título: Tipografia Elementar
para redacao@arteccom.com.br.
Autor: Iwan Tschichold Editora: Altamira Editorial (www.altamiraeditorial.com.br) “Este livro é um documento histórico, que marca um período de produção
Agenda de eventos
intelectual intensa sobre o tema. Escrito e organizado pelo tipógrafo e designer
07 a 09/11 - Dia Mundial da Usabilidade - Rio de Janeiro (www.wudrj.com.br)
alemão, Iwan (Jan) Tschichold, ele apresenta as teorias e as
10/11 - 1º Workshop de Arquitetura de Informação, Acessibilidade &
intenções do movimento conhecido como Nova Tipografia, iniciado
Usabilidade - São Paulo (www.infinitodigital.com.br/Workshop)
na Bauhaus, em 1923. Como aponta Alexandre Wollner, no prefácio
10/11 - 12º EWD - Porto Alegre (www.arteccom.com.br/encontro)
do livro, esta foi ‘a primeira manifestação de ruptura dos novos movimentos de vanguarda, desenvolvendo a consciência do uso da tipografia aplicada à produção de livros’. Dentre os dez objetivos da Tipografia Elementar, Tschichold aponta que a nova tipografia é funcional e a função de toda tipografia é a comunicação (cujos meios ela representa). Portanto, uma leitura fundamental para quem procura se aprofundar na história da tipografia.”
Participe do Post-it! Envie sugestões para redacao@arteccom.com.br.
12/11 - IGF 2007 - Rio de Janeiro (www.igfbrazil2007.br) 08/12 - 12º EWD - São Paulo (www.arteccom.com.br/encontro)
12 :: portfólio agência - Jazzz
Jazzz:
improviso e liberdade como fontes de inspiração Quando o Jazz se torna o assunto de uma conversa entre amigos, certamente as palavras “improviso” e “liberdade” serão utilizadas para descrever a magia que envolve este segmento musical. Então, ao escutar o trabalho realizado pelo músico Miles Davis, em “Kind of Blue”, tais definições irão se materializar até aos ouvidos daqueles mais céticos. Em Recife, inspirados por tal essência, a Jazzz Soluções em Design (www.jazzz.com.br) vem buscando desenvolver projetos que garantam um crescimento sustentado no mercado interativo nacional. “A agência nasceu da junção de três profissionais nas áreas de design e programação na plataforma web. Esse grupo já tinha projetos realizados em comum. Foi quando surgiu a idéia da união de conhecimentos e experiências em prol de um empreendimento na área de webdesign e programação visual. Em relação ao nome, ele surgiu depois de várias pesquisas de conceitos voltados ao propósito e as características dos estilos dos projetos que eram desenvolvidos. O jazz é, sem dúvida, a música mais livre do planeta. Essa conotação de liberdade de criação é aplicada ao nosso trabalho diariamente”, afirmam Eduardo Padrão e Fradique Filho, músicos e sócios da agência. A aproximação com o meio musical, inclusive, serve como estímulo ao trabalho criativo da Jazzz. “Nossa criação parte de reuniões informais em conjunto com a equipe envolvida no processo. Outro ponto é o horário. Geralmente à noite, pelo fato de ser um horário fora do expediente, facilita a concentração, pesquisa e desenvolvimento. Alguns brainstorms são feitos em locais fora do ambiente de trabalho, de maneira também informal. Outro detalhe importante para estimular a criação é o fato de a equipe fazer parte de um meio social em Recife que envolve artistas plásticos, músicos, grafiteiros, poetas, artistas gráficos, empresários etc. Constantemente existe uma troca de informações que sempre ajuda a oxigenar a criação”, revelam. Assim, nas próximas páginas, vamos conferir um pouco do resultado das influências conceituais do jazz aplicadas no trabalho da agência.
portfólio agência - Jazzz :: 13
- Jazzz Soluções em Design
- Grupo Auto Mais
Tecnologias: Actionscript + AJAX + Flash + MySQL + PHP Tecnologias: Actionscript + AJAX + Flash + MySQL + PHP www.jazzz.com.br
www.grupoautomais.com.br
Para fugir do famoso ditado popular “casa de ferreiro,
Para ganhar espaço no mercado, Eduardo e Fradique
espeto de pau”, que parece assombrar muitos profissionais
revelam que um dos grandes filões da Jazzz foi tentar suprir
e empresas do segmento, a Jazzz procurou caprichar na
a necessidade de mercados específicos, criando produtos
criação e no desenvolvimento de seu próprio site.
on-line que facilitassem a pré-venda de serviços.
“Fomos o nosso cliente mais exigente. Partindo des-
A tática deu certo e o Grupo Auto Mais, uma associa-
te preceito, vimos a necessidade de incorporar a alma
ção de vendedores de veículos de Recife, se tornou um dos
do jazz na composição do nosso portfólio”, explicam
principais clientes da agência. A proposta era desenvolver
Eduardo e Fradique.
um ambiente onde fossem divulgados os veículos e as pro-
Dessa forma, a navegação pelo site é sempre acom-
moções de financiamento.
panhada por uma animada banda de jazz. “Ela, que está
“Nossa idéia foi fazer um site com característica de
presente em todas as seções, representa de maneira
um pequeno portal, onde os vendedores pudessem atua-
lúdica os conceitos de harmonia, trabalho em equipe e
lizar suas ofertas de veículos e estoque semanalmente e,
criatividade. Quatro bonecos semelhantes representam
além disso, acentuar sua relação com o cliente através de
objetivos em comum. A brincadeira com a banda faz re-
uma pré-venda direta pelo site. O comprador facilmente
ferência à harmonia criada pela qualidade individual de
pode enviar uma mensagem com sua oferta para o celular
cada integrante tocando seu instrumento. Uma estrutura
do vendedor através do site. Esteticamente o site deveria
simples e objetiva focada no portfólio”.
ser simples, pois a informação que merecia maior destaque eram as fotos e os preços dos carros”.
14 :: portfólio agência - Jazzz
- Alex Corezzi
- Solver
Tecnologias: Actionscript + AJAX + Flash + MySQL + PHP
Tecnologias: Actionscript + AJAX + Flash + MySQL + PHP
www.alexcorezzi.com
www.solver.com.br
C o m o n ã o p o d e r i a d e i x a r d e s e r, d e n t r e s e u s
A realização de um bom trabalho acaba sendo chama-
principais cases, a agência aponta o trabalho desenvolvido
riz para o surgimento de outros. Parece um velho chavão,
para o jazzista pernambucano, Alex Corezzi. “Ele precisava
mas é sempre bom reforçar determinadas histórias. No
expor seu material na web e nada mais óbvio que procurar
caso da Jazzz, o desenvolvimento de uma tela de login,
a empresa chamada Jazzz para desenvolver seu material.
animada em Flash, e uma marca impactante para um pro-
O cliente não possuía material gráfico como referência.
duto comercializado pela Solver resultaram no início de um
Assim, nos deixou livre para criar. Procuramos várias
ótimo relacionamento.
referências estéticas na linha do jazz clássico”.
O próximo passo seria a criação do website da empre-
Para atingir tal objetivo, a criação optou por uma
sa. “O objetivo era ter um site clean, com as informações so-
combinação cromática (azul e preto) que desse ao site,
bre produtos e serviços, dispostas de maneira clara e direta.
ao mesmo tempo, um ar clássico e um clima intimista
Seu público potencial são executivos de grandes empresas
dos pubs de jazz. “Mas, para fugir um pouco do clássico,
que necessitam de gestão de performance. Nossa sugestão
inserimos um pentagrama com notas musicais por cima das
foi desenvolver um ambiente totalmente atualizável, através
fotos, ramificando tomadas e cabos, fazendo referência
de um sistema de gerenciamento on-line. Dessa forma, a
a experimentações eletrônicas, já que o músico não se
Solver conseguiu promover seu produto e sua empresa de
prende só ao estilo tradicional do jazz”.
maneira dinâmica”.
O u t ro d e t a l h e e s t á p re s e n t e n o s a s p e c t o s q u e
Um aspecto interessante deste projeto envolvia uma
acabaram por definir a escolha do Flash como tecnologia
das principais exigências do cliente. “Eles queriam, logo
de navegação. “A idéia era dar mais interatividade e
na home, que o usuário identificasse os pilares da empresa
movimento, instigando o usuário a conhecer o site. Em
(integração, visualização e gestão da performance). Assim,
algumas seções do site foi inserido um gerenciador para
sugerimos um Flash com Actionscript, onde os conceitos
que o músico pudesse atualizar seus links, agenda de
dos pilares foram bem descritos, utilizando pouco texto,
shows e notícias”.
porém decisivo, e um Flash suave que tornou a composição da página bem equilibrada”.
portfólio agência - Jazzz :: 15
- Vamoz Tecnologias: Actionscript + AJAX + Flash + MySQL + PHP www.vamoz.net
A ligação da agência com a cena musical de Recife transparece no trabalho realizado para a banda Vamoz. Na época, eles iriam lançar o segundo “CD + DVD” e precisavam ampliar a divulgação do seu material. “O fato de dois membros da Jazzz serem músicos facilitou os primeiros contatos e fez com que acreditássemos no material da banda e aceitássemos uma parceria para fortalecer a cena musical pernambucana”, contam Eduardo e Fradique. Além disso, a possibilidade de desenvolver um trabalho experimental era outro fator de atração do projeto. “Ficamos livres para aplicar alguns recursos de Flash, estudar melhores formas de gerenciamento de conteúdo e tentar com isso superar a expectativa do pessoal da banda. O material do encarte do CD já estava pronto e o melhor, com um visual bastante interessante. Nele, estava aplicada a imagem de uma mulher fumando. Assim, resolvemos colocar fogo no site, fazendo uma brincadeira com Flash. A partir disso, conseguimos unir aquele visual a um planejamento bem estruturado”.
18 :: portfólio freelancer - Luci Hidaka
- Flip DJs Contato: lmhidaka@gmail.com Site: www.lucihidaka.com
Tecnologias: Flash + XML www.lucihidaka.com/flipdjs
Criação aguçada pelos sentidos A sinergia entre as peculiaridades do interior e a agitação dos grandes centros urbanos parece ser uma experiência válida na carreira de qualquer profissional. Um bom exemplo deste cenário está presente na caminhada de Luci Hidaka. “Sempre gostei de artes em geral. A princípio, me interessei pelo curso de Design por causa da aula de Fotografia. Fiz faculdade na Unesp de Bauru e depois voltei para São Paulo para trabalhar. Comecei em estúdios pequenos de design. Hoje, trabalho em agência de publicidade”, revela. Outra característica fundamental é procurar aguçar os sentidos como fonte de estímulo ao processo de criação. “No meu caso, procuro ler, observar, ouvir e experimentar. Não tenho influências específicas. Meu trabalho é resultado de tudo que já vi e vivi. Sempre curti muito estudar e apreciar história da arte, semiótica, cinema, grafitti, literatura e música”, diz. Isso serve de lição, principalmente, quando falamos daqueles momentos no qual a criatividade parece ter ido embora, resultando em um total bloqueio para a realização de qualquer trabalho. “Nestes momentos, começo a fazer analogias em torno do tema do projeto (pela forma ou conceitualmente) até chegar em algo mais concreto”. Luci conta ainda que a música, a leitura e os jogos têm servido como uma ótima maneira de buscar o relaxamento necessário. “Quase não pratico esportes. Às vezes consigo, mas dura três meses seguidos, no máximo. Gosto de ler, estudo contrabaixo, toco em banda com amigos e meu marido, produzo música eletrônica (www.alreves. org), jogo baralho e Nintendo”. Como dica para quem pretende incrementar um portfólio, ela ressalta a importância na escolha dos projetos que irá participar. “É bom ir para agências que possuam clientes/projetos que você vai ter prazer em trabalhar, pegar frilas pensando no portfólio. Em termos de diferenciais, procure ser ousado, antenado em diversas áreas (não só do design). Quanto mais você ler, ver, conhecer,
Na edição de junho, quando falamos sobre o tema “projetos experimentais”, citamos alguns casos de trabalhos desenvolvidos para amigos como uma boa maneira de se incluir projetos em um portfólio, além da liberdade para se testar novos conceitos e linguagens. No caso de Luci, a amizade com um dos integrantes do coletivo Flip DJs (que não existe mais) acabou resultando no desenvolvimento de um case interessante. “Como tocava techno como DJ, e vivi muito neste meio (festas e afins), já possuía referências suficientes para criar”, relata. Outro detalhe interessante envolvendo este projeto está na concepção do trabalho em dupla. “Foi meu marido quem animou e programou o site. Fazemos dupla com freelancers: eu atendo o cliente e faço layout; ele anima e programa”. Em relação ao design da interface, a idéia era reproduzir o ambiente do mundo techno. “Tentei fazer com que a linguagem fosse mais sonora possível e condizente com o som que eles produzem: quadrado (techno), as cores são referências a leds, clubes, noite e música eletrônica”, diz. Assim, ao acessar o site, o usuário se depara com uma interface que simula um eqüalizador. “Conforme ele vai movimentando o mouse pela tela, sons são produzidos. Inclusive, no mouseover do texto, ondas (visualmente sonoras) são produzidas com as palavras. Tudo é interativo e tem som”, finaliza.
fazer, mais você terá fontes para criar”. Para participar desta seção, cadastre seu portfólio no site da revista: www.revistawebdesign.com.br.
20 :: portfólio ilustração - Rômolo Eduardo
Rômolo Eduardo www.romolo.com.br
Wd :: Como define seu estilo e onde você busca as referências para o seu trabalho? Rômolo :: Meu estilo ainda está em processo de transformação. Sou novo na área, mas posso dizer que a minha principal base foi o quadrinho underground produzido na década de 80. Entre vários autores que gostaria de citar, vou dar destaque ao material de Crumb, Jano, Miguelanxo Prado, Aragonés e Angeli... Certamente, foram fortes influências para meu traço. Há algum tempo, me desprendi (um pouco) dos quadrinhos e me foquei, em parte, no cotidiano deste urbanismo desenfreado e sem planejamento que modifica a paisagem. Grandes centros urbanos caóticos e asfaltados são grandes fontes de inspiração.
S é r i e d e t r ê s a n ú n c i o s d e re v i s t a ( 2 0 0 7 ) Cliente: Cocamar / Agência Heads M a t e r i a l u t i l i z a d o p a r a c o m p o s i ç ã o : “ P ro d u z i d o n o e s t ú d i o O p e n t h e d o o r com lápis, pincel, nanquim, texturas e computador”
“Quelquefois...” (2007) C l i e n t e : P ro j e t o a u t o r a l Material utilizado para composição: “Lápis, pincel, nanquim e computador”
O b s e r v a ç ã o : a i m a g e m q u e i l u s t r a o f u n d o s e c h a m a “ M e s p e t i t s d i a b l e s ” ( 2 0 0 7 ) , p ro j e t o a u t o r a l d e R ô m o l o E d u a rd o .
22 :: Técnicas de Criação - Ilustração vetorial
C O L E Ç Ã O
Técnicas de Criação - Ilustração vetorial :: 23
Técnicas de criação - Volume 3: Ilustração Vetorial Unindo a criação de trabalhos manuais com processos digitais Unir a expressividade, a gestualidade e a habilidade
Numa entrevista especial, você vai conferir as prin-
do traço feito à mão livre com as inúmeras possibilidades
cipais etapas envolvidas na construção de ilustrações
que o computador proporciona em termos de acaba-
vetoriais, além das vantagens no uso de tablet e a im-
mento e refinamento de uma imagem para se atingir o
portância da pesquisa. Em seguida, é possível apreciar
máximo de qualidade em um projeto gráfico.
o trabalho de alguns profissionais na área, finalizando
Talvez essa seja a perfeita tradução quando falamos dos processos de criação concebidos através da combi-
com um passo a passo para o desenvolvimento prático de imagens vetoriais.
nação das técnicas manuais e tecnológicas. Cada qual
Além disso, esta edição contribui com a divulgação
com sua essência e sua história, contribuindo para a evo-
de um segmento das artes gráficas no qual assistimos o
lução do conhecimento baseado na percepção visual.
surgimento de um estilo genuinamente brasileiro, que vem
Para entendermos como se materializam tais processos,
encantando o mercado internacional. De Glauco Diogenes
vamos conhecer, no último volume da coleção “Técnicas de
ao Estúdio Colletivo, uma nova vanguarda do design na-
Criação”, os detalhes e as particularidades existentes para a
cional vem se consolidando, trazendo novas idéias e boas
concepção de projetos de Ilustração Vetorial.
perspectivas para o futuro deste mercado no país.
24 :: Técnicas de Criação - Ilustração vetorial
Traços e nuances com
identidade brasileira Dos gibis, passando pela arte japonesa, culminando
Glauco :: Na verdade, sempre gostei muito de ilus-
com a expressividade dos principais movimentos das artes
trar, desde bem pequeno incentivado indiretamente por
contemporâneas. Bebendo de fontes tão distintas e absor-
meu pai que sempre que podia comprava um “gibi” (HQ)
vendo antropofagicamente suas influências, o designer e
quando chegava do trabalho. Na adolescência, fiquei vi-
ilustrador Glauco Diogenes (www.glaucodiogenes.com.br)
drado em videogames e acabei deixando um pouco de
desenvolveu uma identidade tão forte para seu traço, que
lado. Entrei na faculdade de design, também por causa
hoje recebe o merecido reconhecimento.
dos games, e foquei no lado artístico, pois acreditava que,
Além disso, ele reforça seu talento ao desenvolver pro-
quanto mais domínio técnico do desenho, mais precisão e
jetos para os mais diversos segmentos do design (gráfico,
qualidade formal eu teria na concepção e produção do meu
de produto e de moda). Nesta entrevista, Glauco nos conta
design, principalmente na construção de logotipos, que é
detalhes de sua trajetória profissional, além de analisar as
meu forte e o que tenho feito bastante também.
principais características envolvendo a Ilustração Vetorial.
Meu interesse em ilustração vetorial surgiu de forma
Wd :: Em junho, quando definimos a linha concei-
natural, à medida que passei a dominar os softwares espe-
tual da Coleção “Técnicas de Criação”, você nos revelou
cíficos. Sempre que sobrava um tempo praticava com as
que costuma classificar seu trabalho “...como um ‘Neo-
ferramentas e percebi que dali poderia extrair algo bacana.
realismo vetorial’: utilizo técnicas de construção da
Não tinha nenhuma referência de outros profissionais es-
ilustração baseado na arte realista, com uma cara con-
pecializados da época (meados de 2000), mesmo porque
temporânea (grafismos, cores, composição etc.)”. Como
havia pouquíssimos e a internet ainda estava na fase do
surgiu seu interesse pela ilustração vetorial?
HTML. Tínhamos um ou outro site feito em Flash e portais referenciais, que hoje tem aos montes, praticamente não existiam. Comecei, então, a produzir por hobby e a coisa foi tomando forma e importância como uma outra expressão do meu trabalho.
“O fato de você poder rotacionar, repetir, deletar, cropar, unir e trabalhar a forma do jeito que quiser, facilita e muito na hora de compor a parte estética como um todo”
Técnicas de Criação - Ilustração vetorial :: 25
“O software e o computador devem ser o último estágio do processo de qualquer projeto criativo”
Pôster “Clandestina Liberdade”
Wd :: Ainda nesta conversa, você nos dizia que o principal suporte de seu trabalho são os softwares de
e não meio. Neste ponto que a grande maioria de novos designers ou estudantes acaba se perdendo.
ilustração vetorial, mas que estava aprimorando o tra-
Cada dia mais me esforço para fazer disto uma regra.
balho à mão também. Pensando nisso, como atingir um
Quando passei a utilizar os softwares foi também para su-
equilíbrio quando pensamos nos processos manuais e
prir algumas deficiências técnicas que ainda tinha com a
tecnológicos disponíveis para concepção de uma ilus-
ilustração feita exclusivamente “à mão”, além de obter
tração vetorial?
uma maior precisão e agilidade na produção das ilustra-
Glauco :: O software e o computador devem ser o
ções e projetos em design gráfico. Para mim, o equilíbrio
último estágio do processo de qualquer projeto criativo.
está aí, por mais precisão que você tenha na utilização das
É inegável a sua contribuição para o surgimento de novas
ferramentas e softwares é óbvio que dificilmente vai con-
linguagens e possibilidades que desfrutamos hoje em dia,
seguir reproduzir com fidelidade a gestualidade e algumas
mas pode-se perceber que os grandes projetos digitais,
nuances de traço que você tem fazendo-as naturalmente. O
sejam ilustrações, sites, motion graphics etc., têm sempre
ideal é tentar conceber a ilustração quase que de maneira
um embasamento conceitual e artístico muito bem amar-
completamente manual e utilizar o software para corrigir
rados. Nestes casos, o computador é quase sempre fim
possíveis imperfeições, adicionar detalhes pertinentes e
26 :: Técnicas de Criação - Ilustração vetorial
“arte-finalizá-la”. Nem sempre os prazos permitem todo esse processo, mas seria o ideal.
“Sou um ‘obcecado’ por detalhes, adoro ficar revendo
Wd :: Do início da sua carreira ao momento atual, é possível perceber uma evolução do traço de suas ilustra-
o desenho e encontrando,
ções. Quais foram as principais influências e referências
eliminando imperfeições e
para que você desenvolvesse o estilo que seus trabalhos atuais apresentam?
refinando micrografismos”
Glauco :: Inicialmente, o estilo e foco das minhas ilustrações tinham como base os cartoons americanos, e releituras
fontes clássicas. Gosto muito de Klint, Van Gogh, Picasso,
de arte japonesa e mangá das décadas de 50, 60 e 70. No
Dali e Kandinsky. Estudo muito sobre a Vanguarda Russa,
entanto, quando trabalhei na Playboy, em 2004, me “deram”
Rodchenko e Klutsis. São verdadeiros deuses gráficos.
uma matéria em três duplas sobre internet que foi um divisor
Wd :: Dando uma olhada nas fotos do making of en-
de águas. Passei a fazer mais ilustrações para toda a Editora
volvendo um dos seus últimos trabalhos, realizado para
Abril e especiais do selo Superinteressante, onde conheci a
a exposição Absolut Brasil (www.absolutbrasil.com.br),
linguagem de infografia com um mestre que é o Luís Iria.
é possível perceber que seu processo de criação se inicia
Isso me ajudou muito do ponto de vista técnico e abriu
no papel, com um esboço da imagem sendo preparada
novas possibilidades estéticas que utilizo até hoje. Daí para
com lápis ou caneta, para depois ser aprimorado no com-
migrar o estilo para outros mercados como televisão, in-
putador. Diante de sua experiência, você poderia nos
ternet, publicidade foi um pulo. Minhas maiores fontes de
apontar as principais etapas envolvidas na criação de
inspiração, acredito que sejam as mesmas de outros ar-
uma ilustração vetorial?
tistas contemporâneos. Porém, estou “bebendo” muito de
Glauco :: Tive um professor de ilustração, no terceiro
Ilustração base Cow Parade Rio
Técnicas de Criação - Ilustração vetorial :: 27
ano da faculdade, que era um monstro de tão bom. Ele
em determinada época, qualquer lojinha de esquina tinha
tinha uma frase que eu guardo até hoje: “toda idéia nasce
um trabalho dele reproduzido e mal impresso.
pobre, o que enriquece é o processo”. Guardei aquilo para
É aquela coisa meio vigarista do “idéia boa não tem
mim quase que como um dogma e acho que é bem por aí.
dono”. Detesto essa corrente de pensamento oportunista.
Sou um “obcecado” por detalhes, adoro ficar revendo o
Quer dizer, parece que vale tudo, o cara que se esforçou
desenho e encontrando, eliminando imperfeições e refi-
para desenvolver um estilo, um trabalho, uma técnica vê
nando micrografismos.
isso subfragmentado em outros trabalhos, até chegar em
No caso do projeto para Absolut foi mais ou menos assim que aconteceu: o mote do projeto era Brasil. Então,
vinhetas de programas de TV de quinta categoria ou sacolinhas plásticas de supermercado ou na lojinha da esquina.
decidi retratar os bonecos de Olinda, e detalhes carnava-
Wd :: Falando em traço, quais seriam os principais
lescos, do Frevo e outras correntes folclóricas culturais
estilos de traços existentes para a criação de uma ilus-
do Brasil em uma estética Toy Art, que para mim é um
tração vetorial?
movimento bacana, com personagens bem engraçados,
Glauco :: Acho que você pode fazer o que quiser com
mas que, comparados com o Curupira, o Boitatá e o Saci
vetores, seja para aprimorar um determinado estilo de
Pererê, não chegam nem perto.
traço, seja para reproduzir um formato mais clássico, de-
O potencial gráfico e estético desses personagens
pendendo da forma como você utiliza a ferramenta e que
é muito pouco aproveitado por nós designers e ilustra-
tipo de auxílio você tem para colorir, gerar texturas etc.
dores brasileiros. O único que fez um bom trabalho nessa
Os critérios de estilo e definição são totalmente flexíveis e
área foi o Ziraldo, há muito tempo com a turma do Pererê.
definidos por você, de acordo com cada projeto.
Fiz uma pesquisa de imagens absurda, com livros, ví-
Wd :: Na concepção de um projeto gráfico, a pes-
deos, fotografias e, claro, Google Images. Defini algumas
quisa é uma das etapas fundamentais para a construção
características relevantes e tracei a mão cada um dos per-
de uma base sólida que auxilie no desenvolvimento do
sonagens. Depois digitalizei-os e retracei no Freehand,
trabalho. Como você insere esta etapa em seu processo
utilizei o Photoshop para colorir e um pouco de barro,
de criação?
galhos de árvores para fazer a textura de fundo que ficou
Glauco :: Para mim, o processo de pesquisa é, pelo
bem bacana e deu uma característica mais natural, mais
menos, 35% de todo trabalho, exatamente para poder pro-
artesanal ao trabalho.
duzir algo diferenciado, distante de modismos e tendências
Wd :: Ainda sobre o processo de criação, alguns
de estação, além de solidificar um posicionamento, um es-
profissionais já iniciam sua produção diretamente no
tilo, uma linha de condução que realmente qualifique e
computador. Quais seriam as principais diferenças de
fidelize a proposta inicial apresentada ao cliente nas pri-
uma ilustração vetorial iniciada com o traço feito à mão
meiras reuniões.
livre daquela concebida diretamente no computador?
Claro que ocorrem ajustes à medida que o trabalho vai
Glauco :: Se pudesse definir com uma palavra, diria
fluindo e é perfeitamente natural que determinados deta-
que é a “Alma”. O trabalho fica fluído, tem mais “molejo”,
lhes se adequem sempre visando uma melhora. O tempo de
não fica com “cara de enlatado”, datado e/ou mesmo
pesquisa e pré-produção não deveria ser inferior a 35% do
“copiado”. Hoje, você abre uma revista Computer Arts
tempo total do projeto, 15% com pré-produção e ajustes e
ou alguma do gênero e todo mês tem algum artigo, ou
o restante sim para a produção, arte-final, aprovação e/ou
novo talento, com ilustração feita por computador com
correções pontuais. Essa é uma equação bem razoável e
grafismos e elementos de composição idênticos ao do
que tem trazido bons resultados, pelo menos para mim, rola
mês passado. É uma loucura! Isso aconteceu com o Jason
bem, e tem tornado os trabalhos mais prazerosos.
Brooks (ilustrador britânico). Ele é o maior exemplo disso:
Wd :: Quais são os materiais e as ferramentas que
28 :: Técnicas de Criação - Ilustração vetorial
você utiliza nos trabalhos envolvendo uma ilustração ve-
dá para ficar ensaiando muito, você tem que ter algo para
torial? E quais indicaria como os mais adequados?
fazer, um prazo e configurar ela com os níveis de pressão,
Glauco :: Varia muito de projeto para projeto. Faço,
sensibilidade e velocidade que melhor se adequem a sua
pelo menos, cinco estilos diferentes de ilustração só com o
necessidade e literalmente “se jogar”. Vale a pena ficar
“vetor cru”, como costumo chamar os trabalhos sem uso do
brincando e fazendo figuras, testando espessuras com a
Photoshop e outros softwares de apoio para acabamento.
ferramenta de lápis etc., mas só um trabalho para garantir
À medida que o tempo foi passando e a complexi-
a “transição definitiva”, digamos assim.
dade dos projetos aumentando, fui implementando o uso
Hoje, não consigo usar o mouse para mais nada, é
de novas técnicas e adequando ao meu traço. Hoje, uti-
muito mais uma questão de costume. Depois, voltei para o
lizo variações de texturas, colagens, fotocomposição com
Brasil e ainda trabalhei um tempo sem, mas sentia que po-
gráficos vetoriais integrados, tinta, lápis de cor, enfim,
deria obter ainda mais qualidade e técnica no traço, então
dependendo da característica, procuro utilizar a maior
comprei uma formato A3, que é ótima. O problema é a
quantidade de recursos disponíveis para cada trabalho.
caneta, como uso muito, 12-14 horas por dia, em média, é
A base vetorial construo no Freehand que, para mim,
sempre bom você ter uma reserva.
foi o melhor software vetorial criado até hoje. Se você
Wd :: Uma questão fundamental envolvendo a ilus-
puder combinar Freehand, Photoshop e Painter em alto
tração vetorial está presente na aplicação dos conceitos
nível tem tudo para sair algo bastante razoável.
de harmonia e proporção. Como você procura trabalhar
Wd :: Ainda sobre as ferramentas, o tablet torna-
estes dois conceitos em seus projetos?
se um elemento importante dentro do processo de
Glauco :: Hoje em dia, esta fase do projeto eu já defino
manipulação digital da ilustração. Para o profissional
manualmente e com os raffs antes de digitalizar e transportar
acostumado com o mouse, quais seriam as principais di-
o desenho para o computador. Porém, o fato de você poder
ficuldades para dominar seu manuseio? Como foi o seu
rotacionar, repetir, deletar, cropar, unir e trabalhar a forma do
processo de adaptação?
jeito que quiser, facilita e muito na hora de compor a parte
Glauco :: É verdade, as tablets hoje em dia estão cada
estética como um todo.
vez mais modernas e próximas de uma realidade física na-
É óbvio que você pode usar critérios técnicos, matemá-
tural. É impressionante o quanto os fabricantes evoluíram
ticos, geométricos e todos os recursos que as regras artísticas
em pouco tempo. Acho que o segredo é você simplesmente
disponíveis te permitem, mas, à medida que o tempo vai
pegar o mouse e jogar no lixo (risos), brincadeira!
passando, basta uma olhada e você consegue perceber que
Mas foi mais ou menos assim que aconteceu comigo. Estava em Barcelona, fazendo uma ilustração para um
determinada forma está desequilibrada três milímetros e que isso está afetando a ilustração como um todo.
cliente e, de repente, o mouse simplesmente “morreu”.
É engraçado, porque, vira e mexe, brinco com meus
Estava na casa de um amigo. Ele só usava tablet e o prazo
assistentes, batendo o olho e dizendo: “ó, tá torto aí, braço
de entrega do trabalho era só mais um dia. Quase morri,
duro (risos)”. Às vezes, erro também, mas é bem difícil. Ge-
era um domingo, por volta das 18 horas. Confesso que não
ralmente, quando você usa as ferramentas de correção, já
gostava nem um pouco de usar a caneta. Não tive dúvidas:
percebe e torna-se um vício.
peguei a tablet reserva e comecei a fuçar e configurar o mais rápido possível.
Wd :: Dentre as últimas etapas de criação de uma ilustração, o profissional vai dedicar parte de seu tempo com
Tive dificuldades, principalmente na empunhadura,
os processos de refinamento e acabamento. Quais dicas
que ainda é um pouco distante de um lápis ou pincel, mas
você daria para que esta etapa seja realizada com sucesso
depois de umas oito horas já estava bem mais habituado,
e não comprometa o resultado final do trabalho?
e consegui entregar a tempo (risos). Mas é bem por aí, não
Glauco :: Esta pergunta é importante. O refinamento
Técnicas de Criação - Ilustração vetorial :: 29
“O ideal é você pensar a sua ilustração como um ‘quebra-cabeças’ e não como ‘fatias’, como no caso das camadas”
mento do mercado internacional. Como um dos principais representantes deste movimento, você acha que já é possível apontar um estilo de ilustração vetorial genuinamente brasileiro? Glauco :: Obrigado pelos comentários. Realmente, e finalmente, os brasileiros têm se destacado de uma forma bastante positiva dentro do cenário internacional. Isso se deve exatamente pelo fato de não nos limitarmos a seguir
é um dos elementos que determinam o sucesso do resultado final do trabalho. Então, o ideal é você pensar a sua ilustração como um “quebra-cabeças” e não como “fatias”, como no caso das camadas. As layers são importantes e devem ser usadas também, mas geralmente, neste tipo de projeto, você utiliza máscaras e determinados efeitos específicos que se estiverem agrupados, e/ou mesmo dentro de uma única layer, podem dar “pau” no caso de impressões offset e/ou alteração de cor e forma quando transportados para o Photoshop. Por exemplo: imaginemos uma ilustração de um homem. O ideal é que você separe cabeça, tronco e membros, dependendo da complexidade e detalhamento, até as falanges de dedos e outras articulações. É bem maçante, para dizer a verdade, e desanimador às vezes, mas, com certeza, o resultado é bem melhor e você corre menos riscos do ponto de vista técnico e estético. Wd :: Existe alguma particularidade na aplicação de uma ilustração vetorial em projetos voltados para mídias interativas? Glauco :: Basicamente não, a não ser, é claro, que estas sejam animadas e que tipo de animação será feita: se por máscaras ou frames, se for para web, se a animação vai se dar via Actionscript. Você deve determinar as áreas e construir de uma forma separada, como no exemplo acima, mas o processo construtivo para uma ilustração normal é basicamente o mesmo, você pode inclusive bolar as cores vetoriais em CMYK, caso tenha dificuldade em criar em RGB, e depois exportar. No caso do Freehand, dar um “cut and past” direto na tela do Photoshop e finalizar as cores direto lá. Wd :: A qualidade da nova geração de ilustradores brasileiros vem recebendo um grande reconheci-
modismos e estéticas de estação e realmente tentarmos imprimir um trabalho autêntico e com técnicas distintas, com uma identidade bem embasada. Não sei se há um nome ou definição apropriada para isto, só sei que ilustradores como Kako (www.kakofonia. com), Guilherme Marconi (www.marconi.nu), Rubens LP (www.fluxuscentral.com), Abiuro (www.abiuro.com), Mooz (www.mooz.com.br) e o pessoal do Colletivo (www.colletivo.com.br) são realmente diferenciados e gosto muito de ver o que eles fazem sempre que posso. Wd :: Para fi nalizar, quais conselhos você daria para o profissional que deseja se aprofundar neste segmento? Glauco :: É aquela velha receita de bolo que todo mundo cansou de ouvir, mas não tem segredo algum. Ter a paixão de um louco naquilo que faz a ponto de abrir mão de baladas, namorada, amigos, lazer e outras coisas humanas (risos). Ser ultracurioso e saber como ser curioso, estar ligado no que está rolando no mundo, em países que ninguém pensa, fora do eixo comercial: Índia, China e Tailândia são bons exemplos. Aprender vários tipos de técnicas, fazer um networking enorme, adaptar seu trabalho a vários públicos (consumidores finais) e mídias. E o mais importante: criar um trabalho que não seja refém de tendências e que tenha uma longevidade importante, para que alguém daqui a 10, 15 anos possa olhar e ainda achar interessante e pertinente.
30 :: Técnicas de Criação - Ilustração vetorial
PARA iLUSTRAR Por trás da criação de todo traço, existe uma história, uma construção, um estilo que se materializa. Dando uma olhada na qualidade de produção de alguns profissionais brasileiros, é de se entender tamanha valorização no mercado exterior.
Técnicas de Criação - Ilustração vetorial :: 31
Doug Alves www.nacionale.cc “Costumo trabalhar direto no Illustrator, rabiscando e rabiscando até chegar em algo que eu consiga visualizar os objetos que vou usar na ilustração. Depois, começo a compor com todos os elementos, até que toda a ilustração fique em harmonia.”
Espera (Barra Funda - Zona Oeste - SP)
Fashion Girl
MTV Magazine - Coca-Cola
32 :: Técnicas de Criação - Ilustração vetorial
Leo Gibran www.leogibran.com.br O acaso não vai nos proteger
“Muitas vezes, uso roughs e layouts quase incompreensíveis para desenvolver a idéia da ilustração. Na maior parte das vezes, a idéia se forma somente na minha cabeça. A partir daí, vou ‘esculpindo’ os vetores, moldando a idéia, sem saber exatamente o resultado gráfico final que vou obter. Uma série de decisões tomadas e, finalmente, a definição da imagem se dá no meio do processo. Gosto do que o acaso agrega no meu trabalho.”
Ilustra Brasil
Técnicas de Criação - Ilustração vetorial :: 33
Mauricio Pierro www.pierro.com.br
Morte Súbita
Puerco Alado
“Uso mais a ilustração vetorial em jobs de publicidade, que precisam de praticidade e velocidade para as sempre freqüentes alterações. Quando trabalhava com mouse, as ilustrações acabavam ficando perfeitinhas demais e, portanto, frias. Não havia o peso da mão do artista ali, mesmo desenhando primeiro à lápis e traçando os vetores por cima. Então, descobri que conseguia dar vida aos trabalhos vetoriais trocando o mouse pela caneta do tablet e desabilitando o sistema automático de correção de curvas do Illustrator (Pencil Tool Preferences), deixando bem aparentes as trepidações do punho, as falhas... Enfim, comecei a enxergar a mão humana ali.”
34 :: Técnicas de Criação - Ilustração vetorial
PAsso a passo Criando uma ilustração vetorial Por Carolina Vigna-Marú Ilustradora e designer, com foco maior em mídia impressa e web. Começou em 1983 em uma pequena editora, se apaixonou por livros e nunca mais parou. Em web, prefere o uso de CMS e se preocupa com SEO. Site: www.vignamaru.com.br.
Existem, basicamente, dois caminhos possíveis em
A coisa só começa mesmo a ficar interessante quando
ilustrações vetoriais. O primeiro é a criação a partir dos
adicionamos a este ponto direção e sentido. Quando
elementos primários (ponto, reta, curva, sólidos etc.). Já
temos uma linha ligando dois pontos vetoriais, podemos
o segundo, mais comum, é transformar uma imagem em
fazer desta linha uma curva.
vetorial com a utilização de um software de vetorização e só então começar a trabalhar em vetores. Vetor é uma abstração (entidade matemática, se preferir) que representa uma grandeza que, além de um número (ponto), precisa de mais informações para ser definida. As imagens bitmap são formadas por pontos (pixel), enquanto as imagens vetoriais são formadas por uma conta matemática. Então, não é difícil entender que a imagem vetorial, justamente por ser um cálculo e não de um ponto fixo, não
Para chegar a uma fi gura geométrica sólida não falta muito. Basta “fecharmos” esta curva.
perde qualidade ao ser ampliada, por exemplo. Outras vantagens são o tamanho do arquivo final e a possibilidade de alterar com maior facilidade as linhas e os preenchimentos dos objetos (cores, espessura etc.).
Voilá, temos uma figura! O pulo do gato em curvas e formas vetoriais é a tal Curva de Bézier. A Bézier nada mais é que uma curva com pontos de controle. Estes pontos controlam a direção, o sentido, e a força do ponto. A partir da Bézier e dos pontos (muitas vezes chamados de “nós”), manipulamos as ilustrações vetoriais.
Técnicas de Criação - Ilustração vetorial :: 35
O vetor é uma técnica, uma ferramenta, assim como o lápis, o nanquim ou uma tinta qualquer. Então, é comum
Quanto mais limpa estiver sua imagem original, melhor será o resultado do rastreio (vetorização).
que os ilustradores utilizem seus desenhos em outras técnicas como base. As ferramentas vetoriais contam com vários elementos básicos além do traço, como elipse/círculo, quadrado etc., para ajudar o desenhista a compor o seu desenho diretamente na ferramenta, mas isso é muito raro de acontecer, trabalhoso e o resultado normalmente fica aquém do desejado. Desenhos dependem da habilidade de cada ilustrador, por outro lado são infinitamente mais simples de tra-
Para cada imagem, existe uma confi guração ideal da
balhar em vetor, porque quem deter-
vetorização para chegarmos no resultado mais próximo o
mina o que está ou não na imagem é
possível da nossa utilização do vetor. É comum acontecer
o desenhista, ao contrário de outros
de um rastreio ficar com pouco ou com muito detalhe mas
registros como a fotografia. Justamente
com o tempo (às vezes, a tentativa/erro pode ser um bom
por ser mais complicado, vou usar aqui
professor) você vai chegar ao que considera bom para o
uma fotografia, do meu filho.
seu estilo de ilustração.
O que fazer antes de vetorizar? A primeira coisa a fazer, antes de vetorizar, é limpar as informações que não interessam, usando qualquer software de edição de imagens.
O problema de se ter muito mais detalhes (objetos, linhas, pontos etc.) do que o pretendido no resultado final é que o trabalho para chegar a um bom vetor é também muito maior. Você pode ainda escolher retirar outros detalhes da imagem.
36 :: Técnicas de Criação - Ilustração vetorial
Iniciando a vetorização
Esta etapa é muito importante por causa de um dos maio-
Escolhi usar para este tutorial o CorelDraw, que, ape-
res benefícios da ilustração vetorial: a ampliação. Observe
sar de não ser o "queridinho" dos designers e ilustradores
como uma figura com excesso de pontos amplia, em compara-
profissionais, é muito popular e provavelmente o ponto de
ção com a mesma figura com os pontos já trabalhados.
partida da grande maioria. O primeiro passo é desagrupar os objetos. Aqui, já é possível ter uma boa idéia da importância da limpeza da imagem e da escolha certa de quantidade de detalhes. Em uma imagem simples como essa foram gerados 938 objetos, que, por sua vez, possuem uma infinidade de pontos.
A função das Béziers E agora, finalmente, você descobre para que servem as Precisamos, novamente, fazer escolhas sobre o que
tais Béziers. Quando estamos trabalhando nos pontos, vários
queremos em nossa ilustração. É mais simples começar reti-
ajustes são necessários e utilizamos os tais pontos de controle
rando objetos que nosso olho considera desnecessários.
da Curva Bézier para deixar cada ponto como queremos.
Depois, precisamos excluir pontos redundantes.
Uma vez chegada à imagem vetorial limpa, trabalhada, sem problemas de pontos ou nós, toda a vasta gama de recursos se abre e podemos nos beneficiar de tudo que os vetores nos oferecem, manipulando cores, formas, tamanhos ou criando novos elementos. Temos, sem exagero, uma infi nidade de possibilidades para atingir nossa meta. Este é o momento de manipularmos as formas como, por exemplo, para fazer o sério menino sorrir.
Técnicas de Criação - Ilustração vetorial :: 37
E aí é só começar a se divertir com os elementos.
Trabalhando com as booleanas Temos também as famosas operações booleanas (interseção, soma, subtração etc.). Todos os bons softwares de ilustração vetorial possuem ferramentas booleanas. Estas ferramentas permitem que você, por exemplo, retire uma forma de outra, adicione ou fique apenas com a interseção entre elas. Dependendo do estilo que você quer para a sua ilustração, o filtro “stamp” pode ser muito útil. A partir do bitmap “limpo”, aplique o filtro para conseguir uma versão em uma única cor da sua fotografia. Siga novamente as mesmas etapas e você chegará a um desenho mais simples, o que às vezes pode ser sinônimo de melhor.
Repare como, na verdade, são poucos objetos. Lembre-se que começamos com 938 objetos e agora são apenas 19. Agora, imagine na hora em que você precisar adequar uma mesma ilustração vetorial a vários formatos, ou fazer versões com cores diferentes. Vai ser bom ter 19, e não 938, objetos.
É claro que cada caso é um caso e quem vai determinar o estilo da ilustração vetorial é o seu uso no fi nal. Um muito comum, por exemplo, é em silk-screen, o que limita em poucas (normalmente quatro) cores diferentes, porque cada cor é uma tela. Outra utilização popular é em sites feitos em Flash, que aceita importação de vetores quando não é o próprio Flash a fazer o rastreio da imagem. Entretanto, não importando a finalidade do vetor, a lógica e os conceitos são sempre os mesmos.
38 :: debate - O papel do usuário
O papel do usuário na geração de conteúdo na internet
A necessidade da criação de ambientes cada vez mais interativos acabou por revolucionar a forma de relacionamento entre as empresas e seus consumidores. Atualmente, um conceito muito em voga revela o poder do conhecimento criado coletivamente, que instiga uma produção incessante e valoriza a opinião dos usuários. Porém, como toda nova idéia, sua utilização pode sofrer algumas eventuais distorções, favorecendo apenas um lado do processo de comunicação. Pensando nisso, convidamos alguns profissionais para analisar a seguinte questão: o conteúdo gerado pelo usuário em um site estimula a participação efetiva no ambiente ou busca apenas estreitar a afinidade com uma marca?
debate - O papel do usuário :: 39
da iran esid aM e Pr lett ora d Riso a br nd om. ia-fu m.c Sóc com d d w.a ww
d ente
a Ad
dco
mm
“A idéia de que um usuário está investindo seu precioso tempo gerando conteúdo para um determinado site está implicitamente ligada ao fato de existir entre ele e aquele ambiente uma afinidade de alto nível. De outra maneira este tipo de relação não teria como se estabelecer. Este tipo de ‘parceria’ só se dá exatamente pelo ‘pacto’ que se forma entre dois interesses complementares. De um lado a marca em busca de diferenciação, share of mind e múltiplas interações com seu target. Uma constante espiral de busca exaustiva por dar ao seu foco (o público) uma boa experiência com suas informações e idéias, de se fazer entender, de ouvir e aprender (este dois últimos... Nem sempre). Do outro lado, temos o centro de todo o interesse do mercado, uma pessoa que tem o bem preciosíssimo: tempo. E ela está interessada em ‘doar’ esse tempo e, muito mais do que isso - o seu conhecimento, as suas experiências, a sua disponibilidade -, em forma de conteúdo para essa marca. Esse é o ponto alto da Web 2.0 exatamente porque consegue elevar o nível de troca para um lugar muito mais precioso para as duas pontas. A recompensa é muito boa para os dois lados. O que me faz pensar que as marcas terão cada dia mais o DNA do consumidor. E de maneira mais ágil. Estarão numa experiência mais próxima com ele e, no entanto, estarão (dependendo de como os empresários lidarem com isso) longe dos donos até agora efetivos. A participação do usuário desnuda a cada dia mais as marcas e uma das formas dele explicitar essa estreita relação é exatamente ajudando a produzir conteúdo para, com e a partir delas. O que, no final das contas, é construir o mundo com a própria cara.”
“As marcas terão cada dia mais o DNA do consumidor”
40 :: debate - O papel do usuário
Gilberto Jr Designer de interface e criador da desta.ca
“Há iniciativas de conteúdo gerado pelo usuário que estimulam realmente a
é explicitamente criado pelo usuário”
gerado pelo usuário não se limita àquilo que
“É bom lembrar também que conteúdo
http://desta.ca
participação. Há outras que buscam apenas estreitar a afinidade com a marca. O modelo de ‘conteúdo gerado pelo usuário’ em si não leva a uma coisa nem outra. Creio que a primeira ação de publicidade que aproveitou a participação do consumidor no Brasil foi o Fale BenQ, criado pela 10’Minutos. Era um hotsite no qual os usuários eram desafiados a enviarem um vídeo dizendo ‘BenQ’. O desafio era apresentar para o mercado brasileiro a maneira correta de se pronunciar BenQ, marca taiwanesa de celulares que estava entrando no Brasil. Este é um caso bem claro de conteúdo gerado pelo usuário, cujo objetivo é estreitar a afinidade com a marca. Muitas pessoas que nunca haviam ouvido falar da marca participaram e alguns vídeos muito engraçados acabaram sendo criados. Mas há também ações que realmente são utilizadas para aproveitar efetivamente a participação do usuário. Um dos casos mais interessante é o IdeaStorm, da Dell. É um site similar ao digg.com, no qual usuários postam idéias de melhorias em produtos ou novos produtos da fabricante de computadores e estas idéias são aproveitadas pela empresa e implementadas. Outro caso, no qual há uma relação vital entre a marca e a participação do usuário, são os serviços cujos produtos são criados pelos usuários, como a Camiseteria, no Brasil, e o gringo Threadless. Nestes sites, o próprio usuário cria, avalia e escolhe as melhores estampas para camisetas, que depois são vendidas. É bom lembrar também que conteúdo gerado pelo usuário não se limita àquilo que é explicitamente criado pelo usuário. Há também o conteúdo implícito. Os dados de estatísticas de um site, por exemplo, são criados pelo usuário, mas sem que este perceba. Os sites de comércio eletrônico, como Amazon e Submarino, aproveitam este tipo de participação para criar serviços como ‘quem compra, isto compra também aquilo’. Enfim, há muitas maneiras de se aproveitar a participação do usuário. Cada marca deve procurar a melhor maneira de utilizar este recurso para chegar aos seus próprios objetivos.”
debate - O papel do usuário :: 41
Fabio Seixas Diretor de marketing do WeShow e sócio-diretor do Camiseteria.com http://blog.fabioseixas.com.br
que tira pro veit o do bém est ão faze ndo . Um site tam ros out os que o r faze ano tivo “É da nat ure za do ser hum a est imu lar que tod o o cole cria ndo um me can ism o par e, dad ver na á, est ário con teú do ger ado pel o usu fi l pes soa l na red e tam bém ger e con teú do. can do. Que rem os ter um per e tod os os out ros estã o colo ond s foto sas nos car colo Que rem os s poderão assistir. Essa é a sos vídeos onde mais usuário nos licar pub os rem Que . idas conhec social que mais tem pessoas . conteúdo gerado pelo usuário nida de ent re motivação social por trás do ferr ame nta de cria ção de afi dev e ser enc arad a com uma não do teú con de o açã ger A plat afor ma de idéi a é cria r uma ger a valo r par a o usu ário . A favo rece ape nas a marca e não gem rda abo a Ess ca. mar usu ário s e uma ince ntiv os nec essá rios e r par a os usu ário s, dan do os valo e egu agr que do teú con to de soas plat afor ma de com par tilha men . Mas nunca o inverso. As pes r proveito da afinidade gerada tira cia, üên seq con por e, por causa do aliar a isso uma marca que pod por causa da marca, mas sim conteúdo. Elas não fazem isso do or red ao is soa pes s çõe não estão criando rela e do valor agregado percebido. o envolvidas nesse ambiente conteúdo, das pessoas que estã rede de conexões pessoais e veito do valor agregado pela pro tirar em pod cas mar as r, es Uma vez criada a cadeia de valo principal. Suprir as necessidad dos usuários deve ser o objetivo ões ivaç mot as rir sup que r de conteúdo. É preciso entende ar.” usuários motivados a particip caso contrário não haveriam da marca deve ser secundário,
as motivações r ri p su e u q r e d n “É preciso ente bjetivo principal” o o r se e v e d s o ri dos usuá
“Acho que podemos apontar as duas opções. Acredito ser uma atitude extremamente positiva uma marca ser, vamos dizer, ‘open source’, ou seja, deixar um espaço para que a contribuição de seus consumidores influencie o conteúdo que essa marca endossa. É uma forma de criar essa afinidade entre marca e consumidor. Raphael Vasconcellos
Entretanto, acredito que o ganho para a marca é muito mais relevante na qualidade do conteúdo
Diretor Executivo de
gerado e de quem gera esse conteúdo, do que na quantidade de pessoas que aderem a campanhas
Criação da AgênciaClick www.agenciaclick.com.br
ou sites que têm essa proposta participativa. Para esse público mais próximo da marca, um site colaborativo é muito estimulante.”
“O ganho para a marca é muito mais relevante na qualidade do conteúdo gerado e de quem gera esse conteúdo”
42 :: debate - O papel do usuário
s ipação efetiva no e t n a n s i stimula a partic ? s a s o o d ário em um site e com uma marca ã ç a p i P a rtteiúcdo gerado pelo aussuestreitar a afinidade a apen O con u busc o e t n ambie
Diogo Gomes diogo@ideiainterativa.com
Sem dúvida nenhuma, estimula a participação! A grande sacada 2.0 da web é essa. Quando existe interação de forma dinâmica dentro do ambiente, não somente de um lado só da moeda, existe uma possibilidade muito maior de fidelização, ou mesmo a consolidação da participação do público na construção e manutenção deste canal.
Vencedor!
Afinal, o conteúdo se molda muito mais intensamente aos anseios de quem navega. Prêmios: 1 webcam (patrocínio: Siweb), 1 ano de hospedagem grátis (Patrocínio: PlugIn) e Consultoria de Webmarketing (Patrocínio: Acessa Host)
Daniele Cardoso dcndaniele@hotmail.com
Entendo que a afinidade com a marca é conseqüência do sucesso na produção de conteúdo pelo usuário. Um site como o Orkut é o melhor exemplo para isso. Todos usuários geram o seu conteúdo. Isso estimula sim, a participação efetiva, assim como atrai outros usuários para o mesmo ambiente. Conseqüência disso é
2º lugar
a satisfação. O Orkut, ainda como exemplo, é uma nova forma de publicação, antes esses serviços estavam fragmentados em Fotolog, Hotmail e outros. Hoje se reúne em uma só empresa: Google. Prêmio: Curso Flash Criação de Conteúdo Rico em turma (Patrocínio: Afterweb)
Marcos Poscai poscaii@yahoo.com.br
Além de existir uma afinidade com a marca, com certeza estimula a participação cada vez maior do usuário. O próprio Orkut é um exemplo dessa interatividade entre o usuário, o site e a marca. Acredito que isso seja a famosa “web 2.0”: conteúdo gerado pelo usuário. Outros exemplos estão nos blogs pessoais, blogs empresariais e outros.
3º lugar
Prêmio: 3 meses de hospedagem grátis (Patrocínio: Digiweb)
Areta do Bem aretadobem@gmail.com
Não só estimula a participação efetiva no ambiente, como estimula a diversificação e as oportunidades. Em casos da interação provida por marcas comerciais, elas buscam sim a afinidade do usuário com a marca, pois permite ao usuário a possibilidade de se sentir importante, fazendo parte da mesma e sendo assim fiel ao canal que promoveu este “status”.
4º lugar
Prêmio: Livro “Tempo é Lucro” (Patrocínio: X25)
Assinantes ganham descontos exclusivos em cursos e empresas de hospedagens. Confira no site!
44 :: e-mais - breadcrumb
Se precisar de ajuda pelo
c a m i n h o ... Uma das grandes seduções envolvendo o uso da in-
ajuda a responder esta pergunta”, afirma Sergio Carvalho,
ternet está presente no fato de o usuário determinar a ma-
sócio e coordenador da área de experiência do usuário da
neira como será o seu processo de experiência dentro de
Sirius Interativa (www.sirius.com.br).
um determinado ambiente. Dessa forma, a concepção de
Dessa forma, trabalhar com breadcrumbs será de gran-
projetos voltados para mídias interativas terá que dispor
de valia na estruturação do sistema de navegação de um
de uma série de funcionalidades que ajudem o usuário a se
site. “A navegação é a premissa mais básica da web. Proje-
localizar em sua navegação, além de proporcionar uma sen-
tar uma navegação simples e intuitiva, que seja facilmente
sação confortável e de ajuda caso ocorra algum obstáculo
entendida a ponto de ser transparente para o usuário, é
durante este processo.
uma das principais preocupações que se deve ter durante
Dentre os principais recursos disponíveis, podemos
o projeto. Os breadcrumbs podem ser um recurso interes-
citar o uso do breadcrumb. “Assim como um mapa do site
sante nessa busca pela facilidade de uso da navegação”, diz
ou um index, ele é um recurso de navegação complementar
Felipe Memória, interaction designer da HUGE (NY).
que suporta as ações de interação dos usuários, ou seja, são
Funções dentro de um site
aqueles recursos que ninguém se importa ou presta atenção
Em relação à estrutura de navegação de um site, os
até a hora em que precisa. Essa hora invariavelmente vem,
breadcrumbs vão exercer algumas importantes funções.
mesmo para o mais experiente desbravador de mundos na
“Sua função prioritária é informar ao usuário sua localiza-
web, em geral acompanhada de perguntas como: ‘Opa!
ção na estrutura do site. Essa localização pode estar ligada
Onde é que estou mesmo?’. Encontrar-se desorientado no
ao caminho percorrido durante sua navegação ou à
espaço da web é cada vez mais comum, seja pelo maior
posição hierárquica na arquitetura de informa-
volume de informação em sites, seja pela dominante na-
ção do ambiente. Em ambos os casos, essa
vegação por teletransporte do Google - em um clique
representação pode ou não ser navegável.
estamos em algum lugar dentro de um site: ‘Onde é que
Para o usuário, sua localização é mais im-
estou mesmo?’. O breadcrumb é um dos recursos que nos
portante do que a possibilidade de nave-
e-mais - breadcrumb :: 45
gação por esse componente”, explica Renato Rosa, gerente
por permitir que o usuário possa acessar páginas anteriores
de internet da BOX1824 (www.box1824.com.br).
com menos cliques. No entanto, depois de testar mais de 60
Além de ajudar na localização, este elemento também
usuários no laboratório de usabilidade, acabei descobrindo
pode acelerar a descoberta dos caminhos disponíveis
que essa agilidade prometida não acontece. Por mais que as
no ambiente. “Se bem implementado, o breadcrumb
pessoas cliquem uma vez no breadcrumb e três vezes no bo-
acaba sendo uma forma de navegação naturalmente
tão ‘voltar’, o botão do browser carrega a página mais rápido,
compreendida por usuários, tanto em sua função de
por causa do cache, que guarda os arquivos já carregados.
referenciamento quanto de aceleração de navegação.
Portanto, a principal função dos breadcrumbs é realmente
Na primeira, indica onde o usuário se encontra dentro da
a de orientação. Pessoas que se perdem ou que enfrentam
hierarquia do projeto, facilitando as ações imediatas de
dificuldades na navegação invariavelmente usam o elemento
navegação e o entendimento de sua lógica de organização.
para se localizar. Não que a presença dos links prejudique em
Apreender um esquema de organização pode não ser tarefa
alguma coisa, absolutamente não, mas é uma função secun-
fácil, especialmente em sites profundos. A gente vê, todo
dária”, revela Memória.
o tempo, apenas fragmentos da navegação por menu. O
Tipos mais comuns
breadcrumb, assim como o mapa do site, nos facilita o
Além dos modelos conceituais disponíveis (ver box na
entendimento do ‘grande plano’ proposto pelo arquiteto
página 47), que se diferenciam pelo tipo de funcionalidade
de informação. Na segunda função, permite o acesso rápido
que o elemento vai exercer dentro da interface, a
aos níveis anteriores da hierarquia”, destaca Sergio.
utilização dos breadcrumbs também deverá ser
Sobre a possibilidade de servir como atalhos de navegação, através de links, a prática demonstra outro tipo de realidade. “Eles teoricamente agilizam o processo navegatório
analisada em relação aos detalhes envolvidos para a sua apresentação visual. “Visualmente, o mais comum é o uso de um elemento que represente continuidade da esquerda para a direita entre as palavras. O elemento pode ser, por exemplo, uma imagem de uma seta ou símbolos ‘>’. Todas as palavras que tiverem URLs correspondentes devem ser linkadas, exceto a última, que normalmente é a página em que o usuário se encontra”, relata Memória.
Boas práticas na aplicação dos breadcrumbs No livro “Projetando Websites”, Jakob Nielsen aponta que uma das grandes vantagens no uso do breadcrumb
“São aqueles recursos que ninguém se importa ou presta atenção até a hora em que precisa” (Sergio Carvalho)
está no fato de ele ser “extremamente simples e ocupar o mínimo de espaço na página, deixando grande parte dos preciosos pixels para o conteúdo”. Pensando nisso, é possível apontar a existência de padrões ou boas práticas para a criação e o desenvolvimento dos breadcrumbs dentro da interface de um projeto? “Ao longo do tempo, o aprendizado da aplicação de
46 :: e-mais - breadcrumb
métodos de usabilidade sempre permite a elaboração de
Testando a eficácia
boas práticas. Percebidas como referências, e não como
Para quem pretende testar a eficácia dos breadcrumbs,
regras escritas em pedra, podem ajudar no desenho de
Renato Rosa aponta a necessidade de se obter respostas
ótimas soluções. A irrefletida adoção de listas de boas prá-
a três perguntas fundamentais. “Onde estou?’, ‘De onde
ticas pode levar a uma solução inadequada ou apenas cor-
vim?’ e ‘Como posso voltar?’. Se conseguirmos responder
reta. Isso posto, o breadcrumb deve apresentar o caminho
a esses três questionamentos com um simples breadcrumb,
completo desde a home até a página corrente (atributo de
ele está cumprindo o papel a que se propõe”, destaca.
referenciamento), onde todos os itens, com exceção do
Em termos técnicos, alguns métodos também podem
que indica a página corrente, são links ativos (atributo de
ajudar na avaliação do uso deste elemento. “Testes de eye
aceleração de navegação). O elemento visual que conecta
tracking, que acompanham o olhar dos usuários, também
os passos deve indicar um fluxo (melhor ‘>’ do que ‘|’). Já
podem trazer conclusões poderosas, principalmente sobre
o seu posicionamento deve depender da interface, mas,
o real uso dos breadcrumbs para fins de localização. Uma
em geral, fica logo abaixo do cabeçalho superior ou logo
opção mais acessível, mas que serviria apenas para ver a
acima da barra de título da página. A melhor posição vai
taxa de cliques em relação a outros links da página, é o uso
depender das variáveis de projeto”, orienta Sergio.
de ferramentas como o Crazy Egg (http://crazyegg.com) e o
O especialista ressalta ainda o desafio de se apresentar
Robot Replay (www.robotreplay.com)”, cita Memória.
este recurso de forma discreta, sem escondê-lo atrás de fon-
Em qual perfil de projeto devo utilizar?
tes de baixo contraste ou de tamanho microscópico apenas
A resposta para tal questionamento certamente pas-
para cumprir um requisito de projeto. “Devemos buscar o
sará pela complexidade do projeto no qual você vai desen-
correto ponto de equilíbrio para que este recurso se integre
volver. “Seu uso é recomendado, normalmente, em projetos
naturalmente à interface. Não ser intrusivo, mas tampouco
de hierarquias mais densas. Acredito que, acima de três
visualmente irrelevante. O que não é tarefa fácil. É difícil
níveis, já temos a necessidade da utilização desse elemen-
integrar na interface longos caminhos hierárquicos com ró-
to. Por outro lado, não acho pertinente a utilização de um
tulos extensos, sem causar interferência no equilíbrio visual.
breadcrumb em um hotsite - que possui uma arquitetura
É aí que entra a discussão multidisciplinar do arquiteto de
rasa e limitada”, afirma Renato.
informação com o designer para experimentar e testar no-
Assim, os sites de comércio eletrônico e de bancos apa-
vas soluções. Depois, podemos implementar ou arquivar a
recem como fortes candidatos nesta lista. “Isso porque são
sugestão. Diria que este é um procedimento saudável que
ambientes em que o usuário precisa estar confortável e segu-
deve ser sempre inteligentemente seguido. Se aplicarmos o
ro a cada clique. Outro candidato em potencial são os sites
tempo inteiro não há plano de projeto que resista, mas no
de ajuda, tutoriais, que têm alguma função de servir como
outro extremo teremos sempre projetos sem DNA próprio. A
manual. Afinal de contas, você não quer que o usuário tenha
inovação deve ser um exercício do dia-a-dia. Um bom exem-
dificuldades até no manual”, argumenta Memória.
plo seria o híbrido de navegação por tabs e breadcrumb do site de receitas do Yahoo (http://food.yahoo.com). É uma interessante iniciativa que ainda deve ser validada por testes com o usuário, mas tem bom potencial”.
e-mais - breadcrumb :: 47
Exemplos de aplicação de breadcrumbs - Capes
- Universidade de Monash
www.capes.gov.br
www.monash.edu.au
“É um exemplo de boa
“Tem outra implementa-
localização e legibilidade
ção correta na qual posi-
que, apesar de se posi-
ciona o breadcrumb logo
cionar acima do título da
acima do título da página
página, não interfere na
facilitando sua visualiza-
hierarquia de informações.” (Renato Rosa)
ção e utilização.” (Sergio Carvalho)
- Diretório Yahoo
- Casa Rural
http://dir.yahoo.com
www.casaruralrs.com.br
“É um bom exemplo de
“É um dos mais completos:
implementação. A linha de
informa, com total clareza,
breadcrumb está bem inte-
a utilidade do componente,
grada a interface, tem boa
a localização hierárquica da
visibilidade, legibilidade e
página em que o usuário se
implementa de forma correta as referências de boas práticas.”
encontra e seus níveis navegáveis, de uma forma escalonável e
(Sergio Carvalho)
apropriada para o nicho de mercado.” (Renato Rosa)
“Sua função prioritária é informar ao usuário sua localização na estrutura do site” (Renato Rosa)
48 :: e-mais - breadcrumb
Modelos de breadcrumbs Abaixo, o especialista Sergio Carvalho, da Sirius, analisa os três tipos mais comuns de breadcrumbs: 1) Caminho por navegação (Path breadcrumb) “Modelo original derivado da metáfora das migalhas de pão do conto de João e Maria. Cada tela visitada fica registrada como um passo dado pelo usuário. Funcionalmente acaba sendo uma redundância do histórico do Back do navegador e ainda perde-se o importante atributo de referenciamento. Se ele chegar em uma página interna de um site por um engenho de busca, este modelo será de pouca valia. Se o usuário estiver perdido no site, ele apenas verá registrada a sua desorientação.” 2) Caminho hierárquico (localization breadcrumb) “Modelo dominante, que apresenta a posição do usuário dentro da estrutura de categorias do site. Um estudo da Universidade de Wichita aponta que usuários que foram incentivados a usar este recurso realizaram tarefas em menor tempo do que outros que não o conheciam ou que não foram estimulados a usá-lo. Ou seja, é um recurso que traz maior eficiência à navegação, mas que ainda é relativamente pouco utilizado.” 3) Caminho por atributos (attribute breadcrumb) “Modelo descrito pelo Keith Instone. É o que encontramos, por exemplo, em sites com navegação por facetas, onde as escolhas de filtros, feitas pelos usuários, ficam registradas na interface. Exemplo: brinquedos > de 2 a 6 anos > abaixo de R$ 100. Este modelo pode conviver sem problemas em uma mesma interface com os anteriores.”
e-mais - breadcrumb :: 49
“Projetar uma navegação simples e intuitiva é uma das principais preocupações que se deve ter durante o projeto” (Felipe Memória)
50 :: estudo de caso - Last.fm
Sonoridade em prol de uma comunidade mundial Imagine você abrir a janela de sua casa e encontrar uma infinidade de pássaros emitindo os mais diferentes tipos de melodia? Pois bem, quem procura um tipo de experiência similar na web, possivelmente vai encontrála em uma das redes sociais mais populares atualmente. Estamos falando da Last.fm (www.lastfm.com.br). Apontá-la apenas como uma webrádio seria buscar uma definição demasiadamente simplista. Mais do que música, o site funciona como um grande banco de dados e compartilhamento de gostos musicais. Nesta entrevista, reunimos alguns membros da equipe da Last.fm, mais especificamente Christian Ward, gerente de relações públicas, Matt Ogle, gerente do departamento de web, e Hannah Donovan, gerente do departamento de arte, que revelam as principais características e desafios para a manutenção deste grande universo digital.
Wd :: Como podemos definir a Last.fm? Christian :: A idéia é que a Last.fm funcione como o mais importante website de música que você precisar. Digite um artista que você gosta e a Last.fm começará a tocar imediatamente músicas similares, extraídas de uma das maiores bibliotecas de todas as redes sociais de música disponíveis na internet - incluindo trilhas e artistas de três das quatro maiores gravadoras do mundo e milhares de artistas independentes. Além disso, se você fizer o download do software da Last.fm, poderá sincronizá-lo com seu iTunes e iPod (prática classificada por nós como “scrobbling”), de modo que possamos construir uma página pessoal para você e recomendar novas músicas baseadas em seus gostos musicais. Scrobbling O usuário da Last.fm pode construir um perfil musical utilizando dois métodos: ouvindo seu repertório musical pessoal através de um player, com o plugin do Audioscrobbler; ou ouvindo a rádio da Last.fm, geralmente como usuário registrado na Last.fm. As músicas são tocadas e adicionadas num log, de onde as tabelas de artistas, músicas e recomendações musicais são calculadas. Este log automático de músicas é chamado de scrobbling. Fonte: Wikipédia (http://pt.wikipedia.org/wiki/Last.fm)
X
:: 51
Napster
X
Primeiro programa de compartilhamento massivo de arquivos, através de tecnologia ponto-a-ponto (peer-to-peer). Tornou-se popular no início de 2000. Criado por Shawn Fanning, o programa compartilhava somente arquivos de música no formato MP3. O Napster permitia que os usuários baixassem arquivos diretamente nos computadores de outros usuários. Criou assim uma imensa comunidade global com milhares de músicas disponíveis, onde um usuário baixava do outro e disponibilizava suas músicas
Christian :: Procuramos fazer sempre o melhor para
para toda a rede.
garantir que os artistas, as gravadoras e as agências res-
Fonte: Wikipédia (http://pt.wikipedia.org/wiki/CBS)
ponsáveis pela arrecadação e distribuição de direitos autorais sejam pagos desde o primeiro momento. É uma situa-
Wd :: Especialistas consideram o Napster como um dos principais responsáveis pela revolução na indústria fonográfica em relação à internet. Em qual momento destas transformações surgiu a idéia de criar a Last.fm?
ção complicada, mas estamos em constantes negociações com as partes envolvidas nesta questão. Wd :: Para navegar pela Last.fm, o usuário não é obrigado a se cadastrar. No entanto, o site atingiu
Christian :: Nosso objetivo principal era ajudar as
um número expressivo de associados. Quais aspectos
pessoas a encontrarem música de qualidade, a música
contribuíram para a formação de uma comunidade em
que elas tivessem um amor genuíno. Quando começa-
torno da Last.fm?
mos, isso aconteceu depois da criação do Napster, per-
Christian :: É verdade que você pode usar a Last.fm
cebíamos que o Napster tinha cumprido o papel de su-
sem se cadastrar - basta simplesmente você digitar o nome
prir a necessidade dos fãs de música, porque havia uma
de um artista que você gosta e o site começa a reproduzir
grande variedade de estilos musicais pelo mundo e as
músicas similares ao seu gosto.
pessoas não sabiam a melhor forma de ter acesso a elas ou como descobrir novos projetos. A imprensa musical não cumpria este papel, muitas revistas acabaram e você não podia confiar na TV ou no rádio,
No entanto, se o usuário se cadastrar, nós construímos seu próprio perfil de música. É neste aspecto das redes sociais que a Last.fm começa a funcionar, e as comunidades a se formar em torno da música.
a menos que seu gosto musical fosse voltado ao mainstre-
Uma vez que sabemos que tipo de música você gosta,
am. Uma vez que o Napster foi fechado, não havia nenhuma
podemos oferecer uma série de características em relação
plataforma, on-line ou off-line, que cumprisse esse papel.
ao seu perfil - de recomendações musicais a funcionalida-
Assim, decidimos fazer uma por conta própria.
de de revelar a compatibilidade de seu gosto com outros
Wd :: Uma das grandes discussões quando falamos
usuários do site.
de internet e indústria musical envolve a forma de distri-
Todo apreciador musical gosta de revelar publicamente
buição e a quebra dos direitos autorais. Pensando nisso,
suas preferências. A partir desta constatação e a possibilida-
como a Last.fm se posiciona diante desta questão?
de de descobrir novos materiais - música, pessoas, vídeos,
52 :: estudo de caso - Last.fm
eventos - acabaram sendo os grandes atrativos para o usu-
Wd :: Ainda sobre o formulário, vocês colocaram
ário se registrar no site e a utilizar nosso player de música.
a funcionalidade CAPTCHA para evitar o cadastro de
Wd :: Em termos técnicos, um dos grandes desta-
usuários falsos. A novidade é o uso desta técnica com
ques do site é a apresentação de um formulário inteli-
áudio, que permite que usuários portadores de deficiên-
gente, que agiliza o momento no qual o usuário vai se
cia também utilizem o site. Quais foram os desafios para
cadastrar. Quais fatores foram determinantes para que
desenvolver esta funcionalidade?
vocês trabalhassem com este modelo de formulário?
Matt :: Neste ponto, tivemos muita sorte! Conforme
Matt :: Não utilizamos artifícios enganosos para fazer
o site foi evoluindo, sentimos a necessidade de adicionar
a pessoa se cadastrar no site. Nossa filosofia é deixar as
um CAPTCHA na seção do formulário para impedir que os
pessoas utilizarem nossos aplicativos e tentar mostrar que
robôs de spam fizessem cadastro no site.
experiência na Last.fm será primeiramente agradável para depois convencê-la se tornar parte de nossa comunidade. Assim, quando desenvolvemos o formulário do site, tentamos tornar o seu uso com o menor esforço possível, utilizando AJAX não como uma maneira de sermos modernos ou “Web 2.0”, mas para tentar minimizar o sofrimento de fazer algo que
CAPTCHA
X
Acrônimo para “Completely Automated Public Turing test to tell Computers and Humans Apart”. É um tipo de teste de perguntaresposta usado em computador para determinar se o usuário é humano. Fonte: Wikipédia (http://pt.wikipedia.org/wiki/CAPTCHA)
todos nós odiamos, que é preencher formulários!
“A principal influência para escolhermos a cor vermelha está presente no slogan do site: The Social Music Revolution” (Hannah Donovan)
estudo de caso - Last.fm :: 53
Na época, existiam poucos fornecedores neste segmento. Porém, encontramos o excelente “Recaptcha” (http://recaptcha.net), que cria os CAPTCHAs através de imagens digitalizadas de livros antigos. Assim, os usuários que se cadastram atualmente no Last.fm estão ajudando a digitalizar os livros da universidade de Carnegie Mellon (www.cmu.edu). Wd :: Em relação à interface do site, vocês utilizaram caixas para determinar o posicionamento das informações pelo site. Por que a escolha deste tipo de grid? Hannah :: Apesar de as caixas não serem uma maneira nova ou original de se dividir a informação, elas funcionam como forma de visualização das bases de apoio da estrutura de um site. Os grids são necessários para dividir a informação, criando uma hierarquia para informação e agrupando cognitivamente elementos para uma melhor experiência do usuário. Wd :: Sobre o design do site, vocês privilegiaram o uso de três cores principais na interface: vermelho, cinza e branco. Qual o significado que tais cores assumem dentro do site? Hannah :: A principal influência para escolhermos a cor vermelha está presente no slogan do site: “The Social Music Revolution” (A Revolução Social da Música). O vermelho é uma cor revolucionária e se tornou a melhor escolha para criarmos um elemento forte no processo de reconhecimento e afinidade com a marca, diferente do padrão utilizado por outros websites também voltados para o mundo musical. Já o azul, o cinza e o branco funcionam simplesmente como
54 :: estudo de caso - Last.fm
tonalidades para acalmar a vibrante paleta de cores do site. Como o azul e o cinza são cores de baixa saturação, se tornam extremamente úteis como elementos da interface (como podemos ver em muitas aplicações web). Wd :: Quando falamos em empreendedorismo na web, uma dúvida comum é a melhor forma de se obter retorno sobre um investimento. Como vocês tratam esta questão na Last.fm? De que forma é gerida receita no site? Christian :: A Last.fm tem funcionado como um negócio desde que quatro rapazes decidiram criá-la em um pequeno flat localizado em Londres. De lá para cá, crescemos através de assinaturas, parcerias e publicidade. Após a compra da Last.fm pela CBS, estamos expandindo em várias direções, o que significa que o modelo de negócios também sofrerá transformações.
“Nosso objetivo principal era ajudar as pessoas a encontrarem música de qualidade” (Christian Ward)
CBS Acrônimo de Columbia Broadcasting System. É uma das maiores redes de televisão e rádio dos Estados Unidos. Fonte: Wikipédia (http://pt.wikipedia.org/wiki/CBS)
X
tecnologia na web :: 55
Tecnologia na web CSS: trazendo a harmonia entre design e programação Quem trabalha com CSS (Cascading Style Sheet) na cria-
em uma estrutura com uma única folha de estilo base, para to-
ção e no desenvolvimento de sites, conhecido em português
das as demais páginas do site, o browser usará o mesmo *.css
como as folhas de estilo em cascata, conhece muito bem suas
inicialmente carregado. Com isso, depois do carregamento
vantagens. Uma das principais determina o fim da “guerra” en-
da homepage, só temos o peso das páginas HTML, imagens
tre programadores e designers. “O designer fica atento apenas
e scripts para carregar”, relata Hugo.
ao código CSS e deixa livre o HTML para que o programador
Para completar, o desenvolvimento com CSS traz flexi-
trabalhe. Logo, o designer não quebra a programação que
bilidade para formatar versões de seu projeto, por exemplo,
o programador fez com tanto esforço, e o programador não
para impressão e dispositivos móveis. “Você consegue fazer
destrói o layout que o designer fez com tanta atenção”, afirma
um bom trabalho apenas criando outro código CSS para a
Diego Eis, sócio da Visie Padrões Web (www.visie.com.br).
versão mobile, sem a necessidade de modificar qualquer linha
Isso porque a facilidade para a manutenção visual dos
de HTML. A mesma coisa vale para a versão de impressão. A
projetos foi um dos principais fatores para justificar a aplica-
identificação é automática, logo, não é necessário nenhuma
ção de CSS. “Antes, quando queríamos fazer qualquer tipo de
programação prévia para que o browser faça o chaveamento
transformação visual, tínhamos que nos embrenhar no códi-
entre as versões da CSS”, explica Diego.
go-fonte, e modificar tudo que precisávamos. Sempre toman-
CSS: obstáculos para disseminação pelo mercado
do cuidado em dobro para não quebrar o funcionamento do
Diante de tantas vantagens, quais seriam os principais
site. Era um trabalho demorado e muito, muito chato. Hoje,
entraves para a disseminação das CSS pelos sites brasileiros?
com a formatação separada do código HTML e da linguagem
“Para mim, é a completa falta de conhecimento dos profi s-
server-side, o designer pode fazer qualquer tipo de alteração
sionais. Não sei por que, mas parece que existe uma infl u-
sem medo de maiores problemas”, diz Diego. “Pelo fato de
ência muito grande de cursos de webdesign que ensinam
as folhas de estilo estarem separadas, a manutenção se torna
os novatos a desenvolver para web a partir das ferramentas
mais prática, já que estilos globais do site podem ser altera-
de desenvolvimento, ao invés de seguirem os padrões de
dos em poucas linhas. Em resumo, alterações que impactam
separação da apresentação e do conteúdo”, analisa Henrique
boa parte das páginas do site podem ser feitas mudando
Pereira, arquiteto da informação e desenvolvedor de projetos
pequenos trechos de código. Um bom exemplo: para alterar
web (http://revolucao.etc.br).
a cor de um título qualquer, bastaria modificar a linha h2 { co-
Outro ponto-chave está presente na deficiência do su-
lor: #f00 }”, acrescenta Hugo Dias, sócio-diretor da Meetweb
porte pelos browsers. “Os navegadores disponíveis insistem
- Agência Internet (www.meetweb.com.br).
em interpretar de maneira diferente os estilos declarados.
Mas os benefícios não param por aí. “Independente do
Com isso, o processo de adaptação das páginas para que
porte do site, com as CSS ganhamos bastante performance.
tenham aparência idêntica em todos os navegadores se torna
Agrupando todos os estilos em um arquivo *.css indepen-
mais complexo. Além disso, a W3C demora em assumir como
dente, este arquivo será baixado para o cache do usuário
padrão as atualizações da linguagem. Assim, empresas como
(arquivos temporários) no acesso à homepage. Sendo assim,
Microsoft e Mozilla precisam fazer atualizações ‘à revelia’ em
56 :: tecnologia na web
“Tanto designers quanto programadores necessitam da CSS, o que muda é o objetivo” (Hugo Dias)
seus navegadores, uma vez que a W3C demora mais do que
Base para trabalhar com CSS
o desejado. As principais necessidades dos diagramadores,
Na hora de meter a mão massa, o profissional vai
não existentes no CSS 2.1 (versão atualmente utilizada), já
precisar desenvolver seus conhecimentos em alguns as-
estão em estudo desde 1998 para o CSS level 3. Recursos
suntos específicos.
como bordas arredondadas, sombras e fontes especiais
“CSS é uma linguagem de formatação. Como toda
para a web serão lançados oficialmente, sem data prevista,
linguagem, você precisa aprender sua sintaxe e como fun-
na versão 3 da linguagem”, aponta Hugo.
ciona sua utilização”, diz Diego. “Para trabalhar com a CSS
Aprendendo com os erros
deve-se conhecer plenamente suas regras de sintaxe e do-
Outra questão importante a ser abordada envolve os
minar a semântica do HTML”, complementa Hugo.
erros mais comuns na aplicação das CSS dentro do desen-
E para quem pensa que esta é uma tarefa exclusiva
volvimento de um site. Na hora de apontar quais são eles,
dos profissionais envolvidos com programação, a recomen-
a opinião dos especialistas parece ser unânime. “Um dos
dação dos especialistas é que os designers também procu-
piores é usar desenfreadamente os CSS Hacks. Hoje em
rem aprofundar seus conhecimentos na área.
dia, estudando e trabalhando bem com CSS, é possível
“Apesar de a CSS estar se transformando gradati-
fazer qualquer design sem a necessidade de utilizá-los. Esse
vamente em uma sintaxe com características de progra-
subterfúgio deve ser utilizado quando há realmente uma di-
mação, não temos nela um escopo visível de lógica. Por
ficuldade de compatibilidade entre os browsers e, na maio-
isso, designers também podem desenvolver na linguagem
ria das vezes, esses erros de compatibilidade ocorrem por
CSS. O ponto de equilíbrio se dá quando o programador se
causa do mau código do desenvolvedor”, orienta Diego.
sente mais confortável para solucionar os problemas mais
Além dos CSS Hacks, erros semânticos também pre-
complexos de estrutura, e naturalmente, pelo perfil, deixa
judicam a qualidade dos projetos. “Os maiores enganos
passar detalhes do layout. Em contrapartida, o designer
estão no início, quando o desenvolvedor apenas substitui
normalmente diagrama com mais fidelidade à tela do Pho-
tabelas por divs, e procura simular o mesmo comporta-
toshop. Tanto designers quanto programadores necessitam
mento com CSS. Isso compromete a semântica do HTML
da CSS, o que muda é o objetivo. Na Meetweb, costuma-
e acaba deixando os arquivos de CSS maiores do que de-
mos utilizar um programador para desenvolver a folha de
veriam. Isso é natural para quem está começando”, relata
estilo base e um designer para cuidar do que chamamos
Henrique. “Outro erro é a prática do CSS Inline. CSS Inline
de fine tuning, ou ajustes finos. Defendo que, no mínimo,
é quando o desenvolvedor coloca a formatação de um ele-
ambos devem ter conhecimento amplo da linguagem para
mento HTML na própria TAG HTML. Quando fazemos isso,
saberem o que têm de opções na hora de desenvolverem
estamos voltando aos tempos passados e todas as vanta-
seus sistemas ou layouts”, finaliza Hugo.
gens de utilizar CSS se tornam inúteis. Por isso, é importantíssimo que tudo que é formatação esteja dentro de um arquivo CSS. Não importa o que seja”, completa Diego.
tecnologia na web :: 57
nível médio
Saiba mais Livros
Exemplo na aplicação de CSS Para quem procura exemplos práticos de aplicação
- “Criando Páginas Web com CSS”, por Andy Buddy,
das CSS na web, o projeto CSS Zen Garden (http://cs-
Cameron Moll e Simon Collison
szengarden.com) surge como indicação “clássica” na
- “CSS: The Defi nitive Guide, Third Edition”, por Eric
área. “Quando a formatação do site é feita em CSS, você
Meyer
consegue mudar o layout inteiro de um site, sem modifi-
- “Projetando Web Sites Compatíveis”, por Jeffrey
car o código HTML. E o camarada do CSS Zen Garden fez
Zeldman
o site pensando nisso. O pessoal enviou para ele centenas de layouts feitos em CSS, sem incluir ou excluir códi-
Sites
go HTML. Eles apenas criaram um novo CSS baseado no
- Maujor (www.maujor.com)
HTML original e novos layouts foram feitos”, diz Diego
- Tableless (www.tableless.com.br)
Eis. “O autor, Dave Shea, criou um HTML flexível o sufi-
- Revolução Etc (www.revolucao.etc.br)
ciente para que designers do mundo todo enviem novos templates, alterando apenas o CSS. Basta selecionar na
Fontes: Diego Eis, Henrique Pereira e Hugo Dias
lateral um dos temas enviados pelos designers para ver o poder do CSS”, completa Henrique Pereira.
58 :: tutorial
Joomla!, mãos à obra! - Parte 1/4 Por Bruno Viana (webdeveloper e pesquisador), Diego Maia (webdesigner), Julio Pontes (webdeveloper) e W.Gabriel de Oliveira (gerente de marketing, pesquisador webwriter) da Agência NOIX (www.noix.com. br). Contato: joomla@noix.com.br.
Convidamos você a mergulhar em um dos programas
Entendendo o Joomla!
de gerenciamento de conteúdo web que mais crescem no
Instalado o CMS, vamos compreender as suas divisões. É
mundo: o Joomla!. Esta conversa, dividida em quatro par-
importante, primeiramente, informar que a sua administra-
tes, concentrará informações técnicas e um pouco de epis-
ção é dividida em Front-end e Back-end:
temologia sobre o sistema. Trabalharemos, como na web,
- Front-end: fachada do site, através do qual é possível
com linguagem rápida e utilizando hipertextos, aprovei-
administrar conteúdo, sem necessitar entrar na área ad-
tando o conhecimento coletivo que a grande comunidade
ministrativa;
Joomla! já edificou. Seja bem-vindo e mãos à obra.
- Back-end: área administrativa, onde é possível gerenciar não só conteúdo, mas também acesso de usuários, menus,
O que é Joomla!?
seções e categorias do site, arquivos de notícias e até ex-
“Joomla! (pronuncia-se djumla) é um CMS (Content Ma-
tensões do Joomla!, podendo instalar módulos e compo-
nagement System) desenvolvido a partir do Mambo. É
nentes novos.
escrito em PHP e roda no servidor web Apache ou IIS e banco de dados MySQL.” - Fonte: Wikipédia (pt.wikipe-
>> Usuários
dia.org/wiki/Joomla)
O Joomla! possui divisão por status de usuários, dependendo do Grupo em que são cadastrados. Os usuários podem
Quais as vantagens?
ter livre acesso a todas as áreas do CMS ou somente a
- É um software livre, aberto e gratuito (GNU/GPL);
conteúdos exclusivos, com possibilidade de inserir, editar
- Pode ser totalmente modificado por profissionais que
e/ou publicar conteúdo. É possível também escolher se o
desejam adaptá-lo a outras realidades de uso;
usuário terá acesso apenas ao Front-end, com poder limi-
- Possui comunidade com mais de 130 mil registrados
tado, ou ao Back-end, tendo mais possibilidades.
(www.joomla.org) e mais de um milhão de posts; - Tem fácil instalação, oferecendo-lhe imediatamente um
>>>> Grupos de acesso ao Front-end
site operacional e com toda a infra-estrutura necessária
- Registered: usuários comuns, com poder de visualização
para crescer (para os iniciantes, rapidamente um site no
a conteúdos específicos definidos para ele. Não pode criar,
ar; para avançados, a possibilidade de plugar novos com-
editar ou excluir qualquer conteúdo;
ponentes - extensions.joomla.org - ou desenvolver os
- Autor: pode criar, editar e excluir somente o próprio con-
próprios);
teúdo;
- É flexível, permitindo utilizar recursos Web 2.0 (acessibilida-
- Editor: pode criar, editar e excluir qualquer conteúdo;
de, validações W3C, tecnologia AJAX, dentre outros).
- Publisher: pode criar, editar e excluir o próprio conteúdo e editar e publicar o conteúdo criado pelos editores
Como instalar?
e autores.
Deixemos esta missão com o pessoal do JoomlaMinas, que elaborou um excelente passo a passo - www.joomlaminas.
>>>> Grupos de acesso ao Back-end
org/joomla/tutoriais/instalando-o-joomla.html. Lá estão
- Manager: pode gerenciar seções e categorias, assim como
os pré-requisitos, downloads, preparação do ambiente e
o conteúdo gerado por autores, editores e publishers;
a instalação detalhada.
- Administrator: possui todos os acessos e privilégios de gerenciamento;
60 :: tutorial
- Super Administrator: está acima do Administrador, po-
Itens de Conteúdo Estático” (para os itens estáticos).
dendo excluí-lo. >>Seções e Categorias O Joomla! é dividido em Seções (sections) e Categorias (categories). Você pode criar uma Seção e, dentro dela, possuir várias Categorias. Também pode criar Conteúdos (contents), que são os materiais textuais e de imagens do site. Os Conteúdos (contents) podem ser estáticos ou dinâmicos, permitindo que se crie desde uma página
4. Você verá a listagem de todos os itens de conteúdo cadas-
com um conteúdo institucional fixo até uma área no site
trados. Clique em “NOVO” para adicionar um item.
que lista notícias de uma determinada Seção. Abaixo, um exemplo de como seria esta divisão em um portal feito com Joomla!: 5. Para cadastrar, é obrigatório o preenchimento mínimo Seção: Diversão e Arte
de: Título, Texto de Introdução, Seção e Categoria. Após
Categoria: Livros
digitar Título e Texto de introdução, escolha a Seção “No-
Item de conteúdo: Ariano Suassuna fala sobre Patri-
tícias” e a Categoria “Últimas notícias”. O texto principal
mônio Artístico-Cultural
é opcional, sem limite de caracteres.
Categoria: Música Item de conteúdo: Banda Água de Quartinha se apresenta na capital cearense Item de Conteúdo Estático: A empresa (informações institucionais) Seguindo essa estrutura e inserindo os conteúdos, é possível definir quais conteúdos apareceram no menu, criar listagens de conteúdos e até dizer quais deles apareceram na página inicial. 6. Clique em SALVAR na barra de botões superior para Como criar item de conteúdo?
finalizar o cadastro.
Este é o básico a ser feito dentro do Joomla!. Criaremos um item de conteúdo dinâmico. É possível, para isso, usar o front-end ou o back-end. Utilizaremos aqui o back-end.
7. Você verá uma mensagem confirmando a criação do novo item “Minha primeira notícia”.
1. Para acessar o back-end, digite o endereço no qual o Joomla! está instalado /administrator. Exemplo: http://localhost/joomla/administrator. 2. Digite o login admin e a senha escolhida no ato da instalação. 8. Veja que seu item está OK para PUBLICADO, mas não 3. Clique no ícone “Administrar Itens de Conteúdo” (para
está OK para aparecer na PÁGINA INICIAL do site. Para
gerenciar itens de conteúdo dinâmicos) ou “Administrar
mudar, clique sobre o X vermelho.
tutorial :: 61
9. Veja como ficou seu item “Minha primeira notícia” na página inicial do site.
Como trocar template 1. Acesse o back-end e selecione o menu Site > Administrar Templates > Templates do site.
2. A próxima tela exibirá uma listagem dos templates já instalados por padrão no Joomla!. Observação: Há dois templates, “madeyourweb” e “rhuk_solarflare_ii”, já cadastrados por padrão, com um deles publicado.
62 :: tutorial
3. Selecione o template “madeyourweb” e clique no botão “Padrão” na barra de ferramentas superior.
4. Sua escolha aparecerá OK. Acesse o endereço de seu site e veja o resultado.
4. Preencha os campos solicitados. Como criaremos um menu principal, não precisa mudar o Nível do Item, pois não será submenu.
5. Clique em salvar para publicar e finalizar a criação. Como criar item de menu Confira, na próxima edição, o desenrolar dessa con1. Para criar menus no Joomla!, acesse Menus > Adminis-
versa. Falaremos um pouco sobre componentes do Joomla!,
trator Menus > mainmenu e veja a listagem dos itens do
abordando suas possibilidades e criando um junto com
menu já criados.
você. Explicaremos algumas metodologias de desenvolvimento, formas de aplicação e exemplos de customização. Até a próxima!
2. Vamos criar um link para o site da Revista Webdesign. Clique em “NOVO”.
3. Aparecerá a listagem com os tipos de menu. Selecione “LINK - URL” e clique em “Próximo”.
66 :: webwriting
Bruno Rodrigues Autor do livro “Webwriting - Redação & Informação para a web”, da editora Brasport. É consultor de informação para a mídia digital da Petrobras e titular da primeira coluna sobre Webwriting do mundo, hoje veiculada na revista on-line ‘Webinsider’. Ministra treinamentos de Webwriting e Arquitetura da Informação no Brasil e no exterior. bruno-rodrigues@uol.com.br
Na web, intimidade é coletivo Não chegue muito perto. Sou e sempre serei reservado. Pode conversar comigo sobre o que quiser, mas há um limite. Não sou uma cerca de arame farpado, mas tenho uma porta da qual ninguém tem a chave. O que há a esconder? Minha intimidade. Atitude antipática, não é? Mas um dia não foi assim. Até 10, 15 anos atrás era educado e até charmoso ser reservado. Desde então, não há mais o mínimo sentido. Sei quando minhas colegas estão de TPM, porque as mulheres agora bradam aos quatro ventos, para quem quiser ouvir, sua intimidade. Ainda fico enrubescido: é uma espécie de résistence, ainda que solitária. Hoje em dia, marido e mulher que gostam de ficar sozinhos é ultrapassado, quase proibitivo. “Como assim? Vocês não gostam de fazer ‘social’?”, perguntam sempre a mim e à minha esposa. Fazer um “programa casalzinho”? É contramão. Calcada no coletivo, a web só veio ampliar a idéia de que intimidade é algo seu - mas apenas por um instante, já que ela existe, mesmo, é para ser mostrada aos outros. É quase um erro de percurso: temperamento, opiniões, gostos, manias, tudo isso deveria surgir primeiro no perfil do Orkut para aí, sim, você ser avisado via e-mail. Com a bênção das redes sociais, tudo seria permitido. Porém, quando a falta de intimidade adentra o reino das leis e do dinheiro, o que vale mesmo são as regras de educação que vovó tanto apregoava. A sociedade dá corda, mas a tesoura entra em ação quando o buraco é mais embaixo. Vanessa Hudgens, a estrelinha adolescente do musical para tevê “High School Musical” (www.disney.com.br/DisneyChannel/Programas/show_482_High_School_Musical/sitio/index. htm), é um bom exemplo. A todos interessava que a moça, para divulgar sua imagem, agendasse entrevistas com dezenas de revistas, sites e blogs para contar o que gosta de comer e ler, qual a cor preferida, até com que roupa dorme. Mas a Disney, produtora do filme e que lançou a continuação em setembro, subiu nas tamancas quando vieram com a notícia de que circulava na internet (arrá!) uma foto da atriz, outrora símbolo de pureza e boas-intenções... Nuinha em pêlo! Pior: a foto fora tirada para o namorado, o ator Zac Efron, par romântico também na telinha. Tá bom pra você? O que começou como estratégia de marketing virou absurdo e, por pouco, Vanessa não foi substituída na terceira parte da série, a ser filmada brevemente. Quer outro exemplo de “esquizofrenia da intimidade”? A Facebook (www.facebook.com), com quase 40 milhões de usuários, mudou a política de privacidade. Antes, ao realizar uma busca, o Google não conseguia ler os perfis dos inscritos, o site era bloqueado aos mecanismos de busca; agora, ainda há esta opção, mas não é mais a regra - a porta está aberta para quem quiser espiar. A questão, para mim, é por que os usuários estão chiando tanto. Até onde eu sei, o espírito de qualquer rede social é “ampliar a rede de contatos e fazer amigos”. O que aconteceu? Os usuários da Facebook querem circular de saia no joelho e gola até o pescoço em praia de nudismo? Haja contradição. Talvez a crise de intimidade seja moda, mas ela continua a mostrar seus sintomas na web.
webwriting :: 67
“Calcada no coletivo, a web só veio ampliar a idéia de que intimidade é algo seu - mas apenas por um instante, já que ela existe, mesmo, é para ser mostrada aos outros”
A revista semanal suíça “L’Hebdo” (www.magazine.com.lb), por exemplo, na última eleição para o parlamento enviou seus repórteres para viverem (mesmo) com os candidatos, vários deles. Era dormir & acordar. Tudo foi registrado no site/blog “Blog & Breakfast”, de sucesso instantâneo. É assim, mesmo? Para conhecer o que um candidato pensa, se ele merece meu voto, é preciso “morar” com ele, radiografar até a sua alma? É a intimidade que está chegando ao fim, ou somos nós (isso inclui até os políticos) que estamos assustados com tanta exposição, nos escondendo a ponto de precisarem criar um “Big Brother” político para descobrir quem colocar no poder? Não acho que a intimidade se perdeu totalmente. Vejo, sim, que estamos bem perto de criar uma “falsa intimidade”, outra persona para sobreviver a tanta invasão - seja real, virtual, pública ou privada. Alguns já aprenderam a lição, e mostram apenas o que os outros querem ver, mas se trancam a sete chaves quando o que está em jogo é sua verdade mais íntima. Como Renan Calheiros fez no Senado. Eu avisei que a questão era esquizofrênica...
68 :: marketing
René de Paula Jr. User Experience Evangelist da Microsoft Brasil. É profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, AgênciaClick, Banco Real ABN AMRO. É criador da “usina.com”, portal focado no mundo on-line, e do “radinho de pilha” (www.radinhodepilha.com), comunidade de profissionais da área. rene@usina.com
Milhões não são Megas Interessante... Nunca começo um artigo pelo título. Muitas vezes, inicio sabendo como quero terminar, por vezes só sei como começar, mas o título quase sempre só aparece nos 45 do segundo tempo, quando estou prestes a enviar o que escrevi, sem rascunho nem nada. Hoje, curiosamente, não: o título me pulou no colo, mal pulei da cama. Eu poderia usar outros, claro. Por exemplo: “Por onde anda Belchior?”. Ocorreu-me logo em seguida, mas fiquei com receio de que alguém respondesse e eu tivesse que optar entre um Belchior real, concreto e sabe-se-lá-fazendo-o-quê e meu Belchior particular, o cara que colocou na voz da Elis “Como nossos Pais”. Como sou um cara meio sentimental, vou preservar meu Belchior criogênico lá no fundo da memória e do coração. Por que lembrei da Elis e dessa canção? Talvez porque, como já cantou a própria Elis, eu tenho mais de 20 anos, eu tenho mais de mil perguntas sem resposta (belíssima canção, procurem). Talvez porque me caiu a ficha (e lá vai Elis de novo) que... “você não sente e não vê, mas eu não posso deixar de dizer, meu amigo” que... “o que há algum tempo era novo e jovem, hoje é antigo, e precisamos todos rejuvenescer”. Êta nóis, acordei saudosista hoje. Saudade do quê, afinal? Do tempo em que cantávamos todos “Uma nova mudança em breve vai acontecer” e achávamos que a tecnologia iria nos redimir, nos salvar, nos levar pela mão para longe da lama rumo a um éden onde em se clicando, tudo dá? Pode ser. Hoje, olho em volta e noto que, apesar de a internet ter se tornado tão onipresente e invisível quanto o ar que se respira, a gente não conseguiu escapar de um inimigo mais onipresente e invisível ainda: as nossas idiossincrasias. Na faculdade ensinam pra nós que cada povo tem sua maneira de ver e entender e se relacionar com o mundo, e que isso se chama cultura (ué, mas cultura não era aquela televisão que passava coisas “culturais”?). Na cultura esquimó, há N palavras pra cor branca, pois eles distinguem N tipos diferentes de branco, enquanto nós, brancos ou não, só vemos um brancãozão. O mesmo com índios brasileiros: Y palavras diferentes para tons de verde. E por aí vai, bom assunto pra mesa de bar. Poucos, porém, param pra pensar que isso vale pra todo mundo, incluindo este que vos fala e vós que me ledes (ops, como soa estranho). Pois é, aí está meu ponto: o tempo passou, o tempo voou e continuamos prisioneiros de alguns vícios de comportamento e de mentalidade que só nos atrapalham. O problema é que falar de ética e moralidade e cultura é algo complicado, sonífero, faz todo mundo abandonar artigo no meio. Mais ou menos como “programas culturais”. Muda aí logo o canal pra videocacetadas! (eu detesto) Mas, como diriam os melhores infomercials (eu adoro infomercials), seus problemas acabaram! Chega de carregar um arsenal de ferramentas e questionamentos e critérios! Leve agora o canivete suíço de todas as incertezas, a silver-tape de todas as dúvidas, a pergunta de UM MILHÃO... De vezes! A pergunta é: e se isso for feito um milhão de vezes? Pronto. Taí a pergunta de um milhão de dólares. Ou um bilhão. Ou de 150 milhões de pessoas. Ou de um
marketing :: 69
“Como seria o mundo se isso que você está prestes a fazer fosse repetido um milhão, um bilhão de vezes por todo o mundo?” bilhão de internautas. E se isso for feito um zilhão de vezes? Você, por pressa, vai acochambrar um código? Você, por preguiça, vai publicar um site com um formulário mal elaborado? Você, por comodismo, jogou no colo do usuário final uma solução chata de usar, intrincada e mal-acabada? Que mal há nisso, afinal? É uma vezinha só, não é? Não. Não é. Essa decisão meio vergonhosa, aquele “deixa-quieto” que você não gostaria de assumir em público, esse “é só desta vez” que você imagina que ninguém vai perceber, vai ser repetido e repetido e repetido e usado e usado e reusado milhões de vezes por zilhões de pessoas. E, em cada uma dessas vezes, elas vão xingar você. Pense sempre: isso vai ser repetido um milhão de vezes. User-experience ruim elevada a enésima IMpotência. Pense nisso ao fazer design, ao fazer código, ao bolar a experiência do usuário, na hora de comprar software, antes de piratear, antes de mandar e-mails, antes de postar no blog... Como seria o mundo se isso que você está prestes a fazer fosse repetido um milhão, um bilhão de vezes por todo o mundo? Um milhão de bytes é um megabyte. Um milhão de usuários é um milhão de pessoas como eu e você, com nome e sobrenome. (Para algumas perguntas dessas nem precisa imaginar muito: é só olhar em torno, é só ligar a tevê, é só pensar em Brasília... “Cultura” de uma nação dá nisso, nossa miséria vem daquilo que é feito por todos um milhão de vezes e ninguém nem percebe mais) Aliás, acaba de me ocorrer uma tese: se você quer saber onde se escondem seus vícios ocultos, é só reconhecer onde você anda em círculos e pronto, a mania está lá no centro, num ponto eqüidistante de todas as decisões meia-boca. Eu sei que muitos dos nossos vícios culturais e profissionais são parte de nós, foram passados de pai pra filho com muito empenho, que a gente até acha graça em algumas das nossas “espertezas”. Eu também me apego a algumas manias, assim como me apego a um Belchior imaginário. Mas, citando o bardo, O presente, o corpo, a mente é diferente e o passado é uma roupa que não nos serve mais.
70 :: publicidade on-line
Ricardo Figueira Vice-Presidente de Criação da AgênciaClick. Trabalha com propaganda interativa há mais 10 anos. Acumula prêmios e participação como jurado em quase todos os festivais internacionais, incluindo CannesLion, London Festival, One Show NY e outros. É membro da Academia de Artes e Ciências Digitais de Nova Iorque e responsável pelas estratégias criativas da AgênciaClick. Blog: http://ricfigueira.blogspot.com
Conteúdo interativo: o consumidor no comando Apesar de a bola da vez dos próximos dez anos de propaganda e entretenimento serem protagonizados pela interatividade, seja onde for que ela ocorra, muito pouco tem se falado sobre o conteúdo interativo. E, infelizmente, muito pouco também tem sido produzido neste sentido. Mas nem por isso a atenção e a relevância dessa prática representam menos do que a essência da comunicação moderna. No momento em que o consumidor passa a ser o controlador dos aspectos sensíveis ao seu próprio engajamento e a sua imersão em uma experiência de marca determina o tempo de relacionamento, tudo muda de figura, e melhor, quanto mais figuras puderem trocar de papel, maior o potencial. Com isso, as marcas e a própria propaganda em si passam a desempenhar uma função mais ampla e, ao mesmo tempo, profunda nas suas experiências de contato com o consumidor. Não escapam dessa mesma premissa também a indústria do entretenimento, os principais players que são os geradores de conteúdo para TV e cinema. Começando pela TV, os Big Brothers da vida foram na televisão verdadeiras sementes da influência do público sobre a programação, ainda que numa ordem de grandeza de “n para 1”, ou seja, a maioria escolhe um resultado, uma possibilidade, que é assistida por todos. Esse é um tipo de interação de massa, onde a maioria escolhe algo comum para vivenciar. No cinema no Brasil, ainda podemos considerar isolada a iniciativa do Cinema Interativo no lançamento do Fiat Idea Adventure, onde o conteúdo se desdobrava em histórias compostas por múltiplas escolhas pelo público. A iniciativa até inspirou recentemente algumas outras ações como, por exemplo, as mini-histórias de “Antônia” no site da Globo.com. Mas especulando ainda mais a fundo, recentemente o Brasil inteiro viu o capítulo final da novela das oito, Paraíso Tropical. Tudo bem que a audiência dessa revista muito provavelmente não assiste novela das oito, mas confesso que eu fiz parte desse “long tail” e acabei fissurado para ver quem matou a personagem gêmea-má, Taís. Essa novela provou por A + B, que o fato em si, ou o final, jamais seria tão interessante quanto a especulação sobre as possibilidades. Em termos práticos, já pensou se as pessoas que se decepcionaram com a impunidade final da novela pudessem ver outros caminhos que castigariam os vilões ou ainda, se os casais felizes tão previsíveis pudessem ter seus destinos modificados pelas probabilidades da mente pervertida de alguns telespectadores? Não há dúvidas de que tudo seria muito mais divertido, não só o fato de haver outros caminhos para a história acabar, mas a possibilidade de poder visualizar mais de um destino para a vida das pessoas, afinal esse é um paradigma nato do ser humano. Ele sempre se pergunta “e se eu não tivesse feito aquela escolha na minha vida, como eu estaria agora?”. Enfim, a interatividade veio para trazer esse poder sobrenatural para a indústria do entretenimento e ainda especular a influência dos valores ou fantasias das pessoas dentro das histórias. Hoje, a internet é um canal perfeito para isso, se os conteúdos produzidos pelos grandes players de entretenimento já estivessem sendo desenhados com essa amplitude, tenho certeza que o nível de aderência seria altíssimo. Afinal, quem não gostaria de experimentar um outro assassino
publicidade on-line :: 71
“Já pensou se as pessoas que se decepcionaram com a impunidade final da novela pudessem ver outros caminhos que castigariam os vilões?” para a Taís, não para a massa necessariamente, mas para satisfazer a própria vontade de dar um fim nos repugnantes vilões? Ou mais, quem sabe naquele filme “Corra, Lola, corra” ainda pudesse haver outros finais e comparativos tão interessantes quanto os sugeridos pelo filme. Simultaneamente a isso tudo, a indústria do videogame desenvolveu nos últimos anos recursos fantásticos que respondem ao “espectador”, em frações de segundos, estímulos baseados em seus reflexos e ações tão rápidas quanto um piscar de olhos, numa relação de “1 para 1” ou “n para n”. Fica aqui então uma pergunta: quando será que essas indústrias vão se juntar para trocar as suas melhores competências e práticas com o sonho de nos proporcionar o melhor dos mundos, as novela-games, as mini-sériegames ou os filme-games? Seja em qualquer dinâmica, com o espectador sentado no sofá, na frente do computador ou no ônibus voltando para casa. Eu acredito que a resposta já está dada e muitos envolvidos ainda não acordaram para isso. É só o criativointerativo entender que comunicação interativa é muito mais que Flash, HTML, AJAX e o criativo-TV entender que o mais legal é a especulação sobre as possibilidades e não a sua versão predileta.
72 :: webdesign
Luli Radfahrer PhD em Comunicação Digital, já dirigiu a divisão de internet de algumas das maiores agências de propaganda e de alguns dos maiores portais do Brasil. Hoje, é Professor-Doutor da ECA-USP, Diretor Associado do Museu de Arte Contemporânea e consultor independente. Autor do livro ‘design/web/ design:2’, administra uma comunidade de difusão do conhecimento digital pelo País. luli@luli.com.br
Depois de um longo dia, voar Tinha sido um longo, longo dia. De uma semana interminável, aquelas em que não importa o que se faça e quanto se trabalhe, sempre deixa uma sobra que se emenda na outra semana, e na outra, e na outra... Enfim, um dia duro. Duro a ponto que chegou uma hora em que não adiantava mais insistir: era preciso parar para descansar, mesmo que fosse para retomar mais tarde. Tinha muitos livros fascinantes na prateleira, mas não me apetecia lê-los. TV, nem pensar. Uma cerveja só tornaria o trabalho restante ainda mais difícil. Talvez a melhor coisa a fazer fosse tirar uma soneca, mas o ambiente não era propício. Fazia alguns dias que eu tinha lido a história de um agricultor que passou 11 dias sem dormir, simplesmente alternando a atividade cerebral de um hemisfério para o outro, coisa que viria bem a calhar - se eu soubesse como fazê-la. Por falta de opção melhor, resolvi voar. Como em um velho gibi do Tio Patinhas ou do Tintin, escolhi um ponto qualquer do globo e para lá me fui. As ilhas do Taiti estão muito distantes uma da outra, por isso resolvi passear aqui perto: Angra dos Reis, Ilha Grande e o litoral sul do Rio estavam de bom tamanho. “Longa é a praia, longa a restinga, da Marambaia à Joatinga...”, em um instante estava lá. Depois dela, o Rio, que de cima é sempre lindo, e um rasante sobre a Lagoa. Ao subir o Corcovado, nem dei pela falta do Redentor. Estava a caminho de outros lugares. Em piloto automático, dei uma olhada em volta e larguei o comando para buscar uma Coca na geladeira. Quando voltei, estava quase no chão. Duas puxadinhas, um pedido de desculpas para os passageiros e percebi que o vôo ficaria melhor na companhia de Tom Jobim. Ao procurá-lo, acabei por achar um velho Sinatra que me convidava “come fly with me, let’s fly, let’s fly away...”. O tempo passou tão depressa no novo simulador de vôo do GoogleEarth que nem me dei ao trabalho de visitar as estrelas: já estava pronto para trabalhar de novo. Chame você de pós-modernidade ou matrix, o fato indiscutível é que vivemos em um mundo intermediado por interfaces. Não só na web e nos sistemas digitais, mas por toda parte. Filosofia e semiótica à parte, não é muito difícil perceber que as imagens que nos chegam pelos meios de comunicação trazem um componente cada vez menor de realidade. Os paraísos artificiais são amigáveis, bonitinhos, seguros, limpos, confortáveis. Sob muitos aspectos, bem mais agradáveis que a pesada realidade. O mundo sem eles pode até ser mais “real”, mas para quem vive cercado de Botox e silicone, isso realmente importa? Mais do que páginas, cores, letras e ícones, uma interface é qualquer ferramenta de acesso, monitoração, tradução e controle de um sistema. No ambiente digital, ela é o “intérprete” entre os impulsos elétricos de um aparelho e as necessidades de seu usuário, e, sem dúvida, um dos mais poderosos canais de comunicação que já foram inventados. É fascinante acompanhar o desenvolvimento dessa criança. A interface gráfica, universo de trabalho de quase todos os designers hoje em dia, é só um dos sistemas possíveis. O sensor de movimento que tornou o Nintendo Wii tão popular é outro, como também o são o toque do telefone, o vibracall e o force feedback. Estamos tão
webdesign :: 73
“Por mais que se pretenda ser ‘criativo’ no design, é bom levar em conta que interfaces dependem de consenso”
cercados por elas que poucas vezes nos damos conta. O teclado do computador é um bom exemplo. Os atalhos que ele proporciona são indispensáveis até mesmo para quem não pretende escrever nem programar. Sob muitos aspectos, eles são ainda mais herméticos que os códigos de programação. Seu aprendizado pode ser lento e pouco intuitivo, mas é extremamente eficiente. O teclado projetado na tela dos caixas eletrônicos, os ruídos e janelas de alerta do computador que avisam que algo não está certo, os programas que se desligam quando terminam um processo, os sistemas que se atualizam automaticamente, o movimento progressivo do cursor ao acompanhar a velocidade do mouse, o controle de sensibilidade, ajuste de branco e foco automático de uma câmara digital, a busca por sinal de um telefone celular, tudo isso é interface. E nem todas são boas, principalmente quando não funcionam direito. O reconhecimento de voz é a vítima predileta, mas os personagens “amiguinhos” da Microsoft (o cachorro, o hediondo clipe do Word) e o atendimento automático dos sistemas de telemarketing podem ser especialmente odiáveis. Precisamos de interfaces porque a sofisticação dos aparelhos digitais demanda uma “tradução” cada vez maior de seus processos. Todos sabem como funciona uma porta, um livro, um automóvel. Isso faz com que só seja necessário aprender a usá-los uma vez. Quanto mais diferentes eles forem, mais difícil será usá-los. Se você não concorda, pense na sua pia e no sádico que inventou o registro redondo. Por mais que se pretenda ser “criativo” no design, é bom levar em conta que interfaces dependem de consenso. No mundo eletrônico, ele é composto de símbolos e metáforas que se tornam cada vez mais complexas. Essa nova linguagem não é - nem poderia ser - inventada por computadores. Ela surge, progressivamente, da relação que desenvolvemos com eles. Isso ajuda a entender porque as crianças aprendem tão rápido a usá-la - elas estão sendo alfabetizadas, ué - e explica a importância cada vez maior dos testes de usabilidade. O iPhone passou por eles, a Amazon também. Como outros sistemas artificiais de linguagem (a comunicação escrita, por exemplo), as interfaces também podem ser combinadas, modificadas, revistas e ampliadas. É aí que entra o designer, que, nos ambientes digitais, está cada vez mais próximo de um arquiteto. Se ele não se preocupar em analisar o ambiente em que trafega, o máximo que conseguirá fazer será replicá-lo. Afinal de contas, quem cria mundos não pode se prender a eles.
Promoção assine um plano de hospedagem efetue o pagamento anual e ganhe um pendrive ou uma webcam. Confira o regulamento em nosso site. www.siweb.com.br tel: (11) 4063.8047 info@siweb.com.br
Empresa de respeito, credibilidade, honestidade, consolidada na carteira de clientes, atendimento e serviços elogiados, valores justos, sua satisfação aqui e garantida. Hospedagem e registro de sites, planos individuais e revendas. www.datahosting.com.br tel: (11) 6951.2954 - (11) 6939.7305 atendimento@datahosting.com.br
Hospedagem de sites com infra-estrutura de altíssimo nível, planos a partir de R$ 8,90/mês. HTML, PHP, CGI, Flash, FrontPage, DreamWeaver, MySql, e-mail com anti-vírus/spam, suporte 24x7 entre outros recursos. www.hphost.com.br tel: (11) 6684.9597 info@hphost.com.br
OficialHost - Hospedagem Profissional a mais de 4 anos, experiência, confiança, agilidade. Conheça nossos serviços. Ganhe 30 dias grátis para hospedagem. www.oficialhost.com.br. Tel: 11 4072-2079
Revendas de hospedagem com 15 GB de espaço e 350 GB de transf.mensal por R$ 20,00. Hospedagem de sites com 1 GB de espaço e 12 GB de transf.Mensal por R$ 5,00. Site: http://www.blesshost.com.br E-mail: comercial@blesshost.com.br
E-mail de 1GB, webmail com leitor de notícias e disco virtual. Soluções completas para webdesigners e desenvolvedores. Qualidade, estabilidade e segurança. www.speedhost.com.br tel: São Paulo (11) 5644-1047 Rio de Janeiro (21) 3523-0387 Paraná (41) 3015-3077
Hospedagem de Sites, Revenda de Hospedagem e Registro de Domínios, tecnologia ASP, PHP e .net no mesmo plano, teste grátis por 30 dias e comprove a qualidade de nossa infra-estrutura e atendimento. www.redehost.com.br tel: Rio Grande do Sul (51) 3042.2030 São Paulo (11) 4063.7574 Rio de Janeiro (21) 3527.0848 comercial@redehost.com.br
Seja seu próprio servidor de hospedagem em hospede você mesmo o site de seus clientes, ilimitados domínios e e-mails, painel de controle CPanel para você e seus clientes, estatísticas, webmail, etc www.hospedagem.srv.br tel. (11) 4816.1994 hospedagem@hospedagem.srv.br
Hospede seu site com MYSQL 5.0 grátis, suporte integrado a .NET 2.0, PHP 5.2 e ASP no mesmo ambiente. Conheça também nosso plano de parceiro comissionado e ganhe comissões mensais de até 25%. www.iphotel.com.br tel: (11) 6971.0438
Há 6 anos no mercado, oferecemos planos HTML, PHP e ASP na medida para sua necessidade. Planos à partir de R$9,90 mensais. Promoção: Utilize o código “webdesign” na inscrição e ganhe 20% de desconto! www.sitehosting.com.br tel: (11) 4063.2829 tel: (51) 4063.8629 suporte@sitehosting.com.br
Parceria Web Designer: a cada indicação você ganha 2 meses grátis para seu site, a cada 10, um site hospedado gratuitamente. Tire suas duvidas: 0800.600 1432 ou acesse: www.tehospedo.com.br/designer Tel: 0800.600 1432 RS comercial@tehospedo.com.br
A EHB(ExtremeHostBrasil) trabalha com Hospedagem PHP ou ASP com servidores de ultima geração, utilizando Datacenters renomados para garantir o máximo de estabilidade em seu site. www.extremehostbrasil.com tel:(47)8405.4353 fale_conosco@extremehostbrasil.com
A StudioG2.com é uma Agência de Desenvolvimento Web, lançada em Julho de 2007 com a finalidade de desenvolver projetos voltados para a área de web. Hoje em Sergipe, atuamos no segmento de Desenvolvimento Web, Mídia Impressa, Comunicação Visual,Registro e Hospedagem de sites. www.studiog2.com tel: 79 9965-9697 evilaziocruz@studiog2.com
Hospedagem de sites, Revenda, VPS e Registro de Domínios. Planos com 500MB de espaço por apenas R$ 9,50 por mês. Assine agora e tenha o primeiro mês GRÁTIS nos planos de hospedagem e revenda. www.trixhost.com tel: (11) 3717.4889 suporte@trixhost.com
Hospedagem de sites em plataforma Linux e Windows. Registro gratuito de domínios internacionais, acesse o nosso site e participe de nossa promoção. www.rjhost.com.br tel: (21) 2577.5545 vendas@rjhost.com.br
200mb de espaço. - 2000mb de tráfego. - E-mails ilimitados. - Cpainel. - Fantástico. - PHP / CGI / PERL. - Bases de dados ilimitados MySQL. - WebMails ilimitados. - FTP. - Subdomínios ilimitados. - Suporte especializado. Por: 4.99 ou 50 Reais anuais www.truizz.com tel: (43) 3342.2113
Hospedagem de Websites em ambiente Linux e Windows com suporte integrado a DOTNET 2.0, PHP, ASP e outros. Painel de Controle, Sistema de Revenda de Hospedagem, Registro de Domínios, Servidores Dedicados e Co-location. Data Center próprio com a mais alta tecnologia. www.misterhost.com.br tel: (11) 3902.4212 misterhost@misterhost.com.br
Para anunciar nesta seção, envie um e-mail para publicidade@arteccom.com.br, com o título "busca host" ou ligue para (21) 2253.0596