Você está na página 1de 68

fevereiro 2006 :: ano 3 :: n 26 :: www.arteccom.com.

br/webdesign

a voz em fOrmA dE imageM


EntreviSTa: jos Bessa (elEsbo e HaroldinhO)
O verdadeiro profissional absorve e compartilha, para que o mercado cresa

Estudo de caSo:

bondfaro.com
Redesenho para facilitar a navegao dos usurios

Portflio agncia: Euro

RsCG 4D

Liberdade como estmulo no processo de criao

R$ 8, 90

direitos autorais

4 :: quem somos

Editorial

Equipe
Direo Geral Adriana Melo
adriana@arteccom.com.br

Do meu v Luiz...
Quem passou pela vida em brancas nuvens E em plcido repouso adormeceu Quem no sentiu o frio da geada Quem passou pela vida e no sofreu Foi espectro de homem, no foi homem S passou pela vida, no viveu. Saudades do meu vov Luiz... essa poesia decorei de tanto ler o livro que ele nos deixou. Meu av era um fazendeiro do interior de Minas e, cheio de amigos, tinha um caderno onde estes escreviam suas poesias ou de terceiros, enfim, deixavam ali uma recordao para ele. Em cada letra, desenhada nanquim e bico de pena, dava praticamente para imaginar cada amigo do meu av. Este gostava muito dele, como caprichou nas capitulares... como disps de seu tempo. Depois lia outra, com um tipo mais corrido, uma escrita mais rpida, e imaginava: este deve ser um daqueles amigos polticos dele... seria um dos Canedo? Fora o contedo das poesias, que tambm dizem muito das pessoas que as escrevem. Talvez digam at mais do que elas mesmas sobre si. Bem, de volta a 2006. ... as pessoas no escrevem mais poesias, no enviam cartas, no desenham mais letras. Mas continuamos interpretando o que escrito da mesma forma. J que no temos mais o prazer de desenhar cada tipo e cuidar para que no caia uma s gota de tinta no papel, vamos utilizar esse tempo para escolher muito cuidadosamente a fonte para que contedo seja transmitido eficazmente. Com certeza, ela vai te ajudar a transmitir sua mensagem e a atingir o objetivo de seu projeto. Boa leitura e um grande abrao! Adriana Melo

Direo de Redao Luis Rocha


luis@arteccom.com.br

Criao e Diagramao Camila Oliveira


camila@arteccom.com.br

Leandro Camacho
leandro@arteccom.com.br
:: A Arteccom no se responsabiliza por informaes e opinies contidas nos artigos assinados, bem como pelo teor dos anncios publicitrios. :: No permitida a reproduo de textos ou imagens sem autorizao da editora.

Ilustrao Beto Vieira


beto@arteccom.com.br

Assinaturas Jane Costa


jane@arteccom.com.br

Gerncia de Tecnologia Fabio Pinheiro


fabio@arteccom.com.br

Desenvolvimento Web Eric Nascimento


eric@arteccom.com.br

Financeiro Cristiane Dalmati


cristiane@arteccom.com.br A Arteccom uma empresa de design, especializada na criao de sites e responsvel pelos seguintes projetos: Revista Webdesign :: www.arteccom.com.br/webdesign Curso Web para Designers :: www.arteccom.com.br/curso Encontro de Web Design :: www.arteccom.com.br/encontro Portal Banana Design :: www.bananadesign.com.br Projeto Social Mag-Malien :: www.arteccom.com.br/ong

Criao e edio
www.arteccom.com.br

Produo grfica
www.prolgraca.com.br

Distribuio
www.chinaglia.com.br

menu :: 5

apresentao pg. 4 quem somos pg. 5 menu

contato pg. 6 emails pg. 6 fale conosco

fique por den tro pg. 8 direito na web pg. 10 bloguices

portflio pg. 12 agncia: Euro RSCG 4D pg. 18 freelancer: Alex Leo

matria de capa pg. 20 entrevista: Jos Bessa pg. 28 tipografia na web: como garantir o sucesso esttico e funcional de seu projeto

e-mais pg. 39 debate: o poder das comunidades pag. 46 como administrar o tempo

com a palavra pg. 58 experience design: Claudio Toyama pg. 60 marketing: Ren de Paula Jr. pg. 62 bula da Catunda: Marcela Catunda pg. 64 webdesign: Luli Radfahrer

6 :: emails

Assunto: Novidades para maro Parabns pela organizao do evento e pela maravilhosa revista. Gostei muito da esttica da ltima Assunto: Segurana na web Gostaria muito que vocs explicassem como fazer para sabermos se o site em que estamos realmente seguro ou no. Sei que quando ns clicamos no cadeado que aparece no canto direito da pgina, h informaes de certicados de segurana. Mas acabei de ler uma matria sobre isso e j esto falsicando as informaes bem como os cadeados que aparecem (Curiosidades: Golpistas usam certicados digitais para phishing, site Infoexame). Ah, j ia esquecendo: sou leitora da Webdesign faz pouco tempo, acho que seis meses. Gosto muito da revista, mas s vezes no entendo nada de programas e de certas palavras. , eu sei que tenho que fazer um curso bom de webdesign, mas no tenho condies de bancar com as mensalidades. Aqui, os cursos so caros. Vocs no teriam uma dica para me dar? Sou iniciante.
Juliana de Souza juliana.dsouza@bol.com.br

Mtricas e Mercado, onde publicaremos novidades sobre emprego e estatsticas atualizadas sobre e-commerce, hospedagem, segurana, navegadores, domnios etc. Qualquer sugesto adicional, fale conosco pelo site da Webdesign. Assunto: Cadastro de portflio Na edio 24, havia um pequeno comentrio sobre uma diviso feita no cadastro de portflios. Mas no encontrei essa diviso no site. Fiz o cadastro, mas at agora nunca recebi um informativo sequer da revista, at para conrmar o cadastro. Tenho interesse em participar na parte de portflio calouro! Um forte abrao,
Roberto Fernandes roberto@fatordigital.com.br

edio, estava mais bonita que o habitual. Tenho uma sugesto: por que vocs no deixam uma pgina como mural de empregos, onde as empresas divulgam que tipo de prossionais esto precisando e informaes para contato? Estou com uma diculdade tremenda para encontrar algum prossional com conhecimento em WebStandards em Ribeiro Preto. Se essa seo existisse, seria muito mais fcil para as pessoas que passam pela mesma situao. Sucesso a vocs e at a prxima edio :-)
Caio Vincius caio.audax@gmail.com

Assunto: Freelancer organizado Adorei a seo de downloads! Minha vida de freela cou muito mais organizada. Parabns a toda equipe Webdesign.
Cosme cosmefm@gmail.com

Oi, Cosme. A idia essa: ajudar nosso leitor em sua caminhada prossional. Lembrando que na seo Downloads, do site da revista, possvel obter os seguintes modelos: tabela referencial de custos de site, modelo de brieng, contrato de prestao de servios de desenvolvimento de site, proposta e pesquisa de satisfao. Assunto: 11 EWD Parabns pelo excelente EWDSP! O mercado de webdesign realmente carece de timas iniciativas como esta. Isso s fortalece nossa prosso. O evento estava muito bem organizado, desde o local, stands e palestras. Alis, excelentes palestras. Para terminar com chave de ouro, as premiaes mostraram o que est sendo feito de bom neste mercado. Mais uma vez parabns e muito sucesso a Arteccom!
Tercio Strutzel tercio@mktable.com.br

Ol pessoal, com certeza no tem como se lembrar das pessoas que mandam sugestes, pois creio que sejam muitas. Mas j enviei algumas, rsrsrsrs. A de hoje no especca sobre webdesign, nem programao, e acho que pode chamar as pessoas a comprar a revista. A idia manter uma lista de empregos na revista, se possvel os to falados empregos distncia, porm quase nunca vistos. A maioria dos prossionais (isto inclui eu) procura este tipo de emprego. Portanto, seria uma boa para os leitores e para a revista ter algo do tipo. Valeu e at mais. []s
Juliano Nunes juliano.net@gmail.com

Estou enviando esse e-mail por uma dvida. Sou novo na prosso de webdesigner e no tenho um portflio grande. Ento, gostaria de saber melhor como funciona o cadastro de portflio do site. Espero respostas,
Danilo Carvalho minotauro_nc@yahoo.com.br

Ol, Roberto. Implementamos essa diviso em janeiro. Por favor, visite o site da revista (www.arteccom.com.br/ webdesign) e conra as mudanas. Seu portflio foi cadastrado com sucesso. Essa rea gera uma grande demanda e mensalmente vamos analisando os profissionais e as agncias cadastradas. Aguarde! Danilo, para cadastrar seu portflio, basta entrar no site da revista e preencher seus dados no formulrio localizado no lado esquerdo. Boa sorte!

