Ed70

outubro :: ano 6 :: nº 70 :: www.revistawebdesign.com.br R$ 11,90

Realidade Aumentada Aprenda a explorar esse novo recurso de interatividade na web

Quer conferir como funciona esta tecnologia? Siga as instruções abaixo: 1. Acesse www.revistawebdesign.com.br/realidadeaumentada 2. Direcione o ícone acima para sua webcam (aprox. 30 cm de distância) 3. Veja o demonstrativo que preparamos para você!

Apoio

E D I T O R A

4 :: Webdesign

4 :: Webdesign

Luis Rocha

Editorial

luis.rocha@arteccom.com.br

Tecnologia boa é aquela que mexe com as nossas emoções Semana de fechamento de mais uma edição da Webdesign. Toca o celular. Penso eu, lá vem algum imprevisto de última hora! Do outro lado da linha, é a minha grande amiga (e diretora de criação) Camila Oliveira. O papo se inicia com algumas trocas de ideias para acertarmos os detalhes de fechamento da revista.

A conversa se estende e confesso a ela que o tema do especial

Direção Geral Adriana Melo Direção de Redação Luis Rocha Direção de Criação Camila Oliveira Publicidade Luanna Chacon Thiago Nabuco Atendimento Rebeca Emerick

deste mês acabou trazendo boas recordações sobre o início

Tecnologia Neilton Silva

do cinema 3D e os clássicos óculos ornamentados com papel

Rafael Zuma

celofane vermelho e azul. Neste momento, ela me “intima” a assistir o filme “UP - Altas Aventuras”, um dos mais recentes projetos produzidos pela Disney/Pixar com tecnologia tridimensional para películas cinematográficas.

Segundo ela, a mistura do moderno aparato tecnológico com uma bela história e um roteiro bem trabalhado torna a obra numa ótima opção de lazer, fazendo com que você participe realmente daquela história. Para se ter uma ideia, o processo de imersão e realismo foi tão grande que lágrimas fizeram parte das emoções vividas por

Financeiro Cristiane Dalmati Eventos Taianá Andrade

Atendimento aos assinantes atendimento@arteccom.com.br Redação redacao@revistawebdesign.com.br Anuncie publicidade@arteccom.com.br

Camila durante o filme!

Depois de tamanha revelação, terminamos nossa conversa concluindo que esse é o papel que uma tecnologia deve assumir nos projetos, ou seja, ajudar o usuário a se sentir parte daquele ambiente que ele deseja experimentar em determinado momento de sua vida. Assim, esperamos que a reportagem de capa possa ajudá-los a encontrar este diferencial na aplicação da Realidade Aumentada em ambientes digitais.

PS: Vocês devem estar estranhando o porquê de Adriana não nos brindar com mais um de seus interessantes depoimentos por aqui. Diante dos novos projetos lançados pela Arteccom, como o curso Design de Interfaces e o Workshop Magento, ela pediu para

Revista Webdesign www.revistawebdesign.com.br Revista TIdigital www.revistatidigital.com.br Encontro de Design e Tecnologia Digital www.edted.com.br Fórum Internacional de Design e Tecnologia Digital www.foruminternacional.com.br Concurso Peixe Grande www.peixegrande.com.br Curso Web para Designers www.webparadesigners.com.br Curso Design de Interfaces www.designdeinterfaces.com.br

que eu cobrisse sua ausência neste momento. No mês em que completo quatro anos de Arteccom, agradeço a minha querida chefinha por esta oportunidade de abrir a edição e também fechá-la (pág.74) com a publicação de meu conto, premiado recentemente em concurso literário.

Grande abraço e uma ótima leitura!

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

Distribuição www.chinaglia.com.br

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

Sumário

70 08 - Fique por dentro 10 - Métricas 11 - Direito na web

34 - Reportagem de capa A aplicação do conceito de Realidade Aumentada em ambientes digitais representa novos desafios para os profissionais criativos e transformações no modelo

12 - Portfólio Agência

de interatividade dos projetos. Saiba como avaliar as

Caju

vantagens deste novo recurso

16 - Portfólio Freelancer Igor Cardoso

24 - Entrevista Paulo Teixeira, autor do

18 - Portfólio Ilustrador

livro “SEO, otimização

Nico Mezquita

de sites”, explica como

20 - Lente Digital Jorge Campos

22 - Fonte de Inspiração - Nova seção!

Fabio Haag

62 - Tecnologia Motion Graphics

o conhecimento sobre esta técnica pode ajudar na construção de interfaces funcionais

46 - Opinião Confira quais são os desafios para demonstrar ao cliente o valor do design e do processo criativo de um projeto web

64 - Tutorial Actionscript para webdesigners - parte 1/4

66 - Ilustração

50 - Reportagem

Carolina Vigna-Marú

Especialistas brasileiros analisam como as agências

68 - Marketing

digitais podem incluir o

René de Paula Jr.

Twitter em seus portfólios de serviços, além de

70 - Internacional

apontar bons exemplos

Julius Wiedemann

72 - Webdesign

56 - Estudo de caso

Luli Radfahrer

Agência Ginga apresenta os detalhes envolvidos na criação e no desenvolvimento do projeto

Os links citados nesta edição estão reunidos na página principal do site da revista.

Acesse www.revistawebdesign.com.br.

experimental Angani

E-mails

6 :: Webdesign

Gostaria de parabenizar os posts sobre

Realidade Aumentada

no site de vocês e sugerir que publiquem uma matéria mais abrangente sobre o assunto, mostrando as melhores estratégias para utilizar em

Obrigado pelos elogios, Fabiano e Ademar!

Como vocês devem ter visto na capa desta edição, preparamos um especial que traz

websites, e como funciona a tecnologia de reconhecimento visual.

uma análise de profissionais brasileiros que

Fabiano Santos

trabalham atualmente com esta tecnologia

fabiano.santos@gmail.com

e de que maneira ela pode contribuir para aperfeiçoar a interatividade e o design de

Parabéns pela publicação. Li com muito interesse a matéria sobre Realidade Aumentada, publicada na seção “Tecnologia”, da edição 69. Vocês poderiam fornecer um contato de estúdio ou profissional que execute um

interfaces de projetos web. A partir da página 34, confiram o resultado desta troca de conhecimentos. Boa leitura!

“modelo” para ser impresso em um convite e que pudesse ser visto também na webcam? Somos uma empresa ligada ao ramo de catálogos, folders e convites para galerias de arte e museus.

Ademar de Paula laserprint@laserprint.com.br

Sou assinante da Revista Webdesign há vários anos, nem sei quantos mais,

Cláudia, muito obrigado por manter tamanha

e gosto muito de suas matérias. É uma revista séria que realmente traz

confiança em nosso trabalho ao longo desse

acréscimos para nós desta área.

tempo. Pode ter certeza que continuaremos

Sou webdesigner e artista plástica. Atualmente, trabalho como freelancer

trabalhando com muito afinco para ajudá-los na

criando e desenvolvendo sites. Gostaria que me ajudassem a esclarecer a

evolução de suas carreiras! Sobre sua dúvida,

dúvida de um cliente meu. É uma empresa da área de engenharia civil e já

o colunista Dr.Gilberto Martins traz o seguinte

construíram diversas obras pelo país. Estou fazendo o site desta empresa

conselho: “Entendo que a empresa cliente da

e eles me perguntaram quanto à legalidade da divulgação

das

firma de engenharia pode se opor a veiculação

fotos de uma obra que eles construíram. Se a empresa que os contratou

de fotos (por razões de segurança, discrição,

para construir a obra pode se opor a esta divulgação e se pode fazer algo

imagem) e pode se opor à divulgação do fato

juridicamente contra eles. Desde já agradeço, Cláudia Naves contato@claudialuz.com.br

Olá, pessoal! Primeiramente gostaria de dizer que sou assinante e fã da revista

de ter sido cliente da firma de engenharia (para evitar associação de imagem, possível conflito de interesses).”

Olá, Julian. Ficamos muito felizes de receber

de vocês! Muitas decisões que tomei para minha careira foram influenciadas

a sua mensagem, pois ela serve de grande

pelas matérias publicadas na revista. É por isso que venho perguntar se vocês

incentivo em nossa caminhada. Já fizemos

já fizeram alguma reportagem sobre

sites em 3D. Ainda não sei mexer

uma reportagem sim, mais especificamente

com isso e tenho várias dúvidas, como quais são os softwares indicados, onde

na edição de setembro de 2007. Segue o link

eu posso estudar as técnicas, a aceitação desse tipo de site no mercado etc.

do PDF para você dar uma lida: http://migre.

Agradeço a atenção,

me/78bB. A reportagem faz uma introdução

Julian Vilela

sobre o assunto, indicando boas fontes e os

julianvilela@gmail.com

caminhos para se começar a trabalhar nesta área. Outra boa dica é acessar o site www. pixelsrender.com.br, que apresenta vídeostutoriais sobre o After Effects, software muito utilizado na produção de 3D. Esperamos que tais materiais possam ajudá-lo em sua pesquisa.

Grande abraço!

Gostaria de saber da possibilidade de eu publicar algum material, coluna ou artigo na revista. Sou formada em Desenho

Leila, este seu trabalho parece ser bem interessante! E agradecemos o seu interesse em

Industrial - habilitação em Programação Visual, especialista em Expressão

compartilhar seus conhecimentos com os nossos

Gráfica e mestranda em Comunicação na área de novas tecnologias e

leitores. No momento, o espaço para colunistas,

design. Caso haja possibilidade, gostaria de maiores esclarecimentos.

na edição impressa, já está preenchido. No

Disponho-me a, caso desejem, enviar meu currículo. Tenho algumas propostas de abordagens, na área de design e tecnologia. Minha dissertação de mestrado trata da Bauhaus e da escola alemã de Uhlm, abordando a retórica gráfica aplicada à comunicação visual digital.

Agradeço desde já.

Leila Krüger legkruger@hotmail.com

entanto, no site da revista, temos procurado manter a publicação de outros artigos e entrevistas. Quem tiver artigos interessantes, pedimos para que eles sejam encaminhados para o e-mail redacao@revistawebdesign.com.br, pois assim nossa Equipe Editorial pode avaliar a possibilidade de publicação, ok? Abraços!

fale conosco pelo site www.revistawebdesign.com.br :: Os e-mails são apresentados resumidamente. :: Sugestões dadas através dos e-mails enviados à revista passam a ser de propriedade da Arteccom.

8 :: Webdesign

notícias

Fique por dentro

