Ed32

agosto 2006 :: ano 3 :: nº 32 :: www.revistawebdesign.com.br

R$ 8,90 agosto 2006 :: ano 3 :: n 32 :: www.revistawebdesign.com.br

I SSN 1806 - 0099

9 771806 009009

de ol h

o

Webdesign

n

os

fu

tur os p rofissionais

Entrevista: blogs corporativos As vantagens de criar um canal de comunicação instantâneo entre empresas e clientes, apostando no design como diferencial

Emais: teste seu site antes de colocá-lo no ar Confira quais são as metodologias mais utilizadas pelas agências brasileiras na hora de validar um projeto digital

Debate: o belo e o bom no design para web A análise estética de um site envolve parâmetros objetivos ou subjetivos?

00032

E D I T O R A

4 :: quem somos

Editorial

Equipe

Eu, no meio de uma pilha

Direção Geral 1. Adriana Melo adriana@arteccom.com.br

“Programador visual com dois anos de experiência”. Eu vi o anúncio nos

Direção de Redação 2. Luis Rocha

classificados de O Globo, tinha acabado de me formar, mas enviei meu currículo mesmo assim. Ninguém me ligou. Resolvi ligar, me passaram para o RH. Então,

luis@arteccom.com.br

eu perguntei se os currículos já tinham sido analisados, porque eu gostaria de

Criação e Diagramação 3. Camila Oliveira

fazer uma entrevista na empresa. Aí, eu ouvi alguém falando: “O Mauro já viu

camila@arteccom.com.br

essa pilha aqui?”; “Ih... acho que não.”. Falaram que entrariam em contato.

4. Leandro Camacho leandro@arteccom.com.br

Liguei de novo: “Por favor, o Mauro.”. “Quem gostaria?”, perguntaram.

5. Suzanna Duarte

“Adriana, é particular.”. Ele atendeu (Adriana devia ser o nome de alguma amiga,

Ilustração 6. Beto Vieira

e falei que gostaria de mostrar meus trabalhos pessoalmente. E aí veio a pergunta:

beto@arteccom.com.br

“Você tem experiência?”. “Claro... fiz estágio durante três anos em ótimos

Publicidade 7. Bruno Pettendorfer

escritórios de design”, respondi. “Então vem aqui amanhã, às 14h.”.

Fui. E acabei contratada. Acho que ele (que depois descobri que era o

8. Débora Carvalho publicidade@arteccom.com.br

próprio dono da empresa) nem chegou a ver a tal pilha de currículos. Trabalhei

Gerência de Tecnologia 9. Fabio Pinheiro

lá por dois anos. Foi meu primeiro emprego, onde eu já coordenava uma equipe de ilustradores, arte-finalistas e programadores visuais. Aprendi muito

fabio@arteccom.com.br

Financeiro 10. Cristiane Dalmati

sobre várias coisas, mas conto especialmente essa história porque ilustra como podemos mostrar nosso diferencial antes mesmo da contratação, ou,

cristiane@arteccom.com.br

justamente com essa finalidade.

Atendimento e Assinaturas 11. Renata Fontan

E, assim, sobrevivi à pilha. Bem, espero que gostem de nossa matéria

renata@arteccom.com.br

principal, sobre talentos, experiência profissional etc. Depois não esqueçam de nos dar um retorno, pelo site da revista.

Dia 15 de agosto comemoramos sete anos de Arteccom. Aproveito para apresentar nossa equipe (com novos colaboradores), agradecê-los pela companhia e parabenizá-los pelo talento, dedicação e pelo sucesso da empresa! Um beijo especial para todos vocês.

A Arteccom é uma empresa de design, especializada na criação de sites e responsável 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

Criação e edição

Boa leitura.

www.arteccom.com.br

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

Adriana Melo

Distribuição www.chinaglia.com.br

4 7

6

9

2

3

1

10

5 8 11

:: A Arteccom não se responsabiliza por informações e opiniões contidas nos artigos assinados, bem como pelo teor dos anúncios publicitários. :: Não é permitida a reprodução de textos ou imagens sem autorização da editora.

suzanna@arteccom.com.br

irmã, namorada... ou ele ficou curioso, enfim: funcionou). Então, eu me apresentei

menu :: 5

apresentação pág. 4 quem somos pág. 5 menu

contato pág. 6 emails pág. 6 fale conosco

fique por den tro pág. 10 métricas e mercado pág. 12 direito na web

portfólio pág. 14 agência: estudioCrop pág. 19 freelancer: Tales de Angelo

matéria de capa pág. 22 entrevista: blog corporativo pág. 28 na busca por talentos

e-mais pág. 38 debate: O Belo e o Bom no design para web pág. 42 e-mais: Check-list pág. 46 estudo de caso: O Magnata pág. 52 tecnologia na web: Tratamento de imagens pág. 54 tutorial: Caminhando pelo HTML- Parte 3

com a palavra pág. 58 webwriting: Bruno Rodrigues pág. 60 marketing: René de Paula Jr. pág. 62 bula da Catunda: Marcela Catunda pág. 64 webdesign: Luli Radfahrer

6 :: emails

naweb web Assunto: Direito Ícones na Gostaria de saber se em alguma edição já teve alguma matéria com o assunto “ícones na web”?

Minha monografia será sobre esse assunto, e preciso de material.

Obrigada.

Caroline Marca carolmarca@gmail.com