Ol, Juliana. Na edio 21 (setembro), zemos uma longa abordagem sobre o tema Segurana. Inclusive, h dicas de como identicar os sites seguros. Como voc est iniciando, uma boa pedida ler a Cartilha de Segurana para Internet (http://cartilha.cert.br/), preparada pelo CERT.br. Sobre cursos, voc pode conferir os anncios publicados nesta edio.

Caio e Juliano, a participao de vocs sempre fundamental para que nosso trabalho evolua. Depois do Bloguices (pginas 10 e 11) e da nova diagramao, vamos trazer em maro mais uma novidade: uma seo chamada

Oi, Tercio. Muito bom receber esse tipo de feedback, pois assim temos um parmetro sobre a qualidade dos eventos. Aproveitamos para anunciar que a 11 edio do EWD comear em maio. O novo site do evento j est quase pronto.

fale conosco pelo site www.arteccom.com.br/webdesign


:: Os emails so apresentados resumidamente. :: Sugestes dadas atravs dos emails enviados revista passam a ser de propriedade da Arteccom.

8 :: direito na web

Plgio
Acho que a revista deveria falar sobre plgio na internet. Salve os criadores e diga no pirataria. Bruno Neves - contato@brunofree.com.br Muitas pessoas confundem a prtica de plgio com a de reproduo ou cpia desautorizada de uma determinada obra. De acordo com o Dicionrio Houaiss da Lngua Portuguesa (2000), Plagiar significa: 1. apresentar como da prpria autoria (obra artstica, cientfica etc. que pertence a outrem); 2. fazer imitao de (trabalho
Marianna Furtado advogada com ps-graduao em Direito da Propriedade Intelectual pela PUC-Rio. Atualmente, pertence equipe do escritrio Montaury Pimenta, Machado & Lioce Advogados.

Certo que o elemento determinante na identificao da ocorrncia da prtica de plgio o fato de que nenhuma criatividade oriunda do intelecto do ento plagiador acrescentado quela criao a que se recorreu para criar a obra-plgio, aproveitando-se a prpria estruturao ou apresentao do tema da obra original.

alheio). Assim preciso esclarecer que plgio no necessariamente uma cpia servil, idntica de obra alheia. O plgio uma prtica de carter ofensivo maior do que a cpia, vez que, ardilosamente, o plagiador apodera-se da criatividade da obra de um terceiro, disfarando-a para que aparente ser uma obra nova. Por isso, a diferenciao entre as modalidades de infrao em usurpao e contrafao. Na usurpao, o infrator apresenta como sua obra de outrem, furtando do verdadeiro criador a sua autoria. Na contrafao a obra no simplesmente copiada e sim recomposta de maneira a aparentar ser obra nova autnoma daquela em que serviu de origem para o plgio. Entretanto, h que se destacar que no constitui prtica de plgio os casos em que ambas as obras - mesmo possuindo semelhanas oriundas das caractersticas comuns daquele determinado objeto - possuam cada uma criatividade prpria.

Caando os e-plagiadores
"Vasculhar a internet em busca de contedos semelhantes ou copiados sem autorizao prvia o objetivo principal do Copyscape (www. copyscape.com). Trata-se de uma ferramenta de busca que pode ser utilizada para acompanhar os caminhos de um contedo publicado e descobrir se foi plagiado por algum website. O sistema tambm pode ser usado para localizar citaes legtimas de contedo online."
Fonte: InfoGuerra (www.infoguerra.com.br)

Envie sua dvida para: marianna@montaury.com.br

10 :: blog

Bloguices
E como diria Jorge Benjor em Fevereiro tem carnaval.
Janeiro um ms que nasce morto. saber que, deu pau na Nasdaq, o mundo www explode.

By Margarida Flores
apareceu_a_margarida@hotmail.com

Nada pra fazer seno esperar o mundo voltar de frias enquanto o sol brilha para quase todos. Mas, ao contrrio do lado daqui, o mundo Nasdaq no descansa, e quem vive a rotina digital no pode deixar de ler e

E toma tabela. Pior que decorar tabuada. Quem vive a rotina digital no pode deixar de ler e conhecer o site me do mundo virtual, uma bolsa de valores em corretores. http://www.nasdaq.com/ - Fonte - By my self

Luzes! Cmera! Google!?!


Como se no bastasse mandarem em um bom pedao da internet, agora o Google vai entrar com pipoca nas salas de cinema bancando um filme independente. Sero dados US$ 500 mil a Reid Gershbein para que o cineasta possa terminar Broken Arrows. O roteiro narra a trgica histria de um homem que perde sua mulher em um ataque terrorista e por conta disso resolve sair por a fazendo justia com as prprias mos. - Fonte by Magnet

Portas e Windows Escancaradas para 2006


Dizem que se conselho fosse bom a gente no dava, vendia. Mas os caras do Internet Storm Center (ISC), do SANS Institute, no pensaram assim e lanaram um SOS:Se voc um feliz ou infeliz usurio do sistema operacional Windows, corra para instalar a correo de segurana no oficial imediatamente, tipo agora. A coisa toda pra proteger voc de ataques como os via e-mail compostos por ttulos como happy new year (feliz ano novo), com um arquivo HappyNewYear.jpeg, que ao contrrio de um voto de felicidades pra 2006 se trata de um arquivo WMF corrompido. A histria agora a seguinte, nem os JPEG esto livres do WMF. Resumindo, que se lixem os cartezinhos de natal bonitinhos, deleta essas porcarias. Telefone t a pra ser usado. Leia e entenda voc mesmo o boletim da Microsoft: http://www.microsoft.com/technet/security/ advisory/912840.mspx . - Fonte by IDG Now

Tem uma Boquinha a pra mim?


E no que na China jogar virou emprego? Em turnos de doze horas os sortudos chamados de Fazendeiros do Ouro se revezam enquanto brincam com jogos. A nova modalidade de mo-de-obra nada mais faz do que queimar etapas e vender personagens de games. So os mercenrios do start. Eles enfrentam as mais sangrentas batalhas, sofrem nas mos impiedosas de monstros, caam os mais valiosos tesouros e depois vendem pra voc. isso mesmo, senhoras e senhores, a terceirizao chegando ao mundo dos games, inclusive os multi players. Se esse trabalho d dinheiro? Por l os caras to tirando unsUS$ 250 por ms. T dentro. Fonte by Folha Online

blog :: 11

Nova seo!
A partir desta edio as notcias da seo clipping sero dadas por Margarida Flores!

LINKS BRINDES
T com sono? T com fome? T com dengue? Links brinde, em 2006 mais entretenimento pra vocs. Esse bisonho: plstico bolha. Estoure as bolhinhas e s. Ploct! http://www. bossmonster.com/games/bubblepop.html

Todos os links esto no site da revista.

Prmio Selo RIOfazDESIGN 2006.


O Selo RIOfazDESIGN um prmio concedido a empresas e instituies instaladas no Estado do Rio de Janeiro que utilizam com regularidade o design como ferramenta em seus diversos setores e nveis de atuao: impressos e meios de comunicao, equipamentos e veculos, uniformes, embalagens, produtos e tudo mais que der pra fazer design. O Prmio se divide em 7 categorias. Quem ganhar ter o direito de utilizao do Selo RIOfazDESIGN 2006, um atestado de diferencial de qualidade e o direito de participar da III Exposio RIOfazDESIGN. As inscries vo de 4 de janeiro a 4 de fevereiro de 2006. Pra saber mais: riofazdesign@sede.rj.gov.br

A pirataria t comendo solta por a, mas um seleto grupo de artistas nem deveria se preocupar com isso. http://www.zonicweb. net/badalbmcvrs/index.htm Vai dizer que no lembra daquelas baladas que os Scorpions faziam nos anos 80? Pode confessar, fala baixinho, ningum vai ouvir. Msicas que embalaram namoros, violentos rompimentos, aquela profunda sensao de que ningum te ama, ningum te quer. Aqui uma verso acstica. http://crass.on.ru/ flash/bbird.html Al? Al? Al? De onde falam? Em vez de atender o telefone normalmente, as pessoas levam orelha os objetos mais variados e incomuns do planeta como animais, monitores de computador, cestos de lixo e muito mais. rea especial para brasileiros. Cheque pra rir. http://www.sidetalkin.com/ photos.html

Time elege as melhores fotografias de 2005


Veja voc mesmo e no se choque. Nem tudo so flores no mundo. Uma dica, lencinhos de papel em mos porque a coisa no vai ser fcil. Vale a digitao http://www.time.com/time/yip/2005/

FLASH BACK
DOCES LINKS DO PASSADO. Dificuldade em se expressar? As pessoas dizem que voc insensvel demais? No se preocupe. Isso tudo pode simplesmente ser dificuldade em demonstrar emoo nas suas expresses faciais. Emotion Eric demonstra exemplos prticos para voc. Entre nesse link pr-histrico e aprenda com o mestre: http://www.emotioneric.com

Previses de Michel Lent para o Web New Year


1. Os salrios dos publicitrios com conhecimento de internet vo inflacionar. Nas grandes agncias, estes salrios iro se equiparar ou passar os salrios dos publicitrios tradicionais. 2. Veremos um movimento migratrio de contas online indo para agncias especializadas. Grandes clientes, deixando grandes agncias tradicionais sem expertise em interactive, buscando agncias focadas neste ferramental. 3. At o final de 2006, 2 ou 3 novas agncias especializadas em online ganharo grande destaque no mercado brasileiro. Se transformaro em hot shops queridinhos do mercado, num movimento parecido com o que j acontece nos Estados Unidos e Europa. E tem mais previses. A fonte do prprio. Digite e leia em http://www.lent.com.br/viu/

RDIO DO MS
O papa pop. O pop caribenho. http://www.more94fm.com/

NOTA IMPORTANTE
Margarida Flores sofre ataque de amnsia. Margarida Flores sofre ataque de amnsia. Perdi a cabea e minha senha do Hotmail. E quem consegue decorar tanta senha? Eu no. Cadastrei e esqueci mesmo. Isso que dizer que, o margarida.flores@hotmail.com j era. Quer mandar uma email com dicas, elogios, elogios, elogios, elogios ou divulgar o seu evento, se for legal eu falo dele. Mande para: apareceu_a_margarida@hotmail.com

D olho nas prateleiras. Chega ao Brasil o Manual do Estilista


T na moda ler. Alis, sempre esteve. No esquea ento (se o assunto te interessar) de ler Fashion Design - Manual do estilista, da britnica Sue Jenky Jones, uma bblia para estudantes e interessados no tema. Completssimo.

Teu Blog legal?


Manda o link. Dose dupla de prediletos. http://catarro.blogspot.com/ http://www.gardenal.org/ressacamoral/

12 :: portflio agncia - Euro RSCG 4D

O RECONHECIMENTO INTERNACIONAL DO TALENTO BRASILEIRO

Eles esto de olho em nosso talento. No, a redao da revista Webdesign no foi contaminada pela mania de perseguio. apenas uma constatao do crescente sucesso que os profissionais de internet no pas vem fazendo no mercado gringo. Um bom exemplo desse cenrio faz parte da histria da Euro RSCG 4D (www.eurorscg4d. com.br) no Brasil. A agncia surgiu em 1999. Eu e minha scia, a Roberta Raduan, tnhamos uma produtora de web (WBD) e prestvamos servio para alguns clientes, entre eles a Intel. Foi por causa de uma promoo na internet que desenvolvemos para eles que o grupo Euro RSCG nos conheceu, gostou do nosso trabalho e nos convidou para fazermos parte da rede. Na poca, chamamos Euro RSCG Interactive, depois Interaction e, h dois anos, somos 4D, revela Alon Sochaczewski, scio-diretor de criao da agncia. A incluso do termo 4D foi uma estratgia ocorrida globalmente. Ela representa mais do que uma troca de nome. Os 4D falam de quatro disciplinas que atuamos hoje em dia: Digital, Direct (Marketing Direto), Drive (promoes, aes no ponto de venda, eventos) e Data (trabalho inteligente com banco de dados). Ou seja, hoje nossa agncia e as outras 44 do grupo Euro RSCG 4D fazem Marketing Services, integrando essas disciplinas e entregando um trabalho coeso e sempre muito criativo, define.

portflio agncia - Euro RSCG 4D :: 13

(A bolha da internet) foi uma overdose de desinformao, apostas despropositadas na web, tudo totalmente fora de controle, o que prejudicou demais o desenvolvimento da internet no pas
Furando a bolha O ano de 2001 deixou marcas profundas em alguns profissionais que trabalhavam com internet na poca. Esse perodo ficou conhecido como bolha da internet, quando a supervalorizao das empresas pontocom acabou se tornando um grande desastre comercial, aps o boom ocorrido entre 1999 e 2000. durante os seis anos de existncia uma grande conquista. Ele destaca tambm as importantes premiaes recebidas ao longo desse tempo. O ano de 2005 foi, particularmente, um perodo de grandes conquistas, com mais de 60 prmios ganhos em festivais nacionais e internacionais. Em Cannes, que o Oscar do nosso mercado, levamos cinco lees e fomos a terceira agncia interativa mais premiada do mundo. No
Bolha da internet

Brasil, tambm fomos a agncia do ano no Prmio About, e a mais premiada no ABANET, que reconhece cases e no peas isoladas. Destaco tambm os dois prmios AMAUTA que recebemos, o mais importante festival de marketing direto da Amrica Latina. Mas nem s de prmios vive uma agncia. Outro destaque importante foi a conquista da conta das cervejarias Kaiser, um cliente muito aberto, maduro, que nos possibilitou colocarmos no ar grandes campanhas e projetos, diz. Liberdade para se atingir a criatividade Uma dvida muito comum de quem inicia na profisso envolve a formao de uma agncia web. Na Euro, o perfil bem variado. Te m o s v r i o s p e r f i s d e n t ro d a a g n c i a . D e s d e o fera em tecnologia, ao expert em mdia, passando pelo profissional de atendimento, planejamento, pelos criativos - diretor de arte, redator. Sempre oferecemos palestras e possibilidades para nossa equipe reciclar seus conhecimentos e incentivamos isso o tempo todo. No mais, nosso time tambm trabalha integrado, ou seja, buscamos quebrar a diviso de trabalho on e off-line e incentivamos a todos trabalharem em todos os jobs da casa, explica Alon. Um aspecto fundamental para estimular a criatividade/ produo dos profissionais que trabalham na agncia

A entrada do sculo XXI foi um momento de fora na Internet. O bug do milnio no gerou prejuzos e grandes empresas da era virtual que nasceram de pequenas idias como Hotmail, Google, Yahoo e Amazon contabilizaram lucros antes impensveis. Ao mesmo tempo, teve incio o tempo das grandes fuses de empresas, como a reunio dos grupos AOL e Time-Warner. A chamada Bolha da Internet estava inflando e no demoraria muito a estourar. Fonte: Terra Tecnologia (http://tinyurl.com/cx76q)

Enfrentamos a bolha da internet e, nessa poca, as pessoas no tinham noo alguma de como a tecnologia podia trabalhar para as suas marcas. Foi uma overdose de desinformao, apostas despropositadas na web, tudo totalmente fora de controle, o que prejudicou demais o desenvolvimento da internet no pas. Mas sempre fomos muito srios e comprometidos com o negcio dos nossos clientes, por isso passamos por aquele perodo e estamos aqui hoje, fortes e crescendo e, melhor, ganhamos o respeito e a admirao do mercado, afirma Alon. 2005: o ano das premiaes Dentre as principais realizaes j alcanadas pela agncia, Alon diz que manter um crescimento constante

14 :: portflio agncia - Euro RSCG 4D

Sempre oferecemos palestras e possibilidades para nossa equipe reciclar seus conhecimentos e incentivamos isso o tempo todo
CASES Kaiser - Videokast
www.kaiser.com.br

www.eurorscg4d.com.br

envolve o planejamento do ambiente fsico (estrutura, decorao, computadores etc). O que damos aos nossos profissionais liberdade. Liberdade para colocar psteres pela agncia, para decorar seu ambiente de trabalho, para fazer suas pesquisas e dividir com o grupo as novidades que descobriu. Acredito que isso motivador e ajuda a turbinar sua criatividade. Tambm propiciamos um ambiente alegre, jovial, um ambiente de equipe mesmo, revela. Segundo Alon, o estmulo criatividade representa o segredo para uma agncia sobreviver no disputado mercado de internet. Criatividade a palavra-chave, o nosso segredo e o motivo pelo qual estamos aqui, crescendo, conquistando prmios e clientes, completa. E tudo isso vai ajudar tambm na consolidao dos diferenciais da agncia. Somos uma agncia que faz Marketing Services, ou seja, no temos uma soluo pronta para nossos clientes. Eles nos trazem seus problemas de comunicao, ns olhamos para ele e levamos a soluo ideal, que pode ser na internet, ou uma promoo, uma ao no ponto de venda, um evento, ou tudo isso junto, i n t e g r a d o . Te m o s d i v e r s a s f e r r a m e n t a s e a s u s a m o s conforme a necessidade do cliente naquele momento. Trabalhamos comunicao integrada, sempre de forma muito criativa e ousada, aponta. Dando continuidade as inovaes realizadas, em agosto de 2005, no site da cervejaria Kaiser, a Euro RSCG 4D implementou, no comeo de janeiro, a tecnologia videocast, rebatizando-a de videoKast, com K de Kaiser. Para quem ainda no sabe, videocast so arquivos de imagens transmitidos pela web. No caso do site da Kaiser, a tecnologia permite que as pessoas transformem fotos em um vdeo dinmico, editando-o com efeitos especiais, trilhas e outros recursos.

portflio agncia - Euro RSCG 4D :: 15

A ferramenta para edio do videocast foi desenvolvida pela agncia. Entre as vantagens, o usurio pode salvar seu videocast durante a produo, inserir frases (letterings), fazer quantos videocasts quiser e envi-los por e-mail para os amigos, dividindo com eles seus melhores momentos.

Diante disso, a Euro RSCG 4D recebeu a misso de desenvolver o site do Concurso Garota Veet, criado para ser a principal ferramenta de votao no concurso e principal mdia para as candidatas buscarem votos. O planejamento de mdia no poderia ter sido melhor: o site atingiu cerca de 70 mil cadastrados que votaram nas garotas participantes do concurso. O site contou com 69 mil votos via internet e 750 votos por celular (SMS), alm da inscrio de 700 garotas, das mais diversas cidades do Brasil.

Garota Veet
www.veetbrasil.com.br/garotaveet

A Reckitt Benckiser tinha como objetivo rejuvenescer o posicionamento dos seus produtos depilatrios Veet no mercado brasileiro. O objetivo da empresa era modernizar o produto, a partir de uma campanha que falasse, principalmente, com garotas a partir dos 13 anos, poca em que se inicia a depilao juntamente com a primeira menstruao.

16 :: portflio agncia - Euro RSCG 4D

CASES
Nokia Trends
www.nokiatrends.com.br

O Nokia Trends uma plataforma de marketing baseada na msica e na arte multimdia, criada em 2004 para estimular as novas formas de consumo de informao por meios eletrnicos, no s tradicionais, mas, sobretudo, os mveis. A Euro vem cuidando do desenvolvimento do site desde sua primeira edio (2004). Criado para ser um elemento complementar na divulgao do evento, o site fez tanto sucesso que acabou se tornando a principal ferramenta de comunicao entre o Nokia Trends e seu pblico-alvo, justamente pelo fato de ilustrar, de maneira ampla, o conceito do evento. Os nmeros refletem esse sucesso: no ms da ltima edio do evento, em setembro de 2005, o nmero de page views saltou de 200 mil para 718 mil (um crescimento de 257%). No mesmo perodo, o nmero de visitas teve um acrscimo de 235%. Numericamente, o valor de visitas subiu de 37 mil para 125 mil. Em nmeros de visitantes nicos, compreendido entre agosto e setembro, o aumento foi de 32 mil para 110 mil, representando alta de 245%.

18 :: portflio freelancer - Alex Leo

Site: www.aldesigner.com.br Email: info@aldesigner.com.br

Colocando a Bahia no mapa do design na web


A expanso do acesso internet pelo pas comea a colher seus frutos. Um deles vem de Salvador, Bahia, e envolve o design na web. Meu interesse pela rea surgiu quando a internet chegou l em casa. Lembro bem quando vi a web pela primeira vez, por volta dos 12 anos, em um curso de informtica avanado. Pensei que negcio esse, coisa de maluco..., mas fascinava. Mal sabia que pouco tempo depois ia comear a brincar de fazer sites, relata Alex Leo.
www.meligeni.com.br

a vez do desenvolvimento da nova verso do site do tenista Fernando Meligeni. O contato surgiu com a pessoa que atualizava o site (Thiago). Ele tinha sido um cliente meu, atravs da criao de um layout para um portal de tnis, que gostou do meu trabalho e me indicou para a empresria do Meligeni, revela. Para chegar no modelo atual do site, ele precisou desenvolver trs esboos de layout. Tivemos uma constante troca de idias (atravs de Messenger e e-mail) para definir qual seria a estrutura e o oramento final. A princpio pensei em um site com as cores do tnis e Brasil (verde, amarelo e um pouco de azul), que retratasse a nacionalizao do Fernando. Mas a empresria e sua equipe queriam algo diferente e sugeriram um azul. Segui a linha de um site flutuante com bordas arredondadas e tons fortes, conta. O esforo de Leo seria reconhecido: o projeto foi vencedor da categoria Pessoa Fsica do prmio Plugin Website Awards 2005 (http://concurso.plugin.com.br). Uma das grandes sacadas foi a criao do Espao dos Tenistas, que funciona como um pequeno portal de informaes sobre o universo do tnis e procura atrair usurios de forma permanente, diz. Para o futuro, Alex diz que pretende investir cada vez mais em sua formao profissional. Estudar, praticar e d e m o n s t r a r q u e s e r w e b d e s i g n e r u m a p ro f i s s o importante que requer muita preparao e estudo. Passei para o ltimo semestre do curso de Sistemas de Informao da Faculdade Ruy Barbosa. Depois, pretendo ingressar em outro curso, Design ou Publicidade, ainda no sei qual, at l decido, pois creio que ainda sou novo e tenho muito que aprender.

www.aldesigner.com.br

A brincadeira se tornou algo srio e o baiano iniciou sua caminhada neste mercado to disputado. Em 2003, consegui um estgio no SERPRO, onde aprendi o famoso Flash, que at ento era quase uma incgnita para mim, e me aperfeioei no Fireworks, Dreamweaver e programao ASP com SQL Server, lembra. Alm disso, Leo resolveu investir em alguns trabalhos no remunerados para tornar seu trabalho conhecido. Dentre os que fiz, posso citar o Style Host, ScriptBrasil e F1 Mania. Com isso, comecei a ter mais visibilidade e contatos. O resultado foi a conquista de projetos remunerados. O Esporte Clube Bahia (http://www.ecbahia.com.br) foi o mais importante pela alta visibilidade aqui no Estado. Mas o melhor ainda estaria por vir. Em 2005, seria

20 :: entrevista - Jos Bessa

Os mais antigos no devem esquecer do Design de Bolso (http:// tinyurl.com/d7n4k), famoso manifesto experimental - em forma de fanzine - produzido por Elesbo (Jos Bessa) e Haroldinho (Cludio Reston), entre os idos de 1997 e 2001. Mas a quantas anda a produo da dupla? A curiosidade tamanha e a resposta voc confere a seguir. Isso porque conversamos com Bessa, que fala sobre a evoluo do trabalho da dupla (atualmente, eles lapidam suas idias no Visorama Diverses Eletrnicas - www.visorama.tv), analisa o atual momento do mercado de design, desmistifica o processo de criao e revela os novos desafios que viro. Boa leitura!

entrevista - Jos Bessa :: 21

Passados esses dois primeiros anos do novo escritrio, a percepo de uma fase de amadurecimento, anando a expresso do conjunto
Wd :: Em algum momento, o uso dos personagens Elesbo e Haroldinho prejudicou a conquista de projetos/clientes? Bessa :: Excetuando uma ou duas situaes pontuais no primeiro ano, creio que no tenhamos passado por qualquer impedimento, ou pelo menos algo que nos tenha sido externado. Se houve incompreenso ou m vontade, ela provavelmente partiu de minorias conservadoras dentre os prprios designers, procurando isolar-nos em um nicho pitoresco, humorado, como galhofeiros sem a devida conotao profissional. Essa ignorncia tambm pode advir do nosso afastamento das chamadas panelas. Um aspecto delicado, cuja percepo nos escapou nos primeiros anos, foi a compreenso do risco da apresentao de um escritrio multifacetado, cuja proposta, pela amplitude, poderia facilmente ser vista como pretensiosa. Entendemos que era necessrio setorizar a abordagem, com o foco inicial na solicitao do cliente, deixando para uma segunda etapa o esclarecimento de outras reas de trabalho, facilitando assim a digesto. Wd :: De 2000, quando vocs se apresentaram no 1 Encontro de Web Design, para os dias atuais, quais foram as principais modificaes ocorridas no trabalho da dupla? Bessa :: Entre 1997 e 2001, atravessamos um perodo de intensa produo e exposio, principalmente a experimental, e, a partir de 2002, um plat que apontava para a necessidade de repensar e reforar a gerao de caixa, historicamente prejudicada pela nossa indisposio para com os segmentos de prospeco e atendimento. Trabalhvamos apenas os dois desde o incio, com a breve passagem de uma estagiria que nos fez perceber, por exemplo, o quo difcil era delegar dentro daquela realidade. Entretanto, era necessrio expandir para sobreviver. O ano particularmente fraco acelerou a busca de uma sada, encontrando caminho na proposta de uma produ-

capas das edies do Design de bolso

22 :: entrevista - Jos Bessa

tora com a qual trabalhvamos, desejosa por nos unir ao departamento de arte para a composio de uma empresa de design para mdia eletrnica. Assim surgiu, no incio de 2003, a Visorama Diverses Eletrnicas. A despeito dos descumprimentos do proponente que prejudicaram sobremaneira esse incio, o natural rompimento com a empresa, meses depois, nos deu a chance de caminhar por conta prpria e abandonar definitivamente um jogo de interesses onde vale mais rebolar para o mercado aplaudir. No o que pretendemos. Passados esses dois primeiros anos do novo escritrio, a percepo de uma fase de amadurecimento, afinando a expresso do conjunto. O portflio ainda no de nosso agrado, e importante que essa percepo real, pragmtica, sirva de objeto para extrairmos aquilo que trar brevemente a verdadeira cara da Visorama.

"A dinmica do pixel permite abordagens estticas e interativas, sem que isso necessariamente aponte para a similitude do impresso ou a pirotecnia computacional"
Wd :: Nesta mesma apresentao, vocs enfatizaram que ...celulose celulose, pixel pixel.... Apesar de no trabalhar com web, voc podia apontar as principais diferenas entre o design impresso e o online? Bessa :: um bom momento para rever e destrinar a afirmativa, a um tanto resumida e ortodoxa. A dinmica do pixel permite abordagens estticas e interativas, sem que isso necessariamente aponte para a similitude do impresso ou a pirotecnia computacional. O papel eletrnico j uma realidade, cujo advento aproxima cada vez mais o byte ao pigmento. O pice da tecnologia no perceb-la. importante o domnio tcnico e conceitual do meio, precisando a abordagem para
Pster do Design de Bolso 8

um pblico e uma linguagem no necessariamente bvias. No somos extratos de estatsticas, mas usurios individualizados que dispensam a falsa intimidade automatizada.

entrevista - Jos Bessa :: 23

A travada funciona como o resfriado ou a ressaca: no h frmula, apesar das receitas


Wd :: Em seu blog (www.bricabraque.com/blog), retiramos o seguinte pensamento: Criar sofrer. No criar, sofrer mais. Como o processo de criao de vocs? O que fazem quando ocorre uma travada no momento da criao? Bessa :: No utilizamos conscientemente um mtodo, uma frmula de criao. Trabalhamos em cima das sensaes imediatas a partir do briefing, e discutimos a seguir os primeiros resultados para avaliar a participao da equipe, ou mesmo a mudana de responsvel ou de rumo. A travada funciona como o resfriado ou a ressaca: no h frmula, apesar das receitas. Procuramos nos afastar do ambiente para deixar a cabea despressurizar. Muitas vezes pode haver obsesso por um caminho sem potencial, bloqueando o pensamento para outras propostas. Wd :: Quais so as principais referncias no trabalho da dupla? Bessa :: Nunca procurei identificar minhas influncias, e no vejo relevncia. Temo que alguma indicao, apontar um profissional ou processo histrico, teime por engessar ou preconceituar a percepo sobre o que eu produzo. Ousaria dizer que a identificao tende a acontecer com um design de explorao tipogrfica e da forma. Por certo j flertei com outros caminhos, mas, no apanhado, isso que sobressai. Wd :: Ainda no seu blog (http://tinyurl.com/92ul5), h uma passagem que diz: A tipografia um feudo por natureza, e o potencial arrogante entre seus entusiastas, enorme. A interpretao de determinados tipos de fontes a mesma de pessoa para pessoa? Como a tipografia influencia na transmisso da mensagem? Bessa :: H uma conscincia coletiva na sociedade contempornea, mas a interpretao h de ser pessoal, ainda que determinadas convenes e preconceitos, muitas vezes travestidos como um ensino tipogrfico, possam pasPgina-dupla para a centsima edio da revista francesa de design grco tapes Pgina de Junho do calendrio promocional da V.ROM, feito com o nmero 6

24 :: entrevista - Jos Bessa

teurizar a percepo do designer. Nesse aspecto, curiosamente, o usurio leigo pode apresentar maior autonomia. um dado para demonstrar o quanto devemos nos ater pesquisa pessoal, importncia de nossa prpria opinio, historicamente fragilizada por dogmas estrangeiros ou tantos professores-profissionaisfrustrados. natural que se respeite a experincia alheia, mas fundamental que o designer experimente e procure entender por conta prpria como a tipografia funciona. A prtica fundamental para a consistncia.

A prtica fundamental para a consistncia


Wd :: Falando ainda sobre esse assunto, voc acha que a tipografia afeta o significado de uma palavra? Bessa :: Sobremaneira. A leitura no-verbal trabalha em paralelo, e uma escolha impensada pode retardar a mensagem escrita. Ler, todos continuaro, mas o impacto ser influenciado pela tipografia.
Cartaz-proposta para a 25 Bienal de Artes de So Paulo

O verdadeiro prossional absorve e compartilha, para que o mercado cresa, o nvel melhore e todos sejamos mais respeitados
Vinheta de abertura do Festival Internacional de Curtas do Rio de Janeiro, o Curta

Wd :: Nos projetos Design de Bolso e Tipoptamo, vocs colocaram em prtica a busca por novos caminhos de expresso. Como voc analisa a atual produo de design no Brasil? Bessa :: No acompanho a produo nacional como um todo, mas tenho a felicidade de conhecer novas e vigorosas expresses como o Buraco de Bala (www.buracodebala.com) - e a Famlia, Colletivo (www. colletivodesign.com.br), Nitrocorpz (www.nitrocorpz.com) - entre outros, gente cujo talento e conscincia profissional so proporcionais. Os prprios eventos estudantis aumentaram qualita e quantitativamente, gerando mais discusso e promovendo um intercmbio necessrio a um pas continental e fragmentado. H muita gente competente, mas importante observar que rotineiramente o vigor acaba encapsulado pela reproduo de linguagens e tendncias abraadas pelo mercado publicitrio. Mais e melhores profissionais surgem medida que a profisso e a informao se expandem, mas o resultado ainda tmido para o usurio final. algo que leva tempo.

Cinema 2005

entrevista - Jos Bessa :: 25

fundamental que o designer ou qualquer outro profissional tenha postura para negociar, relutar e saber onde di o prprio calo, e que, acima de tudo, deixe a informao circular: de nada adianta proteger seus processos atrs de mecnicas obscuras e feudos intelectuais para a masturbao dos colegas. Repasse o aprendizado, compartilhe solues. Ningum melhor por conta de um programa ou macete, isso bobagem. O verdadeiro profissional absorve e compartilha, para que o mercado cresa, o nvel melhore e todos sejamos mais respeitados. E aquilo que voc ensina hoje pode ser reprocessado e retornado amanh. Todos ganham.

No quero viver de passado, mas permanecer produtivo para que o meu discurso represente um momento atual e sincero
Uma das trs paredes feitas para o ambiente (corredor) da arquiteta Vera Rupp no Casa Cor 99, utilizando poesias do Antnio Ccero

Wd :: Quais so os projetos futuros da dupla? Bessa :: Queremos lanar a ltima edio do Design de Bolso, fechando o ciclo, e um livro-portflio que abrace toda a produo entre 1997 e 2002, fechando aquela tampa. importante pontuar e entender o presente, e o que pretendemos daqui em diante. No quero viver de passado, mas permanecer produtivo para que o meu discurso represente um momento atual e sincero. Estudar preciso.

28 :: tipografia na web

L Linha de caixa alta

L Linha ascendente

Linha de base ha a

L Linha descendente

Como sabemos, o desenvolvimento de um projeto de internet envolve algumas etapas (planejamento, contedo, design, tecnologia, entre outras). Na fase do design, comum o foco dos debates entre os profissionais recair sobre temas como cores, layouts, imagens, arquitetura da informao e usabilidade. E a tipografia? Qual seria sua importncia dentro deste contexto, ou seja, como ela ajudaria a alcanar o objetivo do site? Ela um dos fatores determinantes da personalidade de um projeto grfico, independente em que mdia ele seja executado: impressa, eletrnica. A escolha da tipografia determinante, tanto pelo aspecto esttico, quanto pelo aspecto funcional, diz Michel Lent Schwartzman, designer grfico e scio-diretor da agncia 10Minutos (www.10minutos.com.br). Ou seja, uma boa tipografia vai garantir unidade grfica, determinando legibilidade, estilo e originalidade a uma pea grfica. Por isso, importante estudar e conhecer tipografia to a fundo. Antes do computador, desenhar uma famlia tipogrfica era um processo meticuloso e detalhista, o que contribua para a qualidade geral

Tipograa: um dos fatores determinantes da personalidade de um projeto grco Michel Lent (10Minutos)
da tipografia. Hoje, com a facilidade oferecida pela tecnologia e a distribuio em massa pela internet, comum se encontrar fontes com pssimo design e erros grosseiros. claro que ainda existem, e sempre iro existir, diversas fontes modernas muito bem desenhadas e de alta qualidade, afinal o computador no impede de forma alguma que o processo tipogrfico continue sendo meticuloso, detalhista e bem trabalhado, mas preciso saber identificar as verdadeiras obras tipogrficas em meio a tantas opes dos mais variados estilos e padres estticos, alerta Gui Borchert, diretor de arte da agncia R/GA (www.rga.com). Outro fator a ser considerado envolve a influncia que a tipografia exerce na transmisso da mensagem. A tipografia voz em forma de imagem. No s influencia como tambm determina o tom e a prpria forma

tipografia na web :: 29

Como garantir o sucesso esttico e funcional de seu projeto

de se comunicar uma mensagem. A tipografia um dos elementos mais importantes em um projeto grfico, quase um projeto parte, se considerarmos que antes de ser uma fonte, cada letra de cada famlia tipogrfica foi criada e desenhada individualmente, dentro de um padro esttico definido pelo tipgrafo, em um processo que pode levar meses e at mesmo anos para ser completo, explica Borchert. Lembrando ainda que a interpretao dos tipos leva em conta a bagagem cultural da pessoa. A interpretao varia de acordo com o contexto no qual ela est inserida e com a carga de informao que o receptor da mensagem tem para associar a fonte a alguma lembrana. Fontes handscript ou handwrite remetem a coisas infantis. Ao encontrar um texto escrito com esse tipo de fonte, a pessoa lembra da poca em que estava na escola, aprendendo a ler, dos livros infantis que usam esse tipo de fonte etc. Mas, para que ocorra a associao, necessrio que o visitante do site j tenha entrado em contato com determinada famlia de fonte, por isso a interpretao pode variar. Mesmo variando, possvel ter uma garan-

tia de interpretao, pois as lembranas do crebro no vem de um nico lugar, analisa Rafael Apocalypse, designer grfico e scio-fundador do ideiadigital (www.ideiadigital.ppg.br). Fonte mais indicada: com ou sem serifa? Uma pergunta muito comum se existe um tipo ideal para uso na internet. A escolha vai depender do projeto a ser desenvolvido. Qual a finalidade dessa fonte? Texto? Ttulo? Subttulo? Legenda? para leitura rpida ou lenta? So estas e muitas outras perguntas que devem ser feitas para se escolher uma fonte mais adequada, argumenta Marcio Shimabukuro, criador do laboratrio digital tipogrfico experimental Tipograma Fontes (www. tipograma.com.br). As dvidas se tornam mais freqentes quando falamos de fontes com ou sem serifa. Existem estudos que indicam a tipografia sem serifa para web, pois muitas serifadas, em um tamanho reduzido, geram manchas desagradveis em suas letras. No acredito que isso seja uma regra e nem que haja algo mais ou menos indicado para esta mdia. Tudo vai depender da nalidade do site, explica Marcio.

30 :: tipografia na web

"A tipoGrafia e

voz

em forma de

imagem "

Gui Borchert (R/GA)


A viso compartilhada por Michel Lent, que aponta ainda que o ideal que a fonte tenha sido desenhada para a tela. Estas fontes j foram planejadas prevendo seu comportamento quando representada em pixels, que tm uma resoluo muito menor do que a mdia impressa. O padro de resoluo em PCs de 72 pontos por polegada, contra 150 pontos na impresso de jornal e 300 em revistas, relata. e em como transmiti-la, mas tambm nas limitaes especficas desse meio. Toda fonte usada no site deve estar instalada no computador do visitante. Caso contrrio, o browser ir usar a fonte default para exibir o texto e o efeito planejado pelo designer ser perdido. Quer dizer que estamos limitados ao escolher tipos para web? De uma certa forma, sim, mas a tecnologia nos permite diversas outras maneiras de conseguir os efeitos desejados e usar a fonte que quisermos. Tcnicas de image-replacement, via CSS, ajudam muito na hora de usar uma fonte diferente em um ttulo. Outra alternativa, por exemplo, so os scripts server-side para gerar uma imagem, a partir de um texto dinmico, usando uma determinada fonte disponvel no servidor do site, explica Rafael. Porm, novos tipos esto surgindo para tornar a visualizao da serifa melhor em monitores. J existem tipos com serifa de boa leitura em tela, mesmo sem anti-aliasing. o caso da Georgia, do tipgrafo Matthew Carter, por exemplo, desenhada para a Microsoft especificamente para leitura em tela. A exibio de fontes na tela vem evoluindo gradativamente. As tcnicas de anti-aliasing esto se desenvolvendo significantemente e a qualidade do texto em tela vem de certa forma se aproximando cada vez mais da tipografia impressa. Por isso, acho que o que ir determinar a tipografia escolhida, assim como em outras mdias, ser justamente o projeto em si, e no o fato de ser ou no para web, afirma Gui Borchert. No tutorial Web Typography Tutorial, Nadav Savio aborda justamente esta questo e explica que o problema envolvendo a tipografia online no envolve a web em si, mas a forma como elas so dispostas em diferentes telas. Ento, como resolver esta situao? O designer no deve pensar apenas na mensagem Dessa forma, Borchert refora a importncia de se testar o projeto em diferentes monitores e resolues, para ver qual ser o resultado, e assim fazer os ajustes necessrios. Tenho uma viso otimista com relao ao

J existem tipos com serifa de boa leitura em tela, mesmo sem anti-aliasing Gui Borchert (R/GA)

Anti-aliasinG Anti-aliasing Anti aliasing

Tcnica que adiciona pontos sombreados ao contorno da fonte to (ou qualquer outra figura vetorial), de forma a borrar a imagem e tornar seu contorno mais suave. Fonte: Dicas-l (www.dicas-l.com.br)

Web TypoGraphy Tutorial Web typography tutorial


hotwired.lycos.com/webmonkey/01/45/index4a.html

Confira o tutorial do WebMonk WebMonkey, em ingls, no link: http://

ImaGe-replacement Image-replacement Image replacement

Tcnica, em CSS muito usada para substituir textos ca CSS, por imagem, servindo tanto para facilitar o trabalho do desenvolvedor quanto para aumentar acessibilidade dos usurios. Fonte: Poro da Taberna (www.pdt.2ss.com.br)

tipografia na web :: 31

assunto. Temos observado uma constante evoluo da qualidade de exibio de tipografia em tela. A tendncia uma evoluo gradativa que ir contribuir para a melhora da qualidade na exibio do design digital, diz. Legibilidade e alinhamento do texto Alm da fonte, outras questes influenciam o processo de escolha da melhor tipografia de um site. A primeira seria a legibilidade. No s na web, mas em qualquer mdia, existem inmeros fatores que podem influenciar na legibilidade. O segredo saber balancear padro esttico com legibilidade, para que o projeto, alm de visualmente bem resolvido, seja tambm eficiente na comunicao, aponta Borchert.

tipos alinhamento Tipos dede alinhamento


no se perder na leitura.

- esquerda: visualmente mais confortvel, pois resulta em comprimentos diferentes para cada linha e facilita o usurio a - direita: recomendado para pargrafos bem curtos, por alguma opo esttica e no aleatoriamente. - Justificado: utilizado se o projeto pedir uma massa de texto quadrada ou retangular. - Centralizado: deve ser evitado para textos longos, pois dificulta bastante a leitura. Fonte: Curso Web para Designers

de representar a forma natural da escrita ocidental, forma um bloco consistente, marcando bem o comeo e o fim do pargrafo, completa Rafael. Combinando fontes no site Um dos recursos para tornar a leitura de uma pgina agradvel est na combinao de fontes. Porm, preciso tomar cuidado para que essa combinao no prejudique o projeto esttico do site.

Elabore um plano cromtico que evite um mau contraste entre letra e fundo Marcio Shimabukuro (Tipograma Fontes)
Para que isso acontea, Michel recomenda que sejam respeitados os tamanhos para os quais as famlias foram desenhadas e evitar o uso de letras muito pequenas e cores de fundo que ofeream pouco contraste em relao cor do texto. Elabore um plano cromtico que evite um mau contraste entre letra e fundo. Tanto o alto quanto o baixo contraste devem ser evitados, acrescenta Shimabukuro. Outro aspecto envolve a definio do alinhamento dos elementos do site. Ele costuma influenciar em muito a leitura. O ideal que o texto seja desenhado de forma que permita uma leitura cadenciada e linear. Para isso importante escolher um tipo de alinhamento e mant-lo ao longo do texto, sem grandes variaes, relata Michel. O ideal utilizar o alinhamento esquerda porque, alm

Procuro no trabalhar com mais do que trs tipos de fonte em um projeto grco Michel Lent (10Minutos)
Como a escolha das fontes ajuda a determinar a identidade do projeto grfico, o ideal que se determine um grupo de fontes que ser respeitado durante o projeto. Novamente, no h uma regra especfica, mas eu procuro no trabalhar com mais do que trs tipos de fonte em um projeto grfico. Geralmente, uma para ttulos, outra para texto corrido e uma terceira para detalhes especiais. Ao combinar fontes diferentes, procuro tambm alternar serifas e no serifas. Mas este um pensamento

32 :: tipografia na web

mais clssico. No d para tomar como regra. H projetos editorais brilhantes que fogem completamente a essa padro, revela Michel. Em alguns casos, prefervel usar variaes tipogrcas dentro da mesma famlia ao invs de se introduzir uma nova tipograa que poderia afetar a coeso visual do projeto grco, acrescenta Borchert. Ferramentas e dicas para se trabalhar com tipografia na web Algumas ferramentas podem ajudar o designer na hora de definir qual ser a tipografia utilizada em seu projeto. Uma boa opo o Typetester, criado pelo croata Marko Dugonjic (confira, no Box abaixo, detalhes sobre o Typetester), um aplicativo online que permite a comparao de fontes na tela. Mas as opes no param por a. Para a criao de fontes, existem programas especficos como Fontographer, TypeTool e Fontlab, por exemplo, que permitem a criao de fontes. J no desenvolvimento de layouts usando tipografia, cada programa tem sua forma de lidar com as fontes, mas que de uma forma geral acaba sendo

semelhante, como o caso do Photoshop, Illustrator, Flash etc. Em relao ao gerenciamento de fontes, existem diversos programas, como o Suitcase, por exemplo, que permite testar, visualizar, ativar e desativar diversas fontes sem sobrecarregar o sistema, relata Borchert. J para quem pretende se aprofundar no assunto, o especialista ressalta a necessidade do estudo contnuo. Conhecimento tipogrfico nunca demais. Estude tipografia extensivamente. Desde a origem da escrita at tipografia moderna; da caligrafia as fontes bitmap; tipgrafos tradicionais a type foundries modernas. Procure estar por dentro de novas tcnicas e novas famlias tipogrficas, conhea as melhores type foundries, estude as diferenas de estilos tipogrficos, analise cada letra profundamente, suas diferenas, variaes, formas e detalhes. No se limite a buscar somente fontes de graa na web. O preo que se paga ao comprar uma famlia tipogrfica um investimento justo, que alm de garantir o tratamento grfico ideal para o seu projeto, significa tambm apoio ao desenvolvimento contnuo de fontes cada vez melhores para todos, afirma.

Testando

Ba te -p ap o: M ar ko D ug on jic , prof is si on al #leftCol) e cr de w eb da ag iador do Type n ci a w eb .b tester (http: ur za (h tt p: // //typetester.m w eb .b ur za .h aratz.com/) r/ en /w ho /i s/ m ar at z/ Wd :: Como surgiu a idi a do Typete ster? M ar ko :: O Ty pe te st er fo i a ev ol u o na ne rs da ag n tu ra l da fe rr ci a em qu e tr am en ta de ti ab al ho (w eb po s de se nv ol .b ur za ). To do vi da in te rn am coisa nova. Fu s qu e ex pe ri en te pa ra os i me empolg m en ta va m o de si gando consid pr im ei ro m od eravelmente Assim, acabei el o, pe di am naquela poc ficando com m ai s al gu m a a para atende uma longa lis r todas as su ca ti vo . Q ua nd ta de funciona gestes. o ti nh a ce rc a lidades e co de 80 % da s mecei a pens fu nc io na lid ad todo mundo ar mais seria es im pl em en . mente sobre ta da s, de ci di o apliof erec er o Ty Wd :: Como pe te st er de o Typetester gr a a pa ra pode ajudar o trabalho do M ar ko :: Ti po webdesigner gr af ia pa ra a ? w eb te m m ui existentes in ta s lim it a e staladas em s. D en tre ou seu computa tr as : ne m to dor e os nave do us u ri o te gadores no m to da s as fo renderizam nt es as fontes da mesma form a.

seu (web ) t ip o

Curiosidades
Curiosida des
Papiro aqutic : a da m esma fa da Tirir mlia ica (Cy perus ro Era uti tundus) lizada p . rincipa produ lmente o de p na apel no Egito a Fonte: ntigo. http://p t.wikip edia.org / wiki/Pa piro Planta Linotip o: Inventa da em 1890 p fazia a or Ottm compo ar Merg sio m enthale atravs ecnica r, da fund dos tex io de tos linhas ti caracte pogr res, form cas. Os ando numa c tipos e aldeira ram fu com ch ndidos forman umbo do a lin derreti do, ha de m J resf atriz em riadas, uma s as linha barra. bandeja s eram reunida , seguin s numa do ap impress s para o. a mqu ina de Fonte: http://t inyurl.c om/d3 l95

tipografia na web :: 33

Letrase t: Conhe cidas ta mbm transfe como le rveis. tras So letr para se as pron r transf tas eridas desenh para o o, de v rios ta modelo manho se s. Fonte: http://t inyurl.c om/ey eh5

Tipos m No Oc idente veis: , arma de imp -se que resso o proc foi inve esso Gutenb ntado erg. Em por Jo hannes 1455, e chumb le criou o conh as letra ecidas s de como que de tipos m ram ori veis, gem s primeir as gr cas. Fonte: IBGE Te en

Mquin a de e screve Segund r: o o his toriado mquin r Micha a de esc el Adle r, a prim rever d por um ocume eira nobre ntada fo italiano i fabric volta d chama ada e 1808 do Pell . Ele fa egrino bricou uma am Turri, p um art or iga, ce efato p ga, pud ara que Fonte: esse se http://t corresp inyurl.c onder om/d8 com ele phk .

Freq e nt em en te , m eu s am ig os de si gn er ri za da s no s s/ ilu st ra do re na ve ga do re s fic am su rp s, Is so po rq re en di do s so ue , s ve ze s, Ph ot os ho p. bre co m o as os la yo ut s fic fo nt es s o r am co m pl et en de am en te di fe D es sa fo rm a, re nt es do qu o Ty pe te st er e fo i fe it o no po de aj ud ut ili za da . A ss lo s a vi su al iz im , el es ca pt ar fo nt es em ur am a te la um brow se r co m os aj us e de ci di r qu Dessa manei te s de se ja do al ti po de fo ra, eles tm s e co la m el nt e se r um cenrio m a co m a no va elhor para in O aplicativo di sp os i o no iciar o desenv vem sendo m Ph ot os ho p. olvimento. uito til em co (li ne -h ei gh t mparar pequ no C SS ) ou te enos detalhes st an do a le gi , mostrando bi lid ad e do a distncia en diata - no h te xt o. Fi na lm tre linhas de necessidade en te , o ge ra um tipo de saber com do r de C SS o codicar co Wd :: Quais cr ia o c di go m o CSS, voc so os projet de fo rm a im pode ajust-lo eos futuros do no painel de Typetester? M ar ko :: A tu visualizao al m en te , es ta prvia. m os te st an do o. A id i a o si st em a de qu e o us u us u rio co m ri o po ss a se um hi st r ic o lo ga r - co m cias, ver seu e al gu m as op um no m e de histrico de es de cu st us u ri o e um atividades no om iz aa se nh a - pa site etc. ra pres er va r su as pref er n -

34 :: tipografia na web

Eu sou "BrasilEro"
Bate-papo: Crystian Cruz, designer criador da tipografia "Brasilro" (www.promodesign.com.br/tipografia) Wd :: Como surgiu a idia de criar a Brasilro? Crystian :: A riqueza da escrita popular brasileira foi algo que sempre me fascinou, do desenho das letras forma como elas esto dispostas. Afinal, como no apreciar uma placa com letras invertidas ou textos exprimidos no final por falta de espao? Desta admirao nasceu a vontade de criar uma tipografia digital que fosse um retrato deste tipo de expresso visual genuinamente brasileiro. A inocncia dos annimos autores dos escritos populares merecia ser registrada. Dois anos depois dos primeiros estudos foi publicada a primeira verso da "Brasilro", uma tipografia que busca mostrar a essncia da nossa escrita popular. Wd :: Que tipo de estudo voc realizou durante o processo de criao? Crystian :: Tudo comeou com uma extensa pesquisa fotogrfica. Para desenvolver a tipografia, precisava analisar um grande nmero de placas e muros que utilizassem em seus textos uma escrita feita mo, a fim de identificar as principais caractersticas do desenho das letras e a forma com que estas estavam dispostas. Aps ter tirado centenas de fotos em vrias cidades do Brasil, comecei a identificar o que era pertinente para a criao da "Brasilro". Como resultado da pesquisa, cheguei a importantes concluses que me guiaram no desenvolvimento do alfabeto. Quase sempre os textos esto dispostos somente em maisculas, porm as letras g, i e j geralmente aparecem em minsculas ( curioso ver como o autor destas placas no consegue imaginar como seriam estas letras em caixa alta). Outra constatao foi de que as letras s e n, em muitos casos, aparecem invertidas. Por se tratar de uma tipografia estilo script (manuscrita), desde o incio tive uma grande preocupao em fazer com que a fonte, ao ser digitada num computador, no ficasse com uma aparncia artificial, um problema comum em fontes deste estilo. Tendo tudo isso em mente, parti para a fase de desenvolvimento do alfabeto. A primeira meia-dzia de letras foi extrada de algumas placas. J as demais foram desenhadas diretamente no computador. Wd :: A Brasilro j foi utilizada em diferentes lugares (livros, anncios, revistas, cinema, outdoors, websites etc.). Existe algum segredo no processo de criao para que uma determinada fonte seja legvel, mesmo sendo utilizada em meios diversos? Crystian :: O sucesso da utilizao de uma tipograa numa pea de design depende mais do designer que est utilizando a fonte do que de seu criador. Hoje em dia a maioria das tipograas comerciais so projetadas para usos especcos. As fontes Verdana e Trebuchet, por exemplo, foram desenvolvidas para uso em telas de computador, e no mostram

tipografia na web :: 35

abcdefghijklmn opqrstuvwxyz

1234567890
parte da famlia tipogrca "Brasilro" a mesma boa performance de leitura em tela quando aplicadas em materiais impressos. Outro exemplo interessante a famosa fonte Times New Roman, que aparece como default em alguns softwares de texto. Ela foi desenvolvida para o jornal londrino The Times, em 1932, com a preocupao de se adequar aos padres de impresso dos jornais da dcada de 30. Apesar disso, hoje ela aparece tambm como fonte serifada default de browsers como o Internet Explorer, para ser lida massivamente na tela de um computador, meio para qual no foi projetada. Portanto, antes de utilizar uma fonte em algum projeto, vale a pena uma consulta no site do autor da fonte (ou ler os textos e PDFs que acompanham os arquivos digitais das fontes) para ver se a fonte desejada se adequa ao tipo de projeto que voc est desenvolvendo. Hoje, com os vrios portais de fontes que existem na web (como o www.myfonts.com), fica fcil procurar fontes que se adequem s necessidades de seu projeto. A Brasilro uma fonte display, ou seja, no foi projetada para ser usada em textos longos, mas sim para pequenas frases, de preferncia num tamanho de corpo grande. Acredito que o sucesso massivo do uso da fonte em mdias to distintas (capas de livros, aberturas de filmes, outdoors, websites, revistas, identidade visual etc.) se deve ao bom uso da fonte nestes projetos. A tipografia por si s no resolve nenhuma pea grfica, ela precisa estar em perfeita harmonia com os demais elementos que compem o layout para atingir o resultado esperado. Um exemplo de um bom resultado o site do filme brasileiro A Pessoa Para o Que Nasce (www. apessoa.com.br), onde a fonte est em perfeita harmonia com a linguagem visual do site. Wd :: A Brasilro est disponvel gratuitamente na internet (observao: utilizamos ela na capa da revista). O que voc acha da comercializao de fontes na web? Crystian :: Particularmente no confio em fontes grtis que so distribudas pela internet. A grande maioria delas no rene as qualidades tcnicas necessrias para ser usada em projetos de design, alm de que quase nunca so distribudas com o "character set" completo (geralmente faltam os acentos e vrios sinais de pontuao). S decidi distribuir a Brasilro gratuitamente pela internet, porque o propsito desta fonte fazer as pessoas refletirem sobre a cultura visual brasileira. Quero atingir o maior nmero possvel de pessoas.

36 :: tipografia na web

Glossrio GLOSSARIO
Famlia: termo utilizado para definir um conjunto de tipos com as mesmas caractersticas. Fonte: conjunto de todos caracteres tipogrficos compostos pelo alfabeto, sinais de pontuao, nmeros e outros elementos. Serifa: linhas ou curvas que complementam o desenho de uma letra, nas suas extremidades. Tipo: caracter tipogrfico. Tipografia: arte de compor um texto, visando torn-lo facilmente legvel, adaptado ao contexto em que lido e aos objetivos com que foi publicado. Tipologia: estudo da formao dos tipos.
Fontes: Dicionrio Publicitrio Online, Wikipedia, LightSeed, UnB

Como voc especica o tamanho das fontes de seu site?

Total de votos: 331


Por pontos - 27% Em pixel - 64% Percentagem (%) - 9%
acessa e participe! www.arteccom.com.br/webdesign

web 2.0:: 37

dicas de sites
www.typophile.com www.promodesign.com.br/tipografia www.fontana-d.com www.tupigrafia.com.br www.fabrikadetypos.com.br www.tiposdoacaso.com.br misprintedtype.com/v3 www.emigre.com www.typography.com www.houseindustries.com www.t26.com www.linotype.com www.miniml.com studio.adobe.com/us/type/main.jsp www.p22.com www.korhoen.net/css_typeviewer.html www.stcassociates.com/lab/fontbrowser.html webtypography.net www.dsg4.com/04/extra/bitmap/index.html www.1001freefonts.com www.acidfonts.com www.fontfreak.com www.larabiefonts.com www.fontfile.com www.free-fonts.com www.coolarchive.com www.007fonts.com www.webfxmall.com/fonts www.fontshop.com www.fontface.com www.fontparadise.com simplythebest.net/fonts www.abstractfonts.com www.highfonts.com www.downloadfreefonts.com
Fontes: Gui Borchert, Sobresites - Design, Curso Web para designers

38 :: tipografia na web

Participao dos assinantes


Qual a importncia da escolha correta da tipograa para um site?

ric Coutinho
email@ericcoutinho.com

Do ponto de vista esttico, a tipografia uma extenso ou parte do design. Assim como cores e formas devem estar equilibradas, o uso de fontes pode contribuir ou inviabilizar esse equilbrio visual. Com relao usabilidade, a escolha das fontes vai permitir ou prejudicar uma fcil e rpida leitura, deixando o usurio confortvel para navegar ou simplesmente expulsando-o de seu website.

Daniel Soares
danielsrs@hotmail.com

O tipo vai ser responsvel, em grande parte, pela apresentao do contedo de um site. Ento, se a escolha do tamanho, forma e at cor do tipo no for feita com cuidado, o desinteresse pelo contedo do site ser latente, pois dificultar na busca pela informao.

Mauro Cesar
mauro@dataclick.com.br

Acho um fator bsico e essencial para o contedo de um website. A relao entre tipografia x usurio-alvo e tipografia x design deve ter uma ateno redobrada e refinada para que a principal meta de todo desenvolvimento web seja alcanada: resultados!

Miriam Fernandes
comercial@tecsite.com.br

A escolha da tipografia para um site vai depender muito do tipo de informao que se deseja passar e para que tipo de pblico se destina. Mas fundamental que a escolha seja correta, pois a organizao clara da tipografia em um site garante a legibilidade da informao e a identidade visual deste site.

Rafael Lopes
tcherafa@yahoo.com.br

A tipograa est atrelada de certa forma identidade do site. O processo de escolha passa por decidir desde se a fonte ser aplicada diretamente no HTML ou se ser renderizada em imagem ou mesmo ash. A escolha adequada da tipograa tambm importa para uma melhor legibilidade e leitura do site. Finalizando, a escolha de um tipo que complemente o design importante, mas preciso levar em conta tambm a acessibilidade, como, por exemplo, sites que disponibilizam o aumento da fonte dinamicamente.

Rodrigo Warzak
rodrigo@warzak.com.br

A importncia est relacionada ao processo de composio da tipografia que ser disponibilizada ao usurio. Acredito que a tipografia correta deve ser legvel, de fcil compreenso, padronizada e atingir os objetivos da publicao.

Se voc assinante, participe desta seo pelo site www.arteccom.com.br/webdesign/clube

debate - o poder das comunidades :: 39

O poder das

comunidades
Qual a dimenso dos bits e bytes gerados pelas comunidades virtuais no Brasil? A primeira constatao vem de um estudo do Ibope, divulgado em maio de 2005 (http://tinyurl.com/a3tcd), no qual ficamos sabendo que, no final de 2004, os sites de comunidades respondiam por 19,5% do tempo total de uso da web nas residncias brasileiras. Mas as evidncias no param por a. Para se ter uma idia, o Orkut, um dos principais responsveis pela disseminao das comunidades / redes sociais no pas, visto pelo internautas brasileiros como uma poderosa ferramenta para dividir interesses comuns em comunidade, aponta pesquisa feita pelo Instituto QualiBest (http://tinyurl.com/ e36by). Dessa forma, fomos perguntar a alguns profissionais de internet se a opinio das comunidades / redes sociais j capaz de transformar um produto ou servio na web. Confira a seguir.

40 :: debate - o poder das comunidades

As comunidades e redes sociais so atualmente o grande termmetro das marcas e da aceitao do pblico por determinado produto ou temas
Sim, capaz. Se no transforma porque os donos dos produtos no querem. E isso uma grande chance desperdiada. As comunidades e redes sociais so atualmente o grande termmetro das marcas e da aceitao do pblico por determinado produto ou temas. importante que os departamentos de marketing das empresas tenham sempre algum de olho nas comunidades que envolvem suas marcas e transforme isso em um levantamento sistemtico. Quando encontrar alguma opinio negativa, crtica ou sugesto, responda imediatamente. No tente se defender, mas sim se colocar disposio do internauta. So pequenos gestos como esse que transformam o crtico em aliado e em um multiplicador da sua marca. Vejam o exemplo da comunidade Sushi em So Paulo, criada pelo meu amigo Sergio Teixeira Jr., em abril de 2004. Em quase dois anos, o grupo soma mais de 11 mil pessoas que do suas opinies como consumidores e freqentadores de restaurantes de comida japonesa. Muita polmica surgiu desde ento: vale restaurante rodzio? Para os puristas, no. Fico pensando sempre quando estou de olho nessas comunidades se os donos tambm esto por dentro do que se passa na cabea dos seus clientes. Alguns estabelecimentos so absolutamente desancados pelos consumidores. Algum faz alguma coisa para melhorar? Outro exemplo a lanchonete Memphis Burger, de So Paulo. Com uma comunidade criada pelo prprio dono, todos os consumidores so respondidos em tempo real e a sugestes, anotadas e, muitas vezes, adotadas. Fao parte
:: Aline Sordili Gerente - Portal Abril www.abril.com.br

de um sem nmero de comunidades e vejo que a web d as ferramentas para cada um poder melhorar seu produto e servio. J vi grandes lojas virtuais mudarem seus procedimentos quando so alertadas por funcionrios que participam de comunidades. Acho que falta agora as marcas ganharem mais ateno na web, tal como fossem uma loja de rua ou de shopping.

debate - o poder das comunidades :: 41

Sou amigo de um economista cujo chefe recebe visitas da equipe do Fundo Monetrio Internacional (FMI). O chefe da equipe americana, por sua vez, ao chegar em seu pas, tem reunies peridicas com... o presidente dos Estados Unidos. Ou seja: estou a quatro pessoas do, teoricamente, homem mais poderoso do mundo. Esta teoria dos sete-passos-de-qualquer-pessoa-no-mundo, que se no me engano surgiu de um experimento cientfico numa universidade dos EUA, a base das redes sociais hoje em destaque. Sobre ela foram construdos mecanismos que nos colocam em contato com pessoas distantes, opinies diversas, outras comunidades etc. Portanto, verdade. A correta gesto de comunidades pode alterar um produto ou servio na web. Podemos oferecer uma corrente de opinies mais ou menos igual sobre uma idia ou produto e, atravs dela, obter resultados qualitativos no que se diz respeito a este grupo. Essa a opinio mais corriqueira. Est nas revistas, nos papos de bar, nos planos de negcio. Mas podemos olhar a questo por um outro ngulo. E se a prpria comunidade fosse o produto da vez? E se este mesmo fluxo de opinies fosse o grande capital do momento? A partir da o que conta no mais o novo CD da Madonna, mas o que EU ACHEI, ou QUE PALAVRAS (emoes, interpretaes, avaliaes) eu associei a faixa de trabalho. No importa se o espremedor faz suco mais rpido, mas sim que em meu Orkut existe a comunidade Eu gosto de laranjada com biscoito maisena. Enfim, saber surfar no fluxo de opinies ser o grande diferencial de profissionais de comunicao e reas afins.

Em um recente artigo que publiquei no www.carreirasolo.org, falei sobre o que, para alguns, o den deste tipo de viso: as tecnologias e filosofias de desenvolvimento / trabalho que esto sendo chamadas de Web 2.0. Na minha opinio, o grande barato de tudo o que vem por a, e sempre muita coisa, este novo olhar. Menos sistemas e mais interaes. Menos tecnologia e mais empatia. Menos cdigos e mais linguagens comuns. Enfim, o poder s pessoas. Ou voc pode escolher a plula azul.

:: Mauro Amaral Editor, Arquiteto de Informao e Estrategista de Contedo www.carreirasolo.org

...saber surfar no fluxo de opinies ser o grande diferencial de profissionais de comunicao e reas afins

42 :: debate - o poder das comunidades

:: Alexandre Magalhes Coordenador de Anlise do IBOPE Inteligncia www.ibope.com.br

respeitadas por seus pares, do que partir para uma grande comunicao de massa. Essa abordagem est sendo utilizada institucionalmente, funcionando como uma comunicao entre amigos. Algum de uma comunidade faz um comentrio sobre um produto, que atravs das conexes estabelecidas entre os membros da comunidade, ganha fora e torna-se um movimento fora de controle de quem o criou. Tal abordagem institucional nasceu da observao do poder das comunidades como frum de comentrios e rei-

A resposta simples: sim. As comunidades so a concretizao de uma srie de tendncias que foram identicadas em um estudo realizado com pr-adolescentes em sete pases, inclusive o Brasil, pela empresa inglesa Millward Brown. Esse estudo tornou-se um interessante livro em 2003, chamado Brand Child, assinado por Martin Lindstrom. Entre as principais tendncias apontadas no estudo, algumas explicam o sucesso das comunidades, especialmente em pases com internet jovem (63% dos internautas residenciais brasileiros tm menos de 35 anos - fonte: Nielsen//NetRatings), caso do Brasil. A primeira delas aponta que a lngua formal de um pas j no o principal instrumento de comunicao entre os jovens. Quem freqenta uma comunidade, sabe que muitas vezes difcil entender o que est sendo escrito. Uma segunda tendncia importante o fato de os jovens necessitarem pertencer a um grupo. A corrida para fazer parte dessas redes sociais indica que as pessoas querem ver e serem vistas pelos amigos. Talvez, a tendncia mais importante para explicar porque as comunidades so mecanismos capazes de transformar um produto ou servio na internet o uso de lderes de grupos para divulgao de novos produtos e marcas. Empresas j descobriram que, em muitos casos, mais ecaz realizar aes via pessoas conhecidas e

A corrida para fazer parte dessas redes sociais indica que as pessoas querem ver e serem vistas pelos amigos
vindicaes espontneas. Como sempre, as empresas tentam capitalizar esses movimentos espontneos para seu interesse. No Brasil, particularmente, as comunidades tm uma fora enorme, pois os internautas brasileiros se caracterizam por usar todas as formas de comunicao online, proporcionalmente acima dos outros pases. O exemplo do Orkut talvez represente bem a maneira como o brasileiro apaixonado por comunicar-se. No Brasil, em outubro de 2005, 6,2 milhes de pessoas visitaram a comunidade Orkut, o que representou 52,7% do total de brasileiros que navegaram a partir de suas residncias. O segundo pas com mais visitantes foi a Itlia, com 68 mil ou 0,39% do total (fonte: Nielsen/NetRatings). Mas o sim definitivo pergunta ttulo est relacionado ao tamanho das comunidades no Brasil e nos outros pases. Nove milhes de internautas residenciais, ou 72% do total de usurios domiciliares em novembro de 2005, visitaram ao menos uma comunidade no perodo, passando nelas 3 horas e 20 minutos, em mdia por pessoa (fonte: Nielsen// NetRatings). inegvel que esses mecanismos de rede social podem modificar um produto. Afinal, muito mais fcil mobilizar pessoas online que fora da web.

debate - o poder das comunidades :: 43

...as recomendaes de consumidores so fundamentais na formao de opinio sobre determinado produto e servio

:: Marcelo SantIago Presidente da AMI (Associao de Mdia Interativa) www.ami.org.br

Em resumo: aquela histria de falem mal, mas faGraas internet a informao trafega a uma velocidade espantosa e pode atingir pessoas ou pontos que jamais poderamos prever. E esse o grande desafio que o marketing boca a boca e as redes sociais propem s empresas: nesse tipo de ambiente no h um elo central controlando as informaes, alm de como e a quem ela ser distribuda. Desde sempre a publicidade utiliza-se de testemunhal de pessoas famosas com enorme sucesso, basta ver a longevidade das campanhas de Lux, que j foi chamado de o sabonete das estrelas. Mas, nesse mundo globalizado, nem s os famosos so formadores de opinio: uma pesquisa realizada pela Forrester e a Intelliseek mostra que as recomendaes de consumidores so fundamentais na formao de opinio sobre determinado produto e servio. Ou seja, as pessoas tendem a confiar cada vez mais na opinio de um estranho que ele conheceu na internet do que em um anncio ou comercial de TV. Pensando nisso, algumas empresas j oferecem servios de criao de comunidades virtuais ou aluguel de formadores de opinio para gerar interesse sobre determinados produtos e servios. Mas preciso muita ateno com essas aes, para no ultrapassar os limites da tica e enganar o consumidor. A Federal Trade Comission, agncia reguladora norte-americana, est atenta para abusos e j recebeu protestos contra a Procter&Gamble, por exemplo, que contratou 250 mil jovens para elogiar espontaneamente alguns de seus produtos. lem de mim no funciona mais nos dias de hoje, onde a mdia est fragmentada, o mundo est conectado e o consumidor tem o poder de deciso em suas mos. Como controlar os influenciadores? Como acompanhar o que est sendo dito sobre seu produto nos milhes de sites da rede? Essas so as dvidas que ns, profissionais de marketing e publicidade, teremos que conviver a partir de agora.

saiba mais sobre comunidades, na edio de maro

44 :: como administrar o tempo

PLANEJAMENTO, PLANILHAS, AGENDAS ETC.


A difcil tarefa de administrar o tempo (moderno).
Reportagem sugerida pelo leitor Disnay Batista (disnay@hotmail.com)

Em mundo cada vez mais tecnolgico, no qual as fronteiras se tornam quase inexistentes, saber administrar os 60 minutos de uma hora, 24 horas de um dia, os sete dias da semana, os 365 dias do ano, imprescindvel para garantir o sucesso no trabalho e tranqilidade na vida pessoal.

Segundo Laert Yamazaki, diretor da Idia 3 Digital, a questo da administrao do tempo assemelha-se administrao financeira pessoal. Se voc no tem um controle de sua vida financeira e no sabe onde gasta seu dinheiro, provavelmente voc ter grandes prejuzos ou, no mnimo, no saber aproveitar ao mximo tudo o que o dinheiro pode fazer por voc. Com o tempo a mesma coisa. Se voc no sabe onde, nem como gasta o seu tempo, a probabilidade de voc reclamar que nunca tem tempo para nada muito grande, argumenta.

Se voc no sabe onde, nem como gasta o seu tempo, a probabilidade de voc reclamar que nunca tem tempo para nada muito grande Laert Yamazaki (Idia 3 Digital)
Os aliados para se administrar o tempo Diante da quantidade de trabalho que recebe por ms, Laert procura dividir suas tarefas de acordo com a hierarquia de importncia e urgncia em que aparecem. Na agncia, fazemos reunies para identificar essas prioridades. A partir da, cada um planeja sua agenda da forma que se sente mais confortvel em gerenciar o prprio tempo. Porm, a pauta nunca pode ser extremamente rgida, at porque a prpria dinmica da internet exige que haja espaos para trabalhos que chegam de ltima hora. Ser objetivo fator determinante para a boa produtividade, diz. Agenda e planejamento so outros aliados na administrao do tempo e na organizao de tarefas. Trabalho com um planejamento mensal, onde as viagens so agendadas com algumas semanas de antecedncia. Na rotina diria, utilizo o incio das manhs para responder e-mails, acompanhar e me reunir com os gestores da empresa. Dedico as tardes e incio das noites para trabalhar em projetos especficos ou seguir uma agenda

46 :: como administrar o tempo

Tento ser produtivo o tempo todo, me cobro muito isso pelo respeito que tenho ao meu tempo e das pessoas que interagem comigo Cesar Paz (AG2)

de reunies com clientes. No final do dia volto aos emails. Utilizo como apoio o Palm desktop que eu mesmo administro para agenda, contatos, tarefas e anotaes, revela Cesar Paz, diretor da AG2 (Agncia de Inteligncia Digital). Alm desses fatores, podemos citar a definio de prioridades. No entanto, como definir prioridades diante de tantas tarefas importantes, por exemplo? Priorizar o r d e n a r. O r d e m a s s o c i a - s e n o o d e n m e r o e priorizar tarefas requer necessariamente um esquema de numerao. Entretanto, recomenda-se a priorizao em duas etapas. Primeiro classificar as aes em trs categorias. Depois, dentro de cada categoria, numerar as tarefas de acordo com a sua prioridade. A recomendao adicional de que se use apenas trs categorias (vitais/ necessrios; importantes; triviais) para classificar todas as tarefas que se tem a fazer, independente do assunto ou do tipo de ao, orienta Jaime Wagner, diretor da PowerSelf e autor do livro A Arte de Planejar o Tempo. Os empecilhos Email, MSN Messenger, Orkut, telefone, celular etc. Seriam estes alguns dos principais agentes que ocasionam o desperdcio de tempo do profissional do mundo moderno? As ferramentas no so boas nem ms em si. A questo est em saber usar as ferramentas e no se deixar usar por elas. Muitas pessoas reagem ao celular como se no pudessem deslig-lo. Ora, o fato de hoje termos muito mais opes de contato, e de que podemos dar respostas mais rpidas, bom. Mas se formos tentar ler e responder imediatamente a todas as demandas que nos chegam pelos n` canais que nos conectam aos outros, deixaremos de levar a cabo qualquer tarefa, e deixaremos inclusive de dar respostas eficazes. Nem sempre a resposta mais rpida a melhor, diz Jaime. Uma das grandes dificuldades na batalha do tempo envolve justamente o fato de no podermos fazer tudo

aquilo que desejamos. Esse cenrio se materializa na experincia vivida por Laert. Uma das grandes dificuldades que encontrei foi saber dizer no. Muitas vezes, aceitamos tarefas que seriam impossveis de serem realizadas sem um planejamento e um prazo bem definido. Mas, no impulso em querer resolver todos os problemas, voc acaba prejudicando outras atividades de grande importncia em sua vida, revela. No caso de Cesar Paz, os problemas so a quantidade de reunies. A maior dificuldade fazer apenas a s re u n i e s e f e t i v a m e n t e n e c e s s r i a s q u e , u m a v e z marcadas, devem ser produtivas. Tento ser produtivo o tempo todo, me cobro muito isso pelo respeito que tenho ao meu tempo e das pessoas que interagem comigo. uma cobrana diria e necessria, afirma. O controle do tempo em suas mos B u s c a r o e q u i l b r i o . Ta l v e z e s s a s e j a u m a d a s principais lies para quem ainda no descobriu a frmula correta de gerenciar seu tempo. O profissional hoje tem vrias demandas sobre si. No h maneira de responder perfeitamente a tudo. Ento, a chave saber escolher de maneira equilibrada. Mas muito difcil manter o equilbrio. Geralmente, as pessoas cedem s demandas mais exigentes (s que mais gritam) e no necessariamente s mais importantes para si, para a sua sade mental e equilbrio emocional. Para escolher melhor, preciso desenvolver a conscincia de si, que se lapida pela prtica sistemtica da reflexo, do planejamento e da ateno. Escolher decidir o que vai esquecer, para poder se concentrar no que mais importante, afirma Jaime.

"As ferramentas no so boas nem ms em si. A questo est em saber usar as ferramentas e no se deixar usar por elas" Jaime Wagner (PowerSelf)

Nessa caminhada, a experincia ser vital para determinar o que ser feito. Fao uma planilha de administrao do tempo, no s para o trabalho, mas para o meu dia inteiro (isso pode ser feito tambm utilizando as tarefas do trabalho somente). Essa planilha me ajuda a identificar quanto tempo eu gasto em cada atividade que fao diariamente, como devo administrar o tempo para cada atividade e para melhorar minha qualidade de vida, diz Laert.

A planilha do Laert
Na primeira coluna, relaciono as categorias de tempo na minha vida (profissional, desenvolvimento, sono, afetividade, alimentao, entretenimento, entre outras). Na segunda, estaro as horas que gasto em cada categoria relacionada na primeira coluna, perfazendo um total de 24 horas (ciclo de um dia). Na coluna seguinte, coloco a porcentagem que aquela categoria representa no dia (por exemplo: se voc dorme oito horas por dia, voc consome aproximadamente 33% do seu tempo com sono). Na coluna seguinte, descrevo o que devo fazer com a categoria em questo: aumentar, reduzir ou manter, de acordo com as minhas prioridades.

48 :: como administrar o tempo

Escolher decidir o que vai esquecer, para poder se concentrar no que mais importante Jaime Wagner (PowerSelf)

Alguns economizadores de tempo


-Utilize uma agenda ou um calendrio de reunies. -Crie listas de afazeres. -Defina metas e prioridades. -Organize as tarefas. -Organize as informaes usadas com freqncia.
Fonte: Sebrae (http://tinyurl.com/cm3nn)

Alguns desperdiadores de tempo


-Falta de planejamento. -Indisciplina. -Indefinio de objetivos na execuo das tarefas. -Menosprezo ou nfase inadequada em certas atividades. -Indefinio de prioridades. -Excesso de reunies e burocracia interna. -M utilizao dos recursos (telefone, fax, xerox, computador). -Centralizao de poder. -Resistncias s mudanas.
Fonte: Sebrae (http://tinyurl.com/cm3nn)

Solues prticas para economizar tempo


-Estabelea metas: anuais, mensais, semanais e dirias. -Programe suas tarefas e atividades da semana e do dia, em funo dessas metas. -Identifique as atividades que levem aos resultados e concentre-se nelas. -Faa as coisas em ordem de prioridade. -Controle, diariamente, as atividades realizadas e os resultados alcanados; -Saiba onde seu tempo realmente empregado. -Estabelea data e hora para incio e fim de cada atividade. -Elimine desperdiadores de tempo. -Melhore suas rotinas e hbitos de trabalho.
Fonte: Sebrae (http://tinyurl.com/cm3nn )

estudo de caso - Bondfaro :: 49

EM BUSCA DO

PREO PERFEITO
Estudo de caso do site:

tudo na casa dos milhes: 11 em pesquisas de usurios, 7,5 de page views, 5 em visitas e 1,7 de visitantes nicos. Esses nmeros so mensais, impressionam e comprovam a eficcia no modelo adotado pelo Bondfaro.com (www.bondfaro.com.br), site de pesquisas de preos. Em outubro do ano passado, o servio completou cinco anos de existncia e trouxe algumas novidades em seu site. Para conhecermos todos os detalhes envolvendo o projeto e esse mercado, entrevistamos Gustavo Guida, diretor de produto da empresa.

50 :: estudo de caso - Bondfaro

Wd :: Como surgiu a idia de criar o Bondfaro? Gustavo :: A idia surgiu na observao o processo de compra online compartilhava as mesmas deficincias do offline. A saber: dificuldade de sabermos se estamos fazendo um bom negcio e alto custo de pesquisar preos de loja em loja, sendo necessrio ir de estabelecimento em estabelecimento para obter estas informaes. O Bondfaro procura solucionar este problema ao oferecer ao consumidor a possibilidade de pesquisar preos em centenas de lojas simultaneamente, em apenas um site. Nossa misso gerenciar de forma inteligente informaes, conectando compradores e vendedores. Wd :: Quais fatores influenciaram a deciso para que fosse feita uma remodelagem do site? O desenvolvimento foi feito internamente ou uma agncia foi contratada? Gustavo :: O ltimo redesenho durou trs meses e foi feito internamente envolvendo cinco profissionais das reas de design e tecnologia. Alm disso, formamos um

painel consultivo com experientes designers e profissionais de usabilidade externos, que serviu para corroborarmos as solues que tnhamos concebido internamente.
Internet Archive Nesta pgina (http://www.archive.org), voc poder conferir as antigas verses de determinados sites de internet. Por exemplo: digitando www.bondfaro.com.br no campo The Wayback Machine, teremos uma lista das verses de 2000 a 2005.

Wd :: Em relao s antigas verses do site, hoje podemos destacar o uso de caixas para se dividir as informaes, um visual bem limpo e a valorizao das imagens dos produtos, alm da utilizao de menos textos para se destacar as sees. Podemos considerar essas as principais modificaes feitas no redesenho do site do Bondfaro.com? Gustavo :: Buscamos oferecer uma pgina leve e organizada, de forma a facilitar a navegao dos usurios. Nesse sentido, a eliminao de certos textos e o uso maior

Redesenho do site Bondfaro: o antes e o depois.

estudo de caso - Bondfaro :: 51

"Nosso mascote foi pensado juntamente com a marca para quebrar um pouco a idia fria que um servio de tecnologia avanado como o nosso poderia passar"
o Bondvdeo, uma seo em Flash apresentando os produtos mais buscados)? Gustavo :: Acompanhamos a demanda de todo e qualquer clique e pesquisa feitos no site. Com base nessas informaes, podemos criar contedos que atendam especificamente ao que o usurio tem interesse. O Bondvdeo, uma iniciativa indita no segmento de pesquisa de preos, tem o objetivo de explicar um pouco o funcionamento e as caractersticas de produtos de tecnologia avanada como cmeras digitais e mp3 players. Escolhemos para o Bondvdeo os modelos mais procurados ou os que mais apresentaram crescimento em buscas. Wd :: O Bondfaro est na inter net desde 2000. de imagens fundamental. Optamos por um layout lquido tambm, de forma a permitir que usurios com resolues maiores possam aproveitar melhor sua tela, j que o site se ajusta automaticamente tela do usurio. Wd :: Ainda sobre as sees, possvel reparar que o logo do site fica estilizado conforme o usurio vai escolhendo qual caminho seguir. Como surgiu tal idia e qual a sua importncia para a navegao do usurio? Gustavo :: Nosso mascote foi pensado juntamente com a marca para quebrar um pouco a idia fria que um servio de tecnologia avanado como o nosso poderia passar. A personalizao dele nas pginas internas foi um passo alm, pois tambm ajuda a situar o usurio em que seo est. Adaptamos o mascote nas datas especiais de varejo, colocando-o com roupa de Papai Noel no Natal, por exemplo. Wd :: Quais fatores influenciaram no processo de Arquitetura da Informao dos elementos no site? Gustavo :: A Arquitetura de Informaes voltada para poupar tempo no processo de pesquisa de preos. Nosso interesse que o usurio encontre o mais rpido possvel o que deseja comprar. Wd :: Como feita a escolha dos destaques da pgina principal do site (por exemplo, vocs utilizam Ao longo desses seis anos, quais foram as principais modificaes no perfil do usurio que acessa o site (qual o principal interesse, por exemplo)? Como estes dados influenciaram o desenvolvimento da nova verso da pgina? Foram feitos testes de usabilidade? Gustavo :: Como ferramenta de pesquisa de preos, presenciamos ao longo desses seis anos muitas mudanas no comportamento do usurio, especialmente no que diz respeito ao comportamento de compra. Em 2000, os livros e CDs, nesta ordem, dominavam a preferncia dos usurios. No ano seguinte, o DVD se popularizou e alcanou a terceira posio do ranking dos 10 mais buscados, para no mais sair. O mesmo fenmeno ocorreu com os DVDs players. A categoria de livros, apesar de ainda muito procurada, vem apresentando uma queda lenta e gradual, dando espao para produtos tecnolgicos como cmeras digitais e celulares, na medida em que os usurios brasileiros ganharam mais confiana e passaram a se interessar pela compra de produtos mais caros que os tradicionais livros e CDs. Os celulares, por exemplo, so muito buscados desde 2003, reflexo da expanso da telefonia celular. A obsolescncia de alguns produtos tambm foi observada ao longo dos anos, como as cmeras fotogrficas.

52 :: estudo de caso - Bondfaro

Apesar da internet ser pouco difundida no Brasil, p ro v a v e l m e n t e d e v i d o b a r re i r a d e p e n e t r a o d e computadores, o usurio brasileiro navega muito tempo por dia. Ainda assim, o padro de navegao apresentado no to sofisticado quanto o de alguns outros pases. Por isso, temos que sempre antecipar os possveis erros e vcios na navegao que nossos usurios possam cometer. Nesse sentido, trabalhamos de forma contnua no aprimoramento da nossa busca e no desenvolvimento de produtos novos que facilitem o processo de pesquisa de preos. Somos auxiliados por testes de usabilidade, nos quais solicitamos que alguns usurios cumpram determinadas tarefas. A anlise da forma com que conseguem ou no cumprir tais tarefas nos fornece material para modificarmos e at criarmos novas reas no site.
Publicidade Segundo Gustavo, os formatos de publicidade mais vendidos no Bondfaro so o superbanner e o floater em DHTML. Percebemos a tendncia dos anunciantes em buscar formatos alternativos, diferentes do fullbanner padro, revela.

Presenciamos ao longo desses cinco anos muitas mudanas no comportamento do usurio, especialmente no que diz respeito ao comportamento de compra
de Imprensa, publicidade em outros sites, parcerias etc)? Gustavo :: Atuamos em vrias frentes de divulgao: contamos com uma assessoria para dar suporte ao relacionamento com os veculos de imprensa, anunciamos nos principais portais da internet brasileira como IG, MSN, BOL e investimos em links patrocinados tanto do Google quanto do Overture. Alm disso, possuamos uma rede de centenas de sites afiliados que publicam peas servidas e atualizadas dinamicamente por ns. Outro servio oferecido pelo Bondfaro a administrao do canal de Shopping de outros sites. Atualmente, administramos uma rede de mais de 20 shoppings de diferentes parceiros como Yahoo Brasil, Yahoo Mxico, Yahoo Argentina, Click 21, Globo Online,

Wd :: Como o Bondfaro ganha mais dinheiro: com servio pago ou com publicidade? E como foi o processo de expanso para outros pases da Amrica Latina (Mxico, Argentina e Chile)? Gustavo :: O principal negcio a exposio dos l o j i s t a s n o re s u l t a d o d e b u s c a . A p e s a r d i s s o , a re a d e p u b l i c i d a d e v e m a p re s e n t a n d o c re s c i m e n t o e m importncia. A expanso para a Amrica Latina ocorreu quando percebemos que havia a necessidade de um servio de pesquisa de preos em pases como Mxico, Argentina e Chile. Iniciamos pelo Mxico (www.bondfaro.com.mx), em outubro de 2004. Em seguida, lanamos o site na Argentina (www.ar.bondfaro.com), em dezembro de 2004, e, por ltimo, no Chile (www.cl.bondfaro.com), em julho de 2005. A aceitao do servio nestes pases tem sido muito boa, apesar do comrcio eletrnico ainda no ter atingido o nvel de maturidade que temos no Brasil. Wd :: Como feita a divulgao do site (Assessoria

POP, O Dia, Telelistas, entre outros. Wd :: Em termos de linguagem tcnica para construo da infra-estrutura do site, vocs escolheram o Java Server Pages (JSP). Por que a escolha do JSP e no do ASP ou PHP, por exemplo? Gustavo :: A escolha pela plataforma Java se deveu principalmente ao fato dela ser multiplataforma e de que na poca em que o projeto do site comeou a ser elaborado (meados de 2000), ela constitua a melhor opo para desenvolvimento orientado a objetos, o que, na nossa opinio, representa o melhor paradigma para desenvolvimento de mdio e grandes sistemas. Java uma linguagem poderosa, flexvel e com um amplo suporte de bibliotecas com as mais variadas funes. Wd :: Falando ainda sobre tecnologia, dentre os principais nmeros, o site recebe mensalmente dois milhes de visitantes nicos, 11 milhes de pesquisas, 25 milhes de page views e 5 milhes de visitas. Qual a importncia da escolha do provedor para hospedagem

estudo de caso - Bondfaro :: 53

A anlise da forma com que os usurios conseguem ou no cumprir tais tarefas nos fornece material para modicarmos e at criarmos novas reas no site
do site? E quais riscos a indisponibilidade de acesso pode trazer para quem mantm um negcio na internet? Gustavo :: Nosso site tem que estar disponvel 24x7. No podemos correr o risco de termos interrupes em nosso servio, porque, com apenas um clique, podemos perder nosso usurio para um servio similar. Por isso, tomamos o cuidado de escolher uma empresa de renome e com total redundncia para hospedar nossas mquinas. Wd :: O site funciona normalmente no Internet Explorer como no Mozilla Firefox. Qual a importncia de se desenvolver sites compatveis com os padres web? Gustavo :: De fato, um dos nossos focos a Acessibilidade. Procuramos atender aos Web Standards e deix-lo acessvel a diversas plataformas e sistemas operacionais, inclusive leitores de tela (importante para deficientes visuais). Desenvolvemos at uma ferramenta de pesquisa especfica para o Firefox (www.bondfaro.com. br/firefox). Hoje em dia, Acessibilidade um diferencial, dado quantidade de sites que funcionam apenas no Internet E x p l o re r. A c h a m o s q u e q u e m u s a n a v e g a d o re s f o r a do padro tendem a ser heavy-users e formadores de opinio. Portanto, propagam o Bondfaro a seu crculo de contatos. Wd :: Qual o retorno que o Bondfaro obteve aps a finalizao desse projeto? J foi possvel mensurar os resultados obtidos pela remodelao do site? Gustavo :: Realizamos trs grandes mudanas no site (layout, tecnologia e navegao). A eficincia do site foi impactada positivamente com as alteraes. Para ns, a eficincia medida atravs da taxa de redirecionamentos a lojas sobre pesquisas realizadas. Comparando os dois meses antes da ltima reformulao do site com os dois p r i m e i ro s m e s e s d e l a y o u t n o v o , e l e a p re s e n t o u u m crescimento de 54,15% de cliques nas lojas.

54 :: tutorial

AJAX -

Parte 2

Elcio Ferreira Desenvolvedor e instrutor em padres web http://elcio.com.br/

Construindo um exemplo simples

Para demonstrar como funciona o AJAX, vamos construir um exemplo bastante simples. um formulrio de cadastro, onde o usurio preenche o login e a senha desejados. Vamos fazer com que, ao sair do campo de login, o sistema confira a disponibilidade daquele nome de usurio no servidor e, se o nome j tiver sido escolhido por outra pessoa, avise o usurio. A soluo convencional

Quando o usurio submete o formulrio, a pgina cadastra. php verifica se o login existe. Se estiver disponvel, cadastra o usurio e o envia para a tela de confirmao. Caso contrrio, o manda de volta tela de cadastro, com algum texto dentro do div mensagem, assim:
<div id=mensagem>O login <b>zeh</b> no est disponvel.</div>

uma aplicao comum, sem AJAX, que vai funcionar em absolutamente qualquer navegador, inclusive leitores de tela e navegadores de texto. Importante: voc precisa validar seus dados no servidor, mesmo que no tenha preocupao com a acessibiliNossa aplicao HTML comum garantia de acessibilidade

dade. Validar no servidor obrigao do desenvolvedor. Vamos falar mais sobre isso num posterior artigo sobre segurana em AJAX. Tendo nossa aplicao funcionando, estamos prontos para fazer a mesma validao acontecer sem o refresh da pgina. AJAX nela! AJAX no servidor Vamos agora construo da pgina que ser requisitada pelo AJAX. H duas caractersticas que sempre recomendamos no projeto de cdigo server-side para AJAX: 1) Simples Na verdade, um pouco mais do que isso. Nossa p-

O primeiro passo para a construo de uma aplicao AJAX acessvel a construo de uma aplicao convencional, sem AJAX. Ter uma aplicao HTML funcional a etapa fundamental para a construo de uma aplicao AJAX. No vamos explicar aqui a construo de uma validao de login convencional, porque isso tarefa trivial. Mas veja como fica nosso formulrio:

<form method=post action=cadastra.php> <div id=mensagem></div> <label for=login>Login:<input name=login id=login /></label> <label for=senha>Senha:<input type=password name=senha id=senha /></label> <label><input type=submit value=Cadastrar! /></label> </form>

gina ser muito, muito simples. Mas a forma de alcanar essa simplicidade que representa a verdadeira vantagem na construo de aplicaes AJAX. Vamos reusar cdigo. Projetar para o reuso aqui o segredo. Vamos cham-la de ajax.php. Ao criar a soluo convencional, o desenvolvedor criou um arquivo de funes, chamado funcoes.php, que continha, entre outras, uma funo verificalogin, que re-

tutorial :: 55

na cadastra.php para verificar a disponibilidade do login escolhido. Vamos reaproveitar esta funo, o que tornar nossa pgina ajax.php muito simples:
<? //Inclumos o arquivo de funes include(funcoes.php); //Testamos o login e imprimimos o resultado if(verificalogin($_GET[login])) echo true; else echo false; ?>

falar mais sobre JSON em breve. Ao usar um formato padronizado voc tem menos trabalho. H uma poro de bibliotecas prontas que convertem dados nativos da sua linguagem nos formatos padronizados. Assim, muito fcil converter arrays ou objetos PHP em XMLRPC ou JSON. A mesma coisa vale para ASP, .NET, Java, Python, ColdFusion e praticamente qualquer linguagem usada hoje. Outra grande vantagem o fato de outras pessoas poderem acessar sua interface server-side. Isso torna sua aplicao disponvel para a criao de mash-ups e outros usos Web 2.0. Isso sem nenhum trabalho extra. Criando o XMLHttpRequest Vamos agora partir para o cdigo client. Para come-

Veja como seria a mesma coisa em ASP:

ar, vamos criar o objeto XMLHttpRequest, com o seguinte cdigo javascript:

<!-- #include le=funcoes.php --> <% Testamos o login e imprimimos o resultado if vericalogin(RequestQueryString(login)) then Response.Write true else Response.Write false %>

try{ xmlhttp = new XMLHttpRequest(); }catch(ee){ try{ xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); }catch(e){ try{ xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); }catch(E){ xmlhttp = false;

Naturalmente, as coisas so mais simples se o programador est acostumado a projetar antes de codificar, escrever pensando em reuso, documentar suas funes e todas aquelas boas prticas de desenvolvimento que so to recomendadas e que tanta gente esquece. 2) Reaproveitvel Voc pode trabalhar com AJAX usando qualquer formato de dados que possa ser transferido pela web. Naturalmente, pode inventar ou usar solues como texto com layout, separado por pipes (|), CSV (separado por vrgulas) ou qualquer outro formato que sua criatividade quiser. Sugerimos, porm, que voc use um formato padronizado de troca de dados, como XML (pode usar XMLRPC, SOAP, REST ou mesmo RSS) ou JSON (http://www.json. org), o formato que estamos usando neste tutorial. Vamos
} }

Como esta apenas uma introduo ao assunto, no vamos estudar este cdigo linha a linha. Basta para ns agora saber que ele cria um objeto XMLHttpRequest na varivel xmlhttp. A complexidade do cdigo por conta de querermos que ele funcione em Internet Explorer, verses 5 e 6, e que, em navegadores sem suporte a XMLHttpRequest, nosso script falhe sem exibir um erro na tela.

56 :: tutorial

Usando o XMLHttpRequest O cdigo para usar o objeto XMLHttpRequest no muito complexo. Vamos analis-lo linha a linha em um prximo artigo, por hora ele serve apenas como exemplo:

aquele login est disponvel no servidor e, se no estiver, exibe a mensagem de aviso enquanto o usurio ainda est na pgina. Com isso j temos uma boa idia do que AJAX, como se faz e para que serve. No prximo artigo, vamos nos aprofundar no assunto, olhando em detalhes o cdigo que j te-

function validalogin(){ tlogin=document.getElementById(login).value xmlhttp.open(GET, ajax.php?login=+tlogin,true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4){ msg=eval(xmlhttp.responseText)?:O login <b>+ tlogin+</b> no est disponvel. document.getElementById(mensagem).innerHTML=msg } } xmlhttp.send(null) }

mos e acrescentando alguns detalhes a essa aplicao.

Este cdigo no nada original. Os trechos em negrito so os que mudam de aplicao para aplicao, o resto sempre igual. Como o cdigo para criao do objeto XMLHttpRequest, embora complexo, tambm sempre igual, na verdade escrevemos apenas quatro linhas de cdigo javascript para que nossa aplicao funcionasse.

A mensagem exibida enquanto o usurio ainda est na pgina

A mensagem exibida enquanto o usurio ainda est na pgina. Falta apenas fazer com que a funo que criamos seja executada quando o campo de login perder o foco. Para isso basta:

onblur=if(xmlhttp)validalogin()

Certamente h maneiras mais elegantes de se fazer isso, mas assunto para outro artigo. Com isso, j temos nossa aplicao funcionando. Quando o usurio sai do campo de login, o navegador verifica em segundo plano se

usabilidade :: 57

"A reunio inicial com o cliente pode ser considerada um dos passos mais importantes de um projeto e o nvel de sucesso de um projeto pode ser definido nesta etapa."

58 :: experience design

Claudio Toyama
Scio da Bright Skies (www.brightskies.net), em Londres. Atua h mais de 14 anos em consultoria embasada em pesquisa nas reas de internet, branding e experincia do cliente. co-representante do Grupo AIGA Experience Design no Brasil e coordenador do MBA em Customer Experience do ITAE (Faculdades Rio Branco). Mestre em interatividade e multimdia pela London College of Communication, formou-se pela FGV, com ps-graduaes em Marketing (CEAG) e Comunicao e Artes (Mackenzie). webdesign@claudiotoyama.com

Tecnologia: conectando ou desconectando as pessoas?


Entro em uma danceteria em Londres e, quando chego na pista de dana, noto uma garota danando completamente fora do ritmo. Comeo a reparar um pouco mais e percebo que ela est danando ao ritmo da msica que toca em seu iPod e no ao ritmo da msica do local. Estranho? No necessariamente. Esta uma das mais novas tendncias que ocorrem nas cidades mais trendy: de se isolar totalmente do seu ambiente seja este o ponto de nibus, o metr, ou, como no caso acima, a pista de dana. Londres uma cidade onde as pessoas evitam conversar entre si e at mesmo se encontrarem com os prprios vizinhos no corredor para no terem que falar com ningum. O ponto deste artigo que tenho notado que as tecnologias tm ajudado a aproximao de pessoas distantes, mas contribudo tambm para o distanciamento de pessoas fisicamente prximas. Explico melhor a seguir. Sob a tica positiva Pouco mais de uma dcada atrs, quando me mudei para a Europa, a comunicao com meus amigos e familiares que haviam ficado no Brasil no era to fcil como agora. Imagine uma comunicao via correio, telefone e fax. Naquela poca, em vrias partes do mundo, a internet ainda era chamada de auto-estrada da informao e restrita a poucas empresas e universidades, no tendo conquistado os domiclios. Desde ento, passei a usar e-mails, ICQ, Messenger, Yahoo! Messenger e, nos ltimos anos, o Skype, que usa a tecnologia VoIP (Voice over IP) e faz com que a comunicao com meus amigos e parentes no Brasil seja efetuada instantaneamente e de graa. Isto sem mencionar o fenmeno das redes sociais online no Brasil, como o caso do Orkut (do Google), que fez com que eu encontrasse algumas pessoas que no via h pelo menos 20 anos! Estas redes ajudam no somente a reencontrar pessoas que voc no v h dcadas, mas tambm a conhec-las melhor e a manter um contato muito mais freqente. E o mais legal disto tudo quando voc encontra um amigo seu e percebe que vocs tm muito mais pontos em comum do que achavam. E no lado negativo No lado negativo, a tecnologia tem sido usada como uma desculpa para as pessoas realmente se desconectarem dos ambientes nos quais esto vivendo. Como o caso mencionado no comeo deste artigo. Mas h diversas outras situaes no qual isso tm acontecido como, por exemplo, a cena hilria de vrios executivos no coffee-break de qualquer congresso e/ou seminrio, conversando em seus telefones celulares ou verificando e-mails em seus Blackberrys (aparel-

experience design :: 59

"...cabe a cada um utilizar a tecnologia de forma apropriada e que faa com que voc no vire um alienado e desconectado de seu ambiente imediato."

hos prprios para receber e-mails), em vez de estarem trocando cartes de visita e/ou aproveitando a oportunidade para conversarem com pessoas ligadas rea. Ou a cena de uma garota em um nibus descrevendo detalhes minuciosos de sua ltima relao sexual com um cara com quem ela ficou na noite anterior, detalhes estes que ela no teria coragem sequer de mencionar diretamente para qualquer pessoa no nibus, mas que, como uma amiga dela que est do outro lado da linha, ela no se importa e, na verdade, at ignora totalmente as pessoas a seu redor. Em algumas partes do mundo, o nvel de individualidade e desconexo com a realidade chegou a tal ponto que, j que estranho uma pessoa comear a conversar com outra pessoa no meio da rua, ento elas acabam assinando um servio de SMS no qual descrevem todas suas caractersticas e deixam bem explicitado qual tipo de pessoa que elas gostam: homo ou heterossexuais, loiro(a), moreno(a), alto(a), baixo(a) etc. Quando uma pessoa com as caractersticas mencionadas estiver prxima ela, seu telefone lhe enviar um SMS lhe avisando. Eu sei que estes fenmenos sociais guiados pela tecnologia no so nada recentes, pois tecnologias introduzidas dcadas atrs, como a televiso, os vdeo games e vrias outras j contribuam para esta dicotomia, mas o que percebo que a cada dia presencio fatos totalmente inditos e inimaginveis. Em resposta pergunta inicial, na verdade acho que cabe a cada um utilizar a tecnologia de forma apropriada e que faa com que voc no vire um alienado e desconectado de seu ambiente imediato.

60 :: marketing

Ren de Paula Jr.


Diretor de contedo do Yahoo Brasil. profissional de internet desde 1996, passou pelas maiores agncias e empresas do pas: Wunderman, AlmapBBDO, Agncia Click, Banco Real ABN AMRO. criador da usina.com, portal focado no mundo online, e do radinho de pilha (www.radinhodepilha.com), comunidade de profissionais da rea. rene@usina.com

Pecado muito pouco original


Onde quer que voc olhe, a mensagem uma s: voc est frito. Melhor nem ouvir a caixa postal. A caixa de entrada, ento... pior ainda. E s de pensar na gritaria que te aguarda, nem d vontade de sair da cama, isto , se que voc ainda consegue pregar o olho e dormir. Bem-vindo InFernet, onde demnios sem piedade te assam em fogo e enxofre. Com o tempo voc acostuma. Teu pai te pergunta: como vai o trabalho, meu filho? Voc responde: uma correria danada. E ambos sorriem, porque sofrer bom sinal. Ser que ? Eu acho que no. Tenho duas notcias, uma boa e outra dolorida: Comecemos pela dolorosa: se voc foi pro inferno, a culpa sua e o pecado grave. Doeu? Lamento. Onde foi que voc pecou? Well, posso arriscar? O pecado mais vergonhoso a Preguia. Voc sabe que um bom briefing importante, que documentar o que o cliente quer e espera fundamental, que voc deve validar ponto por ponto o que foi combinado, que deveria ter aprovado todos os detalhes do layout antes de por a mo na massa, que deveria testar tudo antes de colocar no ar... mas a bateu a preguia. Para que perder tempo com essas chatices? Eu sou um profissional de talento, no um burocrata... Vamos queimar etapas! E a voc se queima. Voc que teve preguia de fazer a lio de casa vai arder por semanas nas chamas da refao. Posso arriscar outra vez? Orgulho. Voc que sabe tuuuudo de internet, um cara antenado, descolado, geek, vai dar ouvidos a esse cliente sem glamour? Quem ele, afinal, para dizer se ficou bom ou no? Resposta: ele o cara que paga as tuas contas. Ele o cara, o dono do negcio e entende disso como ningum. Se algum deveria enfiar o rabo no meio das pernas e aprender com humildade... voc. Ou ento sua conta bancria vai atravessar desertos trridos implorando por uma gota salobra de dinheiro. Gula outra desgraa. Confesse: voc no resistiu e aceitou trs frilas ao mesmo tempo. A grana era to boa! O cliente to amigvel! Eu me viro, voc imaginou, e acabou virando num espeto sobre as lnguas de fogo dos clientes que voc deixou na mo. Avareza engana. Voc faz as contas e parece lgico: por que perder dinheiro com isso? Eu fao isso sair de graa. Faltou um S a: sai deSgraa. Voc no quis contratar um auxiliar, no quis licenciar um software, no quis contratar um hosting decente? O dinheiro que voc economizou no paga o festival de dores de cabea que te espera: noites mal dormidas e o medo perptuo de que algum descubra que o pecado maior foi a economia porca que voc fez.

marketing :: 61

"Perder a conana de um cliente quase irreversvel. O estrago que voc provoca nos negcios alheios no tem volta. A mancha na tua reputao no sai to fcil."

Ok, tudo bem, voc no um mo-de-vaca mesquinho. Voc generoso, grandioso. Luxria tem seu encanto, convenhamos. charmoso viver larga. At a hora em que o cliente te larga porque voc estourou o oramento no meio do projeto. Como j dizia Joo Bosco, dinheiro na mo vendaval na vida de um sonhador, sobretudo se ele achar que fazer contas coisa de pobre. Faltam dois pecados ainda, a inveja e a ira, mas vamos deixar isso de lado, j estamos bem-servidos de tentaes nesse jardim de delcias do digimundo, onde tudo parece fcil, onde tudo d para resolver com um bom CTRL+Z. D mesmo? No, no d. Perder a confiana de um cliente quase irreversvel. O estrago que voc provoca nos negcios alheios no tem volta. A mancha na tua reputao no sai to fcil. E aquela precauo que voc no tomou no tem remdio. Lamento, mas no mundo do trabalho no h perdo. Perguntei a uma colega gringa como andava o trabalho. Acabamos o projeto e estamos fazendo o postmortem, disse ela. Post-mortem um jargo para uma anlise de tudo o que deu errado em um projeto e poderia ter sido evitado. Um bom post-mortem traz luz um monte

de descuidos, vcios, acidentes, distores. Di, mas fica clarssimo onde no errar da prxima vez. Recomendo. Eu prometi uma boa notcia, no? L vai: existe uma sada do Inferno. No entrar nele.

62 :: bula da Catunda

Marcela Catunda
Trabalhou na TV Globo, TV Bandeirantes, TV Gazeta, Manchete e SBT. Foi redatora da DM9DDB e Supervisora de Criao de Mdia Interativa da Publicis Salles Norton. scia do site Banheiro Feminino, est no Orkut e trabalha como autnoma. blog - http://pirei.catunda.org marcelacatunda@terra.com.br

Eu dei! eu dei! Eu dei uma palestra


E eu que sempre fui a bagunceira quieta/a tmida falante, enfrentei os palcos de todo um Maksoud e palestrei no 10EWD em So Paulo. Passei um medo danado, fiquei desesperadamente nervosa, mas saiu. Aqui vai um modesto pout pourri dos melhores momentos da palestra, sem nenhuma pretenso, please. Antes de falarmos no que consiste o ofcio freelar, preciso dividir os freelas em dois gneros: O primeiro aquele QUE QUER SER FREELA, mas s at ser contratado: - Um dia ainda trabalho aqui. O segundo o QUE QUER SER FREELA e pronto: - Adoro trabalhar aqui, l e acol. E o que ser freela? Freela aquele profissional que, assim como outro qualquer, rala pra ganhar seu dinheirinho. A diferena bsica do freela pros outros profissionais que o freela tem como endereo comercial o residencial. Parece pouco, mas no . preciso ter nervos de ao pra ser freela, tem ms que o telefone no toca, ou porque cortaram a conta da gente, ou porque ningum lembrou da nossa existncia, e se lembrou desistiu antes de fechar negcio. Um freela sabe que propostas voando no so um pssaro na mo. Sabe que tem que correr atrs, disparar e-mails, falar com os amigos e botar a carroa pra andar. Quando o desespero bater, ou um oficial de justia, erga a cabea e pense: DIAS MELHORES VIRO. E quem diabos chama um freela? Cada caso um caso. No meu, por exemplo, agncias de publicidade, produtoras de internet, de vdeo, animao, televises e quem mais quiser experimentar. Se a coisa for legal, eu topo. Mas como se vender como freela? Ta uma coisa que estou constantemente aprendendo. Passei a vez. Mas posso dizer que sorte um treco que conta. E quanto ganha um freela? Eu costumo ver quantas horas vou passar me dedicando ao job e multiplico pelo meu custo mulher/hora. No gosto de trabalhar chutando preo. Sempre que isso me acontece me dou mal, muito mal. Mas, s vezes, eu chuto e me dou bem, muito bem. Porm, o mais seguro calcular seu preo e multiplicar pelas horas dedicadas ao job

bula da Catunda :: 63

No pode ser refao pokemon, aquela que vira job do mar, job do fogo, job da terra, vinte e nove jobs num s. duro, mas importante lembrar que voc um freela e no funcionrio do cara
em questo. "Refaes" so ossos do ofcio, mas tudo tem que ter limite. No pode ser "refao" pokemon, aquela que vira job do mar, job do fogo, job da terra, vinte e nove jobs num s. duro, mas importante lembrar que voc um freela e no funcionrio do cara, e est ganhando por trabalho e no por ms. E a, quer pagar QUANDO? A diferena bsica de um freela para o contratado a pergunta: e eu vou receber quando? Exemplo: voc vai l, pega o job, faz direitinho e quando entrega o cara diz: Manda a nota. Nesse meio tempo voc, que j t ralando. H pelo menos duas semanas, vai ter que esperar os tais 30 dias fora a nota, ou seja, vai demorar na melhor das hipteses, uns 50 dias pra ter a grana na conta. Por isso, combine sempre QUANDO. Ele to importante quanto o QUANTO. Fluxo de Trabalho Quando se trabalha em casa s vezes a coisa fica desesperadora. A gente precisa do material pra comear, o cara fica de mandar dia tal, no manda e tambm no altera a data de entrega, ou seja, ele t transformando voc no nico incompetente da coisa e isso no justo. Deixe bem claro que, se o material no chegar, voc no vai contratar uma vidente pra te brifar. VANTAGENS E DESVANTAGENS DE SER FREELA Vantagens - Eu sou meu chefe. (oba) - Eu fao minha hora. (delcia) - Eu trabalho em casa. (coisa boa) - Eu ganho grana numa tacada. (me dei bem) - Minhas Bics so minhas Bics. (ningum me rouba) Desvantagens - Eu sou meu chefe. (que medo) - Eu fao minha hora. (socorro) - Eu trabalho em casa. (folgada) - Eu ganho grana numa tacada. (pena que a grana no entra sempre) - Minhas Bics so minhas Bics. (ningum pra conversar) E para encerrar aqui vo Os 10 Mandamentos do Freela by Marcela Catunda:

64 :: webdesign

Luli Radfahrer
PhD em Comunicao Digital, j dirigiu a diviso de internet de algumas das maiores agncias de propaganda e de alguns dos maiores portais do Brasil. Hoje, Professor-Doutor da ECA-USP, Diretor Associado do Museu de Arte Contempornea e consultor independente. Autor do livro design/web/ design:2, administra uma comunidade de difuso do conhecimento digital pelo Pas. webdesign@luli.com.br

A pergunta de 1MUS$
Voc est no emprego que sempre sonhou? Conquistou a mulher dos seus sonhos? Isso s o comeo
Existe, em terras gringas, uma expresso diretamente ligada relao deles com o dinheiro. Me refiro tal pergunta de um milho de dlares um problema to difcil e/ou insolvel que sua resposta valeria US$ 106. Mesmo montante, alis, oferecido aos ganhadores do prmio Nobel. Honestamente, acho meio besta a motivao que leve algum a se embrenhar em uma pesquisa de porte cientfica ou no seja algo to ridculo quanto dinheiro. No acredito que pesquisadores dedicados, que devotam 40 anos ou mais de suas vidas / carreiras na busca por respostas a problemas que afligem a humanidade (a cura do Cncer, por exemplo) o faam com a perspectiva, mesmo que remota, de ganhar uma polpuda quantia. Isso me parece a cenoura para outro tipo de burro. s ver o que esses cientistas / literatos / polticos fazem logo depois de ganhar tais prmios. Alguns at tiram uns poucos dias de merecidas frias, s para depois voltar a seus laboratrios e escritrios como se nada tivesse acontecido. No se sabe de nenhum deles que tenha comprado um veleiro para navegar pelas ilhas gregas. At porque eles j esto velhos demais para isso. O velho aqui tambm tem, como muitos, sua pergunta de um megadlar. Antes que voc comece a reclamar, saiba que ela tem bastante a ver com a sua profisso. Com vrias, alis: O que voc faria DEPOIS de ganhar um milho de dlares? Sim. Imagine que, por acaso, herana, presente, golpe-do-ba, falcatrua, mensalo, stock options, Google AdSense ou simplesmente por ter trabalhado duro na vida, voc tenha acesso a uma quantidade de dinheiro que faz com que nunca mais tenha que trabalhar. Trocando em midos, um rendimento mensal de mais de 12 mil doletas sem risco. Sem esforo. Garantido para sempre. E agora, o que faria? Antes de pensar no bvio, lembre-se que o bvio nem sempre sbio. As histrias daqueles que ganharam na loteria no tm sempre final feliz. Muitos deles, alis, terminam mais pobres ou mais infelizes do que eram antes de montar na bolada. Diz-se por a que dinheiro no traz a felicidade (manda buscar, diriam alguns). Diz-se tambm que ele a raiz de todos os males (o ditado correto o amor ao dinheiro). Acho que isso dar importncia demais para ele. Por mais que seja supervalorizado nesses tempos de freakonomics, ele s um agente intermedirio. Como tal, no tem vontade ou ideologia. O que se faz com ele (ou por ele) que demanda avaliao.

webdesign :: 65

"...por que voc faz o que faz? Qual legado pretende deixar? Como imagina ser reconhecido?"

Muitos detestam o trabalho que fazem e a empresa em que esto e s justificam sua permanncia por causa do to necessrio dinheiro. Por isso, volto minha pergunta: se voc conseguisse atingir seu sonho, o que faria depois? Por no ter resposta a essa pergunta que muita gente se escraviza e se perde. Acho patticos os pobres-diabos que dizem s massas estarem no emprego que sempre sonharam. Isso politicagem ou ingenuidade. Se voc chegou aonde sempre quis, est na hora de se aposentar. Em outras palavras: por que voc faz o que faz? Qual

legado pretende deixar? Como imagina ser reconhecido? Um escroto rico no me parece algo atraente, por mais que a TV esteja cheia de exemplos em seus apresentadores de programas de auditrio. Mas nem preciso ir to longe, com seu chefe por perto para servir de exemplo. O carnaval est chegando. Goste ou no dele, sugiro que voc o utilize como metfora de seus objetivos p ro f i s s i o n a i s . D e p o i s d e u n s d i a s d e e u f o r i a , s o n h o e fantasia, a quarta-feira de cinzas a nica certeza indiscutvel.

Você também pode gostar