Issuu on Google+

E D I T O R A

NOVEMBRO/DEZEMBRO 2010 vista nova re

s!

nta agora ju

R$ 11,90

A revista dos profissionais de internet

para os negócios Design

Como criar fantásticas composições de imagens

Faça a sua marca voar mais alto

na rede social que mais cresce no Brasil

Tecnologia

Especialistas falam sobre a importância do front-end engineer

Marketing

Como explorar o marketing de guerrilha nas redes sociais

E-commerce

Saiba por que a Netshoes dominou o mercado

E ainda

Experiência internacional, smarty php, bastidores dos sites de compras coletivas, usabilidade para e-commerce, cases, portfólios e muito mais


81 > FRONT | WIDE |

1


Editorial

Um novo desafio Quando a internet surgiu de forma comercial no Brasil, há pouco mais de dez anos, o grande desafio das agências de publicidade era convencer os clientes sobre a importância de uma empresa estar presente na web. Alguns compraram a ideia, foram acompanhando a evolução das tecnologias e, assim, desde então mantêm seus sites atualizados, dinâmicos, reforçando a imagem de sua empresa, garantindo um canal de comunicação relevante com os seus clientes. Hoje, a internet já está praticamente consolidada como um dos maiores meios de comunicação. Agora a discussão é outra: como explorar ao máximo toda a interatividade que a rede proporciona? Inicialmente, foi o Twitter que despertou o interesse das empresas, pela alta velocidade na disseminação das informações. Rapidamente, caiu nas graças das celebridades, tomando conta das mídias de massa. Surgiu, então, mais um grande canal de comunicação, o que significa maior proximidade com o público-alvo, interação, melhores produtos e resultados. As empresas finalmente podem se comunicar de forma instantânea com seus clientes, monitorando as suas marcas. Após o Twitter e o sucesso nacional do Orkut, chegou ao Brasil a rede social adotada mundialmente – o Facebook, que já conquistou mais de 500 milhões de usuários, tendo inspirado inclusive o filme The social network, sucesso de bilheteria. Por meio de página oficial, interação, fotos, vídeos, anúncios ou aplicativos, as empresas podem atrair cada vez mais clientes e divulgar seus produtos e serviços. Estando atentas, é claro, ao novo perfil do consumidor: exigente, questionador e participativo. Daí, surge um novo horizonte para as agências… Esse mercado está apenas engatinhando e as empresas estão ainda se conscientizando da importância das mídias sociais. O desafio para as agências hoje é, antes de tudo, educar o cliente. Portanto, leia bastante, informe-se, experimente, reúna argumentos, demonstre resultados e, então, convença-o a investir na internet e, sobretudo, nas novas mídias.

81 Direção Geral Adriana Melo Direção de Redação Flávia Freire Jornalismo Tiago Bosco Revisão Rodrigo Gerdulli Projeto Gráfico Tabaruba Design Direção de Criação e Ilustração Camila Oliveira Ilustração (colaboração) Carolina Vigna-Marú Versão iPad Tabaruba Design Ocara Digital Publicidade Luanna Chacon Thiago Nabuco Atendimento Michelle Ferraz Tecnologia Neilton Silva Rafael Zuma Financeiro Eduardo Costa Eventos Cristiane Dalmati Revista Wide www.revistawide.com.br Arteccom Eventos, editora e treinamento www.arteccom.com.br

www.twitter.com/arteccom

Boa leitura e bons negócios! Adriana Melo adriana.melo@arteccom.com.br E, para quem já tem iPad, esta edição (nov/dez) é gratuita no tablet. Aproveito

www.facebook.com/arteccom

www.flickr.com/arteccom

para agradecer à agência Tabaruba (Luciana Junqueira e Bruno Lemgruber), Marcelo Torrico e Ane Hinds pela dedicação e empenho na concepção do

www.youtube.com/arteccom

projeto. Ficou muito bom o resultado, parabéns!

Fale conosco Atendimento: atendimento@arteccom.com.br Redação: redacao@revistawide.com.br Publicidade: publicidade@arteccom.com.br 2

| WIDE | 81 > FRONT

Produção gráfica www.ediouro.com.br Distribuição www.chinaglia.com.br


81 > FRONT | WIDE |

3


CAPA

Facebook para os negócios

Marketing por meio de aplicativos, páginas oficiais e anúncios na rede social que mais cresce no Brasil

50 E-mails e tweets > 06 E-mails, Tweets Fique por dentro > 08 Notícias, Blogs, Métricas, Agenda, Livros, Direito na web, Internacional, Empreendedorismo

Design > p. 14

Tecnologia > p. 60

Portfólios   > 14 Agência: Diretta, Freelancer: Jorge Brivilati, Ilustração: Guto Lins, Lente Digital: Alexandre Cavalheiro, Fontes de Inspiração: Fabio Lopez

Reportagem > 60 Smarty: garanta muito mais produtividade no desenvolvimento de projetos em PHP com esse sistema de templates

Reportagem  > 24  Composição de imagens: especialistas falam sobre o que é essencial para ter sucesso com essa técnica

Entrevista  > 68 Confira a entrevista exclusiva com o britânico Graeme Rocher, líder de desenvolvimento e cofundador do Grails

Entrevista  > 30  A Wide conversou com André Beltrão, autor do livro Manual do freela: Quanto custa meu design? Opinião  > 34 Profissionais brasileiros falam sobre o desafio de encarar uma experiência internacional Estudo de Caso > 40 Moda feminina na web: analisando o recém-lançado portal da loja Mercatto Colunas > 44 Ilustração: Carolina VignaMarú, Internacional: Julius Wiedemann, Design: Luli Radfahrer

4

| WIDE | 81 > FRONT

Opinião > 74 Profissionais do Brasil e do exterior falam da importância dos front-end engineers nas equipes de desenvolvimento Estudo de Caso > 78 Case do site Noite Universitária, que recebe cerca de um milhão de page views mensais, comprova o poder do Grails COLUNAS  > 82 Magento: Mario Sam, Usabilidade: Robson Santos, Flex: Paulo Teixeira, Segurança: Ivo Machado, Tableless: Diego Eis, Mercado de TI: Paulino Michelazzo

Marketing > p.94 Reportagem > 94 Peixe Urbano, OfertaX, Imperdível, ClickOn etc.: conheça os bastidores dos sites de compras coletivas, a mais nova febre da web no Brasil campanha > 100 A importância do e-mail marketing para uma campanha digital. Confira o case da LojaMelissa.com Entrevista  > 104 Marketing de guerrilha e as mídias sociais. Entrevista com Darren Barefoot, coautor do livro Manual de marketing em mídias sociais Colunas  > 108 Marketing de conteúdo: Bruno Rodrigues, Web fora da caixa: René de Paula

E-Commerce > p. 112 Reportagem > 112 Qualidade no atendimento ao cliente. Entrevista exclusiva com o americano Aaron Magness, diretor de negócios da Zappos Estudo de caso > 120 Saiba porque o Netshoes, site de vendas de artigos esportivos, conquistou a 4ª posição no ranking das lojas virtuais mais acessadas do país Entrevista  > 124 A sócia-diretora da Usability Expert, Amyris Fernandez, fala sobre usabilidade aplicada ao e-commerce coluna  > 127 E-commerce: Mariano Gomide de Faria

Os links citados nesta edição estão reunidos na página principal do site da revista. Acesse www.revistawide.com.br. 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.


u m a e m p re s a

81 > FRONT | WIDE |

5


e-ma ils

E-mails e tweets

Olá, trabalho com webdesign e tenho um cliente que está querendo que eu gerencie para ele o Twitter, crie campanha via Twitter etc. Gostaria de uma dica de vocês de quanto o mercado cobra por isso atualmente. Sei que valores dependem muito do que será realizado e da mão de obra empregada na questão, mas preciso ter uma base para não pedir nada muito além nem aquém da realidade do mercado. Elso Neto – gomesneto1@hotmail.com

Elso, na edição anterior da revista Wide, publicamos uma tabela de preços da APADI que especifica os valores médios dos produtos e serviços básicos mais utilizados nas agências digitais associadas. Em relação a redes sociais, é especificado o valor de R$ 3 mil mensais para seeding (divulgação de produtos e serviços nas redes sociais em ambientes que estão receptivos ao consumo

Participe! fale conosco pelo site www.revistawide.com.br envie sua dúvida de Direito na Web para redacao@revistawide.com.br

desta informação), e o valor de R$ 8 mil mensais para gestão de presença/relacionamento nos canais sociais (respostas a comentários, mensagens em microblogs, e-mails enviados por esses canais e análise de métricas dos canais). Mas, lembre-se de que ambos os valores devem ser ajustados conforme a sua experiência profissional e o porte da empresa do seu cliente. Confira uma reportagem sobre esse novo cargo na próxima edição! Primeiramente, parabéns pela Wide! Estávamos precisando dessa publicação no mercado. A programação visual ficou linda! Queria muito fazer uma sugestão: sou um apaixonado por leitura, e tenho acompanhado bastante o crescimento da rede social O Livreiro (www. olivreiro.com.br), voltada pra livros e discussões sobre leitura. E eles estão lançando várias novidades. De repente, vale a pena fazer uma matéria com eles, não acham? Leonardo Bragança – leonardo@ comunicacao.etc.br

Obrigado pela sugestão, Leonardo. A rede social O Livreiro é realmente muito interessante e merece um destaque na revista. Levaremos o assunto para a reunião de pauta da próxima edição. Olá, adorei a mudança para a Wide, porque eu gostava da Webdesign também, mas só assinava a TIdigital, e agora eu tenho as duas em uma só. Gostaria de sugerir como pauta o OpenCMS, que é uma ótima solução em CMS para a linguagem Java. Tem várias empresas que o utilizam para desenvolvimento de grandes portais corporativos e governamentais, e estão sempre contratando, pois é difícil achar bons profissionais. Rafael Lages – rafalages@gmail.com

É isso mesmo, Rafael, a Wide traz a vantagem de ter as revistas Webdesign e TIdigital em uma só, além de contar com as editorias marketing digital e e-commerce. Sua sugestão é ótima, muito obrigado! Aguarde, que logo publicaremos uma reportagem sobre o OpenCMS.

T WeeTs [@arteccom, #revistawide]

@tritoq @arteccom parabéns, o melhor conteúdo web do Brasil! O trabalho de vocês está excelente #revistawide ;)

@claushu Na 1ª edição da revista Wide da @arteccom tem uma matéria sobre a campanha digital da @ silva_marina! Bem interessante! #Marina43 #Wide

@ronald_rarf Sensacional a matéria de capa da #revistawide, parabéns @arteccom

@marrybaptista Gostei da revista Wide. Proposta bem interessante. #find2010

@juliobitencourt Comprei ontem a revista Wide da @arteccom. Muito boa! Leitura mais que recomendada!

@magicdigital Já estou com minha #revistawide na mão, parabéns aos idealizadores #find2010

Sugestões dadas através dos e-mails enviados à revista passam a ser de propriedade da Arteccom.

6

| WIDE | 81 > FRONT

@agenilson Revista Wide #tudojuntoemisturado deu muito certo!

@cristianoweb Não pude ir no #FIND2010 mas pelo que li por aqui foi um sucesso o evento e o lançamento da #RevistaWide né?! Parabéns @arteccom e equipe!!


81 > FRONT | WIDE |

7


not íc ia s

Lojas Magento no celular

Fique por dentro IE9 muito mais rápido que IE8 A campanha da Microsoft não só afirma que o novo Internet Explorer 9 é onze vezes mais rápido que a versão anterior do software como também ressalta ser mais veloz em desempenho JavaScript do que as versões mais recentes dos navegadores Firefox e Safari. Em relação ao Chrome 6, o IE9 tem maior rendimento quanto à velocidade do HTML5, segundo teste realizado pelo site Downloadsquad.com. Além de utilizar 90% do processamento de gráficos pelo GPU (Graphics Processing Unit), em vez do CPU, o browser traz uma barra de navegação mais limpa, integração com Windows 7 para que os sites sejam acessados diretamente sem a necessidade de primeiramente abrir a janela do navegador, um gerenciador de downloads integrado, atualizações automáticas, recuperação automática de quedas e a capacidade de sair de uma guia dentro de uma sessão de navegação para que o usuário possa visualizar duas páginas da web ao mesmo tempo. Usuários de XP nem tentem baixar o IE9, pois ele não rodará, mas, a quem usa o Windows Vista ou 7, basta acessar www.internetexplorer9.com.br para fazer o download e conferir as novidades..

Google x Apple x Dell Depois de apresentar um tablet para competir com o iPad, a Dell está estudando as possibilidades para entrar na guerra com as gigantes Apple e Google no mercado de aparelhos que unem TV e internet. Esses

mé tr i c a s

10,2%

Percentual que representa os gastos mundiais das empresas com Cloud

O core da plataforma Magento acaba de lançar o aplicativo Magento Mobile. Com ele, é possível integrar dispositivos móveis Android, como o iPhone e o iPad, com a plataforma de e-commerce mais utilizada no mundo, permitindo que o desenvolvedor customize sua loja móvel por meio do próprio aparelho. O lojista também pode ter acesso à admin da loja virtual, ao catálogo de produtos, ao caixa, ao estoque, aos pedidos de pagamentos e a muito mais pelo celular. O resultado para o usuário é de uma interface intuitiva, que oferece todas as funcionalidades que as lojas acessadas pelo computador disponibilizam. Para entender como o aplicativo funciona, assista ao vídeo de apresentação em migre. me/1o2QV. Para baixá-lo, acesse migre.me/1o37d.

dispositivos oferecerão aos telespectadores a possibilidade de fazer pesquisas e downloads, instalar aplicativos, além de muitas outras funcionalidades interativas. Agora, é só aguardar o lançamento dos televisores no ano que vem para conferir o que cada um trará de diferencial para conquistar o mercado.

398

Solicitações feitas pelo Brasil ao Google no primeiro semestre deste ano para a

Computing de todo o orçamento destinado à contratação de serviços

retirada de informações do site de buscas. A Líbia é a segunda,

terceirizados de TI. A pesquisa realizada em quarenta países, com 1547 participantes,

com 149 pedidos de remoção e, em seguida, estão os Estados Unidos, com 128.

constatou que o investimento na tecnologia é considerado prioritário para 39% das

O Google já completou mais de 67,6% dos pedidos de retirada brasileiros. Fonte:

empresas este ano. Fonte: Gartner (www.gartner.com)

Google (www.google.com)

8

| WIDE | 81 > FRONT


Blogs do mê s

Guia sobre Design O Guia sobre Design (www.guiasobredesign. com.br) é a continuação do Projeto Sobresites. O designer carioca Eduardo Vieira, sócio da Tribo 12, trata de assuntos sobre design gráfico, webdesign, cursos, tipografia, tecnologia, prototipagem e muito mais. Os textos promovem a discussão sobre as questões do design, sua influência e todo o tipo de requisição e questionamento relevantes ao tema, oferecendo um material de apoio e pesquisa para auxiliar na busca por informações de alto nível de qualidade. O autor incentiva os leitores a sugerirem temas e novas categorias para o blog e a trocarem informações através do link de contato.

E-Commerce News Há pouco mais de um ano no ar, o blog E-Commerce News (www.ecommercenews.com.br) é uma excelente referência para lojistas, agências de desenvolvimento web, profissionais da área de e-commerce e internet em geral. O blog é mantido por uma instituição empenhada em produzir e disseminar informações sobre comércio eletrônico, divulgando dicas, notícias, entrevistas, pesquisas, balanços, lançamentos, cases, artigos e tutoriais. Logística, SEO e tecnologias para a construção de lojas virtuais também fazem parte dos assuntos tratados no site. Constantemente atualizado, os leitores podem ainda ter suas matérias publicadas enviando-as para o blog. Além do Feed, assinar a newsletter garante notícias em primeira mão no seu e-mail.

Conhece algum blog interessante focado em criação, tecnologia, marketing ou e-commerce? Envie sua dica para redacao@revistawide.com.br

90%

Índice que o Brasil superou em relação ao número de empresas que

200mil

Déficit estimado de profissionais da área de tecnologia da

adotaram as tecnologias da Web 2.0, que incluem redes sociais,

informação no Brasil em 2013. Hoje, existem 600 mil pessoas atuando

como Facebook e Twitter, para os negócios, segundo pesquisa realizada pela

em setores de TI no país e ainda há uma demanda de 71 mil. Fontes: ABES,

McAfee em 17 países. No Brasil, nove em cada dez empresas estão lucrando

ASSESPRO, BRASSCOM, FENAINFO, SOFTEX e SUCESU (migre.me/1o4Tl)

com as ferramentas. Fonte: BBC Brasil (www.bbc.co.uk/portuguese)

81 > FRONT | WIDE |

9


Livro s Como abrir uma loja virtual de sucesso Mauricio Salvador

agenda

12 a 15/11 Fliporto Digital Local: Olinda www.fliportodigital.net A quarta edição da Festa Literária Internacional de Pernambuco será realizada na Biblioteca Pública de Olinda e abrigará o polo tecnológico da Fliporto para divulgar e valorizar obras literárias, seus escritores virtuais e demais interessados no ramo digital. Evento gratuito.

20 e 21/11 Brasil Game Show Local: Rio de Janeiro www.brasilgameshow.com.br A Rio Game Show, maior feira de games do país, chega à terceira edição e passa a se chamar Brasil Game Show. O evento deverá receber 20 mil visitantes nos dois dias e ocupará o triplo da área utilizada no ano passado, no Centro de Convenções SulAmérica. Ingressos: de R$ 20 a R$ 30.

22/11 Fórum Nordeste Digital Local: Recife www.convergeeventos.com.br/ seminarios/nordestedigital O evento apresentará palestras que abordarão os desafios dos CIOs em tecnologia da informação,

10

| WIDE | 81 > FRONT

Gramma www.grammanet.com.br Como vender por meio das principais

princípios de sustentabilidade, mobilidade 2.0 para negócios, Cloud Computing, SaaS e virtualização, Web 2.0, redes sociais e muito mais. Ingressos: de R$ 440 a R$ 550.

29 e 30/11 Just Java 2010 Local: São Paulo www.sucesusp.org.br/evento_ ver.asp?id_palestra=23

ferramentas para criação de lojas virtuais, dicas de plataformas de e-commerce, análise de métricas, gestão de logística, atendimento aos clientes e muito mais.

JavaScript – Guia do programador Maurício Samy Silva Novatec www.novatec.com.br O autor apresenta a linguagem JavaScript, fornecendo uma fonte de consulta valiosa das suas

O principal evento da comunidade Java brasileira será realizado no Centro Universitário SENAC e contará com nove palestras que passam por temas como Java no ambiente servidor, Java em pequenos dispositivos, casos de sucesso da linguagem, dicas, problemas e soluções do dia a dia do desenvolvedor. Ingressos: de R$ 120 a R$ 150.

funcionalidades focadas nos modernos conceitos dos Padrões Web.

Google Android Ricardo R. Lecheta Novatec www.novatec.com.br O autor explica todos os passos necessários para que o desenvolvedor construa aplicações para dispositivos móveis, como localização por GPS e comunicação com

04/12 15° EDTED Local: Recife www.edted.com.br O Encontro de Design e Tecnologia Digital, maior evento de internet do país, levará aos pernambucanos palestras sobre Joomla!, Tagging, Magento, redes sociais e muitos outros temas por meio de profissionais renomados do mercado. Inscrições antecipadas com desconto. Ingressos: de R$ 24 a R$ 74.

a internet, com a plataforma open source Android SDK.

Twitter: chiclete & camisinha Tagil Oliveira Ramos Novatec www.novatec.com.br Os segredos e as técnicas para ter sucesso no microblog em uma linguagem bem-humorada, baseandose numa abordagem de marketing comportamental (behavioral marketing).

Participe do Fique por dentro! Envie notícias, curiosidades, sugestões ou críticas para redacao@revistawide.com.br.


DIR EITO N A W E B

Inte rn acional

Gilberto Martins de Almeida é advogado formado na PUC/RJ, com Mestrado na USP e cursos em Harvard e no M.I.T. Ex-Gerente Jurídico da IBM, onde trabalhou por 11 anos, no Brasil e nos EUA. Sócio de Martins de Almeida ­­– Advogados, escritório especializado.

Proteção jurídica de novas “formas” de negócio Sou webdesigner e estou desenvolvendo uma nova forma de negócio online, mas que utiliza tecnologias e técnicas já existentes. O meu diferencial reside apenas na forma inovadora em como irei usar tais tecnologias para oferecer um serviço inovador. Gostaria de saber se posso “patentear” ou garantir algum tipo de exclusividade nessa minha nova forma de negócio. Como eu faria isso e como se daria esse “monopólio”? Leandro Barreto

- leandro.sabarreto@hotmail.com

A linguagem de negócios e a linguagem jurídica muitas vezes coincidem, e em outras não. Para um empreendedor, nova “forma” de negócio costuma ser um novo negócio ou um novo “jeito” de fazer negócio, o que um juiz classificará como uma nova ideia ou uma nova forma. Por que o juiz faz essa distinção e em que ela pode ser útil ao empreendedor? Simplesmente porque patentes protegem apenas ideias. Embora o prazo de exclusividade que elas garantem seja curto (17 anos), protegem contra o surgimento de concorrência, pois abrangem o núcleo da ideia. Assim, nenhum competidor poderá livremente copiar a ideia, nem mesmo se quiser vesti-la com outra forma. No Brasil, ao contrário de nos EUA, a lei (Código da Propriedade Industrial) é mais restritiva quanto a se poder patentear métodos comerciais. Portanto, se a ideia se resumir estritamente a um novo método comercial, as chances de se conseguir uma patente são maiores no exterior. Por outro lado, se a nova “forma” de fazer negócio envolver uma nova ideia de como integrar equipamentos e programas, ela terá chances de ser enquadrada dentre as chamadas “patentes de combinação”. Finalmente, quando um software funciona numa nova ideia de simbiose com o hardware (por exemplo, o firmware que testa os componentes do computador durante o processo de inicialização), ele pode ser patenteado. E quanto ao código ou look-and-feel de software (inclusive de webpages ou websites)? Se tiverem originalidade, podem ser registrados como direito de autor, impedindo livre cópia por terceiros. Aqui se protege a “forma”. Por isso, novo código ou novo visual podem ser protegidos ainda que realizem a mesma função de produtos concorrentes (desde que estes não tenham sido patenteados). Como se vê, há várias opções, razão pela qual convém uma análise concreta de em quais dessas possibilidades se pode enquadrar, no Brasil e/ou no exterior, certa nova “forma” de negócio.

Twitter em tudo! Lisboa Enviado por Erick Rosa www.leoburnett.pt É difícil falar de alguma novidade na área digital. Afinal, tudo envelhece com a velocidade de um “reload”. Mas, vou arriscar a deixar aqui dicas que tenho encontrado online e que devoram horas do meu dia, os aplicativos que utilizam o Twitter como conteúdo: o Tweetdeck (www.tweetdeck. com) , o Echofon (www.echofon. com) e o Flipboard (www. flipboard.com) . O primeiro, no computador; o segundo, no telefone; e o terceiro, no iPad. Agora, há um grupo que produz conteúdo online que é genial: The Gregory Brothers (www.thegregorybrothers. com) . É difícil explicar o que

montados e aprovados com mais clareza pelo cliente. O usuário pode montar o website com navegação, rodapé e páginas realmente dinâmicas interagindo com templates e funcionalidades criadas na medida para cada projeto. A possibilidade de envio e visualização online pelo cliente facilita ainda mais o processo de aprovação, uma vez que o cliente tem a opção de enviar comentários sobre determinadas seções, áreas ou simples conteúdos do protótipo.Ficamos grande parte do desenvolvimento concentrados nos protótipos, estudando as ações dos usuários, testando posicionamentos, oferecendo soluções criativas e, então, uma vez aprovado o protótipo, tratamos no Photoshop e seguimos com as etapas posteriores.

eles fazem com tão poucos caracteres. Procure-os no Google, no YouTube e no iTunes. E, finalmente, o Toy Camera (www.creativeapplications.net/ iphone/toycamera-iphon) , para

o iPhone, que transforma qualquer fotógrafo amador em um cheio de estilo. Recomendo.

ProtoShare Vancouver Enviado por Marcio Bonfim www.opacitydesign.com Estamos há alguns meses testando uma ferramenta de protótipos e interfaces que tem aumentado a velocidade dos processos de trabalho: a ProtoShare (www.protoshare. com). Estou encantado com a eficiência e a variedade disponível de componentes para que os protótipos sejam 81 > FRONT | WIDE |

11


EM P REEND ED O RISMO Kauê Linden Empresário e publicitário, fundou a Hostnet quando tinha apenas 17 anos. Em dez anos de trabalho, além das atribuições executivas, criou projetos como a Olímpiada de Algoritmos nacional, que estimula o interesse de estudantes pela área de desenvolvimento de TI, e o site Artistaderua.com, que visa divulgar artistas que se apresentam em palcos improvisados nas calçadas de grandes cidades brasileiras.

"Somos Empresa Legal" Algumas vezes conhecemos pessoas que são marcantes pelo que fazem. Foi o que aconteceu comigo quando tive a oportunidade de visitar pela primeira vez uma favela, juntamente com Jon Maddog Hall — um dos principais evangelizadores do movimento software livre no mundo — e conhecer um empreendedor que chama a atenção pelo seu negócio. Marcelo Balisteri começou a trabalhar como vendedor de picolé nas praias do Rio de Janeiro com apenas nove anos de idade. Isso bem antes de a internet se tornar uma febre e o seu principal ganha-pão. Hoje, ele não é ainda um milionário e nem está preocupado com isso, mas é, sem dúvida, um ser humano de se tirar o chapéu e um exemplo de empreendedorismo.

12

| WIDE | 81 > FRONT

Atualmente, seu principal negócio é prover internet a baixo custo e sem fio para comunidades que residem em favelas. Tudo começou quando os primeiros computadores usados foram doados pelas patroas das mães de seus amigos. Na falta de acesso à internet dentro da comunidade, Marcelo encontrou uma oportunidade. Aos poucos, juntamente com um amigo que mais tarde se tornaria seu sócio, conseguiu uma conexão e, em seguida, foram expandindo entre outros moradores da comunidade que necessitavam de acesso à rede. Emprega em seu ofício as técnicas do jeitinho brasileiro, mas sem gambiarra. Reutiliza antenas antigas de transmissão de TV e software livre. Compete, segundo ele mesmo, com grandes empresas de telecomunicações, mas deixa claro que seu diferencial é ser local. Garante que seu suporte é muito mais ágil e não é restrito ao acesso de internet, além de sua equipe conseguir chegar à casa de

um cliente com problemas em poucas horas. Começou na informalidade, mas hoje exibe seus certificados e CNPJ sem reclamar dos impostos ou evidenciar qualquer frustração em toda sua vida como empreendedor. Seu sorriso estampado confirma o orgulho que sente por levar tecnologia, antes tão restrita, para diversas casas e lanhouses espalhadas pelo morro íngreme da favela do Parque da Cidade, que divide o mesmo morro que a Rocinha, a maior favela do Rio de Janeiro. Seu trabalho não passa despercebido. Se no começo correu atrás de investimento e foi taxado de maluco, hoje conta com o apoio da incubadora Gênesis, da PUC-Rio. Seu escritório fica na associação de moradores. Ele não abre mão de oferecer gratuitamente internet para aqueles que exerçam alguma atividade social na favela em que residem. Sacou a consideração social? Com a ajuda da incubadora Gênesis, Marcelo conseguiu ainda emplacar um projeto que levará à sua comunidade uma escola técnica de informática para ajudar a formar pessoal capacitado ao serviço de provimento de acesso à internet via rádio, criação gráfica, desenvolvimento de aplicativos para a web, gerenciamento de hotspot para hotéis e restaurantes e sistema de monitoramento digital. O empreendedor Marcelo Balisteri não é famoso, não é rico, não tem milhares de seguidores no Twitter, não é convidado ainda para dar palestras. Mas, já conquistou cerca de 300 clientes pagantes, firmou parcerias importantes e mostra orgulho de suas origens. Recompensa sua comunidade com um trabalho social. Enquanto alguns passam a vida reclamando da falta de oportunidades ou arrumando culpados e desculpas para seus fracassos, ele aprendeu a encontrar oportunidades no meio das dificuldades. Quer ver Marcelo falando por ele mesmo? Visite migre.me/1pIg1 e saiba mais sobre essa personalidade. Todos nós sempre temos que aprender com pessoas assim.


81 > FRONT | WIDE |

13


Agência

Portfólio

Criatividade e inovação.

Estas são as marcas da agência Diretta Com onze anos de estrada, mais de vinte contas ativas atualmente e uma equipe de dezessete profissionais, a Diretta consolidou-se em 2010 como uma agência full service visando ampliar a atuação no mercado online. Unindo a criatividade com a excelência em planejamento, Daniel Perrone, oriundo do mercado publicitário, e Peu Reis, que trabalhava em mesa de operações de Bancos, resolveram, em 1999, fundar a Agência Diretta. Com o legado do trabalho de Daniel em agências como DPZ, McCann Erickson e Foot Cone & Belding, a Diretta, em seu primeiro ano, atuava apenas offline. Em 2000, a agência percebeu o grande potencial que o mercado online oferecia e se dedicou a estudar com mais detalhe a comunicação que crescia aos poucos na internet. “A Diretta criou um modelo de atuação no mercado digital e, de lá para cá, a equipe foi crescendo à medida que as contas vinham. Atualmente, a agência possui mais de vinte contas ativas (muitas delas com mais de cinco anos de casa) e é vista

por seus clientes como um grande polo criativo e de estratégia digital. No ano de 2010, a Diretta posicionou-se como full service agency para ampliar a atuação no mercado online e conta com dezessete profissionais, escolhidos a dedo e de acordo com as habilidades que a agência oferece dentro do cenário nacional”, conta Daniel Perrone, destacando a visão que a agência tem sobre o mercado. “Há muito o que explorar no mercado digital brasileiro. Existe espaço para todas as agências, mas haverá uma segmentação natural de estilos, definições e objetivos entre cada uma delas. A Diretta se posta como agência “full line” criativa e acredita que o impacto causado pelos seus trabalhos deve ser semelhante à primeira visita a um parque de diversões, como a Disney World. Sem uma grande experiência inovadora ou criativa não há impacto, por consequência não há reciprocidade do target para o cliente”, afirma.

Diretta Ano de fundação 1999 Número de funcionários 17

Uma rádio sertaneja, um game viral e um site

Cidade-sede São Paulo (SP)

que mostra todas as etapas do circuito de rodeio promovido pela própria marca, que trabalha essa parte de eventos ao longo dos anos. Esses três canais foram desenvolvidos pela Diretta ao portal chamado “Sertanejo Bavaria”, que está sendo produzido dentro do MySpace e será a principal landing page para a campanha de mídia, que terá como principal mote a música sertaneja. Sobre o JavaScript, a biblioteca jQuery foi utilizada preservando o markup limpo e acessível. “Graças ao jQuery foi possível fazer animações suaves. A mudança entre páginas, barras de rolagem, imagens randômicas da home, fotos ampliando na galeria, logos em etapas anteriores e validação do formulário são exemplos do uso da tecnologia”, relata.

Site www.diretta.com.br

E-mail diretta@diretta.com.br Twitter @direttabr

14

| WIDE | 81 > DESIGN


CIRCUITO BAVARIA www.circuitobavariaderodeio.com.br

Sobre a tecnologia PHP + HTML5 + JAVASCRIPT (JQUERY) + AJAX + FLASH

Montagens das páginas em HTML5 e jQuery, com gerenciamento de conteúdos via PHP. Diversos plugins de jQuery auxiliaram na construção do website. Os flashs foram inseridos de maneira não obstrutiva, para que apareça, em forma de imagem, nos dispositivos que não dão suporte para a tecnologia (como iPhone).

POP UP www.popupstore.com.br

Outro projeto desenvolvido pela Diretta foi o

case da marca Pop Up Store, que consiste em um portal em Flash. Nele, concentra-se toda a parte institucional da marca no meio digital, um blog com as novidades e o acesso às redes sociais Twitter e Facebook. “A proposta da Pop Up Store, da empresária Fabiana Justus (filha do Roberto Justus), era ter uma presença extremamente jovem no meio digital, pois esta seria sua principal ferramenta de comunicação junto às suas clientes, em sua maioria mulheres entre 16 e 35 anos, antenadas com moda, tecnologia e uso das ferramentas sociais. A Diretta recebeu do cliente apenas o logotipo da empresa e foi incumbida de desenvolver toda a identidade e a comunicação”, conta Perrone.

Sobre a tecnologia FLASH + FLASH VIDEO + PHP

O Flash AS2 é a base do site, integrando todos os atalhos para o conteúdo da marca na internet. Já o PHP é utilizado para fazer o cadastro de usuários que queiram receber a newsletter e para mostrar a última mensagem do Twitter da Pop Up.

81 > DESIGN | WIDE |

15


Freelancer

Portfólio

“Me inspiro em tudo que vejo, sem limitações” Com foco em produções de interfaces digitais e de interações, Jorge Brivilati trabalhou em algumas das principais agências de publicidade no Brasil, como AlmapBBDO, Publicidade Interativa e CUBO.cc. Atualmente, é diretor de arte da JWT Brasil. Pode-se dizer que um vendedor de cursos de informática foi o maior responsável na escolha profissional de Jorge Brivilati, que atualmente estuda cinema e se encontra focado em criações audiovisuais e interações. “Fazia eletrônica no 2º grau e me preparava para seguir na carreira de biologia marinha quando me deparei com um vendedor de cursos de informática ligando para minha casa e oferecendo um desconto em cursos de webdesign, por indicação de uma prima minha. Assim, comecei a fazer um curso de Photoshop, Fireworks, Pagemaker, Dreamweaver etc. Já existia a necessidade de trabalhar com alguns softwares, pois fotografava desde cedo, então sempre buscava mais técnicas para melhorar as fotos. Interessei-me tanto que, em pouco tempo, estava ministrando cursos na mesma instituição. Estudava bastante em casa e fiz cursos de design gráfico; em contrapartida comecei a ir mal na escola pelas noites perdidas fazendo layouts — experimentava bastante. Comecei a fazer alguns freelas para familiares e clientes externos. Daí para a frente, vi que estava fazendo algo de que realmente gostava e até levava jeito — segui carreira”, conta.

Jorge Brivilati E-mail brivilati@gmail.com Site www.brivilati.com Twitter @brivilati

16

| WIDE | 81 > DESIGN

Sobre suas referências criativas, Jorge tem uma gama extensa de fontes. “Inspiro-me em tudo que vejo, sem limitações. Seja um gráfico de jornal, uma diagramação de revista, um character generator de um programa de TV, a direção de arte de um filme… Muita inspiração vem de fontes fotográficas, já que é outra paixão — busco bastantes referências em composições, atitudes e cores. Outra fonte são as telas e os muros pintados por designers, desenhistas e ilustradores que estão espalhados pela internet, por ruas e galerias. Procuro me basear, também, nos próprios amigos que trabalham comigo e que acho ter um padrão de qualidade muito elevado; a troca de ideias com eles é algo constante.” A Kibon, empresa no mercado de sorvetes,

resolveu apostar em dois tradicionais bombons (Sonho de Valsa e Ouro Branco) numa campanha que tinha como objetivo atingir o público feminino. “Tendo em vista nosso público, que era basicamente mulheres, decidi criar um ‘sonho gelado’, como se estivéssemos numa plataforma mágica, nas nuvens; usando algo que as agradasse visualmente, por meio de cores, movimentos, fumaça e traços. As cores foram escolhidas pois, além de estarem em harmonia com os produtos, eram ótimas para se trabalhar juntas”, conta Jorge, que também comenta as etapas de produção da campanha: “Este projeto passou por todo um estudo dessas áreas, iniciando pela arquitetura. Como raramente temos tempo hábil para fazer testes de usabilidade pós-criação, fizemos durante o processo de criação, investigando o que poderia ou não ser confuso ou usável no site. Dentre todos esses processos, demoramos por volta de quatro semanas para lançar o site inteiro no ar.”


BOMBOM DE COLHERADA http://brivilati.com/kibon.html

Sobre a tecnologia FLASH + AS2 + PHP + AFTER EFFECTS + PHOTOSHOP + ILLUSTRATOR + MAYA

“A necessidade de tornar o site dinâmico, tanto em movimento quanto em interação, nos levou a utilizar tais programas e linguagens”, relata Jorge.

PÁSCOA CHOCOLOVERS http://brivilati.com/choco.html

O site Chocolovers tinha como objetivo ser

um receptivo para a promoção da Nestlé na época da Páscoa, quando o usuário participava por meio de SMS’s. “Precisávamos mostrar de forma fácil como participar, os prêmios e com quais códigos o usuário já estaria participando. Por meio de mídia online, PDVs e o próprio site da Nestlé, o convidaríamos até o site”, explica Jorge. Jorge Brivilati também conta detalhes referentes ao processo criativo do projeto. “Primeiro de tudo, precisávamos pensar em um jeito de alinharmos todos os meios de comunicação para criarmos uma identidade do projeto. Daí, depois de alinharmos tudo, comecei o layout, estudando cada sessão do site e como usaria alguns elementos fundamentais nele.”

Sobre a tecnologia FLASH + PHOTOSHOP + ILLUSTRATOR + AS3 + PHP

“Por ser um site com muitos elementos divertidos e coloridos, precisávamos de movimento para lhe dar vida, para o usuário entrar no universo de uma ‘fábrica maluca’ de chocolates. Nada melhor que usar Flash para criar esse ambiente e, ao mesmo tempo, torná-lo leve e com boa taxa de processamento, incluindo o loading, que também tinha um movimento legal, muito bem animado”, revela Jorge.

81 > DESIGN | WIDE |

17


Ilustração

Portfólio

Guto Lins Designer e professor do Departamento de Artes e Design da PUC-Rio, Guto Lins tem ampla experiência no mercado editorial, fonográfico e de entretenimento. É autor e ilustrador de livros infantis, e seu trabalho é reconhecido com o selo “Altamente Recomendável” da Fundação Nacional do Livro Infantil e Juvenil. Wide Como define seu estilo?

GUTO O que norteia tudo é o design. Fui aprendendo a desenvolver linguagens e idiomas diversos, já que os discursos e os receptores também mudam. Cada projeto, cada texto, cada momento histórico pede uma solução específica. Já tive, inclusive, a oportunidade de reeditar textos meus em outra editora e anos depois. Em alguns, mantive a solução original e, em outros, parti para técnicas e resultados diversos. Até diametralmente opostos. Wide Onde você busca referências para o

seu trabalho? GUTO Como diz a lenda, o processo intelectual se divide em 10% de inspiração e 90% de transpiração. Os links filosóficos correm lado a lado ao aproveitamento econômico da peça final e o resultado plástico tem que atingir às expectativas. Cada projeto pede referências específicas, as quais podem ser desde publicações oficiais até soluções estéticas dirigidas, a princípio, para áreas diversas. O segredo é ir acumulando tais REFERÊNCIAS: páginas de revistas, fotos, sites…

Guto Lins E-mail guto@manifestodesign.com.br Site www.manifestodesign.com.br

18

| WIDE | 81 > DESIGN


MÃE

(2008) Cliente Projeto pessoal. Livro Mãe. Técnicas Colagem digital sobre ilustração vetorial.

ARROTO

(2004) Cliente Ilustração para o livro Manual de boas maneiras. Texto: Guto Lins / Editora: Jorge Zahar / 2004. Técnicas Colagem de objetos + foto + aplicação de elementos digitalmente.

MACHÃO

(2000) Cliente revista Domingo (Jornal do Brasil). Técnicas Colagem digital.

FUMANTE

(1995) Cliente revista Marie Claire. Técnicas Pastel a óleo, aquarela, lápis de cor e lâmina de barbear.

81 > DESIGN | WIDE |

19


Lente Digital

Portfólio

Alexandre Cavalheiro Formado em design gráfico e fotografia, Alexandre Cavalheiro atualmente presta serviço para a agência Markplan, na qual já realizou diversos trabalhos para clientes de grande porte, como Samsung, LG, Coca-Cola, Chevrolet etc. Além da agência, possui o seu próprio estúdio de design, onde é diretor de arte e desenvolve atividades profissionais e experimentais. Wide Ângulo, iluminação, textura, movimento, corte…

O que mais se destaca no seu trabalho? ALEXANDRE Observar silhuetas, texturas e como a luz pode trabalhar a nosso favor. Agradeço ao design gráfico e à web por essa posição orientalista que dá valor à unidade absoluta entre imagem e espectador. Para o meu trabalho, a fotografia é espontânea de uma atenção visual perpétua, que segue naquele momento a sua eternidade. O design, por seu grafismo, elabora aquilo que a nossa consciência procurou naquele instante. A foto é uma ação imediata; o desenho, uma contemplação. Viajar

Alexandre Cavalheiro E-mail ale@estudiotrac.com.br Site www.estudiotrac.com.br

20

| WIDE | 81 > DESIGN

para vários lugares me ajudou muito a refinar minha percepção daquilo que vejo e registro. Gosto muito de levar as pessoas aos lugares através das minhas imagens; a fotografia tem esse papel.


Lanternas Lyon França Câmera Canon Eos 450d Objetiva 18-55 mm - Velocidade 1/125s f:11

Bellecour Lyon França Câmera Canon Eos 450d Objetiva 18-55 mm - Velocidade 1/125s f:11

Tram Geneve Suiça Câmera Canon Eos 450d Objetiva 18-55 mm - Velocidade 1/3s f:5.6

Janelas Roma Câmera Canon Eos 450d Objetiva 18-55 mm - Velocidade 1/350s f:5.6

81 > DESIGN | WIDE |

21


Fontes de Inspiração

Portfólio

Fabio Lopez Designer por formação e mestre pela ESDI (Escola Superior de Desenho Industrial da UERJ), Fabio Lopez trabalha desde 1998 com pesquisa e desenvolvimento de fontes digitais e tem projetos de design gráfico apresentados em exposições e publicações nacionais e internacionais. Em 2010, foi o jurado brasileiro da Tipos Latinos – 4ª mostra latino-americana de tipografia. Fabio também é freelancer em projetos de identidade, lettering, moda e ilustração, e pratica design subversivo nas horas vagas. Wide Como surgiu a ideia de criar esta fonte?

Wide De que maneira o design de tipos influencia na

FABIO Meu trabalho de graduação na faculdade foi

transmissão da mensagem? FABIO Podemos entender uma tipografia como sendo o tom de voz empregado para dar sonoridade ao texto. Quando optamos por uma fonte tradicional, por exemplo, estamos associando uma bagagem cultural específica a essa mensagem e, por consequência, relacionando o conteúdo do texto a uma carga semântica particular e bem definida. Quando optamos por usar uma tipografia mais contemporânea nesse mesmo texto, as associações são diferentes e a mensagem também tem seu caráter modificado. A tipografia não tem o poder de mudar o texto, mas pode interferir na percepção da mensagem a partir de relações subjetivas estabelecidas na sua estrutura formal. Nós, designers, somos treinados para fazer isso de maneira precisa, conduzindo os leitores pelas trilhas visuais que deixamos no texto.

uma pesquisa sobre o processo de criação de fontes de texto. Para ilustrar esse levantamento, peguei um projeto tipográfico de minha autoria — a fonte Colonia — e o refiz totalmente, aplicando os diversos parâmetros técnicos coletados na pesquisa. A fonte foi inteiramente remodelada e essa tarefa constituiu a parte prática do meu trabalho de graduação. Tipograficamente, é um projeto completo, mas sua importância maior reside em ter sido um laboratório de tipografia, servindo ainda hoje como um bom ponto de apoio para estudantes e designers. Em 2003, realizei algumas modificações e ampliei a família e, no ano seguinte, a fonte participou de algumas mostras e publicações, tendo sido destaque na 7ª Bienal de Design Gráfico da ADG.

Fabio Lopez E-mail fltypedesigner@hotmail.com Site www.flopez.com.br

Twitter @flopezdesign

22

| WIDE | 81 > DESIGN


81 > DESIGN | WIDE |

23


Arte + tecnologia

O universo das composições de imagens Por Tiago Bosco Por meio de programas gráficos, o designer encontra-se diante de um universo amplo para manipular qualquer tipo de figura através da arte. Essa é a composição de imagens, artifício explorado de maneira recorrente pelos profissionais na web.

A primeira lição Helena de Barros

24

| WIDE | 81 > DESIGN


design

A

rtistas que marcaram época, como Leonardo da Vinci e Michelângelo, por exemplo, eternizaram-se pelas suas belas pinturas à base de pincel e tinta. Desde o período do Renascimento, alguns séculos se passaram. Hoje, muitos artistas têm a tecnologia a serviço da própria arte. É nesse contexto em que a composição de imagem se insere no trabalho dos designers. Por meio dela, a criatividade artística alinha-se com programas gráficos, proporcionando, assim, diversas possibilidades para o resultado de uma determinada imagem. Fernando Bittar, um dos diretores de arte da agência Gringo (www.gringo.nu) , define o que é composição de imagem. “É o processo de organizar diferentes elementos visuais com o objetivo de compor uma segunda imagem a partir deles.” A designer Marcela Rezende (www.marcelarezo.com), especialista em composição, comenta o trabalho que desenvolve. “Defino o trabalho que faço como a criação de cenários virtuais mediante a fusão de diferentes imagens e contextos. É como se fosse a criação de um mundo fictício, ou até mesmo irreal, por meio da junção de diversas referências fotográficas. Esse trabalho se realiza através da composição propriamente dita e, junto a ela, agregamos os ajustes de cores, tons, luminosidade, proporção, escala dos objetos, o ângulo de tomada e a perspectiva de cada elemento que compõe a cena. Tudo isso possibilita um realismo enorme, criando possibilidades de executar muitos trabalhos que às vezes seriam impossíveis de realizar por motivos funcionais e organizacionais. Em alguns casos, a fusão de imagens nos possibilita até a criação de mundos inimagináveis e inexistentes.” Um questionamento muitas vezes recorrente entre os profissionais que trabalham com composição de imagens é até onde vai a liberdade artística de criação. A designer gráfica Helena de Barros (www.helenbar.com) comenta as variantes que podem ocorrer, dando como exemplo o que ela desenvolve. “O trabalho que realizo de fotomontagem é um trabalho artístico, com motivações pessoais, no qual tenho liberdade total para fazer o que quiser. Num trabalho de design, a abordagem seria outra, com as restrições do briefing e de contexto relacionadas a cada caso específico. Quando se trata de um trabalho de design, é importante que o profissional saiba adequar sua linguagem e seu estilo para valorizar o conteúdo e o discurso do trabalho em questão.” Flavio Albino, um dos sócios da agência Platinum (www.platinum.com.br) , especializada em composição de imagens, explica o limite da liberdade de criação. “Depende do cliente. Tivemos casos de não ter qualquer tipo de liberdade, ou seja, executar o layout pré-aprovado, e tivemos casos em que fomos contratados para inclusive criar os layouts e dar ideias, como no caso da Disney. A agência que tinha a conta dos parques da Disney estava há quase um ano tentando aprovar alguns layouts sem sucesso. Eles nos passaram o briefing do trabalho e pediram que sugeríssemos um layout. Fizemos um brainstorm e começamos o processo de criação das imagens praticamente do zero”, comenta.

Como em todo trabalho, algumas regras devem ser respeitadas visando a um bom resultado final. Em se tratando de composição de imagem, não é diferente. Flavio Albino destaca a importância de coerência entre a luz e os ângulos. “Sem isso, nenhuma composição vai ficar real”, afirma. Marcela Rezende aponta o bom senso estético somado a alguns recursos, como a Regra dos Terços, a profundidade de campo, a diferenciação pela cor e a perspectiva. “Tem que existir uma relação confortável para os olhos entre o objeto e a cena”, analisa. Já Helena de Barros enumera algumas regras básicas para composições realistas: “As regras só existem quando se procura simular uma composição realista. Nesse caso, o principal é realizar recortes bem acabados, ter imagens com resoluções compatíveis dentro da escala em que serão utilizadas, manter critérios coerentes de proporção, profundidade focal e de iluminação entre os elementos. Mas, se a composição não for realista, o que importa mesmo é o conceito, o estilo e a linguagem, o impacto da imagem como um todo.” Com o desenvolvimento da tecnologia, máquinas fotográficas digitais e softwares gráficos acabaram se tornando facilitadores no trabalho dos designers. Sob essa perspectiva, quais as armadilhas

As melhores ferramentas para esse tipo de trabalho são o nosso cérebro, mãos e olhos Helena de Barros

Demeter - Helena de Barros 81 > DESIGN | WIDE |

25


design

É importante que o designer saiba adequar sua linguagem e seu estilo para valorizar o conteúdo e o discurso do trabalho em questão Flavio Albino

Vela d’água - Agência Platinum

Caravela Agência Platinum

que os profissionais devem evitar para que um projeto não deixe de ser inovador? Para Fernando Bittar, achar que o domínio da ferramenta é o principal fator no sucesso de um trabalho é um grande risco. “Isso pode ajudar muito, como um catalisador, no processo. Mas, no fim das contas, o que realmente importa é a ideia inicial, a mensagem ou a história que você quer contar em cada trabalho.” Opinião compartilhada por Flavio Albino: “Não deixar que os limites das ferramentas (softwares, máquinas digitais etc.) sejam os seus limites. As ferramentas estão ali para viabilizar a sua ideia, e não para limitá-la. Isso acontece com certa frequência na Platinum

26

| WIDE | 81 > DESIGN

até pelas nossas imagens serem tão complexas e inovadoras. Muitas vezes começamos um trabalho sem ter ideia de como vamos executá-lo, mas sabemos que temos que dar um jeito e, com isso, a gente cria várias soluções inusitadas. Não declinamos desafios, gostamos deles porque nos obrigam a pensar e a criar”, analisa. Helena de Barros destaca a capacidade humana, que, para ela, sobrepõe-se a qualquer ferramenta. “As melhores ferramentas para esse tipo de trabalho são o nosso cérebro, mãos e olhos. Os problemas e as questões de uma imagem são criados e propostos por nós mesmos e somos os únicos capazes de solucioná-los”, afirma.


Ethonic - Marcela Rezende

Boxing Marcela Rezende

Programas gráficos e cursos específicos

Um bom curso é o primeiro passo para quem quer trabalhar com composição Marcela Rezende

Para quem inicia nesse universo de composição de imagem ou mesmo para aqueles que têm curiosidade, é comum se perguntar qual o melhor programa gráfico a ser utilizado. Nesse quesito, o os programas da Adobe são unânimes entre os especialistas. “Existem muitos softwares de 3D, cada um é forte em uma coisa, então vai do gosto pessoal de cada profissional. Mas, o Photoshop é o que vai unir tudo”, afirma Flavio Albino, opinião compartilhada por Helena de Barros: “Considero os programas da Adobe muito consistentes e bem construídos. Talvez não sejam os melhores para quem está começando, mas com paciência e prática, são excelentes para se desenvolver um bom trabalho”. Fernando Bittar também destaca os programas da Adobe, mas faz uma ressalva importante: “O software geralmente é indiferente para o sucesso de um trabalho, 81 > DESIGN | WIDE |

27


design

os princípios básicos podem ser aplicados em qualquer programa. Mas, particularmente, utilizo os da Adobe. Photoshop e Illustrator são dois que estão sempre presentes no meu dia a dia”, explica. Cursos específicos sobre composição de imagem também são importantes para a capacitação de um profissional. É o que orienta Marcela Rezenda: “Um bom curso é o primeiro passo para quem quer trabalhar com composição. Dominar o software é fundamental. As técnicas utilizadas nesse tipo de trabalho geralmente são ensinadas em módulos avançados de cursos. Para quem pretende iniciar na área de manipulação de imagens, indico os cursos certificados pela Adobe.” Fernando Bittar explica que os cursos também podem contribuir para o desenvolvimento da prática profissional. “Cursos na área são interessantes não só pelo aprofundamento teórico, mas também como uma oportunidade de praticar esses princípios sem a pressão de prazos, clientes etc.”, finaliza.

O software geralmente é indiferente para o sucesso de um trabalho, os princípios básicos podem ser aplicados em qualquer programa Fernando Bittar Radio Levi’s - Agência Gringo

Under - Agência Gringo

28

| WIDE | 81 > DESIGN


81 > DESIGN | WIDE |

29


Ser freelancer

Como planejar, administrar e organizar suas tarefas

Por Tiago Bosco

A Wide conversou com André Beltrão, autor do livro Manual do freela: Quanto custa meu design?, lançado recentemente pela editora A2B. Beltrão nos conta detalhes sobre o trabalho do profissional freelancer, com dicas e sugestões, e ainda comenta sobre a sua mais nova publicação. 30

| WIDE | 81 > DESIGN


design

André Beltrão André Beltrão dirige a agência Creamcrackers (www.creamcrackers.com.br), onde coordena projetos de identidade visual, merchandising e embalagem. É designer gráfico graduado pela PUC-Rio, MBA Excecutivo em Marketing pelo Ibmec-RJ e professor dos cursos de Design e Publicidade da UniverCidade-RJ - E-mail: andrebeltrao@msn.com

WIDE De onde partiu a ideia de lançar o livro Manual do freela:

Quanto custa meu design? ANDRÉ A ideia de criar a coleção Manual do freela surgiu nos workshops que organizamos no Studio Creamcrackers, de 2006 a 2008, e nas oficinas que ministrei em encontros de estudantes. Eles foram pensados para cobrir uma lacuna que havia, fazendo a ponte entre os programas de empreendedorismo, marketing e os conhecimentos de design para dar algumas ferramentas a mais para aqueles que querem se lançar no mercado. WIDE Muitos iniciantes na profissão devem se perguntar como

fazer para conseguir seus primeiros trabalhos freelas. O que você diria para esses jovens profissionais? ANDRÉ É preciso criar uma rede de contatos, cultivar uma postura ética e buscar o máximo de conhecimento profissional em sua área e em áreas afins. É importante montar um portfólio consistente e ser autêntico. Um dos próximos Manuais do freela será exatamante sobre esse assunto, e está sendo preparado pelo Bruno Porto, que atualmente leciona Design na China. Será o manual de autopromoção. WIDE Vale a pena ser freelancer? Até que ponto? Dá para se viver

somente com essa função? ANDRÉ Vale sim, se você for disciplinado, perseverante e organizado. É bom não ter chefe, mas ao mesmo tempo você tem diversos chefes (cada cliente, até certo ponto, é seu chefe). É bom poder ganhar mais se você trabalhar mais, porém não ter salário fixo é algo que traz preocupações. Depende muito de onde se quer chegar e os riscos que se está disposto a correr. Dá para viver dos freelas, sim, mas o caminho natural é evoluir para uma agência depois de algum tempo. WIDE Com toda a sua experiência, quais as maiores dificul-

dades encontradas pela maioria dos designers que trabalham como freelancer? ANDRÉ Acho que a maior dificuldade é sempre financeira. O freela

O caminho natural é evoluir para uma agência depois de algum tempo

está mais sujeito às flutuações do mercado, como crises, altas etc. Se não se planejar bem, pode cair naquela armadilha de passar alguns meses com muitos trabalhos, sem tempo de procurar novos projetos e, em seguida, ficar meses com poucos trabalhos e já tendo gastado o que conseguiu nos meses anteriores. É importante ser organizado e planejado. WIDE No livro você afirma que “ser eficiente é manejar essas três

variáveis: tempo, dinheiro e qualidade”. Você poderia nos contar e detalhar melhor como obter sucesso dessa forma? ANDRÉ O conceito diz que ganhamos em eficiência quando conseguimos fazer algo mais rápido sem prejudicar a qualidade nem cobrar mais por isso; quando conseguimos melhorar a qualidade sem levar mais tempo para fazer, e pelo mesmo custo; e quando conseguimos lucrar mais sem prejudicar a qualidade nem levar mais tempo para fazer. As três têm a ver com gerar mais recursos, otimizar o trabalho e superar as expectativas dos clientes. WIDE Você também apresenta que o freelancer deve ter

noções de administração, marketing, contabilidade etc. Na sua opinião, qual a melhor maneira de o profissional adquirir essas habilidades? ANDRÉ A meu ver, quem quer ser um bom profissional de design, freela ou não, precisa complementar sua formação com algumas matérias de outras áreas de conhecimento, como psicologia social, marketing e administração. Pode fazer isso cursando 81 > DESIGN | WIDE |

31


André Beltrão preparou para a Wide dez dicas para o designer freelancer obter sucesso na profissão. 1. Seja você mesmo; 2. Procure conhecer o que seu cliente faz; 3. Procure trabalhar com clientes e produtos de que você goste ou com os quais se identifique; 4. Seja planejador; 5. Seja controlador (não dependa dos outros); 6. Seja analítico (perceba o que está acontecendo, tire conclusões); 7. Seja econômico; 8. Seja organizado; 9. Busque aprender sempre mais; 10. Saiba se vender.

É preciso acreditar no que você está fazendo e em si mesmo

Não necessariamente nessa ordem.

matérias eletivas na universidade, cursando uma pós-graduação ou mesmo fazendo cursos de extensão. WIDE “Design é uma profissão essencialmente empreendedora,

mas os estudantes de design não estão acostumados a práticas de gestão.” Com base nessa sua afirmação presente no livro, o que os estudantes de design podem fazer para obter um melhor desempenho, alinhando prática profissional e gestão? ANDRÉ Precisam primeiramente conseguir administrar seu tempo e, em seguida, planejar o que querem ser, definir metas e esboçar planos de estratégia para atingi-las. Em paralelo, estudar e fazer cursos complementares. Recomendo começar depois de ter se preparado um pouco. WIDE Quais tipos de cursos você indicaria a um profissional

freelancer? ANDRÉ Para quem quer trabalhar sozinho ou abrir uma agência, além das áreas de conhecimento complementar mencionadas antes, recomendo alguns cursos oferecidos pelo Sebrae, por

32

| WIDE | 81 > DESIGN

exemplo, o de como iniciar um negócio, de atendimento e o Empretec. Esses cursos são motivadores e, enquanto os acadêmicos fornecem informações teóricas e conhecimentos de base, estes transmitem informações práticas. WIDE Quais os fatores que devem ser levados em consideração

pelo freelancer, para que ele calcule corretamente o custo de um projeto e cobre da forma mais adequada? ANDRÉ 1) Saber quais os custos e as despesas mensais ele tem ou terá em um futuro próximo, para saber o custo de sua hora de trabalho e o de sua estrutura. 2) Saber delimitar a extensão do trabalho para avaliar o tempo necessário. Isso ele pode obter na reunião de briefing, que permitirá prever o tempo e multiplicar a previsão pelo custo-hora para descobrir o gasto. 3) Precisa buscar informações sobre os produtos do cliente e sobre a estrutura da empresa. Isso pode ajuda a prever, por exemplo, se o seu contato é que aprovará o projeto ou se há uma estrutura muito verticalizada onde o contato não tem grande força — isso ajuda


