Ed47

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.