Carolina, na edição de setembro, faremos um especial sobre iconografia. Dando uma palhinha sobre o que vem por aí :-), o Portal do Governo do Estado de São Paulo possui uma padronização visual sobre o uso de ícones na web (http://tinyurl.com/r2o5f). nade web Assunto: Direito Entrega site Sou assinante da revista e necessito de uma ajuda urgente.

Meu cliente pediu uma cópia do formato final do site dele. No contrato, consta uma cláusula que diz que os direitos autorais relativos ao layout do projeto pertencem a mim. Ainda assim, tenho dúvidas sobre o fornecimento de uma cópia a eles.

ser matéria de alguma edição da

outros. São ferramentas que

revista, o que acham?

podem facilitar nosso trabalho.

Vanderléia Dallariva vander@w3sites.biz

Gostaria muito de ler uma matéria

Achamos uma ótima sugestão,

Fernando Souza fernando.souzaa@gmail.com

tanto é que ela virou o tema desta

sobre isso.

Assunto: Direito Makingna of web da

edição da coluna Direito na Web.

Como vai, Fernando?

Vá até a página 12 e confira o

Seu xará (Fernando Farto) também

artigo. Boa leitura!

vem pedindo uma reportagem

Minha sugestão é a seguinte:

sobre o mesmo assunto. Como “a

lançar um DVD (ou CD-ROM

voz do povo, é a voz de Deus”,

ou VCD) com um conteúdo, no

vamos programá-la para a edição

mínimo, curioso. Não, não seriam

de setembro, ok? Obrigada e não

4 GB de programas, scripts e

deixe de enviar sugestões!

templates. Seria um “Making of

Assunto: Direito Gerenciamento na web de projetos Seria possível vocês abordarem

Webdesign?

temas de como administrar uma

Revista Webdesign”, contando o

produtora. Por exemplo: que

dia-a-dia da revista, comentários

aplicativos ou planilhas podemos

dos colunistas, depoimentos de

usar para gerenciar um projeto

amigos etc. Na minha humilde

de forma fácil em uma equipe

opinião, isso é algo que até hoje

pequena? Como fazer isso? São

ninguém pensou, mostrar o lado

assuntos importantes tanto para

humano de uma das maiores

o freelancer quanto para uma

publicações sobre webdesign do

produtora pequena que está

mundo. Levem isso para próxima

crescendo.

reunião, ok?

André andre_listas@mac.com

Fernando Peres fernandoperesfarto@gmail.com

É isso, aí, André. Através de

naasweb Assunto: Direito CD com revistas

sugestões e troca de idéias

Com certeza, Fernando, adoramos sua idéia! E seria um grande prazer

poderemos melhorar e atingir o

Gostaria de saber se vocês não

fazer esse CD. Quem sabe para

interesse de nosso público. Sua

vão fazer um CD ou DVD especial

uma edição comemorativa, certo?

sugestão já entrou em nossa pauta

com a compilação das edições

Vamos conversar sobre isso com

de reportagem.

anteriores?

a equipe na próxima reunião de

Assunto: Direito Gerenciadores na web de conteúdo

Egidio Matos egidiosilva@gmail.com

Oi, Egidio, tudo bem?

Em breve, colocaremos à venda, no

É claro que os dados de acesso

Estou pesquisando sobre CMS

ftp ao host eu não fornecerei, mas

site da revista, dois CDs: um com

(gerenciadores de conteúdo

uma vez que possuam esta cópia...

todas as edições de 2005 e outro

web) e encontrei alguns como:

Este tipo de situação poderia até

com as de 2004. Aguarde!

Zope/Plone, e107, Mambo, entre

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

pauta, ok? Obrigada pela sugestão.

Um grande abraço.

10 :: métricas e mercado

Quantidade de horas de navegação, por

Com este percentual, sexta-feira se tornou

semana, em ambientes corporativos

o dia da semana com a maior taxa de aber-

21%

tura de e-mails, segundo pesquisa recente da eRoi. Em seguida, aparece a terça-feira, com 20,8%.

Fonte: Relazione.com.br

600 milhões Estimativa de PCs conectados à internet e aparelhos portáteis, no mundo, com o Flash Player instalado.

Fonte: Adobe Systems

Fonte: Pesquisa Web@Work 2006

12 meses

19,1 milhões

Esse é o tempo aproximado que as novas versões do Flash

Volume de internautas que o MSN Messenger atinge men-

Player levam para atingir 80% dos computadores de mesa

salmente no Brasil.

com conexão à internet.

Fonte: Microsoft

Fonte: NPD Group Research e Adobe Systems

1,2 bilhão...

Esse foi o tamanho da redução de tráfego

80%

na rede da LocaWeb, durante os dois primeiros jogos da seleção brasileira na Copa do Mundo.

... de páginas visitadas no site oficial da Copa do Mundo 2006, somente na primeira semana de realização do torneio.

Fonte: FIFAworldcup.com

Fonte: Locaweb

Perfil dos pagamentos por vendas nacionais na internet Meio utilizado

%

Cartão de crédito nacional

29,0

Boleto bancário

22,0

Transferências bancárias interligadas diretamente ao vendedor

22,0

Depósito direto em conta corrente

21,0

Sedex a cobrar

4,7

Outros métodos

1,3

Fonte: BRPay

Envie sugestões e críticas para redacao@arteccom.com.br

métricas e mercado :: 11

ViuIsso?

Por Michel Lent Schwartzman - michel@viuisso.com.br Site: www.viuisso.com.br

Notícias e comentários sobre comunicação digital, internet e publicidade A Pesquisa Salarial Mercado Interativo BR |

Salários por faixa etária: mais velhos recebem mais

10’Métricas, uma iniciativa da agência 10’Minutos

Nenhum entrevistado

Interactive, foi realizada via internet durante os dias 23 e

com menos de 18 anos

29 de maio e contou com 1005 participantes. Os convites

declarou ganhar mais do que

foram feitos através de listas de discussão e veículos

R$ 2 mil. No grupo acima de

especializados no mercado.

35 anos, 31,8% declararam

São Paulo foi o estado com mais participantes na

receber mais de R$ 6 mil.

pesquisa (556), seguido de Rio de Janeiro (125), Minas Gerais (52), Paraná (44) e Rio Grande do Sul (43).

P r a t i c a m e n t e t o d o s o s e s t a d o s b r a s i l e i ro s e n v i a r a m respostas, com a exceção do Acre e Roraima.

Profissionais que moram no interior de seus estados tiveram uma participação expressiva (20%). Entre os participantes, a predominância foi de profissionais mais jovens, entre 18 e 30 anos (77,61%). O mercado se mostrou predominantemente masculino (84%), sendo as atividades predominantes criação (40%) e tecnologia (22%) e a faixa de salário com mais respostas: R$ 1000 a R$ 2000.

A pergunta “Qual é a sua área de atuação” permitiu mais de uma resposta para identificar um possível acúmulo de funções. Como resultado, 28,86% dos consultados

Salários por função: maioria recebe entre R$ 1 mil e R$ 2 mil A faixa entre “R$ 1 mil e R$ 2 mil” foi a mais citada entre todos os grupos. A exceção foi o grupo que declarou ‘outra’ n a re s p o s t a d a p e rg u n t a “função”, onde 18,4% dos entrevistados apontaram a opção “mais de R$ 6 mil”.

Salários por estado/região: São Paulo ganha mais, Paraná ganha menos

declararam acumular funções de áreas diferentes. Como

São Paulo foi a região com a melhor remuneração do

‘outra’ área de atuação, entre as 114 opções citadas, as

país, com 11,49% dos participantes tendo respondido re-

que mais apareceram foram: Gerente / Operações; Diretor

ceber acima de R$ 6 mil. Paraná é a região com 52,27% das

/ CEO; Planejamento; Comercial.

respostas na faixa abaixo dos R$ 1 mil.

Salários por sexo: mulheres mais bem remuneradas Houve um relativo equilíbrio entre os salários

Sexo por área: mulheres no atendimento, homens na tecnologia

recebidos por homens e mulheres em todas as faixas de

A predominância masculina é geral em todas as ati-

salário, com exceção daqueles que recebem acima de R$ 6

vidades pesquisadas. Apenas no atendimento (24,20%)

mil, onde 10,9% das mulheres declararam receber mais de

e na função ‘outros’ (29,50%) há uma participação maior

R$ 6 mil, contra apenas 5,7% dos homens.

de mulheres.

12 :: direito na web

Entrega do formato final do site “Meu cliente pediu uma cópia do formato final do site dele. No contrato, consta uma cláusula que diz que os direitos autorais relativos ao layout do projeto pertencem a mim. O que faço?”

Vanderléia Dallariva (vander@w3sites.biz)

Gilberto Martins de Almeida Advogado formado na PUC/RJ, com Mestrado na USP e cursos

A pergunta é bastante importante,

Se, ao contrário, for estipulado no con-

pois o que ela indaga sobre obrigação ou

trato que o direito pertencerá ao Contratado,

não de entrega de formato final / layout diz

em tese ele poderá reter os segredos e anota-

respeito, por via de extensão, a obrigação

ções do desenvolvimento, como, aliás, consta

ou não de entrega de código-fonte e de ma-

de uma decisão judicial em nosso país.

terial de desenvolvimento em geral.

Mas convém estar atento ao tipo de

A aparência (look and feel) do site e a

contrato que for negociado e assinado, pois

Gerente Jurídico da IBM, onde

programação do seu código são protegíveis

se for de licenciamento (que é semelhante

trabalhou por 11 anos, no Brasil

(quando há originalidade suficiente) pelo Di-

ao de locação), o Contratante terá apenas

Almeida - Advogados, escritório

reito de Autor. A lei (9.609) que regula este

o uso (o que é similar à posse) e enquanto

especializado.

último diz que contratos nessa área têm que

cumprir o contrato (inclusive, seguir pagan-

Envie sua dúvida para:

ser interpretados ao pé da letra, por isso é

do o que for devido), mas se for de cessão

redacao@arteccom.com.br

crucial incluir cláusulas claras e específicas.

(que é semelhante ao de venda), o Contra-

em Harvard e no M.I.T. Ex-

e nos EUA. Sócio de Martins de

Há ainda a lei (9.610) que trata ape-

tado poderá ter “vendido” os seus direitos

nas de software, também aplicável a si-

(dando razão ao Contratante para exigir

tes. Ela cria um “default”: se o contrato

layout final, código-fonte etc.).

for omisso, os direitos de autor caberão a

Vale lembrar que quem produz e co-

quem (seja pessoa ou empresa) contrata,

mercializa algo para outro fica legalmente

ou a quem (seja empregador público ou

responsável por garantir manutenção cor-

privado) determina.

retiva. Assim, independente de entregar ou

Portanto, se não houver cláusula no

não o material subjacente ao usável, há a

contrato (de serviços ou de trabalho), os

obrigação de dar assistência técnica para

direitos pertencerão ao Contratante e o

que o Contratante, como consumidor, não

Contratado poderá ser obrigado a entregar

fique inteiramente à mercê do seu fornece-

tudo o que tiver desenvolvido. As exceções

dor (especialmente, quando o Contratante

previstas na lei em relação a esse princípio

ficar sem o código-fonte, ou equivalente).

geral são bastante estreitas (o Contratado

Sabendo do princípio geral e das exceções

desenvolver algo fora do previsto, com re-

previstas na lei, negocie da forma que lhe

cursos próprios etc.).

for mais favorável.

14 :: portfólio agência - estudiocrop

Plantando conceitos, colhendo imagens

Ao longo dos três anos de existência da Revista Webdesign, muitos portfólios das mais variadas agências e profissionais freelancers já passaram por aqui, trazendo uma certeza: o campo brasileiro de design é fértil na produção de talentos para o mercado interativo. No Estado do Paraná, mais precisamente em Curitiba, a colheita parece ter sido bem generosa.

Os bons frutos aparecem no trabalho do estudioCrop. “Somos todos designers gráficos que se conheceram ainda na faculdade. O estúdio surgiu em maio de 2005, quando subiram a bordo os sócios Anderson Maschio e Beto Janz. Ou seja, temos pouco mais de um ano de vida”, revela Dado Queiroz, um dos sócios da agência.

portfólio agência - estudiocrop :: 15

“Não temos a política de mostrar os trabalhos bacanas que fazemos de graça e esconder ou fazer sob pseudônimos trabalhos mais corporativos” O envolvimento com a área de design é tanta que o peculiar nome do estúdio foi inspirado em um dos principais termos que povoam o linguajar da comunidade de designers. “Quando estávamos na faculdade, adorávamos um maneirismo que chamávamos ‘cropar’ cortar pedaços de letras ou imagens, propositadamente - termo oriundo da ferramenta ‘crop’, presente na maioria dos aplicativos gráficos. Só depois soubemos que Crop, em inglês, significa, além de cortar e ceifar, também plantação, colheita etc. Sendo nós, cidadãos do ‘celeiro do Brasil’, o nome pareceu melhor ainda (muito embora não tenhamos

www.estudiocrop.com.br

o que se pode chamar de perfil de homem do campo). Sem contar a idéia de se plantar conceitos e colher imagens”.

Paciência: é preciso esperar a germinação das sementes

Divulgando os resultados da plantação Assim, para tornar conhecido os resultados dos

Uma certa falta de paciência do mercado, para esperar

trabalhos já realizados e aumentar o seu portfólio, o

pelos resultados das sementes plantadas pelo estúdio,

estudioCrop procura investir no relacionamento que será

dificultou sua evolução. No entanto, o tempo se encarregaria

desenvolvido ao longo do tempo com seus clientes, sem

de determinar os bons resultados da safra Crop.

qualquer tipo de discriminação.

“Acredito que uma das barreiras mais complicadas

“Uma regra de ouro é atender com muita atenção e

foi a falta de um portfólio numeroso. Boa parte dos

dedicação todo e qualquer cliente, seja uma microempresa

clientes não parecia interessada na qualidade das peças

ou um conglomerado multinacional, o que, além de

apresentadas, mas sim na quantidade e no porte dos

assegurar um ambiente saudável de trabalho, costuma

clientes - o que é naturalmente complicado para qualquer

fidelizar os clientes, que acabam não apenas trazendo mais

estúdio recém-formado. Fizemos todo o possível para

trabalhos, mas também novos clientes. Felizmente, isso

reverter a situação, mas foi somente com o tempo que ela

não é difícil para nós, já que além de termos contato direto

começou a mudar, através do aumento natural das peças

com os clientes, por sermos um estúdio ainda pequeno,

do portfólio”, revela Dado.

temos também o design como uma paixão, muito antes

Vencido este desafio, o estúdio agora corre atrás para superar sua pouca prática com relação a assuntos

de uma profissão. Dessa forma, acabamos por nos tornar amigos da grande maioria de nossos clientes”.

gerenciais. “Como somos todos designers, não há nenhum

Temos ou não influências curitibanas na plantação Crop?

gerente ou administrador de ofício. Tampouco podemos

Antes de falarmos sobre as possí-

parar os trabalhos para planejarmos soluções. No entanto,

veis influências da cena curitibana nos

com o recente crescimento do estúdio, esta situação

trabalhos do estúdio, Dado faz ques-

felizmente já tem data para acabar”.

16 :: portfólio agência - estudiocrop

“Uma regra de ouro é atender com muita atenção e dedicação todo e qualquer cliente, seja uma microempresa ou um conglomerado multinacional” tão de desconstruir a forte imagem cultural e artística que

c o m a l t a s d o s e s d e l i b e rd a d e , m e s m o p o rq u e e s s e s

envolve a cidade.

s ã o r a ro s e q u a s e n u n c a c o n t a m c o m re m u n e r a ç ã o

“Em nossa humilde opinião, esta visão de Curitiba

satisfatória”, explica Dado.

é um mito, semelhante ao da capital social, sorriso,

Dessa forma, a experiência mostrou para eles que, em

ecológica, de primeiro mundo ou coisa parecida. Adoramos

todos os nichos, há clientes dispostos a ousar. “Não temos

a cidade (uns de nós mais que outros), mas dizer que a cena

a política de mostrar os trabalhos bacanas que fazemos de

cultural curitibana é mais forte que a paulista ou a carioca,

graça e esconder ou fazer sob pseudônimos trabalhos mais

por exemplo, é loucura. Um festival anual de teatro não

corporativos. Tentamos nos superar em cada projeto, indo

garante muita coisa”, afirma.

até onde cada situação permite, seja para uma companhia

Ou seja, não podemos esquecer que, apesar de todas

de seguros ou para um selo de música independente”.

as suas inegáveis virtudes, a cidade tem também problemas

E esse tipo de visão adotado pelo estúdio serve para

a serem resolvidos. “Podemos citar um provincianismo

desmistificar o discurso daqueles que acreditam que o

indigesto e uma elite social em boa medida nauseante - o

profi ssional de design deve optar ou por um estilo voltado

que não deve ser associado a algo como Crop contra o

para negócios ou seguir a linha alternativa. “Designers

capitalismo. Nada disso. Trata-se de Crop contra relações

‘business’ nos acham muito alternativos e designers

sociais detestáveis. Mas, enfim, Curitiba certamente

alternativos nos acham um pouquinho ‘business’. Parece ser

deve marcar nosso trabalho. Não objetivamente, nem nas

desta mescla que surge um ‘estilo crop’, como alguns nos têm

características esperadas, mas é bastante possível que haja

apontado, algo que está longe de ser lugar comum, mas que,

algo de Curitiba permeando nosso trabalho”.

ao mesmo tempo, é palatável o suficiente para ser apreciado

Além da cidade, outros fatores marcam as influências

e entendido pelos mais diversos públicos”, finaliza.

no trabalho do estúdio. “Elas incluem designers e design do passado e do presente, tipografia tradicional e vanguardista, além de outros meios como fotografia, cinema, crítica e teoria de design etc”.

A tipografia utilizada no logotipo do estudioCrop

Construindo um estilo e o processo de plantação Crop

( e n o t í t u l o d e s t a re p o r t a g e m ) é a f o n t e “ F a c e i r a ” ,

Existiria uma fórmula para justificar o sucesso no

criada pelo projeto “Tipos Populares do Brasil” (www.

processo criativo de seus profissionais e o crescimento

sibilina.com/tipos). Ela é gratuita e segue a mesma linha

rápido das plantações feitas pelo estúdio? “Jogamos

conceitual utilizada na criação da fonte “Brasilêro” (saiba

futebol nos fundos do estúdio e damos preferência a

mais, na edição de fevereiro - Tipografia): a inspiração na

trabalhos que nos tragam satisfação profissional, o que

caligrafia popular.

não significa que pegamos apenas trabalhos ‘doidões’,

Cases www.procopio.com.br Tecnologias utilizadas: Flash + XML + PHP

Segundo Anderson Maschio, um dos sócios do estudioCrop, a oportunidade deste trabalho surgiu através da rede de parcerias que a agência possui.

“Neste caso, com a Inventiva Propaganda. A Procópio Sacarias é uma das líderes no setor no Brasil, produzindo tecidos, lonas e sacarias em geral, não só para o mercado nacional, mas também para vários outros países”.

Assim, a missão era modernizar a presença on-line da empresa e valorizar pontos importantes, que fazem a diferença em relação à concorrência: a alta tecnologia e a eficiência empregada na linha de produção.

“A idéia que dá forma ao site baseia-se na metáfora do menu que ‘embala’ o site. Equilibrando textos objetivos e imagens generosas, construímos uma estrutura básica com quatro áreas. Os textos relativos aos itens de cada área são mostrados numa fita que corre sobre as imagens. Esta fita também serve como marcação para a área selecionada. O box que destaca o item selecionado também serve como loader das imagens”, analisa.

Outro aspecto fundamental deste projeto envolveu a sua combinação cromática. “Optamos por utilizar tons de cinza e o branco, com muita transparência e valorizamos/destacamos a logomarca - com grande área azul - que aparece de forma pouco usual, porém marcante. Com isso, conseguimos realizar um site atraente, moderno, ágil e objetivo”.

18 :: portfólio agência - estudiocrop

www.prismaproducoes.com.br Tecnologias utilizadas: Flash + FlashVideo + XML + Javascript + PHP Este foi um dos trabalhos mais completos, pois o estúdio ficou responsável pela revitalização de toda a identidade visual da empresa (Prisma Produções), para depois chegar na parte web. “A Prisma produz e realiza vários e variados p ro j e t o s n a á re a c u l t u r a l . O p ro j e t o m a i s re c e n t e é u m documentário sobre Santos Dumont e o lendário 14 bis”,

seus respectivos conteúdos. Utilizamos o som (músicas) para

aponta Anderson.

delimitar os ambientes”, diz Anderson.

Assim, os desafios eram desenvolver um teaser, mostrando

Com relação ao hotsite, Dado explica que a idéia foi

somente o necessário para o momento sobre a Prisma, além

criar um visual completamente distinto do site propriamente

de um hotsite dedicado ao projeto sobre o 14 bis. “O teaser

dito, saindo da aura institucional e entrando na do projeto

consiste basicamente em pequenas telas com diferentes

em si. “Um estilo mais de época, porém bastante colorido

conteúdos. A navegação é simples e objetiva. Uma tela para a

e dinâmico, destacando o resgate do 14 bis para o século

empresa, sutilmente destacada, e outra para cada projeto. Cada

XXI. Com a participação intensa do cliente, estouramos um

tela, além de mostrar uma legenda, destaca os patrocinadores

pouco o prazo, porém chegamos a um resultado bem rico e

de cada projeto no ‘mouseOver’, conferindo maior credibilidade.

complexo e mais sintonizado com as necessidades do cliente,

As telas selecionadas passam para o primeiro plano e exibem

sem perder a elegância e a confiabilidade”.

www.rastamind.com Tecnologias utilizadas: Flash + PHP O bom relacionamento com o cliente foi um dos principais fatores para a conquista da conta. “Como estávamos redesenhando a identidade da marca na época, tivemos uma vantagem natural na concorrência pelo site. A Rastamind estava voltando ao mercado, após alguns anos de reestruturação. Uma marca de surfwear notadamente internacional, pois projeta no Brasil e produz na Indonésia, um dos paraísos do surfe”, destaca Dado Queiroz.

e clássico demais, faltando um pouco da atitude relacionada

Dessa forma, o conceito do site serviria para reforçar

ao esporte. Isto foi resolvido pela forma expressiva com que

o novo posicionamento da empresa, que buscava passar de

a tipografia foi trabalhada e como o conteúdo é apresentado.

uma marca de surfwear comum para uma produtora de moda

O menu é um destaque à parte, com seu funcionamento singu-

surfe. “Ou seja, duas coisas bastante distintas. Assim, o layout

lar, e a forma com que deixa registrado os passos do usuário

sugere a idéia de uma agenda de viajante, de mural de fotos.

através das manchas no papel. Em suma, o equilíbrio entre

As cores e a tipografia visavam reforçar o sentimento de aven-

sofisticação e atitude, elegância e juventude geraram um site

tura e viagem. No entanto, o visual foi se mostrando elegante

bastante satisfatório”.

portfólio freelancer - Tales de Angelo :: 19

e aspectos que se aproximam da realidade, pois a internet

Tales de Angelo Do impresso para o interativo: em busca de desafios Contato: tales@talesdeangelo.com Site: www.talesdeangelo.com

já é algo superficial, intocável, inodora e você tem um pouco mais de dificuldade de fazer as pessoas guardarem uma informação, principalmente se esta informação não se aproximar da realidade do público-alvo do site ou da peça publicitária”.

O dicionário Houaiss define a palavra estagnação como “falta de progresso, de movimento, de atividade”, aspectos que certamente não fazem fazer parte do vocabulário de um profissional de internet. A carreira de Tales de Angelo serve como um bom exemplo para quem procura desafios e acredita na evolução do conhecimento. “O interesse pelo design na web surgiu da minha busca em ser um profissional cada vez mais completo. Comecei na mídia impressa, em agências de propaganda, mas já percebia que, num futuro próximo, os diretores de arte deveriam se tornar multidisciplinares para que pudessem dar soluções cada vez mais integradas e coesas para seus clientes, ou

“Fiz um portal que pudesse abrir em 1600x1200. Quanto maior a resolução, cresce também a área de ambientação, dando a impressão que o site está te envolvendo”

seja, mais completas”.

Assim, para estimular seu processo de criação, Tales busca as suas fontes de inspiração longe dos computadores.

“Ando pelas ruas, vou ao cinema, parques e museus. Algumas vezes, prefiro descer do ônibus para voltar a pé para casa, com música no ouvido, tendo um momento só meu, com meus pensamentos, sentindo a vibração de tudo ao redor e olhando nos rostos das pessoas”.

A prática serviu também como uma valiosa lição em seu universo profissional. “A conclusão que cheguei após trabalhar no case da Unidas Rent-a-car é que design na web não se faz sozinho. Não adianta ter um layout bonito se ele www.talesdeangelo.com

E foi justamente a troca da mídia impressa pelo meio interativo um das primeiras provações na vida profissional de Tales. “Era preciso se desprender da limitação do papel e pensar que as coisas podem se mexer ou que podem levar a uma interação”, conta. Ou seja, a mudança seria refletida na própria identidade do trabalho que ele pretendia construir.“O estilo de uma peça publicitária ou de um site depende muito das suas referências, da sua inspiração naquele momento. Gosto de trabalhar com fotografias

não tem uma arquitetura da informação bem feita, ou uma funcionalidade bem planejada e clara, ou, ainda, uma tecnologia bem definida e testada”.

Além disso, ele recomenda prudência na busca por realizações. “Com ela, conhecemos os limites do próprio corpo.

Prudência, por sinal, foi algo que me faltou quando trabalhei por nove semanas seguidas em vários projetos, sem descansos, sem fins de semanas e, aos 22 anos, tive uma pequena arritmia cardíaca. Portanto, sempre aconselho: trabalhe para viver, mas não viva para trabalhar”.

Para participar desta seção, cadastre seu portfólio no site da revista: www.revistawebdesign.com.br.

20 :: entrevista - blog corporativo

Blogs corporativos

Onde encontrar uma ferramenta de comunicação que, ao mesmo tempo, seja ágil na divulgação de ações institucionais e que funcione como um canal no qual os clientes possam trocar idéias e apresentar suas visões sobre determinados produtos e serviços?

A resposta chama-se blog. Recentemente, a editora Novatec lançou o livro “Blog Corporativo” (www.blogcorporativo.net), escrito pelo consultor de estratégias Fábio Cipriani.

Nele, o autor apresenta o crescimento na adoção desta ferramenta e a revolução que ela vem causando na forma de relacionamento entre empresas e clientes.

Nesta entrevista, o especialista aponta as vantagens dos blogs em ambientes corporativos, além das oportunidades que este segmento pode gerar para os profissionais que trabalham com a criação e o desenvolvimento de sites. Boa leitura!

blog corporativo- entrevista :: 21

abrindo espaço para conversação e fidelização de clientes

Wd :: Segundo dados da ferramenta de busca por

Wd :: Falando ainda sobre essa massa de informações

blogs Technorati.com, cerca de 75 mil blogs são criados

geradas diariamente, como as empresas devem se

diariamente. Além disso, mais de um milhão de posts

comportar em relação a esse segmento de mercado? É

são publicados por dia, o que representa a atualização

possível extrair algum tipo de valor nesses locais?

de 50 mil blogs por hora. Como explicar a explosão de

Fábio :: O blog é uma fonte de conversações formidável.

popularidade dessa ferramenta de comunicação on-line?

O que nos leva a concluir que é muito provável que as

Fábio :: O uso de blogs cresceu porque utiliza um

pessoas vão falar dos seus produtos manufaturados ou dos

CMS (Content Management System) amigável e muito fácil

seus serviços profi ssionais. Bem ou mal, mas vão falar. Seus

de utilizar. Isso equivale a dizer que qualquer pessoa com

clientes vão conversar entre si, discutir, brigar, fazer as pazes

conhecimentos mínimos de internet consegue estabelecer

e descobrir que seu concorrente pode ser melhor.

sua página-blog virtual. O primeiro atrativo do blog, portanto, é a acessibilidade.

Mas o blog nos traz uma vantagem: todas essas conversas são transparentes e fáceis de se obter, as

Depois, com a popularização do seu uso por

informações estão simplesmente impressas nos blogs. Tudo

adolescentes (que são facilmente seduzidos por novidades),

o que uma empresa deve fazer é acompanhar e se posicionar

as empresas começaram a enxergar no blog um canal de

melhor a respeito daquilo que está acontecendo na massa

comunicação instantâneo e bidirecional com grandes

de blogs, também chamada “blogosfera”. Experimente fazer

potenciais. A rapidez na transmissão de mensagens e a

uma busca por uma marca conhecida no Opinmind (www.

alta interatividade assinalam o segundo atrativo para

opinmind.com). Ele traz duas colunas de resultados falando

o blog, principalmente porque todos nós (mesmo que

bem e mal do seu produto, marca, ou de qualquer palavra

inconscientemente) adoramos comunidades, conversar, e

usada como busca.

queremos tudo para ontem. Por fim, temos os casos de

Lógico que muita informação é inútil, mas é tanta

sucesso daqueles que usaram o blog como trampolim para

que praticamente é impossível não se tirar nada de pro-

o estrelato ou como portal de acesso para maiores lucros.

veito. Quando falamos de monitorar, não precisamos nos

Se a sua história no blog é fascinante, o boca-a-boca faz o

ater somente a produtos, podemos olhar comentários

resto muito rapidamente.

sobre a indústria, economia, negócios, cadeia de su-

22 :: entrevista - blog corporativo

“Tudo o que uma empresa deve fazer é acompanhar e se posicionar melhor a respeito daquilo que está acontecendo na massa de blogs”

primentos e assim por diante. Blogs também são escritos por especialistas em todo tipo de assunto.

Wd :: Apesar de tamanha popularidade, blog ainda não é uma ferramenta de comunicação muito explorada pelas empresas brasileiras. Por quê?

Fábio :: Na realidade, a ferramenta também é relativamente pouco explorada por grandes empresas americanas e européias, digo grandes empresas porque

O maior empecilho continua sendo

as empresas de porte médio ou pequeno já conquistaram

e será sempre a cultura da empresa em dar

um bom espaço na adoção pioneira dos blogs, isso devido

atenção a produtos e processos operacionais,

a sua agilidade burocrática e hierarquia horizontal. Dentre

deixando de lado, ou por último, o cliente. O foco no

as grandes empresas que adotaram, e graças ao perfil dos

cliente pode ser acelerado com um blog. É uma boa

clientes moldado pela cultura da internet, observamos

alternativa para se destacar dentre seus concorrentes.

que elas experimentaram mais casos de sucesso do que

Wd :: Na introdução do seu livro, você relata que

de insucesso com os blogs. A imprensa, sempre aberta a

“vivemos uma nova era em que o mercado e as pessoas

novidades, deu destaque e ajudou a reforçar mais ainda as

passaram a gostar de interagir, opinar, participar

vantagens do blog.

e ajudar; uma nova era de constante formação de

O movimento acabou de ser consolidado lá fora e se

opinião”. Qual a importância dos blogs dentro deste

encontra em franco crescimento. As empresas brasileiras

momento do mercado? Que tipo de modificações eles

possuem uma tendência de acompanhar os movimentos

trouxeram para o mercado?

no exterior antes de tomar uma posição, é um pouco

Fábio :: A internet encurtou distâncias e formou

conservadora para explorar novas possibilidades. Mas a

consumidores mais exigentes, com maior poder de

vez do Brasil está chegando. O CEO do HSBC Brasil, por

comparação e compartilhamento de opiniões. Esse novo tipo

exemplo, adotou um blog interno recentemente. Quem

de cliente encontrou na internet um meio de manter seus

sabe o próximo passo não seja abri-lo para o mercado? As

relacionamentos “na palma da mão”. O cliente encontrou

grandes empresas multinacionais presentes aqui, e que

a possibilidade de se comunicar facilmente. O blog é uma

“blogam” no exterior, deverão ser as próximas a estender

das opções de canais de comunicação que pode canalizar

o blog por aqui, como regra corporativa.

essa ânsia de interatividade desse “neocliente” e estabelecer

entrevista - blog corporativo :: 23

uma troca de informações entre as partes (empresa e cliente),

muito forte de se posicionar melhor em páginas de buscas

de forma mais transparente e humana. O blog humaniza a

como o Google, Yahoo e similares. Muito mais que páginas

empresa, dá uma cara a ela, aponta para alguém em quem

ou portais tradicionais.

confiar, conversar, trocar opiniões, reclamar ou elogiar.

Wd :: Convencida à importância de se inserir um

Wd :: No capítulo 2 do livro, você aponta uma

blog dentro dos planos de comunicação de uma empresa,

das principais capacidades dos blogs, através de

partimos para a etapa de seu desenvolvimento. O que é

um exemplo ocorrido no seu (Serendipidade.com): a

preciso saber, em termos técnicos, para criar um blog?

criação de oportunidades de negócios. Essa seria a

Quais são as ferramentas utilizadas para a sua criação?

principal razão para que os profissionais responsáveis

Fábio :: Dependendo da sua necessidade e da própria

pelo desenvolvimento de sites justifiquem a inclusão de

qualidade do blog, podemos encontrar soluções que vão

blogs dentro desses projetos?

desde um serviço de hospedagem gratuito, o qual é tão fácil

Fábio :: Por que os diálogos (quando existem) entre uma

de usar como um webmail do Google ou do Yahoo, ou usar

empresa e seus clientes devem ser “departamentalizado”?

as vantagens de utilizar um servidor próprio com liberdade

Ou formal? Quebrar este paradigma corporativo é

maior para funcionalidades, tráfego e espaço em disco.

importante e vejo isso como a principal vantagem do blog,

No primeiro caso precisamos simplesmente saber

seguido por melhoras nas vendas e fidelização de clientes.

usar a internet. O conteúdo e a qualidade dos textos

Portanto, podemos dizer que oportunidade de negócios

ficam por conta da familiaridade que o autor possui com

é uma das principais razões, mas não é a única. Podemos

os blogs já existentes e as etiquetas da “blogosfera”. O

obter ganhos em processos, redução de custos, motivação

serviço do Blogger (www.blogger.com) é o mais famoso

dos colaboradores, entre outros.

nesta categoria.

As justificativas para o seu uso em uma empresa são

Já para o segundo caso teríamos a necessidade de

exatamente os pontos-chave do livro, seja usando ele

conhecimentos técnicos mais complexos, uma vez que

voltado para o público interno ou externo. O que o seu

contaríamos com outros elementos como um servidor

chefe, diretor ou presidente quer ver são os resultados

web, banco de dados e registro de domínio. Para instalar

que a ferramenta pode proporcionar. Por isso, o primeiro

um blog existem diversos scripts (CMS) pagos ou não,

passo é obter estudos de casos com êxitos e isso está

que fazem quase todo o serviço de setup da aplicação.

abundante na internet.

Quase todos eles são baseados em PHP e MySQL, com o

Depois dos ganhos em negócio, temos os ganhos de

uso de formatação CSS para o design. O Wordpress (www.

aspectos mais técnicos. O blog é uma ferramenta fácil de

wordpress.org) é o mais popular script para blogar nos dias

usar e barata de se implementar e manter. Além disso,

de hoje. Um blog hospedado em servidores controlados

como consiste de posts atualizados freqüentemente, e uma

pela empresa possui mais funcionalidades disponíveis, mais

estrutura de código padronizada, existe uma tendência

possibilidades de design, controle de acessos e segurança.

24 :: entrevista - blog corporativo

Wd :: RSS, podcasts, espaço para comentários etc.

Quais elementos podem ajudar a rechear o conteúdo e o desenvolvimento de um blog?

Fábio :: O RSS, apesar de pouco conhecido, será muito utilizado futuramente, assim como usamos e-mails. Possuir um blog sem um feed RSS é praticamente impossível, todas as ferramentas de blogs já possuem esta funcionalidade agregada. É um item obrigatório.

Outro aspecto importante do blog, e que deve ser mantido no momento de criar o seu, é a disponibilidade por parte do blogueiro em manter conversas com seus leitores. O espaço para comentários, um formulário para envio de e-mails e qualquer ferramenta que permita a intervenção de um possível leitor são funcionalidades importantes. É muito recomendável também a criação de um

“O blog humaniza a empresa, dá uma cara a ela, aponta para alguém em quem confiar, conversar, trocar opiniões, reclamar ou elogiar”

diretório, um arquivo bem organizado dos posts, para que seja possível obter fácil acesso a discussões, idéias e artigos anteriores.

Wd :: Passando da parte técnica para a parte estética, é possível perceber que o uso de templates em diversos blogs torna um pouco uniforme a cara dessas páginas. Investir em design é apostar em um diferencial?

Fábio :: O blog é baseado em textos. Ter um com animações, cores fortes e figuras enormes não deixa a página agradável para leitura. Temos que ter em mente que o leitor do seu blog pode passar vários minutos olhando sua página e, portanto, um texto preto em fundo branco é sempre bem aceito. Pessoalmente, também não gosto de páginas carregadas com anúncios em toda parte. O blog não é uma vitrine de produtos, isso pode prejudicar o conjunto e desviar a atenção.

O tema do template é importante. Um blog corporativo deve carregar as características e as cores da empresa, ele é uma parte da estratégia de branding, com o objetivo de consolidar sua marca no mercado. O uso de templates prontos deve ser feito somente por pessoas leigas em design gráfico. No caso de uma empresa, um template pronto deve ser usado no máximo como ponto de partida e deve conter modificações que deixem seu blog com uma cara única. Mais do que dar uma cara bonita ao seu blog, é preciso preocupar-se primeiro com o conteúdo.

Tanto em qualidade, como em compatibilidade com o que o mercado espera: interatividade e conversações.

Wd :: Voltando para a etapa de convencimento, é importante definir prontamente os custos relativos à criação

entrevista - blog corporativo :: 25

e vendas, por meio de uma construção de fidelidade e bom relacionamento com clientes. É difícil relacionar as vendas com o blog e seus custos relacionados (gastos Exemplo de blog corporativo no Brasil A Microsoft Brasil é uma das primeiras empresas de grande porte no país a apostar na idéia de blog corporativo. Em julho, foi lançado o Porta 25 (http://porta25.technetbrasil.com.br), mantido pelo gerente de estratégias da empresa, Roberto Prado, e que visa a troca de informações com a comunidade open source no Brasil.

Fonte: S2 Comunicação (http://tinyurl.com/kt8mq)

com salários de blogueiros, hospedagem de sites, setup da aplicação, entre outros).

Medir os benefícios em relação a custos, ou mensurar benefícios contra riscos, pode mostrar um caminho interessante para uma empresa preocupada com clientes satisfeitos (o que seguramente se transforma em mais vendas). Quão interessante é ter seus clientes satisfeitos e falando bem da sua empresa para amigos, parentes ou em blogs pessoais na internet? Isso pode

de um blog. Que fatores influenciam na hora de definir

acontecer com um blog criado por uma empresa ou o

o valor de um blog?

simples monitoramento da “blogosfera”.

Fábio :: Vimos anteriormente que um blog controlado

O britânico Dan Entin escreve um blog chamado “Two

e hospedado internamente em uma empresa possui mais

Percent Nation” (http://danentin.typepad.com). Em julho

dinâmica e qualidade. O custo para este caso é maior,

de 2005, ele publicou um post reclamando que não achava

mas não foge muito da própria hospedagem e registro de

mais seu desodorante predileto para comprar. A Unilever

domínio. A maioria dos scripts de blogs é gratuita e com

estava de olho nos blogs. Ela viu o post do Dan e enviou

ótima qualidade. Os custos vão estar centrados em torno

um e-mail dizendo que o desodorante ainda estava à venda

de variáveis como espaço em disco, limite de tráfego,

e, adicionalmente, enviou também uma caixa repleta de

qualidade do suporte de hospedagem, qualidade do link,

desodorantes. Dan escreveu sua experiência em seu blog

entre outros. Mesmo assim, o valor do investimento técnico

e se tornou um defensor da marca. Se eu estou contando

inicial é baixo para qualquer empresa.

o caso aqui nesta entrevista, é porque o investimento

A maior demanda fica focada em dois recursos importantes: o recurso humano e o tempo necessário

em tempo para monitorar blogs foi bem aplicado. O investimento foi justificado.

para administrar os posts e controlar e responder

Apesar de as métricas (aparentemente) intangíveis

comentários e e-mails. À medida que o blog se torna

apresentadas algumas linhas atrás, existem indicadores

popular, fica mais difícil gerenciar o funcionamento

que são muito importantes para o desempenho de um blog.

do blog e uma empresa deve considerar contratar um

Eles podem estar centrados em tráfego, posicionamento

blogueiro exclusivamente para isso.

em ferramentas de busca, nível de interação de seus

Wd :: Um dos aspectos fundamentais na hora de

clientes (com o blog), repercussão da sua marca em outros

justificar o investimento em um ambiente digital envolve

blogs, comentários “positivos versus negativos” etc.

a medição e a avaliação de seu desempenho. Quais são

Lembre-se sempre de possuir indicadores qualitativos e

as métricas utilizadas para justificar o retorno sobre o

quantitativos em sua tabela de medição. Os executivos de

investimento em um blog?

qualquer empresa vão querer saber de resultados antes

Fábio :: É complicado medir um retorno sobre

mesmo de o blog nascer, encontre e estude outros casos

investimento nos moldes clássicos de receita sobre custos/

de sucesso antes de propor um blog a eles, e mostre fatos

gastos em blogs. Isso porque o blog promove um tipo de

convincentes e recheados de resultados.

resultado subjetivo: ele converte visitas em oportunidades

Radicado nos EUA, o carioca Nando Costa é criador do projeto Brasil Inspired (www.brasilinspired.com), no qual incentiva e divulga os trabalhos de design desenvolvidos no país.

Apostando na experimentação, seu trabalho é um bom exemplo de como tal conceito pode ajudar o design digital a se tornar mais criativo. Nesta entrevista, ele fala sobre influências, cores, tipografia etc., além de analisar os desafios existentes na caminhada do profissional que vai para o exterior.

Wd :: Em entrevista para a revista Zupi (http:// tinyurl.com/mzpot), você confidenciou que tem “...trabalhado tanto nos últimos anos que quase sinto que perdi um pouco da minha identidade”. Essa sensação já passou? Quais fatores constroem ou desconstroem a identidade e o estilo de um designer?

Nando :: Acho que esse efeito já passou. Devo ter dito isso quando tinha a minha empresa (chamada Nakd), no Rio de Janeiro. Naquela época, como atuava como diretor de criação, a minha função, além designer, era guiar o estúdio, os designers e animadores com quem eu trabalhava, e também interagir com os clientes, pagar as contas e até lidar com as burocracias.

No fim dos dois anos de minha experiência na Nakd, eu e minha esposa (Linn Olofsdotter - www.olofsdotter. com) estávamos esgotados e acho que isso nos afetou demais, nos deixou sem inspiração. Mas depois tudo passou e, hoje em dia, trabalhando como freelancer, me sinto muito mais confiante e feliz com o que faço.

Sobre sua segunda pergunta, não sei exatamente como responder, pois isso depende muito de uma pessoa para outra. Não há regra. No meu caso, o fato de o meu trabalho ter perdido força, eu imagino que deve ter sido causado por cansaço, exaustão mesmo. Atualmente, con-

entrevista - AndrĂŠ Matarazzo :: 27

28 :: na busca por talentos

A prática de investigar, no presente, o sucesso de futuros profissionais Reportagem sugerida pelo leitor Douglas César (doug_hang@yahoo.com.br)

No jargão do meio esportivo, “categorias de base”, “peneira”, “pratas da casa” e “olheiro” são termos ligados ao período em que um aspirante a atleta leva para se tornar um profissional e a fase em que um clube leva para encontrar e lapidar um futuro talento.

A realidade dos esportes não está muito distante do que acontece no mundo corporativo, principalmente quando falamos do período de estágio. Regulamentada pela Lei 6.494/77 (http://tinyurl.com/rom8o) e pelo Decreto 87.497/82 (http://tinyurl.com/mt6e2), a atividade é definida como “...aprendizagem social, profissional e cultural, proporcionadas ao estudante pela participação em situações reais da vida e trabalho de seu meio, sendo realizada na comunidade em geral ou junto a pessoas jurídicas de direito público ou privado, sob responsabilidade e coordenação da instituição de ensino”.

Dessa forma, qual será a realidade dos estágios na área de internet? Como as empresas deste segmento vêm procurando futuros profissionais (designers, programadores, redatores etc.) e de que forma os estudantes devem se preparar para procurar um estágio?

na busca por talentos :: 29

“O estágio é o início de tudo. o estudante coloca em prática e exercita a base teórica que aprende na faculdade,

uma fórmula e um modelo prontos, seja

além, é claro, de aprender muitas outras

para descobrir um talento ou conseguir uma

teorias que só o ambiente de trabalho

oportunidade inicial, vamos ser extrema-

revela. É no dia-a-dia de uma agência que

mente sinceros e recomendar que procure

percebemos o que vamos encontrar”, diz

outro material para folhear.

Marcio Paiva, diretor de criação da Euro

Agora, se quer encontrar casos reais de

RSCG 4D (www.eurorscg4d.com.br).

pessoas que iniciaram sua caminhada e hoje

As palavras de Marcio parecem se con-

conseguiram um espaço no mercado, e de

cretizar quando ouvimos o depoimento de

processos de seleção com bons resultados,

estudantes que hoje atuam em sua agência.

além das características necessárias para o

“Quando entrei na Euro, achei que fosse

acompanhamento e a formação de um profis-

aprender como trabalhar com internet. Mas,

sional, esperamos que esta reportagem possa

o que estou aprendendo vai além da divisão

atender às suas expectativas. Boa leitura.

on-line/off-line, vai até a criação de concei-

Por que fazer um estágio?

tos e a busca por uma forma diferente de

Ninguém melhor para responder tal

expressá-los, seja em um banner, um mate-

pergunta do que os profissionais que já pas-

rial de PDV ou um anúncio”, revela Daniela

saram pela experiência e atualmente servem

Mochida, estagiária em direção de arte.

de tutores de futuros talentos. “O estágio

“Além de todo o aprendizado profissional,

é o início de tudo. É o primeiro contato de

da função, aprendi muito a respeito do mer-

um estudante com a sua futura carreira. É

cado de trabalho. É o meu primeiro estágio,

ali que ele consegue ter uma noção prática

por isso cheguei aqui ‘meio cru’. E, com o

daquilo que vem aprendendo na faculdade,

tempo, me acostumei. Quanto ao lado fun-

aprende a ‘trabalhar’, a ter chefe, rotina,

cional, estagio em uma das agências mais

responsabilidades, prazos etc. Nessa fase,

criativas do mundo. Por isso, tento absorver

o estagiário é uma espécie de ‘café com

um pouco de cada um aqui dentro”, com-

leite’. Muitas das fundações necessárias para

pleta Vinícius Neves, estagiário de redação.

toda a vida profissional começam ali, antes

Além da importância para a carreira do

mesmo de virar funcionário. Não consigo

estudante, Léo Szterenzys, diretor de ope-

imaginar minha vida profissional sem que eu

rações da Addcomm (www.addcomm.com.

tivesse passado por alguns estágios”, afirma

br), ressalta que, como a internet é um mer-

Luciano Garcia, presidente da Spirit Comuni-

cado recente e em plena expansão, o está-

cação (www.spiritweb.com.br).

gio vai servir também para as empresas,

Ou seja, essa é a etapa da caminhada profissional onde é possível colocar em prá-

que podem preparar profissionais cada vez mais especializados.

tica os ensinamentos teóricos absorvidos

“Um profissional experiente tem cinco

na universidade. “É através do estágio que

a seis anos de mercado, o que faz com que muitos deles sejam autodidatas ou prove-

É o primeiro contato de um estudante com a sua futura carreira” Luciano Garcia (Spirit Comunicação)

Antes de continuarmos, é preciso fazer uma observação pertinente: se você espera

30 :: na busca por talentos

“É através do estágio que o estudante coloca em prática e exercita a base teórica que aprende na faculdade” Marcio Paiva (Euro RSCG 4D) nientes de outros setores do mercado de trabalho. A

e se poderia passar lá para conversar a respeito de uma

situação que existe no mercado é de poucos profissio-

oportunidade. E foi assim que tudo começou”, relata.

nais com base e experiência exclusiva em internet. O

Na Addcomm, a dedicação e o interesse de duas

estágio, então, passa a ser parte condicional para um

antigas estagiárias foram fundamentais para que elas

estudante entrar no mercado de trabalho. Neste sen-

pudessem mostrar a competência necessária para exer-

tido, a atividade é um investimento das duas partes: no

cerem suas atuais funções. “Sempre me entrego por

caso do estagiário, aprender uma nova profissão em um

inteiro às coisas que faço. Com o estágio, e depois com

ambiente totalmente antenado com novidades e tendên-

trabalho, não foi diferente. Busquei referências, batalhei

cias de futuro; e, para a empresa, investir na formação

por um espaço e corri muito atrás para conseguir passar

de um novo profissional totalmente familiarizado com

de estagiária de redação à redatora, de fato”, diz Clara

todo este nosso mundo digital”, analisa.

Baluz. “Desde os primeiros períodos da faculdade faço

Olheiros e olhares em tempos de internet Se no campo profissional a disputa anda acirrada, imagine conseguir um período de experiência em uma agência ou empresa ligada ao mercado web. Dessa forma, vamos pinçar, de histórias reais, os aspectos que ajudaram alguns profissionais a garantir uma primeira oportunidade na área.

No caso de Christian Nigmann, responsável pelo departamento de atualização da Mkt Virtual (www.mktvirtual.com.br), a chance surgiu através de sua rede de relacionamento. “Para explicar melhor e mostrar como é importante o networking, vou contar desde o começo como aconteceu. Conheci a Ludmilla (sócia-proprietária da agência) em um site de jogos (Fulano), em 1998, durante uma partida de damas. Enquanto jogávamos, podíamos conversar e descobrimos que ambos éramos de Santos. Trocamos ICQ e estávamos sempre conversando. Fui morar nos Estados Unidos (em 2002) e a Ludmilla sempre me enviava alguns sites para ver, que ela tinha acabado de colocar no ar. Eram sempre trabalhos de ponta. Em 2004,

estágio. Mesmo que não tenha sido diretamente nessa área em que atuo agora, de uma forma ou de outra, sempre conta como experiência e ajuda no dia-a-dia. Antes de vir fazer entrevista na Addcomm, entrei no site, li o institucional, me informei quem eram os clientes, sobre a política da empresa. Vim sabendo o que era”, argumenta Cristina Carnaval, profissional da área de atendimento na agência.

Além disso, não podemos nos esquecer da importância de se montar um portfólio (veja o box na página 34), que funcionará, na prática, como currículo. Os estagiários da Euro são a prova viva do valor de um portfólio. “Para montar o meu, procurei a orientação de professores e a opinião de profissionais do mercado para aprender mais e melhorar as peças”, conta Daniela. “No terceiro e quarto semestres da faculdade, participei das agências internas da ESPM (Agência ESPM e Promo). Foram meus primeiros contatos com a área. Depois, passei um semestre fazendo portfólio e estudando os anuários de criação. No começo do ano seguinte, comecei a procurar estágio e consegui”, acrescenta Vinícius.

já tinha voltado de viagem e estava cursando Marketing

Como andam os processos de seleção

em uma universidade aqui de Santos. Estava à procura de

Desenvolver um bom processo de seleção de estágio

estágio. Um dia, acabei encontrando a Ludmilla on-line

é um passo fundamental para quem deseja atrair talentos

também. Começamos a conversar e eu expus que estava

para a sua empresa. Assim, a recomendação é que esta

buscando uma oportunidade, para aprender o dia-a-dia de

etapa seja constituída por alguns fatores.

uma empresa no segmento. Ela me fez um convite pelo

“Procure elaborar o perfil da vaga de forma que

ICQ, perguntou se eu gostaria de ir conhecer a agência

atenda na identificação do candidato que venha a preen-

na busca por talentos :: 31

cher satisfatoriamente as vagas em aberto, analisar os cur-

web traz para os processos de seleção de estágio, saiba

rículos dos candidatos recrutados, realizar uma dinâmica

que até o Orkut vem sendo usado como ferramenta de

de grupo para identificação de habilidades e entrevista

avaliação. Quem usou e aprovou foi a agência baiana Idéia

individual de conhecimento teórico”, orienta Leyla Nasci-

3 Digital. “Procuramos pessoas que realmente estejam na

mento, diretora executiva do CIEE Rio.

internet, que se interessem pelos recursos que ela tem

Mas como isso funciona na prática? Na Addcomm,

a oferecer. Por isso, achamos que era um bom ambiente

por exemplo, a seleção envolve quatro etapas. “Inicial-

para encontrar esses tão procurados estagiários”, explica

mente, fazemos a comunicação da abertura de vaga para

Laert Yamazaki, diretor da agência (saiba mais, no box da

estágio, que pode ser através de indicação de pessoas

página 35).

ligadas ao mercado, divulgação de vagas em sites especializados, em nosso parceiro para estágios (que é o CIEE) e também em universidades que oferecem cursos voltados para o nosso mercado. Em seguida, partimos para a préseleção de currículos recebidos, com o intuito de selecionarmos até quatro perfis para a vaga. O terceiro passo é realizar entrevistas presenciais com o preenchimento de um formulário que traça o perfil do candidato. No final, fazemos uma análise comparativa das entrevistas e esco-

O que é valorizado e se adaptando a uma nova realidade Passar pelo funil que se tornaram os processos de seleção é uma grande vitória para o estudante. No entanto, essa é apenas a primeira etapa de uma longa caminhada. Assim, quais seriam as qualidades fundamentais para que um estagiário tenha chances de ser contratado definitivamente por uma empresa? Com a palavra, apresentamos quem soube aproveitar a oportunidade e hoje trilha um caminho próprio.

lhemos o estagiário”, revela Léo.

Além do método tradicional, as agências também têm utilizado a internet para procurar talentos. Talvez a explicação passe pelas inúmeras possibilidades proporcionadas pelo meio, que desafia a criatividade tanto dos estudantes, como também das empresas. A Spirit Comunicação é um bom exemplo desse cenário. Em outubro

“É muito importante acompanhar os trabalhos feitos e poder interagir sempre que for necessário em qualquer projeto” Christian Nigmann(Mkt Virtual)

do ano passado, na busca por estagiários de design para web, a agência lançou um quiz on-line para testar os conhecimentos dos candidatos.

“Em primeiro lugar, gostar do que faz e fazer com

“A idéia surgiu por um motivo muito simples. Quere-

prazer o seu trabalho. Mostrar para a empresa que

mos os melhores! Além daquele bate-papo de ‘o que você

você está naquela vaga para dar o seu melhor. Resu-

faz?’, ‘quais são seus hobbies?’, ‘o que você entende de

mindo, é preciso vestir a camisa! É muito importante

internet?’, quisemos testar conhecimento na prática. Inclu-

também acompanhar os trabalhos feitos e poder inte-

sive, isso nos economizou muito tempo, pois eliminamos

ragir sempre que for necessário em qualquer projeto”,

candidatos despreparados antes mesmo de recebê-los”,

cita Christian, da Mkt Virtual. “Acho que a pessoa tem

afirma Luciano Garcia.

que se doar muito ao trabalho que faz. Ah, criatividade,

Além da economia de tempo, o número de interes-

na nossa área, também não faz mal a ninguém, né? Mas

sados comprova a eficácia da ação. “Tivemos 180 candi-

perfeccionismo, persistência e muita garra são funda-

datos, dos quais 30 foram os melhores no quiz e partiram

mentais”, complementa Clara Baluz, redatora na agência

para a segunda parte do processo (a entrevista). Dos 30,

Addcomm.

quatro foram contratados. Os melhores ficaram”, atesta.

Para quem ainda tem dúvidas sobre a ajuda que a

A contratação veio e o estudante, agora profissional, conseguiu vencer mais uma etapa. O próximo desa-

“Quem está começando deve ouvir quem já teve mais tempo e nunca confundir habilidade num software com uma boa idéia” Marcio Paiva (Euro RSCG 4D)

32 :: na busca por talentos

fio envolve o período de transição, no qual ele deixa de contar com a supervisão direta de um profissional e passa a assumir uma série de responsabilidades.

Quando fiz estágio, eu lembro... “...que tive sorte por poder trabalhar com

A dica de quem vem convivendo com tal situa-

profissionais excelentes e com grandes projetos,

ção é: deixe a vergonha de lado e procure perguntar

o que me ajudou muito a entender como funciona

tudo aquilo que lhe causar qualquer dúvida. “Sento

a área.”

do lado do meu gerente (então para mim fica mais

Ana Quartin (Mestre em Artes & Design na PUC-Rio)

fácil) e tenho amigos muito competentes ao meu redor. Eu não me importo de perguntar, questionar, e tentar entender aquilo que eles dizem. Aos poucos, a gente vai pegando o ritmo. Às vezes, a gente acerta; em outras, erra. Mas não tem outra forma de acontecer, é assim”, diz. “Para falar a verdade, ainda estou me adaptando. Não é fácil. A cobrança e a responsabilidade são maiores. Ninguém nasce sabendo e isso me tranqüiliza muito. Sempre pergunto quando tenho dúvida. O resto é o tempo que vai me ensinar”, argumenta Cristina Carnaval, atendimento na Addcomm.

“...muito de uma frase de um diretor de criação: ‘A maioria das escolas são pagas. Aqui, você está aprendendo e não está pagando nada, então dê seu máximo’. Essa frase parece dura, mas é a grande realidade! Aqui na empresa já tivemos estagiários que tinham dedicação e responsabilidades de um profissional maduro e, com esse perfil, é claro que a contratação deles está garantida Como o mercado está cada vez mais concorrido, esse tem sido o perfil da maioria dos estudantes.”

Zeca Sento-Sé ( Nitro71)

Aprendendo com os erros Durante o período de apuração desta reportagem foi possível descobrir alguns dos erros mais comuns cometidos pelos estagiários. “Conceitos que já foram usados são os campeões. Normal, porque geralmente o estagiário não tem muito repertório formado, ainda não teve tempo e oportunidade de absorver muitas experiências. Por isso, quem está começando deve ouvir quem já teve mais tempo e nunca confundir habilidade num software com uma boa idéia”, orienta Marcio Paiva, da Euro RSCG 4D. A acomodação também é apontada como um obstáculo a ser vencido pelo estudante que pretende continuar sua carreira na empresa em que estagia. “O erro mais comum é quando o estagiário se limita apenas às suas tarefas e não tenta melhorar seu trabalho para chegar a um nível seguinte.

Quando isso acontece, ele tem dificuldade de sair de um nível de tarefas que já domina e acaba se acomodando, sem conseguir ampliar sua competência”, diz Laert, da Idéia 3 Digital.

Um deles acabou se tornando unânime entre

“Olha, se eu disser que nunca fui estagiário, alguém acreditaria? Comecei a trabalhar com web logo nos seus primeiros anos e estava terminando de estudar. Meu primeiro trabalho foi cortando layouts e passando para HTML. Não sabia nem fazer FTP na época, mas a Agency. com (então com oito funcionários) me contratou na hora, porque ninguém sabia programar nada de HTML. Mas, diria que eu me lembro dos bons estagiários que passaram pelas minhas equipes. É gente sempre muito disposta, bem humorada, prestativa. A sede de aprender, crescer, virar um baita profissional precisa ser óbvia e aparente. Os estagiários são contratados não pelo o que eles sabem (afinal, não devem saber nada), mas pelo o que eles prometem. O seu futuro chefe precisa olhar pra você e enxergar na hora que você tem futuro.”

Michel Lent (10’Minutos Interactive)

de atenção e de revisão nos trabalhos realizados.

“Algumas vezes, noto uma certa falta de percepção (inexperiência) da amplitude e abrangência da penetração do nosso trabalho na vida das pessoas.

A internet é acessível 24 horas por dia, sete dias por semana, portanto a demanda e a responsabilidade com o ambiente digital são muito grandes.

Erros acontecem e alguns podem ter conseqüências devastadoras: um preço errado em site de comércio eletrônico e uma informação incorreta em uma promoção on-line, por exemplo, podem gerar problemas muito sérios para a agência e seus clientes”, alerta Léo Szterenzys, da Addcomm.

Porém, é preciso salientar que, em determinadas situações, o equívoco também pode partir das empresas. “Isso acontece quando ela não permite que o estágio seja efetivamente um investimento da sua futura força profissional. Os estudantes são talentos a serem aprimorados e ela poderá usufruir deste investimento”, aconselha Leyla Nascimento, do CIEE Rio. Ambiente como ferramenta para estimular talentos Para que um estagiário possa desenvolver todo o seu potencial, e contribuir para o crescimento da empresa, os especialistas apontam alguns fatores que poderão ajudá-lo durante o seu período de experiência.

“A idéia é não considerar o estagiário como um colaborador menos capacitado e sim como um profissional que ainda não tem todos os conhecimentos de nosso mercado. Na Addcomm, os estagiários trabalham junto com colaboradores mais experientes, visando sempre esta integração com os processos e rotinas de nossa empresa”, relata Léo.

Ou seja, é preciso mostrar a importância e o papel deles dentro de um projeto. “Sempre procuramos incluir estagiários desde o começo da idéia, desde as primeiras reuniões. Assim, eles podem

melhorar seu trabalho para chegar a um nível seguinte” Laert Yamazaki (Idéia 3 Digital)

as agências: os estagiários ainda pecam pela falta

“O erro mais comum é quando o estagiário se limita apenas às suas tarefas e não tenta

na busca por talentos :: 33

desenvolver idéias e conceitos e não apenas executar textos e layouts. Junto com isso, repassamos responsabilidades e prazos para que eles sintam o job como tal e não apenas como um exercício”, afirma Marcio, da Euro RSCG 4D. Além disso, procure estimular o potencial de futuros talentos. “A maioria dos estagiários não é contratado por sua experiência, já que está começando uma carreira, e sim pelo seu potencial. Quando um diretor de criação ou atendimento escolhe um estagiário ele está acreditando em seu potencial. E, se a agência não estimula isso, ela está dando um tiro no pé, está sendo incoerente. Por isso, consideramos que muitos fatores são importantes, como local de trabalho, máquinas etc. Mas, o estímulo ao talento e a competência são os pontos mais importantes”, lembra Laert, da Idéia 3 Digital.

Pela vivência de Luciano, da Spirit Comunicação, não pode faltar também a figura do chefe com cacoete de tutor. “O segredo é treinar, ensinar, explicar, dar bronca, direcionar. Depois de passado o ‘susto’ inicial das primeiras semanas, a entrega começa a aparecer. Para a empresa, é muito bom poder formar profissionais. As pratas da casa são sempre muito valiosas”.

“Para a empresa, é muito bom poder formar profissionais.

34 :: na busca por talentos

As pratas da casa são sempre muito valiosas” Luciano Garcia (Spirit Comunicação)

Dicas para montar um portfólio inicial É estudante e está montando seu portfólio para conseguir uma oportunidade de estágio na área de

Vantagens de contratar um estagiário - Mão-de-obra, geralmente, muito motivada, sem vícios anteriores e moldável;

design na web? Então, fique de olho nas dicas espe-

- Capacidade de aprendizado rápido;

ciais preparadas por dois experientes profissionais:

- Inexistência de encargos sociais, reduzindo

“Faça um site fácil de navegar, sem grande

custos em comparação com assalariados (CLT). Con-

‘mirabolâncias’. Ele precisa ser lindo, mas muito sim-

tudo, não há impedimento de o estagiário se filiar à

ples e direto. Quando se está olhando um portfólio,

Previdência Social na condição de segurado faculta-

não há muito tempo para ‘descobrir’ coisas. Se você

tivo, como contribuinte individual;

ainda não tem muitos trabalhos desenvolvidos, pro-

- Dispensa das seguintes obrigações: contrato

cure dar informações sobre você de forma divertida.

de experiência; desconto de contribuição social e

Tudo vale... Quando a Isabelle de Vooght (hoje dire-

sindical; anotação no livro ou ficha de registro de

tora de arte da AlmapBBDO - http://www.de-vooght.

empregados; rescisão de contrato de trabalho; envio

com) veio fazer uma entrevista de estágio comigo na

do CAGED; pagamento de férias e de 13º salário;

DM9, ela mal sabia mexer no Photoshop. O que me

elaboração de folha de pagamento; exame médico

fez contratá-la foi o seu interesse pela fotografia. Man-

admissional, periódico e demissional; aviso prévio;

dei ela ir para casa estudar Photoshop e Fireworks (na

pagamento de qualquer adicional (insalubridade,

época, fazíamos banners em GIF animado) e voltar na

noturno etc.).

segunda para começar a trabalhar.”

Fonte: Hiper Serviços (www.hiperservicos.com.br)

Michel Lent Schwartzman, sócio-diretor da 10’Minutos Interactive (www.10minutos.com.br)

“Se você está montando um portfólio, não se

Desvantagens de contratar um estagiário - Mão-de-obra despreparada e inexperiente;

esqueça que quem tem que chamar a atenção são

- Em geral, possui formação cultural precária,

as peças que você criou. O portfólio em si deve ser

necessitando de treinamento intensivo e grande dose

simples e de fácil navegação, ou seja, nada de firulas

de paciência do superior imediato;

e coisas rodando. Foco nas peças. Um histórico do

- A jornada de trabalho deverá ser compatibili-

cliente e qual o objetivo que a peça precisava atingir

zada com o horário escolar, em especial em período

é interessante para mostrar qual a solução foi utili-

de provas.

zada. A posição das peças no portfólio também é

Fonte: Hiper Serviços (www.hiperservicos.com.br)

importante: separe as duas melhores que você criou e coloque uma no início e outra no final. Assim, você deixa uma boa impressão na chegada e na saída.”

Zeca Sento-Sé, diretor de criação da Nitro71 (www.nitro71.com.br)

Do Orkut ao Messenger: a morte do currículo em formato A4 Bate-papo: Laert Yamazaki, diretor da Idéia 3 Digital (www.ideia3digital.com.br)

Wd :: Por que vocês decidiram criar um processo de seleção de estágio usando o Orkut?

Laert :: A idéia de utilizar o Orkut, como ferramenta para seleção de estagiários, foi enterrar o formato de currículo em A4. Porque eles são quase todos iguais, com as mesmas informações que não mostram o perfil que os candidatos podem ter. Então, acreditamos que o Orkut pode mostrar um pouco mais desses candidatos.

Uma questão freqüente das pessoas que participaram da seleção - e das que não participaram também - foi o que a vida pessoal e as informações do Orkut têm a ver com as habilidades procuradas para uma vaga de estágio. Muitos reclamaram de possíveis “perfis fantasmas”, criados apenas para impressionar. Mas nós não fizemos uma seleção baseada em fotos de família, recados de amigos etc. Um ponto importante que procuramos analisar foi como cada candidato consegue criar um perfil de si mesmo no Orkut, quase uma nova identidade, com fotos, frases de efeito, comunidades estranhas e tudo mais que a gente pode ver.

Contando com a criatividade e a habilidade em utilizar os recursos da internet em favor desse perfil, os candidatos podem mostrar talento para um dos desafios que as marcas enfrentam atualmente: como trabalhar sua imagem nos meios que se transformam diariamente e contam com a participação de milhares de pessoas, todas participando ativamente?

Acho que o importante agora é enterrar de vez o formato A4 para os novos estagiários, que não têm ainda muito o que mostrar em currículos de papel. Afinal, ninguém começa com um grande histórico profissional. Quem sabe a nossa próxima seleção não acontece através do Messenger?

Wd :: Como vocês avaliam o resultado dessa ação?

Laert :: O resultado foi muito bom. Depois de selecionar algumas pessoas, fizemos entrevistas e até um evento no final para que todos os participantes da comunidade se conhecessem e trocassem contatos. Quem sabe daí não surgem mais grupos de trabalho, estudo etc. Ou, no mínimo, amigos.

A maioria se mostrou muito entusiasmada com a idéia da seleção e foram poucos os que questionaram o formato do processo. Mas é ótimo que eles tenham existido. Um dos objetivos da seleção era criticar também modelos de seleção jurássicos e discutir novas possibilidades e formatos mais adequados ao perfil que procuramos.

Wd :: Diante da experiência da Idéia 3 Digital com processos de seleção de estágio, qual o perfil de estagiário que as agências procuram atualmente?

Laert :: Uma das principais características, sem dúvida, é a capacidade de aprendizado de forma independente. Ou seja, o estagiário precisa ser um autodidata em diversos temas, para que desenvolva seu próprio caminho, estilo e perfi l. Se ele se limita a aprender apenas o que os profi ssionais mais experientes podem ensiná-lo, as chances de se tornar um profissional pouco criativo são muito grandes.

Por isso, o estagiário tem que estar empenhado em aprender com a equipe e por conta própria. Muitos ainda têm a ilusão de que podem aprender fórmulas prontas, mas isso não existe. Em uma agência, cada dia exige que você aprenda ou crie algo novo.

36 :: debate - o belo e o bom

O Belo e o Bom Dentre os diversos temas contidos no dicionário escolar de filosofia (http://tinyurl.com/osb99), Aires Almeida

aborda a questão da filosofia da arte. De Platão aos pensadores contemporâneos, a definição do “o que é belo?” passaria a ser compreendida pela noção de estética, instigando a busca pelos campos da subjetividade (ligado ao gosto e ao interesse pessoal) e da objetividade (ligado aos conceitos e às técnicas). Trazendo esta discussão para o design na web, você considera que a análise estética de um site envolve parâmetros objetivos ou subjetivos?

“Penso que os projetos de sites trazem questões semelhantes a tantos outros projetos desenvolvidos por designers. No projeto de um cartaz, de um livro, de um sistema de identidade visual, os designers sempre equacionam questões que podem ser esquematicamente separadas, para fins meramente didáticos, em dois pólos. De um lado estariam questões mais

:: Mauro Pinheiro

objetivas, funcionais, pragmáticas. De outro lado, questões mais subjetivas,

Professor Assistente do Departamento de Desenho Industrial da Universidade Federal do Espírito Santo

emocionais. Se olharmos em perspectiva histórica, veremos que no design

(UFES)

do período moderno houve uma tendência a valorizar os aspectos objeti-

www.feiramoderna.net/blog

vos, funcionais. Já nos anos 90, subverte-se essa lógica; os aspectos subjetivos eram elevados, muitas vezes em detrimento de questões funcionais prementes, como a legibilidade.

Cabe lembrar que nós designers desenvolvemos interfaces que permitem que pessoas utilizem ‘objetos’, com fins específicos. Esses ‘objetos’ podem ser websites, por exemplo. Antes de qualquer coisa deve-se definir a quem se destina e qual a finalidade do website desenvolvido. Não é lógico analisar com os mesmos critérios um site desenvolvido para uma empresa de games e o site de um banco de investimentos, pois partem de premissas diferentes, para públicos distintos e com funções de uso diversas. É preciso entender o contexto de uso para perceber quais aspectos devem ser levados em consideração na análise.

Embora existam ‘gurus’ de usabilidade pregando regras invioláveis, alguns sites pedem soluções distintas, eventualmente ‘violando’ tais regras. Por outro lado, os designers devem evitar a repetição de soluções que ‘estão na moda’, sem levar em conta o contexto de uso do site.

Percebe-se que a análise de um site envolve parâmetros objetivos e subjetivos, em escalas distintas de acordo com o contexto de uso do site em questão.”

“É preciso entender o contexto de uso para perceber quais aspectos devem ser levados em consideração na análise”

debate - o belo e o bom:: 37

no design para web “A análise, a leitura e o posicionamento estético das interfaces têm por referência parâmetros concretos, utilitários e, ao mesmo tempo, também se pauta por valores

:: Ronaldo Gazel

e metas subjetivas. Voltemos ao início de tudo. Se para

Artista plástico, designer e diretor de arte na BHTEC e:house www.bhtec.com.br

Platão, a arte representava ‘a sombra da sombra’ quanto à alegoria da caverna (‘A República’), ou seja, uma cópia do mundo sensível (que, por sua vez, já era uma ‘cópia’ do mundo ideal), que não representava a verdade, o bem ou a beleza, e poderia até ser prejudicial ao homem, para Aristóteles o mundo sensível era fundamental, já que, para ele, há uma tendência do homem em fazer mimese

“Cabe a nós reconhecer a reciprocidade da influência entre eles, fatores subjetivos e objetivos, e proporcionar a melhor relação possível entre eles”

(transformar, imitar, criar), recriando no sentido cognos-

interessante influência dos elementos objetivos, como

citivo a natureza, através da poiesis. Aristóteles também

conteúdo textual, semântica de ações pré-estabelecidas

dizia que, através da mimese, ocorre a catarse, um pro-

(como logins, preenchimento de formulários e ativações

cesso de ‘purificação da alma’ através do prazer estético,

diversas) e clichês publicitários (que fatalmente ocorrem,

do reconhecimento do que é representado pela mimese

como posicionamento estratégico do logotipo), em rela-

e da percepção dos reflexos causados por essa realidade

ção aos valores mais subjetivos, relacionados ao ‘estilo’

mimética em nossa própria vida.

das estruturas tipo-pictográficas que dão suporte gráfico

Assim como a obra de arte, a interface se apre-

à interface; às perspectivas de rotas/comportamento de

senta como um modelo de linguagem na qual a ‘poiesis’

navegação; aos timings de exibição, animação e feed-

- ação produtiva sobre a matéria - faz-se presente. Se na

back; aos perfis de percepção do usuário; enfim, cabe a

escultura, o mármore (causa material) se transforma em

nós reconhecer a reciprocidade da influência entre eles,

uma estátua (causa formal), podemos dizer o mesmo em

fatores subjetivos e objetivos, e proporcionar a melhor

relação ao pixel, que se transforma em interface (metafi-

relação possível entre eles. É o que fazem, aliás, os nos-

sicamente falando).

sos designers favoritos; é o que se vê nas melhores pro-

Dessa forma, cabe ao designer se sensibilizar pela

duções, nos nossos bookmarks.”

38 :: debate - o belo e o bom

“Entre a objetividade e a subjetividade, quando a questão é a análise da elaboração estética de um site, eu fico com as duas. Um bom profissional é aquele que reúne

:: Bruno Neves Design Gráfico & Web Design www.brunofree.com.br

técnicas e conceitos com suas experiências vividas e gostos pessoais que, por sua vez, agregam valor aos parâmetros subjetivos. Na hierarquia de classificação, a criação

“Se a objetividade é o corpo e a

estética de um site ocorre em três etapas:

subjetividade é a alma do site, um sem o

Etapa 1 - Criação do conceito: Devemos entender o projeto, seu objetivos, público-alvo, principal retorno,

outro não tem nexo, não tem função, não

principal concorrente e o mais importante, sentir a essên-

sobrevive, não encanta”

cia da marca ou produto. Assim, criamos o conceito que será seguido na comunicação com o público-alvo.

Etapa 2 - As técnicas: Baseado no conceito criado, partimos para a parte funcional. O site dever ter navegação fácil, didática e atraente. O seu design tem que buscar uma perfeita harmonia de cores, fontes e alinhamento. Já a linguagem de programação tem que estar simples e direta.

Etapa 3 - A subjetividade: Esta é a parte mais prazerosa e de mais responsabilidade. É neste momento que um profissional se destaca entre seu universo e demonstra sua linha de trabalho, colocando em prática seus gostos e experiências adquiridas que formam o estilo de cada um. Um site tem que passar emoção, tem que ter alma.

Ele pode ser picante, relaxante, extrovertido, triste, apaixonado ou reunir um pouco disso tudo. O site deve criar expectativas, surpreender e deixar o visitante sentindo-se dentro da empresa ou com vontade de comprar ou fazer uso de um produto ou serviço exposto.

Em resumo, acredito que subjetividade e objetividade devem andar juntos, de mãos dadas. Se a objetividade é o corpo e a subjetividade é a alma do site, um sem o outro não tem nexo, não tem função, não sobrevive, não encanta.”

debate - o belo e o bom :: 39

“Qualquer projeto de design na web oferece a possibilidade preencher parâmetros objetivos e subjetivos.

Marcelo Roncatti Sócio do Estúdio Colletivo www.colletivo.com.br

Isso varia na medida em que se tem conhecimento das propostas sugeridas. Um trabalho sempre envolve um objetivo, no campo da internet, que é inevitavelmente um

“Muitas vezes, o objetivo proposto do projeto não é alcançado porque a estética do site, mesmo bem projetada, não é ‘bela’, ou seja, não estabelece o ponto de fusão entra a

abrigo à interatividade, é praticamente impossível não levar em conta o gosto e interesse pessoal. Ao passo que antes de criar a estética de qualquer projeto, você deve pensar quais objetivos ela tem. Muitas vezes, o objetivo proposto do projeto não é alcançado porque a estética do site, mesmo bem projetada, não é ‘bela’, ou seja, não informa corretamente, não estabelece o ponto de fusão

comunicação interativa de emissor e receptor”

entra a comunicação interativa de emissor e receptor.

Na crença de que sua empresa precisa de um site, busca-se o designer para publicar basicamente, qual mensagem sua empresa vai projetar, sendo com um simples trabalho até uma complexa ação. O posicionamento inicial que acontece normalmente é escolher uma boa estética para que seduza os olhares, porém, engana-se quem apenas acredita nisso, esquece que a internet envolve outros sentidos que não o olhar, e ao ignorá-los, o designer desconecta-se do belo, apaga a possibilidade de projetar o inteligível, afastase do gosto pessoal, porque esquece de pensar no projeto como um ser humano, e pensa apenas arte. Ou seja, por mais técnica que o profissional tenha, por mais que o conceito seja correto, pensar a web significa levar em conta os gostos pessoais e interesses conjuntos e assim descobrir que sempre há do outro lado do computador, um outro interesse e gosto pessoal a observar.”

40 :: debate - o belo e o bom

Participação dos assinantes

pa gan r ticip e he prê e mio s!

Quais parâmetros definem a qualidade estética de um site?

João Vagner joao.vagner@gmail.com

A qualidade é obtida buscando o equilíbrio entre acessibilidade, usabilidade e conteúdo. Conseguindo manter esses

v

r! encedo

itens em ativa interação, é possível se obter um bom resultado com o site.

Eduardo Ferreira herreraweb@terra.com.br Originalidade, hierarquia (distribuição de elementos), boa aplicação de cores. A mensagem tem que ser clara e captar o interesse do público-alvo.

Alexander Rodrigues alexrodrigues43@yahoo.com.br

Equilíbrio das cores, adequação ao “tema” do site, conceitos estéticos coerentes com o objetivo traçado no planejamento.

Ou seja, adequação, equilíbrio e conceito.

Miriam Barreto miriambarper@yahoo.com.br

Considerando que a estética não é nada se não estiver solucionando algum problema, um site terá alta qualidade quando, além de se apresentar atrativo, seu impacto servir de porta de entrada para todo o seu conteúdo. O design de um site é sublime quando se funde com a solução que proporciona.

Lucilia Alencastro vermelhovivo@ig.com.br

Adequação ao público-alvo, uso de cores harmoniosas e imagens que proporcionem a transmissão das mensagens mais importantes ao usuário.

Se você é assinante, participe desta seção pelo site www.arteccom.com.br/webdesign/clube

O autor da melhor resposta ganha prêmios.

42 :: e-mais - check-list

: s a s e r p r u s o d n m Evita u r a t s e t para s t s i l k c e ch ar o a r i e d site antes

er q u e re ce b la n ce r d o e e fr l a n o s, ro fi ss io s q u e b ra d u de um p a g ê n ci a o á co m li n k a st e m u le e e d r gem id o p o d e se r p a ra a im a d e se n v o lv çã o lo n g e N a d a p io r to d ig it a l a co d if ic a i je u ro ss p o p m u u o que a d o a in d a o g ra fi a o á ri o o a v is n te d e te ct is e d e o rt e ca lm ti a ci m fa r ra d e u m u su g e ri a se çã o , e rro s s, q u e p o d tr a b a lh o . m vi su a li za rro si m p le d ic a çã o e e e d m e u d , im a g e n s se s ja ra e s. as ho w e b . O u se te r a s vá ri g ia d e te st s p a d rõ e s m e to d o lo co m p ro m e a e d m o u a ce it a p e lo p r , za to li co m ta l u ti n vo lv im e n ju n ta m e n te fu n d a m e n o d e d e se ir a o a r, é se in ic ia m s te n o p e rí o d le si E m s. u e e va li d a çõ q u e st õ e s a , a n te s d e ck -l is t d e r a lg u m a s a ch st e D e ss a fo rm li s rm o o m n me as l. P o d e ce ss o s e u c li e n te e tr e g a fi n a vá ri o s p ro g ó c io d o o a té a e n e ã n v e e d “ E x is te m o s o çã de b je ti v d e p ro d u id a s e st ã o nde aos o p ro ce ss o o si te a te d e se n v o lv s se e : d o in íc io d o a is d e li ív a n c io n re sc in d p li ca çã o to d a s a s fu e sã o im p to ); se a a u je se q ; ro , o p ro d o c ta d a l m ro je in ic ia q u a l fo i p itetura da o e sc o p o v a s p a ra o ade e arqu id a d e co m id il rm b fo sa n u e x p e c ta ti e co s nidos d fi ca d o (e m ecificaçõe ceitos defi m o e sp e ci o; se as esp do os con n çã a u g g a co rd o co se ve a l, n a rn e t ção na usuário fin M a d e In te s alguma a iva para o c o n ta s d a cnicos apó e té está intuit d s o te rr n e re resenta ir a , g e a rd o S il v e o, e não ap rm a L e o n informaçã fi a , s s” a d it a de interface ra m re sp e ltor sênior su n co té c n ic a s fo , is ões n Mora .c o m .b r) . s se q u e st de la Orde w w.m a d e o d e te st e itens, Luis d is to é S e rv ic e s (w ta m e d m a ânci ro je to . se g u ir u o a import in íc io d o p u e é d if íc il o q n a o lt g a Reforçand lo ss s t) , re o si d e ra d a a lo ri x a .n e st a r có d ig fo re m co n (w w w.w e b n g e m a te e si g n n ã o ri d st e re o d d e u su á ri o ú se te u n ta s ee -a lv o , co n e st a s p e rg ss ib il id a d b re p ú b li co co m o a ce sp o n d e r a , re e d m a b á si ca s so d se li s a n ci o n m p ro je to e n ci a is à fu q u e in ic ia e n to s e ss m le “ D e si g n e rs e o d n v a li d a ce ss o ” . a is n o p ro le s a ca b a m ta rd e d e m a p e n a s. E e a ic n câ a me e , d e fo rm u sa b il id a d

e-mais - check-list :: 43

“Temos um departamento exclusivo, onde acontecem os testes dos sites nos navegadores especificados no contrato, avaliação da usabilidade, correção de textos e verificação se o site está de acordo com o solicitado e planejado”Henrique Pereira (Webroom) Metodologia padrão ou adaptação conforme a prática?

Lembrando que cada projeto pode demandar

Os diversos métodos existentes são importantes e

uma variação nas metodologias utilizadas. “Temos o

devem ser estudados. No entanto, a prática parece ser

conhecimento das famosas heurísticas (check-list). Lemos

o melhor caminho para que cada profissional ou agência

e estudamos elas, mas como cada projeto é um novo

defina uma linha de testes antes de um site ir ao ar. “As

projeto (e tem suas particularidades), captamos os pontos

etapas que compõem o processo de validação, utilizado

essenciais e aplicamos em cada um deles. Aplicamos

h o j e p e l a M a d e , f o r a m s u rg i n d o a o l o n g o d o s a n o s ,

também conceitos próprios de usabilidade, acessibilidade,

acompanhando a evolução da empresa e sua maturidade”,

acabamento etc.”, apontam João Alison e Maiko Muller,

explica Leonardo Silveira (ver box na página 45).

profissionais do departamento de Planejamento e Controle

Assim, a Made conta hoje com uma metodologia bem

de Qualidade da A2C (www.a2c.com.br).

estruturada. “O processo de validação se inicia em ambiente

As ferramentas de testes disponíveis

local, espelho do ambiente de produção do cliente, só que

D e n t ro d e t o d a a g a m a d e v e r i f i c a ç õ e s a s e re m

dentro da agência. Depois, o sistema é migrado para um

utilizadas, algumas ferramentas podem ajudar os

ambiente final de testes (de homologação), onde serão

profissionais a agilizar os testes. A primeira delas são as

executados os testes finais da agência e do cliente. Por

extensões disponibilizadas para o navegador Firefox. “Há

fim, o site é instalado no ambiente de produção e liberado

uma, chamada HTML Validator (http://tinyurl.com/oz8l3),

para os usuários finais”.

que indica quando o HTML não é válido e mostra onde

N a We b ro o m ( w w w. w e b ro o m . c o m . b r ) é o

estão os problemas. Outra boa extensão é o LinkChecker

departamento de qualidade que cuida dessa parte. “Temos

(http://tinyurl.com/r89cm), que verifica se todos os links

um departamento exclusivo, onde acontecem os testes dos

das páginas estão apontando para um endereço existente.

sites nos navegadores especificados no contrato, avaliação

Não poderia deixar de citar também a WebDeveloper

da usabilidade, correção de textos e verificação se o site

(http://tinyurl.com/p336d), que contém uma coleção de

está de acordo com o solicitado e planejado. Por exemplo:

funcionalidades muito úteis”, revela Fabrício Marchezini,

verificamos se os formulários e se o reenvio de senha estão

designer de interface na mediadesign comunicação internet

funcionando, se o cadastro e os campos dos formulários

(www.mediadesign.com.br).

estão com máscaras e se são intuitivos, se os dados estão

Além das extensões, alguns sites podem contribuir

sendo gravados no banco de dados etc. No caso de e-

para a realização destas tarefas. “Para a validação de

commerce, se o cadastro dos produtos funcionam como

acessibilidade do código, utilizo o daSilva (www.dasilva.

deveriam etc. Em seguida, prepare-se um documento,

org.br) que, ainda hoje, é um dos melhores em nível de

detalhando os erros que precisam ser corrigidos, que é

interface que eu já vi e um dos que seguem os padrões do

enviado para cada um dos departamentos envolvidos para

W3C mais de perto. Recentemente, descobri o Scrutinizer

as devidas correções. Depois de tudo corrigido e após uma

(http://tinyurl.com/ha5dc) e o meu coração transbordou.

segunda conferência, o site é liberado”, revela Henrique

Finalmente um site com as melhores ferramentas de

Pereira, desenvolvedor web da agência.

validação do momento! Só falta eles fazerem uma barra

44 :: e-mais - check-list

“O desenvolvimento deve ser um ciclo constante, no qual o site vai amadurecendo a partir da demanda dos usuários, de necessidades de correção encontradas em testes e de mudanças no posicionamento estratégico”Fabrício Marchezini (mediadesign) de ferramentas para o Firefox com a funcionalidade do

erros e lacunas possíveis. Nenhuma ferramenta consegue

Scrutinizer embutida, para dar ao designer ainda mais

substituir o trabalho de um profissional capacitado para

liberdade e flexibilidade para testar o seu código à medida

isso”, cita Henrique Pereira, da Webroom.

que ele é produzido”, afirma Luis de la Orden Morais.

Fabrício argumenta ainda que, mesmo tomando todos

Apesar de toda a tecnologia disponível, existem

os cuidados citados ao longo desta reportagem, o ideal é

detalhes envolvendo a qualidade de um site (usabilidade,

que um site nunca seja considerado como finalizado. “O

acessibilidade, qualidade das imagens, conteúdo etc.)

desenvolvimento deve ser um ciclo constante, no qual o

que somente o olhar humano será capaz de analisar.

site vai amadurecendo a partir da demanda dos usuários,

“Para estes outros critérios, só a interação de uma pessoa

de necessidades de correção encontradas em testes e de

com o site, com o propósito de avaliá-lo, poderá revelar

mudanças no posicionamento estratégico”.

e-mais - check-list :: 45

Etapas fundamentais em uma metodologia de testes Algumas peculiaridades envolvem determinados projetos de sites e podem provocar mudanças nos métodos de testes. Porém, segundo o gerente de contas da Made, Leonardo Silveira, existem algumas etapas que são inerentes ao processo produtivo e podem ser replicadas a outros projetos:

No design - Testes de usabilidade: testes de navegação com usuário simulado a fim de detectar possíveis falhas no uso do sistema; - Testes de conformidade: o diretor de arte faz um acompanhamento dos layouts em desenvolvimento, analisando as suas características e conformidade com o escopo e objetivos do cliente para aquele projeto.

- Análise técnica de linguagem (HTML, CSS etc.): é avaliado se o código montado está em conformidade com o padrão utilizado pela agência, se as funcionalidades aplicadas estão de acordo com o esperado e se está respeitando as definições de layout.

Na tecnologia - Testes cruzados: criados grupos de desenvolvedores que interagem validando de forma cruzada o que foi produzido. Isso evita que o programador deixe passar erros por estar muito imerso e "viciado" no próprio código.

- Testes funcionais: executados por um analista de testes, que deve entender os objetivos da aplicação e, simulando o usuário final, navega no site e testa todas as funcionalidades.

- Análise técnica de linguagem: avaliação se o código programado está em conformidade com o padrão utilizado pela agência e/ou pelo cliente, quando o mesmo possui os próprios padrões de nomenclatura e desenvolvimento.

Também é avaliada a organização do código (endentação, comentários etc.), itens importantes para futuras manutenções e alterações no site.

- Testes de stress e estrutura: “Não adianta o site atender aos requisitos funcionais e ‘cair’ ao ser acessado por um número elevado de usuários simultâneos. Os testes de stress simulam o acesso simultâneo de ‘N’ usuários, mostrando como o site se comportará em momentos de ‘pico’ de acesso. Esses testes são muito comuns nos sites desenvolvidos para a TV Globo, como o site do programa ‘Mais Você’, da Ana Maria Braga, por exemplo, que após o término do programa, atinge um número elevadíssimo de acessos simultâneos na área de receitas divulgadas ao longo programa. Já os testes de estrutura são responsáveis pela verificação de links ‘quebrados’ e imagens que não carregam corretamente”, explica Bruno Pacheco, diretor da Made.

- Análise de documentação técnica: verificação se toda a documentação técnica atende aos requisitos especificados.

- Testes de Ambiente: etapa de análise se a estrutura de servidores e softwares de back-office possuem os requisitos necessários para rodar o site com a performance desejada (processamento dos servidores, banco de dados, webserver etc.)

Fonte: Made (www.made.com.br)

Você utiliza alguma metodologia para testar seus sites?

Total de votos: 87 Sim - 51% Não - 49% acesse e participe! www.arteccom.com.br/webdesign

46 :: estudo de caso - O Magnata

“O Magnata” na web: interfaces representando a cultura de rua

Em janeiro de 2007, o vocalista da banda Charlie Brown Jr. vai apresentar o resultado de um novo trabalho em um campo artístico que ele começa a explorar: o cinema. Estamos falando de “O Magnata”, filme que apresenta as agruras de uma estrela do rock nacional e no qual Chorão participa como autor do roteiro original.

Um dos pontos interessantes envolvendo este projeto está no fato de ele procurar extrair uma funcionalidade muito recorrente em ambientes digitais: ser um dos principais canais para atingir a interatividade com o público jovem.

“A idéia é explorar o veículo antes, durante e depois do lançamento do filme. É só ano que vem, mas o site está gerando muita curiosidade e alimentando de informações aqueles que estão na expectativa. Além disso, apresenta para o mercado uma prévia do que teremos, auxiliando os produtores na área ‘institucional’ dessa história. O bacana é que os usuários estão interagindo com o staff do filme, mandando sugestões, comentários e suas expectativas”, conta Ludmilla Rossi, sócia-proprietária da Mkt Virtual (www.mktvirtual.com.br).

A agência ficou responsável por criar toda a interatividade existente no endereço www. omagnata.com.br. Nesta entrevista, Ludmilla revela mais aspectos do trabalho, incluindo alguns importantes detalhes na construção da interface do site.

estudo de caso - O Magnata :: 47

“(Sobre os cenários do site) Tudo ali são recortes minuciosos de imagens que produzimos, compramos ou imagens free, somadas com desenhos, grafites, brushes...Uma salada de recursos mesmo!”

Wd :: Pela divulgação oficial, ficamos sabendo que o roteiro do filme é bem urbano, valorizando toda uma cultura de rua (skate, grafite etc.). Utilizar estes elementos dentro do site foi um caminho natural na hora de definir a interface do site?

Ludmilla :: Com certeza, essa é a expectativa do público. Como tivemos acesso as explicações do próprio Chorão sobre o roteiro e idéias de algumas cenas, ficou mais fácil desenvolver. Porém, é bacana lembrar que os www.omagnata.com.br

Wd :: A Mkt Virtual já possuía um relacionamento com o Chorão, vocalista do Charlie Brown Jr., devido a o b o m t r a b a l h o re a l i z a d o n o s i t e d a b a n d a . E s s a proximidade facilitou a conquista desta conta?

Ludmilla :: Com certeza facilitou, mas neste caso fomos contratados diretamente pelos produtores do filme.

Como a idéia e roteiro original são do Chorão, ele nos indicou para o site do longa-metragem, já que estávamos bem conectados e conscientes da linha que ele queria seguir. Antes mesmo do projeto do filme ser lançado, ele estava comentando sobre este lance com bastante empolgação e sempre falava do site.

Wd :: Quais foram os principais desafios na hora de implementar tal projeto?

Ludmilla :: Acho que o maior desafio foi desenvolver a parte visual do que ainda não estava definido, além de ter que surpreender nosso público-alvo, que é muito exigente e crítico.

O desafio secundário foi o estigma que tínhamos em cima do site do Charlie Brown. Não podia ser esteticamente parecido, mas a temática, apesar de ser diferente, possui algumas intersecções.

layouts foram desenvolvidos antes de a equipe iniciar as filmagens, ou seja, tínhamos idéias nas explicações verbais e por escrito, mas nada visual.

A gente teve realmente que tentar pinçar os conceitos a partir de tudo que foi conversado, mas acabou sendo um caso bastante interessante, pois fizemos o site de um filme, antes mesmo de ele ser iniciado e há uma grande relação entre site e filme: atitude, grafite e a cultura da rua.

Wd :: Em termos de navegação, vocês privilegiaram o deslocamento horizontal, sendo que ícones de setas ajudam a orientar o usuário durante sua experiência no site. A escolha deste tipo de navegação foi influenciada pela própria interface?

Ludmilla :: A idéia foi separar os cenários em blocos para eles ficarem modulares, carregando mais rápido e dando contexto para a transição que imita uma película.

Wd :: Além da opção de navegação horizontal, o site disponibiliza um menu na parte inferior. Quais fatores determinaram que a página fosse dividida desta forma?

Ludmilla :: Este é o conteúdo relevante que temos no momento. Estamos preparando novos recursos e conteúdo para o site, especialmente depois que o filme estiver em vias de ser finalizado. Temos uma navegação mais objetiva pelo menu inferior e outra mais lúdica e divertida pelo cenário.

48 :: estudo de caso - O Magnata

Wd :: Falando ainda sobre as seções do site, é p o s s í v e l p e rc e b e r q u e c a d a u m a d e l a s p o s s u i u m cenário diferente, com alguns elementos 3D e muitas imagens urbanas. Que tipo de recursos vocês utilizaram para modelar os cenários de cada seção do site?

Ludmilla :: Tudo ali são recortes minuciosos de imagens que produzimos, compramos ou imagens free, somadas com desenhos, grafites, brushes...Uma salada de recursos mesmo! Às vezes, temos a impressão de 3D pelas perspectivas

www.omagnata.com.br

ou pelos gradientes aplicados “na raça” em cima das

próprio staff do filme atualize fotos, textos e vídeos no

fotos. A única coisa realmente em 3D ali é a parte do

blog. O carregamento também é modular, cada área

cinema. O principal recurso? Uma noção bacana de luz e

carrega isoladamente, trazendo ainda mais velocidade.

sombra e nosso inseparável editor de imagens.

Wd :: Em termos visuais, vocês utilizaram uma

Wd :: O grafismo do menu na parte inferior do site

tipografia com influências de stencil, carimbo e grafite.

segue um estilo puxado para o barroco e parece ter

Em relação às cores, o site envolve uma combinação

sido feito em gravura em metal. De que forma vocês

cromática de preto, amarelo e vermelho. Quais foram

chegaram a esse grafismo?

os aspectos determinantes para que vocês chegassem

Ludmilla :: É legal responder a essa pergunta, até

a tais definições?

porque eu mesma fiz esse layout. Aquele grafismo é uma

Ludmilla :: Foi o conhecimento prévio que já tínhamos

colagem com um recorte minucioso de um dinheiro russo.

do cliente, além de desmembrar keywords (palavras-chave)

O grafismo foi sobreposto várias vezes, além de ter

do roteiro e elementos da estética do “rock’n roll old

um tratamento de cor até chegar naquele acabamento.

school”. Acho que a inspiração das cores também veio do

Tem tudo a ver com o nome do filme: dinheiro, poder,

próprio ambiente em que “O Magnata” vive.

luxo. Contrasta um pouco com os layouts mais urbanos, cheios de grafite.

Wd :: Assim como no site da banda Charlie Brown Jr., a infra-estrutura tecnológica do site do filme foi baseada

Wd :: O cuidado na forma como o site vai ser visualizado em diferentes resoluções de tela é uma preocupação que não deve faltar no desenvolvimento de um site. Como essa questão foi trabalhada neste projeto?

em Flash e PHP. Apesar dos vários elementos existentes,

Ludmilla :: O site é bem visto em 800, mas otimizado

a página é carregada de maneira rápida. Esse foi um dos

para 1024, que é o que predomina dentro do universo do

principais fatores para apostar nestas tecnologias?

nosso público. E, em resoluções superiores, ele se “molda”

Ludmilla :: Sim. Além do tempo de carregamento,

para ocupar toda a largura da tela (Santo Actionscript!).

o site foi feito em um prazo curto. Visamos otimizar o carregamento e tempo de desenvolvimento. Até mesmo dentro do Flash temos as áreas dinâmicas: blog, mural, cadastro que usam Flash e XML. A parte administrativa permite gerenciar os usuários, aprovar os posts feitos no mural e, além disso, que o

Actionscript Linguagem de programação baseada em ECMAScript, usada para controlar filmes e aplicações do Flash.

Fonte: Wikipédia (http://tinyurl.com/psxe6)

X

estudo de caso - O Magnata :: 49

“Os layouts foram desenvolvidos antes de a equipe iniciar as filmagens, ou seja, tínhamos idéias nas explicações verbais e por escrito, mas nada visual” Wd :: Além da estética, quais são os outros atrativos para que um usuário retorne ao site do filme?

Ludmilla :: Conteúdo, feedback e interatividade. É o que estamos tentando trazer para o site, especialmente nesta etapa. O conteúdo está sendo atualizado toda semana, especialmente nas semanas de fi lmagem. O feedback está sendo dado aos usuários, desde para quem quer fazer figuração, até quem quer saber mais, como a imprensa. Já a interatividade aparece quando o visitante pode deixar uma mensagem no site, receber informações etc.

Wd :: Que tipo de retorno os produtores do filme esperam que o site possa trazer? E para a agência?

Ludmilla :: Para os produtores, o que está sendo bacana nesta etapa, é sentir e ouvir a voz do público, a ansiedade deles para ver o filme no cinema. Alguns comentam sobre a estréia, outros sobre o site... Tudo isso gera barulho e conseqüentemente retorno para os produtores, co-produtores, patrocinadores e apoiadores.

Basicamente, é a mídia-foco deste momento.

Para a Mkt Virtual, sem dúvida, é um projeto âncora, daqueles deliciosos de se fazer do início ao fim, que provoca bastante exposição e mais negócios em médio prazo. É o nosso primeiro projeto para o segmento de

50 :: estudo de caso - O Magnata

“(Sobre a importância de assinar um trabalho) é como a etiqueta de uma camiseta ou a assinatura de um quadro" cinema, o que conta bastante também. Enfim, o retorno

neste especial, relata que atualmente o grafite é um dos

virá de inúmeros pontos, seja através de um elogio de um

principais movimentos que influencia o design para web.

internauta ou um novo contato pela mídia espontânea

Diante dos projetos já realizados pela agência, vocês

gerada pelo site.

apontariam alguma vertente marcante na área?

Wd :: Boa parte dos projetos web produzidos pela

Ludmilla :: Essa é a mais pura verdade. Nós adoramos

Mkt Virtual possuem uma pequena assinatura, com o

grafite, é um gosto pessoal mesmo. Grafite, skate, surf e

link para o site da agência. Quem desenvolve um site

música são algumas das fontes de inspiração da equipe.

deve assiná-lo obrigatoriamente? Ou essa questão vai

Acho que, no tema grafite, nossos projetos diretamente

depender sempre do aval do cliente?

ligados são: Charlie Brown (http://charliebrownjr.uol.com.

Ludmilla :: Depende do aval do cliente sim. Não é

br), O Magnata (www.omagnata.com.br), Kokee (www.

uma imposição. Geralmente, avisamos antes mesmo de

kokeesurf.com.br), Natural Art (www.naturalart.com.br) e

fechar o negócio, afinal, o portfólio da empresa é nosso

Antiqueda (www.antiqueda.com.br).

maior patrimônio. É como a etiqueta de uma camiseta ou a assinatura de um quadro.

Além disso, a nossa admiração pelo grafite e seus artistas é tanta que, neste ano, decidimos apoiar um grupo

Se o cliente não quiser, sem problemas, pois o site é

de artistas aqui de Santos. Estamos fazendo o site para eles

dele. Mas, em quase todos os casos, o cliente não se opõe,

como apoio mesmo, na parceira, por acreditar na arte deles.

pelo contrário. Aqueles clientes que ficam muito satisfeitos

Os caras são talentosíssimos e sabem que a web é a

tem prazer em divulgar o nome do fornecedor que fez um

forma mais eficaz de divulgar o trabalho deles. Topamos

projeto de sucesso para ele.

abraçar a idéia. E acho que não é só a construção do grafite

Wd :: Nos últimos três meses, a Revista Webdesign

que determina essa tendência e tudo que ronda este

publicou a Coleção Brasil Design, no qual apontou como

universo: as texturas, as cores, o inusitado e as intervenções

os designers brasileiros vêm conquistando o mercado

onde menos se espera é que trazem ainda mais inspiração

inter nacional. Nando Costa, um dos entrevistados

para quem fica o dia todo no escritório criando.

52 :: Tecnologia na web

Tecnologia na web Resolução, gradiente, brilho etc.: os fundamentos no tratamento de imagens para web A disposição dos elementos já foi previamente definida

otimização de imagens, entender muito de cores, saber in-

durante a etapa de arquitetura da informação e usabilidade do

terpretar quando uma imagem está muito saturada, quando

site. A elaboração do conteúdo seguiu os preceitos definidos

precisa, por exemplo, de um pouco mais de azul e noções de

pelas regras de webwriting. Na parte do design, a combinação

iluminação”, enumera Aline Dias, designer da Globo.com.

cromática e a tipografia foram aprovadas pelo cliente.

Ela ressalta ainda outro aspecto importante: a diferença

Assim, para que o desenvolvimento técnico possa entrar

nos formatos de arquivos a serem trabalhados. “Geralmente,

na etapa fi nal de produção, falta tratar as imagens que vão

para fotografias, utilizo o JPG, que tem um nível de com-

ilustrar a interface digital. Este processo, por mais básico que

pressão altíssimo. Quando se trata de desenhos com cores

possa parecer, exige uma boa bagagem profi ssional para a

chapadas ou que se deseje transparência, o GIF dá conta

definição da identidade visual que se quer transmitir.

do recado. Ele é o formato padrão adotado pela web para

O primeiro passo para dominar o assunto é entender as

imagens simples, embora alguns browsers já aceitem utiliza-

diferenças que envolvem o tratamento de imagens para im-

ção de imagens em PNG. Apesar de ainda não estar muito

pressão e para a veiculação em ambientes digitais. “Para web,

difundido na web, o PNG é uma boa opção quando se trata

as exigências em termos de tratamento de foto e resolução

de imagens transparentes que fazem uso de sombras e afins.

são mais baixas se comparadas à impressão. E as cores em

Além disso, comprime a imagem sem perda de qualidade, ao

tela diferenciam muito das cores em impressão. Na internet,

contrário do que acontece com arquivos JPG”.

o que vemos na tela é o que vai ser visto. Em impressão, não

Outra dica é evitar os excessos. “É preciso ter alguns

acontece o mesmo. Tem a diferença do papel, da calibragem

cuidados, como saber os padrões e as limitações da tecno-

do monitor e das cores na gráfi ca. Claro que a calibragem

logia para construção das interfaces, as diversidades de pla-

afeta na web também, mas a diferença é bem mais sutil que

taformas (PC e Mac), a forma de utilização de tais interfaces

no impresso”, explica Celina Uemura, designer sênior em uma

e como se comportam. Ou seja, como o usuário final irá ‘ler’

agência de publicidade em Nagoya (Japão).

essas imagens, como cada plataforma recebe as cores corre-

Fique atento para adequar o seu trabalho as regras que

tas que você tinha planejado”, afirma Anderson.

permeiam a natureza da luz e a percepção das cores. “Na web,

Dessa forma, a chave para alcançar tais fatores pode ser

utiliza-se o RGB: Red (vermelho), Green (verde) e Blue (azul).

obtida com o trabalho em equipe. “Procure saber em como

Ele é um sistema cartesiano (X, Y e Z). Cada cor é definida

integrar a imagem com o site HTML posteriormente. O pro-

através de um código hexadecimal. Por exemplo: a cor branca

fissional não precisa conhecer HTML, pois um programador

seria, em código hexadecimal, assim: #FFFFFF”, ensina Ander-

irá realizar este trabalho. Porém, é fundamental que a dia-

son Oliveira, diretor web/multimídia da Zero3 Design.

gramação das imagens seja o quanto mais fácil possível para

Botando a mão na massa: atenção aos detalhes!

ser codifi cada. Isto não quer dizer que o design precise ser

Para que o profi ssional possa atingir sua plenitude no

simples, ou quadrado. Mas sim que as áreas de textos do site

tratamento de imagens para web, é preciso dominar alguns

estejam bem defi nidas para que os programadores possam

conceitos técnicos da área do design. “Uma boa noção de

acessá-las, via código, de forma descomplicada. Na dúvida,

Tecnologia na web :: 53

nível básico

recomenda-se debater este processo com o programador”,

em tamanho original, faço ajustes de níveis, contrastes, co-

orienta André Milani, analista de informática na SANEPAR

res, vejo se a imagem precisa de algum tratamento especial,

(Companhia de Saneamento do Paraná).

como, por exemplo, sharpen e, no fi nal do processo, redimensiono. Quando tenho as imagens em alta resolução, as

PNG (Portable Network Graphics)

X

redimensiono primeiro, pois isso ajuda a sumir com pequenas falhas. Independente do tamanho físico da imagem, seja ela

Formato livre de dados utilizado para imagens, que surgiu em 1996 como substituto para o formato GIF, devido ao fato de este último incluir algoritmos patenteados. Não tem limitação

uma foto ou um botão, o ideal é sempre se preocupar com o peso. Para finalizar e ajudar nesse processo, salvo o arqui-

da profundidade de cores e permite comprimir as imagens

vo, sempre utilizando o otimizador de imagens para web do

sem perda de qualidade, ao contrário do que acontece com

Photoshop”, revela.

outros formatos, como o JPG. Fonte: Wikipédia (http://tinyurl.com/qggql)

Ferramentas básicas mais comuns para manipulação de imagens Como exemplo prático, André cita a padronização de áreas que possuam imagens repetidas, ou que possuam grandes espaços de cor única. “Nestes casos, o programador poderá substituir a imagem que contém apenas um retângulo

- Photoshop: “O mais conhecido e popular. Trabalha com imagens de mapas de pixels (não-vetorial) e com palhetas de cores podem ser voltadas para a web.”

- Fireworks: “Possui características muito similares ao Photoshop,

branco, por código HTML que gere o mesmo efeito (apenas

porém conta com uma forte integração aos produtos da antiga

se o código atingir 100% de resultados), reduzindo razoa-

Macromedia / atual Adobe (Dreamweaver e Flash).”

velmente o tamanho final do site. Utilizar formatos padrões (.GIF e .JPG), além de palhetas de cores voltadas para a web,

- GIMP: “Alternativa livre de custo (software livre). Possui os mesmos recursos das ferramentas acima, além de um conjunto de possibilidades de processamento de imagens ainda maior

podem novamente tornar o tamanho fi nal do arquivo ainda

que seus concorrentes pagos. Contudo, é um pouco menos

mais viável para ser trafegado”.

prático de utilizar.”

As etapas para o tratamento de imagens

Fonte: André Milani

Mais do que aprender um modelo pronto na etapa de tratamento de imagens, os especialistas apontam que a prática diária vai criando no profissional uma técnica própria para se obter bons resultados.

Para Anderson, esse processo se inicia através da escolha

“Fast-food” para manipulação de imagens na web Se você não possui um software de imagens instalado no

de uma boa foto. “Essa análise vai ser definida por fatores

computador, ou está longe do seu e precisa fazer uma

como boa nitidez, cores, contrastes e brilho. Depois, converto

e d i ç ã o b á s i c a c o m u rg ê n c i a , d u a s f e r r a m e n t a s o n - l i n e

para RGB, o padrão da web. A partir daí, faço os ajustes necessários das cores por canais (R, G e B). Trabalho ainda o ajuste da nitidez, dando mais brilho e contraste, se necessário”.

Já no caso de Aline, o método vai variar em relação às características que a imagem selecionada apresentar. “Trato

poderão te ajudar: PXN8 (http://pxn8.com) e Snipshot (antigo Pixoh - http://snipshot.com). Elas possuem todas as funções básicas para o tratamento de uma imagem para web: cortar, rotacionar, redimensionar, edição de níveis de cores, brilho, saturação etc.

54 :: tutorial

Caminhando pelo HTML - Parte 3 Elcio Ferreira Desenvolvedor e instrutor na Visie Padrões Web http://visie.com.br/

Você já teve problemas com acentuação em uma página web? Muita gente, ao começar a trabalhar com HTML, encontra dificuldades ao trabalhar com caracteres acentuados. Há, por outro lado, muitos profissionais experientes que aprenderam uma maneira de se lidar com acentos que parece funcionar bem, e não entenderam realmente como as coisas funcionam. Isso pode ser um problema se você tiver que fazer, por exemplo, um site em um idioma oriental ou um sistema que suporte múltiplos idiomas.

O básico: tabelas de código de caracter É preciso que nos lembremos agora que essas máquinas monstruosas que chamamos de computadores, trabalham com um código interno muito simples de zeros e uns.

Como você sabe, esses dígitos, zeros e uns, chamam-se bits, e foram arbitrariamente agrupados de oito em oito.

Cada grupo de oito se chama byte e representa um número entre 0 e 255. E é só isso que temos. Tudo num computador é feito desses números. Um “formato” de imagem, como BMP, GIF ou JPG, é uma maneira de se codificar as informações de cor de cada bit de uma imagem em uma seqüência de números.

A mesma coisa com “formatos” de áudio, documen-

00-(NUL) 01-(SOH) 02-(STX) 03-(ETX) 04-(EOT) 05-(ENQ) 06-(ACK) 07-(BEL) 08-(BS) 09-(HT) 10-(LF) 11-(VT) 12-(FF) 13-(CR) 14-(SO) 15-(SI) 16-(DLE) 17-(D1) 18-(D2) 19-(D3) 20-(D4) 21-(NAK) 22-(SYN) 23-(ETB) 24-(CAN) 25-(EM) 26-(SUB) 27-(ESC) 28-(FS) 29-(GS) 30-(RS) 31-(US)

32-(Espaço) 33-!

34-” 35-# 36-$ 37-% 38-& 39-’ 40-( 41-) 42-* 43-+ 44-, 45-46-.

47-/ 48-0 49-1 50-2 51-3 52-4 53-5 54-6 55-7 56-8 57-9 58-: 59-; 60-< 61-= 62-> 63-?

64-@

65-A 66-B 67-C 68-D 69-E 70-F 71-G 72-H 73-I 74-J 75-K 76-L 77-M 78-N 79-O 80-P 81-Q 82-R 83-S 84-T 85-U 86-V 87-W 88-X 89-Y 90-Z 91-[ 92-\ 93-] 94-^ 95-_ 96-` 97-a

98-b 99-c 100-d 101-e 102-f 103-g 104-h 105-i 106-j 107-k 108-l 109-m 110-n 111-o 112-p 113-q 114-r 115-s 116-t 117-u 118-v 119-w 120-x 121-y 122-z 123-{ 124-| 125-} 126-~ 127-(delete)

tos, gráficos e tudo mais. O texto também tem “formatos” diferentes, maneiras de se converter o que você digita em números. Esses formatos são chamados de tabelas de caracteres, conjuntos de caracteres ou “charsets”.

O computador pessoal se desenvolveu na mão de nossos amigos norte-americanos, que não precisam de acentos.

Assim, a primeira tabela de caracteres adotada em larga escala, a ASCII (sigla para Código Padrão Americano para Intercâmbio de Informações), não continha acentos. Além disso, era um código de 7 bits, e não 8. Ou seja, ao invés de 256 posições, a tabela ASCII tinha apenas 128 posições.

Confira ao lado uma cópia da tabela ASCII original para você ver como é (não se preocupe, você não precisa decorá-la).

Com a popularização do computador, a necessidade

de se usar acentos e caracteres de outros idiomas fez surgir uma infinidade de outras tabelas de caracteres. Felizmente, a esmagadora maioria delas segue a tabela ASCII nas primeiras 128 posições, ou seja, um texto em ASCII, escrito em inglês (ou em “portugues sem acentuacao”) será lido em qualquer computador ao redor do mundo. Mas, ao usar acentos, é necessário que o texto salvo numa tabela específica seja lido usando aquela mesma tabela.

Começam nossos problemas Veja como fica, por exemplo, o caracter “á” salvo na tabela UTF-8, quando lido em tabelas muito populares para o hebraico, o grego, o árabe, o japonês e o português, por exemplo:

tutorial :: 55

japonês ou hebraico? Quem sabe um brasileiro morando no Japão ou você mesmo visitando Israel nas férias.

Indicando o charset O primeiro passo é saber em que charset está salvo seu HTML. A maioria dos editores, de código possui maneiras de se configurar em que charset salvar o documento. Se o seu não possui isso, por favor, troque de editor. Na maioria dos editores essa opção fica na caixa de diálogo “Salvar Arquivo” para o arquivo atual e há uma opção para alterar o charset padrão em algum lugar. No Dreamweaver, para o arquivo atual, fica em Caracter “á” salvo na tabela UTF-8

Por isso, você precisa sempre indicar em que página de código você salvou seu texto. Talvez você faça o teste aqui e descubra que seus HTML parecem funcionar bem sem nenhuma indicação de página de código. Mas lembrese que você está usando um computador em português ou num outro idioma ocidental, onde a página de código padrão provavelmente é a windows-1252, padrão em sistemas Windows em português, a iso-8859-1, padrão em muitas

Modify > Page Properties > Document Encoding, e para definir o padrão do editor em Edit > Preferences. Uma vez que você sabe em que charset seus documentos estão salvos, pode indicar isso de três maneiras diferentes: 1 - A t r a v é s d o c a b e ç a l h o H T T P C o n t e n t - t y p e : isso envolve configurar seu servidor web e não é trabalho para qualquer um. Se você trabalha para um grande site, porém, é a maneira mais prática de se resolver o problema, pois

distribuições Linux em português, ou utf-8, e seu navegador

terá que fazer isso apenas uma vez, além, é claro, de se

está configurado para testar essas tabelas primeiro quando

assegurar que todos os seus documentos estão salvos

um documento não tiver indicação de charset.

no charset escolhido. Se, porém, trabalha com diversos

No entanto, nada garante que, sem indicar explici-

projetos, pode ser uma dor de cabeça ter que configurar

tamente o charset utilizado, seu documento vá funcionar,

vários servidores e lidar com isso em sites diferentes.

por exemplo, num Windows em japonês ou num Linux em

2 - Através do prolog xml: colocando, na primeira linha

hebraico. Geralmente, quando digo isso, alguém pergun-

do seu documento o código:

ta: quem vai querer visitar meu site num computador em

<? xml version=”1.0” encoding=”iso-8859-1” ?>

56 :: tutorial

E, naturalmente, trocando iso-8859-1 pelo charset com

utf-8. Por isso, nossa recomendação é que você, onde for

o qual você for trabalhar. Evite este método. Para usá-lo

possível, trabalhe com utf-8.

você terá que contornar uma série de problemas com o

E onde não seria possível? Se o site já está no ar,

Internet Explorer.

é necessário avaliar primeiro a possibilidade e o custo,

3 - Através da tag meta Content-type: com o seguinte código:

em horas de trabalho, de converter tudo para utf-8.

<meta http-equiv=”Content-Type” content=”text/

Abrir os arquivos um por um e salvar pode não ser uma

html; charset=iso-8859-1” />

opção. Nesse caso um bom programador pode ajudar.

Aqui também, trocando iso-8859-1 pelo charset escolhido. Se você não tem acesso às configurações do servidor, trabalha com muitos projetos diferentes, em servidores diferentes, ou não pode se assegurar de que todos os documentos em seu servidor serão servidos usando o mesmo charset, este é o método para você.

Escolhendo o charset ideal para você A maioria das tabelas de caracteres que usamos hoje foram criadas para um idioma específico e são, por isso, muito limitadas. Por exemplo, a tabela Shift-JIS para japonês, muito popular, não possui caracteres hebraicos.

Já a cp-1255 para hebraico não possui caracteres japoneses. Isso é um grande problema se você tiver que fazer um site que use os dois idiomas. Por exemplo, um curso de hebraico para japoneses. Será também um problema se você tiver que fazer um site ou sistema com suporte a diversos idiomas. Por exemplo, um sistema de blog projetado para uso internacional.

Para resolver estes problemas foi criado o Unicode, uma tabela de caracteres imensa, com suporte a cerca de um milhão de caracteres. Com Unicode você pode escrever chinês, hebraico, coreano, francês, japonês e russo num mesmo documento. Você pode escrever Unicode usando quatro tabelas de caracteres diferentes.

Apesar disso, muitos navegadores e sistemas operacionais em uso hoje são compatíveis com apenas uma delas, a

Não é difícil fazer um script que converta um diretório inteiro de um charset qualquer para utf-8. Se você tem um sistema legado por trás, uma infra-estrutura complexa ou não consegue convencer o restante da equipe ou o seu chefe a usar unicode, pode ter que se conformar com outro charset. Sim, porque se você configura seu editor para usar utf-8 como padrão, mas seus colegas continuam usando iso-8859-1, vocês vão ter problemas ao abrir e salvar os arquivos um do outro, principalmente ao trabalhar com includes.

De qualquer maneira, não se esqueça de indicar o charset usado com um dos métodos que mostramos acima, para ter certeza de que todos verão seu texto do jeito que ele é. Para saber mais, consulte a extensa e detalhada série de artigos do Henrique Pereira (do blog Revolução Etc.), em http://tinyurl.com/eonqz. No próximo mês, vamos escrever HTML de verdade, até lá!

ASCII Surgido em 1961. Um dos seus inventores foi Robert W. Bemer. É um conjunto de códigos para o computador para representar números, letras, pontuação e outros caracteres. O código ASCII é formado por todas as combinações possíveis de 7 bits, sendo que existem várias extensões que abrangem 8 ou mais bits.

58 :: webwriting

Guilhermo Bruno Rodrigues Reis Especialista Autor do primeiro em Arquitetura livro brasileiro de Informação e terceiroe no Usabilidade. mundo sobre É autor conteúdo do Kiton-line, de Conhecimento intitulado “Webwriting sobre AI -(http://tinyurl.com/p4j6w).

Pensando o texto para a mídia Atualmente, digital”. éÉ responsável coordenadorpor de coordenar informaçãoprojetos do website e manutenções Petrobras e nos titular da websites coluna primeira do Banco sobre Real.

Webwriting no mundo, elaborada desde 1998 e hoje veiculada na revista on-line reis@guilhermo.com “WebInsider”.

Ministra treinamento de Webwriting e Arquitetura da Informação no Brasil e no exterior. bruno-rodrigues@uol.com.br

Os bons companheiros Chegou o momento de popularizar o conhecimento sobre a web. É hora de desmistificar a arquitetura da informação, explicar melhor o que é usabilidade, falar mais sobre webwriting, ressaltar a importância da acessibilidade digital...

E quem pode fazer isso com excelência? Os chamados “multiplicadores de conhecimento”, aqueles que escrevem artigos, ministram palestras, publicam livros e mantêm blogs sobre as diversas áreas de atuação do profissional da mídia digital. Eles servem como um “ímã” sobre o mercado e podem ajudar a anunciar que o trabalho para a web está aberto a todos, de estudantes a novos profissionais.

Não seria a hora, então, após dez anos de web, de iniciar a lista dessa “gente que faz”?

Tornar públicos os livros, sites e blogs dos que trabalham para divulgar o conhecimento web?

Faço aqui minha lista, como quem abre uma janela: - Jornalismo on-line: Mário Cavalcanti, colunista do “Comunique-se.com”, também criou a principal lista sobre o assunto no país, a “Jornalistas da Web”. Este é “o” cara, mas não deixe de prestar atenção a profissionais como Raphael Perret - que, além de estudar jornalismo on-line, sabe muito sobre blogs - e Daniela Bertocchi, do “Intermezzo”, blog colaborativo aonde também escreve gente como Paulo Rebêlo, de Recife. Na área acadêmica, a pedida é o professor gaúcho José Antonio Meira da Rocha. Bibliografia básica? “Jornalismo Digital”, de Pollyana Ferrari, e “Jornalismo na internet”, de J.B. Pinho.

- Gestão de Conteúdo: qual ferramenta escolher? Qual é o melhor publicador? Como administrar o conteúdo? A bíblia brasileira é “Gestão de Conteúdo”, de Eduardo Lapa, mas não deixe de ler artigos de Daniel Aisenberg, no site “IntranetPortal.com.br” (do competente Ricardo Saldanha) para aprender a pilotar seu conteúdo sem problemas.

- Arquitetura da Informação: não perca de vista Guilhermo Reis e seu “Guilhermo.com”, o brasiliense Gustavo Moura, do “Gmoura.com”, a carioca Renata Zilse e João Pereira, o mago da AI na produtora Addcomm. Ainda que à distância, nos Estados Unidos, há a brasileira Livia Labate, do “Livlab.com”.

- Marketing: o livro de Paulo Kendzerski, “Web Marketing e Comunicação Digital”, é a atual referência, mas fique de olho no trabalho do carioca Nino Carvalho.

- Comunidades & Relacionamento: só agora, com o surgimento da Web 2.0, é possível pensar no assunto em larga escala. Se ainda há dúvida em como lidar com comunidades, as melhores explicações estão com René de Paula Jr. no site “Radinho de Pilha”, e se a questão é como pensar comunicação nestes ambientes, o nome é Vicente Tardin, “mestre” da Comunicação Digital e editor do “Webinsider”. Mas se Web 2.0 ainda tem ares de sânscrito, a pessoa certa é Márcio Tristão, que começa a destrinchar o assunto em seu site, o “mtristao.com.br”.

- Audiovisual: há um norte no país sobre o tema - neste momento em que TV digital não sai da mídia -, e este é Marcello Póvoa, autor da obra visionária “Anatomia da Internet”.

- Gestão do Conhecimento: ninguém sabe mais que José Cláudio Terra, autor de quatro

webwriting :: 59

“É precisoocriar as casas, prédios, as o praças e principalmente placas “Chegou momento deospopularizar conhecimento sobre aasweb.” de sinalização.”

livros sobre o assunto. Seu site, o “Terraforum.com.br”, é um baú de tesouros.

- Usabilidade: há dois nomes de destaque. Felipe Memória, autor do ótimo “Design para a Internet”, e Frederick van Amstel, que mantém o essencial “Usabilidoido.com.br”.

- Acessibilidade Digital: para um assunto tão urgente e ainda pouco discutido, nada melhor que ouvir o que tem a dizer o professor Bechara, da iLearn, e Horácio Soares, do “Internativa.com.br”.

- Direito Digital: Patrícia Peck publica artigos imperdíveis em seu site, o “Patriciapeck.com.br”, e com isso torna o tema um pouco menos complexo.

- Design: quem lidera a fila é Michel Lent Schwartzman, da agência “10 Minutos” e Luli Radfahrer, autor do fantástico “Design Web Design”. Mas esse é o grupo que mais cresce...

Se eu esqueci algum assunto, ou alguém? Claro que sim. Não deixe de dar seu retorno, portanto. Pretendo continuar a lista em meu blog, o “Cebola” (http://bruno-rodrigues.blog.uol.com.br). Até mês que vem!

60 :: marketing

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

Razão e sensibilidade Sim, você fala grego. Duvida? Faça um teste agora mesmo: ligue para a sua mãe e diga que teu CSS, embora pareça seguir o estipulado pelo W3C, não degrada decentemente em versões antigas dos browsers baseados em Mozilla.

Tua mãe vai confirmar: você está falando grego. Só não espere que ela vá correndo se gabar disso para as amigas, porém. Ela deve se lembrar muito bem daquela vez em que te perguntou inocentemente se CD não tinha lado B e você, rindo, respondeu em grego. Ela se sentiu uma tonta.

Não, não estou dizendo que a tecnologia te tornou insensível (ou, parodiando um grande amigo e frasista, que você tenha virado um engenheiro frio e calculista). Apenas estou sugerindo que talvez valha a pena aprender mais duas palavrinhas em grego: hybris e sophrosyne.

Hybris serve, basicamente, para as coisas que lhe sobem a cabeça e te embriagam: arroubos, paixão, vaidade, arrogância, poder. Tudo isso pode lhe turvar a razão e fazer de você uma criatura descontrolada e desumana.

Razão pode subir à cabeça. Sim, razão, sobretudo a racionalidade técnica. Basta ler um livrinho ou dois daquelas coisas que arrepiam os leigos (C++, termodinâmica, legislação tributária, o que for) para que o resto da humanidade pareça quilômetros abaixo da sua altitude rarefeita.

E bota rarefeita nisso: se você se embriagou com algum conhecimento que engoliu sem mastigar, é sinal de que teu cérebro já está running in UNsafe mode. Pior: é sinal de que teu bomsenso tem uma severa falha de segurança.

Muitos fi lósofos gregos viam na embriaguez da hybris a raiz de um monte de males, e o remédio para isso seria algo realmente com nome de remédio: sophrosyne.

Sophrosyne se traduz por temperança, por parcimônia, se traduz por manter a cabeça no lugar sem se deixar levar por excessos. Remédio de uso diário, sem contra-indicação e que custa muito mais barato do que aquilo que “dá barato”. Eu não sou imune a hybris. Ninguém é. Nosso OS é assim, versão beta, cheio de melhorias pendentes, mas eu, como se diz nos AA, agradeço por cada dia em que não me embriago.

Eu me embriaguei outro dia diante de umas 600 pessoas. Eu jamais falaria grego diante de uma platéia notoriamente não-técnica, mas me deixei empolgar e pronto, lá estava eu a um passo de falar da importância da folksonomia para a construção de eixos de afinidade que sirvam como fatores aglutinadores em ambientes sociais abertos.

Quaaaaaase falei, quase, mas fui salvo por uma esplêndida cara de paisagem na platéia, a infalível reação salutar e involuntária de quem contempla um pobre-diabo perdendo o pé (e a cabeça e o fio da meada e tudo).

Aquele olhar perdido foi o balde de água fria de que eu precisava. Recompus-me, voltei como pude ao que queria dizer e, sobretudo, recuperei a noção do meu verdadeiro tamanho: o fato de

marketing :: 61

"manter o estilo é muito, muito mais difícil que aprender CSS..."

que estar no palco não era um direito divino. Eu estava ali porque aquelas pessoas abriram um espaço na vida delas para ouvir o que eu tinha a dizer. Se é que eu tinha algo a dizer.

Elas podiam nem ter vindo, podiam muito bem seguir vivendo sem meus 20 minutos de blábláblá. Elas eram especialistas em algo em que eu era leigo. Elas eram responsáveis pela condução de negócios gigantes, com milhares de empregados dependendo das suas decisões diárias.

Se algo deveria me subir à cabeça era a gratidão e o senso da responsabilidade do meu papel naquele exato momento. A todos os que me ouviram e ouvem cada palestra ou podcast, meu muitíssimo obrigado.

Retroativo, inclusive :-) Há duas outras coisas pela qual sou muito grato ao destino: ter convivido e trabalhado com grandes expoentes da comunicação brasileira e mundial e ter aprendido com eles que nada, nada justifica arrogância. Nada. E te juro: manter o estilo é muito, muito mais difícil que aprender CSS. E funciona em todas as plataformas.

62 :: bula da Catunda

Marcela Catunda Trabalhou na TV Globo, TV Bandeirantes, TV Gazeta, Manchete e SBT. Foi redatora da DM9DDB e Supervisora de Criação de Mídia Interativa da Publicis Salles Norton. É sócia do site Banheiro Feminino, está no Orkut e trabalha como autônoma. blog - http://pirei.catunda.org marcelacatunda@terra.com.br

Legal. Você é legal Quem não sente cócegas no ego ao ter sua performance reconhecida? Eu sinto. Os elogios fazem parte da vida de todos nós, eles nos motivam, funcionam como uma espécie de sinalização: siga em frente ou pare agora. Lidamos com isso nos relacionamentos interpessoais, com a gente mesmo, com nossos terapeutas. Mas, e na vida profissional, como fica?

Dentro de uma empresa as coisas são mais fáceis quando o assunto é ser chancelado, enaltecido, reconhecido, elogiado, promovido... O reconhecimento vem em formato de prêmios, aumentos, um novo cargo, melhores condições de trabalho etc etc etc. Mas, e na vida de um freela, como fica essa coisa do “eu sou legal”? Como vamos saber se fizemos mesmo um bom trabalho, se conquistamos mais uma vitória e se somos mesmo legais, se por muitas vezes ficamos longe dos resultados, do abraço do cliente e do reconhecimento? Será que o reconhecimento de um freela é tão somente receber pelo seu trabalho?

Situação comum número um...

Tal cliente sumiu e tem um tempão que não me passa um job. Será que eu não fiz um bom trabalho? Será que não sou legal?

Ao menos que você tenha pisado na bola, a necessidade de um freela tem freqüência diferenciada quando o assunto é o dia de amanhã. Quanto mais “especialista” em alguma área você se torna (entenda-se aqui o “bom nisso ou naquilo”), a chance de você ser detectado no mercado de trabalho aumenta, mas isso tem um preço. Quando nosso papel fica bem definido, a possibilidade de nos chamarem para tapar buracos diminui bastante.

Ficamos bons no que fazemos, mas perdemos um pouco da nossa versatilidade. Sim, porque com a nossa importância definida, eles passam a nos chamar apenas quando necessitam de algo que acreditam que apenas “seu nome aqui” será capaz de fazer.

Por isso, a resposta para a pergunta acima é: sim. Você é legal.

Situação comum número dois...

Depois que tal empresa contratou tal pessoa nunca mais fiz nada pra eles. Será que essa pessoa não gosta de mim? Será que não me acha legal?

Para toda a situação cabe o sábio pensamento: cada caso é um caso. Mas vamos neutralizar os traumas de infância e pensar no que pode estar acontecendo. Talvez a tal empresa tenha contratado alguém que esteja fazendo o trabalho que antes você fazia, ou também talvez essa nova pessoa não saiba da sua existência. Que tal tentar um contato? Não custa nada. Só uns impulsos, comece com o seu, o da telefonia a conta pertence.

A terceira e mais cruel das opções para a situação acima pode ser chamada de inveja.

Esse pecado capital é uma m.... mas ela tá aí e as pessoas sentem uma pelas outras. Se você era uma pessoa chave, chamada nos momentos imprescindíveis, infelizmente existe sim a chance dessa nova pessoa querer quebrar suas pernas. Nesse caso, tudo que nos resta é

bula da Catunda :: 63

"Quem não sente cócegas no ego ao ter sua performance reconhecida?"

torcer para que essa criatura se dê bem na vida, cresça profissionalmente, abra sua própria empresa (para qual você poderá enviar seu currículo de freela em alguns anos) e saia logo do seu cliente tão querido.

Aqui a resposta também é sim. Sim. Sim. Sim! Você é legal.

Que situação...

A gente já é legal por ser freela. Por ter escolhido um caminho que pra alguns é o mais fácil, mas que só a gente sabe o quanto é difícil. Freqüência não é moeda de qualidade para um freela. Não é porque não te chamam sempre que você não é legal. Infelizmente, nem todos os chefes de departamento, diretores de criação e donos de empresa vêem como um bom negócio ter freelas em seu quadro de funcionários, a começar pela palavra quadro. “Se eu preciso deles, que eles venham trabalhar pra mim, pô.” Sim, nós iríamos se no pretérito imperfeito do subjuntivo não fôssemos nesse caso, freelas.

A resistência ao freela vai desde o nível de comprometimento (é impressionante como eles adoram essa palavra) até enroscos legais.

Eu já perdi trabalho porque disse durante uma reunião de consultoria a seguinte frase: “Vocês não precisam de mim tanto tempo.”, e olha que eu estava cobrando por hora. É o péssimo hábito causado pela insegurança de que um freela não tem comprometimento, que um freela não se dedica como um funcionário, que um freela não é fiel, não é só meu, ou a pior das lendas que é composta pelo pensamento “se ele fosse tão bom estaria empregado”. Vai se catar.

A gente é legal e mesmo quando não temos prêmios, um salário fixo, uma sala com secretaria e gente pra mandar, encontramos crescimento na batalha de todo dia, matando nossos leões de ouro a unha, conquistando novos parceiros, sambando, criando, produzindo e se aprimorando. O freela é sim um bom negócio. Quem não acha isso é que não é legal.

64 :: webdesign

Luli Radfahrer PhD em Comunicação Digital, já dirigiu a divisão de internet de algumas das maiores agências de propaganda e de alguns dos maiores portais do Brasil. Hoje, é Professor-Doutor da ECA-USP, Diretor Associado do Museu de Arte Contemporânea e consultor independente. Autor do livro ‘design/web/ design:2’, administra uma comunidade de difusão do conhecimento digital pelo País. luli@luli.com.br

Próteses digitais Por mais que argumentos racionais tentem provar o contrário, no fundo todos sabemos que não compramos roupas para satisfazer nossas necessidades básicas. Dê uma breve olhada em seu armário nesses tempos de Campanha do Agasalho e acredito que você não terá muita dificuldade em perceber que o uso de roupas transcendeu, faz tempo, as simples necessidades de proteção e conforto. O mesmo se pode dizer, mais recentemente, da tecnologia móvel.

Afinal de contas, se um celular é um telefone - e um telefone serve, em última instância, para colocar duas pessoas em contato - por que se troca tanto de aparelho?

Antes que você comece a questionar o modo de vista consumista e fútil em que vivemos neste novo milênio, apoiado em novidade e variedade, coloco a você um pequeno desafio: imagine que ganhou um milhão de dólares, mas só poderá gastá-lo se voltar no tempo para 1974, ficando um ano inteiro por lá. Detalhe: você não poderá mudar a história, só poderá desfrutar. Afinal de contas, se essa quantia é um belo dinheiro hoje, naquela época deveria dar para aproveitar um bom bocado. Mas... fazendo o quê?

Você poderia começar indo para a praia ouvir um som. É certo que muitas das suas músicas prediletas ainda não tinham sido inventadas, mas dava para fazer uma bela festa com o rock e a motown da época. Não existia MP3 nem MD nem CD, nem mesmo um reles walkman, você teria que ouvir músicas em discos de vinil, estalando estática, pulando faixas riscadas e tendo que virá-los a cada 23 minutos, mas isso poderia ser feito por um mordomo. Para fazer uma seleção das suas músicas preferidas, você teria que gravar uma fita cassete (ou K-7, para soar adequado à época), que poderia ser de cromo, C-120 para duas horas de música, lembrando de limpar o cabeçote do toca-fitas quando tudo ficasse meio grave demais.

Pensando bem, esqueça a música e se concentre na praia: como, na época, citronela era coisa de índio, então você teria que se contentar com um equivalente sintético. Para deitar no sol era só usar um bronzeador, que estimularia a melanina e o deixaria bem queimadinho, sem essa frescura de proteção solar. À noite, se você estivesse enjoado de sair, talvez quisesse querer assistir TV, mas lembre-se que não há DVD, vídeo, cabo, satélite ou mesmo controle remoto.

Viajar poderia ser uma boa opção, e você poderia alugar seu próprio avião para não ter de agüentar o ar viciado com cheiro de cigarro vindo da área de fumantes de um vôo comercial. Reze para aquele treco não cair por imperícia ou erro de projeto, já que não existiam celulares para confundir os sinais. Outra coisa que talvez valesse a pena alugar seria um carrão, daqueles que tivessem até ar condicionado e direção hidráulica, mas não peça air bag, barra de proteção lateral, cintos de três pontas ou bancos anatômicos, pois

webdesign :: 65

"O que você procura quando troca de celular?"

isso não existia. Tração nas quatro rodas, só se fosse um jipe.

Humm… Não parece tão divertido um mundo em que a maioria das roupas é feita de fibras sintéticas desconfortáveis e pesadas (para não dizer cafonas, mas isso é questão de gosto), a cosmética é oleosa, sapatos são pesados e a comida também (afinal, nem o mais delirante nutricionista hippie pensaria em inventar um Gatorade ou barras de cereais) e que não há computadores, celulares, PDAs ou câmaras digitais. Games? Ah, claro! O Telejogo Philco é o que existe de mais bacana em uma época pré-Atari.

Aparelhos de ginástica? Tênis de corrida? Esqueça.

Pois é. E não precisa nem dizer que a web não passava pela cabeça nem dos maiores autores de ficção científica, o que matava opções de lazer, da Amazon aos sites de sexo. Uma ou duas universidades tinham sistemas de e-mail, em Unix. Mirradas as opções, você resolve ter alguma ocupação para passar o tempo, mas qual? Aquilo que você sabe fazer ainda não foi nem inventado, pois mouse só tem um: o Mickey. O outro é só um brilho nos olhos de um pesquisador do PARC XEROX. Difícil? Pois é. Somos mais dependentes da tecnologia que acreditamos ser, e não há nada de errado nisso. Muitos evolucionistas inclusive acreditam que nós chegamos à utopia biológica ao deixarmos as máquinas evoluírem por nós, como dizia Marshall McLuhan desde 1951. Aliás, 1974 não foi escolhido à toa. Naquela época, fazia 10 anos que ele tinha escrito seu livro “Extensions of Man” e, por incrível que pareça, estava começando a cair em descrédito.

Como extensões do nosso corpo, as máquinas (e software) podem ser próteses muito eficientes. Tudo depende de quem as criou, ou seja, seu designer. Se ele pensa em seu público e nos usos que ele dará ao objeto que está criando, os resultados podem ser fantásticos. Caso contrário, vai ser só mais uma coisinha colorida que pisca e pula, tão duradoura e útil quanto um Tamagotchi. Pense nisso.

Weberê

Contribuir para o desenvolvimento social é contribuir para um futuro melhor.

Agradecemos a todos que colaboraram para a realização dos cursos de mecânica, artesanato e computação.

Você também pode fazer parte desse futuro, participe!

Magê-Malien - Crianças que Brilham Faça parte você também deste projeto.

Para doação de computadores e voluntariado, entre em contato: arteccom@arteccom.com.br Informações: www.arteccom.com.br/ong