Neste livro, André Beltrão mostra de maneira divertida, concisa e didática os segredos para a gestão eficiente da carreira do freelancer. São muitas – e fundamentais – as dicas: como alocar os diversos custos fixos e também os variáveis de cada projeto; de que forma calcular juros para parcelamentos; quando dar descontos; qual a hora ideal de abrir uma empresa; dicas para se relacionar com os clientes (inclusive com os difíceis) e como valorizar o seu trabalho e administrar trabalho/vida pessoal, sem dramas.

a prever se haverá mais ou menos riscos de retrabalho e o papel econômico que seu projeto terá para a organização e, em função disso, estipular a margem de reserva de tempo e de lucro desejadas. 4) Saber como é a política de pagamento/faturamento do cliente para definir os percentuais de impostos e as taxas a incluir no preço. WIDE Qual o recado que você deixaria para os jovens designers que pretendem seguir uma carreira como freelancer? ANDRÉ É preciso acreditar no que você está fazendo e em si mesmo. Busque oportunidades, seja proativo e participativo; o sucesso de seus clientes será o seu. Tenha paciência, determinação e mande ver! 80 81 > DESIGN | WIDE |

33


M

n i e d a

l i z Bra

Encarado o desafio de uma experiência internacional Uma experiência internacional é garantia de amadurecimento e valorização profissional? Qual o diferencial que a vivência no exterior faz na carreira e no currículo? Profissionais brasileiros contam detalhes de suas experiências profissionais fora do país e orientam aqueles que desejam encarar o desafio 34

| WIDE | 81 > DESIGN

Ilustração - Carolina Vigna-Marú


design

opinião

Caio Lazzuri Diretor de arte da Goodby, Silverstein & Partners, nos EUA. www.goodbysilverstein.com

A capacidade de se adaptar e produzir em cenários e situações diferentes é essencial para quem trabalha com comunicação, especialmente quando o foco é comunicação digital. Trabalhar fora da sua zona de conforto faz com que você se torne um profissional mais versátil. Além da chance de aprender sobre novas culturas, é obrigatório que você se familiarize com a cultura corporativa de onde quer que você esteja, o que, consequentemente, expande seu repertório. A parte internacional de minha carreira começou em 2003 em uma região não muito convencional. O primeiro chamado foi para um freela para a operação da telecom britânica Vodafone no Oriente Médio. O trabalho era focado nos países do Golfo Persa. Especificamente Bahrain e Kuwait. Após os primeiros meses, nossa abrangência se estendeu para o Líbano, em Beirut, e outros treze países na África. Resultado, o “freela” se estendeu por dois anos, em que eu dividia meu tempo morando entre Beirut e Bahrain. Em 2005, após o assassinato do então primeiro ministro Rafik Hariri, a frágil estabilidade libanesa foi pro buraco e a escalada no número de atentados à bomba atingiu meu bom-senso em cheio e me fez voltar para o Brasil. Passei quase um ano em São Paulo, onde, junto com amigos e ex-parceiros de trabalho, começamos uma divisão de novas mídias dentro de uma produtora de publicidade tradicional, a Academia de Filmes. De lá para cá, a Academia mudou de nome para Margarida e nosso departamento virou a Colmeia, empresa que tem feito muita coisa legal aí no mercado brasileiro. Durante esse período, recebi uma proposta da AKQA, agência digital responsável por grandes campanhas para grandes marcas, como Nike, Xbox, Visa, entre outras. A ideia era viver e trabalhar em São Francisco, Califórnia. Topei e me mandei novamente do Brasil. Trabalhei na AKQA por dois anos, de 2006 a 2008, quando tive a oportunidade de participar de produções incríveis para grandes clientes e, o que é mais importante, cercado de gente interessante e muito competente. O que mais me impressionou nesse momento foi o quão madura a estrutura da empresa me pareceu: o processo, a atenção aos detalhes e o compromisso real com a qualidade do produto final. Além disso, o óbvio: prazos e verbas mais razoáveis em comparação ao mercado brasileiro. Depois de um determinado período, o modelo híbrido da AKQA (agência + produtora) acabou por limitar minha capacidade de produzir com a qualidade necessária. No caso da Nike, por exemplo,

a maioria do trabalho era guiado pela ideia principal da AOR (Agency of Record), nesse caso, da Wieden+Kennedy. Eram eles os detentores dos assignments maiores, e isso me despertou o interesse em trabalhar para um tipo de agência mais tradicional e com um leverage maior com os clientes. Foi então que recebi o convite da Goodby, Silverstein & Partners, onde trabalho hoje em dia. Agência extremamente criativa, mundialmente relevante e, apesar da origem tradicional, muito bem articulada nas disciplinas digitais. Além se ser um grupo de rockstars de diversos países diferentes (tem gente de 39 países por aqui). Entre Brasil, Bahrain, Líbano e EUA, as diferenças culturais não poderiam ser maiores, porém os objetivos profissionais são, de certa forma, similares. Todos nós estamos sempre em busca da excelência máxima, tanto conceitualmente quanto do ponto de vista de execução e, consequentemente, resultados. Uma diferença marcante entre o modo de produção brasileiro e americano é a seguinte: brasileiro tem muito torque, porém não tem muita estamina. E o americano é absolutamente o contrário. Em São Paulo é tudo muito rápido, não somos treinados para trabalhar em projetos de longa duração. Consequentemente, é fácil para quem sai do Brasil para trabalhar no mercado norte-americano, por exemplo, frustrar-se com a quantidade de reuniões e a extensão dos projetos. Dicas pra quem quer ter uma experiência no exterior:

Pense no lugar onde você quer morar com muito cuidado. E no lugar em que você quer trabalhar também. Pesquise sobre o custo de vida e todos os detalhes que vão afetar seu dia a dia. É melhor fazer a lição de casa e acertar o lugar do que ficar pulando de galho em galho ou acabar frustrado num lugar estranho e longe dos seus amigos e família. Outra coisa, para quem é criativo, o visto de trabalho depende do seu desempenho profissional. Em outras palavras, depende de reconhecimento internacional, que em geral significa prêmios e ter seu trabalho exposto em publicações globais e relevantes. Última dica. Se você receber uma proposta de um lugar que não conhece, a empresa que deseja lhe contratar tem a obrigação de lhe levar até lá, para que você possa conhecer o lugar onde pretende morar. Empresas que não oferecem esse tipo de coisa dificilmente têm dinheiro para arcar com os custos legais incluídos ao contratar um profissional de outro país. 81 > DESIGN | WIDE |

35


design

Marcio Holanda Diretor de Arte da agência Ogilvy, Itália www.ogilvy.it

A minha experiência internacional está diretamente ligada à agência em que trabalho há sete anos, a Ogilvy. Depois de quase três anos na Ogilvy Brasil, surgiu a oportunidade de trabalhar na Ogilvy do México, um país com um mercado muito parecido com o nosso, porém com particularidades culturais muito interessantes. E, posteriormente, de ir à Itália, na sucursal da Ogilvy de Milão, onde estou hoje. De modo geral, trabalhar no exterior como diretor de arte não é muito diferente do Brasil, até porque, no caso de agências internacionais como a Ogilvy, que é responsável pela comunicação de tantos clientes também internacionais, o processo criativo acaba sendo parecido para algumas das marcas em que eu já tinha trabalhado no Brasil. Além disso, as ferramentas de trabalho nada se diferem: o velho e bom pacote de programas da Adobe. O que difere do Brasil é o que está ao redor disso: a mudança de ambiente, de língua, de cultura — fatores que algumas vezes influenciam no processo criativo. Exemplo disso é quando estamos meu redator/dupla e eu em processo de brainstorm para uma campanha. Deparo-me com ideias, conceitos, expressões artísticas que não funcionariam no Brasil. Ou o contrário. Cheguei a apresentar para o meu amigo redator o ritmo do Forró in the Dark, uma banda que está fazendo sucesso no exterior. Para ir mais a

Cinthia Ruiz Gerente de design da Metatron www.metatron.com.br

Após concluir minha graduação no Brasil, já como profissional, decidi fazer uma especialização que fosse realmente um diferencial no meu currículo e me desse uma boa base de conhecimento, para que estivesse preparada e transmitisse credibilidade à empresa que estivesse disposta a apostar em mim. Foi então que me inscrevi em um programa de bolsa para estudos na Espanha. Escolhi o Máster en Artes Digitales da Universidade Pompeu Fabra, em Barcelona. Fui aceita! Nunca tive grande interesse em morar fora do Brasil, o que contribuiu muito para minha insegurança em me dispor a passar um ano e meio sozinha, em um país estranho. Mas, eu não poderia desperdiçar essa oportunidade, ainda mais ganhando uma bolsa de estudos. Sempre fica em minha cabeça uma frase que meu irmão me

36

| WIDE | 81 > DESIGN

fundo na explicação, falei da festa de São João, mas acho que ele não entendeu muito bem. “Festa di San Giovanni?”. Como explicar a alma da Festa de São João para um estrangeiro? E ainda na parte cultural, o idioma influencia bastante, mesmo para quem é diretor de arte. É óbvio que saber a língua local é de extrema importância. O inglês me ajudou no início, mas tive que me empenhar muito para aprender o espanhol e o italiano depressa, recorrendo a livros e estudando em casa. Mas tanto no México como na Itália as pessoas são bastante tolerantes quando um estrangeiro ainda não fala bem suas línguas. E toda a dificuldade de adaptação do início se dilui a partir do momento em que se expressa melhor a língua local, tanto fora quanto dentro do ambiente de trabalho. Agora, para quem quer embarcar nessa grande experiência no exterior: em alguns países, como a própria Itália, a imigração é tratada de forma muito rigorosa em termos de burocracia. Por isso, é muito importante para quem quer ter uma experiência internacional já sair do país com os papéis na mão. Isso ajuda no momento da contratação de qualquer empresa no exterior. Já na parte “vida pessoal”, morar no exterior é uma delícia. Consigo realizar o desejo de conhecer lugares que só conhecia por meio de livros ou da TV, desde Chichen Itza ao Coliseu. Parece piegas o que eu digo, mas conhecer pessoas, lugares e outras tradições só acrescentam à bagagem cultural, o que, sem dúvida, influenciará no processo criativo. É isso. A minha experiência profissional e pessoal no exterior me faz crescer muito, aprender mais coisas e também aprender mais sobre nós mesmos, brasileiros. E, seguramente, é uma experiência que sempre recomendo.

disse na época: “Se você não for e depois não conseguir chegar onde quer na sua carreira, sempre vai se perguntar se teria feito diferença”. Criei coragem e fui. Hoje é uma experiência que aconselho a todos. Gostei tanto que resolvi ficar mais um ano trabalhando por lá, até que senti que era hora de voltar para o Brasil. Afirmo que foi uma experiência incrível! Quanto aos estudos, tive contato com uma visão bem diferente, pude aprender e realizar trabalhos que não imaginava no ramo audiovisual. Em Barcelona, movimentos culturais e artísticos fervilham e minha universidade estava sempre envolvida em eventos interessantes. Esse Máster é muito conceituado e, como toda cidade cosmopolita, recebe muitos estrangeiros, o que nos dá a oportunidade de trocar conhecimento com diferentes culturas. Desde que eu voltei, muitos amigos e até desconhecidos já me procuraram para pedir conselhos, pois planejavam (ou simplesmente sonhavam) ter uma experiência no exterior, fazer o mesmo Máster que eu ou até mesmo se candidatar à mesma bolsa que ganhei. Meu conselho é simples: vá! Certamente, algum proveito você vai tirar. Você merece investir em si mesmo. É normal temer o desconhecido, mas a insegurança é superada pela gratificação de vencer os desafios. Você ganha força para enfrentar os seguintes.