Blog coletivo sobre tipografia Nesta edição, estamos lançando uma nova seção na revista, chamada “Fonte de Inspiração”. O objetivo é apresentar a riqueza dos trabalhos tipográficos desenvolvidos por profissionais brasileiros para o público envolvido com a criação para meios digitais, além de valorizar a produção nacional. Outra boa novidade envolvendo o assunto tipografia é o surgimento do blog coletivo “Tipos do Brasil” (http://www.tiposdobrasil.com/ blg/). Segundo a apresentação oficial, um dos principais objetivos deste novo espaço é “tornar-se território comum para a convergência de interesses dos designers de tipos e ser um canal de comunicação entre designers, diretores de arte, agências e distribuidores”. Fazem parte deste blog profissionais renomados como Fabio Haag (http://www.daltonmaag.com/), Tony de Marco (http:// www.justintype.com.br/), Gustavo Lassala (http://www. brtype.com/), Ricardo Esteves (http://www.outrasfontes. com/), dentre outros.

making of

As reuniões de pauta da revista são sempre muito interessantes, pois além do desafio criativo na definição da identidade gráfica e dos assuntos em destaque na edição, nossa equipe costuma trocar

Lançada nova versão de advergame brasileiro sobre vôlei

ideias e compartilhar conhecimentos

Após o sucesso da primeira versão do Super Vôlei Brasil (http://www.supervoleibrasil.com.br/), lançado em 2008, e que alcançou 1,4 milhões de gameplays (jogos executados), com tempo médio de 7min30s, a Olympikus anuncia uma nova atualização de seu advergame.

A grande novidade desta edição, desenvolvida em parceria com a Aquiris Game Experience, é a inclusão de personagens que representam as jogadoras da seleção feminina de vôlei, atuais campeãs olímpicas e octacampeãs do Grand Prix. Além disso, a divulgação oficial informa que “a versão atualizada tem novo sistema de pontuação, CPU mais elaborada, novo servidor de banco de dados, largadinhas mais venenosas, mais potência no saque viagem, inclusão do saque tático, novos movimentos dos personagens, balanceamento dos jogadores, diagonais e paralelas mais bem definidas”.

“O lançamento de personagens da seleção feminina no game, além de democratizar o esporte no ambiente digital, também é uma justa e inédita homenagem a essas jogadoras que conquistaram o ouro em Pequim”, explica Márcio Callage, gerente de marketing da Olympikus.

do mercado web.

Hotsite como ferramenta de utilidade pública Nos últimos meses, a disseminação e os riscos provocados pela influenza A (H1N1), também conhecida como gripe suína, se tornaram motivo de grande preocupação para a população mundial. Diante disso, a internet acabou assumindo papel fundamental na divulgação de informações atualizadas sobre o assunto. Um bom exemplo deste cenário é o hotsite “Boletim da Gripe” (http://www.tvcultura.com.br/boletimdagripe/), criado pela TV Cultura. Por lá, o usuário pode conferir “dicas de prevenção, formas de contaminação, sintomas, diagnóstico e grupos de risco da gripe A (H1N1), bem como vídeos informativos (de um minuto cada um) produzidos pelo canal de TV do Hospital das Clínicas”.

sobre os principais assuntos do cotidiano Neste mês, o desafio era encontrar um conceito para a capa de maneira que o leitor pudesse relacionar, de imediato, o tema em destaque: a Realidade Aumentada. Então, decidimos partir para uma solução diferente e apresentar logo de cara um demonstrativo de como funciona esta tecnologia.

Para que isso pudesse acontecer, fechamos uma parceria com a EDGY, comandada pelo sagaz Gustavo “Grande Energia” Alberti, que veio através da indicação do nosso amigo Cesar Paz, presidente da ABRADi e diretorpresidente da AG2.

Com o desenvolvimento do projeto on-line resolvido, o próximo passo seria escolher a imagem principal a ser rastreada na capa impressa. Depois de um brainstorming, o ícone de uma webcam acabou sendo a imagem escolhida, por ser um elemento comum na produção desses projetos.

Em relação ao fundo, a orientação foi que usássemos apenas uma cor e o laranja acabou sendo utilizado por representar a marca da Editora Arteccom. Esperamos que vocês gostem desta experiência!

Fale com a equipe de criação: criacao@arteccom.com.br

fique por dentro :: 9

agenda Livros do mês

02 e 03/10: 3° EBAI Local: São Paulo

Título: Tudo que você precisa saber sobre o

Site: www.congressoebai.org

Twitter (você já aprendeu em uma mesa de bar)

A proposta deste evento é

Autor: Juliano Spyer Edição: Talk Interactive (www.talk2.com.br) Nesta edição, você vai conferir uma reportagem sobre as oportunidades de negócios que o Twitter pode trazer para as agências digitais. Assim, este e-book

contribuir para o desenvolvimento do segmento de Arquitetura de Informação no Brasil, criando um congresso para o debate e a troca de informações entre profissionais, pesquisadores e professores.

Inscrições a partir de R$ 296,00.

funciona como um ótimo guia para quem ainda procura entender as particularidades da principal ferramenta de

10 e 11/10: Pixel Show 2009

microblogging da internet. A boa notícia é a possibilidade

Local: São Paulo

de baixá-lo gratuitamente: http://migre.me/78j4.

Site: www.pixelshow.com.br Quinta edição de uma das maiores

Título: O poder do Twitter

conferências criativas de design e arte do Brasil. As palestras vão

Autor: Joel Comm (com Ken Burge)

abordar detalhes sobre processo

Editora: Gente (www.editoragente.com.br)

de criação e apresentar cases

A leitura desta obra criada por Joel Comm (www.joelcomm.

de renomados artistas de áreas como motion design, branding,

com), com a colaboração de Ken Burge, vale pelo intuito do

graffiti, fotografia, moda e direção

autor em compartilhar suas experiências e estudos para construir

de arte. Valores: a partir de R$

relacionamentos e desenvolver negócios através do uso da

145,00, dependendo da categoria

ferramenta. Afinal, como o próprio autor define, o “Twitter é

(profissional ou estudante) e da

sobre relacionamentos”.

data de inscrição.

24/10: 14° Encontro de Design e Tecnologia Digital (EDTED) Local: Salvador

Blog do mês:

Site: www.edted.com.br

Comunicadores

as principais novidades da área de

O maior evento de internet no país vai apresentar ao mercado baiano Design e Tecnologia Digital, através do debate sobre os principais assuntos em voga, como CMS’s, Interfaces Ricas, Metodologias Ágeis e Redes Sociais. Valores: de R$ 24,00 a 74,00, dependendo da data de inscrição.

03 a 06/11: Brazil Design Week’09 Local: São Paulo Site: www.bdw09.com.br Com o tema “Inovação e Negócios”, a nova edição reunirá um conjunto de atividades como apresentações de cases internacionais, seminários setoriais, workshops, rodadas de negócios, fórum de sustentabilidade e exposições. Promovido pela

Acesse o blog, leia os posts e saia de lá com uma nova ideia criativa na cabeça. Com este mote, o Comunicadores (http://comunicadores.info) é a nossa indicação do mês. Mantido por Haendel Dantas e Guilherme Cury, os ingredientes para que tal fórmula possa funcionar envolvem a publicação de conteúdo envolvendo temas como “publicidade, propaganda, marketing, branding,

Associação Brasileira de Design (Abedesign), com apoio da ApexBrasil (Agência Brasileira de Promoção e Exportação).

design, comportamento, tecnologia, novas mídias, web, curiosidades…”. Outro aspecto interessante deste espaço é que, além dos textos normais, o usuário pode conferir as novidades através de um miniblog.

Participe do Fique por dentro!

Envie notícias ou curiosidades para redacao@revistawebdesign.com.br.

Conhece algum blog interessante focado em criação, design, internet e tecnologia? Envie sua dica para redacao@revistawebdesign.com.br.

10 :: Webdesign

métt rii cas envie sugestões e críticas para: redacao@revistawebdesign.com.br

71h 30min

2.275 Total de agências digitais em funcionamento atualmente no mercado brasileiro de internet.

Segundo dados do “Censo das Agências Digitais ”, o faturamento gerado alcança aproximadamente R$ 760

Tempo total de uso por usuário

milhões (sem considerar os

da internet no país registrado no

investimentos em compra

mês de julho de 2009, considerando

de mídia), sendo que o custo

a navegação por páginas mais a

da hora trabalhada nessas

utilização de aplicativos on-line

empresas é de, em média, R$

(messengers, VoIP, tocadores de

43,39, e o faturamento mensal

música etc.). O número de brasileiros

por hora de R$ 7.408.

com acesso à internet em casa ou no

Fonte: ABRADi (http://migre.me/6Zha)

89,5%

Percentual de micro e pequenas

empresas brasileiras com acesso à internet (71%) que possuem

websites. Outro dado constatado pela pesquisa é que o e-mail (64%) é o serviço mais utilizado pelos microempresários. Além disso, 11% revelaram que já realizaram cursos à distância, com um total de 84% de aprovação para este modelo de aprendizado.

trabalho é de 44,5 milhões.

Fonte: IBOPE Nielsen Online (www.ibope.com.br)

20%

2

Fonte: Sebrae-SP (http://migre.me/6ZdC)

11,3%

Total do percentual de buscas

milhões

on-line realizadas através do

Montante recorde de visitas

Com este percentual, a produção

Google na internet brasileira.

registradas , em um único

de websites é a principal

Segundo dados da pesquisa, 29,8%

dia (03/09), no portal da

competência e foco de atuação

do tempo total de navegação

Climatempo, totalizando 4

das agências digitais brasileiras.

on-line no país foi gasto em sites

milhões e 800 mil páginas

Programação (10%), campanhas

do Google, sendo que o Orkut

visualizadas dentro do site. As

(9,3%) e e-mail marketing (8,5%)

predomina na categoria redes

rápidas mudanças climáticas

foram os outros serviços mais

sociais, com 96% do tempo gasto, e

ocorridas em São Paulo na

apontados pelos entrevistados.

o YouTube (91,6%) em multimídia.

época e a proximidade com

Fonte: ABRADi (http://migre.me/6Zha)

Fonte: comScore (http://migre.me/6Z0J)

o feriado de 07/09 foram considerados os principais estímulos para a quantidade de acessos originados.

Fonte: Climatempo (www.climatempo.com.br)

direito na web :: 11

direito na web Propriedade intelectual de bancos de dados Gilberto Martins de Almeida

Estou colocando no ar, no segundo semestre de 2009, um portal com vários serviços gratuitos direcionados a um público específico. Contudo, seu principal serviço é exclusivo e inovador, não há no mercado. Ele não é

Advogado formado na PUC/RJ, com

um software, mas um banco de dados para informações que serão compartilhadas entre os usuários do portal.

Mestrado na USP e

Diante das reservas e não obstante da realidade de ser copiado e permitir uma concorrência desleal, peço sua

cursos em Harvard e

ajuda me informando tudo sobre meus direitos de Propriedade Intelectual, como e onde faço os registros. Tenho

no M.I.T. Ex-Gerente

estudado um pouco sobre o assunto, mas é de um alto nível de complexidade dados as muitas regras e exceções.

Jurídico da IBM,

Principalmente quando se junta com a lei de Direito Antitruste.

onde trabalhou por 11 anos, no Brasil e nos EUA. Sócio de Martins de Almeida Advogados, escritório especializado.

Jackson Osni - jacksonosni@gmail.com

Um dos temas mais controvertidos no campo da propriedade intelectual de informática é o da proteção dos bancos de dados, que chegou inclusive a gerar na Europa um regime sui generis de proteção (em seguida criticado em várias partes do mundo, inclusive no Brasil).

Fundamentalmente, quanto mais nos aproximarmos do código, o aspecto software do banco de dados, o seu esqueleto, mais nos acercaremos do Direito Autoral. Por isso mesmo é que o INPI mantém, na Tabela de Classificação por Tipo de Programa para Registro de Programa de Computador, disponível no site do próprio INPI, itens como, por exemplo, “GI02-Gerenc BD: Gerenciador de Banco de Dados”, permitindo que programas para bancos de dados sejam ali registrados pelo seu autor ou por outro titular dos respectivos direitos.

Inversamente, quanto mais nos aproximarmos da informação, o aspecto “conteúdo” do banco de dados, o seu recheio, mais estaremos nos afastando do Direito Autoral (que protege forma, e não, ideias ou conceitos abstratos).

Vale observar que quando alguém copia indevidamente um banco de dados, muitas vezes vêm juntos o programa e os dados. Portanto, no mais das vezes, a proteção contra tais situações é garantida numa primeira instância pela tutela do Direito Autoral em relação ao programa.

Mas e o esforço de pesquisar, selecionar, e reunir a informação, fica totalmente desprotegido simplesmente porque dados não gozam de proteção autoral?

Não, no extremo, isto não seria justo.

Entretanto, “como” fazer, é chave. Por exemplo, o eBay ajuizou ação nos EUA contra o Bidder’s Edge alegando que este copiara e utilizara sem autorização o conteúdo do seu banco de dados.

O juiz primeiro deu uma liminar em favor do eBay, baseada em Direito Autoral. Foi bastante criticado por isso, então manteve a liminar, mas trocou o fundamento, passando a justificá-la com base em

invasão e apropriação de bem móvel (e continuou sujeito a críticas...).

Em resumo, é preciso cuidado. Além da escolha da melhor fundamentação para dar conta do “como” fazer, uma tarefa não menos importante é definir “o quê” fazer. Nesse sentido, o básico é registrar o programa como direito de autor, no INPI. E o mais sofisticado, mas podendo ser tão eficaz quanto, é tentar se defender com base em evidências de que tenha havido atos de concorrência desleal ou de concorrência parasitária. Como assim?

Mostrando que um concorrente está sendo prejudicado por outro que aproveitou o investimento do primeiro na construção do banco de dados para com isso desviar clientela do primeiro, ou para se intitular proprietário do banco de dados feito pelo primeiro.

Para essa estratégia uma providência prática seria, por exemplo, registrar (se possível, em cartório de Títulos e Documentos) os investimentos e esforços feitos, com independência, no desenvolvimento do banco de dados (e que podem deixar de ter o justo retorno caso um concorrente, cliente ou parceiro se aproprie do banco de dados à revelia do titular).

Finalmente, há ainda como regra três a vala comum da responsabilidade civil, quando se evidencie um ato culposo ou doloso que gere prejuízo indevido de um lado e vantagem artificial do outro tendo como ligação entre eles um esquema fraudulento.

Esse é o caminho das pedras, de “o quê” e “como”, que vale a pena percorrer, pois, como se sabe, nessa área é grande a avidez de alguns por tirar vantagem sem ter o direito respectivo.

Essa avidez merece ser reprimida para que, em sendo protegidos os canais de estocagem e fluxo de informação, haja mais incentivo para se desenvolver novos canais e com isso promover maior acesso à informação, em benefício de todos.

Envie sua dúvida para: redacao@revistawebdesign.com.br

12 :: Webdesign

o gosto singular da inovação digital pernambucana No artigo “Caju, identidade tropical que exala saúde” (http://migre.me/6KlR), destaca-se que o caju, “de aparência exótica, aroma agradável e sabor singular, é uma fruta perfeita para colorir, perfumar, enriquecer e diversificar pratos da culinária tropical.”

Rico em vitamina C e fibras, muito comum na região Nordeste do país (http://migre.me/6KkW), ele é conhecido também pelas diversas possibilidades de sua utilização após o seu beneficiamento, como a preparação de sucos, vinho, passas, doces etc.

Trazendo este cenário para o mercado de internet, quem vem evoluindo e mostrando a qualidade e o valor de seu cardápio é a agência digital Caju (http://www.caju.nu), criada por três profissionais, amigos de faculdade, com suas diferentes especialidades: Abelardo Santana (front-end), Guilherme Leite (motion graphics) e Lucio Cavalcanti (3D). Em seguida, Aloysio Chagas, especialista em Flash/Actionscript3, passaria a fazer parte da sociedade também.

“Plantada” em Recife, no mês de fevereiro de 2008, os ares da cidade vão ajudando a fortalecer a identidade da empresa. “A cultura pernambucana é uma das mais ricas do país, sendo uma das principais fontes de inspiração da Caju. Alia-se a isso, o fato de Recife ser um dos principais pólos de tecnologia do Brasil, fazendo com que empresas desse segmento sejam valorizadas na região”, afirma Aloysio Chagas.

“Não temos como objetivo ser uma ‘fábrica’ de sites. O nosso propósito é se tornar uma referência em inovação e qualidade no mercado de agências digitais. Para isso, sempre estaremos em busca de novas tecnologias, criando soluções diferenciadas e estudando ao máximo as novas possibilidades de interatividade.

Além de manter uma equipe de alto nível”, completa Lucio Cavalcanti.

Para que tudo isso possa acontecer, a agência funciona dentro de uma estrutura distante das tradicionais formalidades corporativas. “Na Caju, não existe controle de horário, as pessoas têm total liberdade de chegada e saída da agência, além do ambiente ser informal. Vez por outra, paramos o trabalho para jogar um pouco, bater um papo... Quando nos damos conta, já estamos falando de novas ideias para os projetos. Essa prática deixa a equipe tranquila para realizar seu trabalho, estimulando assim a criatividade de todos”, diz Guilherme Leite.

Outro ponto importante, como ressalta Abelardo Santana, envolve a valorização do estudo como ferramenta para evolução profissional. “Apesar da formação superior dos sócios e da maioria da equipe, valorizamos a capacidade de cada profissional, o que ele almeja para o futuro e seu interesse em aprender sempre. É comum o pessoal daqui disponibilizar um tempo para o estudo no meio de um projeto. Quando isso acontece, o resultado tende a ser melhor, na grande maioria das vezes. Os desafios fazem com que os profissionais busquem novas soluções, fazendo com que os projetos inovadores sejam um grande aprendizado.”

portfólio agência - Caju :: 13

Casa e Obras do Mestre Vitalino na X Fenearte

Humberto Zirpoli Arquitetura

Te c n o l o g i a s : B l e n d e r + C S S + F l a s h A S 3 +

Tecnologias: After Effects + Flash AS3 + Illustrator

Photoshop + Unity + XHTML

+ Photoshop + PHP + XML

www.casadomestrevitalino.com.br

www.humbertozirpoli.com.br

A entrega de uma proposta, contendo ideias inovadoras e interativas, para a secretaria de imprensa do Governo do estado de Pernambuco foi a senha para que a Caju conquistasse a realização deste projeto, que previa o desenvolvimento da interface da aplicação dos quiosques touchscreens disponíveis na entrada da Feira Nacional de Negócios do Artesanato (Fenearte) e de um hotsite que proporciona um passeio virtual e uso de Realidade Aumentada.

“A apresentação não só surpreendeu e encantou os responsáveis pelo evento, uma das maiores feiras de artesanato do mundo, como não deu oportunidade para que projetos concorrentes fossem aprovados”, revela Aloysio Chagas.

Conquistado o projeto, o próximo passo envolveu um intenso período de estudos para que todas as informações necessárias para a sua concepção fossem colhidas. “Realizamos um trabalho de pesquisa sobre a vida e a obra do Mestre Vitalino, além de visitas à Caruaru-PE para conhecer detalhadamente o local que seria reproduzido em 3D para o passeio virtual, levantando medidas e captando fotos de todos os detalhes da casa/museu. Além disso, visitamos o Museu do Barro para fotografar as obras que seriam apresentadas através da Realidade Aumentada”, explica Guilherme Leite.

A objetividade foi um dos principais conceitos aplicados no processo de criação para garantir que o público fizesse o uso adequado das interfaces. “Pensando em retratar no hotsite a mesma aplicação dos quiosques touchscreens disponibilizados no museu da feira, a Caju tentou ser direta no objetivo do ambiente digital. Na tela inicial, são apresentados dois grandes botões para selecionar qual projeto interativo o usuário deseja experimentar: se o passeio virtual na casa do Mestre Vitalino ou conhecer algumas das obras criadas pelo artesão em Realidade Aumentada”, revela Lucio Cavalcanti.

Ficar atento aos pequenos detalhes de um projeto pode representar ótimas oportunidades de trabalho. Para quem ainda tem dúvidas sobre a validade de se colocar uma assinatura na interface dos projetos realizados por uma agência, a história deste case serve como um bom exemplo.

“Ao visitar o site da boate Apotheke (http://estudiocaju. com.br/demo/apotheke/), o renomado arquiteto Humberto Zirpoli, responsável pelo desenho arquitetônico da casa, observou a sua qualidade e, através da nossa assinatura no projeto, entrou em contato para que nós desenvolvêssemos o seu novo website”, revela Aloysio Chagas.

Em relação ao processo de criação, Abelardo Santana explica que, como o grande destaque do website são os desenhos do arquiteto, os criativos da Caju procuraram conceber uma solução para que os projetos em destaque fossem sempre visualizados.

“O conteúdo desliza suavemente sobre as animações de fundo de forma que, caso o usuário queira voltar a visualizar as obras, basta mover o mouse para a área fora do conteúdo, onde o mesmo é ocultado de forma sutil. A organização das categorias de projetos foi discutida com a equipe do escritório, que nos forneceu um diagrama de tipos de obras.

O website possui ainda a opção de visualização em tela cheia, cadastro para newsletter e uma seção para que o público acompanhe os novos projetos e novidades em andamento.”

Sobre as curiosidades envolvidas no percurso do trabalho, eles ressaltam o cuidado na execução da parte técnica. “Na elaboração das animações, foi preciso identificar os melhores enquadramentos de cada imagem, para que o desenho ganhasse um maior realce, e assim o efeito de transição revelasse a obra, valorizando-a cada vez mais. Foi preciso um detalhado trabalho de otimização de arquivos, fazendo uso de blending modes para que as animações não deixassem o site pesado e não fossem utilizados canais alpha nos arquivos flv’s.”

14 :: Webdesign

Audrey Dining Club

Sorveteria Fri-Sabor

Tecnologias: After Effects + Blender + Flash AS3 +

Tecnologias: After Effects + Blender + Flash AS3 +

Photoshop + PHP + XML

Photoshop + PHP + XML

www.audreydiningclub.com.br

www.frisabor.com.br

A satisfação pelo bom trabalho realizado no website institucional do arquiteto Humberto Zirpoli fez com que o próprio cliente indicasse a Caju para desenvolver a nova cara do site da boate Audrey.

Neste projeto, o objetivo principal foi apresentar ao usuário a experiência do novo ambiente de luz e som do estabelecimento. “Dessa forma, fizemos com que o visitante do site tivesse a possibilidade de personalizá-lo: ele pode controlar a iluminação e as cores do ambiente, bem como selecionar qual background será controlado”, destaca Abelardo Santana.

Para que toda essa dinâmica pudesse acontecer da maneira que foi planejada, alguns elementos receberam atenção especial na composição visual do site. “O posicionamento de câmera, a iluminação dos painéis de led e dos neon’s da fachada ganharam destaque, valorizando os demais elementos da interface. Os flyers de programação também estão em destaque e podem ser ampliados e detalhados. O site dispõe de uma playlist com músicas que tocam na boate, fazendo com que o usuário sinta-se na casa. É possível ainda conferir fotos da boate, o cardápio, assinar a newsletter e ficar por dentro da programação”, descreve Aloysio Chagas.

Além disso, dentro do processo de imersão do usuário pelo site, como destaca Guilherme Leite, foram utilizados recursos de modelagem em 3D. “Nossa equipe aplicou a ousada ideia de reproduzir nos mínimos detalhes a casa em 3D. Foi feito um acompanhamento com a equipe técnica de iluminação, com o arquiteto Humberto Zirpoli, com a direção da casa e com os DJ’s que tocam na boate.”

A combinação de um portfólio com trabalhos de qualidade e a ousadia na apresentação de ideias foram os fatores fundamentais para que a agência fosse escolhida para criar o ambiente on-line desta tradicional sorveteria de Recife.

O mote desenvolvido neste trabalho foi a criação de uma praia virtual ambientada com pinguins. “A partir de várias referências, procuramos estudar o movimento de pinguins.

Com a ideia de ‘brincar’ com os personagens do website, foi preciso criar movimentos de jogo de frescobol de pinguins, ‘tchauzinho’ num balão e ainda um pinguim escutando música no seu microsystem”, explica Guilherme Leite.

Outro ponto interessante foi que a identidade visual da sorveteria, que possui uma paleta de cores bem variada, acabou contribuindo para o bom andamento do projeto.

“Isso foi levado em consideração na criação dos elementos do website. Além disso, as animações avançadas de tecido, dos elementos do cenário e da água precisaram sofrer um processo de otimização de certa forma complexo, com vários testes para se alcançar um tamanho aceitável para web”, conta Lucio Cavalcanti.

Além do processo de animação dos elementos do site, os criativos da agência procuraram destacar também os produtos oferecidos pela sorveteria. “No intuito de valorizar os picolés e despertar o desejo do consumo, os produtos são exibidos em tela cheia, descrevendo toda a sua informação nutricional. O website possui ainda uma seção para mostrar os eventos patrocinados pela empresa e outra para mostrar a localização das lojas e outros locais onde os produtos são comercializados”, diz Abelardo Santana.

portfólio agência - Caju :: 15

Absolute Escritórios Inteligentes Tecnologias: After Effects + Blender + Flash AS3 + Photoshop + PHP + XML www.absolutenet.com.br

Em mais um projeto conquistado através do bom relacionamento da Caju com seus clientes e parceiros, o desafio desta vez envolvia a concepção do site institucional da Absolute Escritório Inteligentes, especializada em soluções de ambientação de escritórios, residências e home-office.

“A adaptabilidade e a tecnologia dos produtos da empresa já são exibidas na página inicial do website. Com o objetivo de destacar produtos e portfólio do cliente, as imagens ganharam uma atenção especial neste projeto, sendo as fotos o ponto mais importante do website. Além disso, para demonstrar todos os movimentos possíveis de serem aplicados nas engrenagens, reproduzimos em 3D a principal cadeira da Absolute. O uso de colunas verticais sendo exibidas de forma hierárquica favorece a usabilidade e o posicionamento do usuário no website”, afirma Guilherme Leite.

Falando em usabilidade, esta foi uma das principais preocupações durante a etapa de desenvolvimento. “Devido à grande quantidade de imagens e produtos, realizamos vários testes de usabilidade e uma boa organização de XML’s integrados com o Flash. E, com o intuito de favorecer a usabilidade e ao mesmo tempo deixar a navegação atraente, usamos conceitos de interfaces ricas, como uso de animação dos elementos, transformação da barra de preloader no menu principal, submenu que se abre integrado com o principal, tudo para dar uma continuidade e fluidez na navegação”, explica Lúcio Cavalcanti.

Outro ponto importante foi o tipo de pesquisa feito para a concepção gráfica das interfaces. “Para simular o escritório em 3D exibido na tela principal, foi preciso realizar um levantamento num dos clientes da Absolute.

Foram estudadas divisórias retráteis, persianas, pisos, móveis, cadeiras e seus movimentos. Também foi necessário um bom planejamento para a organização de toda a linha de produtos que a Absolute oferece”, diz Aloysio Chagas.

16 :: Webdesign

Contato: igor@igorcardoso.com Site: www.igorcardoso.com

CRIAÇÃO MOVIDA POR CORES SATURADAS E FORMAS GEOMÉTRICAS Descobrir a vocação profissional é o primeiro passo para se definir os rumos de uma carreira bem-sucedida. Na vida de Igor Cardoso, esta situação começou a despontar logo no início de sua adolescência, quando apareceram os primeiros indícios que o levariam a escolher o design como profissão.

“O interesse surgiu quando eu tinha por volta de 13/ 14 anos, quando comecei a reparar nas peças de divulgação de desenhos animados. A partir daí, comecei a fazer alguns experimentos no Photoshop. A oportunidade ocorreu quando tinha 17 anos e fazia trabalhos técnicos de manipulação de imagem no Photoshop para a multinacional Bowne Global Solutions. Neste mesmo período estava para me decidir no curso que iria fazer na faculdade (publicidade); mas depois, orientado por um amigo, optei por Desenho Industrial e me formei ano passado.”

Levando-se em consideração as experiências já vividas por Igor, podemos dizer que tal escolha parece ter sido acertada. Além disso, a vontade em buscar novos desafios vem garantindo a realização de uma boa quantidade de projetos.

“Sempre trabalhei como frila, mesmo estando nas empresas. Porém, como tinha que dividir o tempo entre empresa, faculdade e frila, minha demanda para frila era bem pequena. A quantidade começou a aumentar quando estava próximo de me formar. Como havia trabalhado por seis meses na Cherryone, uma agência de webdesign em Chicago, com a minha volta, comecei a receber uma alta demanda por frila deles. Desde então, tudo tem sido dessa forma. Se tivesse que dividir num percentual de meus trabalhos de frila para o Brasil e fora, creio que seriam 80% internacionais e 20% nacionais.”

Boa parte do sucesso em sua caminhada pode ser creditada a combinação de elementos e referências que ele procura inserir em seus trabalhos. “Sou apaixonado por tipografia e cores saturadas, contrastantes, formas geométricas e listras. Acredito que esses elementos são os principais atuantes nos meus trabalhos, tanto de web quanto impressos. Sou um grande apreciador de Kandinsky, do geometrismo abstrato e de seu método de uso contrastante das cores no Cubismo. Busco ainda muitas referências em desfiles de moda, que particularmente me agradam muito, como a marca Neon e o estilista Alexandre Herchcovitch, que também se caracteriza por seu intenso geometrismo.”

Para quem pensa em investir na carreira solo, Igor ressalta que é preciso se planejar para conviver com um segmento de mercado que apresenta altos e baixos. “Sem dúvidas, o grande desafio que preocupa um freelancer é o próximo mês, porque como se trabalha sem nenhum vínculo, vivemos sem esta garantia. Então, é fundamental que se trabalhe de forma organizada e planejada, pois da mesma forma que possam vir meses de alta demanda, temos de nos acostumar as épocas de menor demanda e procurar alternativas para contornar esta situação.”

portfólio freelancer - Igor Cardoso :: 17

Footlocker Unlocked Tecnologias: Flash + HTML + XML http://unlocked.footlocker.com

Black Music Month Tecnologia: Flash http://unlocked.footlocker.com/blackmusicmonth/

Da série de trabalhos internacionais realizados por Igor, um dos destaques em seu portfólio está presente na criação do website para Footlocker, cujo objetivo era funcionar como um canal de venda/divulgação dos últimos lançamentos dos O bom trabalho desenvolvido durante os seis meses de experiência na agência de webdesign em Chicago ainda

sneakers de marcas como Nike, Adidas, Puma e New Balance.

“A cultura sneaker já é uma realidade mundial há mais

trazem bons frutos para a carreira de Igor. Este projeto,

de duas décadas. Em países asiáticos, boa parte da Europa

por exemplo, acabou sendo indicação de um antigo

e nos Estados Unidos os consumidores querem mais do que

companheiro de trabalho.

um tênis bonito ou funcional. O calçado passou a ter status

Desta vez, o desafio proposto era criar um hotsite

de plataforma artística e a carregar simbolismos múltiplos

comemorativo voltado para o público jovem e envolvido com

desde que teve sua imagem ligada a astros de rock, do

a cultura sneaker, que mostrasse as variações e as mudanças

hip hop, dos esportes ou do que já foi um dia chamado de

ocorridas na música negra norte-americana, fazendo uma

tribos urbanas”, explica Igor.

linha de tempo dos anos 60 até 2006.

Segundo Igor, uma das principais buscas do processo

Segundo ele, o grande desafio deste projeto foi trabalhar uma identidade que não prejudicasse o produto a

criativo foi encontrar uma espécie de “ponte” que ligasse

ser vendido. “Assim, busquei trabalhar com cores neutras

artistas clássicos com os da atualidade. “Pensando nisso,

junto de uma cor de impacto, o magenta. Procurei utilizar

procurei trabalhar uma linguagem bem moderna, utilizando

uma linguagem bem streetwear e brincar com texturas de

uma combinação de tipografia bem fina (21st) com uma mais

tintas em splash. Como já utilizava elementos de apoio

grossa com bastante personalidade, a Soho. Como o que

fortes, para não pesar na mão, trabalhei com uma tipografia

precisou ser retratado foi a história da música negra, brinquei

bem leve, porém não menos moderna por isso.”

com uma escala de tempo junto com as batidas da música,

Além da versão para desktop, o website também foi

que foi animada através de Flash, fazendo a passagem dos

projetado para ser visualizado em dispositivos móveis, como

anos 60, representado por James Brown, chegando até as

iPhone. “Tive um prazo bem curto para a produção das telas.

meninas do Destiny’s Child (nota da redação: dentre suas

Inclusive, os flashes foram produzidos antes dos layouts

integrantes, a cantora Beyoncé alcançou grande sucesso em

estáticos estarem finalizados, devido ao curto prazo para

sua carreira solo), em 2006.”

realização do trabalho.”

18 :: Webdesign

Nico Mezquita Contato: nicomezca@gmail.com

Site: www.flickr.com/nicolasmezquita Ilustrador argentino, vive atualmente no Rio de Janeiro. Estudou Publicidade Criativa na Associação Argentina de Agências de Publicidade e Belas Artes no Instituto Universitário de Belas Artes, em Buenos Aires. Dedica-se à ilustração infantil, havendo colaborado com ilustrações para EDEBE, Puerto de Palos, Ministério da Educação da República Argentina, Aique, Larousse, Long Seller, entre outras.

Wd :: Como define seu estilo?

Nico :: Não sei se posso dizer que tenho um estilo definido. O estilo é a forma que eu, você, ele, todos têm de comunicar algo. Essa forma se transforma, cresce e se desenvolve com cada um de nós na medida em que nos desenvolvemos. Por isso, é difícil definir uma só forma de comunicar, um só estilo. Creio que é a busca desta forma de comunicação autêntica que determina a identidade do artista.

Wd :: Onde você busca referências para o seu trabalho?

Nico :: Nos meus colegas, no cotidiano, no trabalho com outros artistas, na conversa no bar, no filme de ontem, na minha mulher, nas crianças, em todos lugares onde eu possa chegar e em todas as coisas que eu possa viver.

Observação: a imagem que ilustra o fundo deste portfólio foi criada por Nico em 2009, chama-se “O argonauta” e foi produzida através do uso de tinta nanquim, bico de pena e Photoshop.

portfólio ilustrador - Nico Mezquita :: 19

Um jardim para Sofia (2008) Projeto Pessoal Técnicas: Tinta nanquim + bico de pena + Photoshop

O cachorro azul (2007) Projeto Pessoal Técnicas: Tintas + aquarela + colagem digital + Photoshop

20 :: Webdesign

Jorge Luiz Campos

Nasceu em Guaíra, no interior de São Paulo.

Ex-administrador de empresas, foi aluno ouvinte do curso de filosofia da UNESP de Marília. Encontrou-se profissionalmente no que considerava seu hobby favorito: a fotografia.

Contato: jorge.campos@onsdesign.com.br Site: http://campos.viewbook.com

Observação: “Eu não consigo nomear fotografias, me sinto muito desconfortável... Talvez pelo fato das imagens mudarem de sentido de acordo com o contexto.”

Lente Digital - Jorge Luiz Campos :: 21

Wd :: Ângulo, iluminação, textura, movimento, corte... O que mais se destaca no seu trabalho?

Jorge :: Nunca parei para pensar sobre um aspecto que se destaca no meu trabalho. Até hoje procurei dominar o maior número de técnicas possíveis, tirar o máximo do equipamento por mais simples e limitado que seja, explorar as possibilidades. Talvez a sensibilidade seja uma característica que se manifesta com mais veemência no meu trabalho.

Fotografia B (2008) Câmera: Canon EOS 40D Lente: 50mm

Fotografia A (2008) Câmera: Canon EOS 40D Lente: 55-250mm

22 :: Webdesign

Fabio Haag Contato: fabio@daltonmaag.com Site: www.daltonmaag.com

Typedesigner e diretor da Dalton Maag na América do Sul. A Dalton Maag projeta fontes de varejo para compra on-line e fontes exclusivas para clientes como Toyota, Puma, BMW e Vodafone, através de estúdios em Londres e no Brasil.

Wd :: Como surgiu a ideia de criar esta fonte?

Fabio :: Ela foi iniciada há sete anos, quando eu não possuía nenhum domínio de typedesign. A ideia surgiu durante um workshop com Bruno Maag - hoje meu chefe e sócio no Brasil. Os traços curvos e orgânicos vieram espontaneamente nos esboços, e foi preciso muito rigor para controlá-los dentro da estrutura de uma fonte tradicional - que não visa simplesmente se destacar em títulos, mas também proporcionar uma confortável leitura em textos.

Wd :: De que maneira a tipografia influencia na transmissão da mensagem?

Fabio :: Da mesma maneira como o desenho de um símbolo expressa conceitos, ou como as cores despertam emoções, as formas das letras também transmitem sensações. As fontes definem o tom de voz da mensagem: sério, informal, alegre, frio, confiante, romântico, engraçado, épico etc. Por isso, as fontes devem ser escolhidas com muita cautela, pois elas participam do processo de construção de marca. Elas devem estar em sintonia com os demais elementos - logotipo, símbolo, cores - para fortalecer a imagem de marca.

Fontes de inspiração - Fabio Haag :: 23

24 :: Webdesign

SEO

NO DESIGN DE INTERFACES Os mecanismos de busca têm sido as principais vias de navegação quando o usuário está em busca de determinada informação. Dentro desta dinâmica, trabalhar os conceitos e as técnicas para aperfeiçoar o posicionamento de sites nestes ambientes passou a ser uma prática fundamental no processo de trabalho de agências digitais e profissionais de web. À primeira vista, esta parece ser uma tarefa mais voltada para os profissionais da área de tecnologia.

No entanto, buscar um mínino de conhecimento sobre SEO (Search Engine Optimization) pode contribuir também para a construção de interfaces simples e funcionais, além de ajudar na divulgação de portfólios.

Para sabermos mais detalhes de como esta prática vai fazer parte do cotidiano do designer, confira a entrevista que fizemos com o consultor Paulo Rodrigo Teixeira, professor de pós-graduação nas cadeiras de marketing de busca e web analytics e autor do livro “SEO, otimização de sites: Marketing de Busca como estratégia para empresas” (http://livroseo.com).

Entrevista - SEO :: 25

Wd :: Da preocupação com as meta tags

o nível seria comparável às versões iniciais do Altavista.

passando pela elaboração de palavras-chave e o uso

Seria impossível para eles, com tal ferramenta, competir

do Social Media Marketing, quais foram as principais

com o Google ou o Yahoo!.

transformações que o segmento de marketing de busca apresentou nos últimos cinco anos?

Paulo :: Nos últimos cinco anos, vale citar a

Já o Bing tem apresentado resultados muito bons, principalmente em inglês. Se ele melhorar ainda mais, pode ser que ele consiga um bom espaço neste mercado

explosão da web 2.0, ou se preferirem, o social

monopolizado pelo Google. Para resumir a pergunta,

media, em que pessoas sem conhecimento de

devemos testar sempre.

tecnologia podiam criar blogs e produzir conteúdo de forma ágil e informal, facilitando links e tornando

Wd :: Você mantém um blog que é uma das

a web mais relevante ainda, sem contar exemplos

principais referências sobre marketing de busca no

como Wikipédia, delicious e YouTube.

Brasil. Um de seus textos mais emblemáticos ressalta

Outro impacto foi a popularização do marketing de

que “SEO é pensar mais no usuário do que nos sites

busca, que aumentou o conhecimento sobre o assunto

de busca” (http://migre.me/6WVj). Dessa forma,

e consequentemente a competitividade para ele.

quais seriam os elementos essenciais para se alcançar

O Brasil, em específico, tem seu momento de popularização bem recente. Uma questão que não poderia deixar de citar foi a monopolização do Google e o surgimento dos “Google Killers”.

uma otimização adequada e eficaz de um site para mecanismos de busca?

Paulo :: Focando no usuário, você já resolve muita coisa. Para exemplificar, se você cria uma página com o pensamento: se um usuário precisa do meu produto,

Wd :: O Bing é o mais novo mecanismo de busca

o que ele procuraria em uma busca para atender a

criado pela internet e surge como uma pretensão da

necessidade dele pelo produto? Se o conteúdo da sua

Microsoft em criar um serviço que possa concorrer

página focar nisto, você já deu um grande passo.

com o Google neste mercado. No cotidiano do SEO,

Outro ponto, pensando no usuário, é o título da

quando surge um novo serviço na área, como os

página. Se você deixa sem, como um usuário vai encontrar

profissionais devem encarar tais novidades?

a sua página depois se tiver guardado nos favoritos? Será

Paulo :: O primeiro passo é testar. Só de usar

mais difícil para o usuário e ruim também para SEO.

uma ferramenta de busca nova e ver os resultados já é possível, pela qualidade das respostas, saber se a ferramenta é boa ou não.

Os últimos “Google Killers”, como Wikia e Cuil, demonstravam, pelos resultados apresentados, que

Google Killers Termo utilizado para apontar os serviços criados que tentaram concorrer com o Google em termos de mecanismos de busca.

No site Technologizer (http://migre.me/6WZ6), é possível conferir uma história resumida sobre estes serviços. Já no blog Startupbin foi publicada uma lista dos “mecanismos de busca do futuro”: http://migre.me/6WZj

Wd :: No artigo “Top Five SEO Design Mistakes” (http://migre.me/6k6X), a especialista Shari Thurow descreve os cincos principais erros de design envolvendo o SEO. Dentre eles, Shari

26 :: Webdesign

destaca principalmente o fato de se trabalhar

Outra razão para o webdesigner entender SEO

primeiramente o design do ambiente e só depois

é que até para conseguir um frila, por exemplo, de

pensar na aplicação dos conceitos de SEO. Você

quem procura no Google um serviço de webdesign na

concorda que esta opinião?

sua região, ele poderá ajudar a encontrá-lo! Qualquer

Paulo :: De forma resumida, sim. SEO é parte do

site que tenha um produto ou serviço precisa estar

projeto. Se possível, antes mesmo da criação, todos

otimizado para buscas. Se o SEO for deixado de lado,

os profissionais têm que pensar em como o SEO pode

existe o risco de o site ficar invisível para todos que

ajudar para atender aos objetivos do projeto.

buscarem pelos produtos do site.

Wd :: Recentemente, o site WebDesignerWall

Wd :: Neste mesmo site, é possível encontrar

realizou uma pesquisa perguntando se

também um interessante guia SEO para designers

webdesigners achavam o SEO uma atividade

(http://migre.me/6k5k), onde são apontados

necessária em seu universo profissional (http://

os nove erros mais comuns cometidos por

migre.me/6k3Z). A maioria, cerca de 90%, afirmou

webdesigners na criação de sites. No topo desta

que sim. Pela sua experiência, até que ponto os

lista aparecem as telas de entrada (splash pages),

designers devem se especializar neste assunto?

fator ainda muito comum pela web. De que

E como o conhecimento nesta área pode ajudar a

maneira esta prática pode prejudicar o processo de

melhorar efetivamente a experiência das interfaces

otimização de um projeto digital?

desenvolvidas por estes profissionais?

Paulo :: SEO deve fazer parte de praticamente

Paulo :: Pensando no usuário, a splash page é um passo a mais para que o visitante consiga chegar

todo projeto de web. Não só o webdesigner como o

ao tão esperado conteúdo. Só aí você já criou uma

programador, o atendimento, o gerente de projeto, todos

barreira para o usuário. Para SEO, a splash page é

precisam entender o mínimo de SEO e estarem envolvidos

como um cotovelo para a indexação, podendo - em

no projeto para saber a participação de cada um.

alguns casos - impedir que o Google encontre as

O programador precisa gerar o código enxuto e com os textos em HTML para que o robô possa

páginas internas do site.

Além disso, o problema da profundidade pode

indexar o conteúdo. Ele precisa entender também os

afetar o PageRank das páginas internas que, devido ao

HTTPs status code para atribuir os valores corretos no

“caminho maior” para chegar até o conteúdo, acaba

caso de uma mudança.

perdendo pontos por isto.

O atendimento precisa ter claramente qual a necessidade do cliente para ajudar a estabelecer as

Wd :: A criação de menus em Flash e a

palavras-chave do negócio. E o webdesigner? Sem o

publicação de conteúdo em imagens e/ou Flash

entendimento da importância do SEO, ele não poderia

são outras falhas muito comuns apontados pelo

decidir em que projetos ele deveria optar por um site

site WebDesignerWall. Na prática, quais são

todo em Flash e outro em HTML.

as desvantagens na aplicação destas soluções

28 :: Webdesign

criativas? E quais são as alternativas para evitar que este problema possa vir a acontecer?

sIFR

Paulo :: Voltando ao usuário: todos os navegadores

“Sigla que significa Scalable Inman Flash Replacement. É uma

na internet têm o plugin do Flash? E na versão que você

técnica que nos permite substituir elementos de texto por

está usando? O iPhone nasceu sem suporte a Flash. A

equivalentes em Flash, dando-nos a possibilidade de utilizar

resposta simples para isso é ter o menu duplicado no

qualquer fonte, sem que seja necessário que o usuário as tenha

site em HTML. Só de agir assim você já vai melhorar

instalada em sua máquina.”

sensivelmente os resultados.

O artigo cita que os links de Flash não são seguidos, mas, na verdade, atualmente o robô do Google consegue rastrear os links tanto do Flash como até de Javascript.

Outra solução seria usar a técnica de sIFR, que gera um código HTML para quando o navegador da pessoa não tiver o Flash disponível. Existem várias soluções.

Basta escolher a que melhor se encaixa para você.

Wd :: Ainda sobre o Flash, na edição de agosto, falamos sobre a sua aplicação na construção de interfaces ricas, sem esquecer a importância da aplicação de conceitos de Acessibilidade, Usabilidade e SEO. Nos últimos anos, a Adobe, fabricante do software, tem se aproximado do Google e do Yahoo! para melhorar a questão da indexação de sites construídos em Flash. Quais recomendações você faria para que as técnicas de SEO possam ser aplicadas de maneira adequada na criação de projetos digitais e interativos baseados na ferramenta Flash?

Paulo :: A maneira que o Flash é entendido pelos sites de busca tem melhorado muito recentemente.

Tanto o Google como a Adobe tem investido nisso. Vale citar ainda o trabalho da Microsoft se esforçando para que o Silverlight seja “amigo do SEO”. Mas o Flash ainda tem um caminho para chegar ao mesmo “entendimento” que os robôs têm do HTML. O Flash é uma excelente ferramenta. Ela permite uma interatividade única e proporcionou uma mudança na maneira que fazemos web que o HTML precisaria de muito feijão com arroz para alcançar.

O ponto é que, em alguns momentos, precisamos fazer escolhas. Se o objetivo do site é focar em interatividade e não se preocupar em vender diretamente, o projeto pode ser feito em Full Flash, bastando se preocupar com alguns elementos, como título, meta description e links. Só com isso você já teria um resultado relativamente satisfatório. Outras alternativas são criar versões HTML para as páginas em Flash ou utilizar a técnica de sIFR.

Fonte: Blog Erick Souza (http://migre.me/6X0d)

30 :: Webdesign

Wd :: Em relação ao mercado brasileiro de internet,

estes ambientes, quais são os cuidados, em termos de

é possível apontar os erros mais comuns cometidos

otimização, que o designer e as agências digitais devem

pelos webdesigners nacionais?

ter na hora de conceber seus sites? E quais benefícios

Paulo :: Para não repetir os já citados pelos artigos apontados nesta entrevista, como esquecer o título da

eles vão passar a usufruir ao adotar tais técnicas?

Paulo :: Pense pelo menos em ter uma home em HTML

página, vale acrescentar o uso errado de SEO. O que

com a descrição do que faz e a região. Com isso já fica mais

é comum acontecer é um entendimento errado desta

fácil ser encontrado. Outra ideia é ter uma página otimizada

área. A pessoa procura pelo nome do domínio do site,

para cada um dos clientes atendidos. Imagine alguém

verifica que está em primeiro nas buscas e acha que já

procurar no Google por uma empresa e encontrar você

está fazendo SEO.

entre os resultados? Se você fez um bom trabalho, pode até

Na verdade, é necessário todo um estudo das palavras-chave relevantes para cada produto para depois

conseguir outros. A maior vantagem é a exposição adequada e consequentes novos trabalhos obtidos.

focar na que vai dar mais retorno para o usuário. Outro problema é achar que a densidade de palavra-chave é

Wd :: Falando ainda sobre sites-portfólios, na

super importante e sair “entupindo” da palavra-chave que

atualização do ambiente, é muito comum os designers

quer ranquear. Caso isso seja feito, você acaba correndo

criarem diretórios de versões e direcionarem seus

o risco de ser entendido como spam e ser punido pelos

domínios para estes endereços, como destaca o artigo

mecanismos de busca.

“Otimização de sites para designers e desenvolvedores” (http://migre.me/6kb1). Como esta prática pode

Wd :: Casa de ferreiro, espeto de pau! Além das observações que podem ajudar a evoluir o trabalho

prejudicar o processo de otimização do site?

Paulo :: Um problema seria a duplicidade de

cotidiano dos webdesigners, o SEO também se

conteúdo. Se as versões trocam de conteúdo, ok, mas

torna uma ferramenta fundamental no processo de

caso não, o Google pode entender que o site possui

concepção e divulgação de portfólios on-line. Para

conteúdo duplicado e ele decidirá qual é o conteúdo mais importante a ser exibido.

Claro que o Google sabe trabalhar bem com conteúdo duplicado em um mesmo site, mas quando possível é melhor evitar. Outro problema é o redirecionamento mal feito. O Google não entende redirecionamentos feitos com meta redirect. Se for feito desta maneira, o PageRank não seria distribuído da maneira correta.

Wd :: Em relação às ferramentas de trabalho envolvendo SEO, quais você indicaria como úteis para o cotidiano do webdesigner?

“SE POSSÍVEL, ANTES MESMO DA CRIAÇÃO, TODOS OS PROFISSIONAIS TÊM QUE PENSAR EM COMO O SEO PODE AJUDAR PARA ATENDER AOS OBJETIVOS DO PROJETO”

capa - menos ĂŠ mais :: 31

32 :: Webdesign

Paulo :: Das que conheço, recomendo o “Google Trends” (www.google.com/trends), o “Google Insight for Search” (www.google.com/insights/search/), o “Google

DICAS DE LEITURA

Suggestion Keyword” (http://migre.me/6WY2) e o “Site Explorer” (http://siteexplorer.search.yahoo.com/), do Yahoo!. Aproveitando a oportunidade, sugiro dar uma

Para quem busca por bibliografia específica nesta área, Paulo Teixeira diz que, para fugir do óbvio dos

olhada em um projeto que divulgo em primeira mão: o

livros de SEO, a dica é expandir a leitura para obras

www.ferramentasseo.com.br.

que vão ajudar a formar uma visão de inovação e foco no usuário. Confira a lista recomendada pelo

Wd :: Em seu blog, no post “A evolução do

especialista:

SEO: SEO não está morto, mas se transformando” (http://migre.me/6k7G), você aponta os possíveis

- Information Architecture for World Wide Web

caminhos e desafios no trabalho envolvendo esta área,

Autores: Louis Rosenfeld e Peter Morville

principalmente quando observamos o crescimento

http://migre.me/6WR0

da publicação e do interesse em novos elementos de interatividade, como mapas, vídeos, fotos etc. Pensando

- Marketing de Permissão

nisso, é possível prever os futuros cenários e caminhos

Autor: Seth Godin

na prática do SEO?

www.sethgodin.com/permission/

Paulo :: Prever o futuro, em qualquer área, é complicado. Pode surgir uma maneira inovadora dos

- Não me faça pensar

sites serem indexados ou ranqueados que pode mudar

Autor: Steve Krug

a regra do jogo. Mesmo assim existe uma tendência de

www.sensible.com

buscas por celular, busca geográfica e buscas verticais. A segmentação é o caminho natural para as buscas. Outro ponto que há anos todos sonham é a busca com a web semântica. Mas para que isso venha a acontecer, ainda falta muito chão.

- Usabilidade: 50 websites desconstruídos Autor: Jakob Nielsen http://migre.me/6WPO

- A Vaca Roxa Autor: Seth Godin www.sethgodin.com/purple/

“PENSE PELO MENOS EM TER UMA HOME EM HTML COM A DESCRIÇÃO DO QUE FAZ E A REGIÃO”

34 :: Webdesign

Realidade Aumentada

Projetando experiências on-line em três dimensões Nos últimos meses, os holofotes da grande mídia

de internet, caracterizado pela rapidez no surgimento de

voltaram a iluminar os caminhos do cantor e compositor

novidades e pelas amplas possibilidades de utilização de

Belchior. O motivo seria o mistério envolvendo um

produtos e serviços oferecidos neste ambiente.

suposto desaparecimento, que já completariam dois anos sem notícias sobre o seu paradeiro.

Depois de toda comoção, ele acabou sendo

Afinal, como pontuam outros versos dessa mesma canção, de tempos em tempos, “Você me pergunta pela minha paixão / Digo que estou encantado / Com uma nova

encontrado e revelou os motivos para sua retirada

invenção”. A última delas parece envolver a aplicação do

estratégica de cena. Apesar de tal busca desviar um

conceito de Realidade Aumentada (RA) em projetos web.

pouco da atenção sobre a importância das composições

“Por definição, Realidade Aumentada é um ambiente

do artista para o universo da música popular brasileira,

misto onde elementos virtuais são projetados ou

Belchior deve ser lembrado também pelas interessantes

integrados no mundo real. Desde que os mundos da

reflexões contidas em sua obra.

comunicação e da computação se aproximaram, essa

Uma das mais famosas aparece na letra da música

linha de pesquisa tem recebido grande atenção das

“Como os nossos pais”. Por lá, alguns versos lembram

agências e produtores de soluções interativas”, afirma

que “É você que ama o passado / E que não vê /

Raphael Vasconcellos, diretor executivo de criação da

Que o novo sempre vem...”. E como vem! Que sejam

AgênciaClick (www.agenciaclick.com.br).

testemunhas os profissionais envolvidos com o mercado

“A principal característica de uma aplicação de

Realidade Aumentada :: 35

RA é a interação do ‘mundo virtual’ com o ‘mundo real’. Para isso, as aplicações geralmente utilizam câmeras de vídeo para capturar as imagens ‘reais’, que então são processadas pelo computador para identificar padrões conhecidos (os famosos ‘tags’, por exemplo). Após este processamento, o computador tem como inserir na cena dados, gráficos 3D, vídeos. Isso é feito de uma forma bem natural, como se os objetos virtuais realmente fizessem parte da cena real”, complementa Edgard Ortiz, diretor da Pixellabs (www.pixellabs.com.br).

Aperfeiçoando a experiência do usuário Mês após mês, os institutos de pesquisas vão constatando o tamanho do impacto que a internet vem trazendo para o cotidiano da sociedade contemporânea. Para se ter uma ideia, um dos mais recentes estudos do Ibope, com dados referentes a julho de 2009, revelou que, só no Brasil, “o período médio de uso da web continuou crescendo e atingiu as marcas de 71 horas e 30 minutos de tempo total, incluindo o uso de aplicativos on-line (messengers, VoIP, tocadores de música etc.), e de 48 horas e 26 minutos, considerando apenas navegação em páginas”.

Diante desse cenário, a Realidade Aumentada surge como uma ferramenta que pode ajudar a aperfeiçoar o período de experiência do usuário em ambientes web. “Projetos que usam o conceito de RA facilitam a interação dos consumidores, na medida em que as interfaces desaparecem e as pessoas podem realmente se sentir imersas em um ambiente interativo. O que vemos hoje é apenas o estágio inicial da aplicação deste conceito de interação, que vai se tornar ainda mais evoluído e transparente para os consumidores. Desta forma, mais do que o tempo de interação, a qualidade da interação vai aumentar”, argumenta Raphael.

Como exemplo deste cenário, Edgard aponta a construção de projetos que ampliam a experiência do usuário. “Imagine, por exemplo, um hotsite para lançamento de um novo modelo de celular. Com a RA, o novo celular poderia ser projetado na mão do usuário, permitindo a ele interagir com o aparelho de várias formas. E, é claro, que o usuário vai gastar mais tempo com este

36 :: Webdesign

tipo de interatividade. Sem falar na parte de entretenimento. Imagine os jogos de tabuleiro com personagens em 3D animados? Lembra-se daquele jogo de xadrez do filme Guerra nas Estrelas?”

Ou seja, como destacam Marlos Carmo e Saulo Medeiros, sócios e diretores de liderança e novos negócios da 5clicks (www.5clicks.com.br), este conceito vai ajudar, principalmente, na interação entre pessoas e também de pessoas com produtos, tornando o mundo virtual mais real.

“Da forma básica na qual vemos na internet hoje, podemos ter ‘nas mãos’ o produto que desejamos e quase sentir como ele é. Na prática, podemos girar em três dimensões, interagir com novas interfaces de entrada, eliminar o clique para navegação e simular estruturas orgânicas do corpo humano... Isto significa potencializar a experiência do usuário e o próprio produto/marca/serviço. Um exemplo bem prático, e que já está sendo usado aos montes e com sucesso, é no aspecto de possibilitar a provação de produtos. Uma loja virtual que vende roupas já consegue levar para o usuário a experiência de ir ao provador, experimentar a roupa e verificar se o modelito caiu bem, se fica do jeito que imaginou ou até mesmo se combina com seu novo sapato.”

Ressaltando que ainda estamos na fase inicial de experimentos desta tecnologia na web. “Dessa forma, já devemos começar a estudar seu próximo passo, em que ela deixa de ser apenas uma novidade para se tornar uma ferramenta complementar ou para melhorar nosso entretenimento. Livros, filmes, celulares, embalagens, quiosques e todo o tipo de saída digital poderão apresentar elementos de Realidade Aumentada. Um cinema, por exemplo.

Esses elementos digitais devem ser relevantes em nossa realidade, trazer informações extras, aprimorar a visualização das coisas etc.”, destaca Gustavo Alberti, CEO da EDGY (www.edgy.com.br).

Transformações no design de interfaces A ampliação dos modelos de interatividade que o usuário poderá usufruir com o uso da Realidade Aumentada na internet representa também transformações na maneira como o design de interfaces vai ser trabalhado.

Segundo Rafael Fittipaldi, diretor de criação da Cricket Design (www. cricketdesign.com.br), a grande mudança, em alguns casos, será a própria inexistência de uma interface visualmente identificável.

“Estamos em um plano onde o real se mistura com o digital quase que como em simbiose. Podemos interagir com os elementos diretamente, sem intermédio de botões, mouse, teclado. Virtualmente imersos neste novo mundo que possui novas regras, novas possibilidades. Os designers precisam ter este conceito em mente para produzir aplicações que integrem harmonicamente estes dois mundos, e livrar suas mentes do frame

38 :: Webdesign

bidimensional para uma interface que apresenta

Só que é muito mais difícil fazer o simples. Em

agora profundidade.”

RA, simplicidade se traduz em fatores como um

Outra questão a ser considerada é o fato de

menor tempo de carga (o famoso ‘loading’), o que

projetos com RA possibilitarem o reconhecimento

requer objetos 3D com geometria bem otimizada

de uma infinidade de elementos do outro lado

e vídeos com o fator correto de compressão

da interação. “O que era somente um ‘clique’ se

versus qualidade. Também é preciso de um

amplia em milhões de estímulos. Sabendo disto, os

reconhecimento de padrão mais preciso prevendo

designers de interfaces podem criar aplicações com

os diferentes tipos de câmeras e iluminação, de

reconhecimento de rostos, idade, ambientes, cores.

forma que os elementos não fiquem ‘pulando’

Tudo isso possibilita realizar o principal objetivo do

na tela intermitentemente e, claro, a facilidade

design: função. Na internet, o design de interfaces

de uso. Além disso, caprichar na criação do

era baseado no browser e na navegação por

conteúdo para causar o efeito ‘WOW’ no usuário

cliques, com a RA aplicada o design multiplica suas

é fundamental. Assim, a aplicação se torna viral e

possibilidades”, ressaltam Marlos e Saulo.

alavanca o sucesso da sua ação.”

“Com Realidade Aumentada, a forma,

Tudo isso para que o receio no uso da

a interação e a extensão do espaço digital

novidade não seja um obstáculo ao período

tornaram-se maior. Livros, jogos, carros,

de experiência. “Soluções de RA levam

mensagens, sinalização, aplicativos... É como se

esses conceitos de usabilidade ao extremo.

expandíssemos o espaço de comunicação junto

Simplicidade, facilidade e objetividade são as

do usuário. Portanto, novas formas surgem. A

características que precisam estar na raiz em

Realidade Aumentada já existe há muito tempo,

projetos deste porte. Afinal, tecnologia ainda

nos setores de engenharia, militar e polícia. O

assusta o consumidor. RA, para a maioria das

uso em comunicação é que está sendo explorado

pessoas, ainda é coisa de ficção científica, e

neste momento”, argumenta Gustavo.

se não for simples, o consumidor desiste de interagir”, alerta Raphael.

Não se esqueça da usabilidade!

Tornar objetivo, fácil, direto e simples a

Além destes aspectos, outra dica é ficar atento aos detalhes técnicos envolvidos para a

utilização e a manipulação das interfaces digitais são

sua aplicação. “Acho que a primeira questão é

elementos fundamentais para se alcançar o sucesso

em relação à estabilidade do elemento na tela.

na execução de um trabalho. Assim como em outros

Isso parte desde a configuração do hardware

projetos web, a aplicação do conceito de Realidade

do usuário ou do sistema envolvido ao

Aumentada também deverá seguir tais preceitos.

mapeamento e desenvolvimento de um símbolo

Diante disso, como destaca Edgard, a

correto, impressão em material adequado,

simplicidade será a palavra-chave para garantirmos

iluminação, câmera adequada etc. Estamos

a qualidade na produção. “Se você tiver de

ainda em fase embrionária de interfaces em

explicar para alguém como funciona a interface do

RA, mas creio que os princípios básicos de

seu projeto, é porque ele tem algum problema.

usabilidade se mantêm”, explica Gustavo.

40 :: Webdesign

Onde ela poderá ser útil e bem aplicada?

Um aspecto importante na avaliação sobre o uso

formação de uma equipe vai incluir os seguintes cargos: - Dupla de criação: “um diretor de arte e um redator,

desta tecnologia está presente em analisar a sua real

que serão os responsáveis por elaborar a forma e o conteúdo

contribuição para alcançarmos os objetivos de um projeto.

da peça. Ou seja, eles terão que trabalhar, com criatividade,

Por exemplo: segundo o blog Mormasso (http://tinyurl.

a melhor forma de apresentar o elemento, as possibilidades

com/ecomm-ra), a agência digital japonesa Zugara lançou

de interação, a visualização etc.”

um aplicativo, chamado Webcam Social Shopper, para que os usuários de lojas de comércio eletrônico possam ter uma experiência diferenciada na compra de vestuários. Já

- Designer digital: “com a capacidade de modelar e animar em 3D os elementos que irão compor a peça.”

- Programador AS 3.0: “no caso da utilização de solução

no Brasil, boa parte dos projetos nesta área está atrelada

baseada na plataforma Adobe Flash - a mais utilizada -, que

às campanhas de entretenimento digital.

tenha um bom conhecimento da biblioteca Papervision e

Pensando nisso, é possível apontar perfis de projetos onde a Realidade Aumentada poderá ser útil e bem

como integrá-la com o projeto.”

- Desenvolvedor web: “sua função será criar o

aplicada? “Além do uso no entretenimento, ela pode ser

ambiente que este Flash será apresentado, seja em uma

perfeita para demonstração de produtos em geral. Imagine

página simples ou totalmente ornamentada. Muitas

o uso para demonstrar o tamanho real de um aparelho

vezes executado pelo próprio programador AS com

celular, ou ainda como interagir com um produto. No

conhecimentos básicos em HTML.”

YouTube (http://migre.me/7bDH), é possível ver um ótimo

Em relação aos investimentos em hardware e software,

exemplo do serviço postal americano que usa a tecnologia

além de webcam para se testar as etapas do projeto, serão

para apresentar as opções das suas embalagens de envio

utilizados programas já comuns pelo mercado de internet.

de correspondência”, destaca Raphael.

“Cada plataforma requer um conjunto de softwares diferente.

“Ela hoje é uma febre que vem sendo bem utilizada para promover eventos, produtos e marcas. Este ‘modismo’ vai passar, mas a RA veio para ficar. Acredito muito nos telefones celulares como plataforma ideal para aplicações nesta área, pois os novos modelos têm boa capacidade de processamento e câmera integrada. Existem vários tipos de projetos que podem usufruir desta tecnologia, mas para mim o grande ‘boom’ virá com a indústria dos games. Também acredito em aplicações que agreguem conhecimento em tempo real, como, por exemplo, ao mirar um monumento com sua câmera, você recebe informações sobre sua história, fatos curiosos. Ou quando você está em um supermercado, ao mirar um produto na prateleira, você poderá receber informações sobre o preço em redes concorrentes”, exemplifica Edgard.

Equipe e equipamentos necessários Para quem ficou interessado em explorar os benefícios desta tecnologia, a boa notícia é que o perfil de profissionais necessários para a concepção de trabalhos nesta área é o mesmo requisitado para projetos digitais. Segundo Rafael, a

Para a web, o padrão tem sido o uso do Adobe Flash com a biblioteca FLARToolKit (http://migre.me/7cab) para o sistema

42 :: Webdesign

de reconhecimento de tags; e os engines Papervision (http://

lembrado e execrado por todos como um exemplo de #fail.

migre.me/7caB) ou Away3D (http://away3d.com/) para

Poucos, porém, lembram que até a web já levou bomba,

exibição do conteúdo. Também é possível comprar plug-ins de

lá pelo final dos anos 90. Para ficarmos num exemplo mais

outras empresas para criar uma aplicação web com conteúdo

recente, o Twitter demorou mais de ano para ser entendido

3D mais rico. No caso, cada plug-in tem sua metodologia e

pelo público e virar uma febre. Não podemos analisar uma

linguagem de programação”, explica Edgard.

tecnologia por si só sem considerarmos o contexto em que

“Tirando a webcam, a empresa não precisa de um

ela está inserida. O que considero que vai ser definitivo

hardware específico para os testes. Já na parte dos

é a interação com objetos virtuais através de câmeras

softwares, geralmente são utilizados Collada, Actionscript

ou de novos dispositivos. Hoje, o que acho de Realidade

3.0, FLARToolKit, Papervision, 3D Max e Maya”, completa

Aumentada? É como os efeitos especiais na década de 70.

Fernando Chamis, CEO da Webcore (www.webcore.com.br).

Na época, eles também não percebiam o quão tosco eram esses efeitos, porque o deslumbre de trocar um fundo real

Risco de se tornar um novo Second Life?

por um virtual, por exemplo, desligava o botão do senso

Quando falamos da aplicação de conceitos e

estético presentes em cada indivíduo. Quais são os caminhos

tecnologias que surgem pelo mercado de internet, o caso

possíveis? Ou a tecnologia se aprimora e se perpetua com

do Second Life parece ser o mais emblemático, pois ele

usos pertinentes. Ou é abandonada e vai para o ferro velho

sempre é apontado como um exemplo do desperdício

fazer companhia para Betamax, Second Life...”

e de certa soberba em relação à adoção das novidades apresentadas pela web nos últimos anos.

Trazendo este cenário para o atual momento vivido pela

“O uso pelo uso sempre vai acontecer, já que a adoção de toda novidade tecnológica é uma grande oportunidade de RP para as empresas. Uma coisa diferente é usar realmente

Realidade Aumentada, o questionamento é se não estamos

a tecnologia em todo o seu potencial criativo. O Second Life

experimentando mais um hype tecnológico. “Sempre que há

foi o extremo do uso pelo uso, para a maioria das empresas,

uma novidade existirão os adeptos, ainda mais atualmente onde

e esses casos sufocaram as iniciativas relevantes de algumas

a informação se espalha muito rapidamente e o reflexo disso

marcas por lá. O grande problema foi o esforço e a atenção

é que todas as empresas têm uma preocupação excessiva em

desproporcional para a audiência daquele ambiente. Não acho

sair na frente para se destacar no mercado. No caso da RA,

que isso possa acontecer com a RA”, finaliza Raphael.

acredito que tenha muito potencial pela versatilidade com que pode ser utilizada, porém ainda há o que estudar e avaliar para chegar numa conclusão: ela é uma ferramenta de potencial ou representa somente uma euforia momentânea? De toda forma, pela própria simplicidade no uso, se comparado ao Second Life e também a possibilidade de integração entre o off-line e o on-line, acredito que ela veio para ficar. Mesmo que com o uso um pouco mais restrito e mais integrado a um planejamento de toda a campanha”, diz Fernando.

Para Tiago Ritter, sócio-diretor da W3Haus (www.w3haus. com.br), o deslumbre é um sentimento comum quando entramos em contato com novas tecnologias pela primeira vez. “Mas o que torna uma tecnologia definitiva é o quanto ela nos agrega num segundo olhar. Hoje, o Second Life é

44 :: Webdesign

Etapas para criação e desenvolvimento Realidade Aumentada também já vem sendo assunto de destaque no site da Revista Webdesign. Por lá, além de conferir um post (http://migre.me/7cEH) com vídeos apresentando exemplos da utilização da RA por parte de agências digitais brasileiras, você poderá baixar o PDF da matéria “Uma realidade tridimensional e interativa de projetos web” (http:// migre.me/7cEv), que descreve as principais etapas envolvidas no desenvolvimento de projetos na área. Boa leitura!

Exemplos de uso da Realidade Aumentada Doritos Sweet Chili http://www.doritos.com.br/sweetchili/ “Uma forma de utilizar a RA em entretenimento, bem executada e diferente na época. Causou surpresa nos usuários por não saberem que monstrinho aparecia, além de disponibilizá-lo on-line e compartilhar com amigos.” (Gustavo Alberti)

GE | Plug Into the Smart Grid http://migre.me/7ct0 “Mostra como fazer uma boa RA sem plugin, apenas utilizando Flash. Simples e funcional!”

(Edgard Ortiz)

Star Trek Enterprise http://migre.me/7ctn “Exemplo com plug-in para lançamento do filme Star Trek. Além de ser bem legal, também sou fã da série!” (Edgard Ortiz)

capa - Realidade Aumentada :: 45

The Eye of Judgment http://migre.me/7csv “Game para o Playstation 3. Nele, o jogador utiliza a webcam do próprio console para jogar um jogo virtual de tabuleiro com cartas de verdade.” (Fernando Chamis)

Total Immersion http://www.t-immersion.com “É uma das melhores referências de empresas que desenvolvem projetos através da RA e tem uma boa conceituação desta ferramenta.”

(Fernando Chamis)

USPS https://www.prioritymail.com/simulator.asp “Serviço postal americano usa a tecnologia para apresentar as opções das suas embalagens de envio de correspondência.”

(Raphael Vasconcellos)

Virtual Mirror - Ray-Ban http://migre.me/7cru “Usa a Realidade Aumentada para criar uma experiência realista aos usuários que desejam experimentar os modelos de óculos disponíveis nas lojas.” (Rafael Fittipaldi)

46 :: Webdesign

Entre o martelo e a martelada,

o valor do design Trabalhar os argumentos que justifiquem os valores de produtos e serviços sempre foi (e continua sendo) um dos grandes desafios na relação entre empresas e clientes. Talvez a fábula “A Martelada” (http://migre.me/6WEv), publicada no blog Ronaud.com, sirva como uma boa descrição sobre este cenário.

Para quem não a conhece, ela fala resumidamente sobre problemas ocorridos no motor de um navio transportador de uma grande carga de ouro. Assim, a tripulação resolveu chamar um técnico para solucionar a questão. Por três dias ele tenta, sem sucesso, encontrar o defeito. Desesperados com tal situação, eles resolvem contratar o maior especialista em motores para verificar a situação. Em poucos minutos ele analisa o motor, dá uma singela e pontual martelada em uma das diversas válvulas existentes no sistema e o motor volta a funcionar.

No final, a empresa dona do navio questiona o especialista pelo alto preço cobrado pelo serviço (dez mil dólares) diante do curto tempo que ele dedicou ao problema. Segue a descrição da resposta, uma valiosa lição para quem passa por este tipo de situação: “Por dar uma martelada, US$1; Por saber onde bater o martelo US$9.999”. Ou seja, além do serviço em si, a empresa teve que pagar pela experiência e sabedoria acumuladas pelo especialista.

Trazendo esta realidade para o mundo digital, em tempos de discussão sobre as teorias do free, de Chris Anderson (http://www.thelongtail.com), e da crítica ao culto do amador, de Andrew Keen (http://andrewkeen.typepad.com , quais são os desafios para demonstrar ao cliente o valor do design e do processo criativo de um projeto web? Como você procura trabalhar esta questão em seu cotidiano profissional?

opinião - Valor do design :: 47

Luis Marcelo Mendes Diretor da Tecnopop www.tecnopop.com.br

“Todos que trabalham com projetos web sentem a maior inveja do feirante. No processo comercial dele, não há zonas cinzas. A couve-flor custa R$ 2,00. No começo da feira, as mais bonitas podem até valer R$ 3,00. Assim como, no final da feira, na xepa, ela também pode cair para R$ 1,00. E isso é algo que está na lógica da coisa. A que sobra no final da feira está sujeita a ser de menor qualidade e, portanto, mais barata. Às vezes, eu sonho que estou vendendo site a peso. Site fresco.

R$ 49,99 o quilo. ‘Mas esse site tá bom mesmo?’. Tá, senhora. O código tá madurinho, olha só que beleza. Olhas as classes. CSS de primeira, minha senhora. Tá saindo muito hoje.

A nossa relação com o feirante já se consolidou durante séculos.

A regra é clara. No caso de projetos web, não é assim. O valor do

design e do processo criativo somente será percebido pelos clientes quando eles compreenderem o que estão comprando de verdade.

O que acontece hoje, inevitavelmente, é que o cliente compra um site e o produtor web vende outro. Cada um tem uma imagem mental que está sendo vendida ou comprada que pode estar próxima ou não. Lá na frente, a gente vai ver no que dá. Porque nesse terreno, a regra não é clara.

Não há outro caminho senão a educação baseada no processo civilizatório paciente, mas inflexível. Michel Lent já nos falou muito sobre isso. Somente criatividade não põe a mesa. Cabe a nós apresentarmos propostas comerciais claras. Processos definidos.

Metodologias estabelecidas. Assim criamos cultura. Menos ‘u-hu’.

Mais foco e frieza. Enquanto isso, é ora porrada, ora persuasão e, em algumas situações, amarguras insolúveis. É provável que essa nova geração pós-web 2.0 saiba fazer briefings melhores, compreender melhor o processo, entender que nariz de porco não é tomada. Até porque, se isso não ocorrer, eu monto a minha barraca na feira. E tchau pra vocês!”

48 :: Webdesign

Tulio Paiva Diretor de criação digital da Giovanni+DRAFTFCB www.giovannidraftfcb.com.br

“Os clientes estão se profissionalizando digitalmente muito mais rápido do que podemos supor. Creio que o maior desafio não é exatamente demonstrar o valor do design e do processo criativo, mas sim diferenciar-se.

Tirar o seu design e o seu processo criativo da fila, mostrando que você e sua agência agregam mais valor do ponto de vista de marca e, em última análise, de resultados.

Alguns caminhos para fazer isso: portfólio, claro, carteira de clientes diversificada (credenciais são sempre importantes no mundo corporativo) e, principalmente, um racional sólido, uma argumentação concisa, consistente e bem-estruturada de por que aquela solução é a mais recomendável.

Para combater o ‘Culto do Amador’, do qual fala Andrew Keen, nada melhor do que fartas doses de… Profissionalismo.

Tire a recomendação do plano puramente estético e ofereça também parâmetros técnicos, balizas, experiências pregressas e uma análise profunda do problema de marketing do cliente.

Não discuta design, discuta comunicação.”

Pablo Caldas e Pedro Caldas Diretor de planejamento e diretor de criação, respectivamente, da Full Haus Comunicação www.fullhaus.com.br

“Por que devo contratar um designer? Todos nós já ouvimos esta pergunta. Mas sua formulação não tem nada a ver com a insensibilidade ou mesmo com a avareza do cliente. Ela é, isto sim, fruto da discrepância entre as escalas de valor de clientes e fornecedores. Em outras palavras: o cliente não entende por que seu sobrinho não poderia fazer o mesmo trabalho, e por um preço bem mais em conta.

Para tentar encontrar uma solução para este impasse, primeiro precisamos entender o que é valor. Quando determinado serviço traz um benefício que, para o cliente, é maior que o preço por ele pago, este serviço tem valor para aquele cliente específico.

Portanto, valor é um conceito subjetivo, dependendo principalmente das percepções do tomador de serviço.

Exatamente como na já famosa fábula do martelo, onde um mecânico cobra um valor astronômico por um reparo feito em segundos em um motor quebrado. O cliente, sem enxergar o valor da solitária martelada que resolveu seu problema, recebeu como resposta a composição do custo: 99% experiência, 1% trabalho.

Como fazer um cliente, cuja cabeça é normalmente orientada a custo, entender a importância do trabalho do designer em um mundo onde as ferramentas de produção estão amplamente disponíveis a custos que se aproximam do zero?

A resposta, novamente, passa pela percepção de valor. O designer, como especialista em sua área, é o mecânico

que desfere aquela martelada certeira, resolvendo o problema da maneira mais rápida e eficaz possível. Algo que o sobrinho do cliente dificilmente conseguiria.”

opinião - Valor do design :: 49

Adriana Menescal Sócia e diretora de conta da Sirius Interativa www.sirius.com.br

“Qual é o valor de uma boa ideia?

Há alguns anos, as empresas digitais eram percebidas como executoras e implementadoras de tecnologia.

Quase um contraponto com as agências de publicidade, que seriam as provedoras criativas.

Hoje, as agências digitais se posicionam cada vez mais como as naturais geradoras criativas das soluções digitais. Na verdade, a própria natureza colaborativa e interativa deste mercado coloca as agências digitais no centro dos processos criativos direcionados à web.

As agências devem integrar os requisitos de negócios do cliente com as necessidades de seus usuários em uma solução persuasiva, tecnologicamente sólida e que encante e induza a realização bem-sucedida de ações de interação e de conversão que possam ser constantemente monitoradas e retroalimentadas.

Logo, na web, o valor da boa ideia pode ser facilmente mensurado pelos seus

resultados objetivos e, portanto, reside no processo bem estruturado de sua construção a razão do seu sucesso.

As agências têm investido em processos colaborativos multidisciplinares e na capacitação de seus profissionais. E esse modelo tem um custo. Cabe às agências web transformarem esta percepção de custo em um investimento necessário para que seus clientes atinjam os resultados esperados.

E como a gente faz isso na Sirius? Apresentamos aos clientes o nosso processo de trabalho e os resultados que foram obtidos. E mostramos que estes apenas foram possíveis através do constante investimento em processos, metodologia e na qualificação de nossos profissionais.

Acredito, sobretudo, que a valoração deste processo criativo por parte do cliente passe pelo natural amadurecimento do mercado. E vejo como um importante marco o surgimento da Associação das Agências Digitais (ABRADi), que tem investido constantemente no aculturamento e diálogo com todos os agentes digitais.”

50 :: Webdesign

140 CARACTERES DE OPORTUNIDADES Ciente do crescimento das mídias de massa e de suas influências no cotidiano da sociedade moderna, o artista plástico e cineasta Andy Warhol produziu uma das frases mais famosas que define bem tais transformações: “No futuro, qualquer pessoa será famosa por 15 minutos”.

Porém, ele vivia em um mundo que ainda desconhecia a velocidade e o poder de comunicação proporcionados pela internet. Assim, em tempos de mídias sociais, que se tornaram a grande coqueluche nos últimos dois anos, podemos dizer que a passagem acima agora pode ser transformada em: “No futuro, qualquer pessoa será famosa por até 140 caracteres”.

Pelas características desta adaptação do célebre pensamento de Warhol, é fácil descobrir que o Twitter é atualmente o centro das atenções de usuários e empresas, que vão descobrindo novas formas de se comunicar e, principalmente, se relacionar digitalmente.

“O Twitter agrega um imediatismo novo para as marcas. E também uma informalidade. Ele é um ambiente de pessoas, as marcas são intrusas nele. Como todo ambiente fechado, ainda restrito a ‘iniciados’, é repleto de regras e etiquetas, que as marcas precisam ter humildade de entender e adotar”, afirma Roberto Cassano, diretor de estratégia da Agência Frog (www.agenciafrog.com.br).

Diante desse cenário, sua evolução promete trazer boas oportunidades para quem entender suas principais características e particularidades, criando assim novos tipos de serviços que possam ajudar as empresas a participarem de maneira eficaz das conversações geradas a partir deste modelo de comunicação digital.

Coleirinho ou papa-capim

reportagem - Twitter :: 51

Portfólio de serviços #oportunidades

e solução de problemas e dúvidas. O mais importante é

A primeira boa notícia quando falamos de

que as agências devem ter sensibilidade ao propor o uso a

oportunidades são as opções de serviços que as agências

um cliente. Elas precisam se perguntar: ‘Meu cliente está

digitais poderão oferecer para os seus clientes. “O Twitter

preparado para isso?’; ‘Sua filosofia é aderente ao Twitter?’;

permite o relacionamento em tempo real 1-para-1, 1-para-

‘Haverá relevância na presença desse cliente no Twitter?’.

muitos e muitos-para-muitos. Estamos falando de produzir

Na verdade, o Twitter é só a bola da vez, mas essas

conteúdo, de fomentar a disseminação boca a boca ou de

perguntas, em outros momentos, já se aplicaram a blogs

implementar ferramentas e aplicações que se integram ao

e, antes disso, a qualquer tipo de site. Quando comecei a

serviço. Ou seja: é trabalho para planejamento, criação,

trabalhar com web, em 97, era comum um cliente querer um

design, TI etc.”, explica Cassano.

site ‘só para estar lá’, ou ainda, ‘porque meu concorrente

“As agências podem ajudar seus clientes a entender o

tem um’. Se você quer um megafone, é bom que tenha algo

que o seu público-alvo quer, quais são suas expectativas

de bacana para dizer”, orienta Tharso Vieira, sócio e diretor

em geral e assim saber exatamente como e de que

de operações da Bumaiê (www.bumaie.com.br).

forma se relacionar com eles. Com esta análise feita, as

“O que temos notado são clientes sedentos por

agências serão responsáveis pela ‘voz’ da empresa nestes

entrar no Twitter a qualquer custo. É claro que entrar por

meios, falando, ouvindo e mensurando os impactos da

entrar não faz sentido. Uma empresa que não tem um

interferência da empresa nas mídias sociais”, argumenta

histórico de diálogo com o cliente, ou que simplesmente

Rodrigo Quintão, diretor executivo da 4Ps Agência

nunca se aventurou pelos meios digitais além da

Digital (www.4ps.com.br).

fronteira de seu próprio site 1.0, deve pensar muito

Nesta busca por oportunidades, Vitor Guerra, sócio

bem na estratégia que irá usar em sua página do Twitter.

e diretor de planejamento em mídias sociais da Ideia s/a

Qualquer um pode ter sucesso em uma empreitada

(www.ideiasa.com), aponta algumas das características

no Twitter desde que esse projeto seja encarado com

essenciais para que os profissionais de web possam

seriedade. Querer parecer algo que não se é nunca deu

apresentar trabalhos de qualidade nestes ambientes.

certo e não dará agora”, ressalta Vitor.

“Se o Twitter é uma ferramenta de comunicação digital,

Em relação aos bons exemplos na utilização do

os profissionais dessa área naturalmente têm muito a

Twitter (confira outros na página 55), Tharso cita casos

oferecer. Twittar para empresas e checar o que falam

envolvendo empresas de diferentes ramos de atuação.

dela pode virar moda daqui em diante, mas os futuros

“Uma companhia aérea pode usá-lo para informar sobre

candidatos não podem cair no erro de pensar que a tarefa

seus voos, condições dos aeroportos e para resolver

é simples. Para entrar nesse meio, não basta ser um usuário

problemas dos clientes. A @VirginAtlantic faz isso

ativo no Twitter. Antes de se propor a prestar serviços

de forma genial. Outro é o teefury.com, uma loja de

ligados à geração de conteúdo em mídias sociais, é preciso

camisetas on-line que comercializa um único modelo por

entender muito bem novas métricas, como influência e

dia. Eles usam o Twitter para comunicar a estampa do dia,

relevância, além de conhecer profundamente o cenário

discutir sobre as opiniões dos consumidores e gerar buzz.

em que seu futuro cliente está inserido e como se dão as

Uma empresa de serviços pode detectar reclamações e

relações dos indivíduos em redes de relacionamento.”

agir para contornar os problemas rapidamente, fazendo com que um crítico da marca torne-se um cliente satisfeito

Quando indicar o uso do Twitter? #comofas

diante de milhares de pessoas. Isso tem um poder que não

Conhecidas algumas das oportunidades de negócios

pode ser desprezado.”

existentes pelo Twitter, o próximo passo será avaliar quando o uso desta ferramenta deverá ser indicado, para evitar que seu potencial de comunicação e relacionamento seja desperdiçado em projetos que possam acarretar em efeitos negativos para a imagem de uma marca.

“O Twitter pode ser usado para várias coisas: desde promover serviços e produtos/ofertas até a identificação

Boas práticas no uso da ferramenta #éomeujeitinho A passagem da celebridade televisiva Xuxa Meneghel (http://twitter.com/xuxameneghel) tem causado muita polêmica pelo Twitter. A primeira delas envolveu o modo como ela postava seus textos, todos em caixa alta, modelo

52 :: Webdesign

não recomendado pelas netiquetas da web (http://

válida se você não souber conversar na mesma ‘língua’ do

migre.me/71k5), que traduz esta forma de escrita como

seu público-alvo. Não se pode falar gírias para um público

se a pessoa estivesse falando em voz alta ou até mesmo

que gosta de seriedade, nem razões para ser formal para

gritando com seus interlocutores.

um público que gosta da informalidade. Esta é a primeira

Ao ser alertada sobre tal situação, na tentativa de

regra: ter uma personalidade e um comportamento

se explicar, ela acabou falando que “era seu jeitinho

condizente com a de seu público-alvo. Dicas de como

de escrever no computador” (http://migre.me/71RR).

construir um texto são sempre válidas, pois aumentam

Em pouco tempo, a passagem acabou virando motivo

as chances de resposta por parte do receptor da

de piada e inspiração para o surgimento da “famosa”

mensagem”, afirma Rodrigo.

hashtag #éomeujeitinho, que vem sendo utilizada para apontar ironicamente todo o tipo de situação.

Recentemente, o guru da usabilidade, Jakob Nielsen,

“Existem boas práticas sim. O que não existe são regras absolutas. Citar suas fontes, sinalizar seus conteúdos com hashtags (#), usar sabiamente letras maiúsculas, reduzir URLs,

publicou um artigo apresentando algumas dicas sobre

não seguir pessoas indiscriminadamente e aplicar códigos

design iterativo no Twitter (http://migre.me/71Zo) e

específicos como ‘RT’ e ‘d’ são exemplos de boas práticas.

as questões de usabilidade em textos postados em

Por outro lado, contradizendo uma ‘boa prática’ bastante

microblogs, como: utilizar “:” para economizar caracteres;

famosa, não acredito que seguir quem te segue é sempre o

colocar em caixa alta apenas a palavra-chave do post;

que deve ser feito. Essa é o tipo de boa conduta que faz você

incluir informações específicas no texto; e cuidado para

ser bem visto por aí, mas não necessariamente te faz bem.

deixar um mínimo de caracteres disponíveis no texto para

Se um chato te segue, você é obrigado a ler suas chatices?

que o post possa ser “retuitado (RT)”.

Acho que não. Nesses casos, acredito em uma seleção

Diante dessas recomendações, e da experiência

natural - leia-se #unfollow - na qual os chatos terão cada vez

ocorrida no caso do “jeitinho” da Xuxa, já é possível

menos seguidores enquanto os usuários que geram conteúdo

apontar algumas boas práticas na hora de se produzir e

relevante garantirão seus espaços”, orienta Vitor.

publicar conteúdo através do Twitter? “Não existe dica

Monitorando opiniões #prontofalei Na edição de setembro da Revista TIdigital, na seção Newwws, o colunista Alexandre Fontoura divulgou que, “de acordo com a pesquisa da Pear Analytics (http:// migre.me/6hKz), cerca de 40% dos tweets contam fatos sem interesse sobre a rotina do usuário e 37% são conversas entre usuários. A consultoria selecionou duas mil mensagens publicadas no Twitter entre as 11h e as 17h durante duas semanas. Mensagens que repliquem conteúdos de outros usuários, conhecidas como retweets, foram responsáveis por 8,7%, seguidas pelos tweets autopromocionais, em que empresas anunciam novos produtos ou serviços e promoções, com 5,8% da amostra.”

Quando falamos da mensuração de resultados envolvendo o Twitter, alguns dados e elementos serão fundamentais para se montar um processo de monitoração em relação à multiplicação instantânea e imediata de opiniões publicadas sobre uma marca neste ambiente.

“A primeira prática é monitorar constantemente a palavra-chave (ou tag) que se relaciona a sua marca. Uma visita ao http://search.twitter.com/, com buscas diretas pelo nome de sua marca, ou ainda palavras que podem estar relacionadas ao seu produto, serviço e concorrentes Tiziu ou alfaiate

seriam as primeiras medidas para entender o que se diz

reportagem - Twitter :: 53

na ferramenta. Mas muita coisa deverá ser filtrada. Com todo este ‘buzz’ gerado em torno da ferramenta, muitos tendem a considerar qualquer punhado de twitts como a verdade absoluta, o que pode levar a um grande erro.

Quando monitoramos o que se fala no Twitter, temos que levar em consideração qual a força de quem está falando conseguimos isso checando quantidade de seguidores do ‘tuiteiro’ e, mais a fundo, seguidores de seus seguidores.

Dessa maneira, determinamos o quanto a mensagem (ou mensagens) foi relevante antes de tomá-la como verdade. É muito importante que, além da monitoração de tags citadas no Twitter e capital social de quem as citou, sua pesquisa esteja cruzada com outras mídias, como blogs e comunidades em redes sociais. O Twitter não é o único ponto de contato com seu consumidor”, alerta Léo Palagi,

Sebinho ou papa-banana

diretor da Red Cube (www.redcube.com.br).

“O Twitter se destaca, dentre outras redes sociais, quando o assunto é facilidade para monitorar as informações que transitam entre seus milhares de perfis ativos. Hoje, existem inúmeras ferramentas para este

envolvendo o nome da apresentadora voltasse a ser assunto

fim, a maioria gratuita. Bons exemplos: TwitterCounter

entre os usuários do ambiente. Isso porque, no texto escrito

(http://twittercounter.com), TwitterAnalyzer (http://

por Sasha, havia um erro de ortografia. Em vez de escrever

twitteranalyzer.com) e o brasileiro BlaBlaBra (http://

“cena”, a menina acabou digitando “sena”.

blablabra.net)”, acrescenta Vitor.

Para piorar a situação, a justificativa de Xuxa sobre

Porém, uma opinião parece ser unânime entre os

tal lapso foi ao melhor estilo “a emenda saiu pior do que

especialistas: é importante saber extrair a relevância

o soneto”. Para contornar a situação, a alegação para tal

dos dados apurados. “Alcance relativo de cada autor,

mancada foi que a filha tinha sido “alfabetizada em inglês”.

velocidade de disseminação, volume de cliques nos links,

Se num primeiro momento o volume de comentários

tudo isso ajuda a desenhar um cenário que qualifique

negativos já tinha sido grande, a explicação para o erro

a informação obtida de forma automatizada, por um

acabou gerando ainda mais posts críticos pelo Twitter.

processo de monitoramento. Algumas ferramentas

“O caso ‘Xuxa e sua filha’ mostra alguns exemplos. Em

avaliam a qualidade dos tweets, por exemplo,

primeiro lugar, o poder de fogo da fama que a rainha dos

considerando textos sem links como puro lixo. Mas isso

baixinhos trouxe da TV lhe garantiu muitos seguidores,

é relativo. Quando você segue uma celebridade, ler

mas diferente da TV, o Twitter é uma via de mão dupla.

‘Acabei de assinar o contrato para um filme novo. Será

Se o que falo não tem relevância, eu perco seguidores.

sobre alienígenas’ é extremamente relevante, mesmo sem

Porém, pior que isso, se falar bobagens, além de perder

conter qualquer link”, destaca Cassano.

seguidores terei réplicas que, às vezes, poderão ter tom agressivo. Quando estamos usando este tipo de

Xuxa coloca Sasha em “sena” #fail

ferramenta, temos que estar preparados para isso. A Xuxa

Novamente, a apresentadora Xuxa vai nos servir

não estava”, argumenta Léo.

de exemplo para analisarmos algumas questões do

Moral da história? Temos aí uma ótima lição para quem

Twitter. Desta vez, o foco do assunto são os erros, ou

pretende oferecer serviços especializados que vão definir

melhor, na linguagem da nação “tuiteira”, os #fails que

os rumos da presença digital das empresas. Por outro lado,

podem comprometer a presença digital de uma marca no

o caso também funciona como um alerta para o surgimento

universo das redes sociais.

de “especialistas” e “gurus” na área, como destaca André

Passado o caso “#éomeujeitinho”, Xuxa resolveu

de Abreu, no artigo “Cuidado com os especialistas em

colocar sua filha Sasha para experimentar a ferramenta.

mídia sociais” (http://migre.me/6hBQ): “a história já

Bastou apenas um post para que mais uma polêmica

provou: a novidade atrai os novos profetas”.

54 :: Webdesign

“Quando começa a chover, em cinco minutos já estão vendendo guarda-chuvas em todas as esquinas.

O mesmo aconteceu com as mídias sociais. Como o próprio André escreveu em seu artigo: ‘Não que mídias sociais sejam novidade’, mas agora o tema está na moda.

O fato é que os anunciantes viram que precisam estar presentes nesses novos canais e por isso surgiram, ‘em cinco minutos’, novos vendedores de ‘planejamentos para mídias sociais’. A consequência disso são alguns erros grotescos que vemos por aí. Posso destacar alguns: sofrer de miopia de marketing só divulgando preços e promoções repetitivamente; esquecer que o Twitter é veloz e, por isso, atualizar sua página uma vez por mês; ignorar seus seguidores, não dando os devidos créditos por informações ou não respondendo mensagens e citações; múltiplas personalidades na hora de escrever seus tweets, sendo ora

Saí-andorinha

formal, ora cheio de gírias e abreviações”, explica Vitor.

“O sintoma dos ‘especialistas em mídias sociais’ é semelhante aos especialistas em web no final dos anos 90 ou o ‘site do sobrinho’, onde se criou a lenda de que investir em web tinha baixíssimo custo, retorno alto, aumento de vendas e sucesso garantido. O investimento neste meio requer pesquisa e planejamento tão grande ou maior do que uma ação para as ‘mídias tradicionais’, como a TV, pois

Twitter veio para ficar? #minidebate

após um erro não terei chance de ‘tirar meu twitt do ar’ ou parar de veiculá-lo”, ressalta Léo.

Diante desse cenário, como orienta Tharso, antes de pensar nos benefícios, as empresas devem ter consciência

@caioosman Veio para ficar, mas ainda passará por amadurecimento, como tudo que é novo e precisa se solidificar para continuar crescendo.

sobre as suas responsabilidades nestes ambientes. “Se a

@alighieriadamo Creio que o Twitter vai ter o seu tempo de vida

intenção é, por exemplo, atuar como uma espécie de SAC

útil. Como está acontecendo em várias redes sociais. É normal

on-line, a empresa precisa ter estrutura para resolver os

essa mudança para algo melhor!

problemas dos usuários de forma efetiva. Outro caso é quando a empresa tem princípios rígidos e conservadores

@cristianoweb A ferramenta não vai durar, mas o conceito

que conflitam com o ambiente informal do Twitter (e de

da velocidade na troca de informações sim. A relação entre

outras redes sociais). Podemos apontar casos específicos de erros, mas creio que o mais comum é a empresa

pessoas e empresas tende amadurecer. @rhamses Ele revolucionou não só a interação entre as pessoas,

transformar o Twitter num monólogo e achar que está

mas o conceito de coberturas de fatos globais ou não. E toda

abafando nas redes sociais.”

revolução chega para ficar.

“O #fail pode vir de muitos lugares. Desde o uso de script para seguir milhares de pessoas, e esperar ser

@renatatr Veio para ficar, mas será refinado com o tempo! Hoje

seguido de volta, até a prática do ‘spam’, onde você

é moda, mas amanhã vai amadurecer e só o que é realmente útil

direciona sua mensagem para centenas de pessoas

sobreviverá.

esperando que elas leiam em suas caixas de ‘reply’ e repliquem a mensagem. O maior erro de todos é entender o Twitter como uma ferramenta de broadcast. Ele não é isso. É uma ferramenta de relacionamento”, finaliza Cassano.

@larissaherbst A necessidade de expressão nunca sairá de moda. Uma ferramenta que facilita essa atividade já tem o principal fator para continuar dando certo.

reportagem - Twitter :: 55

Dicionário Houaiss http://twitter.com/novohouaiss “Ao esclarecer dúvidas sobre a língua portuguesa, presta um bom serviço aos usuários ao mesmo tempo em que promove o produto (no caso, dicionário). Ótima iniciativa.” (Tharso Vieira)

JetBlue http://twitter.com/JetBlue “Possui um milhão de amigos no Twitter. É atualizado coletivamente por uma equipe de pessoas que ajuda os passageiros em linguagem informal. São pessoas ajudando pessoas em nome da marca. Quando precisou trabalhar a venda de um pacote especial de passagens, esse ‘mailing orgânico’ foi extremamente valioso.” (Roberto Cassano)

Twestival http://twitter.com/Twestival “Um evento totalmente promovido através do Twitter, que reúne diversos formadores de opinião e empresas patrocinadoras por uma ação social beneficiar instituições carentes ao redor do mundo.

Tem total transparência no que faz e trabalha o tempo todo em engajamento e geração de conteúdo de usuários.” (Léo Palagi)

WholeFoods http://twitter.com/WholeFoods “Usa o Twitter de forma local. Além do perfil principal, eles têm outros, como @wholefoodsNYC ou @wholefoodsPST, que atuam divulgando promoções e novidades locais.” (Tharso Vieira)

56 :: Webdesign

Um universo de experimentações Diante de tantas novidades que surgem rapidamente

Naomi :: A experimentação é crucial. Hoje,

pelo mercado de internet, profissionais e agências

estabelecemos alguns horários abertos para nossas

digitais precisam acompanhar toda essa movimentação

equipes poderem trazer projetos paralelos de

para extrair o que realmente pode representar boas

estudo - uma ferramenta nova, plataforma, projetos

oportunidades de negócios.

gráficos ou testes de animação. Estamos com alguns

Nesta caminhada, os projetos experimentais surgem como uma ótima ferramenta para se testar a

projetos em desenvolvimento e tenho certeza que vão trazer bons frutos.

evolução dos novos conceitos e das novas tecnologias e também como eles podem ser aplicados no

Wd :: O Universo Angani é um projeto

cotidiano de criação e desenvolvimento das empresas

experimental lançado recentemente pela Agência

especializadas em soluções web.

Ginga. Como surgiu a ideia de criá-lo? E quais são

Quem vem utilizando tal prática com eficiência é a Agência Ginga (www.agenciaginga.com.br), que lançou recentemente o projeto Angani (www.angani.

os seus principais objetivos dentro da estratégia comercial da empresa?

Naomi :: Nós abrimos uma oportunidade de criar

net). Conversamos com Naomi Covacs, diretora de arte/

algo único e interativo a partir de um projeto que

criação da agência, que nos conta como surgiu a ideia de

acabou sendo engavetado. Optamos por transformá-lo

criá-lo e os benefícios obtidos em sua produção.

em uma plataforma proprietária.

Então, o Angani evoluiu para uma plataforma lúdica

Wd :: Em entrevista para Arteccom (http://

de estudo. Como projeto experimental, atingimos

migre.me/6Wi3), o designer Stefan Sagmeister

diversos públicos do meio, adquirindo um web award

(www.sagmeister.com) ressaltou que “os trabalhos

como “Site of the Day”, no dia 30 de julho, pelo prêmio

experimentais (que não fazem parte da programação

inglês Design Licks (www.designlicks.com). Também

de uma agência) têm a tendência de serem relegados

tivemos várias menções em blogs, sites, revistas

por trabalhos mais ‘urgentes’, simplesmente pelo

especializadas etc.

fato de eles terem um prazo de entrega definido”.

Queremos ver o Angani crescer e agregar outras

Diante desse cenário, como vocês procuram inserir

ferramentas e APIs, tornando a experiência ainda mais

a experimentação dentro do cotidiano da produção

interessante. O maior objetivo é a experimentação e a

criativa da agência?

divulgação institucional da Ginga.

estudo de caso - Angani :: 57

Wd :: Em sua apresentação oficial, ficamos sabendo que o termo “Angani”, na língua Swahili, significa universo ou grande espaço. Em termos

Como vocês chegaram a tal definição? E quais fatores influenciaram na escolha da tipografia a ser utilizada?

Naomi :: Realizamos diversos estudos. E, na

visuais, vocês utilizaram elementos gráficos

verdade, uma questão de balanço também. Como toda

que ajudam no processo de entendimento das

composição, interativa ou não, são necessárias áreas

funcionalidades dispostas pelas interfaces.

de respiros se queremos dar o enfoque necessário em

Quais foram os parâmetros utilizados, durante o

determinado conteúdo. Buscamos utilizar uma família

processo de criação, para atingir tal eficácia?

tipográfica leve, mas que não fosse enrijecida demais, e

Naomi :: Fizemos uma pesquisa das

que tivesse um pouco de carisma e um pouco de curva.

possibilidades que a ferramenta poderia nos trazer e, além disso, diversos esboços foram ilustrados,

Wd :: Um ponto ressaltado na apresentação do

tanto em 2D, como em 3D, para melhor conduzir o

projeto é que ele procura oferecer ao usuário formas

aspecto visual.

de explorar os conteúdos de forma lúdica e interativa.

Foi organizada uma paleta de cores, e uma

Partindo da premissa que para evoluir o ambiente

biblioteca iconográfica magistralmente efetuada, até

é preciso contar com uma participação ativa dos

os modelos 3D e as ilustrações e texturas. Acredito

usuários, como vocês planejaram estimular a formação

que conseguimos trazer as nuances do imaginário

de uma comunidade em torno do projeto?

para uma interface que casou muito bem.

Naomi :: Temos recebido muitos feedbacks construtivos com este projeto. Alguns vindos do próprio

Wd :: Ainda sobre o design de interfaces, vocês trabalharam com uma família de fontes sem serifa.

Twitter, que ainda não foi agregado ao projeto, mas que já tem sido mencionado por visitantes nacionais e

58 :: Webdesign

“A proposta inicial sempre partiu da premissa de que o usuário pudesse navegar entre os planetas e manipulá-los de forma livre”

internacionais. Acredito que será a partir da evolução do

com as palavras-chave do usuário, que pode ou não ficar

próprio Angani que teremos participantes mais ativos.

surpreso com os resultados. As tags são as formas mais

A participação do usuário é super importante

simples de resumir uma busca e, no caso do Angani, a

e já sabemos quais serão as próximas evoluções. O

brincadeira fica em juntar tags coesas para cada objeto,

projeto foi lançado como alfa. O mais importante foi

de forma que o resultado seja interessante.

botar à prova que era possível e foi feito. É possível transformar um estudo em um projeto experimental de

Wd :: Boa parte dos elementos visuais presentes

imenso potencial, mas a contribuição do coletivo é a

no site receberam uma modelagem em 3D, através

base do projeto.

dos recursos presentes no Papervision 3D. Diante da experiência, é possível citar as vantagens no

Wd :: No Angani, cada habitante do universo

uso deste plugin do Flash? Como ele foi aplicado

é reconhecido pelo seu conteúdo, sendo utilizado

neste projeto e de que maneira ele contribui para

o conceito de classificação por tags. Quais são as

aperfeiçoar o design de interfaces?

vantagens que este tipo de sistema de classificação traz para o período de experiência do usuário em um site?

Naomi :: O Angani hoje não deve ser visto como

Naomi :: Tudo depende do projeto. Neste caso, optamos por usar esta ferramenta porque a proposta inicial sempre partiu da premissa de que o usuário

uma nova plataforma de busca. A ideia da classificação

pudesse navegar entre os planetas e manipulá-los de

por tags nada mais é do que uma forma diferente de

forma livre, podendo observar todas as faces dos objetos

dizer “você é por onde você navega”.

criados por ângulos diferentes, trazendo uma solução

O sistema traz sites e imagens diferentes de acordo

diferente e divertida para navegar.

estudo de caso - Angani :: 59

trabalho do profissional de animação, que conseguirá atingir algumas soluções com muito mais facilidade.

Em animação, existe uma diferença entre animar personagens e elementos gráficos, como o motion designer difere do profissional de animação. São profissionais distintos que lidam com grafismos de maneiras diferentes.

Com relação a flash designers, acredito que o bom designer trará bons resultados de interface usando ou não o Flash. Vejo com bons olhos um diretor de arte ou assistente de arte que é capaz de se comunicar bem com Ao entrar no site, o usuário tem a opção de criar o seu mundo em diversos modelos 3D

o flash developer (que irá desenvolver o funcionamento do projeto da melhor forma possível).

Acredito que esses dois profissionais deverão se

O Papervision proporciona isso bem, nem o usuário,

comunicar cada vez mais. Ambos se preocupam com a

nem o designer ou programador precisam ficar limitados

arquitetura do projeto e sua usabilidade, cada qual com seu

a uma interação bidimensional.

foco específico. E, com a troca de ideias e soluções, facilita o processo tanto de criação quanto de desenvolvimento.

Wd :: Falando ainda sobre 3D, quais foram os principais desafios na hora de implementar esta técnica no site?

Naomi :: Um dos maiores desafios foi adequar a

Wd :: Na edição de agosto, publicamos um especial que apontava as vantagens no uso do Flash para construção de interfaces ricas, sem esquecer

modelagem 3D para o Papervision de forma que não

a importância da aplicação das boas práticas de

se consumisse muito do processamento da máquina do

Acessibilidade, Usabilidade e SEO. No Angani, quais

usuário. Por isso, optamos por deixar os objetos com

parâmetros foram utilizados para medir a eficácia

menos polígonos (menos curvas).

no uso destes conceitos em um ambiente todo

Em compensação, as texturas dos objetos foram ilustradas para que essa quebra visual fosse suavizada

construído em Flash?

Naomi :: Do ambiente “universo” até as janelas

ao máximo. O processo de criação de cada objeto

de buscas de conteúdo, nos preocupamos em

tridimensional foi desde esboço à mão, à modelagem

tratar as informações de modo que o usuário possa

em 3D (Maya ou 3DMax) e a ilustração da textura em

passar pela experiência do conceito de viagem que

Photoshop, a “roupagem” do objeto (suas cores etc.).

quisemos proporcionar.

A equipe de criação em 3D foi crucial em muitos

Criamos os módulos de planetas de forma que a

momentos para prever sequências de animações entre

navegabilidade entre eles fosse suave e lúdica. Acredito

planetas para a equipe de desenvolvimento. Houve

que, assim, a sensação de se tornar um explorador no

muita troca de informações, muitos problemas foram

universo é mais leve e agradável.

solucionados em conjunto.

Wd :: Um detalhe interessante deste projeto é a Wd :: Analisando a estrutura de algumas agências

escolha da execução de uma trilha sonora instrumental

digitais brasileiras, vemos a abertura de oportunidades

bem adaptada ao conceito final do site. Que tipo de

para flash animators, flash designers, flash developers

funções os recursos sonoros podem (e devem) assumir

etc. Vocês acreditam que a especialização de

dentro de um site?

profissionais é um caminho nesta área? E quais seriam as principais diferenças entre esses cargos?

Naomi :: Ainda há muita confusão sobre o

Naomi :: Optar por trilha sonora ou efeito sonoro vai de acordo com o objetivo do projeto.

Especificamente neste, para dar ao ambiente “surreal”

profissional em Flash. O Flash é uma opção interessante

uma forma mais envolvente, convidamos o músico

justamente por proporcionar ferramentas e soluções

Dudu Tsuda a apresentar um set de trilhas ambiente

diferentes. Sua versão mais recente facilitou em muito o

condizente com o projeto. Além de o usuário poder

60 :: Webdesign

o desenvolvedor faça a aplicação de uma forma mais simples, o que facilita a coleta de dados.

No caso do Angani, conseguimos coletar dados como porcentagem de pessoas que visitaram o site; quantas pessoas criaram mundos; acesso a conteúdo externo e todos os níveis de navegação possível.

Wd :: Por se tratar de um projeto experimental, quais são as expectativas da Agência Ginga em termos de retorno deste projeto? Até o momento, quais foram os principais resultados obtidos?

No universo Angani, cada usuário é reconhecido por seu conteúdo, classificado por tags

Naomi :: A expectativa inicial do projeto Angani sempre foi como plataforma experimental e divulgação da Ginga. Neste quesito, os resultados superaram a meta, com

conhecer mais sobre o Tsuda, com link para seu site, ele

visitas e menções em diversos lugares, como mencionado

também tem fácil acesso aos controles do rádio.

previamente. Feito isso, nosso objetivo é tornar este projeto comercialmente rentável. Vimos que isso é possível

Wd :: O site foi projeto para ser visualizado em dois idiomas: português e inglês. Em projetos deste porte, quais são os desafios na hora de traduzir conteúdo e garantir uma produção de qualidade em ambas as versões?

Naomi :: Tomamos o cuidado para que o usuário possa trocar de idioma em qualquer ponto do site.

O projeto foi estruturado pensando nisso. Não só conteúdos em texto, como títulos e botões foram cuidadosamente arquitetados com esse objetivo. Dessa forma, o usuário não precisa voltar à “estaca zero”, ainda mais navegando em um site em Flash.

Wd :: Na edição de julho de 2007, quando apresentamos um estudo de caso sobre o site “Pocket Films for Travelers (www.pocketfilmsfortravelers. com), Zeh Fernando (www.zeh.com.br) revelou que o Google Analytics era uma das melhores opções para análise de navegação de sites em Flash (http://code. google.com/p/gaforflash/). De que maneira a agência costuma mensurar os dados de navegação em projetos que envolvam o uso do Flash? Como esta questão vem sendo trabalhada neste projeto?

Naomi :: Sempre embutimos códigos de análise de navegação, mesmo dentro do Flash. Fazendo parte da arquitetura e plataforma, fica mais fácil adicionar ou retirar informações do que precisamos mensurar.

O Google Analytics é uma ferramenta que possibilita isso com muita facilidade, permitindo que

com algumas melhorias e já temos negociações em andamento com possíveis patrocinadores.

62 :: Webdesign

O valor da animação gráfica em interfaces digitais Uma das consequências diretas na

Tecnologia na Web nível a av vança nçado nça do o nível médio níve íve vell b básico

usuário, sempre. Depende muito do contexto, do

melhoria gradual na qualidade de conexão à

objetivo e dos recursos. Existem muitos casos em que

internet no país está presente na ampliação

se faz o caminho contrário, decide-se por usar motion

das possibilidades na hora de se pensar na

antes de saber o que precisa ser feito. Qualquer

construção de ambientes interativos. Com

recurso gratuito prejudica a experiência do usuário.”

isso, os profissionais criativos devem buscar

Em relação às principais etapas envolvidas na

conceitos e tecnologias que possam ajudá-los no

produção de um projeto web com uso de motion

desenvolvimento de projetos diferenciados.

graphics, André Usuda e Wellington Guimarães,

Neste cenário, a aplicação do motion

web developer e webdesigner, respectivamente,

graphics, através do uso de textos e elementos

da Full Haus Comunicação (www.fullhaus.com.br),

gráficos animados, surge como uma boa

explicam como funcionam algumas delas. “Temos o

solução para encantar os olhos (e o mouse)

storyboard, onde será delimitado todas as questões

de seu público-alvo. “Tudo que é bonito atraí

técnicas e criativas da animação. Outra etapa é o

e cativa as pessoas e as mesmas tendem a se

design de som, onde a animação ganha ‘vida’, sendo

identificar e fazer parte do que as cativou. Dessa

ambientada com músicas, ruídos e efeitos sonoros.

forma, as pessoas sentem prazer e vivem novas

Já no render final, acontece a parte de finalização

experiências de entretenimento, possibilitando

de arquivo, onde se dá ‘saída’ à animação com

uma maior imersão no mundo digital. Fazer com

qualidade, tamanho e extensão desejados, e onde

que as pessoas façam parte do que realmente as

todas as outras etapas serão compiladas.”

agradam é um desafio para nós desenvolvedores”,

Neste processo, como destaca o designer

afirma Marcelo Dias, sócio da Predominium

Diego Loza (www.diegoloza.com), alguns softwares

Estúdios (www.predominium.com).

vão ajudar na construção de projetos na área. “Os

“Não é de hoje que abusar de motion é

mais usados para web são Flash, After Effects,

estratégia não só em projetos interativos, mas

Photoshop e hoje cada vez mais tem se usado a

em outras mídias também. Quando exploramos

animação 3D através de alguns softwares, como

motion graphics em um projeto, buscamos

3ds Max, Maya, Blender, XSI que são os mais

emocionar, roubar sorrisos, fazer pensar ou

comuns presentes no mercado.”

simplesmente sintetizar situações ao lúdico para

Sobre o perfil profissional e os conhecimentos

dar contexto ao objetivo, engajar o usuário a

necessários para se trabalhar com motion graphics,

entrar no clima da mensagem final. Algumas

as características vão desde o cuidado com os

pessoas são sensíveis ao motion, enquanto

mínimos detalhes até a constante busca pela

outras não têm a menor paciência. Por isso,

inovação. “O profissional tem que gostar de

temos que ir com calma e saber bem o foco”,

animação, pois a produção não é um processo

argumenta Guilherme “Guindex” Almeida,

fácil e muito menos rápido. Ele tem que se apegar

animador e programador da área interativa da

aos mínimos detalhes, tendo um olhar bem

BossaNovaFilms (www.bossanovafilms.com.br).

crítico, ter um bom conhecimento em estrutura de

Pensando nisso, como ressalta o especialista,

roteiros tanto do cinema clássico como do cinema

antes de aplicá-lo, faça uma análise de como esta

contemporâneo, além de conhecimentos técnicos

técnica poderá realmente contribuir no processo

em cinema”, finalizam André e Wellington.

de experiência de seu público pelo ambiente. “É

A seguir, os especialistas apontam quatro

delicado. É um caminho comum hoje, em qualquer

bons exemplos na aplicação de motion graphics

projeto é possível encontrar motivos para fazer uma

em projetos web. Para conferir mais exemplos,

porção de efeitos, 3D e fumaças. Mas, no fim, o

acesse o site da Revista Webdesign: www.

sucesso do projeto está em uma boa experiência do

revistawebdesign.com.br

tecnologia :: 63

Labuat http://soytuaire.labuat.com/ “É incrível pela tamanha qualidade dos gráficos, o dinamismo que eles são criados e a interatividade que o usuário tem ao navegar com o mouse e criar em tempo real o seu próprio motion juntamente com os efeitos que são, ao mesmo tempo, sincronizados com a música que toca de fundo.” (Diego Loza)

Prismática http://www.prismatica.com.br “Motion 2D muito bem aplicado. Bom exemplo de motion feito em Adobe After Effects, usando a manipulação de câmera.” (André Usuda e Wellington Guimarães)

Ford Edge https://www.ford.com.br/ed_default.asp “Constrói uma variedade de cenários e ambientes ricos, de modo a envolver o navegante com os temas. A identidade de cada cenário é mostrada com um rico conteúdo audiovisual, envolvente e diversificado.” (Marcelo Dias)

VectorPark http://www.vectorpark.com “É uma coleção de pequenas peças super carismáticas e orgânicas. Abusa da simplicidade e tem bastante programação e animação de timeline, um clássico.”

(Guilherme Almeida)

64 :: Webdesign

tutorii al Por Alexandre Cavalcanti Adobe Certified Expert e Adobe Certified Instructor em Flash CS3. Consultor em design e desenvolvimento web, pós-graduado em design digital. Palestrante e professor dos cursos intensivos, de graduação e pós-graduação do Instituto Infnet desde 2000. Visite seu blog em zarabatana.com/blog.

Actionscript 3.0 para webdesigners - Parte 1/4 Salve, salve, meu caro leitor! Durante as próximas edições, mostraremos como utilizar, de maneira simples e

var angulo:int; angulo = 45;

prática, a linguagem de programação Actionscript 3.0 nos seus projetos em Adobe Flash.

O objetivo deste tutorial é mostrar que programação

Observação: os identificadores (nomes) das variáveis não podem conter espaços ou caracteres especiais, exceto _

não é um bicho de sete cabeças e que pode ajudar o

(sublinhado) e $ (cifrão), nem começar por número e devem

webdesigner a automatizar rotinas repetitivas, se comunicar

ser únicos no escopo onde são declarados.

melhor com desenvolvedores e gerenciar projetos mais

5 - Feche o painel Actions e Selecione File → Save.

facilmente, evitando a perda de tempo com tarefas que o computador pode executar facilmente e deixando o foco no que realmente interessa. Criar.

Nesta primeira parte, veremos os conceitos básicos do Actionscript 3.0 através de exemplos simples e fáceis de seguir, utilizando o Adobe Flash CS4 Professional.

Elementos básicos da linguagem Antes de começarmos, faça o download dos arquivos desta parte do tutorial em: http://www.revistawebdesign. com.br/index.php/downloads. Para iniciar, abriremos o Adobe Flash CS4 Professional e definiremos nossa área de trabalho (workspace) como Essentials. Na versão CS4 há diversos layouts da área de trabalho listados na barra superior do software. Após o tutorial, escolha o que mais lhe agrada.

Propriedades Uma propriedade é uma característica de um objeto (nome, altura, largura, visibilidade, rotação, opacidade etc.) e com o Actionscript podemos alterá-las em tempo de execução. Neste exemplo, modificaremos a propriedade rotation (rotação) de um MovieClip que está no palco.

Vejamos: 1 - Continuando no arquivo AS3_parte1_ex1.fla, selecione o quadrado que está no palco.

2 - No painel Properties, no campo Nome de Instância (Instance Name), digite: quadrado_mc.

3 - Selecione o quadro 1 da camada AS e clique no menu Window → Actions, ou pressione F9. No painel Actions, especifique que o quadrado_mc terá a sua propriedade rotation definida com o valor da variável angulo. Para isso,

Variáveis

digite a seguinte linha abaixo do código já existente:

Uma variável é um espaço na memória onde armazenamos um dado. Por exemplo, ao utilizarmos a expressão x = 10,

quadrado_mc.rotation = angulo;

guardamos na memória o número 10 e o identificamos como x.

Toda vez que quisermos utilizar esse dado, basta chamarmos pelo nome x. Muito bem, vamos começar: 1 - Selecione File → Open, escolha o arquivo AS3_ parte1_ex1_inicio.fla e clique Open.

2 - Selecione File → Save As... e salve o arquivo como AS3_parte1_ex1.fla.

3 - Selecione o quadro 1 da camada AS e clique no menu

4 - Selecione File → Save.

5 - Teste o filme, selecionando Control → Test Movie, e veja o resultado. Você modificou a rotação de um objeto em tempo de execução e com pouquíssimas linhas de código.

6 - Vamos utilizar mais uma propriedade. Declare a variável opacidade como número real e atribua o valor .5 (meio) a ela.

Em seguida, defina opacidade como valor da propriedade

Window → Actions, ou pressione F9. Aparecerá o painel

alpha, o que irá tornar o quadrado_mc transparente em 50%.

Actions, que é o local onde você escreverá o código Actionscript.

Veja como fica o código ao final do exemplo:

4 - Declare uma variável angulo, que irá armazenar um número inteiro. Esse número servirá, por exemplo, para

var angulo:int, opacidade:Number;

a definição do ângulo de rotação de um MovieClip. Em

angulo = 45;

seguida, atribua o valor 45 para a variável angulo. Para isso,

opacidade = .5;

digite o seguinte código:

quadrado_mc.rotation = angulo;

tutorial :: 65

quadrado_mc.alpha = opacidade;

Observação: o objeto quadrado1_mc girou corretamente e agora iremos executar essa mesma ação no

7 - Selecione File → Save.

quadrado2_mc, mas utilizando um ângulo diferente. Como

8 - Teste o filme, selecionando Control → Test Movie, e

iremos girar dois objetos, faremos duas chamadas. Logo, nós

note a transparência do objeto.

Observação: caso não tenha dado certo, abra o

teremos que dizer, a cada chamada da função, qual objeto será girado e de quantos graus será esse giro. Esses dados

arquivo AS3_parte1_ex1_final.fla e compare com o

serão passados para a função através de atributos, que no

exemplo que você fez.

caso se chamarão: objeto e angulo. Os nomes dos atributos seguem o padrão das variáveis.

Funções Uma função é um bloco de código que é executado somente quando chamado e que pode retornar um valor. Utilizando funções, você pode reutilizar um código Actionscript em diversas situações e de maneira configurável, através de atributos. Vejamos um exemplo: 1 - Selecione File → Open, escolha o arquivo AS3_ parte1_ex2_inicio.fla e clique Open.

2 - Selecione File → Save As... e salve o arquivo como AS3_parte1_ex2.fla.

Obs.: nós agora temos dois objetos na tela (quadrado1_mc à esquerda e quadrado2_mc à direita) e iremos alterar a rotação de cada um deles de maneira independente. Para isso, vamos criar uma função chamada girarObjeto.

Dica: uma função sempre terá um caráter de ação e deve ser identificada utilizando-se um verbo seguido de um substantivo (ex.: girarObjeto). Valem as regras de

6 - Feche a janela do Flash Player e retorne ao painel Actions. Remova as linhas com a declaração e a atribuição da variável angulo. O ângulo agora será definido através do atributo angulo da função.

7 - Insira nos parênteses da função os dois atributos com seus tipos de dado. Isto é, o atributo objeto será do tipo MovieClip, e o atributo angulo será do tipo int (número inteiro).

8 - No bloco de código, substitua a referência ao objeto quadrado1_mc pelo atributo objeto. Dessa forma, poderemos dizer qual objeto será girado na chamada da função. Observe também que o valor do ângulo agora será determinado na chamada da função, através do atributo angulo.

9 - Abaixo do bloco da função, escreva duas chamadas.

Na primeira, o quadrado1_mc irá girar 45 graus para a direita. Enquanto que, na segunda chamada, o quadrado2_ mc irá girar 15 graus para a esquerda. Veja como deverá ficar o seu código ao final do exemplo:

identificação das variáveis.

3 - Selecione o quadro 1 da camada AS e clique no menu Window → Actions, ou pressione F9. No painel Actions,

function girarObjeto(objeto:MovieClip, angulo:int):void { objeto.rotation = angulo;

envolva o código que altera a propriedade rotation do quadrado1_mc em um bloco function chamado girarObjeto,

}

delimitado por chaves, e que não retornará valor (void). Logo após, faça a chamada do bloco escrevendo o nome da função,

girarObjeto(quadrado1_mc, 45);

girarObjeto, seguido de parênteses, como mostrado no

girarObjeto(quadrado2_mc, -15);

código abaixo: var angulo:int;

10 - Selecione File → Save.

11 - Teste o filme, selecionando Control → Test Movie.

angulo = 45;

Note que os objetos compartilham a mesma funcionalidade,

function girarObjeto():void {

mas de formas diferentes, devido à utilização de atributos.

quadrado1_mc.rotation = angulo; }

Observação: caso não tenha dado certo, abra o arquivo AS3_parte1_ex2_final.fla e compare com o exemplo que você fez.

girarObjeto();

Tá vendo? Programar não é tão complicado quanto parece.

Espero que esses exemplos tenham servido para ilustrar alguns

4 - Selecione File → Save.

fundamentos do Actionscript. Na próxima edição, faremos com

5 - Teste o filme, selecionando Control → Test Movie, e

que essas funções respondam às interações com o usuário, entre

veja o resultado.

outras coisas. A gente se vê lá. Até!

66 :: Webdesign Designer e ilustradora das antigas, do tipo que raspou fotolito com gilette e f e z s e p a r a ç ã o d e c o re s n o p a p e l 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

Carolina Vigna-Marú

Símbolos e signos nas obras de arte Durante muito, muito tempo, a arte era a

ou cenário do Vaticano, por exemplo. Assim como

única mídia disponível. A população era analfabeta

pontos de Umbanda serão entendidos como meros

e toda comunicação, propaganda e ideologia

rabiscos para aquele que não os conhece.

eram transmitidas através de imagens. A imagem

Exemplos não faltam e este artigo, por mais

precisava funcionar, ou seja, as pessoas precisavam

que se estenda, jamais conseguiria abordar sequer

reconhecer imediatamente o seu significado. Se

a maioria, que dirá todos. O importante é saber que

usarmos uma abstração simplista e considerarmos o

os elementos possuem significados e que, se for do

início da iconografia não nas cavernas, mas apenas

seu interesse, basta uma pequena pesquisa para

a partir de, digamos, Egito, contamos algo em

compreendê-los. Vou aqui falar de alguns elementos

torno de cinco mil anos de produção artística. Papa

recorrentes como um ponto de partida no assunto,

Gregório, o Grande, disse: “a imagem é a bíblia dos

mas o que é importante é você saber que estes

ignorantes”. A imagem torna visível um pensamento

elementos existem.

até mesmo para os iletrados.

Naturalmente a história da arte revê estes

Até a criação do primeiro corante sintetizado, o Mauve, em 1856, as tintas eram preparadas a partir

significados organicamente à luz de novas

de elementos naturais. As cores, portanto, também

evidências. Só é possível falar do que sabemos hoje

são um elemento a ser considerado. Durante muito

e o amanhã trará, com certeza, novas informações.

tempo o vermelho era um pigmento caríssimo e

Existe uma discussão antiga que diz que

consequentemente assumia com frequência um valor

precisamos conhecer antes de ver. Explico: quem

representativo de nobreza e/ou riqueza. O azul era

nunca conheceu uma vaca não irá reconhecer a sua

feito de Lápis-Lazuli, uma pedra preciosa que, assim

representação a menos que lhe seja explicado. Ou

como o pigmento vermelho, valia mais do que o ouro.

seja, para ver a vaca, é preciso primeiro saber o que

Apolo, deus do sol e da razão, padroeiro

é uma vaca. Os signos (e seus significados) sempre

da ciência e dos artistas, patrono do mundo, era

dependem, portanto, do repertório de quem os vê.

sempre representado com um sol em volta da

Nós somos tão acostumados a símbolos que às

cabeça para mostrar que era um iluminado. Hoje,

vezes nem os notamos. Para um usuário de internet,

por influência da iconografia católica, entendemos

um arroba, por exemplo, assume o significado

todo círculo nesta posição como auréola, mas na

imediato de um e-mail ou de uma pessoa no

verdade esta alegoria representa iluminação (não

Twitter. Nas artes, o símbolo também se apresenta

necessariamente espiritual). Por este motivo, não é

e depende daquilo que você conhece para ser

incomum encontrar este círculo em cabeças não-

compreendido, mas o fato de você não reconhecê-

santas, como imperadores, nobres e ocasionais

lo não significa, em absoluto, que o elemento

filósofos. Exemplo: a auréola nas cabeças do

iconográfico não esteja presente.

imperador Justiniano e da imperatriz Teodora, na

Pode parecer meio óbvio para um católico, mas nem todos sabem que as chaves de São Pedro, em uma obra de arte, apontam para um personagem

Basílica de San Vitale, em Ravenna, na Itália.

Ainda na mesma linha, Jesus Cristo é representado com a cor branca e o demônio com

Carolina Vigna-Marú - ilustração :: 67

“Papa Gregório, o Grande, disse: ‘a imagem é a bíblia dos ignorantes’. A imagem torna visível um pensamento até mesmo para os iletrados”

a negra por causa de quem vê ou não a luz. Não é uma

Foi só com a Revolução Francesa de 1789 que estes

interpretação racista, um questionamento que sequer fazia

pressupostos foram rompidos. Era, finalmente, a época em

sentido na época do surgimento do cristianismo. Por este

que ser rebelde era sinônimo de ser inteligente, rebeldia

mesmo motivo, o Divino Espírito Santo é representado com

tinha status: “De repente, os artistas sentiram-se livres

uma pomba branca, por ser aquele que liga a Terra e o Céu -

para escolher qualquer coisa como tema, desde uma cena

e, portanto, voa - e é iluminado (branco).

de Shakespeare a um acontecimento do dia, o que quer

Na Grécia antiga, os médicos eram os sacerdotes de

que, de fato, apelasse para a imaginação e despertasse

Asclépius e as enfermeiras eram as sacerdotisas de Higéia

interesse. Esse descaso pelos temas objetos tradicionais

(higiene). O veneno da cobra era usado como anestesia. O

da arte pode ter sido a única característica que os artistas

emblema de Asclépius era uma cobra. Por isso, o caduceus,

bem-sucedidos do período e os rebeldes solitários tinham

símbolo da medicina, tem uma serpente.

em comum.” [GOMBRICH, E. H.; História da Arte; pág.

A arte egípcia tinha uma função de preservação e

481; tradução Álvaro Cabral, Rio de Janeiro: LTC, 2008.].

perpetuação do que ou de quem era representado. Por

Apesar de, depois de 1789, estas alegorias e símbolos não

isso, as figuras egípcias eram sempre mostradas a partir

serem mais imprescindíveis na arte, os seus significados

do seu ângulo mais característico. No mural do túmulo

permaneceram até hoje.

de Khnumhotep (c. 1900 a.C.) podemos ver claramente

Com tudo isso não estou dizendo que você precisa criar

que todas as figuras, inclusive peixes e pássaros, são

um ícone para o site do seu cliente que dure cinco mil anos,

representados com a cabeça em perfil e com o corpo de

mas talvez seja bom buscar referências que já fazem parte do

forma a mostrar os traços mais importantes para a sua

nosso inconsciente coletivo para conseguir uma comunicação

identificação, como o tipo de asa em um pássaro ou as

mais rápida e imediata. E, por falar em bons símbolos, pegue

escamas de um peixe. Hoje, as figuras humanas nesta

o seu cachimbo e sua lupa e assuma todo o seu lado Sherlock

posição tornaram-se um ícone da cultura egípcia.

na próxima vez que olhar para uma obra de arte.

68 :: Webdesign

User Experience Evangelist da Microsoft Brasil. É profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, AgênciaClick, Banco Real ABN AMRO. É criador da “usina.com”, portal focado no mundo on-line, e d o “ r a d i n h o d e p i l h a ” ( w w w. radinhodepilha.com), comunidade de profissionais da área. rene@usina.com

René de Paula Jr.

Última chamada - Atenção senhores artigos com destino aos leitores da Revista Webdesign. Última chamada para embarque no portão 80.

Sim, sim, eu ouvi o aviso. Foi em alto e bom som. Mas, well, eu estava enroladésimo.

- Atenção, senhor René de Paula Jr. Favor

aeronáutica cai bem. Ou melhor, pousa bem.

Em primeiro lugar: você não vê gente por aí dizendo que “mexe” com aviões. Ou o cara é engenheiro e projeta, ou é piloto, ou vende passagens, ou gerencia o espaço aéreo, ou é terrorista e derruba torres... E ninguém se diz

comparecer no balcão de artigos, última

um “especialista em aerossocial” só porque

chamada para embarque.

frequenta Cumbica.

Ufa, deu tempo. Meu artigo está já na sua

Já na internet, porém... É uma esquadrilha

(ou na tua?) poltrona e lá vamos nós em mais um

(e quadrilhas) de gente se autoproclamando

voo nas asas da reflexão.

especialistas nisso e naquilo, sem ter o mínimo de

Eu gosto de voar. Não tenho medo não.

Gosto mesmo é da hora em que o cara lá na frente aperta ou pisa ou puxa fundo um controle

horas de voo, sem ter jamais sentado na janelinha nem ter voado alto.

Mas deixemos os “padres voadores” pra lá. Se

qualquer e as turbinas catapultam o colosso pra

alguma empresa acreditou nos caras e tentou voar

fora do chão. Adoro essa arrancada. Mas mágico

com balõezinhos coloridos, agora é tarde, nem a

mesmo pra mim, aquilo que realmente me intriga

melhor busca do mundo vai achar o que sobrou.

e fascina, é o cara conseguir trazer de volta pro

Quero falar sobre como decolar, voar, pousar

chão uma baleia de aço. Na boa: um bom pontapé

e voar de novo de maneira viável. E isso vale para

ou um daqueles foguetes ACME do papa-léguas

projetos, para carreira, para ética.

tiram até um coiote do chão, mas o “the end” é outra história: como não se esborrachar?

Por mais que eu goste de parábolas (estou

Eu não sei bem o que você anda vendo, mas vou te contar o que tenho visto com cada vez mais frequência: empresas grandes que abriram

fazendo uma aqui e agora), parábola não é

N frentes diferentes na internet (blog aqui,

exatamente a curva que mais me agrada em

Twitter acolá, grupos no Ning, vídeos no YouTube,

termos de voo. Eu quero ir longe e pousar

comunidades no Orkut etc.) e agora estão cada

inteiro. E, por mais que eu seja um péssimo

vez mais desnorteadas. Mais ou menos como abrir

exemplo em termos de carreira (abandonei umas

a porta do galinheiro e tentar trazer 32 galinhas

três sem paraquedas, saltei no vácuo outras

em polvorosa de volta. Mais ou menos como

tantas, ando na corda bamba sem rede etc.) e eu

tentar colocar a pasta de dentes dentro do tubo

seja relativamente aéreo, acho que a metáfora

de novo. Mais ou menos como tentar reverter a

René de Paula Jr. - marketing :: 69

“E aí, que rumo você escolheu? Qual é a cara do futuro em que você está apostando? Quando você quer saber sobre o futuro, quem você ouve?”

terceira lei da termodinâmica (a tal da entropia).

O que aconteceu com essas empresas? Well, isso me lembra aquela tirada: “de graça até ônibus errado”. Pois é, acharam que embarcar de graça era uma boa pedida,

pensar: como será o futuro daqui a dez anos? Não estou falando só de computadores, lei de Moore ou celulares.

Estou falando no futuro do teu mundo. É muito provável que você não consiga pensar a

mesmo que não soubessem pra onde o avião ia. Ou se

respeito, porque não sabe o que está por vir. Aí está

chegaria lá, seja onde for. Ou se lá tinha aeroporto. Ou

o engano: o futuro não é algo que vem, é você que

se a aeronave tinha trem de pouso. Ou se no voo havia

está indo a todo vapor em direção a ele. É você que

homens-bomba. Ou se conseguiria recuperar a bagagem.

está voando uma direção e não em outra. Pensando de

Ou se... Pois é, essa história de “é grátis, vamos embarcar

novo em voos: pilotos de avião só decolam se sabem

enquanto é tempo” dá nisso: bad trips.

onde vão pousar. Já balonistas... Guiam-se por SDS

O que mais está no meu radar? Ou melhor, o que não está no meu radar? Gente com visão estratégica. Agências estão desesperadas para achar

(Só Deus Sabe): onde o vento os levar, eles vão. Padres voadores, inclusive.

E aí, que rumo você escolheu? Qual é a cara do

bons planejadores. Clientes estão caçando bons

futuro em que você está apostando? Quando você quer

planejadores. Projetos mal saem do chão porque falta

saber sobre o futuro, quem você ouve?

gente que entenda não só da decoração do aeroporto

Pensando na nossa profissão... Você tem certeza de

ou da qualidade do lanchinho ou das interações no

que o futuro é web? Ou será que a web (isso que a gente

saguão ou de atrações turísticas bizarras pelo mundo,

acessa via browsers) vai ser uma parte mínima de algo

mas sim de como arquitetar um bom plano de voo

maior, com N interfaces diferentes, N interações diferentes,

seguro e rentável. Na boa: não tem. E quem tem cobra

tudo isso respirando internet por todos os poros?

caro. E mais: os caras que sabem fazer isso não têm

Eu já estou me preparando para esse futuro.

tempo para socialidades. Você não vai encontrá-los

Mais do que isso: eu estou criando esse futuro.

peruando em eventos de padres voadores. Vai encontrá-

Dias atrás fiz um evento onde, diante de 100

los, com muito custo (sim, o ingresso é caro), em eventos

profissionais, conceituamos, criamos, desenvolvemos

decentes que trazem gente com horas de voo, gente

e implementamos o que há de ser um novo canal, um

responsável por negócios de grande envergadura. Fora

novo ponto de contato, uma nova maneira de relacionar

isso, é comprar balões vermelhos. Ou ver marmanjo

empresas e clientes. E, o que é mais legal: essa

jogando aviõezinhos de papel.

aplicação usa a internet, mas não é web. Ela trabalha

Estou usando e abusando dessa metáfora

on-line, mas também funciona off-line. E mais: open

aeronáutica para chamar a sua atenção não para o agora,

source. Aguardem mais notícias em breve. E apertem os

mas para o rumo que teus voos estão tomando. Pare para

cintos que esse piloto aqui já acionou as turbinas ;^)

70 :: Webdesign Nasceu e cresceu no Brasil, onde estudou Design e Marketing (sem terminar) até que teve a oportunidade de ir para o Japão. Trabalhou como designer de revistas e jornais até se tornar editor de arte (e posteriormente editor) de uma editora japonesa. Em 2001, a editora alemã TASCHEN (www.taschen.com) o contratou para ser o editor responsável pelas áreas de design e pop culture. Por lá, desenvolve o programa de títulos nas áreas de propaganda, graphic design, web, animação etc. letschat@juliuswiedemann.com

Julius Wiedemann

Entre o céu e o inferno no trabalho remoto Já fazem mais de dois anos que a minha

tento trabalhar sempre nos voos mais longos,

rotina de trabalho é muito flexível, tendo em

quando nenhum telefone toca e não existe

vista as constantes viagens e o fato de não

internet. Já que minha bateria dura em torno

mais fazer os meus livros a partir do escritório

de três horas, posso responder a uns 50 e-mails

central da Taschen, onde trabalhei por mais

pendentes, escrever um artigo e editar muitos

de seis anos. Hoje, divido o meu tempo entre

textos que chegam constantemente.

Alemanha, Inglaterra, Brasil e mais uns dez

Recentemente, voltando do Brasil para

países que somam anualmente uns quatro

Londres, corrigi mais de 240 páginas de um

meses de estadas mais curtas.

livro no voo do Galeão ao Heathrow. Assim

Quando explico o meu modo de trabalhar

que cheguei a Londres, comprei uma conexão

remoto às pessoas que venho a conhecer,

e dei o upload do arquivo em PDF que era

só escuto elogios e comentários com certa

relativamente pesado. Com conexão ótima

admiração. Afinal de contas, todos veem

(upload de 1 MB por segundo), em cinco

esse sistema como o futuro das profissões,

minutos eu estava livre para ir e meu assistente

principalmente como a minha, que depende

em Colônia, na Alemanha, não precisaria

de ler, escrever e editar. No entanto, poucas

esperar para eu chegar em casa, que ainda

pessoas pensam nos desafios que essa rotina

demoraria umas três horas. Foi tudo perfeito.

também gera, que são muitas.

Primeiro sempre as notícias boas. Não

Depois das primeiras vantagens, é preciso descrever também o outro lado da história.

posso reclamar de poder levar os filhos ao

Não ter escritório para trabalhar significa

parque num dia de sol e aproveitar a melhor

basicamente fazer tudo em casa, com os filhos e

hora do dia. Também fico livre para resolver

a família ao redor. Saber equilibrar a atenção a

burocracias e questões pessoais a qualquer

todos dentro de casa é um exercício diário, que

hora que seja, ou mesmo receber amigos com

requer sempre a mediação entre o trabalho que

mais liberdade. Como trabalho com mais de dez

tem que ser entregue e as atividades que temos

países simultaneamente com mais de dez horas

constantemente, desde o banho dos filhos, até

de diferença entre eles, fico com a vantagem

as refeições que fazemos juntos.

de poder trabalhar com a Europa e a Ásia de

Existe também sempre a questão das férias,

manhã, costa leste dos EUA a partir do almoço e

as quais eu quase nunca consigo fazê-las por

costa oeste dos EUA a partir do cair do sol.

completo, porque ou o computador veio junto

Tendo isso em mente, posso organizar as

(caso desse artigo, que escrevo diretamente de

minhas prioridades de acordo com os livros

uma cama em uma fazenda em Bananal, onde

que estou fazendo. Com cinco livros por ano,

não existe conexão de celular e apenas uma linha

e mais umas 25 palestras em dez países, minha

fixa), ou o meu celular/smartphone fica recebendo

rotina tem, além de muitas viagens, entregas

mensagens e telefonemas.

constantes. E elas não podem falhar. Por isso,

Mas vivi, há duas semanas, um daqueles

Julius Wiedemann - internacional :: 71

“Conforme as empresas evoluem e usam mais tecnologia para executar tarefas, nós também podemos mudar nossa maneira de agir”

momentos de desespero. Estava de viagem para Búzios

demorou a conectar com a internet, mas ele tinha uma saída

no sábado e, neste mesmo dia, fui brifado para entregar

USB e eu carregava o meu pen drive no bolso. Só assim

um artigo na segunda-feira. Certifiquei-me que o hotel

consegui finalmente passar o arquivo. Nunca imaginei que

tinha rede sem fio e que estava com todos os cabos

passar um texto seria uma operação de guerra como foi.

(esses têm que me acompanhar sempre) para que eu

Quis compartilhar os detalhes desta minha história

pudesse enviar tudo na segunda pela manhã, como

para ressaltar que o cotidiano envolvendo o trabalho

havia combinado. Na hora de encaminhar o arquivo, a

remoto também tem prós e contras. O importante é saber

rede sem fio do hotel não estava sendo reconhecida

adaptar o seu estilo de vida a um convívio harmônico

pelo meu computador. Resolvi, então, colocar o arquivo

entre trabalho e vida privada. Conforme as empresas

num pen drive para passar pelo computador do hotel.

evoluem e usam mais tecnologia para executar tarefas,

Também não funcionou. A saga começava.

nós também podemos mudar nossa maneira de agir.

Por sugestão de uma amiga, fomos na noite de

Nunca trabalhei tantas horas quanto ao período que

segunda a um hotel chique que tínhamos certeza que teria

vivi no Japão, mas certamente fui muito mais produtivo

uma boa rede sem fio e de lá enviei o artigo. Parecia estar

quando morei na Alemanha. Produtividade e horas

tudo bem. Segunda de manhã, recebo uma mensagem

de trabalho estão muitas vezes desconexas. Diversas

pelo Blackberry dizendo que o arquivo não tinha chegado

empresas já passaram a impor um dia de trabalho na

e entrei em pânico. O deadline já tinha passado. Voltei

semana a partir de casa e já veem os benefícios na

ao hotel, o que não resolveu. Para piorar, eu tinha que

produção de seus funcionários. E, diante da experiência

devolver um carro na locadora e não podia atrasar.

que relatei neste artigo, posso dizer que a principal lição

Lá fui eu então para a locadora, quando me lembrei que eles tinham um computador. Era super antigo e

que fica é: nunca se esqueça de preparar um plano B caso alguma coisa aconteça de errado.

72 :: Webdesign 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 ECAUSP 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 em seu blog, http:// www.luli.com.br. webdesign@luli.com.br

Luli Radfahrer

Criação em três dimensões Este não é um artigo sobre modelagem

nem esteja integrada a um planejamento é

de objetos, esculturas ou ilustrações para

considerada tão descabida e ridícula quanto

videogames. As dimensões a que me refiro

alguém, sem motivo aparente, ficar pelado em

no título não são os velhos e manjados eixos

uma festa. Direta ou indiretamente, a internet,

geométricos. Reconheço que há um enorme

com todos os seus desdobramentos em

talento em se projetar ambientes e personagens

produtos, serviços, acessibilidade e mensuração,

tridimensionais - com ou sem computadores

foi a principal responsável pela extinção do culto

-, mas ele pode ser facilmente incluído no que

à criatividade. Hoje, mesmo quem não entende

conhecemos por design. As três dimensões

nada de técnica, sabe mais ou menos o que

que eu proponho aqui são outras: criatividade,

esperar de uma máquina, e quem tem que se

técnica e planejamento.

virar é o autor do produto ou serviço, não mais

Já houve um tempo (acredite, eu vivi nele) em que a ideia bastava. Quanto mais inesperada

quem o consome.

Quem trabalha com design digital sabe

e diferente ela fosse, melhor seria. Quem

muito bem disso: a ideia criativa, que antes era

trabalhava com criação em design, arquitetura,

só composta por texto e imagem, nem sempre

comunicação ou moda era considerado uma

juntos, agora precisa ter um belo apoio técnico.

espécie de artista. E artistas, como doentes

Se não funcionar, ninguém a levará a sério. Vai

psiquiátricos, não podem jamais ser contestados.

ser como aquelas casas, pessoas e pratos de

Aqueles eram tempos muito confortáveis.

comida muito bonitos... E só.

Naquela época, quem sugerisse qualquer

O problema dessas habilidades é que elas

tipo de planejamento ou alguma tecnicalidade

demandam partes completamente diferentes do

a um “criativo” seria, no mínimo, considerado

cérebro, a tal ponto que quem é bom em uma

um chato sem imaginação ou refinamento

delas costuma não ter um desempenho satisfatório

(acho que, em alguns segmentos do mundinho

na outra. Bons produtos são criados em equipes,

da moda e da falida indústria da publicidade,

em que cada parte contribui com o que tem de

isso ainda vale hoje). A ideia era tratada como

melhor. Mas isso ainda não é suficiente.

soberana, grandiosa. Os outros departamentos -

No início da web comercial, lá pela segunda

incluindo o consumidor/usuário - que se virassem

metade da última década do século passado,

para compreendê-la, aceitá-la e admirá-la. Em

criatividade e técnica perceberam que não

propaganda, ela era tão venerada que tinha

podiam mais ficar separadas e, aos poucos e com

até um nome: BIG IDEA. Isso mesmo, assim, em

muita relutância de ambos os lados, começaram

inglês. Tá pensando que é pouca porcaria?

a se aproximar. Foi quando surgiu a figura do

Esse tempo, ainda bem, acabou. Hoje, uma ideia que não funcione perfeitamente

webdesigner, um centauro profissional que não é designer nem técnico e que costuma ser

Luli Radfahrer - webdesign :: 73

“Hoje, uma ideia que não funcione perfeitamente nem esteja integrada a um planejamento é considerada tão descabida e ridícula quanto alguém, sem motivo aparente, ficar pelado em uma festa”

explorado por seu chefe esperto, que o quer ver fazendo

velha mídia: arquitetura de informação, usabilidade,

o trabalho de dois pelo salário de meio.

otimização para mecanismos de busca e mídias sociais,

Criatividade e técnica conviveram sem se misturar

métricas de todo o tipo e em tempo real passaram

por um bom tempo. Feito pessoas que dividem um

rapidamente de novidades para necessidades. O mundo

apartamento para economizar despesas, cada uma

da gambiarra digital começava a desmoronar.

tinha seu canto e podia, lá dentro, fazer o que quisesse

Hoje não é possível se pensar em uma ideia

sem que ninguém reclamasse, contanto que as áreas

efetivamente boa para um produto digital ou interativo

coletivas ficassem suficientemente arrumadas. O

(um não é sinônimo do outro, sempre vale a pena lembrar)

usuário, ao visitar a sala desse apartamento, tinha a

sem se pensar em um bom planejamento. Pelo menos não

impressão que estava tudo OK, mesmo que a base de

fora de uma instalação artística ou escola politécnica.

dados, a programação, as cores e imagens estivessem

Por mais que seja desconfortável para quem o

completamente caóticas. Isso às vezes resultava em uma

produz, esse novo mundo é muito melhor para quem,

ou outra demora ou incompatibilidade, mas tudo era

como todos nós, o consome. A integração das três áreas

novo demais para que alguém reclamasse.

dá mais trabalho, mas deixa a casa limpa, arrumada e

Mas, todos sabemos, o ser humano é um bicho

sem surpresas. Para você que trabalha com criação, fica

mimado e insatisfeito, que tende a se acostumar

uma dica: tente conhecer as outras áreas, principalmente

rapidamente com as coisas que conquista. Na internet

os pontos em que elas afetam seu trabalho. E procure

não poderia ser diferente. Não demorou para que

mostrar aos outros o que você faz e como as decisões

os novos profissionais percebessem que era possível

deles afetam seu trabalho.

integrar um produto ou serviço web a um planejamento maior, que envolvia ambientes nunca sonhados pela

É melhor para todos, principalmente para quem usa o serviço que você faz.

74 :: Webdesign

Luis Rocha é carioca, flamenguista e jornalista. Atualmente, trabalha como diretor de redação da Revista Webdesign. Além de escrever mensalmente todas as reportagens da revista, também procura exercitar sua veia criativa com a produção de poesias e contos no blog Meu Lírico-Eu (http://meuliricoeu.blogspot.com).

Contato: lrocha@gmail.com

A vida .com ela é... Ou uma tragédia à la Nelson Rodrigues “Sou um menino que vê o amor pelo buraco da fechadura. Nunca fui outra coisa. Nasci menino, hei de morrer menino. E o buraco da fechadura é, realmente, a minha ótica de ficcionista. Sou (e sempre fui) um anjo pornográfico.” (Nelson Rodrigues) Sou Francisco, arquiteto e sociólogo. Filho de José com Maria. Divorciado de Teresa, pai outrora orgulhoso de Iracema. Quarenta e sete anos de vida real. Hoje, completo

conhecer o mundo - do MSN, dos blogs, do Twitter, do Orkut -, sem estar debaixo de minhas asas protetoras.

No entanto, essa caminhada virtual implicava na idolatria

treze de experiências virtuais. Até ontem, existiam mil

de figuras midiáticas pra lá de duvidosas, como a tal da Bruna

motivos para celebrar esta data, mas...

Surfistinha, que a deixara com um ar de Capitu, clássica

Apesar de utilizar e usufruir de todos os benefícios das

personagem de um dos clássicos de Machado de Assis,

novas tecnologias de comunicação, de telefones celulares

comumente reconhecida pelos seus “olhos de ressaca, como os

à internet, salve o e-mail, o Skype e o MSN, ainda assim

de uma cigana oblíqua e dissimulada”.

mantive a minha paixão juvenil pela escrita e leitura dos meios impressos e dos grandes clássicos da literatura brasileira.

Nesse ínterim de mudanças em tempo real, Iracema se apaixonou por um sujeito popular e de alcunha Evilásio69,

Para se ter uma ideia desta idolatria, vocês devem ter

mancebo bom de papo eletrônico e que prometera honrá-la

percebido, logo de início, que o nome de minha filha, Iracema,

virtual e presencialmente. Mas, como pressentimento de pai

é uma singela homenagem ao belo romance homônimo de José

“tarda, mas não falha”, uma tragédia era questão de bits e

de Alencar (Não conhece? Uma pena, quem sabe o Wikipedia

bytes para se consumar...

possa iluminar seus pensamentos... Por favor, entenda-me:

Na última semana, alertado por alguns conhecidos

quero ser breve e compartilhar de uma vez por todas esse meu

“pornonautas”, investigadores desse submundo virtual

sofrimento digital!).

masturbatório, descubro - através do senhor de todas as

No exato momento que digito esse desabafo via Google

buscas, Google - que meu pequeno querubim (que, segundo o

Docs, as lágrimas inundam meu teclado cada vez que releio

definitivo e palpável Aurélio, significa “criança muito linda”) foi

uma das passagens do livro, que repousa religiosamente

pervertido... E o pior: tudo registrado via webcam!

ao lado do meu notebook, lembrando a tragédia ocorrida

Agora, Iracema é mais idolatrada do que “Eu sou

com Iracema (e que certamente poucos terão o prazer e a

Stephany (no meu Cross Fox)”, é trending topic semanal dos

paciência de descobrir nos próximos parágrafos):

tuiteiros mundiais, além - é claro - de ser a estrela preferida

“...Além, muito além daquela serra, que ainda azula

e milimetricamente exibida, nos máximos pixels e posições

no horizonte, nasceu Iracema... a virgem dos lábios de mel,

possíveis, pelos sites eróticos que se multiplicam como gripe

que tinha os cabelos mais negros que a asa da graúna e mais

suína pela grande rede.

longos que seu talhe de palmeira...

O pé grácil e nu, mal roçando, alisava apenas a verde pelúcia que vestia a terra com as primeiras águas...”

Parece que foi ontem que a vi entrando toda de branco

Afinal, onde errei? Minha dedicação para que fosse uma boa moça foi total. Paguei balé. Curso de inglês.

Faculdade. Dei-lhe as roupas da moda... Eu até briguei com os meus melhores amigos para não admitir que Brás

na Igreja, durante sua primeira comunhão. Ou ainda, das

Cubas, protagonista de outro clássico de Machado de Assis,

travessuras com suas amigas, brincando inocentemente na

descobrira o sentido da vida.

cama de seu quarto - preparado especialmente para ela, diga-se de passagem!

Porém, o tempo (talvez, hoje, a internet seja) é senhor da razão e Iracema cresceu rapidamente. Como sempre, fiz

Porém, depois da perversão digital, virtual e interativa de Iracema, repetirei eternamente - via Twitter - a célebre frase “brás-cubiana”, perfeita para os 140 caracteres permitidos, como se fosse meu mantra da eterna libertação (on-line):

o possível e o impossível para atender a mais um de seus

"Não tive filhos, não transmiti a

desejos: ser a primeira menina do colégio a ter um poderoso

nenhuma criatura o legado

computador portátil. Sabia que chegara a hora de Iracema

da nossa miséria".

Observação: este conto foi o vencedor do III Concurso Literário | Dia do Escritor - Scritta Online (http://migre.me/6Fi2).

6 :: Webdesign