Bruno Porto Designer e professor na Raffles Design Institute, na China http://sh.raffles.edu.cn

Qualquer experiência — didática, profissional, de caráter pessoal — fora da “zona de conforto” lhe faz crescer. Não é preciso sair do país para isso; um workshop experimental ou um emprego em outra cidade já mexem com sua capacidade de percepção. A experiência internacional tem a característica de proporcionar “tudo ao mesmo tempo agora!”, deixando-lhe mais atento para detalhes e ampliando sua capacidade de aprendizado, como quando você está jogando um jogo e não conhece bem as regras. Após me formar, em 1995, passei um ano estudando design tipográfico e de cartazes na School of Visual Arts, em Nova York. Época fantástica, entre as aulas de Ed Benguiat e Paul Davis, mas minha primeira semana lá foi um perrengue atrás do outro, procurando apartamentos nos classificados com medidas em pés e polegadas, e não pelo sistema métrico. É uma besteira, mas exemplifica como se aprende a lidar com problemas, mesmo nas coisas que seriam mais simples, desde o primeiro minuto do primeiro tempo. Além de lhe deixar mais “esperto”, mais flexível, viver no exterior permite que você frequente associações profissionais, visite exposições, assista a palestras e conheça pessoas com quem dificilmente esbarraria no Brasil. Aliás, fazer contatos, inclusive com profissionais brasileiros, também é uma constante: foi morando em Nova York que fiquei amigo do Michel Lent (que fazia seu mestrado na NYU, e foi a primeira pessoa a me mostrar um site) e do designer editorial Marcus Villaça, então editor de arte da New York Magazine e hoje entre Lisboa e Budapeste produzindo publicações para iPad pela sua Rocket Pig Media. Por meio dele, fui parar no Art Directors Club, que organizava almoços com palestras, e visitei a revista Rolling Stone. O principal, no entanto, é adquirir conhecimentos e desenvolver projetos possíveis, quase que exclusivamente, no exterior. Vivo em Xangai desde 2006, onde vim dar aulas de Comunicação Visual — em especial, Tipografia. Mesmo tendo lecionado por dez anos no Rio de Janeiro, precisei ter muito jogo de cintura, pois o raciocínio cognitivo, os valores estéticos, as referências culturais e mesmo as relações pessoais/profissionais na China seguem regras e padrões diferentes dos ocidentais. Um exemplo de resultado prático é o recém-lançado livro Asian Graphics NOW!, da editora alemã TASCHEN, que desenvolvi junto ao editor Julius Wiedemann, ao editor de arte Daniel SicilianoBretas e ao designer e educador Sadao Maekawa, que vive em Tóquio. Sadao e eu pesquisamos e contatamos centenas de profissionais de Japão, China, Índia, Coreia, Cingapura, Vietnã, Tailândia, Indonésia, etc. para submeterem projetos para o livro. Com 430 páginas, é a obra mais abrangente sobre design asiático contemporâneo, e isso só foi possível por estarmos na Ásia, pesquisando nas ruas, em revistas, pegando indicações in loco. 81 > DESIGN | WIDE |

37


design

Herbert Mascarenhas Sócio da agência Baião de Dois www.baiaodedoisdesign.com.br

Minha experiência foi na Europa, especificamente em Londres. Fui em busca de uma nova referência para a vida. Minha ida não foi planejada, por isso tive que pensar na melhor forma de aproveitar a experiência quando eu já estava por lá (uma ideia que parece absurda… e é). Tirei os dois primeiros meses para planejar o que fazer e como. Depois desse período, tentei entrar para a equipe de três empresas que eram consideradas referência na minha área. Esbarrei na questão do visto de estudante em uma (fica a dica), no inglês em outra (o cargo era para coordenador) e na terceira não fui recebido (impressionante o número de agências de emprego filtrando seu contato direto com as empresas). O plano B eram empresas menores que tinham um trabalho que eu admirasse. Fui contratado por um estúdio de design chamado UsTwo e passei seis meses trabalhando com ingleses e um sueco — em uma pequena equipe de cinco pessoas. Parte da alma da Baião de Dois (minha empresa) foi criada a partir dessa experiência na UsTwo. Como uma empresa com cinco pessoas foi capaz de se transformar em Official Design Partner da SonyEricsson Europa e Ásia?! Eu estava lá e pude sentir como esse

tipo de coisa era possível. A experiência foi muito válida. Hoje, penso e vejo que o período na Europa foi fundamental na minha formação humana. Abri a cabeça para observar aspectos negativos e absorver aspectos positivos de uma cultura nova e, em Londres, encontrei uma cultura baseada em relações de honestidade, como eu nunca conheceria sem sair do Brasil. Pelo pouco que pude conhecer nas viagens a turismo que fiz aos Estados Unidos e a outros países da Europa, posso dizer que Londres foi, talvez, o melhor destino que eu poderia escolher. Recomendo. Sobre experiências diversas, posso citar duas que recomendo aos mais novos e aventureiros. A primeira foi a decisão de ficar hospedado em casa de família para tentar uma imersão na cultura deles. E, para ter uma experiência mais completa, troquei de casa algumas vezes. Convivi com três famílias muito diferentes, em três casas diferentes, em três bairros diferentes. A segunda foi a decisão de dormir na rua uma noite. Certo dia, saí de uma festa e disse para alguns amigos que iria dormir na rua para ver se a cidade realmente era segura. Deu tudo certo, não congelei e mais histórias foram somadas ao repertório. Da história toda, o que mais me surpreendeu foi o fato de eu ter voltado para o Brasil. Ninguém acreditava que eu voltaria. Mas, o inverno me derrubou. Não o frio, mas as noites iniciando às 16h e a cara de depressão das pessoas no metrô… Confesso que não estava preparado para isso. Além do mais, descobri que o Brasil é um lugar fantástico. E eu amo Brasília.

Darlan Moraes Diretor de criação da agência BBDO Proximity, Rússia www.bbdomoscow.ru

Sempre costumo dizer que o Brasil é um país sedutor (tanto para estrangeiros como para brasileiros). É difícil sair da “terrinha”, largar o tempo bom (que em muitos países do mundo não tem), a comida excelente, as belezas tropicais, a nossa cultura “joie de vivre” tão admirada por pessoas de todo o mundo. Mas — se você consegue cortar o cordão umbilical — a experiência é impagável. Você, como estrangeiro, tem que dar o sangue dobrado porque custa caro para uma empresa (vistos, passagens de avião, assistência médica etc. ). O estrangeiro acaba tirando o lugar de um cidadão do país e, assim, tem que valer muito a pena para eles lhe contratarem. Aí vira rotina a super-ralação, a necessidade de se superar a cada

38

| WIDE | 81 > DESIGN

job, de não largar o projeto até que ele saia muito bom. Em publicidade, a ralação é normal. No Brasil, quase rotina. Essa palavra é parte do meu dia a dia porque fui promovido de redator a diretor de criação por aqui. Acho essa a maior diferença entre trabalhar no Brasil ou fora dele. Marcar gol no campo adversário é sempre mais difícil. Ganhar uma partida em gramados alheios, um grande sucesso.


81 > DESIGN | WIDE |

39


design

Moda feminina na web Famosa grife carioca de moda feminina, a Mercatto, lançou recentemente o seu novo portal, dedicado às tendências para o próximo verão. O site, que é caracterizado por ter uma navegação diferenciada, conta com a beleza da atriz Paola Oliveira presente em toda comunicação da marca.

40

| WIDE | 81 > DESIGN


Bruno Chamma, diretor de criação e um dos sócios da agência digital Kindle (www.kindle.com.br), que desenvolveu o novo site da Mercatto (www.modamercatto.com.br), nos conta detalhes e curiosidades da produção desse trabalho. Confira. WIDE Em termos de estratégia, o que a Kindle considera mais impor-

tante para atender os seus clientes? BRUNO No início, a Kindle se destacou rapidamente pelo requinte gráfico e pelo bom uso do Flash, mas rapidamente percebemos que apenas isso era pouco para atender a todas as necessidades da comunicação de nossos clientes. Aumentamos nosso escopo dentro da comunicação digital formando uma área de TI muito forte, assim como departamentos de mídia online, mídias sociais e planejamento. Um diferencial importante é que transcendemos apenas a esfera digital e montamos uma nova e grande área de publicidade e design, pois hoje acreditamos em uma comunicação integrada . WIDE Um dos mais recentes trabalhos lançados pela Kindle envolveu

a criação e o desenvolvimento de uma nova plataforma do site para divulgar a marca Mercatto. Quais eram as principais necessidades e expectativas do cliente em relação a esse projeto? E qual o tempo e o perfil da equipe envolvida na produção? BRUNO A Mercatto é uma grande rede, com 34 lojas de moda feminina, focada na classe C, e para esta coleção de verão contratou a atriz Paola de Oliveira para traduzir em contos o tema da campanha: Liberdade. O briefing era criar um site com uma navegação inteligente e diferenciada, que transmitisse o conceito e explorasse as imagens que foram produzidas em uma sessão de fotos e vídeos em Itacoatiara (Niterói, RJ). A equipe da Kindle desenvolveu esse projeto em um pouco mais de dois meses e envolveu dois diretores de arte, um profissional de motion, dois programadores de Action Script, um HTMLer e, ainda, trabalhamos em conjunto com um fotógrafo e uma produtora de vídeos para desenvolver o lookbook. WIDE No site, talvez o detalhe mais interessante seja a navegação

diferenciada em que o usuário tem acesso ao conteúdo arrastando o mouse pelo layout. Como surgiu essa ideia? Como foi, ou está sendo, a aceitação? BRUNO Desde o início, queríamos que um dos diferenciais fosse a navegação. Mesmo sendo inovadora, ela é de fácil aprendizado, pois, ao entrar no site, uma mensagem aparece indicando a forma de se navegar. A ideia nasceu de um brainstorm preliminar que nossa equipe desenvolve antes de começar um projeto. A aceitação está sendo muito legal e até já tivemos algumas cotações de novos projetos em função da visibilidade positiva alcançada por esse. WIDE Por que o Flash foi escolhido para ser a plataforma utilizada

nesse projeto? BRUNO Como o tema da coleção é Liberdade, escolhemos o Flash 81 > DESIGN | WIDE |

41


design

para reforçar esse conceito principal, pois favorece a construção de uma navegação diferenciada. Também utilizamos diferenciais pontuais, como o lookbook interativo em vídeo, e diversos outros detalhes de animação, que fazem com que o usuário tenha uma experiência única com a marca na web.

Desde o início, queríamos que um dos diferenciais fosse a navegação

WIDE Um player que contém um grande acervo de músicas está pre-

sente no layout do site. Com isso, o usuário navega ouvindo alguns hits da música internacional. Qual fator influenciou para vocês adotarem essa ferramenta (player) no projeto e em que contexto ela se insere no ambiente da marca (Mercatto)? BRUNO A rádio Ibiza já desenvolvia um trabalho muito legal de marketing musical com a Mercatto, preparando um set de mais de 1000 músicas, atualizado mensalmente, e que transmite a essência da marca sob outra óptica sensorial. O nosso trabalho foi trazer um pedaço desse bom trabalho desenvolvido para dentro da web, aproximando cada vez mais o ambiente real do virtual WIDE Sobre o design de interfaces, quais fatores influenciaram na

escolha da tipografia a ser utilizada? BRUNO No site utilizamos basicamente dois tipos de fontes. Para os títulos, usamos a Bodoni, que tem uma ligação forte com universo

42

| WIDE | 81 > DESIGN

da moda feminina, e, para os textos, utilizamos a Din, uma fonte que apresenta boa leitura, que teve uma boa harmonia com a Bodoni e que, além disso, é leve e elegante. WIDE Sobre a combinação cromática, percebe-se uma predominân-

cia no uso de tonalidades de azul e rosa. Quais aspectos determinaram a paleta de cores a ser utilizada na criação do site? BRUNO Quando o cliente definiu o tema, foi feita uma grande pesquisa de imagens para amarrar bem o conceito da coleção. Essas imagens da pesquisa somadas às imagens que produzimos com a Paola Oliveira, em Itacoatiara, indicaram o caminho cromático a ser seguido. Para a imagem de fundo, criamos uma arte em tons pastéis e cinzas, com baixa saturação, para compor, sem interferências, a boa visualização do conteúdo.


80 81 > DESIGN | WIDE |

43


Ilustração Carolina Vigna-Marú

Audrey Kawasaki Para vocês não ficarem aí achando que o meu perfume predileto é naftalina, a coluna deste mês é sobre uma artista jovem e contemporânea, nascida em 1982, a Audrey Kawasaki (audrey-kawasaki.com). Em tempo: não use moderno para se referir a artistas do nosso tempo. O termo diz respeito ao Modernismo, movimento que terminou mais ou menos na metade do século passado. Toda obra possui várias relações espaço-tempo, tanto em si quanto de sua época e sociedade. O cineasta francês Robert Bresson (1901-1999), por exemplo, é famoso por usar espaços desconexos, sem uma relação direta entre si. Assim como em Bresson, o espaço em Kawasaki também é fragmentado, mas ela leva esse conceito um passo além e a personagem também é desconexa e, ambos são, simultaneamente, autossuficientes o bastante para sustentar sozinhos a narrativa. Ou seja, os elementos em Kawasaki são desconexos e fragmentados. Somos todos. A obra de Kawasaki é uma dúvida entre o erótico e o inocente, uma mistura entre a ilustração e a pintura, uma fusão entre ficção e realidade. Kawasaki é um espelho do nosso tempo. É muito difícil um artista conseguir refletir o seu próprio momento e, ao mesmo tempo, emocionar pessoas. É necessário manter uma sensibilidade extrema sem perder o senso crítico, mesmo que não estejamos — e não estamos — falando de uma arte de protesto ou um ato de resistência. Essa dubiedade, que tão bem retrata Kawasaki, é nossa, de nosso tempo. Pela primeira vez na história, sabemos que a seriedade e o respeito não terminam na primeira fazendinha virtual. É esta geração — e nenhuma outra — que consegue trabalhar com o MSN ligado, mp3 a toda,

44

| WIDE | 81 > DESIGN

falando no Skype e com novecentas janelas abertas. Curiosamente, vejo muitos tratando tal comportamento como problema enquanto acho que é a solução. Nós somos muitos, complexos e ricos. Assim como acontece com o design ou qualquer outra coisa, a pintura é fruto de uma sequência de escolhas. Ao escolher determinada cor, enquadramento, traço e elementos, o artista conta uma história, um texto. Consequentemente, a imagem tem uma conotação, que varia de acordo com o contexto histórico-social tanto do artista e da obra quanto do fruidor (nome que se dá àquele que frui, que usufrui, determinado conteúdo). O fruidor empresta à obra o seu próprio espaço-tempo, por meio da sua interpretação. Daí surgem todos aqueles chavões do tipo “a beleza está nos olhos de quem a vê” e outras frases de efeito igualmente bregas. O design é também objetivo e subjetivo, e a construção de uma linguagem que reflete a si própria e o mundo. O webdesign é, se não a primeira, a mais bem sucedida linguagem que assimila esse papel do fruidor em sua própria estrutura, modificando-se e evoluindo enquanto existe, em tempo real. O webdesign é a única linguagem que modifica a sua estrutura

narrativa — e não apenas a forma e/ou o conteúdo — durante a conversação. Esse fato já é mais que suficiente para definir o webdesign como único e, portanto, dificílimo. O espaço-tempo no webdesign, por conseguinte, é volátil e etéreo. Kawasaki entende esse espaço-tempo dúbio que se ajusta conforme existe e, por isso mesmo, existe. Ela consegue unir com perfeição e harmonia a criação da imagem e do espaço como reflexo das questões desse mesmo tempo. Em termos técnicos, ela também ousa: usa madeira crua como suporte e mistura a ilustração com a pintura, deixando o traço absolutamente aparente. Ela não faz um julgamento de valores. Não vivemos em um tempo onde julgamentos moralizantes sejam possíveis (felizmente). Nem sempre observamos isso, mas, aos trancos e barrancos, a humanidade caminha, sim, para uma maior tolerância, e a internet exerce um papel fundamental nessa evolução. Vivemos um tempo que se permite questionar e que admite o dúbio e o diferente. Não precisamos mais ter certezas. Esse é o discurso de Kawasaki. E isso é ótimo. Provavelmente, Kawasaki será vista no futuro com uma estranha curiosidade, com um olhar quase sociológico a respeito das pessoas e dos costumes de nossa época. O fato é que será vista e isso já diz muito. André Malraux (1901-1976) afirmou que a arte é a única coisa que resiste à morte. Ele tem razão.

Carolina Vigna-Marú é designer e ilustradora das antigas, do tipo que raspou fotolito com gilette e fez separação de cores no papel vegetal, mas que não é saudosista e acha tecnologia o máximo. Trabalhou com multimídia e foi SysOp de BBS. Desenvolve sites desde 1996, especializando-se em CMS e em SEO com tableless e CSS. Começou em uma editora pequena em 1982 e nunca mais parou. Gosta muito de ilustração vetorial, mas não dispensa um bom papel e lápis. Fotógrafa amadora e apaixonada por tudo que é gráfico. vignamaru@gmail.com


81 > DESIGN | WIDE |

45


Internacional Julius Wiedemann

Tablets e Smartphones, a terra santa dos desenvolvedores Nas últimas semanas, temos visto um grande número de artigos sobre o fim da web e o começo de uma nova era para a internet. E isso se deve ao fato de estarmos cada vez mais “mobile”. Outra discussão intensa é se o caminho para os usuários (ou o mercado em geral) adotará as Apps como forma de acessar conteúdo ou se tudo rodará dentro de browser (para o qual deveríamos ter 3G a uma velocidade decente, que hoje só existe praticamente na Coreia do Sul em termos de mobile). E pode ser também que os dois lados sejam igualmente fortes e sirvam aos usuários de maneiras differentes. Ambos os mercados representam, na minha visão, a melhor oportunidade dos últimos dez anos para designers trabalharem lado a lado com desenvolvedores. A pergunta que não cala (e nem pode calar) em todo o desenvolvimento de algo digital é “Qual é o próximo passo?” ou “Quem vai lançar algo pra concorrer com isso?”. No momento, minha vida gira em torno da construção de uma estratégia para entrarmos com as publicações da Taschen (www.taschen.com) no mercado digital. Depois do iPad, tudo mudou para publicações ricamente ilustradas e que também possam oferecer uma integração entre várias mídias. Em setembro, o iPad ganhou um novo concorrente de peso (ou quase) com o lançamento do Galaxy Tab, da Samsung, que eu testei com minhas próprias mãos, quando estive em Berlin

46

| WIDE | 81 > DESIGN

visitando a IFA (www.ifa-berlin.de). Um pouco sobre o aparelho. Menor, mais leve, mais grosso e mais lento que o concorrente, ele roda Android e também Flash (mas muito devagar, infelizmente). A câmera embutida é um grande “plus”, além do fato de que se pode fazer chamadas telefônicas (apesar do tamanho não ser realmente apropriado para isso). Uma coisa é certa, a Samsung veio mesmo para brigar. Em poucos anos, ela passou da terceira maior vendedora de TVs para a liderança e, no mercado de celulares, do quarto lugar para o segundo, perdendo hoje apenas para a Nokia. As teóricas vantagens sobre os sistemas

abertos e fechados ainda me parecem muito controversas. Mesmo com todo o sistema fechado da Apple, o valor agregado de termos o controle de todos os nossos “assets” digitais dentro de uma conta só ainda é muito grande. É claro (para o bem, em muitos casos) que isso restringe a inclusão de arquivos piratas, principalmente devido a uma dificuldade de compartilhamento. A Apple lançou guidelines mais precisos sobre o que aceitará ou não dentro da sua loja, deixando mais claro para desenvolvedores o que ela deseja. Também parece estar abrindo a possibilidade de desenvolvimento em uma plataforma da Adobe, que permitirá criar Apps multiplataforma. Com a pressão correta do mercado, a Apple entendeu que tem que ceder. Já o Android, uma plataforma bem

mais aberta — sua grande vantagem, tanto para desenvolvimento quanto para tipos de conteúdo —, sofre com a falta de standards, deixando usuários com menos acesso a updates (em razão do número de operadoras que usam o sistema) e oferecendo uma loja ainda muito confusa. Para complicar um pouco, desenvolvedores raramente conseguem fazer dinheiro com seus Apps. Mas, a sua grande vantagem competitiva até agora parece estar em comer o mercado do sistema operacional da Nokia. Esta, por sua vez, acabou de trocar os dois maiores cargos da empresa, seu


Depois do iPad, tudo mudou para publicações ricamente ilustradas, e que também possam oferecer uma integração entre várias mídias

presidente e o chefão da divisão de celulares. Considerados até pouco tempo atrás como possuidores da melhor usabilidade, os aparelhos Nokia conseguiram evoluir para os smartphones também, contudo não conseguem agregar valor com o seu portal www.ovi.com. No entanto, prometem grandes mudanças, com uma visão mais orientada para software e menos para hardware. Mas a corrida ainda tem dois grandes players dispostos a investir pesado para se manterem vivos (e saudáveis) nessa briga de gigantes. A BlackBerry assumiu há pouco tempo a terceira posição entre os fabricantes de celular e, com seu grande foco no mercado de negócios, abocanhou em poucos anos uma fatia grande do mercado. Eu mesmo, usuário de BlackBerry (e também do iPhone), não sou muito encantado com a loja de Apps, que funciona muito devagar se comparadoa ao iTunes e à AppStore da Apple. Porém, ainda prefiro responder e-mails no BlackBerry.

com os próprios consumidores de aparelhos como o Trio, que sempre teve ótimo feedback do mercado. Em resumo, desenvolvedores e

designers deveriam manter os olhos abertos em todas essas avenidas. Perece muito, mas antes de uma consolidação maior ainda haverá um aumento de ofertas, principalmente nos tablets. Eu sempre penso que o ideal seria hoje termos rede sem fio em toda parte, o que ainda não ocorre. O 3G está devagar, e já se fala em 4G. Mas, uma coisa é certa, o futuro está nos aparelhos móveis, mostrando mais uma vez que a internet só cresce em importância. Até o próximo round.

Correndo por fora vem a

Julius Wiedemann

Motorola, ex-líder mundial de

Diretor de publicações digitais da editora alemã Taschen (www.taschen.com), além de editor-chefe das áreas de design e pop culture. Julius viaja 70% do seu tempo, dividindo residências entre o Rio de Janeiro, Cambridge, no Reino Unido, e Colônia, na Alemanha. letschat@juliuswiedemann.com

celulares, que introduziu o primeiro modelo realmente popular em 1985. Desde então, a gigante passou a atuar em diversas áreas, e foi perdendo posições ao longo dos anos. Com a recente aquisição da Palm, a empresa espera poder virar o jogo, começando

81 > DESIGN | WIDE |

47


Webdesign Luli Radfahrer

O único bem comum a todos Existe um recurso que é verdadeiramente democrático e distribuído com justiça: o tempo. Pouco importa sua origem ou padrão de vida, todas as pessoas têm disponível para si uma quantia de tempo que, na média, é bastante próxima. Pena que seja consumida de formas tão diferentes.

48

| WIDE | 81 > DESIGN

A administração do tempo é uma habilidade muito maldistribuída. Enquanto alguns são extremamente produtivos e eficientes, capazes de realizar muitas tarefas em pouco tempo, outros se atolam em um pântano de atividades infrutíferas, que lhes custam foco, relacionamentos e saúde. À medida que o mundo se torna mais carregado de informação e complexidade, é natural que os conteúdos se empilhem. Mas, essa confusão deve ser controlada, não adotada. Muita gente se defende em sua bagunça citando o velho mito que os mais talentosos são naturalmente desorganizados. Isso é uma bobagem; uma coisa não tem nada a ver com a outra. Profissionais de grande produção tendem a ser tão arrumados em seu trabalho que até parecem obsessivos. Ao mesmo tempo, nada é mais comum do que gente talentosa e que poderia se dar melhor na carreira. Ou na vida. Há muito tempo que se diz que tempo é dinheiro. Não é. Tempo é muito, muito mais importante do que dinheiro. Não há quantia no mundo que compre algumas horas ou dias. Mesmo assim, poucos recursos são mais escassos (e, que ironia, mais desperdiçados) do que o tempo livre. Em uma época de crescente especialização e demandas, ele deveria ser considerado uma poupança, usado para descansar, aprender, encontrar amigos. Deveria, enfim, ser administrado com mais cuidado. Mas, não é. A própria ideia de um “passatempo” mostra isso. Mesmo que “gastedinheiro” existam aos montes, eles pelo menos não são tão descarados.


Quem trabalha com tecnologia tem um problema a mais com relação ao tempo: máquinas não estão sujeitas a distrações A sociedade estressada contemporânea mostra como o tempo é

uma riqueza. Na falta dele, muitos gastam suas reservas — de sono, de férias, de relações sociais e afetivas — de um jeito atrapalhado, sem qualquer planejamento, com grandes desperdícios. Alguns percebem depois de várias horas, semanas ou anos que boa parte do tempo que empenharam em um trabalho, uma ideia, uma relação, foi inútil. Outros não têm tanta sorte e deixam para o final da vida ou da carreira para se preocupar com o que realmente consideravam importante. Ou nem isso. Quantas vezes você já ouviu a frase “ah, se eu soubesse naquela época o que eu sei hoje…”? Acredito que muitos que relembram o passado o fazem mais pelo desejo de mais tempo e energia do que pela vontade de rever certas decisões. Quem trabalha com tecnologia tem

um problema a mais com relação ao tempo: máquinas não estão sujeitas a distrações. Elas são extremamente rápidas em tarefas repetitivas, não pegam trânsito no deslocamento para o ambiente de trabalho e funcionam 24 horas por dia sem precisar almoçar, ir ao banheiro ou dormir. Nessas condições, é natural que estejam sempre à frente de seus colegas humanos, mesmo que sejam só assistentes prestativos e ansiosos por novas tarefas. Não importa. A demanda excessiva por atenção costuma atordoar, mesmo inconscientemente, quem lida com ela. Como uma creche ou uma aula para crianças hiperativas de 6 anos de idade,

os computadores e os celulares estão cada vez mais cheios de aplicativos e mensagens pipocando o tempo todo. Um por um, todos demandam atenção exclusiva, como se cada um fosse o centro do mundo. Sempre que o serviço é interrompido para se dedicar a eles, mais um pouco de tempo é perdido. E outro tanto para retomar a concentração, até ser interrompido de novo. Assim, fica difícil trabalhar. Multitarefa é bom para máquinas, contanto que não demandem muita atenção de quem as opera. Para seus usuários, fazer duas ou mais coisas ao mesmo tempo parece mais uma forma de dispersão do que uma técnica de eficiência. O zen-budismo prega que uma atividade deve ser realizada por vez e que cada tarefa deve concentrar todo o interesse. Não há, nas mitologias, religiões ou repositórios de sabedoria milenar, quem pregue fazer várias coisas ao mesmo tempo. A mesma regra vale para todas as espécies vivas deste planeta. Indivíduos produtivos tendem a ser “monotarefa”. Faz sentido. Ter uma prioridade por vez é bom, ajuda a manter a concentração e o foco. Isso não é possível quando se tem uma caixa de entrada lotada ou uma lista de tarefas com dezenas de itens. Pilhas intermináveis de urgências temporárias não aumentam a produtividade: só pioram a angústia. Quem tem de administrá-las (uma queixa de dez em cada dez profissionais da área digital) nunca conseguirá a paz de espírito para desenvolver um bom trabalho. Seu cotidiano é, afinal, parecido com o de um

médico de UTI de um hospital de guerra. Poucos se dão conta de que o trabalho difícil e gratificante é aquele

que desafia as capacidades, não o que sobrecarrega. E que a melhor forma de realizá-lo é acordar cedo, encará-lo de frente e fazer uma coisa de cada vez. Não adianta se queixar de uma situação ou mesmo tentar atacar um problema se as causas ou o ambiente que o promovem continuam fora de controle. Hoje em dia, em que praticamente todo mundo se sente sobrecarregado e malremunerado, a melhor forma que conheço para contornar essa situação está no controle de como o tempo é gasto. Se as tarefas não vão diminuir, só resta administrá-las. Contudo, isso não é um processo fácil. Depende muito do ambiente em que acontece e da sinceridade das intenções de quem o pratica.

Luli Radfahrer PhD em Comunicação Digital, já dirigiu a divisão de internet de algumas das maiores agências de propaganda e portais do Brasil. Hoje é professor-doutor da ECA-USP e consultor independente, com clientes no Brasil, Estados Unidos e Oriente Médio. Autor do livro Design/Web/Design:2, posta textos semanais sobre criatividade, design de interfaces e inovação no blog, www.luli.com.br. webdesign@luli.com.br

81 > DESIGN | WIDE |

49


para os negócios O marketing no Facebook tem mostrado grandes resultados para quem resolveu investir nessa rede social aqui no Brasil, seja por meio de aplicativos para interagir com os usuários, de anúncios para gerar receita direta para a empresa ou de páginas oficiais para intensificar a comunicação entre o cliente e a marca. Por Flávia Freire

50

| 81 > CAPA | WIDE


T

udo começou em fevereiro de 2004, quando o norte-americano Mark Zuckerberg lançou o site “The Facebook” com o apoio dos amigos de faculdade Andrew McCollum e Eduardo Saverin — sim, um brasileiro fez parte dessa fantástica criação. Inicialmente, a rede social era restrita aos estudantes da universidade onde estudavam: Harvard, nos Estados Unidos, e o sucesso foi tanto que, em menos de um mês, mais da metade dos estudantes se registrou no site. Em dois anos, a rede social foi expandida para mais de dois mil colégios e mais de 25 mil universidades ao redor do mundo. Isso se deu pela ajuda de outros dois colegas de Mark, Dustin Moskovitz e Chris Hughes, que fizeram um excelente trabalho de promoção, levando o The Facebook para os estudantes de Canadá, México, Reino Unido, Austrália, Nova Zelândia, Irlanda, Índia, Alemanha e Israel. O domínio www.facebook.com, sem o artigo “The”, foi comprado em 2005, e o site ganhou uma nova interface, muito mais amigável aos usuários. Finalmente, em 11 de setembro de 2006, o Facebook foi aberto para cadastro de todos os usuários da internet maiores de 13 anos de idade. Hoje, o Facebook só cresce e aprimora seus recursos em todo o mundo devido à dedicação de mais de um milhão de desenvolvedores de mais de 180 países construindo aplicativos. São 500 milhões de usuários ativos na rede social criada por uma empresa que possui cerca de 800 funcionários — dentre eles, Paul Buchheit, inventor do Gmail —, sediada em Palo Alto, na Califórnia. Não é à toda que Mark Zuckerberg, de apenas 26 anos, é um dos bilionários mais jovens do mundo.

Não foram só alegrias… Em setembro do ano de seu lançamento, os proprietários do HarvardConnection, site concorrente do Facebook, impetraram uma ação no Tribunal de Massachussetts contra a rede social de Mark Zuckerberg, alegando que ele havia roubado o código fonte de seu site, já que, em dezembro de 2003, Mark teria prestado serviço por algumas horas à empresa e por isso teve total acesso aos códigos do site HarvardConnection, posteriormente chamado de ConnectU.com. A ação exigia uma indenização de U$ 75 mil de Mark e seus sócios por danos e forçava-os ao fechamento do Thefacebook.com. A ação não procedeu e, em dezembro do mesmo ano, o site ultrapassou um milhão de usuários cadastrados. Tal história é retratada no filme The Social Network (www. aredesocial.com.br), produzido com base no livro Bilionários Acidentais, de Ben Mezrich (www.benmezrich.com). A estreia, em outubro deste ano nos EUA, foi um grande sucesso de bilheteria, o que promete salas de cinema lotadas a partir de dezembro no Brasil.

Marketing no Facebook

Em maio de 2007, surgiram dois importantes recursos que introduziram o marketing no Facebook: o Facebook Marketplace (apps.facebook.com/marketplace), um aplicativo para adicionar classificados gratuitamente no site, e a Facebook Platform (developers.facebook.com), uma API (Application Programming Interface) para o desenvolvimento de aplicações para a rede social. Seis meses depois, foi lançado o Facebook Ads (www.facebook. com/ads/create), um sistema de veiculação de anúncios baseado no perfil do usuário e de seus amigos. Mas não foi somente por meio de aplicativos sociais e de anúncios que as empresas decidiram infiltrar suas marcas e campanhas no Facebook. Elas perceberam que o modelo totalmente “sem privacidade” da rede social poderia trazer muitos benefícios. O fato de os dados de perfis dos usuários, como sexo, idade, profissão, hobbies, entre outros ficarem expostos, e de todos os usuários poderem saber o que os amigos dos amigos estão “pensando” por meio de suas conversas e mensagens, facilitou os estrategistas de marketing a atingirem as pessoas que realmente poderiam gostar de seus produtos. Fora que as páginas oficiais, que são criadas gratuitamente no Facebook para que os usuários possam “curtir” a proposta e assim divulgar para os amigos, podem oferecer a comunicação instantânea que os internautas estão acostumados hoje. Tais páginas oficiais possibilitam a entrada ilimitada de usuários, enquanto os perfis permitem somente que o usuário tenha até cinco mil amigos. Comparado ao Orkut, o Facebook não tem ainda tanta audiência no Brasil, já que, dos usuários online, 68,4% está no Orkut enquanto apenas 8% possui cadastro no Facebook. Mas, com base no rápido crescimento que a rede social sofreu este ano no país — de abril a setembro houve um salto de três milhões para mais de seis milhões de usuários —, as grandes marcas brasileiras estão investindo em ações de marketing no Facebook. De acordo com dados do site Facebakers (www.facebakers. com/countries-with-facebook/BR), em número de usuários, o Brasil ocupa a 20ª colocação em um ranking de 212 países, e a maioria dos usuários brasileiros que possuem perfil no Facebook têm de 25 a 34 anos de idade, ou seja, um público com poder de compra. As mulheres estão mais presentes na rede social, representando 55% dos usuários. Então, já é hora de prestar mais atenção ao reboliço que o Facebook está causando no país.

O investimento em anúncios no Facebook é um dos itens que crescem mais rapidamente na linha de serviços de muitos departamentos de marketing ao redor do mundo Clara Shih 81 > CAPA | WIDE |

51


Clara Shih: a “mãe” dos negócios no Facebook Para saber mais sobre marketing no Brasil por meio do Facebook, conseguimos uma entrevista exclusiva com quem realmente entende do assunto: a especialista em redes sociais Clara Shih, considerada uma das mulheres mais influentes do mundo digital em 2010 pela revista norte-americana Fast Company (www.fastcompany.com/article/ clara-shih-hearsay-labs). O título foi muito bem aplicado a essa norte-americana nascida em Hong Kong, que, em 2007, juntamente com o engenheiro de informática do Facebook, Todd Perry, criou o aplicativo Faceconnector, que ajuda empresas a se inserirem nas redes sociais, tendo melhores resultados econômicos. Este ano, lançou a segunda edição do livro The Facebook era: tapping online social networks to build better products, reach new audiences, and sell more stuff (www.thefacebookera.com), que trata de práticas empresariais nas redes sociais.

acessam a rede social? CLARA O Facebook começou mais dedicado aos estudantes universitários, mas nos últimos anos realmente se espalhou. Hoje, pessoas de todas as idades, áreas geográficas estão acessando o Facebook. No Brasil, os usuários do Facebook são mais velhos do que em outros países. A maioria é de pessoas entre 25 e 34 anos de idade, comparada ao grupo de 18 a 24 anos nos Estados Unidos e na Europa. Três porcento dos brasileiros estão no Facebook e, entre os brasileiros que estão online, 9% estão no Facebook. WIDE Apesar de toda a popularidade do Facebook, por que ele

não tem uma presença forte no Brasil, em comparação, por exemplo, com o Orkut? CLARA O Orkut está em primeiro lugar no Brasil e continua a ser muito mais popular do que o Facebook. Se olharmos para o exemplo da Índia, no entanto, onde o Orkut foi dominante durante muitos anos, podemos ver essa mudança ao longo do tempo. A partir de janeiro de 2010, o Facebook já o ultrapassou e agora está crescendo muito mais rapidamente do que o Orkut na Índia.

WIDE O que lhe levou a escrever o livro The Facebook era? Do

que ele trata em geral? CLARA Em 2007, criei o Faceconnector, um aplicativo que integra o Facebook com um software de gestão de relacionamento com clientes. Esse aplicativo atraiu muita atenção porque foi o primeiro estudo de caso de negócio na plataforma do Facebook. Ele era ainda muito recente no desenvolvimento do Facebook, e eu estava sendo abordada por várias editoras para escrever um livro explicando as oportunidades de negócio em redes sociais. O The Facebook era descreve a transformação social nas comunicações introduzida pela mídia social e como isso afeta as estratégias das organizações e abordagens de venda, marketing, atendimento ao cliente, recrutamento e desenvolvimento de produto. WIDE Na sua opinião, por que o Facebook se tornou tão popular

no mundo inteiro? Qual o grande segredo dessa rede social? CLARA O Facebook não foi o primeiro site de rede social, mas o que realmente o diferencia dos demais é o seu foco, desde o início, em refletir e ampliar, em vez de substituir nossos relacionamentos offline do mundo real. Redes sociais anteriores, como a Friendster, por exemplo, começaram a parecer como spams, porque haviam muitas solicitações e mensagens de estranhos. Em contraste, o Facebook tem feito um bom trabalho em proporcionar um ambiente confiável onde os usuários sentem que estão entre amigos. WIDE Você tem informações sobre o perfil dos brasileiros que

52

| 81 > CAPA | WIDE

WIDE Empresas brasileiras estão apostando na rede social,

então como você poderia aconselhá-las a usar o Facebook com criatividade para o marketing? CLARA O sistema de publicidade do Facebook é único em duas maneiras. Primeiro, ele permite que os anunciantes utilizem a técnica de HyperTargeting nas mensagens de seus anúncios com base nas informações do perfil dos usuários. Por exemplo: uma empresa que vende ingressos para jogos de futebol pode especificar que deseja anunciar apenas para usuários que escrevem em seus perfis que amam futebol. Em segundo lugar, os anúncios do Facebook trazem benefícios da natureza social do Facebook, então, se alguém “curtir” um anúncio, pode saber quais de seus amigos já estão “curtindo” o anúncio ou o produto. Isso permite que os anunciantes tenham o poder da palavra do marketing boca a boca a uma medida que antes não era possível. WIDE Para você, qual a importância do Facebook para o

marketing online? CLARA Os anunciantes têm que estar onde os clientes e as perspectivas estão e, para um número crescente de empresas a nível mundial, isso é permitido no Facebook. Além disso, há o novo potencial por trás do HyperTargeting e do marketing boca a boca, e o The Facebook era representa claramente esse novo paradigma do marketing online. WIDE O que o Facebook oferece às empresas para que elas


CAPA

possam alavancar suas campanhas? CLARA Além dos anúncios com HyperTargeting, o Facebook oferece aos anunciantes de grandes marcas diversos recursos exclusivos para ajudar na promoção da campanha, incluindo vídeo para complementar o anúncio (mais usado por meios de comunicação, programas de TV, filmes etc.), presentes virtuais patrocinados, RSVP in-line para eventos e a possibilidade de “curtir” uma página do Facebook. WIDE De acordo com a chefe de operações do Facebook, Sheryl

Sandberg, a rede social aumenta em dez vezes as receitas provenientes de investimentos em publicidade. Com base nisso, as empresas já estão conscientes de que o Facebook é um bom lugar para fazer marketing? CLARA O investimento em anúncios no Facebook é um dos itens que crescem mais rapidamente na linha de serviços de muitos departamentos de marketing ao redor do mundo, especialmente em países como os Estados Unidos, e na Europa, onde o Facebook já tem uma pegada forte e crescente. WIDE Como o monitoramento das campanhas no Facebook é

feito pelas agências ou pelos anunciantes? CLARA A maioria das agências onde trabalhei utilizam uma combinação da análise fornecida pelo Facebook com suas próprias métricas para mostrar o ROI (Retorno do Investimento) da campanha. Cada vez mais os clientes estão exigindo das agências digitais informações sobre métricas para que possam mensurar e comparar o retorno das campanhas em redes sociais. O uso de mídia social para atendimento ao cliente, por exemplo, requer uma medição que leva em conta a redução de custos de suporte ao cliente devido às mensagens serem expostas em um canal público, onde outros clientes podem tirar suas dúvidas. WIDE O que você acha que o Facebook ainda precisa oferecer em

termos de aplicabilidade de ações de marketing? CLARA O próximo grande passo do Facebook é criar uma rede de publicidade semelhante ao Google AdSense, que permite que os anúncios sejam mostrados não apenas no site

do Facebook, mas também por meio de editores do Facebook Open Graph (developers.facebook.com/docs/opengraph). Isso proporcionaria aos anunciantes oportunidades ainda melhores para atrair público. WIDE Explique a sua análise “o sucesso da publicidade no

Facebook é devido ao fato de sua abordagem basear-se no que as pessoas gostam, e não do que elas procuram, como faz o Google”. CLARA O Google Search encontrou um grande mercado ao focar na intenção de compra das pessoas no momento em que elas estão procurando comprar. Isto é, quando alguém procura por uma câmera digital no Google, há uma grande chance de essa pessoa estar interessada em pesquisar ou comprar uma câmera em breve. Isso é o que torna o Google AdSense tão eficaz. O Facebook aborda publicidade online a partir de um ângulo diferente. Baseado no perfil das pessoas e nas informações de status em tempo real, assim como no que seus amigos têm comprado. O Facebook identifica indivíduos que possam estar interessados em comprar um determinado produto ou serviço e, assim, pegar essas pessoas antes que elas estejam prontas para adquiri-lo, ajudando a influenciar na decisão de compra. Um anúncio ideal visando à solução no futuro deve combinar esses dois elementos, ou seja, quem a pessoa é (informação do perfil na rede social) e o que seus amigos estão fazendo, bem como o que eles estão procurando naquele momento. WIDE Na sua opinião, qual o futuro dos negócios no Facebook? CLARA Atualmente, estamos com a mídia social no mesmo

patamar em que estávamos há dez anos com a internet. Estamos vendo um claro valor em aproveitar o poder das conexões e relações sociais nas empresas, mas ainda existem muitas oportunidades de inovar e inventar novas formas de marketing, vendas, recrutamento e desenvolvimento de produtos. E isso já começou a acontecer, mas acredito que em poucos anos veremos uma plataforma com capacidade ainda maior no Facebook, que permitirá informações de gráfico social, e os anúncios serão disponibilizados na rede de parceiros do Facebook Open Graph, não apenas do próprio site do Facebook.

Marketing por meio de páginas oficiais

Todo cliente deseja ser bem atendido, gosta de ter um bom relacionamento com a marca e, com a velocidade de comunicação que se é permitida hoje, ele exige por respostas rápidas. Para tudo isso, as redes sociais são excelentes ferramentas. No Facebook, a maioria das empresas opta por criar páginas oficiais de suas campanhas para que os usuários possam se tornar fãs e manter uma relação mais próxima com suas marcas preferidas. É o caso da campanha Fiesta Stories (www.facebook. com/newfiestastories) , criada pela agência JWT, que começou pelo Facebook e depois foi para TV e revistas. “Escolhemos essa plataforma porque queríamos falar diretamente com um perfil específico de consumidor: aquele que é interessado em adquirir

Escolhemos essa plataforma porque queríamos falar diretamente com um perfil específico de consumidor: aquele que é interessado em adquirir tudo em primeira mão Fábio Brandão, diretor de criação da JWT 81 > CAPA | WIDE |

53


CAPA

tudo em primeira mão. Por isso, o carro chefe dessa comunicação são as mídias sociais. Em poucas semanas, já atingimos números maiores do que grandes lançamentos da Ford nos EUA. Cada um dos documentários já foi assistido por milhares de pessoas. E estamos só no começo, muitas outras histórias ainda serão mudadas”, declara Fábio Brandão, diretor de criação da JWT. Uma das vantagens de lançar páginas oficiais no Facebook é que não têm custos para o cliente. “É gratuito. Só se paga o custo de produção e os custos de mídia”, explica Fábio, sobre os recursos interativos, como os aplicativos, que podem ser inseridos na página oficial, contratando uma agência ou profissional para criar o app. Para criar uma página oficial, acesse www.facebook.com/pages/ create.php, selecione o segmento de sua página oficial, dê um nome a ela e clique em “Criar uma página oficial”.

Pronto, agora é só implementar a página com as informações desejadas e divulgá-la para que o maior número de pessoas possam “curtir” e, então, divulgar para os amigos. Existem empresas que se cadastram no Facebook através de perfis, como fez a marca de roupas Wöllner (www.facebook.com/wollner.rj) há seis meses. Com apenas duas pessoas no departamento de marketing responsáveis por inserir as novidades da marca no perfil, essa forma de marketing no Facebook foi a melhor opção para o estilista Lauro Wöllner, antes de pensar em lançar um aplicativo ou um anúncio da marca. “Estamos crescendo diariamente. A cada ação que fazemos, aumentamos em 20% o número de clientes cadastrados. A resposta é muito rápida, temos um planejamento de ações no qual, mensalmente, criamos campanhas voltadas para lifestyle da marca, gerando interatividade com os clientes e premiando-os com gifs exclusivos para a galera do Facebook. E estamos estudando os aplicativos, em breve lançaremos”, declara. Lauro destaca, ainda, a importância do feedback dos usuários do Facebook em relação à marca. “O grupo é formador de opinião, ou seja, todo feedback vindo dessas mídias é de grande valor para a construção das estratégias de marketing. Nos dias atuais, precisamos estar mais próximos do cliente e passar credibilidade, realidade. Hoje, o Facebook é o centro das atenções, ele influencia a forma de nos comunicar com as pessoas, nas dicas em relação às nossas escolhas de consumo, sendo uma grande fonte de informação, um guia.

54

| 81 > CAPA | WIDE

Página oficial do New Fiesta no Facebook


Por isso, optamos por trabalhar fortemente essa ferramenta, que está nos trazendo grandes resultados. A melhor forma de manter um bom relacionamento é atualizar o perfil diariamente e criar ações e interatividade para que o cliente visite e indique para os amigos”, diz.

Todo feedback vindo dessas mídias é de grande valor para a construção das estratégias de marketing Lauro Wöllner, estilista Marketing por meio de aplicativos sociais

Grande atrativo dos usuários, os aplicativos funcionam como uma ótima maneira de interação entre os clientes e as marcas. Hoje, o Facebook possui mais de 550 mil aplicativos na rede, e 70% dos 500 milhões de usuários “curtem” mensalmente aplicativos em seus perfis. Segundo o site DoubleClick Ad Planner (www.google. com/adplanner) , o subdomínio apps.facebook.com, onde estão localizados todos os aplicativos criados para o Facebook, é o mais acessado, com 210 milhões de visitantes únicos por dia. Então, já é hora de o aplicativo da sua empresa estar entre eles, não é mesmo? Os aplicativos são como hotsites, só que integrados às páginas oficiais do Facebook. Eles oferecem um serviço atraente e interativo de forma a incentivar os amigos do usuário a compartilhá-lo também. No Brasil, os três aplicativos que mais possuem fãs são o Nike Futebol, com mais de 140 mil; o Azul – Linhas Aéreas Brasileiras, com quase 110 mil; e o BlackBerry Brasil, com mais de 43 mil usuários. E esses números crescem a cada dia.

Álbuns de fotografias com as coleções da Wöllner

www.facebook.com/BlackBerryBrasil

www.facebook.com/AzulLinhasAereas

www.facebook.com/nikefutebol

81 > CAPA | WIDE |

55


CAPA

Social Shopping

Para chamar a atenção e atingir o sucesso, é importante inovar. A Privalia (www.privalia.com.br), site de vendas de produtos com desconto, lançou um aplicativo chamado “Fan Shop”, produzido pela Privalia Espanha no Facebook de todos os países em que atua, no qual disponibiliza sua loja dentro da rede social, oferecendo exclusividade aos mais de 35 mil fãs e um acesso prioritário a expressivas campanhas. Fora isso, o resultado do conceito Social Shopping disponibilizado no aplicativo foi melhor do que o esperado no Brasil. “Os usuários, além de comprar, podem interagir entre eles. No meio offline, é comum os consumidores fazerem compras acompanhados de um amigo, e é essa a experiência que disponibilizamos no Fan Shop: a possibilidade de fazer suas compras online e pedir a opinião de uma amiga sobre uma peça desejada, mas com a comodidade de fazer isso sem sair de casa. Aumentamos a base de fãs e superamos nossas expectativas em relação à venda das marcas que estiveram no Fan Shop. Estamos contentes com os resultados”, declara Andre Shinohara, CEO da Privalia.

O site Giuliana Flores também vem investindo em ações de marketing no Facebook por meio de aplicativos, mas a empresa optou por lançar campanhas diferenciadas de acordo com as datas comemorativas, como a que desenvolveu em setembro para o Dia da Secretária. “A ação funciona dando foco nas características pessoais e profissionais de quatro exemplos bastante distintos de secretárias que estão muito presentes no cotidiano de empresas e escritórios no Brasil. A Giuliana Flores humanizou a ação e deixou na mão de seus amigos, fãs e seguidores nas redes sociais a tarefa de decidir qual modelo de secretária deve ganhar um prêmio junto a eles. O objetivo é que criemos uma interação de nosso público no Facebook com tais personagens mediante um aplicativo de enquete, a fim de aumentar nossa visibilidade — por estar dentro do nosso ambiente a ação — e engajamento com todos os amigos e futuros clientes”, explica Juliano Souza, gerente de marketing da empresa. Muitas empresas atualmente investem em marketing por meio

No meio offline, é comum os consumidores fazerem compras acompanhados de um amigo, e é essa a experiência que disponibilizamos no Fan Shop Andre Shinohara, CEO da Privalia

Aplicativo “Fan Shop” da Privalia

O poder de persuasão dos aplicativos para o Facebook foi comprovado pela Privalia. O número de fãs na página dobrou na primeira semana e aumentou mais de 220% em menos de um mês. As vendas das campanhas do Fan Shop aumentaram cerca de 30%. “As redes sociais conquistaram um grande espaço entre os brasileiros nos últimos anos, não apenas como um canal de comunicação entre amigos e familiares, mas também como uma nova forma de relacionamento entre as empresas e os seus clientes. Marcar presença nas redes sociais é uma forma direta de as marcas atingirem seus consumidores potenciais, transmitirem mensagens estratégicas e os recompensar por sua fidelidade”, declara Andre, que mostra a força da campanha da Privalia no Facebook em comparação com o Orkut. “Apesar de o Orkut ser a rede social líder no país, nossa maior concentração de fãs está no Facebook, com mais de 35 mil usuários. No Orkut, nossa página oficial possui cerca de 4500 membros. Além disso, o Facebook disponibiliza, hoje, ferramentas que facilitam a integração e oferecem maiores oportunidades de interação com os fãs.”

56

| 81 > CAPA | WIDE

Aplicativo “Escolha sua secretária” da Giuliana Flores


É preciso ter uma cultura de vanguarda, querer sempre interagir com os usuários, ter uma empresa preparada para receber críticas e elogios Juliano Souza, gerente de marketing da Giuliana Flores das redes sociais, mas é importante enfatizar que o trabalho nessas redes não deve somente focar venda e lucro financeiro, segundo Juliano. “O resultado do trabalho em redes sociais deve focar inúmeras outras métricas que devem ser analisadas como ROI. Estas, primordialmente, estão relacionadas à visibilidade da empresa (branding e engajamento), análise e qualificação de seus serviços e criação de situações especiais (eventos e ações) para gerar interesse e fidelizar clientes. É preciso ter uma cultura de vanguarda, querer sempre interagir com os usuários, criar situações que os interessem e satisfaçam suas expectativas, ter uma empresa preparada para receber críticas e elogios, prevenir problemas e, por fim, almejando retorno financeiro, investir em ações promocionais e concursos culturais de grande porte para que intensifique o maior bem que um site pode ter: referência (cadastros), clientes satisfeitos e venda.” O monitoramento do trabalho de SMM (Social Media Marketing) da Giuliana Flores é feito pela Buzz Social Media (www.buzzsocialmedia.com.br), empresa do grupo All In Media, por meio da ferramenta Buzzer. “Eles monitoram o resultado das ações e da comunicação realizada pelo site nas redes sociais, gerando relatórios detalhados do resultado e análise do trabalho semanalmente”, declara Juliano.

Marketing por meio de anúncios segmentados

Segmentados porque o anunciante pode direcionar seus anúncios de acordo com informações dos usuários, como sexo, idade, interesses, entre outras. O Facebook possui uma plataforma de anúncios extremamente intuitiva e com vantagens bastante convidativas. Os anunciantes podem pagar a partir de R$ 0,01 por clique ou por impressão, mas, quanto maior o investimento, mais chances de o anúncio ser exibido com frequência na rede social. Os anúncios criados no Facebook ficam localizados em uma área estratégica na página de perfil dos usuários, chamando bastante a atenção dos visitantes. Observe na imagem a seguir:

Construindo aplicativos

A equipe de desenvolvimento da Facebook Platform disponibiliza a SDK (Software Development Kit) para Android, C#, JavaScript, PHP e Python. Você pode baixá-las em developers.facebook.com/docs. Após desenvolver o aplicativo, acompanhe o tutorial disponibilizado no site developers.facebook.com/docs/guides/canvas para inseri-lo no Facebook. Mais informações sobre a Facebook Platform podem ser encontradas em www.facebook.com/platform. Para interagir com outros desenvolvedores, acesse o fórum em forum.developers.facebook.net.

Wide no iPad Esta edição da revista Wide está inteiramente disponível para iPad. Basta baixar o aplicativo Revista Wide no iTunes pelo seu iPad. Lá, você poderá conferir esta reportagem com muito mais vantagens e assistirá com exclusividade a um vídeo para acompanhar todo o processo de criação de um aplicativo para Facebook desenvolvido em Flash por Marcelo Albagli, sócio da Canvas. Poderá, ainda, conferir como foi feita a inserção do aplicativo na rede social!

Aplicativo “Fan Shop” da Privalia

De acordo com o site Alexa (www.alexa.com/topsites), o Facebook está em segundo lugar entre os 500 sites mais acessados do mundo. No Brasil, a rede social está na 14ª colocação em um ranking dos 100 sites mais acessados, na frente até mesmo do gigante Twitter por uma posição. Não é preciso mais motivos para impulsionar empresas e serviços a criarem anúncios no Facebook, certo? Então, montamos um passo a passo de como gerar um anúncio na plataforma da rede social, com todas as informações necessárias. Confira na página a seguir. 81 > CAPA | WIDE |

57


Tutorial Criando um anúncio no Facebook

Ao clicar em “Continuar”, você verá a seguinte tela:

Aqui, você acompanhará o processo de criação do anúncio da revista Wide no Facebook que fizemos como demonstração. Primeiramente, acesse o site www.facebook.com/advertising e clique em “Crie um anúncio”. Você visualizará o seguinte formulário:

Em “URL de destino”, inserimos http://www.revistawide.com. br/ . O título deve ter até 25 caracteres com espaços e ser per-

suasivo, pois é o que mais chamará a atenção no seu anúncio, depois da imagem. Então, colocamos “Assine com desconto!”. O texto do corpo do anúncio deve ter até 135 caracteres com espaços. São poucos dígitos que devem ser usados, com muita cautela, para deixar o texto envolvente e atrativo. No caso do anúncio da revista Wide, optamos por colocar o valor do desconto na assinatura da revista, pois assim acreditamos que a maioria dos usuários que poderão clicar no anúncio já serão os interessados em realmente assinar a revista. Essa tática é mais utilizada quando o investimento no custo por clique é restrito, garantindo mais o ROI. Hora de fazer upload da imagem do anúncio. É importante destacar que o anúncio estará sob um fundo branco, portanto o ideal é usar cores que contrastem e causem impacto. Utilize uma imagem com as dimensões 110x80 pixels. Veja, ao lado, o resultado visual do anúncio da revista Wide:

58

| 81 > CAPA | WIDE

Neste segundo passo, o box em destaque no alto à direita da tela vai estimando o número de pessoas que o anúncio alcançará de acordo com as informações preenchidas no formulário. Para o nosso anúncio, em “Localização” deixamos “Brasil – em toda parte”. Em “Perfil demográfico”, especificamos usuários de 15 a 50 anos de todos os gêneros. Agora vem a parte mais importante desta etapa de criação do anúncio, a escolha de itens que o público-alvo do anúncio tem interesse. Ao colocarmos termos relacionados ao perfil dos leitores da revista Wide, chegamos a um alcance de 24.980 pessoas. Observe:


CAPA

Terminada esta etapa, a próxima tela é a seguinte:

veiculado, mas você pode preencher o campo com o valor que deseja pagar, e pode ser até centavos. Atenção: quanto maior for o seu lance por clique ou visualização, maior a probabilidade de o seu anúncio ser exibido no Facebook. Pronto! Simples assim. Após essas rápidas etapas será exibida uma página com todas as informações do anúncio. Se quiser modificar algo, basta clicar em “Editar anúncio”. Se estiver tudo correto, siga com o processo clicando em “Fazer pedido”. Basta definir a bandeira do cartão de crédito e seguir com a finalização do contrato.

Nesta fase, são definidos primeiramente a moeda da conta (não tem o real como opção) e o fuso horário. Em “Nome da campanha”, colocamos Revista Wide. E, em “Orçamento diário”, deve ser estipulado um valor máximo que seu cliente esteja disposto a gastar por dia. O seu anúncio pode começar a ser exibido imediatamente após o processo de construção ou apenas quando você quiser que ele comece a ser veiculado, clicando em “Executar esta campanha apenas durante datas específicas”. Agora, clique em “Definir um lance diferente (modo avançado)”. Serão dadas duas opções de pagamento: CPM (pagamento por impressões) e CPC (pagamento por cliques). Se você optar por pagar por impressões, deverá definir quanto deseja investir a cada mil visualizações de seu anúncio no Facebook. Caso você prefira pagar por cliques, deve informar quanto deseja pagar por cada clique em seu anúncio. Ambas as formas de pagamento nunca excederão o orçamento diário estipulado. O Facebook sugere o valor ideal para que você pague por clique ou impressões para que seu anúncio seja melhor

Nós já estamos lá! Acesse www.facebook.com/arteccom para participar de promoções, sugerir temas para reportagens e ficar por dentro de todas as novidades da empresa, inclusive da revista Wide. Se a sua empresa ou a de seu cliente ainda não faz parte do Facebook, lembre-se de que são quase seis milhões de usuários brasileiros na rede social esperando para “curtir” e consumir o seu produto. E, pelo celular, temos mais de 150 milhões de usuários ativos no mundo acessando a rede. Fora isso, os dados levantados pelo eMarketer (www.emarketer.com) no primeiro trimestre de 2010 afirmam que os usuários que passam mais tempo no

Facebook gastam mais em compras na internet, com o tíquete médio chegando em US$ 67. Queremos vê-lo dedicar toda a sua criatividade para, quem sabe, ultrapassar o Michael Jackson ou a Lady Gaga em número de fãs. ;-)

81 > CAPA | WIDE |

59


tecnologia

reportagem

Smarty

Muito mais produtividade na relação designerdesenvolvedor

Por FlĂĄvia Freire


A

plaudido por quem usa, o Smarty (www.smarty.net) é um sistema de template para PHP que merece destaque por propor organização no código. “O Smarty, também conhecido como Templates Engines Smarty, é o sistema de templates oficial do PHP. É gratuito e pode ser utilizado em aplicações comerciais. Sua principal função é separar a marcação (HTML) da programação (PHP), facilitando a manutenção desses arquivos. Na forma tradicional de desenvolvimento, temos a inserção de tags PHP dentro do HTML, transformando nosso código no famoso e conhecido código ‘spaghetti’”, explica Carlos Eduardo Treméa, instrutor e coordenador do curso de webdesign na Microlins de Porto Alegre e desenvolvedor PHP da Linea Comunicação. Veja, a seguir, a comparação usando os dois métodos de desenvolvimento, feita por Carlos Treméa:

Na primeira imagem, desenvolvedor e programador trabalham no mesmo arquivo. Já na segunda, isolamos fisicamente em dois arquivos: a marcação e a programação. Dessa forma, desenvolvedor e designer conseguem trabalhar de maneira complementar. O Smarty auxilia na produtividade do designer e do desenvolvedor, já que evita o retrabalho pelo fato de o designer não precisar ter acesso ao código PHP. “A grande vantagem de fazer uso do Smarty é o fato de o desenvolvedor poder confiar no que o montador HTML e CSS irá alterar. Visto que o código PHP não ficará embutido no HTML, o trabalho da pessoa responsável por codificar o layout do sistema é facilitado. Durante o processo de desenvolvimento, é comum o arquivo ter que voltar ao montador para algum ajuste, o problema é que antes o PHP também estava indo junto nesses códigos HTML e, muitas vezes, eles eram alterados acidentalmente, bugando a aplicação e dando retrabalho para o desenvolvedor. Normalmente, dentro de uma empresa, essas duas tarefas (desenvolvimento PHP e montagem HTML) são separadas, e o Smarty auxilia nesse processo, facilitando o

trabalho de ambos”, declara Cristian Trentin, consultor de projetos web e analista e desenvolvedor PHP, que não deixa de usar o Smarty em nenhum de seus projetos. “Hoje, faço uso do Smarty em todos os sistemas que desenvolvo, aumentando a produtividade e diminuindo o prazo de entrega dos projetos. Um fator que me dava muito trabalho era gerenciar a terceirização da montagem dos templates. Como foco na qualidade do desenvolvimento PHP, o Smarty veio me auxiliar há alguns anos nesse ponto. Posso afirmar que meus projetos hoje têm uma qualidade muito maior do que a grande maioria que se encontra no mercado. São poucos os que têm a preocupação com a qualidade dos projetos entregues. Muitos programadores pensam que o principal é entregar apenas uma aplicação funcionando, não levando em conta a documentação, a padronização, as metodologias de desenvolvimento e outros fatores. E muitos acham que o cliente jamais saberá o que está por baixo da parte gráfica, mas deixo de fechar vários contratos pelo simples fato de o projeto não ter um padrão.” Cristian ressalta também a estrutura do Smarty. “Ele possui um compilador interno com sua própria sintaxe. Os comandos do Smarty são aplicados diretamente no arquivo HTML e são chamados de ‘modificadores’. Esses modificadores permitem aplicar algoritmos de decisões ‘if/else’ e de loop, por exemplo. De forma simples, o Smarty armazena os valores de variáveis processadas no aplicativo e, na página HTML, aplica esses valores inserindo os modificadores. De posse dessas informações, o Smarty ‘compila’ uma página à parte; o ‘cache’ dessa página ‘compilada’ nada mais é do que a página HTML feita pelos designers com os códigos PHP inseridos pelos modificadores do Smarty”, completa. Para os profissionais freelancers, o Smarty cai como uma luva. “Seu uso facilita o processo e a terceirização de trabalhos, já que posso enviar um HTML para outra pessoa criar/alterar e não me preocupar se o meu código PHP ainda funcionará. A facilidade de implementação no uso do Smarty foi um ponto forte quando estava em busca de uma template engine, sem falar na parte inteligente das funções de cache. Mas o que mais gosto nele é a velocidade”, diz Cristian. Para Ciro Feitosa, gerente de desenvolvimento da BSG e desenvolvedor PHP há oito anos, são vários os motivos que levam um profissional a adotar esse modelo. “Velocidade de desenvolvimento, organização para equipes trabalharem em conjunto e facilidade de manutenção do código ou template”, diz. Devido a essa separação mais segura e detalhada de funções, 81 > TECNOLOGIA | WIDE |

61


tecnologia

o Smarty segue o conceito MVC (Model View Controller). “O desenvolvedor que busca o Smarty está interessado em qualidade de desenvolvimento, pois a utilidade básica dele é separar o projeto em camadas, usando N camadas ou arquiteturas mais populares, como o MVC. Com isso em mente, tanto o programador PHP quanto os programadores de interface poderão trabalhar simultaneamente no mesmo projeto, agilizando muito o processo geral de produção, isso sem contar na própria separação das camadas, que facilita o debugging, as correções e a manutenção do código. O Smarty oferece uma

biblioteca de opções de apresentação, ou seja, na minha programação eu não preciso me preocupar em como apresentar a informação, apenas envio a variável para ele e, lá no View, decido como a informação será exibida, como, por exemplo, negrito, itálico, uppercase, lowcase…”, explica Cristiano Gomes, desenvolvedor da Labz Produtora Digital e programador PHP há cinco anos. Ciro Feitosa esclarece que o Smarty não implementa totalmente o conceito MVC. “O Smarty ‘tenta’ implementar o padrão MVC porque, na verdade, ele só possui duas camadas por padrão: a lógica e a apresentação.”

Monte Ohrt e Andrei Zmievski Eles estudaram Ciência da Computação na University of Nebraska, em Lincoln, nos EUA, e dedicaram suas experiências à criação do Smarty. Confira mais nesta entrevista exclusiva.

Monte Ohrt

Andrei Zmievski

(Nebrasca, Estados Unidos)

(República do Uzbequistão)

Criador do Smarty e atual diretor de tecnologia da New Digital Group

Cocriador do Smarty e atual diretor e fundador da Analog (www.analog.coop)

(www.newdigitalgroup.com)

WIDE Como surgiu a ideia de criar um sistema de template para PHP? MONTE A intenção inicial em 2001 era a de construir um sistema

de template para permitir que designers terceirizados editassem templates com segurança. Isto é, sem abrir mão da compatibilidade com o servidor do PHP. Juntamente com isso, veio uma sintaxe simplificada de template {tag}. ANDREI O primeiro sistema de template que Monte e eu usávamos depois que começamos a desenvolver em PHP era o FastTemplate. Ele fazia bem o trabalho, mas não era muito poderoso, então o modificamos bastante e chamamos o resultado de SmartTemplate. Usamos esse sistema de template por um tempo, mas sentimos que ainda estava faltando muitas coisas que seriam legais para desenvolvedores e designers. Escrevi uma proposta para um sistema de template baseado em C para ser incluído no PHP por padrão, e houve uma grande discussão durante alguns meses sobre isso, mas o resultado final foi que as pessoas tinham a sensação de que ele não pertencia ao core do PHP. Tive que voltar para minha casa, no Uzbequistão, por alguns meses. Enquanto estive por lá, estava conversando com o Monte pela internet e ele disse que estava começando a

62

| WIDE | 81 > TECNOLOGIA

desenvolver um novo sistema de template, chamado Smarty. Quando voltei, ele já tinha um protótipo inicial do trabalho, e comecei a ajudá-lo nisso. Lembro-me que foquei no conceito dos modificadores e os implementei, além de desenvolver os arquivos de configuração. Para a versão 2.0, criei a arquitetura de plugin e converti tudo o que era possível para plugins. Também palestrei sobre o Smarty em vários eventos. WIDE Poderia explicar a simplicidade de desenvolvimento ofere-

cida pelo Smarty? MONTE Com o Smarty, o ciclo do design se torna uma experiência menor e mais fácil, já que só lidam com a sintaxe {tag} do Smarty, que é o projeto específico para marcar a apresentação, ao contrário do PHP. WIDE Você esperava todo este sucesso quando lançou o Smarty? MONTE Não esperava, mas imaginei que seria possível, pois tive-

mos um grande sucesso com os nossos próprios clientes antes de disponibilizá-lo para o mundo, e essa foi uma das razões para torná-lo open source.


WIDE Quais as novidades da versão 3.0 RC? Quais foram as melho-

rias mais importantes aplicadas a essa nova versão? MONTE Várias melhorias, algumas notáveis: a nova engine foi totalmente reconstruída para PHP 5. Muitas funções do PHP 5 foram incorporadas à estrutura interna do Smarty. Um novo lexer/parker nos dá mais recursos na própria linguagem, como in-template math, mensagens de erro mais refinadas, chamadas recursivas e definições de função in-template. O Smarty apresenta, agora, template e data objects, recursos de PHP stream e herança de template. WIDE No Brasil, há um bom número de desenvolvedores que uti-

lizam o Smarty e que têm boa participação na comunidade? MONTE O Smarty é utilizado no mundo inteiro. Temos milhares de desenvolvedores de cada canto do mundo que visitam o site diariamente. De acordo com nosso analytics, 2,4% do tráfego do Smarty vem do Brasil. ANDREI Sempre achei os desenvolvedores brasileiros muito inteligentes e entusiasmados. Eles também organizam grandes comunidades e tomam alguns partidos legais.

Hoje, faço uso do Smarty em todos os sistemas que desenvolvo, aumentando a produtividade e diminuindo o prazo de entrega dos projetos Cristian Trentin

81 > TECNOLOGIA | WIDE |

63


Tutorial

Começando a utilizar

Para fazer o download do Smarty, basta acessar o site www. smarty.net/download.php e baixar a última versão disponível, que é a 3.0, lançada em julho deste ano, mas que ainda está na fase Release Candidate. Lembre-se que a ferramenta que você irá baixar trabalha apenas com PHP 5. Ao terminar o download do arquivo compactado, abra a pasta “demo” e, então, você verá quatro pastas:

convenção, utiliza a extensão .tpl. O arquivo mais importante da biblioteca Smarty é o Smarty.class.php, que precisa ser inserido em todos os scripts que façam utilização do Smarty”, completa Carlos. Segundo Cristian Trentin, não há mistérios nem dificuldades no aprendizado para quem já é programador PHP. “O próprio manual contém o Smarty para programadores e o Smarty para designers de template (montadores). Para ambos, a curva de aprendizado é muito pequena. Algumas horas de estudo lhe permitirão criar sua primeira aplicação fazendo uso de templates.” Para Ciro Feitosa, o Smarty diferencia-se por usar um propósito de simplicidade. “Mesmo iniciantes conseguirão usá-lo de forma simples, uma vez que o padrão de template é muito fácil de ser assimilado. Outro ponto a seu favor é que o Smarty possui dezenas de funções pré-prontas que facilitam o trabalho, como, por exemplo, a criação de campos de formulários (html_options, html_checkboxes, html_radios etc.). Isso acelera o desenvolvimento, quando se trata de registros dinâmicos vindo de um banco de dados, por exemplo”. Analisando o código

Para entendermos como o Smarty funciona, Ciro elaborou um exemplo de aplicação com Smarty. Confira:

Carlos Treméa explica esses diretórios:

cache: pasta usada pelo Smarty para armazenar os arquivos usados quando a opção de cache está habilitada. configs: pasta que deve conter os arquivos de configuração ‘.conf’. templates: pasta em que devem estar os arquivos ‘.tpl’, onde ficam os códigos HTML e do próprio Smarty. templates_c: pasta usada pelo Smarty para armazenar as páginas compiladas. Essa pasta deve ter permissão de escrita no servidor. Para o Smarty começar a funcionar, são necessários apenas dois diretórios, segundo Ciro. “São eles: templates, onde ficarão todos os templates; e templates_c, diretório de cache dos templates. A criação de subdiretórios dentro do ‘templates’, por exemplo, fica a critério do responsável pelo projeto. Esses nomes podem e, por razão de segurança, devem ser alterados modificando os atributos $template_dir e $compile_dir da classe Smarty em ‘Smarty.class.php’. Para começar a utilizar o Smarty, Carlos Treméa disponibilizou uma vídeo-aula, que pode ser assistida em vimeo.com/10230706, na qual explica todo o processo de instalação da versão 2.6.26, a última estável, e ensina como dar os primeiros passos com a template engine. “A utilização do Smarty é muito fácil. Depois de fazer o download dos arquivos, basta instanciar um objeto para a utilização dos métodos dessa classe. Um arquivo deve ser criado para se fazer a utilização dos comandos HTML. Esse arquivo, por

64

| WIDE | 81 > TECNOLOGIA

Ambiente fictício: e-commerce rodando PHP/MySQL com uma tabela “pedidos”. Campos da tabela: id (int), data/hora (timestamp), valor (float), comprador (string), status (0 = pendente; 1 = pago; 2 = cancelado). PHP: deve ler a tabela de pedidos no banco de dados e associá-la a um array. Template: deve mostrar esse array numa tabela. Código PHP:

<?php /** * neste ponto você deve inicializar e instanciar o Smarty * além, é claro, de conectar ao bd */ // inicialize e instancie o Smarty // conecte ao bd /** * percorre a tabela e associa a um array */ $sql = “SELECT * FROM pedidos ORDER BY datahora DESC”; $dados = mysql_query($sql);


tecnologia

while ($linha = mysql_fetch_array($dados, MYSQL_ASSOC)) { $pedidos[] = $linha; } $smarty->assign(‘pedidos’, $pedidos); /** * mostrar o template do smarty */ $smarty->display(‘pedidos.tpl’); ?>

<head> <title>Exemplo de Smarty</title> </head> <body> {$nome} //Aqui passamos a variável que irá conter o conteúdo passado pelo php </body> </html> Já Carlos Eduardo Treméa especifica o arquivo de configuração do Smarty:

Código Template:

Arquivo de configuração do Smarty:

<table> <tr> <th>ID Pedido:</th> <th>Data:</th> <th>Comprador:</th> <th>Status:</th> </tr> {foreach from=$pedidos item=p} <tr> <td>{$p.id}</td> <td>{$p.datahora|date_format:”%d/%m/%Y %H:%M”}</td> <td>{$p.comprador}</td> <td>{if $p.status == 0}Pendente{elseif $p.status == 1}Aprovado{else}Cancelado{/ if}</td> </tr> {/foreach} </table>

<?php //constante para o smarty define(‘SMARTY_DIR’,’lib/Smarty/libs/’); //pasta onde esta o smarty include(SMARTY_DIR.’Smarty.class.php’); //Criando um objeto da classe Smarty $smarty = new Smarty(); $smarty->cache_dir = “cache”; $smarty->config_dir = “configs”; $smarty->compile_dir = “templates_c”; $smarty->template_dir = “templates”; ?>

Cristian Trentin também exemplifica a diferença entre o código do desenvolvedor e o código que é modificado pelo designer de template: Código PHP: <?php //Requere o arquivo smarty.inc.php require_once(ROOT.”system/include/ smarty.inc.php”); //Seta o nome para o tpl $smarty->assign(‘nome’, ‘Fulano de tal’); //Display no template $smarty->display(‘index.tpl’); ?> Código Template:

<html>

Arquivo PHP (aqui fica toda programação e regra do negócio):

<?php //incluindo o arquivo de configuração do Smarty include(‘config.php’); $nome = ‘Carlos Eduardo’; $site = ‘www.kadunew.com/blog’; $smarty->assign(‘teste’,$nome); $smarty->assign(‘site’,$site); $smarty->display(‘index.tpl’); ?> Arquivo Template (responsável por mostrar tudo que for executado no arquivo PHP. Deve vir entre chaves “{...}”):

<html> <body> <h1>Trabalhando com Smarty</h1> {$teste} <br /> {$site} </body> </html> 81 > TECNOLOGIA | WIDE |

65


tecnologia

O Smarty possui dezenas de funções pré-prontas que facilitam o trabalho, como, por exemplo, a criação de campos de formulários Ciro Feitosa Plugins e integrações para Smarty

O Smarty permite a alteração dos seus delimitadores, a criação de plugins e a integração com diversos frameworks. “Basta dar uma pequena pesquisada na internet para localizar como integrá-lo com ZendFramework, CodeIgniter e CakePHP, entre outros”, esclarece Cristian Trentin. O repositório oficial de plugins do Smarty pode ser acessado em www.smarty.net/contribs/plugins. Segundo Cristiano Gomes, os plugins do Smarty são extremamente fáceis de instalar. “Por meio da propriedade ‘plugin_dir’ da classe ‘Smarty’ é possível configurar o caminho até a pasta em que ficam os plugins. Eles são carregados sob demanda, e o Smarty só inclui os códigos daquele plugin se o modificador referente a ele for encontrado dentro do HTML.” Plugins mais utilizados:

SmartyValidate: utilizado para validação de formulários. www. phpinsider.com/php/code/SmartyValidate

SmartyFormtool: oferece uma gama de controles de JavaScript para formulário. www.phpinsider.com/php/code/SmartyFormtool SmartyPaginate: oferece um sistema de paginação de resultados. www.phpinsider.com/php/code/SmartyPaginate

SmartyMenu: para menus dropdown onMouseOver controlado por CSS. www.phpinsider.com/php/code/SmartyMenu Hora de estudar!

Nada melhor do que o manual oficial de Smarty em português para conhecer todas as funções da template engine. Ele pode ser acessado em www.smarty.net/manual/pt_BR. O fórum oficial (www.smarty.net/forums) possui mais de 14 mil usuários e é a melhor referência para encontrar respostas para suas dúvidas. E a lista de discussão para desenvolvedores do Brasil e de Portugal fica em br.groups.yahoo.com/group/smarty-pt. Se código bom é código limpo e bem-estruturado, e sendo você um desenvolvedor dedicado a seguir as regras rígidas de organização, o Smarty não pode deixar de fazer parte do seu trabalho.

66

| WIDE | 81 > TECNOLOGIA


80 81 > TECNOLOGIA | WIDE |

67


tecnologia

Front-end Profissionais do Brasil e do exterior falam sobre a importância da presença desse especialista nas equipes de desenvolvimento

68

| WIDE | 81 > TECNOLOGIA

Ilustração - Carolina Vigna-Marú


O reconhecimento sobre a necessidade de um front-end engineer em uma equipe ainda é baixo. Seria isso razão do desconhecimento das funções desse profissional por parte dos diretores e gestores de projetos? Os profissionais front-end não tiram o espaço dos designers nem dos desenvolvedores. Eles focam suas habilidades nas melhores práticas do design e do desenvolvimento, dando mais força à usabilidade e à interatividade do site, preocupando-se, ainda, com acessibilidade, internacionalização, arquitetura da informação, mobilidade e qualidade do projeto em geral. Então, se o profissional front-end precisa entender de Web

Standards, Web 2.0, HTML, CSS, JavaScript, AJAX, interface, media types, cross-browser, cross-platform e tantas outras áreas do desenvolvimento de um site, como ele deve se preparar e qual a formação ideal para que se torne especialista? As empresas têm mostrado interesse em profissionais com esse perfil? Quais partes do projeto ele deve acompanhar e quando pode dar início ao seu trabalho? Até que ponto os profissionais front-end são essenciais para o sucesso de um site? Para responder a tais questões e mostrar a importância desse profissional, convidamos cinco especialistas no assunto e atuantes na área.

Marcel Duran Front-end engineer na equipe de Search do Yahoo!, no Vale do Silício www.javascriptrules.com

A base de conhecimento do profissional front-end compreende três principais camadas: conteúdo, apresentação e comportamento, em que HTML, CSS e JavaScript se encaixam respectivamente. Para que a integração dessas camadas seja bem-sucedida, o profissional deve ter um vasto repertório em diversas áreas, como performance, segurança, experiência do usuário, acessibilidade, testes/qa e internacionalização. Por envolver distintas áreas do conhecimento, não há formação específica para o front-end. Esses profissionais são, em sua maioria, autodidatas com ou sem formação na área de tecnologia. Sua atualização e o aperfeiçoamento de suas habilidades são feitos por meio de leitura de livros técnicos, blogs, fóruns, listas de discussões, vídeos e conhecimento de frameworks e ferramentas que dão suporte ao desenvolvimento do projeto. É comum esses profissionais publicarem blogs e participarem de discussões sobre as diversas áreas envolvidas com expoentes da área. O trabalho do front-end é essencial para a qualidade e o sucesso de um projeto web durante todas as etapas, desde a escolha do framework ao levantamento de métricas de uso/performance do site em produção.

Como seu conhecimento é abrangente, uma decisão sem sua devida supervisão, embora aparentemente correta, pode significar retrabalho ou fracasso de um futuro ciclo, gerando custo extra e outros problemas para a equipe. Isso se deve à falta de conhecimento das partes envolvidas no desenvolvimento do projeto. Muitas vezes,

Empresas brasileiras têm demonstrado pouco ou nenhum interesse pelo profissional front-end, ao contrário do mercado norte-americano, onde há uma enorme demanda. Grandes empresas do Vale do Silício, como Yahoo! e Google, promovem a cultura front-end por meio de encontros desses profissionais, para que apresentem e discutam os mais diversos assuntos relacionados ao seu

Empresas brasileiras têm demonstrado pouco ou nenhum interesse pelo profissional front-end, ao contrário do mercado norte-americano, onde há uma enorme demanda detalhes sutis passam desapercebidos ou são completamente ignorados por designers, programadores ou até mesmo gerentes de projeto que desconhecem, por exemplo, a diferença entre renderizações em distintos browsers, a mantenabilidade de um framework, possíveis brechas de segurança, responsividade mínima para garantir a melhor experiência ao usuário e melhores práticas de performance e qualidade de código.

trabalho. Além de ser um espaço rico para o intercâmbio de conhecimento, esses eventos também são uma excelente ocasião para networking e ofertas de vagas disponíveis. Como há poucos profissionais front-end disponíveis no mercado, recrutadores de empresas norteamericanas têm usado diversos incentivos financeiros e outros benefícios para atraílos, como bônus por referência a amigo que chegam a 10 mil dólares em alguns casos. 81 > TECNOLOGIA | WIDE |

69


tecnologia

Rafael Mumme Desenvolvedor front-end senior na HUGE de Nova Iorque www.hugeinc.com @mumme

O desenvolvedor front-end exerce um papel fundamental na criação e implementação de qualquer website. É um erro subestimá-lo. Acompanhando a rápida evolução da internet e dos navegadores, a profissão se desenvolveu bastante nos últimos dez anos, exigindo conhecimento profundo na sua área de atuação e constante atualização. Além disso, o desenvolvedor front-end deve ter uma visão geral sobre diversas outras áreas. No Brasil, o cargo ainda é desvalorizado e, por isso, vários profissionais se tornam desenvolvedores server-side. Dessa forma, é muito difícil encontrar front-ends brasileiros experientes e qualificados. No entanto, nos Estados Unidos a situação é bem diferente. O mercado é aquecido e o profissional é bem remunerado. A visão por aqui é a de que investir nessa área é importante e gera um retorno lucrativo. Por isso, grandes empresas, como Yahoo!, Google, Twitter, Microsoft e Adobe, investem pesado em front-end. Hoje, cada vez mais distante do apelido de htmler ou copyand-paster, o desenvolvedor front-end é responsável por:

• assegurar compatibilidade cross-browser e cross-platform; • produzir código limpo, bem documentado e estruturado; • criar páginas web rápidas; • seguir os web standards; • aplicar técnicas de SEO (Search Engine Optimization). É importante ser caprichoso e dedicado e, como em qualquer outra profissão, muito trabalho e estudo são essenciais. A web é sua fonte principal de conhecimento, onde novos artigos, bibliotecas e estudos são publicados diariamente — e, o que hoje é padrão, amanhã se torna obsoleto. Por se tratar de uma profissão que requer programação, é comum ver profissionais formados em Tecnologia da Informação atuando nessa área. A progressão natural da profissão é a especialização em uma de suas áreas de conhecimento, como, por exemplo, especialista em performance ou consultor SEO. O cargo de gerente, liderando outros desenvolvedores, também é uma boa opção. O desenvolvedor front-end deve participar de todas as fases de um projeto web. É ele quem conhece as restrições dos diferentes navegadores, devendo atuar com sugestões e alternativas para tornar o projeto viável. Muitas vezes, sua presença pode ser considerada frustrante, mas trabalhar com limites nos torna mais criativos e eficientes. O sucesso de um projeto web está diretamente ligado a sua experiência e qualificação. Por fim, trabalhar como desenvolvedor front-end é gratificante e desafiador. Empresas que valorizam e respeitam nosso trabalho crescem e contribuem para uma internet ainda melhor.

70

| WIDE | 81 > TECNOLOGIA

Grandes empresas, como Yahoo!, Google, Twitter, Microsoft e Adobe, investem pesado em front-end


Eduardo Lundgren Engenheiro de software na Liferay Inc. e criador do AlloyUI JavaScript Framework www.eduardolundgren.com

Houve uma época em que o desenvolvedor de softwares desempenhava um papel generalizado, sendo responsável tanto pela criação e integração do hardware quanto pela modelagem e desenvolvimento do software utilizado. Essa realidade está mudando e hoje há uma intensificação da divisão do trabalho, fracionando as etapas do desenvolvimento, de modo que o engenheiro desenvolva tarefas ultraespecializadas, o que tem se mostrado bastante eficaz. Por outro lado, o fracionamento das tarefas não garantiu uma divisão igualitária para todos os ramos do desenvolvimento.

A falta de um profissional especializado nessa área pode representar risco ao projeto Em algumas empresas ainda existe muito preconceito em relação aos profissionais especializados em front-end. A falta de um profissional especializado nessa área pode representar risco ao projeto. Numa aplicação web, seja ela intra ou extra-net, no geral, o back-end é responsável por apenas cerca de 20% da performance do software, o que inclui a execução do código no servidor, o tempo das consultas ao banco de dados, a geração dos dados de saída (HTML, XML, JSON etc.) e a transferência dos dados para o client-side (browser). Uma vez recebidos os dados do servidor, o browser tem que processar e renderizar o HTML, executar os in-line scripts, requisitar JavaScript, CSS, imagens e todos os outros componentes externos utilizados pela página HTML. O front-end é responsável por mais de 80% do tempo

gasto no carregamento de uma página web. As empresas mais visionárias valorizam cada vez mais os profissionais dessa área, o que as tornaram líderes quando comparadas a empresas em que diretores e gestores não sabem diferenciar o papel de um desenvolvedor front-end numa equipe. Boa parte das arquiteturas e das design patterns utilizadas em softwares desenvolvidos em linguagens como JAVA e C++ podem ser aplicadas, por exemplo, a frameworks desenvolvidos em JavaScript. Na área de softwares para web, o desenvolvedor responsável pelo frontend pode ter conhecimentos avançados de programação. Por isso, não é seguro assumir que um profissional front-end é também um designer. Para se tornar um especialista em qualquer assunto requer-se muito estudo e prática. Tal constatação também se aplica ao profissional front-end. Utilizar alguns conceitos de Engenharia de Software é fundamental para desenvolver componentes ou frameworks em JavaScript. Se envolver com projetos open source na área também é algo muito importante. Muitas empresas têm mostrado interesse em profissionais com esse perfil. A presença de um front-end é relevante na maioria das fases de um projeto web, pois, trabalhando em sintonia com os desenvolvedores back-end, resulta em uma divisão mais organizada das camadas de uma aplicação e sua integração, o que, muitas vezes, produz códigos menos complexos no back e no front-end. Portanto, se a preocupação do seu projeto web é ter um código mais organizado, uma integração entre as camadas mais inteligente e uma performance melhor, a presença de um especialista nessa área é indispensável. 81 > TECNOLOGIA | WIDE |

71


tecnologia

Guilherme Chapiewski Sr. Engineering Manager no Yahoo! Inc. gc.blog.br @gchapiewski

Antigamente, ninguém pensava muito na interface. Aliás, mais antigamente ainda — quando a web começou — era tudo “preto no branco” e sem imagem; os sites eram praticamente texto corrido. Depois, a web era feita quase que totalmente de sites institucionais, que também não tinham requerimentos especiais, além de ter uma aparência legal para não “queimar o filme” da empresa. Com a chegada da Web 2.0, isso tudo mudou.

O domínio de especialidades de front-end pela equipe é essencial para o sucesso de um produto na web Hoje em dia, a “User Experience” na web é mais do que essencial. Um site que oferece uma boa experiência faz com que seus usuários sejam mais engajados e passem mais tempo usando o produto, que é o que todo mundo busca no fim das contas. Não se tem boa UX com um “design bonito” (ou com aquelas introduções em Flash desnecessárias). Para uma boa experiência na web, além de um design que facilite o consumo do conteúdo, a sua interface precisa ser fácil de usar, leve, oferecer uma boa interatividade, ser otimizada para dispositivos móveis e por aí vai. Atualmente, não basta apenas ter um produto legal. Ele não decola se a interface for ruim. A nova geração de produtos na web é pensada para causar um efeito “wow” nas pessoas. Olhe para o Twitter, o Facebook, o próprio Yahoo!. Todos estão sempre se reinventando, buscando trazer uma experiência cada vez melhor para seus usuários e, nesse cenário, as disciplinas de front-end são muito importantes. Particularmente, acredito que, na maioria dos casos, você não terá uma pessoa que só trabalha com design, outra com implementação de interface, outra só com back-end etc. Parte dos skills de Front-end é absorvida pelos designers, e outra, pelos

72

| WIDE | 81 > TECNOLOGIA

desenvolvedores, e, na maioria dos projetos, são essas as duas especialidades que existirão. Ou seja, não vejo ninguém tirando o espaço de ninguém :) No geral, vejo as especialidades de front-end mais ligadas ao desenvolvimento do que ao design. O desenvolvedor já teve contato com diversas linguagens de programação, então ele tem facilidade para entender como usar JavaScript, programar para vários browsers, HTML, CSS etc. Ainda, para trabalhar com AJAX e fazer otimizações, é preciso entender do protocolo HTTP, de como o servidor processa requisições ou até mesmo de infraestrutura (como funciona um cluster, uma CDN etc.). Desenvolvedores, geralmente, já estão acostumados com essas coisas, então acaba sendo relativamente fácil entender do resto. Não quero dizer com isso que designers não devem procurar entender essas disciplinas; muito pelo contrário. É um diferencial enorme para designers saber como funciona principalmente HTML, CSS e JavaScript, primeiro porque eles começam a compreender melhor as possibilidades que têm, segundo porque previne que façam interfaces impossíveis de serem implementadas e, terceiro, porque podem passar a prototipar e definir melhor a interatividade que desejam oferecer. Os melhores designers que conheci muitas vezes fizeram a diferença por dominarem esses tópicos. Sobre o mercado, observo que as empresas estão extremamente interessadas em profissionais especialistas em front-end, porém estão mais interessadas ainda em desenvolvedores ou designers multidisciplinares, que, dentre outras coisas, são especialistas em disciplinas de front-end. Por último, não diria exatamente que profissionais de front-end são essenciais para o sucesso de um site. Eu reescreveria para: “o domínio de especialidades de front-end pela equipe é essencial para o sucesso de um produto na web”. Acho que não necessariamente você precisa ter profissionais que fazem só isso na equipe; pode-se ter designers e/ou desenvolvedores especialistas em front-end, funcionará do mesmo jeito. Além disso, para mim está bem claro que você precisa muito dessas especialidades para desenvolver o Gmail, ou o Facebook, ou o Yahoo! Pipes, mas não necessariamente para um site institucional, por exemplo.


Preocupadas com a qualidade dos produtos, inúmeras empresas estão à procura de profissionais com esse perfil: desenvolvedores com sólidos conhecimentos em linguagem de marcação, folhas de estilo, JavaScript e Flash

Felipe Silva Desenvolvedor front-end da Globo.com @felipe_silva

Para muitas empresas, as disciplinas relacionadas ao universo de front-end são compartilhadas entre designers, arquitetos de informação e desenvolvedores. Para outras, elas ficam a cargo de um profissional exclusivo. Quando as empresas começaram a aplicar técnicas ágeis para gestão e desenvolvimento de produtos, utilizando times multidisciplinares, esse cenário ficou ainda mais confuso. O desenvolvimento de sites/aplicações web com foco na experiência do usuário é um caminho sem volta. Isso somado à melhoria dos navegadores, crescimento da banda larga, número de dispositivos móveis com acesso à internet no mercado e novas tecnologias, o que acabou transformando o desenvolvimento de interfaces em algo extremamente complexo. É importante existir um profissional de front-end focado em estudar e se

manter informado sobre o avanço dessas tecnologias. Designers e desenvolvedores back-end devem aproximar-se do desenvolvimento front-end, sobretudo porque a experiência do usuário em uma interface depende diretamente do trabalho realizado por eles. Costumo dizer que, para ser um frontend engineer, é preciso ser formado em Tecnologia da Informação e ter intimidade com práticas e teorias relacionadas ao design, ou, ainda, ser formado em Design e ter intimidade com lógica de programação e arquitetura de software. Isso porque a construção de interfaces complexas exige conhecimento em engenharia de software, design e arquitetura de informação. Por esse motivo, existem no mercado de trabalho front-end engineers com diferentes formações acadêmicas. Apesar das possibilidades citadas, aqui na Globo.com a grande maioria dos front-

end engineers são formados em Tecnologia da Informação ou afins. Com a evolução do hardware dos usuários, navegadores mais poderosos e as novas tecnologias, foi possível migrar grande parte das regras de negócio dos sites e aplicações web para o cliente (navegador do usuário). Dessa forma, são necessários muita lógica de programação, conhecimento em arquitetura de software e outros atributos que pertencem à grade de uma faculdade de tecnologia. Preocupadas com a qualidade dos produtos, inúmeras empresas estão à procura de profissionais com esse perfil: desenvolvedores com sólidos conhecimentos em linguagem de marcação, folhas de estilo, JavaScript e Flash. Além de serem capazes de portar os sites e as aplicações web para os diversos navegadores e dispositivos disponíveis no mercado. Usabilidade, SEO e performance também fazem parte do grupo. 81 > TECNOLOGIA | WIDE |

73


tecnologia

Por Flávia Freire

Graeme Rocher O britânico líder de desenvolvimento da SpringSource e cofundador do Grails fala sobre esse poderoso framework de aplicações web

74

| WIDE | 81 > TECNOLOGIA


Graeme Rocher Líder de desenvolvimento da SpringSource e cofundador do Grails.

Inicialmente chamado de “Groovy on Rails”, o Grails (www.grails. org) foi lançado em março de 2006 como um framework de alta produtividade para o desenvolvimento de aplicações web na plataforma Java, baseado nos frameworks Hibernate (www.hibernate. org) e Spring (www.springsource.org). O britânico coautor do livro Definitive guide to Grails (migre. me/1rVX5), Graeme Rocher, é líder de desenvolvimento da SpringSource e roda o mundo palestrando sobre Grails, Groovy (groovy.codehaus.org) e Java. WIDE Quando o Grails foi criado? Por qual razão você decidiu lançar

um framework Java? Quais melhorias você quis oferecer por meio do Grails, comparando com outros frameworks Java? GRAEME O Grails foi criado em 2005. Havia uma lacuna de um framework que oferecesse características dinâmicas encontradas em frameworks como Ruby on Rails e Django, mas desenvolvido para a JVM (Java Virtual Machine). As melhorias encontradas no Grails são realmente em relação à produtividade. Você não encontrará um framework mais produtivo na JVM hoje.

WIDE O que significa o princípio “Convenção sobre Configuração”

no Grails? GRAEME Em vez de requerer aos desenvolvedores que especi-

fiquem valores de configuração via anotações ou XML, o Grails infere na configuração das convenções nas fontes dos projetos. WIDE Como o Grails ajuda os times de desenvolvimento a adotar

metodologias ágeis? GRAEME Linguagens dinâmicas tipicamente funcionam muito bem em times ágeis devido à facilidade de simular o comportamento dinâmico. Existem também ótimas ferramentas de teste no espaço Groovy, como Spock para testes BBD (code.google.com/p/ spock), Geb para testes funcionais (github.com/geb/geb), assim como a construção de Grails em framework mocking. WIDE Grails é um framework fácil de aprender para os desenvolve-

Open Source.

dores Java? E para desenvolvedores de outras linguagens? GRAEME Groovy é uma linguagem muito flexível que fornece as características necessárias para que uma ampla variedade de desenvolvedores com diferentes origens sintam-se confortáveis. Temos desenvolvedores PHP, Ruby e Python usando Grails com facilidade. Essas mesmas pessoas achariam muito mais difícil e menos agradável usar uma estrutura baseada em Java.

WIDE O Grails complementa o desenvolvimento de aplicações Java,

WIDE O que é possível desenvolver com Grails? Existem plugins para

desde que sejam construídas em Spring e baseadas em Groovy, a principal linguagem dinâmica para a plataforma Java. Para desenvolver aplicações em Grails, que tipo de conhecimento sobre Spring e Groovy é necessário? GRAEME Muitas pessoas desenvolvem aplicações sem o conhecimento de Spring, no entanto há muito a ser ganho com o aprendizado de Spring. Quanto ao Groovy, quando você quiser usar qualquer framework é bom aprender a linguagem em que foi desenvolvido. Então, saber Groovy é necessário. Esclarecendo que a curva de aprendizado de Groovy é muito menor para os desenvolvedores Java do que para os desenvolvedores de outras linguagens, devido à similaridade do Groovy com o Java.

todas as funcionalidades que um desenvolvedor pode vir a precisar para construir um site? GRAEME Cada aplicação é diferente e existem muitos problemas, que seria impossível se ter um plugin para cada cenário, mas os cenários comuns são cobertos por nossos plugins, incluindo necessidades como segurança, caching, web services e assim por diante.

WIDE O Grails é livre e open source? GRAEME Sim. O Grails é livre e sob a licença Apache 2.0 liberal

WIDE Por que o Grails garante que projetos Web 2.0 sejam feitos em

semanas, em vez de meses, entregando aplicações de qualidade em um tempo reduzido? GRAEME Isso é baseado em informações de nossos clientes e nas experiências da comunidade. O feedback que recebemos é de um 81 > TECNOLOGIA | WIDE |

75


tecnologia

Temos desenvolvedores PHP, Ruby e Python usando Grails com facilidade ciclo de desenvolvimento dos projetos drasticamente reduzido em relação a outros frameworks Java.

fontes, mas sei que há uma grande comunidade no país, a Grails Brasil (www.grailsbrasil.com), que parece ser bastante ativa e um bom lugar para solicitar informações. WIDE E sobre a comunidade e as listas de discussão, quais são as

oficiais e como está a frequência em relação à colaboração dos usuários? GRAEME Há o fórum oficial, SpringSource Grails, que se encontra em migre.me/1rWSA, e uma lista de discussão em grails.org/Mailing+lists. A lista recebe mais de cem e-mails por dia e o fórum, apesar de novo, já é bastante ativo.

WIDE Qual o diferencial do Grails em comparação com outros

frameworks web dinâmicos da JVM? GRAEME Não existem muitos outros frameworks web dinâmicos na JVM. A principal outra opção é o JRuby on Rails e, comparando os dois, o Grails é mais integrado ao Java e suas ferramentas. Com Grails você pode usar as mesmas IDE’s, depuradores, ferramentas de monitoramento e gerenciamento, perfis e assim por diante. Contudo, com JRuby on Rails você fica mais no ecossistema Ruby do que no Java. A outra grande vantagem do Grails em relação ao JRuby on Rails é a performance. Em nossos testes, o Grails pode lidar de três a cinco vezes mais com requisições por segundos do que o JRuby on Rails. WIDE Qual a vantagem de ser desenvolvido por Spring? GRAEME A vantagem é que com Grails se tem produtividade e

usabilidade de um framework web dinâmico, mas você também tem toda a flexibilidade oferecida pelo container do Spring. O Spring pode ser usado para uma diversidade de funções, como remoting, integração empresarial, processamento em lote e por aí vai. É muito mais que um simples container de injeção de dependência. Com Grails você tem todo o poder necessário, então nunca encontrará uma barreira que o impossibilite de continuar. WIDE O Grails está agora na versão 1.3.4 binária. O que essa versão

traz em produtividade na plataforma Java em comparação às versões anteriores? GRAEME O Grails 1.3 introduziu o gerenciamento de dependências para plugins, verificação de lixeira, consultas nomeadas, entre outras funcionalidades. Tais características são descritas com mais detalhes nas notas de lançamento: grails.org/1.3+Release+Notes. WIDE Onde os desenvolvedores podem encontrar tutoriais e a docu-

mentação para aprender a desenvolver com Grails? Existe informação sobre o framework e material para estudo em português? GRAEME A referência de documentação mais recente pode ser encontrada em www.grails.org/doc/latest. Existem diversos tutoriais sobre Grails, alguns deles podem ser encontrados na nossa página de tutoriais: www.grails.org/Tutorials. Eu não falo português (embora meu espanhol seja digno), por isso não posso recomendar

76

| WIDE | 81 > TECNOLOGIA

WIDE Poderia destacar alguns sites desenvolvidos com Grails? GRAEME Existem muitos grandes sites escritos em Grails, incluindo

o Manymoon (www.manymoon.com), o eHarmony (www.eharmony. com), o Walmart MP3 Music Downloads (mp3.walmart.com), o Sky (www.sky.com) e a página de análise de produtos da revista Wired (www.wired.com/reviews), só para listar alguns..

Confira o estudo de caso de um site totalmente desenvolvido em Grails na entrevista a seguir.


80 81 > TECNOLOGIA | WIDE |

77


Grails para os

melhores momentos

Há poucos anos no mercado, o framework já garante recursos ilimitados para a criação de todo tipo LOGIA TECNO de aplicação web. O site | 80 > Noite Universitária é a comprovação brasileira da produtividade do Grails. 78

| WIDE | 81 > TECNOLOGIA


tecnologia

Um dos mais famosos sites de eventos do Rio de Janeiro, o Noite Universitária (www.noiteuniversitaria.com.br), está no ar desde 2001. Devido ao seu grande sucesso, em 2007 passou por uma reformulação para atender melhor aos mais de 300 mil usuários cadastrados e foi totalmente reconstruído em Grails. Hoje, o site recebe, por mês, cerca de 61 mil visitantes e aproximadamente um milhão de page views mensais. O responsável técnico pelo desenvolvimento do site Noite Universitária em Grails é o sócio das startups Peladeiro.com.br e Manubia.com.br, Felipe Fortes Nascimento, mestre em Engenharia de Software pela PUC-Rio e desenvolvedor e consultor de TI nas áreas de Arquitetura de Sistemas Web e Processos Ágeis de Desenvolvimento de Software. Com mais de doze anos de experiência na área, é ele quem fala dos recursos do framework utilizados em todo o sistema, que inclui controle de login, processamento de imagens, envio de e-mails, módulo administrativo, geração de relatórios e muito mais. WIDE Por que o Grails foi o framework escolhido para desenvolver o

Noite Universitária? Você tomou essa decisão ou a empresa estipulou o framework que desejava para o site? FELIPE O Grails foi o escolhido por ser um framework que junta alta produtividade de desenvolvimento com a robustez do mundo Java e dos diversos frameworks consagrados nos quais o Grails se baseia (Spring, Hibernate, Sitemesh etc.). A decisão foi tomada por mim. Na época do desenvolvimento inicial do Noite Universitária, o Grails estava em sua versão 0.3. Então, foi uma aposta que no final se mostrou acertada. Uma das grandes vantagens do Grails é que ele usa Groovy, uma linguagem executada na JVM. Ou seja, no final das contas é tudo Java. E isso possibilita o uso de bibliotecas e frameworks Java diretamente na sua programação Groovy. Tudo do mundo java que existe há anos pode ser usado numa aplicação Grails. Isso é uma enorme vantagem.

WIDE Quais plugins do Grails foram utilizados no site Noite

Universitária e em quais aplicações? FELIPE Quando iniciamos o desenvolvimento com Grails, o framework estava na versão 0.3. Era muito incipiente ainda. Por conta disso, não havia a grande oferta de plugins que há hoje. Usamos os plugins básicos de Hibernate Plugin e Quartz Plugin, mas tivemos que criar nossas próprias soluções para alguns dos problemas que tivemos. Se fosse hoje, certamente usaríamos plugins como o Mail Plugin, ImageTools Plugin, Email Confirmation Plugin e outros. WIDE Nas fotos, as marcas d’água do Noite Universitária são gera-

das pelo fotógrafo em algum programa de edição de imagem ou há algum sistema criado em Grails que faz a inclusão do logotipo nas fotos? FELIPE A marca d’água nas imagens é criada em tempo de execução pela aplicação Grails. Após o fotógrafo fazer o upload da imagem, o sistema a manipula para diminuir seu tamanho e criar a marca d’água. Fizemos isso usando o projeto ImageMagick. Há um post no meu blog exatamente sobre isso: migre.me/1rX6A.

WIDE É preciso ser especialista em Java, Spring e Groovy para desen-

volver um site em Grails? O quanto se deve saber de cada uma dessas linguagens? FELIPE Como o Grails é um framework na linguagem Groovy, conhecê-la é essencial. Porém, é muito fácil de se aprender quando se conhece Java. Se uma pessoa conhece Java, não terá qualquer dificuldade para programar em Groovy e, consequentemente, em Grails. Não é preciso ser especialista em Spring ou Hibernate, mas conhecer esses frameworks pode ajudar bastante. WIDE O sistema desenvolvido em Grails para o Noite Universitária

inclui quais funcionalidades do site? FELIPE Todo o site do Noite Universitária é desenvolvido em Grails, desde a interface voltada para os visitantes do site até o módulo administrativo de conteúdo, passando por manipulação das imagens de fotos.

WIDE Como foi criada a opção de enviar a foto para um e-mail, que é

proposta quando um usuário clica em uma foto o a vê ampliada? FELIPE Sendo o Grails baseado em Spring, fica fácil usar todas as possibilidades desse incrível framework. Usamos algumas facilidades que o Spring tem para envio de e-mails com anexos. Essa é a grande vantagem do Grails: poder aproveitar tudo do mundo Java facilmente e com agilidade. WIDE Quando o Noite Universitária estava sendo construído, foi 81 > TECNOLOGIA | WIDE |

79


tecnologia

encontrada alguma dificuldade no desenvolvimento por conta de o Grails estar sendo utilizado? Foi preciso recorrer a outras linguagens ou frameworks para completar o projeto? Quais? FELIPE No início, tivemos algumas instabilidades do sistema em produção. Mas isso se deu por causa da imaturidade do Grails na época. Hoje, já na versão 1.3.x, o Grails está muito mais maduro e robusto. Não recorremos a qualquer outra linguagem. Com exceção da manipulação de imagens, na qual usamos o ImageMagick, todo o restante é baseado no Grails e nos frameworks do mundo Java nos quais ele se baseia.

conteúdo possui todas as facilidades para administrar o conteúdo do site. Há um módulo administrativo de conteúdo voltado para essas pessoas. Todo esse módulo foi desenvolvido em Grails.

WIDE O Grails pode ser integrado a outras plataformas/linguagens/

frameworks? FELIPE Atualmente, muitas plataformas ou frameworks oferecem facilidades para integração via web services. O Grails dá grande suporte ao uso de web services, tanto os web services SOAP quanto REST. Além disso, o Grails, por ser Groovy, é totalmente integrado à linguagem Java. Pode instanciar classes Java dentro de um código Groovy. Isso é nativo na linguagem e, consequentemente, nas aplicações desenvolvidas com Grails. WIDE O site Noite Universitária armazena uma grande quantidade de WIDE Qual é o diferencial dos sites desenvolvidos em Grails em rela-

ção aos sites desenvolvidos em Ruby on Rails ou Django? FELIPE Para o usuário final não há diferenças. Independentemente da linguagem ou do framework, o que o usuário final vê e usa é fruto da criatividade dos desenvolvedores e designers com foco em usabilidade. A diferença está nos bastidores. O uso de Grails dá agilidade e produtividade no desenvolvimento, o que torna um sistema mais barato de ser desenvolvido. Grails, Ruby on Rails e Django oferecem conceitos similares para os desenvolvedores em termos de produtividade. A vantagem do Grails, na minha opinião, é o leque de opções e bibliotecas prontas e maduras do mundo Java que podem ser facilmente usadas numa aplicação Grails. WIDE Na seção “A boa!”, por que você optou por um sistema em

Flash, em vez do Grails? O responsável pela inserção de conteúdo no site consegue atualizar essa seção em Flash com facilidade ou é preciso saber Flash? FELIPE A opção por Flash nessa seção foi uma decisão de negócio, pois todos os designers parceiros e fornecedores do Noite Universitária trabalham com essa tecnologia. Então, para aproveitar um conhecimento já existente desses profissionais, foi mantido o uso de Flash para as peças publicitárias. O responsável pela inserção de

O uso de Grails dá agilidade e produtividade no desenvolvimento, o que torna um sistema mais barato de ser desenvolvido 80

| WIDE | 81 > TECNOLOGIA

dados, como informações sobre eventos e, principalmente, as fotos tiradas neles. Qual o banco de dados utilizado para armazenar todo o conteúdo? Qual a razão da escolha por esse banco de dados? FELIPE O banco de dados é o MySQL. Esse sistema de banco de dados é largamente utilizado por uma infinidade de sites na internet. A escolha se deu pelos custos para utilização desse banco de dados, que é gratuito, e a sua qualidade, que é excelente. O MySQL nos dá todas as funcionalidades, estabilidade e velocidade que precisamos para o Noite Universitária. WIDE É fácil adicionar funcionalidades a um layout com o Grails? E

em relação ao painel administrativo para inserção de conteúdo, qual a vantagem deste ser criado com o framework? FELIPE O Grails dá muita facilidade para se adicionar novas funcionalidades a um layout existente, ou até a um novo layout de uma nova seção do site. O Grails utiliza o projeto SiteMesh para gerenciar essa questão de layout. O SiteMesh é um framework de layout de páginas web. Isso já vem embutido no Grails e o desenvolvedor não precisa se preocupar com os detalhes de configuração do SiteMesh. O Grails facilita muito. Sobre o módulo administrativo para inserção de conteúdo, as vantagens citadas anteriormente também são válidas aqui. O módulo administrativo é uma aplicação web que precisa manipular informações, acessar banco de dados, segurança etc. Desenvolver aplicações web com Grails é ágil, produtivo e poderoso. WIDE Na seção “Eventos” há um sistema de busca em que o usuário

pode especificar o local, a festa ou a data e mandar buscar. Como esse sistema foi criado? Por meio de algum plugin? FELIPE Não foi utilizado qualquer plugin especial nesse caso. São queries de banco de dados realizadas mediante as facilidades do Grails, como Dynamic Finders, muito fácil de se utilizar. Porém, estamos analisando a possibilidade de usarmos o Searchable Plugin para outros fins, outras buscas. Esse plugin facilita o uso do


Compass Framework, que é um framework de Java famoso por implementar as funcionalidades de search engine, como se fosse um Google dentro do seu sistema. WIDE Com Grails, é possível criar sistemas de pagamento? Quais

meios de pagamento podem ser implementados com o framework e de que forma? FELIPE É possível criar qualquer sistema web, para qualquer finalidade, utilizando o Grails. No caso de um sistema de pagamentos, que necessita integração com bancos, com operadoras de cartão de crédito e alta segurança, o Grails fornece todo o necessário para implementar um sistema dessa natureza. Porém, geralmente, se o foco do meu sistema não é o pagamento em si, então nesse caso vale mais a pena se integrar a um sistema existente, como PagSeguro, MoIP, Pagamento Digital ou BrasPag. Para essa integração, mais uma vez o Grails fornece tudo que é necessário para se integrar a um sistema dessa natureza. WIDE Você também desenvolveu o sistema Manubia (www.manu-

bia.com.br) em Grails, que é um controle financeiro pessoal gratuito.

De onde surgiu a ideia de desenvolver esse sistema? O que ele oferece? E o que você poderia destacar em relação ao desenvolvimento dele em Grails? FELIPE O Manubia.com.br é uma startup, uma pequena empresa de internet que nasceu com recursos próprios dos sócios, que queriam desenvolver um sistema de finanças pessoais com muita velocidade e o menor investimento possível. Nesses casos, o Grails se encaixa como uma luva, pois com ele é muito rápido desenvolver um sistema web. O Grails dá muita produtividade e. com isso, torna-se mais barato desenvolver com ele. A ideia do Manubia veio pela necessidade dos dois sócios de utilizar um sistema financeiro pessoal. Não havia no mercado nacional um sistema com as características e a facilidade de uso que os sócios queriam. Por isso, resolveram desenvolver um. Ele oferece a uma pessoa a possibilidade de controlar seus gastos com facilidade e, assim, melhorar sua vida financeira. O Grails ajudou muito, por exemplo, na hora de importar arquivos OFX, que são exportados pelos sites dos bancos. Há uma biblioteca Java que sabe ler arquivos OFX. Essa biblioteca foi facilmente utilizada na aplicação Grails.

80 81 > TECNOLOGIA 80 > 08/09 | WIDE |||

81


Magento Mario Sam

REGRAS PROMOCIONAIS CUPOM DE DESCONTO Fim de ano está aí, e com ele, o número de promoções pela internet. Para não ficar em desvantagem, você precisa de uma ferramenta bem preparada, como o Magento E-commerce, que oferece duas funcionalidades nativas para regras promocionais (Promotions).

As regras disponíveis no Magento são: “Promoção de Catálogo” (Catalog Price Rules) e “Promoção de Carrinho” (Shopping Cart Price Rules). Neste artigo nos concentraremos na segunda opção — as regras no carrinho de compras —, em que é possível criar cupons de descontos. Em outra oportunidade, abordaremos as regras aplicadas no catálogo de produtos, nas quais podemos aplicar descontos de forma automatizada para determinadas situações, como frete grátis para determinado valor ou forma de pagamento. Por exemplo: 5% de desconto para pagamentos no boleto bancário. Cupom de desconto é a regra promocional mais conhecida da internet, e você pode criar campanhas para monitorar qual promoção obtém o melhor resultado. Assim, se você cria um cupom promocional que será divulgado no Twitter, outro que será enviado por newsletter, outro que será usado por seus parceiros (como blogs), outro para mídias impressas etc., você consegue mensurar, por meio de relatórios de vendas, quais campanhas deram melhores resultados. Vejamos, agora, como criar um cupom de desconto. Acesse seu backend e vá em Promoções > Promoção de Carrinho e clique no botão “Criar Regra”. Na tela, aparecerá um formulário solicitando informações gerais sobre sua regra e um menu à esquerda com as opções de configuração. Vejamos as opções da guia “Informação da Regra”. O campo “Nome da Regra” serve para identificar no backend a regra e suas

82

| WIDE | 81 > TECNOLOGIA

condições, como, por exemplo, “Cupom de natal para clientes da newsletter”. Logo abaixo vem o campo “Descrição”. Caso deseje colocar mais informação, o que pode ser útil quando você possui uma equipe de operadores e quer evitar duplicidade de regras, você informa, na descrição, os detalhes de como a regra será usada. A seguir, o campo “Status”, que pode ser Ativo ou Inativo. Ativo quando a regra estiver disponível para o público, e Inativo quando a campanha estiver fora de contexto. Imagine que você enviou um cupom por e-mail no Natal e o cliente tente utilizar meses depois, no Dia dos Pais. No próximo campo, “Grupo de Clientes”, você deve selecionar “Todos” se quiser que o cupom seja utilizado por qualquer cliente. Importante!

Lembre-se que, ao criar regras para determinado grupo de clientes, ao acessarem sua loja virtual e usarem o cupom receberão uma mensagem de invalidez. Isso acontece porque, ao entrar no site, eles serão visitantes, e o cupom só será aceito depois de efetuado o login. Abaixo temos o campo “Cupom”, no qual você selecionará a opção “Cupom Específico”. Dessa forma, um novo campo irá surgir na tela: “Código Cupom”. Podemos considerar que seja o mais importante do formulário, pois é o código a ser enviado a seus clientes que, além de sugestivo, deve ser fácil de ser digitado e convidativo. Como exemplo, usaremos


“SUPERDESCONTO2010NATAL”. Os campos “Usos por cupom” e “Usos por cliente” têm a mesma função, informar quantas vezes o cupom poderá ser utilizado. Se sua promoção é para os 100 primeiros, então digite “100” no campo “Usos por cupom”. Ou se cada cliente pode utilizar no máximo cinco cupons, digite “5” no campo “Usos por cliente”. Deixe em branco ou digite “0” para infinito (uso livre). Os campos “Da Data” e “Para Data” são outra forma de limitar o período de utilização dos cupons, como no caso de datas comemorativas ou voucher, em que o cliente precisa utilizar dentro de um período. O campo “Prioridade” é usado quando você possui diversos cupons ativos. Imagine que o cliente tente utilizar dois cupons diferentes, qual deles será aplicado primeiro? Você define aqui. Se você habilitou a opção de RSS Feed no seu Magento, pode usar o campo “Publicar na Lista RSS” para informar sobre o cupom promocional. Na opção de menu à esquerda “Condições”, não entraremos em detalhes, pois nosso cupom de exemplo será válido em qualquer situação. Mas, saiba que você pode criar regras bem específicas, como validar o cupom apenas para determinado CEP, produto, subtotal, quantidade de itens etc. A próxima opção de menu “Ações” é onde a regra realmente ganha vida. Aqui você informará se o desconto será um valor percentual sobre o valor do carrinho, se será um valor fixo ou, ainda, do tipo brinde (compre X e leve Y). Informará, também, o valor do desconto. Em nosso exemplo, deixaremos aplicado um valor percentual de 10. Entre as outras opções disponíveis, destaque para o campo “Aplicar Somente esta Regra”. Para casos em que existem diversos cupons ativos, você pode informar “Sim” se desejar que o cupon invalide todos os demais, ou “Não” caso queira permitir o uso de diversos cupons simultaneamente. No final da tela ainda há a opção para criar condições de uso antes de aplicar o desconto, caso você queira definir regras específicas para o cupom. Por último, temos a opção “Legendas”, que é a frase que será apresentada no frontend da loja quando o cliente utilizar o cupom. Essa frase pode ser personalizada por visão de loja.

Salve sua regra e faça um teste adicionando o código do cupom no carrinho de compras. Minha dica é que você explore todas as opções disponíveis no formulário e, a cada alteração, realize novos testes para conhecer bem o comportamento do sistema e o poder desta funcionalidade. Esse exemplo foi testado na versão 1.4.1.1 do Magento e pode ser aplicado nas versões anteriores. Fico por aqui, desejando a todos um ótimo Natal, boas festas e muito sucesso! Nos vemos em 2011.

Mario Sam Formado em Webdesign e Programação com pós-graduação em Gerenciamento de Projetos no modelo ITIL e PMP pela Unisul, certificado SCPJ pela SUN. Projetista de sistemas web e consultor e-commerce. Presta consultoria em marketing digital e comércio eletrônico para a Midiacom. Mantém o blog www.mariosam.com sobre estratégias digitais e o blog magento.mariosam.com sobre Magento.

81 > TECNOLOGIA | WIDE |

83


Flex Paulo Augusto Teixeira

Construindo componentes e eventos customizados No artigo anterior, redigi sobre a importância de usar componentes e uma básica maneira de implementar essa forma de se trabalhar no desenvolvimento de aplicações Flex. Quando trabalhamos com componentes customizados, sempre temos a necessidade de trocar dados entre o componente e o arquivo que o está chamando, ou trocar esses dados entre um componente e outro componente.

Interagir entre componentes trocando dados é uma coisa muito simples de fazer, mas muitas pessoas ficam com dúvidas quando precisam implementar. E até mesmo quando é explicado, muitos não compreendem de primeira. Por isso, tentarei demonstrar, de forma prática, como usar eventos customizados e dispará-los entre os seus componentes customizados. Para um melhor entendimento, demonstrarei como trocar informações entre um componente e o arquivo que o está chamando, ou seja, escutar um evento que ocorre dentro de um componente pelo lado de fora. Costumamos chamar de “jogar os dados para cima”, já que uma hierarquia de componentes funciona como uma escada. O código do itemRenderer do artigo anterior (setembro/10), demonstra bem a necessidade de troca de informações entre componentes, já que, quando você altera o número do NumericStepper, informa-se à DataGrid esse valor. Porém, no caso do ItemRenderer, temos o objeto “data”, que contém o conteúdo da DataGrid e, com isso, posso manipulá-lo de dentro do componente. E o que fazer se, por exemplo, você tem um componente que contenha um ComboBox com uma listagem de produtos que, ao selecionar um produto no ComboBox, seja enviado para fora do componente o produto selecionado? Então, será necessário implementar uma classe de eventos que transporte valores dentro dela. Confira o código:

84

| WIDE | 81 > TECNOLOGIA

Classe CustomProductEvent.as

01 package br.com.revistawide.materias. 02 { 03 import flash.events.Event; 04 05 public class CustomProductEvent extends Event 06 { 07 public static const PRODUCT_ EVENT:String = "productEvent"; 08 private var product:Product; 09 10 public function CustomProductEvent ( 11 type:String, 12 bubbles:Boolean = false, 13 cancelable:Boolean = false 14 ) 15 { 16 super(type, bubbles, cancelable); 17 } 18 19 override public function clone():Event 20 { 21 return new CustomProductEvent (PRODUCT_EVENT); 22 } 23 } 24 } Feito isso, já temos a classe de evento customizada para transportar produtos para fora de um componente. Agora, vejamos como implementar dentro de um componente a utilização dessa classe:


01 <?xml version="1.0" encoding="utf-8"?> 02 <mx:HBox xmlns:mx="http://www.adobe. com/2006/mxml" width="100%" 03 horizontalAlign="center"> 04 <mx:Metadata> 05 [Event( 06 name=" productClick ", 07 type=" br.com.revistawide.materias.products. CustomProductEvent ")] 08 </mx:Metadata> 09 10 <mx:Script> 11 <![CDATA[ 12 import br.com. revistawide.materias.model; 13 import mx.events. FlexEvent; 14 15 public var arrProdutos:Array; 16 private function productClick (event):void 17 { 18 var customEvent: CustomProductEvent = new CustomProductEvent (CustomProductEvent. PRODUCT_EVENT); 19 customEvent. product = event.target.product; 20 dispatchEvent(customEvent); 21 } 22 ]]> 23 </mx:Script> 24 25 <mx:ComboBox id="cbProdutos" dataProvider=”{arrProdutos}” click="{ productClick (event)}" /> 26 </mx:HBox> Dessa forma, onde colocarmos esse componente na tela teremos a opção de usar o atributo “productClick” e, por meio dele, executar

um método recebendo o valor passado pelo evento, como na linha a seguir: 01 <componentes:MyCustomComponent productCli ck=”interactionMethod(event)”/> O método “interactionMethod” receberá o evento disparado contendo o produto selecionado. Jogamos para fora do componente o Product clicado e podemos manipular essa informação a partir do recebimento dos dados. Devemos dar atenção a essa parte de criação de eventos customizados, pois é muito utilizado no desenvolvimento Flex e, como falei no início, gera muitas dúvidas. Na documentação do Flex tem mais detalhes sobre eventos customizados. Lá você poderá entender melhor sobre eventos e para implementar seus eventos customizados. Não deixe de pesquisar mais sobre Components e Events; esse é um assunto muito interessante e, quem tem interesse de fazer prova de certificação, é abordado bastante sobre eventos em geral durante a prova. São muitas pegadinhas a respeito de eventos, como o evento Close e Closing. Os eventos relacionados a Drag and Drop, Upload e Custom Events, é claro. Estou muito contente de poder colaborar com a revista publicando estes artigos de Flex e ColdFusion. Estou focando meus estudos no Flex 4, para poder escrever artigos legais a respeito das novidades da nova versão. Espero que estejam gostando do conteúdo e que esteja ajudando no aprendizado dos leitores. Mais uma vez, obrigado pelo tempo de todos e bom desenvolvimento.

Paulo Augusto Teixeira Consultor de TI, Adobe Certified Expert Rich Internet Application Specialist, Certified Flex 3 e Certified ColdFusion 8. Trabalha há 11 anos como consultor e desenvolvedor, já atuou para empresas de vários lugares do Brasil e do exterior, onde teve a oportunidade de adquirir conhecimentos das áreas de Seguros, Petróleo e Gás, SMS e Direito Petrolífero. E-mail: paulo@pauloteixeira.blog.br Twitter: @pauloteixeira

81 > TECNOLOGIA | WIDE |

85


Usabilidade Robson Santos

Usabilidade e negócio no site Badoo Nós, brasileiros, de maneira geral, adoramos bater papo, fazer amigos, jogar conversa fora, paquerar e todas essas coisas que envolvem interações sociais. Jogo de futebol, festas populares, rodas de samba, disputas de porrinha e de truco, tudo é motivo para passar horas a fio em contato com outras pessoas.

1

O desejo e o interesse em estar com outras pessoas têm sido facilitado por meio dos diversos websites de redes sociais disponíveis na internet. Desde o lançamento do Orkut, no início dos anos 2000, até a popularização do Facebook, passando pelo hegemônico MSN, agora denominado Windows Live Messenger, temos visto uma grande quantidade de sites de relacionamento surgirem sem o mesmo sucesso, como Hi5, Friendster e outros. Esse não é o caso do Badoo (us1.badoo.com), criado em Londres, em 2006, por um grupo de jovens programadores e empreendedores técnicos. A ideia era criar uma rede social online que transcendesse as barreiras nacionais, mas que, ao mesmo tempo, representasse as culturas únicas de seus usuários. O objetivo era se espalhar por cidades grandes e pequenas para que os usuários pudessem conhecer novas pessoas de sua região. No Brasil já são mais de 8.120.858 de cadastrados na rede, que tem como principal objetivo proporcionar a seus membros a capacidade de conhecer novos rapazes e garotas da mesma área geográfica. O site inclui várias características de grandes redes sociais, mas a prioridade

86

| WIDE | 81 > TECNOLOGIA

é oferecer aos usuários jogos e ferramentas para conquistar atenção e expandir seus círculos sociais. Vejamos alguns aspectos de usabilidade e também de negócios que diferenciam o Badoo das demais redes sociais. 1. Propósito do site

Fica claro, desde o início, que se trata de um website de encontros, em que é possível encontrar pessoas das proximidades. Claro que existem outros sites de encontros, como o ParPerfeito, mas, como se vê na página inicial do Badoo, não se trata somente de romance, mas de conhecer gente nova. Também não há a distinção de gênero, como na imagem do casal presente no site ParPerfeito (figura 3).

2. Busca fácil de operar

A busca por pessoas é feita com base na região do usuário, bem como no gênero e em preferências informados no cadastro (figura 4). Contudo, ainda é possível mudar os parâmetros durante o tempo de permanência no site. O ajuste de parâmetros de busca é feito na mesma tela de exibição de resultados, pela barra expansível na lateral esquerda. Ajustes na abrangência geográfica são feitos na barra deslizante superior, que altera a busca na cidade ou no país (figura 5). Os resultados são apresentados dinamicamente à medida que os parâmetros são alterados. Isso torna o sistema bastante eficiente, dando condições de nova busca, caso os resultados não tenham sido satisfatórios.


3. Ferramentas efetivas de contato

Possibilitar que o usuário deixe recados nas páginas de perfil de outros usuários é lugar comum nos sites de redes sociais de um modo geral. No Badoo, essa funcionalidade não existe, sendo oferecidas outras possibilidades de contato, como: Conexões: somente quatro opções estão presentes no menu principal do site: Pessoas perto, Encontros, Conexões e Mensagens. Redigidos em linguagem direta, sem metáforas, o que facilita o entendimento e deixa poucas dúvidas sobre o destino de cada link. Poucas seções do site possuem menu local, como o que é exibido na tela de “Conexões”. Encontros: esta seção permite verificar se há interesse mútuo entre os usuários.

A ferramenta tem operação simples, bastando selecionar uma das três opções – “Sim”, “Talvez”, “Não” – apresentadas acima das imagens de cada pessoa mostrada na tela (figura 7). A usuário recebe um aviso de que houve interesse, podendo, então, responder selecionando uma das três opções. Os resultados são mostrados na seção “Conexões”. 4. Estímulo à compra

O usuário pode utilizar os serviços gratuitamente, mas há a possibilidade de ampliar alguns recursos, como melhorar o posicionamento nos resultados de busca ou ter a foto exibida no cabeçalho do site (figura 8).

A frase “Me coloque aqui” (sic) é um atrativo para quem deseja ser visto imediatamente, mesmo antes que uma busca seja feita. A frase tem um apelo quase irresistível e, ao ser clicada, é exibida uma caixa de diálogo para que se escolha a forma de pagamento. Sim! Aqui vem a grande diferença em termos de negócio: o usuário paga uma pequena quantia, referente ao envio de uma mensagem de celular. É a mesma estratégia de preços da loja de aplicativos da Apple: serviços de valor, por um custo baixo por unidade. Outra maneira de ter visibilidade no site é por meio da compra de posições elevadas na lista de resultados de busca, estimulada pela frase “Suba ao primeiro lugar” (figura 9). O texto é redigido para ter impacto sobre o usuário, incluindo um ícone de mão com polegar apontando para baixo. Uma vez selecionada a frase, é exibida uma caixa de diálogo para seleção da forma de pagamento (figura 10), geralmente um valor baixo por unidade, o que estimula a compra em massa Assim, podemos resumir em quatro pontos os aprendizados da análise do Badoo:

1. Apresente claramente o propósito do site; 2. Torne a tarefa principal fácil de realizar; 3. Crie ferramentas para tornar o uso mais fácil e atrativo; 4. Ganhe dinheiro, um pouquinho de cada vez, mas muitas vezes.

Robson Santos Graduado em Design pela Esdi/Uerj, é o primeiro doutor em Design da América Latina. Realiza pesquisas em ergonomia, usabilidade e experiência do usuário e atualmente trabalha como pesquisador sênior no Instituto Nokia de Tecnologia, em Manaus. E-mail: interfaceando@gmail.com Twitter: @interfaceando

81 > TECNOLOGIA | WIDE |

87


Segurança Ivo Machado Cross-Site History Manipulation (XSHM) Esse tipo de ataque explora falhas de segurança na política SOP (Same Origin Policy). SOP é o conceito de segurança mais importante dos browsers modernos. Tal política diz que páginas web de diferentes origens, por padrão, não podem comunicar-se entre si.

mas executá-la a partir de um site diferente dentro de um IFRAME a torna vulnerável. Exemplo – Condition Leakage

Condition Leakage ocorre quando um atacante pode injetar valores sensíveis de um determinado conditional statement na aplicação atacada. Por exemplo, se um site utiliza a seguinte lógica: Página A: se (condição) – Redireciona (página B)

O XSHM baseia-se no fato de que os objetos de browser no clientside não são segmentados em uma base por site. Manipulando o histórico do browser, pode-se fazer com que o SOP seja comprometido, permitindo que CSRF’s bidirecionais aconteçam, ocasionando diversos riscos, como: • Violação da privacidade de usuários; • Login status detection; • Mapeamento de recursos, entre outros. Informações inferência

É possível a inferência de informações sigilosas de uma página em uma origem diferente, se implementar em um redirecionamento condicional. Suponha um aplicativo de RH, que não seja publicamente acessível, no qual o usuário pode pesquisar empregados por nome, salário e outros critérios. Se a pesquisa não tem qualquer resultado, um comando de redirecionamento é executado com uma página "Not found". Ao apresentar a seguinte URL: http://Intranet/SearchEmployee.aspx?name=Jon&SalaryFro m=3000&SalaryTo=3500, e observando o redirecionamento Not

found, os atacantes podem inferir informações sensíveis sobre o salário de um trabalhador. Isso pode ser feito usando o vetor de ataque que se segue: 1. Criar um IFRAME com src = “NotFound.aspx”; 2. Lembre-se do valor atual da history.length; 3. Alterar src do IFRAME para “SearchEmployee.aspx? Name = Jon & SalaryFrom = 3000 = 3500 & SalaryTo”; 4. Se o valor da history.length permanece o mesmo, então sua pesquisa não tem resultados. Ao repetir o ataque acima e tentar diferentes valores de salário, um atacante pode reunir informações detalhadas de qualquer funcionário. Esse é um vazamento de informação Cross-site muito sério. Se um aplicativo tem uma função como uma página de pesquisa com redirecionamento condicional, então essa aplicação é vulnerável a XSHM e, essencialmente, é semelhante a uma exposição direta à Universal XSS — a aplicação em si é XSS-safe,

88

| WIDE | 81 > TECNOLOGIA

Um atacante pode executar um Cross-site Request Fogery (já falado em outros artigos) e conseguir uma indicação sobre o valor da condição existente como feedback. Esse ataque é executado a partir de um site atacante. O site, então, envia um Cross-site Request para o site vítima e, manipulando o History Object, obtém um feedback sobre a informação requerida que o site vítima irá expor. Vetor de Ataque:

1. Criar um IFRAME com src=Pagina B; 2. Salve o valor atual do history.lenght; 3. Modifique o src do IFRAME para página A; 4. Se o valor do history.lenght for o mesmo, isso quer dizer que a condição é verdadeira. Protegendo a aplicação

Para conseguir uma proteção eficiente contra XSHM, ambas as URLs do site de origem e a que será redirecionada devem conter um token randômico. Por exemplo, redirecionando para uma página de login, será seguro apenas no seguinte caso: If ( !isAuthenticated) Redirect(„Login.aspx?r=‟ + Random()) Para prevenir um ataque de URL/Parameter enumeration, qualquer URL deve conter um forte token randômico.

Ivo Machado Diretor de Serviços da e-Horus Security & Audit, é formado em Análise de Sistemas com MBA em Gestão de Riscos, e atuou em empresas nacionais e multinacionais, como HP, BM&F, Nextel, BHS e Comgas. Especialista em Segurança da Informação, Gestão de Riscos e Planos de Continuidade de Negócios, já trabalhou no Brasil e no exterior. E-mail: ivo.machado@e-horus.com.br


81 > TECNOLOGIA | WIDE |

89


Tableless Diego Eis

O novo CSS Fiz uma palestra estes dias no TDC2010 (The Developer's Conference 2010) sobre as novidades do CSS3. É impressionante o quanto, de uma hora para outra, o CSS mudou tanto. Talvez você não tenha percebido isso porque toda a euforia se centralizou no HTML5. O fato é que, para o designer e para o dev client-side, as mudanças do HTML5 foram mínimas. Para ser direto, o HTML5 não mudou a vida de quem implementa websites todos os dias. Mudou muito para os programadores JavaScript e server-side, mas não para quem cuida de interface. Infelizmente, até os desenvolvedores client-side perderam o foco. A verdade é que a grande diferença para os devs de client-side está concentrada nas novas features do CSS. O desenvolvedor client-side tem que ficar atento. Sua profissão vai mudar, bem como suas responsabilidades e deveres. Você não vai mais se limitar a escrever apenas HTML, CSS e codificar layouts. Você terá que aprender um bocado de JavaScript, pode ser até jQuery ou outro framework (eu prefiro jQuery), para fazer tarefas que antes eram consideradas exclusivas para programadores. Seu foco mudou. Você é responsável por fazer funcionar tudo o que não é server-side. É de sua responsabilidade a interação do site, a compatibilidade entre browsers, a portabilidade para outros dispositivos, o comportamento de elementos e até mesmo a animação, dependendo do objetivo. Abra os olhos. O CSS não serve mais para pintar quadradinhos. Se antes você achava muito controlar cores de fontes, background, diagramação, tamanho de fonte, largura e altura, hoje você já consegue manipular animação, portabilidade específica para aparelhos, transparência, sombra em elementos e texto, dégradé de cores etc. Alguns estão dizendo que o CSS está virando o Photoshop para a web. De fato, você consegue fazer muita coisa que antes apenas resolvíamos utilizando imagens. Hoje, já conseguimos criar sombras e dégradé diretamente pelo código.

90

| WIDE | 81 > TECNOLOGIA

Outro ponto importante é que o CSS agora faz parte da terceira camada de desenvolvimento. Para relembrar: o desenvolvimento client-side pode ser dividido em três camadas. A primeira delas é a informação, controlada e exibida por meio do HTML. A segunda camada é a formatação, manipulada pelo CSS. A terceira é exclusiva do JavaScript. É a camada de comportamento, responsável por pequenas animações, efeitos etc. Agora, o CSS também faz parte dessa camada. Juntamente com o JavaScript, você conseguirá controlar melhor o comportamento dos elementos, manipulará a forma com que os elementos serão animados etc. Desde o começo, o CSS foi feito para controlar o visual das páginas web. Pensando um pouco mais, o CSS controla a forma com que o conteúdo aparecerá nos diversos meios de acesso. Apelei? Acho que não. O mesmo conteúdo que você lê, assiste ou interage na web pode ser consumido de outra forma em outro meio. O visitante pode imprimir esse conteúdo, pode ouvi-lo ou mesmo acessá-lo de um aparelho menor, ou quem sabe maior que o notebook, como uma TV. Quero que você entenda que o CSS é muito mais abrangente do que você imagina. Ele controla o conteúdo onde quer que esteja. E o responsável por fazer com que esse conteúdo seja bem visualizado nesses diversos meios de acesso é o desenvolvedor client-side.

Diego Eis Sócio da Visie (www.visie.com.br), empresa especializada em desenvolvimento e consultoria para web. Faz consultoria para empresas como Globo.com e Nokia. É palestrante e criador do Tableless (www. tableless.com.br), site que ajuda a promover o desenvolvimento e as boas práticas com Padrões Web no Brasil. E-mail: diego@tableless.com.br Twitter: @diegoeis


81 > TECNOLOGIA | WIDE |

91


Mercado de TI Paulino Michelazzo Freelancers em alta Enquanto somente 18% da mão de obra em TI é regularmente contratada, mais da metade das empresas procuram profissionais freelancers para execução de seus projetos ou de terceiros. Canibalismo do emprego? Não, simplesmente um novo modelo. Não venho aqui crucificar a CLT ou coisa do tipo. Acredito que existe espaço para os funcionários de carteira assinada em qualquer segmento de nossa economia, e o governo está devagar, cumprindo sua parte. Do outro lado, existe uma modalidade de contratação que ainda é malvista em nosso país, mas que está crescendo exponencialmente nos quatro cantos do globo. Falo dos profissionais freelancers que prestam serviços não somente para uma empresa, mas para várias e, muitas vezes, ao mesmo tempo. Antes de continuar, cabe um esclarecimento. Freelancer é diferente de consultor. O freelancer é um profissional que executa uma tarefa predeterminada por um contratante, enquanto um consultor é pago para prestar conselhos sobre as tarefas necessárias para determinado projeto ou atividade. Posto isso, vamos ao que interessa: o novo modelo (que não é tão novo assim). Ao contrário do imaginável, não é vergonha nenhuma ser freelancer. Para eles, as vantagens são bem visíveis: cheques melhores, liberdade para escolha do que deseja realizar, ilimitado local de trabalho (bastando um modem 3G) e flexibilidade de horários e dias, o que permite até aquela escapada à praia para surfar em plena segundafeira. Esse conjunto de benesses faz com que a cada ano milhares de profissionais deixem o mercado de trabalho “formal” para se dedicarem a uma determinada atividade, seja por motivo de dispensa ou somente por opção. Engrossam tais números inclusive aqueles que estão nas faculdades ou saindo delas e que procuram uma primeira colocação laboral, não sendo raro encontrar alguns que jamais tiveram uma carteira assinada na vida, e nem por isso passam fome. Mas este mundo não é somente colorido. Se não existir um bom planejamento, a frustração é certa, e o retorno à estaca zero da busca de uma nova colocação, costumeiro. Como não existem os chamados benefícios da CLT, é necessário cuidar de tudo, desde o fluxo de entradas, a poupança a ser realizada para momentos de estiagem e até mesmo para uma parada repentina por motivos de saúde. Preocupando-se com isso e mensurando prós e contras, a balança na maioria das vezes pende para o lado dos freelancers. E não é só o profissional que ganha. A empresa contratante também se aproveita desse novo movimento da economia mundial, seja na redução do pagamento de encargos, seja na utilização de mão de obra mais qualificada para o desenvolvimento de seus projetos. Sim, porque o freelancer que deseja se estabelecer, e mais ainda aquele que já se estabeleceu, não pode parar de estudar e

92

| WIDE | 81 > TECNOLOGIA

conhecer novas técnicas e tecnologias. A concorrência é forte em todos os segmentos. E errado é aquele que chegou aqui pensando que o freelancer prostitui o mercado; não, ele o auxilia para que mais oportunidades sejam criadas para todos, e isso é facilmente explicado com matemática. A partir do momento em que uma empresa não tem a necessidade de pagar encargos estratosféricos (que no Brasil chegam a 102% em alguns casos), sobra dinheiro para a execução de projetos, principalmente os engavetados e já empoeirados. No momento de executá-los, a empresa procura profissionais freelancers, que certamente será mais barato que a contratação de um profissional CLT. Observa-se, então, que a roda gira e todos ganham; a empresa que tira da gaveta o projeto, o freelancer que tira o mofo dos dedos e o cliente que obtém a solução pretendida. Nem mesmo o governo perde, pois ainda existem impostos sobre os serviços, mas com menor peso. E por que, então, não é regra? Essa pergunta deve estar tanto na cabeça do profissional quanto na do empresário, e algumas respostas são fáceis de serem encontradas. A primeira delas é o desejo ilimitado do empregador em ter seu rebanho por perto. Quanto mais perto, mais o chicote assovia — acredita-se que isso seja produtividade. De outro lado, o profissional que ainda não está acostumado com esse modelo de trabalho, pouco tem responsabilidade e normalmente atrasa ou faz malfeito (por conta do atraso). Nessa equação, ao contrário da primeira, todos perdem; a empresa com custos altos, o profissional com salários baixos (e as costas ardendo) e o cliente que não vê o projeto. Então, o que fazer para mudar? A dica vai principalmente para os profissionais: responsabilidade. Enquanto escrevo este artigo, meu pomodoro (www.pomodorotechnique.com) está contando o tempo. Quantos fazem isso? Poucos das centenas que conheço. Sem responsabilidade, o cliente, que inclusive pode ser seu ex-empregador, não irá lhe confiar nada. Você terá que, em vez de procurar jobs em sites especializados de freelancers, procurar vagas em sites de agências para voltar ao antigo regime da carteira & chicote. Responsabilize-se que o trabalho vem. A demanda está cada vez maior e existe espaço para profissionais do mundo todo, em todo o mundo. E de uma coisa esteja certo, cedo ou tarde seu emprego será cortado para dar lugar a dois ou três freelancers. Esta é a regra capitalista que não conseguimos mexer e, já que é assim, que tal ser você um destes freelancers atendendo seu ex-chefe? Pense a respeito.

Paulino Michelazzo Possui quinze anos de experiência em internet e atua como consultor web em todo o mundo. Palestrante costumeiro de eventos de tecnologia, é coautor de três livros na área de internet e software livre, e escreve regularmente sobre empreendedorismo e desenvolvimento em seu site: www.michelazzo.com.br


81 > TECNOLOGIA | WIDE |

93


Sites de compras coletivas A mais nova febre da internet no Brasil Eles viraram uma febre no país há poucos meses e já são os destinos de muitos internautas que buscam promoções e descontos para aliviar o bolso. Eles são os sites de compras coletivas, um modelo de negócios baseado em ofertas online que teve início em 2008 e consolidou-se nos Estados Unidos. Por Tiago Bosco

94

| WIDE | 81 > MARKETING


marketing

N

o Brasil, apenas no ano de 2010, diversos sites com esse mesmo modelo de negócios foram criados, proporcionando aos brasileiros que acessam a internet uma economia significativa na aquisição de determinados produtos ou serviços. “É um portal de compras coletivas, em que diariamente oferecemos ofertas, com grandes descontos de produtos e serviços de estabelecimentos, lojas e marcas. Temos presença nas principais capitais e cidades no país”, explica Karl Johnsson, sócio fundador do site OfertaX (www.ofertax.com.br), que até o mês de setembro contava com uma média de 20 mil visitas por dia. Julio Vasconcelos, fundador do Peixe Urbano (www.peixeurbano.com. br), também comenta as facilidades que o site proporciona, dando descontos de até 98%. “O Peixe Urbano foi criado para ajudar as pessoas a descobrirem os melhores serviços e atividades de suas cidades, com descontos que vão de 50% a 98%. O site divulga uma promoção de cada vez, que fica no ar por um breve período de tempo (geralmente apenas 24 ou 48 horas) e são sempre dos melhores lugares de cada cidade. Cada oferta começa a valer assim que é atingido um número mínimo de compradores.” Marcelo Macedo, diretor executivo do site ClickOn (www.clickon. com.br) , que atualmente conta com mais de 600 mil usuários cadastrados, explica como atrair novos clientes e alavancar vendas a partir desse modelo de negócios. “É um modelo novo no país, mas que vem dando muito certo pelo perfil de compra do brasileiro. Eles gostam de ofertas e, por isso, buscamos sempre oferecer serviços bacanas. Além disso, os sites de compras coletivas são ótimos canais de vendas para os estabelecimentos, que têm a oportunidade de oferecer seus serviços sem precisar investir grandes quantias em publicidade e ter retorno efetivo sobre a ação, pois a compra começa na internet, porém tira a pessoa da frente do computador e a leva para o consumo no local.” A inspiração dos sites brasileiros

Grande parte desse modelo de negócios instalado no país foi inspirado no site Groupon (www.groupon.com), lançado em novembro de 2008, nos Estados Unidos. No início, o então empreendedor Eric Lefkofsky aplicou 1 milhão de dólares para desenvolver a ideia. No Brasil, desde junho, o Groupon, empresa presente em mais de 26 países, instalou sua operação através do portal Clube Urbano (www.clubeurbano.com.br). O exemplo serviu de inspiração para outros empreendedores e para a maioria dos sites que trabalha com esse tipo de plataforma. “O modelo foi importado dos EUA, onde o Groupon foi o pioneiro. Paulo Veras, Thiago Arruda e eu, os três sócios fundadores, resolvemos trazer tal modelo para o Brasil no final de março deste ano. O site foi lançado em 18 de maio”, conta Pedro Guimarães, diretor geral do site Imperdível (www.imperdivel. com.br), que não quis revelar números, como quantidade de acessos

e usuários cadastrados no portal. Além do Imperdível, o modelo norte-americano de ofertas na internet também serviu de exemplo para outros sites brasileiros. “Nos inspiramos no Groupon, que foi o pioneiro nesse tipo de negócio nos EUA”, afirma Rubens Paiva, diretor geral do Click Cupom (www.clickcupom.com.br) , portal criado recentemente, em agosto deste ano, e que conta com 50 mil usuários cadastrados e recebe uma média inicial de 2500 acessos por dia. Karl Johnsson também relata a influência do site norte-americano no OfertaX. “A ideia do nosso site partiu do Groupon, que foi noticiado na Business Week (www.businessweek.com) em dezembro de 2009 como sendo um case de sucesso. Sócios investidores e estratégicos entraram no projeto em 2010”. No Brasil, o site de ofertas precursor foi o Peixe Urbano, segundo Julio Vasconcellos, que conta como partiu a ideia de criar o projeto e lançá-lo: “Ele (Peixe Urbano) é o primeiro e maior site de compras coletivas no Brasil. Morei na Califórnia, onde fiz um MBA na Stanford e trabalhei com diversos start-ups no Vale do Silício. Buscava um modelo de negócios que alavancasse o poder de mobilização da internet para trazer benefícios reais à sociedade, e foi aí que comecei a estudar os sites de compras coletivas, que já no ano passado movimentavam mais de U$ 500 milhões nos Estados Unidos. A ideia do Peixe Urbano nasceu juntando esse modelo ganhaganha (que coloca em contato os melhores prestadores de serviços de cada cidade e um grande número de consumidores interessados em conhecer novos estabelecimentos perto de suas casas) com as características do consumidor brasileiro. Foi então que me juntei a dois amigos, Emerson Andrade e Alex Tabor. Percebemos que o brasileiro, em geral, adora e usa muito a internet, é bastante social e não recusa uma boa promoção. Como já tinham o costume de usar redes sociais e e-mail para compartilhar novidades com os amigos, apostamos que o modelo daria muito certo no Brasil. Em pouco tempo, o site estava no ar. Em janeiro, já estava aberto para cadastros e a primeira promoção foi divulgada em março. Em menos de cinco meses, o Peixe Urbano conta com mais de 1 milhão de cadastrados e já realizou mais de 400 promoções, que geraram para os consumidores brasileiros uma economia de mais de R$ 20 milhões”, comenta. Os números do Peixe Urbano confirmam que de fato a “moda” dos sites de ofertas pegou no Brasil. Julio Vasconcellos

O modelo foi importado dos EUA, onde o Groupon foi o pioneiro Pedro Guimarães 81 > MARKETING | WIDE |

95


marketing

A consolidação do fenômeno ‘redes sociais’ (Facebook, Twitter, Orkut etc.) foi fundamental para se criar o ecossistema necessário para a popularização dos sites de compras coletivas Karl Johnson

também explica que ações por meio do marketing viral — online e boca a boca — foram e continuam sendo importantes para a propagação da marca. “Divulgamos todas as ofertas do dia por e-mail para a nossa base de cadastrados e em redes sociais e outros sites. Dependemos muito da divulgação que os nossos próprios usuários fazem para seus amigos e procuramos incentivá-los e recompensá-los o máximo possível por isso. Além de oferecer ao nosso assinante um crédito de R$ 10 para cada amigo convidado que faz a primeira compra no site, no mês de setembro o Peixe Urbano deu para o primeiro um milhão de cadastrados cinco vales-presente de cinco reais cada, para que possam dar para seus amigos e familiares que ainda não são cadastrados no site. Ou seja, foram 25 milhões de reais em crédito como presente. Esse é o tipo de ação que gera o maior retorno porque incentiva as pessoas a compartilharem a novidade e a aproveitarem as promoções com seus amigos. É isso que nós queremos.” Assim como ocorre com o Peixe Urbano, o boca a boca também pode ser considerado uma das principais ações de marketing trabalhadas pelos sites de compras coletivas. Marcelo Macedo destaca a importância das redes sociais: “Utilizamos o poder das redes sociais e do boca a boca para divulgação das ofertas. Nosso maior foco, sem dúvida, são os anúncios em redes sociais. Mas, não nos limitamos a elas, recentemente iniciamos um campanha em canais de TV, anúncios em mídia impressa e já estamos trabalhando no desenvolvimento de uma ação para mobile, além de utilizar, ainda, a forma mais comum de anúncio online, o Google”, explica. “Nosso crescimento foi essencialmente orgânico, boca a boca mesmo”, conta Pedro Guimarães. Karl Johnson também vai pela mesma linha e aponta as redes sociais como uma das maiores responsáveis pela propagação do OfertaX. “Trabalhamos com links patrocinados, ações no Twitter, BooBox, Facebook e várias outras mídias online e offline”, relata.

96

| WIDE | 81 > MARKETING

As barreiras enfrentadas na adoção desse modelo de negócios

Com a rapidez do mundo contemporâneo, analisando especialmente a internet, que é caracterizada, sobretudo, pelo seu fluxo de informação e divulgação de novidades, é no mínimo questionador pensar porque só agora, no decorrer do ano de 2010, os sites de ofertas “apareceram” no Brasil — que se encontra na quinta colocação no ranking dos países com mais usuários com acesso à internet (migre.me/1eBuY) , segundo pesquisa divulgada em junho de 2010 pelo site Internet World Stats (www. internetworldstats.com). Os empresários brasileiros têm opiniões diversas sobre o assunto. “Acho que a aceitação do e-commerce no Brasil demorou mais tempo para chegar, e com isso modelos novos também demoraram mais”, analisa Julio Vasconcellos. Já Rubens Paiva culpa as operadoras de cartões de crédito: “Achamos que isso se deveu à grande dificuldade imposta por elas. Somente agora estão se abrindo um pouco mais para esse segmento de mercado. Trabalhamos com internet há dez anos, sempre fomos desenvolvedores de sites e sistemas, já produzimos mais de 1400 páginas, e sempre os cartões foram um grande dificultador nas lojas virtuais. A entrada do Pag Seguro – UOL facilitou a entrada de pequenas empresas no mercado. Mas ainda temos dificuldade, pois o serviço é falho e as taxas, absurdas”, aponta. Para Karl Johnson, a saturação dos modelos de comércio eletrônico foi determinante para a propagação dos sites de compras coletivas. “A falta de inovação desses modelos impulsionou o fenômeno das compras coletivas”. Karl indica também a importância das redes sociais nesse processo: “A consolidação do fenômeno ‘redes sociais’ (Facebook, Twitter, Orkut etc.) foi fundamental para se criar o ecossistema necessário para a popularização dos sites de compras coletivas”, afirma. Agregar ofertas de vários sites de compras coletivas em um mesmo lugar. Esse é o trabalho desenvolvido pelo Saveme (www. saveme.com.br). “O Saveme é um portal que agrega todos os sites de compras coletivas em um único lugar”, conta o diretor Guilherme Wroclawski, que comenta o surgimento do projeto: “O site passou a operar no dia 1º de julho de 2010 (com o nome de Zipme). Ele deriva de uma consagrada lei do marketing: a de levar seu serviço ao foco do cliente — traduzindo para o caso, é se colocar na perspectiva do

Percebemos que o brasileiro, em geral, adora e usa muito a internet, é bastante social e não recusa uma boa promoção Julio Vasconcelos


Não pensamos em lucro para essa ação, e sim em experimentação para o nosso produto Isabel Arthou internauta. Encontramos um crescente número de pessoas à procura de ofertas na web, que sentem certa frustração por não conseguirem olhar para todas as promoções existentes. O Saveme chegou para facilitar a vida de todo mundo”, propaga. As redes sociais, assim como os demais sites de ofertas, também acabaram sendo vitais no que se refere às ações de marketing. “Lançamos o site com um esforço de comunicação pequeno em redes sociais, por onde circula nosso target. No entanto, tivemos a grata surpresa do boca a boca ter se tornado a maior ‘ferramenta’ de divulgação. O usuário que entra no Saveme rapidamente percebe sua facilidade e o benefício que lhe traz em sua busca por ofertas, dessa maneira acaba espontaneamente fazendo propaganda do site. Para nós, não existe melhor divulgação do que essa”, analisa. Ilustração - Carolina Vigna-Marú

81 > MARKETING | WIDE |

97


O real objetivo dos anunciantes

Os sites de compras coletivas, em sua maioria, trabalham hoje basicamente com três segmentos de anunciantes. São eles: bares e restaurantes, bem-estar (clínicas de estética, salões de beleza, massagens) e entretenimento (cinema e teatro). “Entre os setores que mais vendem estão o de beleza e o de gastronomia. Entretanto, cada cidade tem um perfil um pouco diferente, e nós procuramos entender bem o perfil dos nossos assinantes em cada cidade para trazer as promoções mais atrativas. No total, a base de cadastrados no Peixe Urbano está divida entre aproximadamente 50% homens e 50% mulheres, mas cerca de 70% das compras são efetuadas por mulheres — o que explica, em parte, a preferência por serviços de estética e beleza”, explica Julio Vasconcelos. No site Click Cupom, Rubens Paiva afirma que os serviços de beleza são os mais anunciados, mas faz um alerta interessante: “Notamos que já existe uma saturação nesse segmento.” O bar e restaurante PJ Clarke’s, localizado em São Paulo, em uma determinada oferta publicada no site Imperdível ofereceu 51% de desconto na compra de um cheeseburguer. Maria Rita Pikielny, sócia gerente do estabelecimento, comenta que esse tipo de ação tem como finalidade atingir novos clientes que ainda não conhecem o bar. Anunciar nos sites de compras coletivas, no entanto, não significa lucrar em um primeiro momento. “Não temos lucro, temos até prejuízo nesse determinado produto, porém contamos com o marketing e novas vendas, uma vez que o cliente esteja no local”, explica. Isabel Arthou, gerente de marketing da rede de pizzaria Domino’s — que anunciou 59% de desconto na compra de uma pizza média por meio do site Peixe Urbano —, revela que anunciar nesse modelo de negócio gera um alto volume de experimentação em curto espaço de tempo e também cita a mesma linha de raciocínio da Pikielny quando o assunto é lucro: “Não pensamos em lucro para essa ação, e sim em degustação/experimentação para o nosso produto”, aponta. Tudo ainda é muito recente no Brasil quando o tema é modelo de negócios de compras coletivas. Muitos sites desse segmento estão sendo criados a cada momento. Se eles conseguirão se consolidar no mercado (mesmo com muita concorrência) e se vieram definitivamente para ficar, não se sabe, só o tempo dirá.

98

| WIDE | 81 > MARKETING

Por meio do Saveme, selecionamos alguns sites de compras coletivas espalhados pelo Brasil. Confira: www.imperdivel.com.br www.peixeurbano.com.br www.clickcupom.com.br www.ofertax.com.br www.clickon.com.br www.coletivar.com.br www.bomproveito.com.br www.ofertaunica.com.br www.metadeoumenos.com.br www.startnow.com.br www.clubedodesconto.com.br www.presentefacil.com.br www.juntoucomprou.com www.ofertadia.com.br www.citybest.com.br www.grupoligado.com.br www.qpechincha.com.br www.comprasclub.com.br


81 > MARKETING | WIDE |

99


marketing

Case LojaMelissa.com A importância do e-mail marketing Em decorrência da popularização do e-commerce no Brasil, a Melissa passou a investir em e-mail marketing visando obter retorno para a sua loja virtual. Só para se ter uma ideia sobre as visualizações e cliques na campanha, a Melissa obteve resultados expressivos, com 21% e 17% respectivamente maior em relação às médias do mercado — 8% e 3%, segundo pesquisas realizadas pela PMD Marketing Group (Fonte: O Globo – 19/09/10).

Uma campanha bem-sucedida na internet se dá, entre outras coisas, graças ao e-mail marketing, ferramenta importante no relacionamento com o cliente. A loja virtual da Melissa (www.lojamelissa.com) comprova o retorno. Cristiano Rosa, diretor comercial da Grafia, agência de internet que presta serviço para o grupo Grandene, conta qual foi o segredo e o diferencial para a campanha ter atingido esses números. “Entendemos que os resultados do e-mail marketing são frutos também da qualificação do mailing que vem sendo trabalhado ao longo dos anos. Não temos a política de compra de mailing, não enviamos e-mail marketing a toda hora, fornecemos conteúdo que não seja apenas comercial (somente para loja temos profissionais que escrevem para o site e para blog — contamos com uma

100

| WIDE | 81 > MARKETING

profissional ligada à moda e que mora em Londres) e separamos, também, o mailing do site com o da loja. Quem se cadastra no site, recebe comunicações somente dele, e da loja, idem. Além disso, ainda temos toda a força da marca com seu desejo”, que também explica como se deu o planejamento para a campanha. “A loja começou como um projeto totalmente inovador e foi-se experimentando muita coisa. Dessa forma, no início, apenas utilizávamos o e-mail marketing para divulgar o que tinha de novo na loja, mas de forma muito tímida. Com a explosão do e-commerce e com o crescimento constante da Lojamelissa. com, passou-se a investir mais. O e-mail marketing tornou-se, então, uma das ações fundamentais para as vendas da loja e o utilizamos para quase tudo: comunicar reposições, lançamentos e promoções. Mas, claro, sempre cuidando para não encher a caixa do consumidor. Quando temos, por exemplo, uma promoção e um lançamento na mesma semana, avaliamos se podemos comunicar tudo em um único e-mail marketing ou se devemos enviar um no início da semana e outro no final da semana. Portanto, temos um planejamento de e-mail marketing atrelado ao de outras ações maiores (lançamentos, promoções etc.). E como qualquer planejamento, em alguns momentos, precisamos reajustar o conteúdo, as datas de envios e os destinatários (quem deve receber)”, explica, mostrando a necessidade de se ter uma equipe especializada e dedicada no gerenciamento de uma campanha desse porte. “Hoje, fala-se muito em SM (Social Media) para comunicar uma marca, mas


Temos que ficar atentos para nรฃo errar o preรงo, a ortografia, uma imagem, o link de destino etc Cristiano Rosa

80 81 > MARKETING | WIDE |

101


marketing

Sempre apostamos no e-mail marketing. Sabíamos que o impacto seria grande Cristiano Rosa

o e-mail marketing ainda é muito forte. Recentemente, saiu uma matéria na mídia falando que nos Estados Unidos quase 50% das pessoas preferem receber informações de marcas via e-mail marketing, enquanto apenas 3% preferem as redes sociais. Assim, sendo ele uma ferramenta tão relevante, temos que cuidar bem sobre o que, como e para quem comunicar. Temos que ficar atentos para não errar o preço, a ortografia, uma imagem, o link de destino etc. Além da equipe especializada em web da Grafia, temos auxílio de uma empresa parceira (Dinamize).” Em relação aos modelos de mensagem, newsletter, mala direta eletrônica e pesquisa são utilizados na campanha. Cristiano Rosa releva que todas as ferramentas têm o seu grau de importância. “Dificilmente nos restringimos a uma única ferramenta. Utilizamos todas as possibilidades que achamos adequadas com o perfil da marca para alavancar as vendas”, destaca, apontando a quantidade de endereços eletrônicos trabalhados na campanha. “Temos um mailing da Melissa de 600 mil, mas, dependendo da ação, usamos uma base menor/segmentada.” Muitas pessoas devem se perguntar os cuidados que foram tomados para a campanha de e-mail marketing da Lojamelissa. com não ser confundida com spam. Cristiano Rosa comenta o que foi realizado e cita um exemplo ocorrido recentemente. “Montamos (fizemos HTML) da forma correta e ficamos sempre antenados com o que está acontecendo. Em agosto de 2010, identificamos que o assunto Dia dos Pais estava caindo como spam, pois todo mundo estava usando. Com isso, mudamos na hora. Além disso, antes de enviar qualquer e-mail, realizamos testes, mandamos para contas do Gmail, do Hotmail etc.”, explica, afirmando que a empresa já esperava o retorno que hoje se faz presente. “Sempre apostamos no e-mail marketing. Sabíamos que o impacto seria grande”, finaliza.

102

| WIDE | 81 > MARKETING


80 81 > MARKETING | WIDE |

103


Marketing de guerrilha e as mídias sociais A Wide conversou com Darren Barefoot, coautor do livro Manual de marketing em mídias sociais e um dos fundadores da agência Capulet Communications (www.capulet. com), situada em Vancouver, no Canadá. Neste rápido bate-papo, Darren fala sobre o marketing de guerrilha na web e como ele pode ser aplicado nas mídias sociais. Por Tiago Bosco

104

| WIDE | 81 > MARKETING


marketing

entrevista

Darren Barefoot Além de coautor do livro Manual de marketing em mídias sociais, Darren Barefoot, graduado em Escrita Criativa e Teatro, é um dos fundadores da Capulet Communications (www.capulet.com) - agência canadense de marketing especializada na interação das empresas com a web.

WIDE Como você define marketing de guerrilha? DARREN Na minha opinião, marketing de guerrilha se refere aos

canais não tradicionais de marketing. Ou seja, ao invés de usar os meios principais e convencionais de publicidade, você faz campanhas online criativas ou uma campanha de propaganda leve. WIDE Como se dá o planejamento de uma determinada campanha

realizada por meio do marketing de guerrilha nas mídias sociais? Por onde começar? DARREN Você começa com a sua audiência, ou seja, como o seu público-alvo. Quem você quer alcançar? A partir daí, combina isso com os objetivos de trabalho para a campanha. O que você quer que as pessoas façam: comprem seus produtos, solicitem uma assinatura, assinem um boletim informativo, ingressem num movimento e aí por diante.

ironia. A rápida resposta na criação de web vídeos deles também era um fator chave. WIDE Por outro lado, existe alguma maneira de mensurar o fracasso

de uma campanha voltada para as mídias sociais? DARREN É muito difícil. Nós não ouvimos com frequência sobre aquelas que falham. Elas dão um jeito de desaparecer sem alarde, sem chamar muita atenção.

WIDE Quais diferenças podemos encontrar entre as grandes e as

pequenas empresas, no que se refere à aplicabilidade do marketing de guerrilha na internet? DARREN As grandes empresas são avessas ao risco. Elas são grandes aviões transportadores, e é difícil para elas mudar o curso. Pequenas companhias têm muito menos a perder e muito menos inércia atrás de qualquer estratégia de marketing, então é natural que novas formas de marketing surjam de pequenos negócios. WIDE Você poderia apontar um exemplo de uma campanha bem-

sucedida de marketing de guerrilha dentro das mídias sociais? Quais fatores determinaram seu sucesso? DARREN O mais recente bom exemplo disso é a campanha do Old Spice (www.youtube.com/watch?v=owGykVbfgUE). O anúncio original era ótimo, mas a campanha online subsequente, em que fizeram rápidos vídeos personalizados para os influenciadores online, foi brilhante. A campanha original do anúncio era extremamente profissional, e o ator principal, Isaiah Mustafa, acertou no tom de

WIDE No livro Manual de marketing em mídias sociais você diz: “pro-

duzir um vídeo de sucesso no YouTube não é tão diferente de criar um ótimo programa ou comercial de TV”. Qual foi a importância dos sites de compartilhamento de vídeos para o desenvolvimento do marketing de guerrilha digital? O marketing de guerrilha envolve vídeos diretamente? DARREN O YouTube criou um gratuito e imensamente popular canal de distribuição e compartilhamento de vídeos. Na verdade, antes do YouTube, era muito difícil divulgar um vídeo online. Nos primórdios da web, você, na verdade, pagava uma empresa de streaming de vídeo baseado na velocidade de conexão que o vídeo 81 > MARKETING | WIDE |

105


usava. Então, havia uma certa dificuldade para chamar a atenção na divulgação de um determinado trabalho. Sem dúvida, o YouTube e seus concorrentes mudaram tudo isso, proporcionando aos usuários uma facilidade para se divulgar qualquer tipo de vídeo e ideia. WIDE Como você analisa a ética nas ações do marketing de guerrilha

nas mídias sociais? Qual o limite para a ousadia? DARREN Não tem muita diferença. Eu diria que a ética é a mesma que no marketing tradicional. Você pode ser ousado, mas precisa, sobretudo, respeitar e proteger o seu público-alvo. WIDE Facebook, MySpace, Twitter etc. Dentre todas as redes sociais

presentes na internet, qual delas o marketing de guerrilha mais atua e obtém resultados mais expressivos? DARREN Nós tendemos a enfatizar o Facebook, porque ele tem uma crescente e diversa base de usuários (500 milhões e está aumentando). Tem mais gente jogando Farmville (www.facebook.com/FarmVille), um jogo no Facebook, que gente no Twitter, por exemplo. WIDE O que os marqueteiros devem fazer para não serem confundi-

dos com spammers? DARREN Para começar, apenas contate as pessoas que optaram. Isso é, aquelas que deram permissão para você comercializar com elas. Você deve focar nos crescentes grupos e tribos que estão interessados nos seus produtos e serviços e, dessa maneira, dispostos e ansiosos para lhe ouvir.

As grandes empresas são avessas ao risco... É natural que novas formas de marketing surjam de pequenos negócios

1

106

| WIDE | 81 > MARKETING


marketing

2

WIDE “Ferramentas de marketing convencionais não devem ser

completamente ofuscadas pelos novos e brilhantes brinquedinhos de mídia social. As ferramentas de marketing tradicionais trabalhando em conjunto com as novas garantem um impacto muito maior do que quando usadas isoladamente.” Você poderia citar algum exemplo dessa sua citação? DARREN Aqui está um exemplo de uma campanha que acabou de ser lançada e que utiliza uma nova tecnologia para conectar-se a mundos online e offline (migre.me/1mfei). Ela usa um cartaz muito tradicional de conectar as pessoas aos pedidos online e a ferramentas que podem espalhar a palavra sobre uma campanha de conservação da floresta (Ver imagens 1 e 2).

80 81 > MARKETING | WIDE |

107


Marketing de conteúdo Bruno Rodrigues 2011, o Ano da Convivência de Mídias Dia desses vi Fúria de titãs com meu filho. Não a primeira versão, um clássico da Sessão da Tarde de décadas atrás, mas o remake. Para minha surpresa, o filme é mil vezes melhor que o original; é o “Fúria de titãs” que eu gostaria de ter visto quando tinha 13 anos. Dessa vez, contaram a história que, antes, apenas tiveram a intenção de contar. Seria simples eu dizer: “ah, nos anos 80 é que faziam bem filmes de aventura!”. Ou, o contrário, dizer que, com os efeitos visuais de hoje, é que se consegue produzir filmes de forma decente. Porém, nenhum dos argumentos cabe nesta situação. A refilmagem é boa porque a história é ótima — e para por aí. À beira de 2011, não há mais espaço para admiradores de épocas ou gerações ficarem se digladiando. É óbvio que cada uma delas tem qualidades e, neste caso específico, um alcance tecnológico. Contudo, uma história bem contada sempre será uma boa história, independentemente da tecnologia ou da mídia. Por isso, há algumas semanas, ao conversar com um gerente de comunicação sobre a possibilidade de oferecer ao público interno uma versão folheável do house-organ da empresa, fiz questão de começar a explicação deixando claro que o maior receio nesse caso não procedia: o de tornar a edição impressa obsoleta. Acredito que a convivência de mídias seja o novo norte da comunicação. Após anos de queda de braço entre velhas e novas mídias, o bom senso venceu. No caso de uma revista interna, até que se diminua a tiragem por conta de uma versão folheável com mídia rica incluída — pois não é todo mundo que gosta desse tipo de mídia —, ambas são necessárias, e dentro desse raciocínio vale até criar uma opção em pdf puro. Há quem goste. Da mesma forma, precisei acalmar os ânimos de uma equipe de webtv quando o diretor de outra empresa solicitou que fosse oferecida, para cada vídeo, sua transcrição. Foi complicado lembrar aos profissionais que o mais importante não era o formato a que eles se dedicavam com tanto esmero, e sim a mensagem que eles queriam transmitir. O objetivo não era que as informações chegassem ao público interno? Então, que fossem oferecidas transcrições, sim! Não importa a mídia. O ‘x’ da questão é o conteúdo, o que se deseja transmitir. Seja por meio de sinal de fumaça ou transmissão de

108

| WIDE | 81 > MARKETING

pensamento, o que devemos compreender daqui em diante é que há lugar para tudo. Afinal, o que vale é a história que está sendo contada. Por isso, é sempre bom lembrar: Tecnologia é “apenas” uma ferramenta de comunicação.

Há diversas versões, e talvez nenhuma atenda. Não é tão incomum assim — e por isso novas tecnologias de comunicação são criadas a cada dia. Que fique claro que é a tecnologia que está à nossa disposição, e não o inverso. Tecnologia é ponte para o público. Dessa forma, entenda que

você pode estar enviando seu conteúdo em um ônibus espacial enquanto, na verdade, ele é seu vizinho de andar. “Be simple”, sempre. Tecnologia não é obrigação. Antes que isso se esvaia nas

brumas do tempo, é sempre bom lembrar que papel é tecnologia, ok? Ah: e nenhuma delas é obrigatória. Achar que criará uma imagem negativa para seu cliente se você não oferecer qualquer tecnologia digital é um engano e tanto. Ter isso em mente demonstra amadurecimento. Em suma, não caia no lugar comum de raciocínios rumo à extinção, mas que ainda povoam nosso dia a dia, como “a melhor mídia social é o sofá da minha casa, conversando com meus amigos” ou que “você está fora do mercado se não está no Twitter ou no Facebook”. Fazemos parte do coletivo, mas somos, antes de tudo, indivíduos, cada um com o seu conteúdo — e é isso que importa.

Bruno Rodrigues Consultor de Informação e Comunicação Digital, autor do primeiro livro brasileiro e terceiro no mundo sobre conteúdo online, Webwriting - Pensando o texto para a mídia digital (2000), e de sua continuação, Webwriting - Redação & informação para a web (2006). Já ministrou treinamentos em Webwriting e Arquitetura da Informação para mais de 30 empresas do Brasil e do exterior. Seu trabalho é citado no verbete “webwriting” do “Dicionário de Comunicação”, uma das principais referências em Comunicação Social no país. Site: www.bruno-rodrigues.blog.br E-mail: bruno-rodrigues@uol.com.br Twitter: @brunorodrigues


80 81 > MARKETING | WIDE |

109


Web fora da caixa

René de Paula Jr.

Geração 18 X Eu palestro bastante, adoro. Esteja eu na empresa X ou Y (ou em nenhuma, como agora), sempre que posso dou palestras e toda vez é a mesma coisa: — O senhor trouxe seu PPT? — Não, eu não tenho PPT. — Não??? — Não, vou falar no gogó. E assim tenho feito por toda parte: no ResultsON, na ESPM e, outro dia desses, na Feira do Empreendedor 2010 do SEBRAE, em Belo Horizonte. Subo no palco, pego o microfone e faço o que eu acho que a ocasião merece: converso. Conto histórias. Compartilho com aquelas pessoas ali o que me preocupa naquele momento. Eu acho isso mais honesto e importante do que trazer algo requentado debaixo do braço. Ou vocês preferem palestrantes que vão ao SlideShare, misturam 300 slides de ppts alheios e batem tudo no liquidificador? Sorry, chega de colorantes, conservantes e flavorizantes. Meu papo é orgânico.

110

| WIDE | 81 > MARKETING

Claro que não saio por aí falando o que me dá na telha. O mais legal sempre é tentar perceber o que aquela plateia tem de único, qual seu universo, qual seu contexto. Não faria sentido eu falar de iPad se ninguém na plateia contrabandeou o seu e nem vai ter grana tão cedo pra comprar um. Nem faria sentido eu ficar exibindo expressões em inglês para moçadas que mal escrevem português direito. A graça é justamente descobrir o que faz sentido naquele lugar e naquele momento. Eu adoro. Foi numa ocasião dessas em que

comecei a palestra saindo de qualquer script: — Vocês têm metade da minha idade, mas somos da mesma geração. A geração BR. Por que eu vim com o papo de geração BR? Porque eu não aguentava mais o papinho de geração X, Y ou Z, ou baby boomers ou o que for. Meu pai não desembarcou na Normandia no Dia D, eu não fui para a Guerra do Vietnã e aquela rapaziada toda não tem iPhone no bolso. Nascemos todos muito longe dos EUA, nascemos no Brasil. Eu nasci em 1964, pouco depois do golpe

militar. Eu cresci na ditadura, eu perdi aula no primário por falsas ameaças de bomba. Meu pai nasceu pouco antes da Revolução de 32, quando muitos paulistas morreram. Nossas histórias são outras, os dramas são nossos. A história alheia não nos pertence, mas nosso futuro, sim, só pertence a nós.


A história alheia não nos pertence, mas nosso futuro sim, só pertence a nós

Já temos quinze anos de internet no Brasil e os dilemas, dramas e problemas continuam os mesmos, mesmo que passemos o dia inteiro online (chavecando, claro). Opa, fui injusto? Convenhamos: se monitorarem toda a nossa efervescência na social media o resultado não vai ser muito diferente disso :) Uma das muitas coisas boas da minha carreira até agora (sobretudo minha última função) foi ter conversado com as maiores agências, empresas, veículos e profissionais do país. Circulei muito. Tive a honra também de participar de projetos enormes, daqueles envolvendo milhões, dezenas, centenas de milhões de usuários. É da minha história que eu tiro tanto para contar. E uma história que conto bastante atualmente é a seguinte: agências interativas envelheceram, engessaram-se, ficaram presas em papéis velhos. Os grandes clientes, por outro lado, descobriram que não podem esperar

mais pelas agências e estão se virando sozinhos, criando núcleos internos de inovação aliados aos negócios. Contar uma história dessas em um

evento de interactive é ser um estragafestas, porque todo evento só tem contos de fadas. Minha história pode não ter final feliz ainda, mas pelo menos tem uma moral da história: enquanto os interativos sonham com a Terra do Nunca (o Silicon Valley), os clientes inovadores estão de olho nas oportunidades fabulosas que só o Brasil tem: parcelas enormes da população comprando seus computadores pela primeira vez, dando os primeiros passos no consumo e no mundo digital, classes C e D querendo educação, melhor padrão de vida, querendo expressão. Interativos deslumbrados sonham com iPad para poucos, clientes pensam em negócios para todos e, na hora de inovar, nem olham mais para as agências que, segundo

eles, só trazem mais do mesmo. Estou aqui sentado escrevendo este artigo não num G-isso ou aquilo nem num ai-qualquer coisa. Estou digitando num laptop bem legal que comprei no supermercado do bairro em 18 x R$ 50,00. Vou repetir: 18 x 50 reais. Desencane dessa história de Geração Y. O negócio está na geração 18 x :)

René de Paula Jr. É profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, AgênciaClick, Banco Real ABN AMRO, Microsoft Brasil. É criador da “usina.com”, portal focado no mundo online, e do “radinho de pilha” (www. radinhodepilha.com), comunidade de profissionais da área. rene@usina.com

80 81 > MARKETING | WIDE |

111


Olá, é um prazer atendê-lo! A satisfação dos consumidores é o ponto de partida para a fidelização do cliente e o sucesso da empresa Por Flávia Freire

112

| WIDE | 81 > E-COMMERCE


e-commerce

N

ão importa o problema nem o humor com que o cliente esteja, atender plenamente, com paciência e vontade de oferecer a solução para o que ele deseja, são fatores primordiais para a satisfação tanto dos consumidores quanto da própria empresa para manter-se competitiva no mercado, já que um atendimento ruim pode levar o cliente direto à concorrência. Conforme os dados publicados no WebShoppers 2010 (www. webshoppers.com.br), relatório anual desenvolvido pela e-bit com o apoio do Movimento Internet Segura (MIS) e do comitê da Câmara Brasileira de Comércio Eletrônico (Camara-e.net), o índice de satisfação com as lojas virtuais brasileiras permaneceu na faixa dos 85% e 86% no primeiro semestre deste ano, o que mostra a confiança do e-consumidor em fazer compras via web.

Evolução do índice de satisfação do e-consumidor

atendente deve ter liberdade para buscar soluções para o cliente, a fim de mantê-lo fiel à empresa. “Se a empresa não quer perder nenhum cliente, deve atender à expectativa dele de qualquer maneira. Se a empresa é transparente, deve falar claramente que não tem o produto ou que ele foi o primeiro cliente a pedir por tal produto, por exemplo. Então, se tudo o que a empresa quer é ser reconhecida como diferenciada, deve deixar o cliente satisfeito de todas as formas, como em um restaurante, onde, se você pedir um vinho e lá não tiver, o garçom poderá atravessar a rua para buscar o vinho”, ressalta Roberto Meir, presidente da ABRAREC (Associação Brasileira das Relações Empresa-Cliente) e da AIAREC (Associação Ibero-Americana das Relações Empresa-Cliente). Com a internet, qualquer pessoa tem a imensa facilidade de “colocar a boca no trombone” para demonstrar insatisfação. As empresas devem, então, ficar atentas para não correrem o risco de seus clientes recorrerem às redes sociais. “Se considerarmos que pelo menos 12% dos clientes insatisfeitos com o atendimento de algumas empresas vão direto para a web retransmitir a sensação negativa junto a mais ‘68’ amigos, e considerando a importância das redes sociais como meio de replicar a insatisfação dos consumidores, podemos perceber a necessidade de dotar nossos colaboradores, que mantêm contato direto com nossos clientes, de competências (conhecimento, habilidades e comportamentos adequados e aplicados à operação), afim de que tenham uma atitude mais proativa na busca de soluções para o cliente”, alerta Márcio.

*patamar de excelência

Sim, o resultado é muito bom. Mas, o trabalho para se manter entre as empresas que oferecem bom atendimento aos clientes não pode ser deixado de lado. “Algumas características de um bom atendimento, e que são alvo da avaliação do cliente, são: educação, cortesia e simpatia, que englobam tratamento personalizado, confiança, lealdade, respeito, empatia, interesse no atendimento e disposição para resolver o problema do consumidor. Para tanto, o atendente deve ouvir atentamente, saber formular perguntas, utilizar técnicas de persuasão e, por fim, entender e resolver o problema do cliente, demonstrando que realmente se interessa por seus problemas e suas necessidades, conseguindo sua satisfação plena”, declara Márcio Silva, autor do livro Clientes por todos os lados e consultor chefe da Corporativa Brasil. De acordo com o Dicionário Michaelis, satisfação não significa apenas o ato ou efeito de satisfazer ou a sensação agradável que sentimos quando as coisas correm à nossa vontade ou se cumprem ao nosso contento. Satisfação também significa reparação de uma ofensa, explicação, justificação, desculpa. É por isso que o

O marketing garante a primeira venda. O pósvenda garante que o cliente volte sempre. Então, o setor que deve receber o maior fluxo é o pós-venda Roberto Meir 81 > E-COMMERCE | WIDE |

113


e-commerce

Aaron Magness diretor de Brand Marketing e desenvolvimento de negócios da Zappos

Fundada em 1999, a Zappos (www.zapos.com) foi a pioneira em venda especializada de calçados pela internet. Hoje, com outros tipos de produtos disponíveis na loja, é famosa por seu estilo de relacionamento com o cliente, por possuir um formato de relacionamento ideal, tanto dos colaboradores com os clientes como da empresa com os colaboradores.

WIDE Qual é o diferencial do departamento de atendimento ao

Confira a entrevista exclusiva a seguir com o norte-americano Aaron Magness, diretor de Brand Marketing e desenvolvimento de negócios da Zappos, para conhecer um pouco de como o atendimento funciona entre as baias de uma das empresas mais “alto-astral” do mundo, localizada na calma cidade de Shepherdsville, no Estado americano de Kentucky.

WIDE Por que a Zappos indica um site concorrente para uma

WIDE Na Zappos, o que significa um bom atendimento?

ção que leva à sua fidelização. Focando na fidelidade do cliente, não temos que nos preocupar sobre como maximizar a venda a cada dia. O foco de curto prazo nas vendas pode ser muito enganoso.

descontos. Não acha que dessa forma a loja pode perder clientes para outras empresas que chamam a atenção por suas diversas promoções-relâmpago? AARON Não competimos no preço. Queremos que os clientes comprem conosco por causa da experiência e do alto nível do serviço.

WIDE Prestar um bom atendimento sempre foi o principal obje-

WIDE A equipe precisa estar sempre pronta para atender os

tivo da Zappos? AARON No início, nosso objetivo era oferecer a maior variedade de calçados disponível online. Quando começamos a crescer, perguntamos a nós mesmos o que realmente queríamos ser, e percebemos que queríamos ser algo bem maior do que éramos. Decidimos que queríamos oferecer serviço, e isso tem sido nosso principal guia desde então. Essa opção abrandou o nosso crescimento naquele momento, mas nos permitiu chegar ao patamar em que estamos hoje.

clientes da melhor maneira possível. Como a Zappos faz para manter os funcionários da Equipe de Fidelização de Clientes de bom humor, trabalhando com excelência? AARON Temos um grande foco em deixar os colaboradores felizes. Funcionários felizes leva a clientes satisfeitos. Alguns dos benefícios que incluímos são plano de saúde excelente, alimentação gratuita 24 horas por dia, uma sala de descanso e a todo tempo deixamos que os colaboradores se sintam confortáveis sendo eles mesmos.

AARON Tentamos causar um “UAU” nos clientes com toda intera-

cliente da Zappos, chamado de Equipe de Fidelização de Clientes? AARON Nossa Equipe de Fidelização de Clientes é o coração e a alma do que somos. A equipe é medida por sua capacidade de impressionar os clientes. Não existe horário para as chamadas nem scripts para os colaboradores. Isso permite à equipe focar em criar uma conexão pessoal com os clientes.

venda, no caso de faltar um produto na loja? AARON Desde que a equipe esteja tentando construir uma relação pessoal com o cliente, para ajudá-lo a encontrar qualquer coisa que ele esteja procurando, nossa Equipe de Fidelização de Clientes pode, inclusive, encaminhá-lo a um site concorrente. WIDE A Zappos não oferece qualquer tipo de promoção ou

Ambiente de trabalho da Equipe de Fidelização de Clientes (call center) da Zappos

114

| WIDE | 81 > E-COMMERCE


81 > E-COMMERCE | WIDE |

115


Um bom exemplo no Brasil

Em 2010, pelo terceiro ano consecutivo, a Drogaria Onofre (www.onofre.com.br) foi uma das vencedoras do Prêmio Consumidor Moderno de Excelência em Serviços ao Cliente na categoria Farmácias (migre.me/1r2LJ). Segundo Lismeri Avila, diretora do Onofre em Casa, a conquista do prêmio se deu pela excelência do serviço na venda e, principalmente, no pós-venda. “O cliente, quando opta por uma loja virtual, visa facilitar o seu dia economizando tempo e dinheiro, e a loja deve entregar esse pacote: atendimento, preço e tempo. Logo, o desafio começa no primeiro atendimento, em que o atendente tem fácil acesso a todas as informações dos produtos, como imagens, bulas e indicação. Se necessário, o farmacêutico completa o atendimento orientando o cliente quanto à posologia e à interação medicamentosa. O pósvenda se inicia na logística, em que cumprir o prazo de entrega é fundamental para que o cliente fique satisfeito”, declara. Em relação ao pós-venda, Roberto Meir diz que as empresas deveriam investir mais no setor. “O marketing garante a primeira venda. O pós-venda garante que o cliente volte sempre. Então, o setor que deve receber o maior fluxo é o pós-venda. As empresas que ultrapassam expectativas são as que têm o olho do dono. O dono fica em cima e supera qualquer necessidade, pois ele sabe o valor que os clientes têm”, diz. A Drogaria Onofre também procura manter um bom relacionamento com seus clientes por meio das redes sociais. “Divulgamos diariamente novidades aos nossos clientes e temos como principal ferramenta o Twitter. No microblog, mostramos lançamentos em cosméticos e medicamentos genéricos, damos dicas de beleza, lojas especiais e promoções, entre outros”, diz Lismeri. Como preparar os colaboradores?

O bom atendimento é incentivado primeiramente pela empresa aos seus colaboradores. “O mundo dos negócios mudou para o mundo dos serviços. Atuamos no ramo dos relacionamentos. Mesmo assim, o sucesso para esse setor depende, também, dos serviços que prestamos. As empresas precisam estar muito bem preparadas para servir o cliente, pois só assim irão obter algum sucesso nesse novo mundo dos negócios web. Para tanto, é necessária uma verdadeira mudança cultural, visto que os velhos paradigmas, relacionados ao tratamento e ao atendimento ao cliente, devem mudar. Os relacionamentos são fundamentais para nossa vida. Imagine, agora, um mundo onde todos vivam esse real conceito de servir. Exerceríamos uma melhor liderança, levando os colaboradores a se sentirem felizes e motivados em nossas empresas, e o clima organizacional seria melhor. O princípio é: coloque seus colaboradores em primeiro lugar e veja como darão o máximo por sua empresa. Conscientize seus líderes de atendimento sobre a importância do pessoal da linha de frente, capacite-os, crie campanhas motivacionais, valorize, respeite seus colaboradores

116

| WIDE | 81 > E-COMMERCE

Coloque seus colaboradores em primeiro lugar e veja como darão o máximo por sua empresa Márcio Silva

e veja o sucesso de seu negócio. Lembre-se: a motivação é o combustível da produtividade!”, ressalta Márcio. O colaborador é a chave do bom atendimento. É nele que se deve investir e valorizar para obter sucesso em seu trabalho como atendente, segundo Lismeri Avila, da Onofre em Casa. “Todo o processo se inicia na contratação. No televendas, 60% da equipe são estagiários de farmácia que estão cursando o terceiro ou quarto ano e que têm como objetivo fazer carreira na Onofre ou ingressar mais facilmente na indústria. Para os não estagiários, intensificamos a carga de treinamento de produtos e também buscamos sempre reter talentos, identificamos as oportunidades e muitos são promovidos para continuarem a trabalhar no call center ou em outras áreas da empresa. Isso tudo gera satisfação ao funcionário, que atenderá bem o nosso cliente.” Os atendentes devem receber constantes treinamentos para ficarem inteirados sobre os produtos e as condições da empresa. “Em se tratando de comércio eletrônico, um dos maiores problemas é a segurança da transação. O consumidor tem dúvidas com relação à segurança de suas informações; se o produto ou serviço comercializado remotamente atende a seus requisitos de qualidade, suas expectativas e necessidades; e se o produto será entregue na data e no horário combinados. A recomendação é que o colaborador conheça bem os principais produtos/serviços (características, benefícios e vantagens do cliente), as políticas de preço e as condições de pagamento, as políticas de segurança da organização com relação aos dados do cliente e os principais tipos de clientes. Ainda assim, dotar o colaborador de competências por meio de treinamentos, monitorias e feedbacks, para que ele possa manter uma postura proativa, demonstrando o interesse em ajudar o cliente e passando segurança na relação”, ressalta Márcio Silva. Muitos operadores de call center são treinados para seguir


e-commerce

scripts e, assim, passam informações de uma forma muito impessoal para os clientes. Márcio Silva declara sobre o erro nesse formato de atendimento: “O relacionamento interpessoal com o cliente é fator imprescindível para transmitir uma boa impressão sobre produtos, serviços e marcas, assim como se beneficiar das informações dos clientes para mantê-los e gerar mais negócios”. Outra cultura utilizada em muitos setores de call center é o tempo predeterminado para atender os clientes. No caso da Drogaria Onofre, tais requisitos são eliminados para que os consumidores recebam um atendimento de qualidade. “Os atendentes têm um roteiro como orientação, porém não temos limite de tempo, pois cada cliente é único. Atendemos muitos idosos, que merecem uma atenção especial, além de clientes com dificuldade em ler a receita, e, nesse caso, solicitamos que nos enviem via fax ou e-mail. Há ainda os casos de clientes que querem saber detalhes sobre um produto, e não podemos dar um limite para ouvir o que ele necessita”, diz Lismeri. No Brasil, se pensamos em ligar para um “0800” ou “4004”, logo associamos isso a perder um bom tempo na espera pelo atendimento. Segundo Roberto Meir, essa é uma estratégia dos empresários que não sabem o valor do bom atendimento para a empresa. “O menu eletrônico surgiu para direcionar a ligação para o agente mais adequado para resolver o problema que o cliente tem. Assim, empresários utilizaram isso para reter o fluxo na fila e fazer com que vários clientes desistissem da ligação. Dessa forma, a empresa atende menos pessoas e, mesmo deixando o cliente que é atendido aborrecido pelo tempo de espera, resolve o problema dele. Infelizmente, as empresas consideram o custo quando o cliente que liga para o call center. Não é a atividade de atendimento que é ruim, é o empresário ou a empresa que quer economizar e não faz o correto.” Segundo Denis H. Detzel e Robert L. Desatnick, autores do livro Gerenciar bem é manter o cliente, os cincos segredos para a superioridade em serviços estão fundamentados nas ações a seguir, que contribuem para que a empresa alcance a qualidade no ambiente interno, refletindo em qualidade no atendimento, o que acarreta no aumento das vendas e na participação de mercado.

1. Criar um foco no cliente em toda a organização; 2. Estabelecer padrões de desempenho em serviços baseados nos funcionários; 3. Medir o desempenho em serviços em relação a marcos de referência (benchmarcks) superiores; 4. Reconhecer e recompensar os comportamentos exemplares em serviços; 5. Manter o entusiasmo, a consistência e a previsibilidade para o cliente.

Pesquisas de satisfação

Em relação às pesquisas de satisfação, Roberto Meir as considera como um fator importante para a empresa, contanto que elas atuem decisivamente. “O problema é que as empresas fazem pesquisas de satisfação para deixar o resultado armazenado. Ninguém age. Cansei de responder a pesquisas de forma contrariada, falando sobre a minha insatisfação, e a empresa não me deu feedback. Em nenhum momento se mostrou preocupada em resolver o problema da minha insatisfação. Todas as pesquisas do Brasil divulgam um índice de 85% a 95% de satisfação dos clientes. É mágico! Estou insatisfeito com pelo menos 975 das empresas que fui atendido. Satisfação é o que cliente fala. Lealdade é o que ele faz. Infelizmente, as pessoas são resignadas e têm medo, vergonha de reclamar. Na minha posição de especialista internacional em relações de consumo e atendimento ao cliente, analisando empresas do mundo inteiro, percebo que elas procuram ludibriar os clientes quando eles reclamam de algo, tentam mostrar que foi um erro de fábrica etc.” Para Roberto, se a empresa quer realmente melhorar com as críticas dos consumidores retratadas nas pesquisas de satisfação, deve agir como uma auditoria. “Assim, as pesquisas terão o poder de mexer em cima do erro para efetuar mudanças, podendo até demitir o presidente, se necessário.” Segundo dados da e-bit, somente nos seis primeiros meses de 2010 foram faturados cerca de R$ 6,7 bilhões em compras online, um crescimento de 40% em relação ao mesmo período de 2009. O e-commerce está superando expectativas. Só neste ano, 20 milhões de brasileiros efetuaram pelo menos uma compra pela internet, em um tíquete médio de R$ 379. A concorrência é grande, e os lojistas estão cada vez mais recorrendo às empresas que garantem segurança nos meios de pagamentos e de dados dos consumidores. Então, “mexer os pauzinhos” para melhorar o formato de atendimento já é uma ótima maneira de fidelizar clientes.

Satisfação é o que cliente fala. Lealdade é o que ele faz Roberto Meir

81 > E-COMMERCE | WIDE |

117


118

| WIDE | 80 81 >>E-COMMERCE E-COMMERCE


80 81 > E-COMMERCE | WIDE |

119


Tacada

de mestre

Saiba como a Netshoes conquistou a 4ª posição entre as lojas virtuais mais acessadas do país Desde 2001 na internet, quando o varejo na rede ainda estava dando os primeiros passos no Brasil, a Netshoes vem se consolidando como a loja de artigos esportivos mais acessada do país. No ranking do site Alexa.com, que aponta os cem sites mais visitados do Brasil, na categoria “shopping” a Netshoes fica atrás apenas de Americanas, Submarino e Saraiva.


e-commerce

Não podíamos deixar, então, de ir atrás dos segredos e das estratégias dessa loja virtual que se mantém em tão boa colocação em número de visitantes únicos por dia. Roni Cunha Bueno, diretor de marketing do setor de varejo da Netshoes, fala de toda a trajetória da loja, desde a decisão de sair das lojas físicas e se consolidar apenas na web até a conquista das categorias de esporte e tênis do maior portal de e-commerce do país, a Americanas.com. WIDE Desde quando a Netshoes está no ar? Ela foi a primeira loja

desenvolvida pelo Grupo NetShoes? RONI BUENO A Netshoes existe há dez anos e hoje é líder em venda de artigos esportivos online. A empresa começou como loja física no ano 2000 e chegou a possuir oito unidades. Pioneira, também criou sua loja virtual e, em 2007, fechou as lojas físicas para tornar-se PurePlay, ou seja, totalmente online. WIDE Segundo pesquisa realizada pela comScore, empresa líder

mundial na medição do mundo digital, a Netshoes é a terceira loja virtual mais visitada do Brasil e cresceu, no último ano, em 49% o número de visitantes únicos. A que se deve esse grande crescimento em tão pouco tempo? RONI BUENO O principal drive desse crescimento é o investimento agressivo em mídia, parte essencial da estratégia da empresa. Além disso, podemos considerá-lo fruto de muito trabalho, dedicação e foco em serviços. A empresa investe cada dia mais nas melhores práticas e busca os melhores profissionais do mercado, a fim de garantir a qualidade da sua operação e consequente satisfação de seus clientes. Vale lembrar que possuímos uma ferramenta em nosso site com a qual o consumidor pode avaliar o artigo adquirido, e isso é uma base para nós e outros consumidores mensurarmos a qualidade de produtos. Então, artigos bem avaliados por consumidores dão mais segurança para outros comprarem. Para exemplificar, na época da Copa tivemos mais de mil avaliações da camisa da Seleção, com consumidores comentando sobre a qualidade do tecido, o caimento etc. Isso é extremamente importante, pois é o nosso consumidor falando por nós, atraindo outros compradores. WIDE A partir de quando a Netshoes passou a ser responsável

www.netshoes.com.br

pela administração das categorias de esportes e tênis do portal Americanas.com? RONI A parceria com Americanas.com surgiu no final de 2005 e vem se consolidando ao longo do tempo. Ao estabelecer a parceria com a maior loja de e-commerce do país, a Netshoes fortaleceu sua posição no mercado. WIDE Quais são as estratégias utilizadas pela Netshoes para se man-

ter entre as lojas mais acessadas do Brasil? RONI Foco no cliente, investimento em marketing e tecnologia e busca pelo erro zero. Atualmente, contamos com uma central de relacionamento disponível 24 horas por dia, visando atender às necessidades dos clientes o mais breve possível, além contarmos 81 > E-COMMERCE | WIDE |

121


e-commerce

A Netshoes produz mais de seis mil banners por mês em cerca de 200 sites diferentes, desde os grandes portais até blogs. Anunciamos, ainda, nos canais SporTV e Band, além da rádio Transamérica com 100% de controle do nosso centro de distribuição para que as entregas sejam realizadas em até dois dias úteis nas principais regiões do país. A Netshoes produz mais de seis mil banners por mês em cerca de 200 sites diferentes, desde os grandes portais até blogs. Como somos uma loja virtual, buscamos estar presentes onde nosso cliente está, então também investimos em redes sociais. Estamos presentes em Twitter, Orkut, Facebook e YouTube, além de contar com blogs de todas as lojas administradas por nós. No total, são mais de 50 mil clientes que interagem conosco constantemente pelas redes sociais. Não deixamos, porém, de dar atenção às demais mídias e anunciamos, ainda, nos canais SporTV e Band, além da rádio Transamérica.

realizada internamente, com frequente troca de conhecimento entre as partes, buscando sempre o melhor resultado. WIDE Qual a última novidade da Netshoes? RONI Recentemente, a Netshoes implantou um novo sistema de

atendimento online, em parceria com a NeoAssist. Com esse novo método implantado, a Netshoes garantirá mais agilidade para responder às perguntas mais frequentes dos internautas. Em média, 90 mil atendimentos são solicitados por mês pelo e-consumidor ao sistema inteligente, sendo 60% das respostas solucionadas de maneira automatizada. O sistema inteligente de atendimento da NeoAssist traz respostas imediatas a dúvidas comuns, sem intervenção humana, mostrando inúmeras informações que facilitam o processo gerencial. WIDE Como foi desenvolvido esse sistema? RONI O atendimento automatizado é possível porque o sistema

inteligente de atendimento, instalado na loja virtual, é composto por um banco de dados personalizado pela NeoAssist em parceria com as principais perguntas e respostas definidas junto à Netshoes. As plataformas emitem relatórios atualizados em tempo real, que mostram a performance do atendimento, a quantidade de perguntas feitas, as respostas e todos os históricos. Os resultados permitem à loja virtual traçar novas estratégias pensando constantemente na melhoria do atendimento ao cliente. WIDE Por que a Netshoes optou por esse novo sistema? RONI Queríamos disponibilizar aos internautas que compram na

Netshoes um canal de autoatendimento com retornos rápidos em relação ao que precisam, para que se sintam tão confortáveis como se estivessem em uma loja física.

WIDE O Grupo Netshoes é composto por treze lojas virtuais. Quais os

diferenciais das lojas desenvolvidas pelo Grupo Netshoes? RONI Todo o knowhow e o foco em serviços desenvolvidos e utilizados na Netshoes é replicado nas lojas parceiras. Compartilhando recursos, conseguimos adotar práticas inovadoras e tecnologia de ponta em operações que não seriam viáveis de forma independente. WIDE Para atender a tantas lojas virtuais e administrar todo o con-

teúdo de seus sites, a equipe do Grupo NetShoes conta com quantos profissionais e em quais funções? RONI Atualmente, o quadro conta com mais de 650 colaboradores diretos distribuídos em atendimento, marketing, logística, operações, tecnologia e comercial. Toda a gestão das lojas do grupo é

122

| WIDE | 81 > E-COMMERCE

www.netshoes.com.br - página de produto


81 > E-COMMERCE | WIDE |

123


e-commerce

O botão

“Comprar” é só o primeiro passo Por Flávia Freire

O cliente pode navegar pela loja virtual, colocar os produtos que deseja no carrinho de compras, calcular o frete, ver o prazo de entrega... todo um trabalho de pesquisa que pode ser abolido na hora “H” devido a problemas com o cadastro no site e o processo de pagamento. Saiba como oferecer uma e-shop totalmente intuitiva e agradável aos usuários com as dicas de usabilidade de Amyris Fernandez.

124

| WIDE | 81 > E-COMMERCE


Amyris Fernandez Sócia-diretora da Usability Expert e diretora do IxDA (Interaction Design Association) de São Paulo

Assim como temos um formato de arquitetura de informação parecido em todos os provedores de e-mail e nos portais de notícia, nas lojas virtuais funciona da mesma maneira. Quando a onda do e-commerce chegou ao Brasil, poucos sites de vendas predominavam na internet. Por meio deles, nos acostumamos com o modelo básico de e-shops, que traz os departamentos no menu horizontal no topo da página e as definições dos produtos desse departamento organizadas no menu vertical da esquerda, para uma busca facilitada. Mas, não basta seguir um padrão visual para agradar os clientes e direcioná-los à página de compra. Para saber sobre todos os detalhes que devem ser levados em consideração em relação à usabilidade de uma loja virtual, conversamos com a sócia-diretora da Usability Expert e pesquisadora sobre usabilidade e experiência do usuário em meios digitais, Amyris Fernandez. Diretora do IxDA (Interaction Design Association) de São Paulo. Amyris fez mestrado em Comércio Eletrônico pela University of Rochester, nos Estados Unidos, e publicou dois livros no exterior sobre interatividade e usabilidade. WIDE Como diz o ditado, a primeira impressão é a que fica. Então,

com o que os desenvolvedores e designers devem se preocupar para que a página principal da loja virtual transmita confiança ao usuário, para que ele se sinta à vontade para continuar navegando pelo site e efetuar compras? AMYRIS “Você nunca tem uma segunda chance de causar a primeira impressão.” A primeira página não é sobre confiança em fazer a transação somente, mas deve refletir a imagem da marca. Sites pobres graficamente transmitem a impressão de falta de profissionalismo, assim como sites muito cheios de tecnologias podem assustar o usuário comum. É preciso saber qual é a percepção da marca que se deseja no consumidor, para poder fazer boas escolhas em termos de página.

AMYRIS A melhor é aquela que seu público pede. Por essa razão,

conversar com os usuários na fase de concepção do projeto e fazer os testes de usabilidade é tão importante. São testes qualitativos, feitos com no mínimo cinco a oito pessoas por segmento de público-alvo do produto, em sala de espelho dupla face. Faz-se o registro sincronizado de expressões faciais e movimentos de mouse. WIDE Segundo dados do WebShoppers Brasil 2010, 86% dos entrevis-

tas disseram que apenas olharam alguns itens e saíram da loja e 14% deram início ao processo de compra, mas acabaram não concluindo o procedimento. Qual você acha que é o maior erro de usabilidade apresentado nas lojas virtuais brasileiras hoje que pode “expulsar” os usuários da loja virtual? AMYRIS Há quatro grandes vertentes a se observar numa interface: design, tecnologia, arquitetura de informação e conteúdo. Boa parte das pessoas ligadas ao desenvolvimento de interfaces preocupa-se tremendamente com as três primeiras e, quando chega na hora do conteúdo, cansa (risos). Nessa hora, o sujeito recorta e cola o material promocional do dono do produto e pronto. Nada poderia ser pior para o processo de vendas online de um produto. Depois de achá-lo, parte do que se quer é explorá-lo visualmente e tecnicamente. Todo o lado técnico é texto. Na minha experiência, quase todas as lojas erram na hora e no lugar de apresentar os densos textos técnicos, que só interessam a uma meia dúzia de gente, e textos mais vendedores, que não interessam nessa hora. O sujeito já comprou a ideia de ter uma TV LED, não precisa ficar lendo textos que fazem apologia às maravilhas do LED, por exemplo. WIDE Em relação às fotos dos produtos, qual é a melhor maneira de

uma melhor usabilidade ao usuário, como o posicionamento do menu, por exemplo? AMYRIS Não existe uma regra, mas seguir o que é usual de se fazer em cada cultura/país é aconselhável. As pessoas se acostumam a certos modelos e em cada país é diferente. O brasileiro gosta de páginas graficamente interessantes, mesmo que sejam mais complicadas de navegar.

apresentá-las? A exibição em diferentes ângulos de um produto é necessária? E a ferramenta de zoom? Que tipo de apresentação de imagens agrada mais aos usuários? AMYRIS A melhor maneira engloba três características: 1. Foto em todos os ângulos, principalmente os “mais sexys”, como as diferentes entradas que ficam na parte de trás das TVs, por exemplo; 2. Zoom; 3. Slideshow e controle para ver as fotos. O que mais agrada o usuário é a possibilidade de visualização em diferentes tamanhos e fotos de alta qualidade de resolução.

WIDE Existe uma melhor maneira de organizar os produtos em

WIDE Quais fatores facilitam e quais prejudicam a compra online?

um menu?

AMYRIS A persuasão da compra está na foto, no texto e no preço, em

WIDE Há alguma estrutura de site para lojas virtuais que forneça

81 > E-COMMERCE | WIDE |

125


e-commerce

última instância. O que facilita ou pode travar a venda é o cadastro. Sempre o cadastro. Um cadastro longo pode fazê-lo desistir, assim como um formulário que gera muitos erros. Quando as duas coisas estão combinadas, pode ter certeza que o usuário vai para o seu melhor concorrente ou para um site onde ele já tenha o cadastro, mesmo que o produto seja mais caro nesse outro site. WIDE Quais detalhes transmitem confiança ao consumidor sobre

seus dados pessoais informados? AMYRIS Todos os símbolos com cara de cadeado aumentam a sensação de segurança. São coisas que os usuários já reconhecem como símbolos de segurança. WIDE Quantas etapas são ideais para um processo de compra? AMYRIS O processo em quatro etapas é comprovadamente o melhor

e está disponível em sites como o Submarino, por exemplo. Os passos: identificação (embrulho para presente ou outro endereço é opcional), entrega, pagamento e confirmação. Lembrando que meios de pagamento devem estar ao lado do produto, juntamente com o preço, e o mesmo sobre prazo de entrega ao lado do “pagamento”. WIDE Em relação à acessibilidade das lojas virtuais, a usabilidade

tem papel fundamental para tornar o site acessível para deficientes visuais? AMYRIS Acessibilidade não é só uma questão de dar acesso ao pessoal com deficiências visuais. Há outros problemas, como dificuldades motoras, incapacidade de distinguir certas cores, auditiva (pensando que alguns feedbacks do site podem ser predominantemente sonoros) e a mais desconhecida de todas: a incapacidade de compreender o que lê. Há mais gente dentro dessa última categoria do que vocês imaginam! Para melhorar a acessibilidade das lojas virtuais para tais pessoas, deve-se tomar um cuidado redobrado com o tipo e a quantidade de palavras. Não deve ultrapassar um vocabulário de três a cinco mil palavras, o que é equivalente ao vocabulário de uma criança de oito a dez anos de idade. WIDE Você acha que uma usabilidade ruim, mesmo que o usuário

consiga finalizar a compra, faz com que ele não volte mais ao site e faça um marketing negativo sobre a loja para outras pessoas? AMYRIS Sem dúvida! Isso corresponde a ser maltratado pela vendedora de uma loja física ou ver um caminhão de entregas estacionado em fila dupla na sua rua. É sua imagem de marca que fica desgastada.

126

| WIDE | 81 > E-COMMERCE

Quase todas as lojas erram na hora e no lugar de apresentar os densos textos técnicos, que só interessam a uma meia dúzia de gente


81 > E-COMMERCE | WIDE |

127


E-commerce Mariano Gomide de Faria

Shop.org 2010 A vez da indústria do vestuário e da personalização São 16:43 em Dallas, Texas. O pessoal da revista Wide desesperado porque ainda não mandei a coluna. Anualmente venho ao Shop.org, o maior evento de e-commerce do mundo, para me atualizar. Como de costume, assisto a palestras, casos, escuto, escuto, aprendo e abordo os profissionais mais interessantes para conhecer detalhes das suas operações de e-commerce. Há trinta minutos falei com Glen Senk, CEO da Urban Outfitters. Fora a gravata borboleta azul, é um sujeito muito interessante. Para os que não conhecem, a Urban vende 2,5 bilhões de dólares. Dos quais 450 milhões de dólares pela internet. Algo em torno de 17% de sua venda total vem do canal e-commerce. Pelo volume e pela competência de gerir tamanha operação, naturalmente eu esperava que o Mr. Glen dedicasse apenas cinco minutos a este brasileiro que vos escreve. Para meu espanto, Pati Freeman, vice-presidente da Forester Research, o aguardava ansiosamente. Após as introduções, para minha surpresa, fui questionado sobre o mercado brasileiro. Deu início, então, a uma conversa em que eu era o provedor de informações. Como assim?? Isso mesmo! O mundo está definitivamente de olho no Brasil. Resumindo, a conversa acabou, não consegui perguntar absolutamente nada e, na despedida, o convidei para conhecer melhor o Brasil. Ele aceitou prontamente. Meus amigos leitores, o mundo efetivamente mudou. Os nossos ídolos passam a ser nossos parceiros comerciais. Fora a comprovação do fato de que o Brasil é absolutamente relevante, percebe-se claramente uma grande tendência das empresas de vestuário. O mercado de varejo de roupas pela internet tomou grande parte das palestras e apresentações. O Brasil

Pergunta do leitor Se você tem alguma dúvida sobre como melhorar a performance de vendas de sua loja eletrônica, envie para redacao@revistawide.com.br. Sua pergunta poderá ser selecionada e respondida na próxima edição.

128

| WIDE | 81 > E-COMMERCE

seguirá o mesmo caminho. As lojas de rua e os shopping centers que conhecemos comercializarão pela internet de forma efetiva. Sites como “The Art of the Trench”, “Fashionista”, “BackCountry” e “Polyvore” trazem boas novidades. Outro assunto muito promovido foi a questão da

personalização. Ofertar o produto correto para o cliente por meio de ferramenta de recomendação é uma aposta certa. Como exemplo, o Staples.com, segundo maior site dos EUA, aumentou em 22,3% o seu ticket médio com uma ferramenta de recomendação de cross selling. Por fim, outro assunto que tomou conta da pauta foi o Cross Channel. Unir os canais (loja, e-commerce, mobile, site, mídias sociais, e-mail marketing etc.) é necessário. Muitas empresas apresentaram casos interessantes de ganho de escala em esforços nessa área. Para finalizar, antes de receber mais um telefonema da editora da Wide, vale indicar o site “Wet Seal”, que é uma boa forma de atuação de social network aplicada a e-commerce. Temas como mobile e-commerce e iPad e-commerce ganharam força. De Dallas, Texas, para a edição da Wide. Esta coluna tem o objetivo de trazer informações relevantes e discutir temas polêmicos à sustentabilidade do crescimento do setor de comércio eletrônico, como também trazer novidades e curiosidades dos seus bastidores. Colabore com perguntas e informações.

Mariano Gomide de Faria Diretor executivo da empresa de tecnologia Vtex, membro do conselho de administração do E-commerce Summit e presidente do conselho da Estação do Vinho. mariano@vtex.com.br



Wide81