Ed41

Webdesign

maio 2007 :: ano 4 :: n 41 :: www.revistawebdesign.com.br

maio 2007 :: ano 4 :: nº 41 :: www.revistawebdesign.com.br

R$ 9,90

Acessibilidade na CAPES: Novo site do Instituto inclui dispositivo inédito para daltônicos Arquitetura de Informação: Principais etapas, erros mais comuns e perfil do profissional Estréia: Ricardo Figueira, VP de criação da AgênciaClick, analisa a publicidade on-line O fim do impresso? E as transformações no mercado de design

4 :: quem somos

Editorial

A necessidade de criar projetos digitais cada vez mais interativos é um caminho sem volta no design para web. Afinal, na luta para atrair a atenção de seu público-alvo, diante da oferta dos mais variados serviços na web, será preciso colocar a imaginação para trabalhar e os vídeos podem ser uma ótima solução nesta área.

Neste universo, é preciso lembrar que assistimos a um gradual crescimento do acesso à internet através de banda larga e as barreiras tecnológicas para utilização desses formatos não serão mais desculpa para justificar um possível desconhecimento. Além disso, quem procurar aperfeiçoamento na área, pode garantir boas oportunidades num futuro próximo.

Falando em conhecimento, apresentamos nesta edição o trabalho de reformulação do portal da Capes, instituição do governo federal, “responsável por mais da metade das bolsas de pós-graduação no país”.

O detalhe interessante neste projeto é o investimento em pesquisa,

Direção Executiva Sergio Melo Direção de Redação Luis Rocha Criação, Diagramação e Ilustração Camila Oliveira Leandro Camacho Beto Vieira Publicidade Débora Carvalho Desenvolvimento Web Cadu Sant'Anna Financeiro Cristiane Dalmati Atendimento Luanna Chacon Atendimento aos assinantes atendimento@arteccom.com.br Redação redacao@arteccom.com.br Anuncie publicidade@arteccom.com.br

criando um importante legado sobre acessibilidade e usabilidade na internet brasileira.

Além disso, vamos falar sobre a aplicação dos conceitos de síntese visual no design para web e como a Arquitetura da Informação pode trazer benefícios na criação e no desenvolvimento de ambientes digitais.

Boa leitura e um grande abraço!

A Arteccom é uma agência especializada na criação de sites e responsável pelos seguintes projetos: Revista Webdesign :: www.revistawebdesign.com.br Concurso Peixe Grande :: www.arteccom.com.br/ webdesign/peixegrande Encontro de Web Design :: www.arteccom.com.br/encontro Fórum Internacional de Design e Tecnologia Digital :: www. arteccom.com.br/find Projeto Social Magê-Malien :: www.arteccom.com.br/ong

Criação e edição www.arteccom.com.br

Luis Rocha.

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

Distribuição www.chinaglia.com.br

9

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

Preparado para trabalhar com cores e tipografia em movimento?

Equipe Direção Geral Adriana Melo

menu :: 5

apresentação

matéria de capa

pág. 4 quem somos

pág. 22 entrevista: síntese visual

pág. 5 menu

no design para web pág. 30 reportagem: aperte o play

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

e-mais pág. 38 debate: o fim do impresso? pág. 44 e-mais: arquitetura da informação pág. 51 estudo de caso: Capes

fique por dentro pág. 8 métricas e mercado

pág. 56 tecnologia na web: Plugins pág. 60 tutorial: Actionscript - Parte 2

pág. 10 direito na web pág. 11 post-it

com a palavra pág. 64 internacional: Julius Wiedemann pág. 66 arquitetura da informação: Luiz Agner

portfólio

pág. 68 marketing: René de Paula Jr.

pág. 12 agência: Gringo

pág. 70 publicidade on-line: Ricardo Figueira

pág. 18 freelancer: Fabrício Lima

pág. 72 webdesign: Luli Radfahrer

pág. 20 ilustração: Eduardo Recife

6 :: emails

impressionou foi o delinear da matéria sobre as cores, onde realmente deve haver maestria por parte nossa no processo criativo. Continuem focando nesses assuntos que são totalmente relevantes e construtivos para quem já trabalha com isso e precisa de algum norteamento. Valeu, feras!

Assunto: Direito Experiências de um na web designer

André Grilo andregrilosousa@gmail.com

André, sua mensagem é um grande incentivo em nossa caminhada. Ao

Parabéns pelas duas últimas

longo de 2007, esperamos trazer mais

edições! Adorei o debate sobre

assuntos interessantes envolvendo

inclusão digital e a reportagem

os processos criativos do design para

“Sinfonia das cores”. Queria falar

web. Obrigado pela força!

de uma sugestão que enviei meses atrás, sobre como os gostos do designer podem

Assunto: Direito Entra Gimp, sai na web Photoshop...

Assunto: Direito Dúvidas nasobre web certificações

Assunto: Qual curso devo fazer?

Sou funcionário público da

Vocês já falaram alguma vez

Prefeitura do Rio de Janeiro e

sobre as certificações Adobe,

leitor assíduo da revista. Gostaria,

Macromedia, Corel etc.,

se possível, que vocês me

referentes à área de design? Seria

ajudassem com um

ótimo ter uma matéria voltada

grande dilema que vem me

para esse assunto, que é pouco

tirando o sono: onde estudar?

abordado. Como se preparar,

Tenho algum conhecimento sobre

quais são os melhores cursos,

o mundo do design na web,

livros, onde arranjar provas

conhecimento este adquirido

antigas para estudar...

com leituras, fóruns etc. Agora,

Rafael Burity rafaelburity@gmail.com

sinto a necessidade de expandir

Rafael, já foi abordado sim! Mais precisamente na edição nº13 (Portfólio), de janeiro de 2005.

O tema foi destaque no debate

estes conhecimentos, pois pretendo investir nesta área.

Vocês poderiam me indicar alguns cursos no RJ? Cristian Barbosa dadoido@yahoo.com.br

“o que pesa mais: certificação

influenciar no seu trabalho. Vocês

ou experiência?”. Procure dar

Olá, Cristian, como vai? Esperamos

me prometeram a publicação e

uma lida e veja se gostaria que

que bem. Uma boa fonte de

aprofundássemos algum assunto

consulta sobre cursos é a edição

específico ali abordado, ok?

nº18 (Cursos), lançada no mês de

Na revista de fevereiro, na

ainda não foi realizado. Espero

seção “Tecnologia na web”, foi

que atendam meu pedido.

publicada uma matéria muito

Erick Gaspar erickramone@msn.com

interessante e importante

Erick, obrigado pelo incentivo! Na

assunto, gostaria de saber se

verdade, acho que atendemos, em

vocês poderiam publicar uma

Trabalho no setor de DI (Data

parte, seu pedido ;-)

lista com softwares livres que

Intelligence) da AgênciaClick.

Na edição de fevereiro, “Princípios

substituam: o Dreamweaver, o

Gostaria de sugerir uma pauta

da web”, apresentamos uma

Corel Draw, o Photoshop, entre

sobre Web Analytics. Esta é

reportagem, na seção E-mais, que

outros. Se não for possível

uma área que vem ganhando

abordava um tema muito parecido

publicar na revista, seria possível

cada vez mais importância nas

com a sua sugestão e que foi

enviarem para o meu e-mail?

agências. Seria interessante

baseada na palestra “Things I have

Roberto Magalhães robertto.magalhaes@gmail.com

learned in my life so far (Coisas

sobre software livre. Sobre este

junho de 2005. Lá, você poderá na na web Assunto: Direito Métricas web

conferir uma lista de indicações, além dos parâmetros necessários para escolher o curso ideal.

vocês divulgarem essa atividade que mede desempenho da presença on-line de portais e

que aprendi em minha vida até

Vai aí uma dica:

hoje)”, ministrada pelo designer

- Dreamweaver = Eclipse;

americano Stefan Sagmeister (www.

- Photoshop = Gimp;

sagmeister.com), durante o 1º

- Corel = Inkscape.

Fórum Internacional de Design e

Pesquise na internet sobre eles.

Tecnologia Digital (FIND – www.

No Brasil, existem comunidades

arteccom.com.br/find). Se tiver

do Gimp e do Inkscape.

oportunidade, dê uma lida e nos

Fabio Aires www_fabioaires@yahoo.com

Olá, Sthefan. Ótima sugestão!

combustion.ws) de Marcelo

Estamos programando uma edição

Baldin, Portfólio Freelancer do

Roberto, nem precisamos

especial sobre métricas na web

mês, saíram trocadas.

pesquisar para sanar suas

para o segundo semestre de 2007.

dúvidas! O leitor Fabio Aires foi

Esperamos contar com a sua

- Na seção E-mais da edição de

mais rápido e traz as dicas que

participação, ok?

abril, o link para o portfólio de

diga o que achou, ok?

Assunto:

Foco na criação

Achei sensacional a abordagem feita sobre o case “Fellini”.

Porém, o que mais me

de campanhas on-line (que é o fazemos), bem como mostrar as habilidades necessárias para quem deseja seguir na área.

Sthefan Berwanger sthefan.berwanger@agenciaclick.com.br

DESCULPE A NOSSA FALHA! - Na edição de abril, as referências de contato (inspired@ combustion.ws) e site (www.

você precisa. Agradecemos ao

Thibaud saiu errado. Considerar

Fabio pela pronta ajuda! ;-)

este: www.thibaud.be.

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

Finalidade de acesso à internet Finalidade Educação e aprendizado

Em

2005, o perfil do internauta brasileiro era de...

%

..., em média, 28 anos de idade, 10,7 anos de estudo e um

71,7

rendimento médio mensal domiciliar per capita de R$1.000,00.

Comunicação com outras pessoas

68,6

Além disso, metade dos usuários utilizou a internet do domicílio

Atividades de lazer

54,3

em que morava e 39,7% em seu local de trabalho.

Leitura de jornais e revistas

46,9

Fonte: Pesquisa Nacional por Amostra de Domicílios (PNAD 2005) /

Interação com autoridades públicas ou órgãos do governo

27,4

Buscar informações e outros serviços

24,5

Transações bancárias ou financeiras

19,1

32,1 milhões

Comprar ou encomendar bens ou serviços

13,7

Em 2005, 21% da população de 10 anos ou mais de

IBGE (www.ibge.gov.br)

idade no Brasil acessaram, pelo menos uma vez, a inFonte: Pesquisa Nacional por Amostra de Domicílios (PNAD 2005) /

ternet em algum local (domicílio, local de trabalho,

IBGE (www.ibge.gov.br)

estabelecimento de ensino, centro público de acesso

250 milhões

gratuito ou pago, domicílio de outras pessoas etc.)

Esta é a estimativa para o total de contas envolvendo os

Fonte: Pesquisa Nacional por Amostra de Domicílios (PNAD

programas de mensagens instantâneas em 2010, incluindo

2005) / IBGE (www.ibge.gov.br)

por meio de microcomputador.

contas pessoais utilizadas para envio de mensagens instantâneas de negócio.

Fonte: The Expanding Digital Universe (www.emc.com/about/destina-

161 bilhões

tion/digital_universe)

Total do volume de informações digitais criadas e copiadas ...consideram o e-mail como o canal de marketing mais importante para 2007.

87%

Em seguida, aparecem links patrocinados (61,7%), anúncios na web (36,6%) e dispositivos móveis (10,6%). A pesquisa é

de Gigabytes (161 Exabytes)

no ano passado, segundo pesquisa realizada pela empresa de consultoria IDC. O universo digital seria, aproximadamente, três milhões de vezes maior do que a informação contida em todos os livros já escritos.

Fonte: The Expanding Digital Universe (www.emc.com/about/ destination/digital_universe)

da Datran Media, que entrevistou 1,5 mil profissionais de marketing nos Estados Unidos Fonte: Relazione (www.relazione.com.br)

De

253 milhões para quase 1,6 bilhão

120 milhões

Aumento registrado, entre 1998 e 2006, no número de caixas

Volume total de domínios registrados em 2006, o que repre-

enviados cresceu três vezes mais do que o número de usuários

senta um aumento de 32% em comparação ao ano anterior e

de e-mail. No ano passado, o tráfego de e-mail entre uma pes-

de 8% sobre o terceiro trimestre de 2006.

soa e outra, excluindo spam, totalizou 6 Exabytes.

Fonte: Dossiê sobre a Indústria de Domínios na Internet (www.

Fonte: The Expanding Digital Universe (www.emc.com/about/desti-

verisign.com.br)

nation/digital_universe)

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

de correio eletrônico. No mesmo período, o número de e-mails

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 Aconteceu: FOWA

motivos pelos quais deveria ser contratado, com direito a vídeo no YouTube e tudo.

O site está no ar desde 15 de março. Vamos ver no que vai dar? Ele afirma que está tentando entrar no Google de Belo Horizonte, mas que vai fazer uma versão em inglês para os gringos também entenderem.

Future of Web Apps (www.futureofwebapps.com/index.html), evento organizado pela Carson Systems, aconte-

(Via Fábio Ricotta)

A China vê seu site?

ceu nos dias 20 e 21 de fevereiro deste ano, em Londres. O ‘hall’ de palestrantes foi bastante impressionante e incluiu: Kevin Rose (digg); Mike Arrington (TechCrunch); Jonathan Rochelle (Google); Matthew Ogle (Last.fm); Richard Moross (Moo); Tariq Krim (Netvibes); entre outros.

Se o evento já passou, por que estou falando dele?

Porque as palestras estão todas disponíveis para download, em formato MP3 e PDF. :) (Via Luli Radfahrer, no DWD:3)

Ricotta no Google

TheGreatFireWallOfChina.org é um serviço que se propõe a testar endereços para saber se eles estão disponíveis para os habitantes da China, país que mantém um grande firewall nacional, em que filtra determinados sites e conteúdos considerados impróprios pelo governo.

Google.com, por exemplo, está bloqueado. Por isso, o gigante das buscas abriu endereço próprio com conteúdo específico para aquele país no Google.cn. Já o ViuIsso, por hora,

O estudante de Ciência da Computação, na Universidade Federal de Itajubá, Fábio Ricotta, criou um site com o objetivo de chamar a atenção do Google para lhe contratar. No site “EuQueroTrabalharNoGoogle.com” (www.euquerotrabalharnogoogle.com), ele enumera os

parece estar sendo bem aceito naquele país. :) E o seu, está bloqueado? Visite o link para descobrir: www.greatfirewallofchina.org.

(Via Omedi, que está censurado lá)

10 :: direito na web

Nome de domínio vs. marca vs. nome de empresa “Sou dono do domínio www.clickeducacao.com.br e estou sendo ameaçado de processo por plágio, ou coisa similar, pelo domínio www.klickeducacao.com.br, que se apresenta como detentor da marca KLICK em várias denominações. Gostaria de saber se isso procede realmente, sendo que não tenho interesse algum em copiar nada de ninguém, sou terceiro de boa fé! Apenas vendo meus softwares educacionais no meu site e passo algumas limitadas informações a usuários da área da educação através dele (site).”

Luiz Angelo de Melo (clickeducacao@yahoo.com.br)

Há décadas existe o conflito entre de-

de domínio, que é a de conceder nomes que

tentores de marcas e detentores de nomes

venham a ser efetivamente utilizados pelo

empresariais, que surge toda vez em que

requerente.

há colidência entre umas e outros. Para

Nesse contexto, há também o caso do

complicar ainda mais esse quadro, temos

“seqüestro reverso” (reverse hijacking).

com Mestrado na USP e cursos

hoje os nomes de domínio, que multiplicam

Isso acontece quando alguém que não está

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

o potencial de conflitos. Quais são os crité-

amparado por anterioridade tenta tomar o

Gerente Jurídico da IBM, onde

rios legais em relação a esta questão?

registro de quem foi anterior. Já houve pelo

Gilberto Martins de Almeida Advogado formado na PUC/RJ,

trabalhou por 11 anos, no Brasil e nos EUA. Sócio de Martins de

Em primeiro lugar, é de se aplicar o

menos um caso conhecido julgado no Brasil,

Almeida - Advogados, escritório

princípio da anterioridade, segundo o qual,

condenando essa iniciativa, embora no final

deve prevalecer quem mostrar que já tinha

as partes tenham fechado um acordo.

especializado.

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

algo (marca, nome empresarial, ou nome

A propósito, quando os nomes e mar-

anterior) anteriormente ao registro que

cas são bastante parecidos entre si (por

outrem veio a conseguir. Portanto, nesse

exemplo, foneticamente, ou na escrita), se

sentido, dizendo em bom português, quem

pode dizer que há colidência. Isso provoca

chegou primeiro, leva.

a necessidade de julgamento com base nos

O segundo critério, e não menos importante, é o da boa fé. Significa dizer que

critérios acima mencionados, da anterioridade e da boa fé.

se alguém conseguir um registro sem ter

Finalmente, vale lembrar que há algu-

um legítimo interesse em relação ao nome

mas marcas tão famosas, que são conside-

ou marca obtidos por meio dele, corre o

radas como marcas de alto renome, ou no-

risco de que o registro seja cassado.

toriamente conhecidas. Essas são capazes

Aconteceu, por sinal, no primeiro caso

de barrar qualquer tentativa de registro de

arbitrado pela Organização Mundial da Pro-

nome de domínio colidente com elas, pre-

priedade Intelectual, que considerou de

venindo a consumação do registro do nome

má-fé o indivíduo que conseguiu num dia o

de domínio por terceiros. Entretanto, são

registro de nome de domínio relativo a de-

franca minoria as marcas que conseguem

terminado tipo de artes marciais e no dia se-

ser enquadradas como tal, atualmente.

guinte colocou o nome de domínio à venda.

Portanto, como regra geral, se pode di-

Ou seja, obter nome de domínio ape-

zer que anterioridade e boa-fé são os crité-

nas para revendê-lo não é considerado

rios principais, para basear qualquer decisão

como boa fé, por não ser compatível com

sobre nomes de domínio entre si, ou em rela-

a finalidade essencial do sistema de nomes

ção a marcas ou a nomes de empresas.

ost-it :: 11

r dentrotos, o p e u Fi q c a s , e v e n d a s d i e r e f e r ê n c i a s mundo livros ovimentam o que m i g n n a w e b do des Games com pixel arte Os criativos do portal Globo.com lançaram alguns desafios interessantes envolvendo pixel arte. O projeto, conhecido como Nanopops, instiga o usuário a descobrir quais são os nomes das figuras ali apresentadas, sejam elas do mundo esportivo ou de

Blog do mês: Blog do Bicalho Na edição passada,

programas de reality show. Confira a lista: Nanopops - Estrelas

apresentamos algumas

do Esporte (http://tinyurl.com/2z2vdz), Nanopops - Versão BBB

dicas envolvendo arte

(http://tinyurl.com/yte2sa), Nanopops - Futebol Arte (http://

em papel. Ainda sobre

tinyurl.com/2c3ww3) e Nanopops 2 - A Febre Continua (http://

o assunto e servindo

tinyurl.com/2h2aw5).

como indicação do mês

Selo Peixe Grande com novidades...

de maio, o leitor Mário

A organização adianta que uma das novidades do concurso será

Barão (msbarao@terra.

a classificação em duas categorias: Júri Popular e Júri Técnico. As

com.br) recomenda a navegação pelo blog do designer e ilustrador

inscrições serão abertas no mês de julho. Foi iniciada a contagem

capixaba, radicado em Belo Horizonte, Marcelo Bicalho (www.

regressiva da pescaria na web!

marcelobicalho.blogspot.com). Conhece algum blog interessante,

Animação em 3D

envolvendo o mundo do design? Então, mande sua dica para

Para quem gosta de observar (bons) trabalhos de animação em 3D,

redacao@arteccom.com.br.

uma boa pedida é acessar o site do estúdio KeyToon (www.keytoon. com). Um dos projetos de grande destaque é o “The Grandfather of

Dicas

Soul”, uma homenagem ao falecido rei da música soul, James Brown.

No Brasil, a agência Seagulls Fly (www.seagullsfly.com) é uma das

Livro do mês

principais referências na área.

Google Marketing: aprenda os segredos

Na prática: a criação de um site mobile

dos mecanismos de busca para aumentar

Na edição de novembro de 2006, a Webdesign abordou os principais fatores na criação de sites para dispositivos móveis. Recentemente, a designer Celina Uemura escreveu um artigo sobre o assunto

a lucratividade da sua empresa Autor: Conrado Adolpho Vaz Editora: Novatec (www.novatec.com.br)

(http://tinyurl.com/ysg4md) para o blog da comunidade Flashmasters (www.flashmasters.net). Nele, ela relata alguns dos detalhes práticos envolvendo o desenvolvimento (arquitetura da informação, design e tecnologia) da versão mobile do site da agência no qual ela trabalha no Japão (www.inphonixbrasil.com). Vale a leitura!

Agenda de eventos 19/05 - 12º EWD - RJ (www.arteccom.com.br/encontro) 16/06 - 12º EWD - Recife (www.arteccom.com.br/encontro)

“No dicionário básico da internet, o termo Google praticamente virou sinônimo do verbo buscar. Assim, no currículo de quem trabalha com a criação e o desenvolvimento de sites, se tornou item obrigatório conhecer as características técnicas envolvendo os mecanismos de buscas. Ou seja, o objetivo é estar preparado para deixar o site de seu cliente cada vez mais perto de seu público-alvo. Um bom atalho nesta caminhada

14/07 - 12º EWD - Belo Horizonte (www.arteccom.com.br/encontro)

é o livro do consultor Conrado Vaz. Nele, você poderá

15/07 - NDesign Floripa 2007 (www.ndesign.org.br/2007)

conferir dicas sobre buscas orgânicas, encontrabilidade,

18/08 - 12º EWD - Brasília (www.arteccom.com.br/encontro)

links patrocinados, palavras-chave, site otimizado, entre

15/09 - 12º EWD - Curitiba (www.arteccom.com.br/encontro)

outros assuntos. Afinal, como o próprio autor faz questão

20/10 - 12º EWD - Salvador (www.arteccom.com.br/encontro)

de ressaltar, pesquisas apontam que cerca de 20% dos

10/11 - 12º EWD - Porto Alegre (www.arteccom.com.br/encontro)

usuários chegam até o site de uma empresa por meio de um

08/12 - 12º EWD - São Paulo (www.arteccom.com.br/encontro)

mecanismo de busca.”

Participe do Post-it! Envie sugestões para redacao@arteccom.com.br.

12 :: portfólio agência - Gringo

Um Gringo Bem Brasileiro Os olhares estrangeiros sempre admiraram as riquezas da fauna e da flora contidas na parte que nos cabe da Floresta Amazônica. No entanto, a diversidade não é uma vantagem exclusiva de nossos recursos naturais. Ela está presente também, por exemplo, nos diversos segmentos do design brasileiro, respeitados e desejados pelo mercado internacional. Uma boa prova desta realidade é o surgimento da Gringo. “Tudo começou a pouco mais de um ano atrás, quando liguei para Fernanda de Jesus, minha amiga de infância, e perguntei se ela largaria tudo para abrir uma agência com uma proposta totalmente nova no Brasil. E ela topou”, conta André Matarazzo, sócio da agência.

Mas qual seria este novo conceito que eles prometem firmar no mercado brasileiro?

“Tentamos mostrar algo bem impactante com cada projeto novo e, de preferência, algo que ainda não está acontecendo no país. Seja uma campanha hilária para um cliente brasileiro ou minisites altamente bem produzidos para o mercado externo.

A palavra ‘gringo’ vem da nossa dedicação ao trabalho, ao processo criativo e de desenvolvimento, que é meticuloso, e ao fato de tentarmos sempre manter um knowhow paralelo às melhores agências mundiais”.

Localizada no Brasil, mais precisamente em São Paulo, a agência possui muitos clientes estrangeiros. Apesar disso, a identidade da Gringo não deixa de sofrer influências do design praticado no país. “Não acho que seja algo classicamente definido como ‘brasileiro’, mas certas idéias que aplicamos são um pouco mais ousadas, um pouco mais ‘latinas’, talvez. As soluções visuais são um pouco mais ricas em conteúdo e cores. Acho difícil definir o que seria o ‘design brasileiro’. Para mim, ele está muito ligado à riqueza de detalhes, formas e cores”, argumenta.

Sobre as características envolvendo o processo criativo da Gringo, André afirma que o segredo não está presente em uma determinada fórmula, mas na pluralidade presente em cada um de seus profissionais. “Tem gente que traz idéias brilhantes de jogos de videogame para novas interfaces; que se inspira lendo anuários de propaganda e comprando revistas especializadas; que fotografa como hobby... Essa história de que sair para longe do computador é altamente inspirador não funciona para todos. Aliás, acho o mundo on-line uma fonte inspiradora sem fim”.

portfólio agência - Gringo :: 13

- Africa Auditorium

- Absolut Ruby Red

Tecnologias utilizadas: Flash integrado com banco de dados

Tecnologias utilizadas: 3D + Composi-

parrudo (principalmente para todas as gravações de áudio)

ção de áudio + Flash + Vídeo

www.africaauditorium.com.br

www.absolut.com/rubyred e www.absolut.com/revelation

O bom relacionamento com a agência de publicidade Africa representa projetos para lá de interessantes para a Gringo.

Dentre eles, destaque para o Africa Auditorium. “A Suzana Apelbaum, que é ultracriativa, nos convidou para uma reunião, colocou a sua idéia na nossa frente e perguntou: O que vocês acham? Dá para fazer? Pegamos aquela idéia inicial e ligamos todos os pontos que estavam desconectados e fizemos funcionar - e bem”, conta André.

Segundo ele, um dos principais desafios era fazer um site que não tivesse cara de site. “Não tem um logo sempre presente, não tem interface quando não estivéssemos que selecionar nada. Enfim, tentamos chegar próximos (dentro do possível) de uma experiência real de ir a uma sala de cinema, o escurinho, as fontes projetadas na tela, os brilhos...”, explica.

Apesar da aparente simplicidade na navegação e na interface, a estrutura do site é bem complexa. “Como tivemos um tempo não muito folgado para trabalhar, nosso flash developer quase teve um enfarte prevendo todas as possíveis combinações de interação que nós não conseguimos prever, à medida que o site foi sendo construído. Esses sites pequenos tendem a ser razoavelmente flexíveis na arquitetura. Às vezes, criamos algo e percebemos depois que está numa fase de protótipo, que seria melhor fazer assim e não assado - para que a usabilidade fique melhor”.

A conquista desta conta é um bom exemplo de como as agências interativas estão preparadas para desenvolverem grandes campanhas. “Houve uma concorrência entre algumas agências em São Paulo. Entramos na jogada com baixas expectativas, porque estávamos concorrendo com as grandes agências, que possuem todos os recursos que um cliente desse porte precisa. O incrível foi que a Absolut adorou nosso approach de marketing interativo, nossa qualidade de produção e nosso espírito aventureiro”.

Outra curiosidade deste projeto é que o trabalho tomou boa parte das férias dos profissionais da agência. “Todo o projeto de lançamento dos sites e mídia de Ruby Red começou enquanto estávamos de férias coletivas. Elas já estavam marcadas e acabamos todos trabalhando em diferentes graus de um ponto outro que não São Paulo para montar a estratégia e apresentar remotamente para o cliente na Suécia”.

Em termos de criação, a orientação era trabalhar em cima de uma base já definida pela campanha mundial. “Ela está presente no site ‘Absolut Ruby Red, The Musical’. O ponto de partida era muito forte e diferente, por isso foi um prazer estender essa solução à nova campanha brasileira do produto”.

14 :: portfólio agência - Gringo

- Middle Finger Pub

- HP Christmas Card

Tecnologias utilizadas: Flash + Fotografias + Vídeo digital +

Tecnologias utilizadas: 3D + Banco de dados bem complexo para

Sonorização

amarrar a função de desenho, envio e visualização de novas ima-

www.gringo.nu/mfp

gens (a cadeia de flocos de neve que trafega pela web...) + Flash www.gringo.nu/projects/hp

A primeira “cara” on-line da agência já revelava a explosão de criatividade que eles pretendiam vender ao mercado.

Engana-se quem pensa que todo despojamento no pro-

“Resolvemos dar a nossa conta para a Gringo, porque ouvimos

cesso criativo da agência possa desvirtuar a importância de

falar que eles eram muito bons”, brinca André. Já a produção

um desenvolvimento focado no perfil do público-alvo de um

é um exemplo de como o processo criativo em trabalhos inte-

site. Como exemplo, podemos citar a campanha de Natal

rativos também busca referências no mundo off-line. “Todos

criada para a Hewlett-Packard, feita em conjunto com a Unit9

os atores eram da Gringo ou amigos pessoais que curtiram a

(www.unit9.com), de Londres (Inglaterra), e a Goodby (www.

idéia e resolveram ajudar de graça. Filmamos tudo numa tarde

goodbysilverstein.com), de São Francisco (EUA).

na casa da Fernanda (sócia da Gringo), numa sala minúscula,

“Esse era um cartão que iria cair nas mãos de basicamen-

variando os ângulos para dar a impressão de que poderia ser

te qualquer pessoa, com muita ou quase nenhuma experiência

de fato um pub em algum lugar”.

de web. Se quiséssemos que ele tivesse sucesso, precisávamos

Mas afinal, qual seria o conceito do site? “Queríamos pas-

criar uma interface simples e muito bem explicada. Desta vez,

sar uma idéia dessa galera estar reunida num pub, bêbados,

deixamos a exploração mais aberta de lado e direcionamos

lascando o pau no chefe. O ambiente aqui estava mais surreal

mais as ações, colocamos legenda em tudo, todos as funções

- ele tentava mostrar a idéia de pub sem precisar ser muito

foram exaustivamente bem explicadas”, revela André.

explícito. Por isso, temos um pouco de tipografia que lembra

Porém, nada disso foi obstáculo para que a bagagem cria-

néons coloridos de bares e tal. Como é razoavelmente comum

tiva da Gringo imprimisse uma boa identidade ao projeto. “Está-

em nossos sites, gostamos de uma interface mais limpa: os

vamos desenvolvendo um cartão de Natal virtual, onde usuários

personagens entram um por vez e não existe nada na tela que

adicionavam seus flocos de neve coloridos ao cartão que recebe-

seja supérfluo, para que o foco não se perca”.

ram e o passavam adiante. Como esse produto foi encarado como

Falando em foco, este foi o principal fator na hora de se

uma edição limitada de Natal, pudemos ousar mais com design,

definir os parâmetros de usabilidade e arquitetura da informa-

sem seguir a fio a identidade corporativa da HP. É importante

ção do site. “Nosso target era a galera que tem alguma ligação

que o cliente entenda que cada minisite passa uma mensagem,

com propaganda, web. Essas pessoas estão costumadas a na-

um tom, uma brincadeira diferente. Essa brincadeira não precisa

vegar freqüentemente, por isso nem tudo precisa ser minucio-

estar fortemente atrelada à comunicação visual da marca. Aliás,

samente detalhado. Alguns elementos só serão descortinados

só assim a brincadeira parece real. Natal, neve caindo, movimen-

se houver curiosidade em buscar algo novo”.

tos suaves, efeitos de gelo, delicadeza na palheta de cores, céu limpo, estrelas... O espírito de Natal clássico está estampado na direção de arte em todos os sentidos”.

portfólio agência - Gringo:: 15

- Acura MDX Tecnologias utilizadas: 3D aplicado em cima de modelos fotográficos + Composição de áudio + Flash + Fotografia www.acura.ca/mdx

A idéia deste projeto era valorizar o desejo tecnológico, que é o grande diferencial deste carro, acima da performance e do espaço. “Fizemos um site baseado numa idéia de tecnologia um pouco orgânica, mágica, sem descambar para o geek.

Por isso, você vê a escolha de tons claros, metais, espaços em branco, cores básicas. Queríamos mostrar uma tecnologia humanizada, aplicada”.

Definido o conceito, as etapas de desenvolvimento foram feitas em parceria com a agência canadense Grip Limited (www. griplimited.com). “Desenvolvemos o grid do projeto em alguns dias junto da Grip. Ajudamos a encontrar uma solução conceitual e a partir daí trabalhamos juntos para que as informações do produto entrassem nas seções corretas, na sua devida hora.

O site é bem básico - não tem muito onde clicar, a não ser em alguns botões bem nítidos. Uma vez nesse estágio, abrem-se subseções. Gostamos de criar sites que contam alguma história, que levam o usuário ao caminho mais provável. Por isso, o conteúdo tão grande que é desvendado aos poucos”.

Para quem tem dúvidas se é possível criar um bom relacionamento com parceiros no exterior, André destaca que este projeto correu de forma suave. “Foi interessante que fizemos um storyboard bem completo em 3D de como queríamos o carro fotografado e enviamos ao Canadá. No dia seguinte, eles já estavam com o carro no estúdio, fotografando de acordo com nossa direção, e acabaram enviando um vídeo de bastidores para que pudéssemos acompanhar a complicação que era fotografar esse carrão”.

Assine a revista e ganhe a coleção completa!

Assine já e receba: 12 edições impressas + 3 cds com as edições de 2004, 2005 e 2006.

Esta promoção também é válida para renovação de assinatura!

Renove agora por apenas 3 x 33,00 no cartão de crédito ou 2 x 49,50 através de boleto bancário!

www.revistawebdesign.com.br

18 :: portfólio freelancer - Fabrício Lima

FABRÍCIO LIMA Contato: info@designattack.com Site: www.designattack.com

O movimento como inspiração no design Caindo de pára-quedas. Assim Fabrício Lima descreve sua primeira oportunidade de trabalhar com internet. “Tudo aconteceu no meio da grande explosão de web que surgiu em 2000. Para se ter uma idéia de qual altura eu caí, fazia eletrônica em um colégio de ensino técnico em Barueri. Estava cursando o último ano, quando recebi um e-mail com uma oferta de trabalho: era para trabalhar no iG, que acabara de nascer na mesma época junto com outras várias empresas.

Antes disso, havia feito alguns sites fictícios e gostava muito de visualizar algumas imagens na web”.

Vídeo feito para o lançamento do console Playstation 3 - “This is Living” (http://tinyurl.com/2oqqlh)

pensei duas vezes, juntei minhas coisas e embarquei”.

O ímpeto de sua trajetória transparece quando ele fala dos aspectos que marcam sua identidade profissional.

Apesar da instabilidade ocorrida na área, período co-

“Não consigo definir em apenas algum elemento. Estive

nhecido como a grande bolha, ele conseguiu se manter fir-

mudando muitos aspectos, justamente para não viciar em

me no mercado, desenvolvendo um dos diferenciais em seu

apenas alguma forma de expressão, já que isso limita e

currículo, que é a especialização na área de motion design.

muito o trabalho com novos clientes. Com relação à inspi-

“Sentia uma grande limitação dentro do Flash, quando tenta-

ração, creio que o design oriental sempre me chamou mui-

va criar animações para web. Ele sempre pedia mais proces-

ta atenção: a combinação do extremo azul com um forte

samento das máquinas e não rodava as animações do jeito

vermelho eles tiram de letra para fazê-lo e tento sempre

que eu queria. Então, comecei a experimentar novas ferra-

buscar isso nas minhas combinações”.

mentas, entre elas, o After Effects. Enquanto trabalhava em

Como dica para quem pretende incrementar seu portfó-

uma agência web, resolvi produzir alguns vídeos para alguns

lio, Fabrício diz que tal busca certamente vai passar pela des-

clientes. Fiquei muito satisfeito com o resultado. Descobri

coberta dos seus pontos fortes. “Isso dá para sacar quando

que queria embarcar neste mercado e acabei produzindo

você está em um ambiente de trabalho. Uma pessoa ou outra

vídeos comerciais logo depois”, revela.

vai comentar que gostou muito de determinada parte de seu

Os limites de seu vôo parecem não ter fim. Hoje, Fabrício

trabalho. Preste bem atenção nisso e procure criar um leque

é mais um dos talentos brasileiros atuando no mercado euro-

de possibilidades para aprimorar essas características. Outra

peu. “Mantinha contato com um amigo na Dinamarca sobre a

dica é tentar achar inspiração para a mídia em que trabalha

nossa profissão. Assim, comentava com ele sobre o mercado

fora dela. Exemplo é que, ao invés de procurar em sites de

de trabalho em São Paulo e recebia notícias de como estava

referências, exemplos de site a produzir, busque em algum

o mercado na Dinamarca. Nisso, ele me mostrou uma nova

projeto de arquitetura alguma idéia: chão, flores etc. Geral-

agência que havia inaugurado, ano passado, na cidade de

mente, as melhores idéias de design vêm de coisas inusitadas.

Århus. Não hesitei e resolvi mandar um e-mail com algumas

O Opera House (www.sydneyoperahouse.com), por exemplo,

sugestões para a agência sobre alguns dos vídeos que eles

foi inspirado em uma casca de laranja: o criador, Jørn Utzon,

haviam produzido. Eles gostaram das dicas, me falaram que já

que, por coincidência, é dinamarquês, teve a idéia do telhado

haviam visitado o meu site e fizeram a proposta. No momento,

ao descascar e retirar uns pedaços; sacou que dali poderia ter

estava trabalhando em um canal de TV, em São Paulo, mas não

o topo do edifício”.

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

20 :: portfólio ilustração - Eduardo Recife

EDUARDO RECIFE www.misprintedtype.com

Wd :: Como define seu estilo e onde você b u s c a a s re f e r ê n c i a s p a r a o s e u t r a b a l h o ?

S t i l l s p a r a v i n h e t a d o p ro g r a m a “ A s s u m e t h e P o s i t i o n ” ( 2 0 0 6 ) Cliente: HBO Material utilizado: “Colagem digital (Photoshop + Illustrator)”

E d u a rd o : : Não me importo tanto em definir o estilo que trabalho. Procuro não me limitar a certos tipos de rótulos. Mas as referências vêm de toda parte, da vida, da rua, de outros ilustradores, designers, artistas, revistas antigas, fotografias... Tudo é fonte de referências e inspirações.

Everyday (2007) C l i e n t e : P ro j e t o P e s s o a l Materiais utilizados: “Colagem digital + desenho à lápis (Photoshop)”

Estampa para camiseta (2006) Cliente: Panic! At the Disco Material utilizado: “Colagem digital (Photoshop)”

22 :: entrevista - síntese visual no design para web

O equilíbrio entre excesso e redução: a síntese visual no design para w eb

entrevista - síntese visual no design para web :: 23

Você pode contar com os melhores softwares do mercado e ter a disposição uma invejável infra-estrutura tecnológica para funcionamento de seu site.

Wd :: No texto “Princípios de Design” (http://tinyurl.com/

Porém, nada disso serve de garantia que

qbxus), a professora Isabela Lara Oliveira diz que “...o designer

o processo de leitura visual de seu pú-

deve usar cuidadosamente a colocação dos elementos para dirigir

blico-alvo seja aquele que você pretende

o olhar do leitor através da peça”. Assim, na concepção de um

transmitir com o seu projeto.

Nesta caminhada, será preciso trabalhar de forma minuciosa a aplicação dos conceitos de síntese visual, de maneira que a interface reflita o correto equilíbrio entre o excesso e a redução na arrumação dos elementos (forma e conteúdo) ali presentes.

“Síntese visual não é enigma a ser

projeto gráfico, quais elementos vão determinar a constituição da linguagem visual de um layout?

Evelyn :: Uma questão que se coloca hoje é a polarização entre a regra básica fundamentada na hierarquia das informações e outra forma na comunicação que se dá pela multiplicidade e simultaneidade.

Ao designer, enquanto intermediário nesta cadeia, cabe a decisão de determinar de que forma e com quais artifícios seu projeto atingirá os objetivos: ao leitor que busca um “zapping” visual, a questão da hierarquia não se coloca; àquele que busca uma verticalização da informação, a ordenação deste conteúdo se faz necessária.

decifrado. Síntese é eliminar aquilo que

Citando Wolfgang Weingart, no seu livro “Como se pode fazer

possa confundir o bom andamento da

tipografia suíça?” (Editora Rosari - Coleção “Qual é o seu tipo?”), a

informação”, explica Evelyn Grumach,

questão destas fronteiras já se fazia presente em 1972:

professora de design gráfico na Pontifícia

“Tipografia é transformar um espaço vazio num espaço que não

Universidade Católica (PUC-Rio) e sócia

seja mais vazio. Isto é, se você tem uma determinada informação

do eg.design (www.egdesign.com.br).

ou um texto manuscrito e precisa dar-lhe um formato impresso com

Nesta entrevista, a professora vai analisar as principais características e particularidades que envolvem tais parâmetros no design para web. Boa leitura!

uma mensagem clara que possa ser lida sem problemas, isto é ti-

24 :: entrevista - síntese visual no design para web

pografia. Mas esta definição tem o defeito de ser muito

cada vez mais semelhante ao agir natural do homem”.

curta. Tipografia pode ser também algo que não precisa

Pensando nisso, quais são os fatores que influenciam na

ser lido. Se você gosta de transformar partes dessa infor-

percepção visual de um projeto gráfico?

mação em algo mais interessante, pode fazer algo ilegível, para que o leitor descubra a resposta.”

Evelyn :: A relação entre artes visuais e design são intensas desde sempre. Do art nouveau à Bauhaus; do

Wd :: A interação homem-computador é uma das

Construtivismo à desconstrução; da Pop ao grafite, todas

questões fundamentais para entendermos o processo de

as questões conceituais e formais propostas refletiram e

percepção visual. Na edição de outubro de 2006, quando

se refletem sobre nós, incorporando e transformando as

analisamos as relações entre design e arte, Ronaldo Gazel

manifestações visuais delas decorrentes.

ressaltava que “...é louvável buscarmos referências nos

No entanto, a percepção visual não é suficiente para

movimentos artísticos para criarmos interfaces um pouco

humanizar a relação homem-máquina. A tecnologia em si

mais humanas, que tornem o ato de interagir um processo

precisa considerar o usuário propondo sistemas lógicos, construtivos e amigáveis cuja materialização será dada então pela aplicação de códigos visuais.

Wd :: Em entrevista para o caderno de informática do jornal O Globo (http://tinyurl.com/238yvn), Jakob Nielsen, considerado um dos “gurus” da usabilidade na web, citou os sites da Amazon, Google e Yahoo! como os “websites mais bem desenhados na internet”. Segundo o especialista, o ponto comum entre eles seria “...a capacidade de tirar o design do caminho na hora em que os usuários querem chegar a esse conteúdo e a essas soluções”. Na sua opinião, qual seria a melhor definição para o conceito de síntese visual aplicada ao design?

Evelyn :: Creio que esta afirmativa carece de clareza e objetividade: os sites citados são o que são, por conta do design. A ausência referida, na verdade, é a ausência de um design que privilegia a expressão em detrimento das necessidades de comunicação e informação.

O domínio do designer é o domínio das interfaces, lembrando a citação de Gui

entrevista - síntese visual no design para web :: 25

Bonsiepe, no livro “Design do material ao digital” (Fiesc/SebraeSC): “O design é o domínio no qual se estrutura a interação entre usuário e produto, para facilitar ações efetivas”.

O conceito de síntese visual como a forma sintética, econômica e universal aplicada a uma informação, serviço ou ação, e que pudesse alcançar um número significativo de pessoas ou usuários, está sendo revisado e, por isso, ainda confundido.

No mundo da pós-modernidade, mais fragmentado, mais customizado, as informações ou as necessidades são específicas, particulares e buscam igualmente alcançar seus objetivos. A ausência de expressão como canal de personalização de um projeto é uma escolha tão válida quanto à expressividade.

Wd :: No processo de constituição de uma linguagem visual limpa, quais parâmetros devem ser utilizados para se alcançar a síntese visual em um projeto gráfico?

Evelyn :: Em primeiro lugar, conhecer o conteúdo a ser trabalhado e assim detectar e ordenar a hierarquia das informações a serem dispostas (qual a natureza dos textos, das imagens, do discurso visual).

Em seguida, minimizar o uso de elementos gráficos, renunciando ao prolixo, ao múltiplo, ao excesso; tornar a escolha gráfica o motivo, a idéia central do projeto e com isso, valorizá-la. Além disso, priorizar a legibilidade e prestar muita atenção às escolhas das fontes.

Wd :: Na edição de novembro de 2006, ao abordar os conceitos fundamentais do design, o professor João Leite apontava que “...o ambiente do hipermídia é uma novidade por nós ainda explorada como se fosse papel. Como se fosse uma superfície plana sobre a qual se dispõe a informação, sem considerar que este ambiente, por exemplo, acaba com a perspectiva renascentista. A lógica, por exemplo, pode ser das superposições.

Dos planos que se encobrem e por vezes permitem transparências”.

Dessa forma, quais seriam as

26 :: entrevista - síntese visual no design para web

“Síntese éelim inaraquilo que possa confundiro bom andam ento da inform ação” principais diferenças na aplicação dos conceitos de síntese visual em projetos impressos e digitais?

Quais são os limites para se aplicar tais conceitos?

Evelyn :: É imprescindível que saibamos sobre o que

Evelyn :: Ainda elaboramos o pensamento na su-

e para quem estamos projetando. A natureza do conteúdo

perfície do plano. A tela do computador é ainda uma

e do público/usuário pode levar a soluções específicas e

representação planar de um mundo virtual complexo,

próprias ao assunto em questão.

concebido para representar um universo de recursos ainda indefinidos.

É função do site ser autoexplicativo, ser “transparente”, ser navegável, procurar objetividade. Isto se

De uma certa maneira, em um primeiro estágio, o

aplica tanto para os sites de entretenimento como para

ambiente virtual age (guardadas as devidas proporções)

os de buscas, para as pesquisas e tudo o que até hoje se

como as nossas antigas enciclopédias, transformando-

dispõe pela rede.

se em locais de arquivamento, reprodução e divulgação

A redução exagerada, assim como os excessos, são

do conhecimento adquirido. E, para tal, a estrutura da

muitas vezes resultado de estilos submetidos a padrões

informação, na forma que conhecemos, é aplicada com

dependentes da moda e do efêmero, em claro descompro-

resultados imediatos, pois reconhecemos facilmente o que

misso entre conteúdo e forma.

nos está apresentado.

Em outra mão, ocorrem as novas informações e repre-

Wd :: Como a usabilidade deve ser inserida dentro do processo de síntese visual em um projeto gráfico?

sentações nascidas desta nova tecnologia, os jogos com

Evelyn :: O conceito de usabilidade é a alma do site.

sua estética própria, e as experiências levadas a cabo no

Em se tratando de uma mídia não passiva, a interatividade

Media Lab (www.media.mit.edu), do Massachusetts Insti-

é fundamental. A idéia de síntese não se afasta da ne-

tute of Technology (MIT), por exemplo.

cessidade de demonstrar o uso das informações, que,

A estas novidades espera-se que, acompanhadas

por sua vez, são apresentadas graficamente: ora por

de novas linguagens, tragam novos paradigmas, trans-

textos, ora por imagens, ora por ícones. Síntese

pondo do mundo virtual para o mundo dito concreto

visual não é enigma a ser decifrado. Síntese é

estas novas representações.

eliminar aquilo que possa confundir o bom

Wd :: No processo de reformulação gráfica do blog Usabilidoido (http://tinyurl.com/yv2ks2), Frederick van

andamento da informação.

Wd :: Um dos aspectos que

Amstel revelava sua admiração pelo design minimalista.

causam uma certa confusão na área

No entanto, ele citou um ponto importante, que envolve

é o conceito de funcionalidade

a redução exagerada dos elementos de uma interface.

na concepção de um projeto

entrevista - síntese visual no design para web :: 27

gráfico. Segundo o professor Rafael Cardoso, “...a idéia que as pessoas costumam fazer de funcionalidade é inteiramente equivocada. ‘Função’ não existe, pelo menos no sentido funcionalista, com F maiúsculo. ‘Função’ como contraposição à ‘Estética’ é um desastre conceitual, que só tem prejudicado o design”. Quais são os erros mais comuns na aplicação dos conceitos de síntese visual na criação de um layout?

Evelyn :: A função, tratada como verdade absoluta, como cerne central do projeto, tende a homogeneizar as expressões estéticas e particulares do grupo para qual se destina.

Na mão oposta, muitas vezes, os layouts podem resultar em manifestações muito individualizadas do designer, que sente uma necessidade de personalizar seus projetos e pode apresentar um excesso de esteticização que vai se sobrepor às necessidades objetivas do layout.

Estar refém dos padrões estéticos vigentes, associado a poucos critérios na seleção dos recursos gráficos adotados, pode tornar o projeto em uma espécie de catálogo de recursos potenciais e conseqüentemente não adequados, desligados de sua realidade.

“ A ausência de expressão com o canalde personaliz ação de um proj eto éum a escolh a tão vá lida quanto à expressividade”

28 :: entrevista - síntese visual no design para web

Exemplos na aplicação dos conceitos de síntese visual - Emigre www.emigre.com “Informações bem ordenadas, valorização das imagens (ótimo tamanho) e boa navegação, além de ser graficamente bonito.” (Evelyn Grumach)

- ReBrand www.rebrand.com “Um site claro, arejado, que contém muita informação e muitos textos.”

(Evelyn Grumach)

- iStockphoto www.istockphoto.com “Um site carregado de imagens, bem classificado e ordenado para que se encontre, dentro de um oceano de imagens, o que se está buscando.”

(Evelyn Grumach)

Bibliografia recom endada

- “Como se pode fazer - “Pensar com tipos”

tipografia suíça?”

Autora: Ellen Lupton

Autor: Wolfang Weingart

Editora: Cosac-Naify

Editora: Rosari

- “Making and breaking

- “Design do material ao

the grid”

digital”

Autor: Timothy Samara

Autor: Gui Bonsiepe

Editora: Rockport

Editora: Fiesc/Sebrae-SC

30 :: aperte o play

Imagine que, em determinados períodos, sua navegação pela internet seja guiada por alguns objetivos. Em um deles, você procura por referências sobre apartamentos e acaba se deparando com um site no qual um apresentador aparece para acompanhá-lo em sua visita on-line pelo empreendimento. Ou ainda, na época de festas de final de ano, ao buscar informações sobre guloseimas natalinas, acaba se deparando com um Papai Noel on-line, que interage com você.

As passagens acima são alguns dos exemplos já produzidos por agências brasileiras. No caso, estamos falando do Parigi Residence Service (www.parigi.com.br), desenvolvido pela gaúcha Rage (www.rage.com.br), e do Natal da Bauducco (http://tinyurl. com/2ekquo), criado pela F/Nazca (www.fnazca.com.br), em parceria com o Grupo Academia (www.academia.nu). Na prática, estes projetos apresentam as recentes transformações na criação e no desenvolvimento de projetos digitais.

O que se percebe é que o foco está na exploração do conceito de interatividade que torne o período de experiência do usuário cada vez mais atrativo. Assim, nesta reportagem, vamos abordar como os profissionais devem se preparar para trabalhar com o motion design, e as particularidades envolvidas na concepção de um layout em movimento.

aperte o play :: 31

“Exercitar exaustivamente vai te ajudar a construir o raciocínio de desenhar já pensando na animação” (Márcio Bomfim) Trabalhando com elementos em movimento

do princípio que aquela arte terá apenas um passo. O

Para quem quer se aventurar na criação de

começo, o meio e o fim daquele layout estão encerra-

projetos que envolvam o uso de elementos em movi-

dos dentro daquele quadro. Assim, cada detalhe deve

mento, certamente a caminhada vai representar novos

ser pensado e repensado para que haja harmonia e

desafios profissionais. “O designer que está vindo de

coerência nesse contexto. Já em movimento, é preciso

outro universo, como impresso ou web, vai precisar

pensar em todo o caminho até se chegar no design

entender que é basicamente um novo começo e uma

final. O começo, meio e fim estão dispersos numa

nova disciplina. Claro que o básico da comunicação

linha do tempo e, por isso, é preciso ter um roteiro

gráfica se aplica e que o importante é passar sua men-

na cabeça, indicado como será o quadro a seguir e o

sagem, mas é preciso pensar em uma nova dimensão:

outro e o outro. Só assim, é possível que o layout seja

o tempo. E aprender a lidar com timing. Diria que é

coerente do início ao fim”, afirma Alon Sochaczewski,

o ponto-chave para começar a caminhar na direção

sócio-diretor de criação da Sinc (www.sinc.us).

de um trabalho relevante”, destaca Pablo Marques, diretor de criação na R/GA (www.rga.com).

Particularidades na escolha de cores e tipografia Recentemente, dois projetos digitais chama-

Falando no tempo, esta parece ser uma das

ram a atenção dos profissionais do mercado web,

principais características quando falamos da concep-

devido à eficácia no uso da tipografia em movimen-

ção de projetos de motion design. “Trabalhar com

to. Estamos falando do trabalho em cima de uma

elementos em movimento significa ter um novo pilar

passagem do filme Pulp Fiction (www.nahipermidia.

na hora de se conceitualizar um projeto de design:

com.br/blog/?p=92) e da série “Typographic Illus-

tempo. Movimento, por definição, é uma mudança

tration” (www.ni9e.com/typo_illus.php e www.ni9e.

de posição de um corpo em um determinado espaço

com/typo_illus_ii.php).

de tempo. Apesar disso soar um tanto óbvio, não é

Pensando nisso, no momento de se definir qual

incomum motion designers que não levam em conta

será a tipografia a ser utilizada em um vídeo, novamen-

a importância do ritmo em seus trabalhos”, ressalta

te o fator tempo deve ser levado em consideração.

Carlos Bêla, diretor e motion designer do estúdio de

“Acredito que os fatores para escolha sejam os mes-

design e animação Lobo (www.lobo.cx).

mos de qualquer aplicação de design: comunicação

Outra característica importante, também ligada

visual. O que importa é a mensagem que você quer

ao ritmo do projeto, é o storytelling, ou seja, a história

passar no seu projeto e isso independe do suporte.

que o vídeo conta, seja ela abstrata ou não. “Uma peça

Temos apenas que ser mais atentos a um fator extra

de design em movimento precisa ser interessante ao

que é a duração. Ao contrário de um impresso, no

longo de toda sua duração. Num design estático, algu-

qual a duração da leitura é decidida pelo receptor

mas poucas imagens podem ser suficientes para expri-

da mensagem, o motion designer - na web, TV ou

mir uma idéia ou um conceito e envolver o interlocutor

cinema - precisa dar ao espectador tempo suficiente

de maneira satisfatória. Já no design em movimento,

para compreensão e leitura da informação, seja ela

você precisa segurar a atenção do espectador a 30

tipográfica ou não”, analisa Carlos.

quadros por segundo”, diz.

Além disso, os aspectos técnicos também vão

Assim, o profissional deve prestar muita atenção

exercer influência neste processo. “Por exemplo, se

na maneira como vai definir o começo, o meio e o fim de

a fonte vai aumentar muito o peso (em kbytes) do

seu projeto. “Quando você cria algo estático, partimos

layout, o que acontece quando usamos uma tipografia

32 :: aperte o play

“Não basta animar, é preciso se colocar no papel de quem vai assistir à animação ou filme, ler, testar e fazer ajustes quantas vezes forem necessárias” (Alon Sochaczewski) com muitos detalhes. Além disso, é preciso observar a qualida-

tema específico do projeto. Cabe ao designer segui-las ou não,

de da leitura, que pode ser prejudicada pelo tamanho da fonte,

pois o motion designer possui a liberdade para utilizar diversos

sua forma e ainda por um fator que muita gente não se dá conta:

takes com combinações cromáticas diferentes, sem que fuja de

o tempo de leitura. Não basta animar, é preciso se colocar no

um padrão visual estabelecido”, destaca Caio Sartori, diretor de

papel de quem vai assistir à animação ou filme, ler, testar e fazer

arte web do Grupo Academia (www.academia.nu).

ajustes quantas vezes forem necessárias”, alerta Alon.

Sem falar que, assim como acontece na etapa de seleção

“No design para web, temos limitações para o uso de

tipográfica, os fatores técnicos também devem ser levados em

certas tipografias, por conta de legibilidade. Em vídeo para

consideração. “Algumas cores deixam o vídeo um pouco mais

web também temos limitações por conta das necessidades de

pesado (em kbytes). Na hora de usarmos algum compressor,

compressão e formatos. Normalmente, fontes serifadas e com

elas são as que mais sofrem e as primeiras a terem a qualidade

contornos muito delicados tendem a ser ‘destruídas” na com-

prejudicada. É o caso do vermelho, por exemplo”, diz Alon.

pressão. Porém, conforme os codecs de compressão de vídeos

A boa notícia é que tal processo segue a mesma lógica uti-

evoluem, possibilitam arquivos menores e com boa qualidade. O

lizada na criação de uma interface de um site. “Ao trabalhar com

codec H.264 é um bom exemplo”, completa Jonas Kühner (www.

vídeo para TV, aprendemos que, por motivos técnicos, alguns tons

criatipos.com), diretor de arte eletrônica da DM9DDB RJ.

não são seguros e podem influenciar negativamente no resultado

Outro ponto importante na criação do layout de um

final da exibição (broadcast). Na web, isso não acontece - pelo

vídeo na web envolve a combinação cromática dos cenários.

menos não dessa maneira direta. É necessário, porém, bom senso:

“Entramos em outro ponto comum a todas as áreas do design,

como podem existir diferenças significativas entre monitores que

em que o importante é perceber que o motion designer é um

verão aquela peça, um cuidado deve ser redobrado em relação

designer por ‘formação’. A migração para o vídeo proporcio-

à escolha de paletas sem muito contraste ou com cores muito

na mais liberdade cromática sim, já que estamos falando de

próximas uma das outras (a não ser que essa seja sua intenção)

trabalhar em RGB, ao invés de CMYK, como no impresso. No

etc. Ou seja, não difere muito ou nada dos cuidados ao se fazer

entanto, as combinações cromáticas são utilizadas de acordo

um layout de uma página na web”, cita Carlos.

com o estilo do trabalho e do designer. Posso citar milhares de

Do estático ao movimento: a concepção de um layout

exemplos, mas vejamos o trabalho do Nando Costa (www.nan-

No desenvolvimento de um vídeo, geralmente o profis-

docosta.com). Ele se utiliza de combinações cromáticas pouco

sional parte de um plano estático, onde vai esquematizar quais

prováveis, porém obtém resultados fantásticos. Acredito que a

e de que forma os elementos em movimento vão compor o

utilização das cores no motion é um dos grandes diferenciais de

layout do vídeo. “Está aí o grande desafio. Como conseguir

um trabalho e é uma peculiaridade de cada designer”, aponta o

visualizar a animação através de uma tela de Photoshop, por

diretor de arte e ilustrador Renan Molin (www.dmolin.com).

exemplo? Uma maneira de amenizar isso é organizar suas idéias

Uma dica é utilizar os conceitos fundamentais que regem

em rascunhos e os arquivos PSD em pastas com os quadros

a criação de uma paleta de cores de uma peça gráfica. “Teoria

principais. Sim, os rascunhos são ferramentas fundamentais

da cor é um conhecimento básico. Mas é sempre bom ficar

para as transições e seqüência de quadros. Exercitar exausti-

muito atento a fatores como contraste, profundidade, perfis

vamente vai te ajudar a construir esse raciocínio de desenhar

de cores etc. Não é muito legal ver aquele verde lindo no seu

já pensando na animação”, comenta o designer Márcio Bomfim

computador ficar ‘marrom’ no monitor dos outros”, lembra

(www.marciobomfim.com), da Globo.com.

Marck Al, sócio da Nitrocorpz (www.nitrocorpz.com). “É impor-

Dessa forma, a prática acaba se tornando a melhor ferra-

tante unir o bom gosto, cores referências do cliente ou de um

menta para o profissional superar qualquer obstáculo. “Quando

aperte o play :: 33

se trabalha constantemente com imagens em movimento, você acaba treinando seu pensamento para tal. As idéias já passam a surgir com movimento. Assim como na concepção de uma história de um filme, por exemplo, ao desenvolver algo em movimento,

“Não recomende vídeo. Recomende, contexto, estratégia, coerência e viabilidade financeira” (Pablo Marques)

já sabemos quais são os objetivos da história, seus pontos importantes e suas preocupações conceituais. Se você quer contar uma história de uma vaca que pula de um prédio para outro, o movimento já está incluído na sua concepção inicial. Não acredito, portanto, que a concepção seja inicialmente estática. Penso que a idéia já é pensada e criada em movimento, em nossas cabeças, e apenas representadas no papel de maneira estática para fácil compreensão e consulta”, detalha Carlos.

Um aspecto interessante nesta etapa é que, quanto mais estudos forem feitos, melhores serão os resultados finais do projeto. “Por mais que a concepção inicial não seja ‘animada’, é preciso pensar nela em movimento. O fato de se roteirizar no papel, por exemplo, não deixa a peça estática, pelo contrário: faz com que consigamos estudar e prever todos os detalhes que deverão ser animados. Quando trabalhamos com vídeo, devemos estudar todos os caminhos e possibilidades antes de sair filmando. Isso vale, principalmente, para vídeos interativos não lineares, que não necessariamente tem um ‘começo, meio e fim’. Eles podem ter várias partes distintas que se montam e se encaixam de maneiras diferentes, dependendo da navegação do usuário”, explica Alon.

Muda alguma coisa na produção?

Na edição de setembro de 2006, apresentamos um estudo de caso do site do projeto Samambaia (www.samambaia.com. br), que se destaca pelo uso criativo de um vídeo que apresenta um vendedor que expõe as camisas numa banca, conforme o usuário vai escolhendo os modelos de estampa.

Um dos criadores do site, Pedro Garcia, revelava que a pré-produção envolveu a filmagem de um “feirante trocando as camisetas (que é a parte central do site) e, com fotos do cenário, construímos o resto em volta dele. Todos os outros elementos foram ‘ilustrados’ no Photoshop”. Assim, é possível apontar alguma diferença no processo de produção utilizado em outros meios?

“A produção de um vídeo para web segue muitas técnicas similares às utilizadas em filmagens de filme de ‘efeitos’ (chromakey, ventiladores, água e outros elementos que sejam necessários), sendo que uma filmagem que será usada em um site/vídeo para web tem que ser planejada de forma que o material seja

captado da forma correta para que fique integrado com os outros elementos do site e prevendo todas as possibilidades de interação”, conta Jonas. “O chroma-key, recurso onde atores são filmados em fundo verde ou azul e depois aplicados em outros cenários, são usados em qualquer meio da mesma forma.

No caso da web isso nos ajuda, inclusive, a diminuir o peso dos vídeos, pois o único movimento será do ator enquanto o cenário permanece estático. Outra forma de se trabalhar na web é utilizar algumas partes do layout em vídeos com máscaras, o que também ajuda a diminuir peso”, acrescenta Alon.

Na verdade, as particularidades surgem quando analisamos algumas limitações existentes na web. “Quanto mais definição, frame-rate, tamanho, mais demora ocorrerá no download/streaming do arquivo. É preciso fazer um balanço para que o tempo de espera não seja longo demais a ponto de espantar um visitante mais impaciente e, ao mesmo tempo, que a qualidade seja boa o suficiente para que o vídeo não passe uma impressão de mau acabamento ou ‘tosquice’, fato que pode influenciar, mesmo que subjetivamente, na recepção da mensagem e na impressão do visitante em relação ao produto ou serviço”, alerta Carlos. “Os vídeos produzidos para web têm normalmente o tamanho da tela reduzido e a qualidade da imagem mais baixa, têm mais interatividade com o usuário e linguagem particular da web”, complementa Márcio.

Outra dica é ficar atento ao processo de compressão do arquivo. “Se o vídeo é longo, por exemplo, possivelmente terá que ser comprimido com menor qualidade, o que diminui a quantidade de detalhes. Pensando nisso, o designer deve evitar pequenos ou delicados elementos que poderão não ficar claros após essa compressão. O mesmo raciocínio se aplica à quantidade de frames por segundo de uma animação ou à área que o vídeo ocupará na tela etc.”, orienta Carlos.

Quando recomendar o uso de vídeos Sites como o da agência japonesa amana (http://amana. jp/company/tsutawaru/content.html) reforçam a idéia do uso do vídeo como elemento para instigar o período de experiência do usuário dentro de um site. Conhecer os principais detalhes que envolvem a concepção de um vídeo para web é fundamental,

34 :: aperte o play

“Trata-se da entrada de um novo modelo de interação site/usuário, uma forma de humanizar o relacionamento entre empresa e cliente no ambiente web” (Renan Molin)

empresa e cliente no ambiente web. Deixa-se de lado o modelo básico de transmissão de informação empresa-para-cliente, para atingir-se outro nível de interação, onde o usuário é convidado a participar do espaço que a empresa ocupa na web. O ‘cartão de visitas’ transforma-se em um sofá aconchegante, o que, em termos mercadológicos, traduz-se em fidelização e aumento de vendas, pois o cliente é tratado como parte do negócio, a ponto

mas é preciso saber quando esta tecnologia deve ser inserida de quase transformar determinado site em um divã. A cerveja em um projeto. Afinal, quando recomendá-la?

Primus, para citar um exemplo, propõe um quiz ao usuário, a

“Usamos o site da amana como referência por meses. Ten- fim de testar seus conhecimentos sobre o produto. Quem, nos tamos fazer um projeto para uma cliente de perfil semelhante, dias de hoje, responderia a esse mesmo quiz, se o mesmo fosse que se encantou com a referência de imediato. Após o layout um formulário HTML tradicional”, questiona Renan. aprovado, tivemos de voltar atrás por medo do cliente de ter

Além disso, não podemos nos esquecer que a filosofia

um site rich media. Pensando nisso, diria que talvez você precise

do ‘do it yourself’ (faça você mesmo) se materializa cada vez

achar um cliente com perfil para ter um site desses. Ou isso se mais com o surgimento do movimento web 2.0. Para se ter torna um hotsite”, afirma Andre Passamani, gerente de projetos uma idéia, sites como o jumpcut (www.jumpcut.com) e eyespot e novas mídias do Grupo Academia (www.academia.nu).

(www.eyespot.com) permitem que o próprio usuário crie e edite

Para Pablo Marques, esta resposta se compõe de dois seus vídeos. Em termos de mudanças, este novo cenário pode fatores. “Quando for contextualmente correto e quando houver ser visto como mais uma fonte de inspiração. “Vídeos de autor verba suficiente para produzir algo decente. O ideal agora é são espontâneos e carregam com eles uma forte característica tentar evitar a armadilha da moda. Parte importante do racio- que é a originalidade, onde temos uma imagem bem distinta do cínio criativo é a boa utilização da verba e a contextualização criador e sua personalidade, sem preocupações de usabilidade do seu trabalho. Não recomende vídeo. Recomende, contexto,

e alcance de público”, comenta Ian Sampaio, diretor de arte do

estratégia, coerência e viabilidade financeira. Criatividade é Grupo Academia (www.academia.nu). ser capaz de coordenar todos estes fatores e conceber algo

Ou seja, a idéia é que os profissionais estejam cada vez

interessante e relevante. Quer um exemplo? O site ‘Shave

mais abastecidos de grandes idéias. “Lembra quando o punk

Everywhere’ (www.shaveeverywhere.com), da Philips. Numa rock surgiu e disseram que a música do jeito que conhecíamos conversa com um dos diretores do projeto na DDB de Nova iria acabar, já que qualquer um podia fazer música? Lembra Iorque, ele me disse que o projeto nasceu da idéia de que quando disseram que os sintetizadores iriam acabar com a gui‘teria de ser um approach humorado do produto’. A utilização tarra e outros instrumentos ‘tradicionais’? Que os fanzines iriam de vídeo foi uma conseqüência e uma necessidade na hora de matar as revistas? Que o videocassete iria detonar o cinema ou tornar a idéia realidade”, revela.

que o videoclipe exterminaria as rádios? A filosofia do ‘do it

Vídeos no futuro da web

yourself’ é muito positiva, pois adiciona vida, novas cabeças e

Recentes projetos digitais brasileiros, como o site da

referências ao meio. Novos conceitos podem aparecer dessa

Cerveja Primus (www.cervejaprimus.com.br) e a campanha

filosofia e, eventualmente, novos profissionais. Mas acredito

“Você nasceu para voar - Milão” (www.vocenasceuparavoar.

que haverá sempre espaço para todos. Do punk rock ao eru-

com.br/milao), começaram a utilizar a tecnologia conhecida dito, o que importa são as grandes idéias. Hoje, qualquer um como vídeos interativos, no qual o usuário pode interagir com com computador e software apropriados pode ser um motion a animação apresentada.

designer. Isso não o faz, por si só, um profissional bom e bem

Diante disso, como os vídeos estarão inseridos na evolução pago, assim como para ser um bom webdesigner não basta da web? “Trata-se da entrada de um novo modelo de interação mexer em Flash e HTML”, finaliza Carlos. site/usuário, uma forma de humanizar o relacionamento entre

aperte o play

Exemplos no uso de vĂ­deos na web

36 :: aperte o play

“Os vídeos produzidos para web têm o tamanho da tela reduzido e a qualidade da imagem mais baixa, mais interatividade com o usuário e linguagem particular da web” (Márcio Bomfim) Apostando no futuro da TV na web Bate-papo: Ronaldo Vianna (diretor de arte) e Cuti (produtor musical), criadores do Pump tv (www.pumptv.com.br)

Wd :: Como surgiu a idéia de criar um site voltado para exibição de vídeos na web?

no áudio quanto no vídeo.

Isso, em parte, é o grande diferencial que garante o suces-

Cuti e Ronaldo :: A idéia surgiu após uma palestra da

so do site. No início, usamos o armazenamento de servidores

Macromedia, no 10º Encontro de Webdesign, no Rio de Janeiro,

de amigos para iniciar o projeto e aperfeiçoar ainda mais nosso

onde nos foi mostrada novas tecnologias para web. A partir daí,

site. Porém, como a demanda de conteúdo foi aumentando,

decidimos fazer algo com esta proposta e com isso começamos

vimos a necessidade de ter uma grande estrutura apoiando

a estudar sobre o assunto.

nosso site, devido ao grande armazenamento de arquivos e o

Wd :: Quais foram os principais desafios envolvidos em sua concepção?

intenso tráfego de dados.

Nosso player utiliza a tecnologia Flash, pela compatibilida-

Cuti e Ronaldo :: Pensamos em fazer um site voltado para

de com todos os browsers do mercado e em todos os sistemas

computação gráfica, mas achamos que teríamos dificuldade

operacionais, inclusive podendo ser visto em celulares, pois o

em arrumar conteúdo para criar um canal de TV na web neste

Flash nos proporciona isto. O player atual tem a medida de

segmento. Foi quando Cuti, que além de designer, também é

450x300 pixels com opção de full screen, mas para a próxima

produtor musical, pensou em investir no segmento musical, pois

versão do site teremos algumas modificações e melhorias, tanto

além de ser um assunto bem dominado por nós, por sermos

no player, que ficará bem maior e mais interativo, pois nosso

DJ’s, temos os contatos das pessoas certas dentro das grandes

codec proporciona essa possibilidade, quanto em toda a inter-

gravadoras. Sendo assim este foi o primeiro desafio vencido. O

face, sem pesar nossos arquivos ou processamento.

próximo seria aprender e desenvolver a ferramenta, tendo em vista que tudo foi feito com muitas tentativas e erros, pois somos autodidatas e nos dedicamos a produzir nós mesmos a nossa ferramenta, utilizando estas novas tecnologias disponíveis.

Wd :: Quais são as particularidades que envolvem a inclusão de vídeos na web?

Wd :: Como foi planejada a infra-estrutura tecnológica para suportar a inclusão de vídeos no site?

Cuti e Ronaldo :: Ela foi planejada para se usar um servidor dedicado. Inicialmente, fizemos uma parceria com uma empresa de internet que nos forneceu seu host. Hoje, estamos negociando com um grande portal de internet para alocação de nosso

Cuti e Ronaldo :: A inclusão requer muito cuidado, tendo

site. Creio que, no próximo mês, o Pump tv esteja em definitivo

em vista a banda que consome e a velocidade de conexão que

neste portal, que nos fornecerá uma estrutura de armazenamen-

temos disponível em nosso país. Como parte de nossos estu-

to e transferência de dados que suporte o tráfego de usuários

dos, fomos buscar um codec que reduzisse satisfatoriamente o

em nosso site, para melhor atender ao nosso público.

tamanho dos arquivos de vídeo, sem perda da qualidade tanto

38 :: debate - o fim do impresso?

O FIM

DO IMPRESSO? Os avanços tecnológicos, a

reportagem da revista The Econo-

cando uma maior agilidade e mais

invenção da internet e sua avassa-

mist, que “calcula a morte do jornal

opções na composição gráfica de

ladora disseminação pelo mundo

impresso nos EUA para o primeiro

um layout, por exemplo.

trouxeram uma série de paradigmas

trimestre de 2043”.

Outro ponto ressaltado no

para os mercados de comunicação e

Talvez a melhor análise sobre

livro está na possibilidade de o

design. Ou seja, estaríamos iniciando

tais transformações esteja pre-

designer trabalhar em uma nova

uma possível contagem regressiva

sente no livro “The End of Print”,

era de experimentação dentro de

para a morte do impresso?

de autoria do designer americano

um universo midiático cada vez

Para se ter uma idéia do

David Carson (www.davidcarson-

mais saturado. Diante disso, qual

tamanho das especulações, o jor-

design.com). Nele, o especialista

será o papel do impresso em um

nalista Renato Cruz, blogueiro do

retrata as mudanças em seu pro-

mundo cada vez mais consumido

jornal “O Estado de São Paulo”,

cesso de criação após a entrada do

pelas novas tecnologias? E qual

publicou uma nota (http://tinyurl.

computador como uma ferramenta

o impacto dessas transformações

com/2jwtd5)

indispensável de trabalho, desta-

para o mercado de design?

falando

de

uma

debate - a o fim do impresso? :: 39

Guto Lins Sócio do escritório de design gráfico Manifesto www.manifestodesign.com.br

“Por princípio (e por fim) não acre-

em diversas mídias: TV, cinema, inter-

dito e nem confio em previsões. Histo-

net, impressos estáticos, impressos di-

ricamente, o surgimento de uma nova

nâmicos, embalagens etc. Cada suporte

tecnologia assusta, mas com o tempo as

pede um approach específico, mas não

coisas vão se acomodando. A fotografia

considero nenhuma delas ‘melhor’ que

não matou a pintura e a fotografia digital

a outra. Tento trabalhar em todas.

ainda respeita os padrões de fotometria

O fator tempo afetou todas as

da fotografia analógica. Hoje, em plena

atividades humanas. Atualmente,

era de Pro Tools, software de edição de

quase não se encontra fisicamente o

áudio, tem gente fazendo prova de oboé

cliente: o arquivo PDF sobe via FTP

em escolas de música mundo afora…

para ser impresso em CTP, mas a es-

Com relação ao suporte jornal,

sência continua a mesma. Creio que

estamos falando é de informação e o

o papel (olha o papel aí de novo) do

acesso a ela. Hoje, no Japão, é possí-

designer é facilitar o relacionamento

vel imprimir na hora, na própria banca,

humano. Tanto o relacionamento en-

o jornal atualizado. É a tecnologia a

tre os seres humanos como entre o

serviço da velocidade, mas sem impe-

homem com o seu meio.

dir que o cara possa ler o jornal no ba-

A experimentação com a tecno-

nheiro, na praia, no ônibus. Além das

logia é inerente ao design. Já fizemos

questões ergonômicas e lúdicas, tem

antes. Fazemos isso sempre. Algumas

uma frase do Millôr Fernandes que é

funcionam, outras não, e o mundo vai

ótima: ‘livro não enguiça’.

rodando. Várias das experimentações

O designer gráfico hoje tem a possibilidade de gerar interfaces gráficas

da Bauhaus continuam à venda hoje.

Ainda bem!”

“HISTORICAMENTE, O SURGIMENTO DE UMA NOVA TECNOLOGIA ASSUSTA, MAS COM O TEMPO AS COISAS VÃO SE ACOMODANDO” * Crédito da foto: Adriana Lins

40 :: debate - o fim do impresso?

Bruno Lemgruber Sócio-diretor da Tabaruba Design www.tabaruba.com

“A morte do impresso: um bate-

lhões de vezes a sua estimativa) para

bola para a revista Webdesign - uma pu-

ser instalado. Em retrospectiva, várias

blicação sobre design para mídias ele-

dessas estimativas passam por pouco

trônicas… Editada somente na versão

mais que curiosidades engraçadas.

impressa. 159 caracteres (sem espaço).

Olhando em contexto, em 1995,

Ta l v e z p u d e s s e p a r a r p o r a í .

q u a n do D a v id C a r s o n e L e wis B l a-

Sem sombra de dúvida, a situação já

ckwell lançaram a primeira edição de

ilustra claramente que, se realmente

‘The End of Print’, a internet ainda en-

estamos caminhando para o fim do

gatinhava (o Netscape foi lançado em

impresso, ainda estamos longe deste

outubro de 1994), a MTV ainda exibia

momento. Parei.

vídeos de música e a euforia de novas

Não vou ser tão simplista, vou

mídias levou a muitas avaliações e es-

analisar as bases dessa discussão. Pri-

peculações grandiosas - base da bolha

meiro uma reportagem do ‘The Eco-

econômica que terminou explodindo

nomist’ prevendo a morte do jornal

em 2001. Hoje, com a Web 2.0 e as

impresso no início de 2043. Em 1981

aquisições multibilionárias do YouTu-

- um período bem menor do que os 36

be, MySpace, Skype e cia, volta-se a

anos da previsão acima -, ninguém me-

especular sobre as mesmas mudanças

nos do que Bill Gates fez outra incrível

de proporções tectônicas.

previsão: ‘640 Kb serão suficientes

Fim do impresso? Possível? Tal-

para qualquer um no futuro’. Hoje, seu

vez… Quem sabe? 1.300 caracteres

Windows Vista, versão Basic, precisa

(sem espaç”

no mínimo de 15Gb (mais de 15 mi-

“HOJE, COM A WEB 2.0 E AQUISIÇÕES MULTIBILIONÁRIAS DO YOUTUBE, MYSPACE, SKYPE E CIA, VOLTA-SE A ESPECULAR SOBRE AS MESMAS MUDANÇAS DE PROPORÇÕES TECTÔNICAS”

debate - o fim do impresso? :: 41

José Bessa (Elesbão) Sócio da Visorama Diversões Eletrônicas www.visorama.tv

“Há exemplos recentes no meio

mas não improvável, deixando para as

audiovisual - LPs, K7 etc. - que só confir-

técnicas tradicionais um nicho de alta

mam a sobrevida daquilo que se consi-

precificação e qualidade.

dera obsoleto. Com o impresso não será

E o que isso muda para o desig-

diferente, mesmo que aos poucos a lei-

ner? Pouco. Não será necessário gran-

tura em vídeo torne-se mais agradável.

de conhecimento na esfera do vídeo,

Imagino, em longo prazo, uma

sendo o propósito dessa nova aplica-

transição do material de alta rotativi-

ção assemelhar-se ao impresso. Haverá

dade - veículos de imprensa - para o

economia de escala, de provas e cópias

‘papel digital’, membranas estimula-

- esta última, também na pirataria.

das eletronicamente para reproduzir

Meu único temor é com a possi-

imagens como páginas de um jornal,

bilidade que a tecnologia abre para

por exemplo. É econômico, ecológi-

aquele profissional incauto, pronto

co e também uma resposta dinâmica

para diagramar verdadeiros ‘painéis

ao fluxo de informações, utilizando

de pinball’ em páginas. Que Ex Machi-

princípios como os do RSS. Para o li-

na proteja a todos nós desse possível

vro, a aplicação parece mais distante,

‘tunning’ do impresso.”

“HÁ EXEMPLOS RECENTES NO MEIO AUDIOVISUAL QUE SÓ CONFIRMAM A SOBREVIDA DAQUILO QUE SE CONSIDERA OBSOLETO”

OTIMIZE SUAS AÇÕES DE ENVIO DE E-MAIL. Monitore seus resultados: saiba quem leu, que horas leu e onde clicou.

GRUPO DB4 “Assim que começamos a usar o Easy Mailing conseguimos despertar nos clientes do grupo DB4 a importância do e-mail marketing e o resultado que ele pode gerar se feito de maneira profissional, com documentação, relatórios e ética. Encontramos nos softwares da Dinamize ferramentas de e-mail marketing robustas, profissionais e com ótimo custo benefício.” Diogo Boni.

www.easymailing.com.br

tel. 55 51 3061.0636

42 :: debate - o fim do impresso?

“Classificaria os impressos em Sergio Boiteux Diretor de criação da Plano B Design www.plano-b.com.br

impressão como conhecemos.

d o i s g r u p o s : o s p e r i ó d i c o s , l i v ro s

No que diz respeito ao segundo

técnicos e de referência, que possuem

g r u p o , c o n s i d e ro i n s u b s t i t u í v e l a

relevância por um curto período

sensação de ler e folhear as páginas

de tempo; e os livros de literatura,

de um bom livro. Poder ler e reler

c a t á l o g o s d e a r t e e p ro j e t o s m a i s

anotações, fazer orelha para marcar

elaborados, que possuem em si um

a página, admirar uma boa impressão

valor agregado, seja na relevância da

e perceber a textura do papel e da

obra ou no projeto gráfico em si.

tinta. Um documento que, quando

Entendo que a tendência de jornais

publicado, não poderá ser editado ou

e revistas seja migrar totalmente para

atualizado, torna-se um registro do

os meios digitais, onde a velocidade e

pensamento de uma época.

a capacidade de difusão são maiores.

As questões ergonômicas

Manuais e outras publicações técnicas

ainda existentes serão superadas,

também serão exclusivamente

permitindo que exploremos ainda mais

virtuais, o que permitirá sua constante

as novas mídias. Mas os impressos

atualização. O desenvolvimento de

mais relevantes continuarão a existir

novas interfaces, como os papéis

c o m o m e i o d e e x p re s s ã o , j u n t o a

eletrônicos, tornará mais confortável

todas as inovações tecnológicas que

a leitura de textos ‘direto do

desenvolvam no futuro.”

computador’, sem a necessidade de

“CONSIDERO INSUBSTITUÍVEL A SENSAÇÃO DE LER E FOLHEAR AS PÁGINAS DE UM BOM LIVRO”

debate - o fim do impresso? :: 43

Prê do mio mê s!

Imagem ilustrativa

Participação dos assinantes Assinantes ganham descontos exclusivos em cursos e empresas de hospedagens. Confira no site!

Como você procura preservar o direito autoral de criação de um site?

Luana Ruffolo luana.ruffolo@gmail.com

Procuro manter minha identidade, mas é muito importante não esquecer do nosso melhor amigo... O contrato!

Quando bem escrito, garante nossos direitos autorais.

Prêmios: 1 pen drive (Patrocínio: SiWeb) e 1 ano de hospedagem grátis (Patrocínio: PlugIn)

VENCEDORA! Fernanda Prevedello fernandaprevedello@hotmail.com

Primeiro, definindo claramente a parte do meu trabalho em contrato. Também procuro um cartório, relaciono as páginas do site em modo impresso em um documento com registros e envio com cópia para o cliente.

Prêmio: 3 meses de hospedagem grátis (Plano Linux ou Plano Windows - Patrocínio: Digiweb)

2º LUGAR Elton Oliveira elton@cmstudio.com.br

Mantenho contratos com os clientes, com cláusulas específicas sobre o assunto e não forneço o código-fonte de meus projetos, utilizo empresas de hospedagem de minha confiança, não forneço dados de FTP etc. Além disso, opto por utilizar a proteção do Creative Commons, que ajuda quem precisa de informações sem deixar de proteger o autor do projeto e a empresa contratante.

Bruno Buccalon bruno@buccalon.org

Ultimamente, tenho utilizado o projeto Creative Commons para estabelecer uma relação entre o criador e o usuário...

Procuro conversar com o criador para saber até onde posso copiar e/ou editar.

Fabio Gobbo fabio@almacriativa.com.br

É simples: com contratos assinados por ambas as partes e registro de direito autoral sobre o layout do website. O custo é maior, mas compensa.

Se você é assinante, participe desta seção pelo site www.revistawebdesign.com.br

Os autores das melhores respostas ganham prêmios.

44 :: e-mais - arquitetura da informação

o complexo que se traduz em simplicidade Como é bom navegar por um site onde a intuição pela busca das informações é sempre bem atendida. Um dos segredos para tornar realidade tal engrenagem atende pelo nome de Arquitetura da Informação. “É sempre bom lembrar que ela não surgiu com a internet, nem com a informática! Aplicada no dia-a-dia do ser humano há séculos, ela bebe de duas fontes: da forma como organizamos a informação em nossas mentes, o chamado ‘modelo mental’, e do mais importante resultado desta observação: a boa e velha biblioteca, enxergando-se a catalogação de um livro como a indexação de uma informação.

Por ser uma ciência recente - foi formalizada há pouco mais de um século -, há mais dúvidas do que certezas sobre ela, principalmente quando aplicada à web”, explica Bruno Rodrigues, consultor em informação para a mídia digital do website Petrobras.

“A tarefa de um arquiteto de informação é domar a complexidade” (Carolina Leslie)

e-mais - arquitetura da informação :: 45

Segundo o especialista, em um ambiente digital, a Arquitetura da Informação pode ser considerada como a tarefa de estruturar e distribuir as áreas (principais e secundárias). “O objetivo é tornar as informações facilmente identificáveis, sua distribuição bem definida e a navegação, intuitiva. Esta tarefa pode - e deve - ser aplicada não apenas a sites internet e intranet, mas a CDs-ROM, DVDs e ambientes wireless, levando-se em conta suas diferenças”, afirma.

Ou seja, a missão é tornar a complexidade na estruturação dos sistemas de informação como sinônimo de simplicidade para os usuários. “Podemos usar a explicação que costumo dizer para a minha família: ‘sabe quando você entra em um site e fica confuso, perdido?

Meu trabalho é fazer com que isso não aconteça. Eu decido que páginas existem, os nomes dos links e o que acontece quando você clica em alguma coisa’. Assim, considero que a tarefa de um arquiteto de informação é domar a complexidade, isto é, entender a complexidade e conseguir pensar em diferentes maneiras de fazer com que o conteúdo não seja percebido desta forma”, argumenta Carolina Leslie, arquiteta de informação da TPI (Telefônica Publicidade e Informação).

Incluindo a AI no desenvolvimento de um site Uma dúvida muito comum na hora de se aplicar os conceitos de Arquitetura da Informação na criação e no desenvolvimento de um site está em se descobrir o exato momento no qual eles devem ser inclusos dentro do projeto. Entre os especialistas, a opinião parece ser unânime.

“Desde o ponto zero. Meu conselho é que não se erga nada em um site, muito menos se construa um protótipo, enquanto a AI não esteja pronta. É uma questão de lógica e inteligência. Com o site no ar, outra grande vantagem da Arquitetura da Informação é poder reavaliar seus pontos principais a qualquer momento”, orienta Bruno. “Ela deve ser incluída já nas primeiras etapas do processo de desenvolvimento, na definição do produto”, completa Carolina.

Isso porque a tarefa está intimamente ligada com o desenvolvimento do planejamento estratégico do projeto. “A etapa de Arquitetura de Informação começa na

arquitetura da informação

“MEU CONSELHO É QUE NÃO SEES OÃN EUQ É OHLESNOC U ERGA NADA EM UM SITE, MUITO ERGA NADA EM UM SITE, MUITOOTIUM ,ETIS MU ME ADA AURTSNOC ES SONEMMENOS SE CONSTRUA UM PROTÓTIPO ADA EM UM SITE, MUITO U CONSELHO É QUE NÃO SE

MENOS SE CONSTRUA

TA” ””ATNORP AJETSE OÃN IA A ENQUANTO A AI NÃO ESTEJA PRONTA” A AI NÃO ESTEJA PRONTA”

arquitetura da informação :: 47

M“

ERGA “M AGRE

OTNAUQNE

“EM SITES DE COMERCIO ELETRONICO, “EM SITES DE COMERCIO ELETRONICO,,OCINORTELE OICREMO ,OCIN ORTVENDAS” ELE OICREMO “EM SITES ELETRÔNICO, UMADE AI COMÉRCIO MAL FEITA SIGNIFICA PERDA NAS UMA AI MAL FEITA SIGNIFICA PERDA NAS VENDAS” UMA AI MAL FEITA SIGNIFICA PERDA NAS VENDAS” (LAURA LESSA)(LAURA LESSA)

ENQUANTO

arquitetura da informação

Saiba mais sobre AI

Blogs e sites

Perfil do Arquiteto da Informação no Brasil

arquitetura da informação :: 49

Exemplos de Arquitetura da Informação

50 :: estudo de caso - Capes.gov.br

Capes.gov.br: gerando conhecimento para os profissionais web Para quem não sabe, a Coordenação de Aperfeiçoamento de Pessoal de Nível Superior (Capes), fundação do Ministério da Educação, é responsável por mais da metade das bolsas de pós-graduação no país.

O espírito de incentivar a produção de conhecimento é tão forte na hierarquia da instituição que a reformulação de seu site (www.capes.gov.br) está sendo baseada em um modelo inédito de pesquisa, que vem gerando resultados importantes nas áreas de acessibilidade e usabilidade na web.

Para conhecermos as particularidades deste projeto, conversamos com o designer Felipe Memória (www.fmemoria.com.br), coordenador da equipe envolvida na reformulação do portal e que atualmente trabalha na agência americana HUGE (www.hugeinc.com). Confira os detalhes a seguir.

estudo de caso - Capes.gov.br :: 51

Wd :: Este projeto foi desenvolvido por uma equipe liderada por você, em parceria com a PUC-Rio. Como surgiu a oportunidade de comandar a reformulação do portal da Capes?

Felipe :: A Capes é uma instituição que financia mais da metade das bolsas de pós-graduação do país. Ela patrocina pesquisas e investe na formação de pessoal qualificado. Essa alma acadêmica fez com que a diretoria achasse adequado investir em um projeto de reestruturação de seu site totalmente baseado em pesquisa. A idéia é gerar conhecimento nas áreas de Usabilidade, Interação Humano-Computador (IHC) e Acessibilidade durante o desenvolvimento desse site modelo. Ele tem por objetivo atingir níveis máximos de acessibilidade - o chamado triplo

Página inicial do site da Capes

“A”. E isso está longe de ser simples.

Somos carentes de profissionais realmente especializados, com experiência prática relevante, em Usabilidade e IHC. Essa carência é ainda maior quando tratamos de acessibilidade, principalmente quando não estamos mais falando sobre o básico HTML validado pelo W3C. Portanto, existe uma demanda muito grande de profissionais e pesquisas nessa área.

Meu nome era indicado pela minha experiência prática de mercado, por ter escrito um livro sobre Usabilidade e Experiência do Usuário e pelo meu vínculo acadêmico como professor e pesquisador da PUC-Rio. Escrevi então um projeto de pesquisa e estamos fazendo-o sair do papel em parceria com o LEUI - Laboratório de Ergonomia e Usabilidade de Interfaces em Sistemas Humano-Tecnologia da PUC-Rio. Wd :: Um dos principais motivadores para a reformulação do portal está no decreto 5.296/2004 (http://tinyurl.com/26o749), que determina que sites de âmbito governamental sigam os preceitos básicos de acessibilidade na web. Diante da experiência vivida neste projeto, quais são os custos envolvidos para tornar um site acessível?

Felipe :: São vários os níveis de acessibilidade que se pode querer atingir ao se projetar um site acessível. Ter um código XHTML semanticamente correto e estruturado, já resolve grande parte dos problemas encontrados por deficientes visuais que utilizam softwares leitores de tela. Já para atingir o nível AAA, que é o nível máximo de acessibilidade, precisase de mais tempo e, conseqüentemente, investimento.

Vale lembrar que este investimento pode apresentar um excelente retorno, já que um site acessível é também melhor indexado pelos robôs dos sites de busca, que interpretam o código quase do mesmo jeito que um software leitor de tela. Deste modo, o robô pode “entender melhor” sobre o que se trata o conteúdo do site e aumentar a relevância do mesmo na hora de exibir um resultado de busca, colocando-o entre os primeiros sites apresentados.

Wd :: Falando sobre acessibilidade, quais são as mudanças acarretadas durante o processo de desenvolvimento de um site em relação aos modelos adotados sem a prioridade na inclusão da acessibilidade?

Felipe :: Quando pretende-se atingir níveis máximos de acessibilidade, o processo é, sem dúvida, mais demorado. As diferenças vão desde pequenos detalhes da interface,

52 :: estudo de caso - Capes.gov.br

do código, até uma bateria maior de testes que precisam necessariamente ser feitos.

Além disso tudo, para atingir o nível de acessibilidade que esperamos, precisamos, necessariamente, fazer testes

O planejamento de produto que leva em consideração

com usuários portadores de deficiência. Não funciona como

as funcionalidades, as páginas e os fluxos principais precisa

em projetos tradicionais em que os testes são uma ótima

ser mais minucioso. Principalmente quando ainda não se

ferramenta, porém não obrigatória. No nosso caso, eles

tem muita experiência no assunto. É um mundo totalmente

são obrigatórios. É uma premissa.

novo, com uma série de características diferentes das que estamos acostumados.

Wd :: Um dos detalhes interessantes deste projeto está na aplicação da metodologia relatada no livro

Durante o processo, precisamos fazer benchmark sobre

“Getting Real” (http://tinyurl.com/ytzmxe), criada pela

detalhes que eram inteiramente novos, pesquisar coisas que

empresa americana 37Signals (www.37signals.com). Por

nessa etapa de um projeto normal já estariam no sangue.

que vocês decidiram utilizá-la neste projeto?

Não vou pesquisar, por exemplo, sobre o posicionamento

Felipe :: Sou um entusiasta do trabalho do pessoal

de um campo de busca. Já sei quais são as minhas opções.

da 37signals desde o início, quando eles ainda eram uma

Mas e o posicionamento de opções de acessibilidade como

empresa pequena composta por profissionais capazes de

mudança de contraste, atalhos de teclado e mudança de

fazer sites fantásticos: simples, fáceis de usar, bonitos

tamanho de letra? E mais: Quais são esses elementos?

e diretos. Eles sempre foram referência para mim. Eram

Quantos são? Existem também várias apresentações visuais

especialistas em usabilidade que não esqueciam da estética

para cada, diversas formas de resolver. Qual a melhor para

e entendiam de produto. Eles acabaram se reposicionando

o nosso projeto? As opções que as pessoas usam realmente

no mercado como uma empresa que faz aplicativos que

funcionam? Será? Alguém já estudou isso?

funcionam na web. O método de trabalho deles, também

Citei o detalhe das opções de acessibilidade. É um

usado no desenvolvimento do seu principal produto, o

ponto que pode ser aprendido e deixar de ser um entrave

Basecamp (um gerenciador de projetos), foi registrado

no futuro. Mas existem muitos outros. Talvez o maior

nesse livro, chamado “Getting Real”.

desafio seja pensar como o site se manterá acessível

Uma das coisas interessantes é que a 37signals não

depois de construído. Estamos fazendo manuais, vamos

cresceu o quanto poderia. Eles sempre foram um time

dar treinamento, enfim, teremos que fazer um trabalho

muito pequeno. Pessoalmente nunca acreditei em projetos

que vai além do projeto para a web. Será um esforço em

com milhares de pessoas envolvidas, com milhares de

conjunto com os funcionários da Capes.

reuniões, papelada, e-mails, apresentações, formalidades e aprovações. O livro trata exatamente disso e fala o que eu sempre quis ouvir: com três pessoas você consegue construir coisas muito legais na web. Eles os chamam de os três mosqueteiros: um desenvolvedor, um designer e um “líbero”, capaz de transitar nos dois universos.

Esse projeto era a oportunidade de implementar a metodologia que eu acreditasse, trabalhando com as pessoas que eu confiasse e tentando, por minha conta, buscar a excelência. Fiquei semanas pensando na fórmula ideal e, lendo o livro, vi que chamar as duas figuras que faltavam seria um bom caminho. Convidei então os outros dois “mosqueteiros”: Jorge Falcão (desenvolvedor) e Alexandre Saddi (designer com muita facilidade na parte

estudo de caso - Capes.gov.br :: 53

de TI). Formamos então o trio que esteve junto em todas

usuários menos fria, o que é comum quando estamos falando

as decisões importantes, desde o início.

de um portal. Essa frieza é uma barreira a ser quebrada, e a

Durante o projeto também contamos com a ajuda

cor torna o uso mais agradável. Ficamos com ela.

de outros profissionais escolhidos a dedo para tarefas

Wd :: Um ponto inédito neste projeto está na

específicas: Leonardo Burlamaqui foi o arquiteto da

implementação de uma função que tor na a tela do

informação, Diego Zambrando criou a direção de arte,

navegador em alto contraste para pessoas com baixa

Bernardo Walkiers ficou responsável pela parte de redação

visão. Como surgiu a idéia de seu desenvolvimento e

e webwriting, além de outros colaboradores.

quais recursos foram utilizados para torná-lo funcional?

Nossa idéia era trabalhar com uma equipe enxuta,

Felipe :: Quando vamos desenvolver um site acessível,

composta apenas por profissionais seniores. Com isso,

nem sempre estamos falando do uso de um software

como recomenda o livro, o custo de mudanças é pequeno,

especial ou de compatibilidade entre diferentes

a comunicação é mais fácil, a papelada é menor, quase não

dispositivos. Algumas questões visuais devem ser

precisamos de reuniões e as decisões são tomadas com mais

levadas em consideração, já que existem pessoas

rapidez. Isso fez com que conseguíssemos lançar a primeira

que têm dificuldade para reconhecer certas cores.

versão do enorme portal, com sistema de administração e

Além disso, com o passar dos anos, é provável que

tudo, em apenas três meses a partir da primeira reunião.

a maioria de nós apresente algum grau de perda

É muito importante ressaltar que o projeto está em

de visão, afetando o foco e contraste, o que reduz

andamento e longe de estar pronto. Ainda não pode ser

nossa capacidade de distinguir sombreados,

considerado um projeto modelo. Lançamos apenas a

bordas, padrões e texturas.

primeira versão. Testes de usabilidade, acessibilidade e outras novidades ainda estão por vir.

Wd :: Em termos de design, vocês modificaram

Com isso em mente, em conjunto com a funcionalidade de aumentar o tamanho da fonte, desenvolvemos uma versão otimizada para se

a combinação cromática do portal, trocando a paleta

obter o máximo de contraste e legibilidade.

baseada principalmente no azul e no verde por

Te c n i c a m e n t e , t r a t a - s e d e u m a f u n ç ã o e m

tonalidades de ocre. Quais estudos foram feitos para se

javascript que troca o CSS da página e grava

tornar efetiva tal mudança?

um cookie para que a preferência do usuário seja

Felipe :: Realmente, a mudança cromática foi bem radical. Num primeiro momento, achávamos que as cores

mantida ao navegar pelo portal.

Wd :: Outra modificação significativa no layout

antigas deveriam predominar. Seria a solução trivial.

do portal está na troca das famílias tipográficas

Conversando com os funcionários da Capes, percebemos

(Arial por Georgia). Quais fatores influenciaram

que, na verdade, não existia um real motivo para aquelas

na escolha da nova tipografia do site?

cores serem usadas a não ser por serem as cores da marca

Felipe :: A tipografia escolhida mantinha

da instituição. Fora isso, a Capes não mantinha o azul, verde

uma coerência com o layout ocre. Discutimos

e branco em material impresso ou coisas desse tipo.

bastante sobre isso. Chegamos a manter o

Fizemos três layouts diferentes da home. Eu fiz um,

mesmo layout mudando apenas a fonte,

o Alexandre Saddi fez outro e o Diego Zambrano fez uma

mas perdia-se muito. O uso de uma

terceira, que era a nossa favorita. Apenas a dele tinha esse

fonte serifada é interessante pelo fato

padrão cromático diferente. Não existe uma solução certa,

de a instituição ter uma relação com a

existem várias soluções possíveis. A ocre foi a que mais

academia, com tradição. Entre as duas

agradou a nós e ao pessoal da Capes: presidência, diretoria

serifadas de sistema possíveis, optamos

e funcionários. É um tom mais quente, torna a relação com os

pela Georgia. Ela é desenhada

54 :: estudo de caso - Capes.gov.br

para funcionar bem pixelada, na tela. Caso tivéssemos

à acessibilidade. Pessoas mais velhas têm dificuldade de

optado por outra solução visual, provavelmente teríamos

enxergar e esse tipo de opção ajuda. A opção pelos links

escolhido outra fonte. A Georgia simplesmente funcionou

sublinhados foi bem fácil de ser tomada. O público-alvo

perfeitamente com o layout que escolhemos.

da Capes é de pesquisadores, professores, bolsistas e

Wd :: Vocês desenvolveram um CSS especial para a

estudantes. Grande parte é composta por pessoas com

parte de página de impressão. Em qual etapa do projeto

mais idade, que não são mais tão jovens. O sublinhado é

surgiu a idéia de implementar tal funcionalidade?

um clássico da web, uma característica que essas pessoas

Felipe :: Quando estávamos projetando a página de notícia. Essa funcionalidade sempre gerou certa polêmica. A

já conhecem. Não queríamos fazê-las aprender um padrão diferente apenas para o nosso site.

solução mais “moderninha” é definir um CSS especial para a

Como não poderia deixar de ser, estivemos atentos

página de impressão, mas sem avisar ao usuário que você fez

com relação à usabilidade desde o início. Fizemos um

isso. Eu sempre achei confuso, já que os usuários em geral

g r a n de le v a n t a me n t o de pr in c ipa is f lu x o s , t a re f a s ,

estão acostumados a imprimir aquilo que estão vendo. Por

páginas mais visitadas, necessidades do público-alvo etc.

mais que seja bom o texto sair formatado para impressão,

Projetamos a arquitetura da informação e os wireframes

acho ruim o usuário não ver aquilo que está imprimindo.

baseados nisso. Como eu disse anteriormente, ainda

Sempre fui do partido do “versão para impressão”,

faremos testes de usabilidade. Uma das coisas que

abrindo uma nova página mais limpa, deixando mais claro

precisamos validar é a arquitetura da informação do portal.

para o usuário o que iria acontecer. Achei que eu era um

Esse foi o grande desafio. Fizemos um levantamento

dos únicos a pensar assim, até que, durante o projeto, li

da arquitetura atual e propusemos uma nova, baseada

um artigo de Peter Mcvicar, publicado no “A List Apart”

no público-alvo. Conversamos bastante com a Capes

(http://tinyurl.com/2ehbgo).

e chegamos ao resultado que está no ar. No entanto,

Ele deu uma boa idéia de como resolver o problema:

sentimos que isso ainda precisa ser validado.

usando o comando “imprimir”, abrindo simultaneamente a

No início, pensávamos em fazer também testes de

página para impressão com um disclaimer e a caixa de impressão

análise da tarefa (usuário segue um roteiro de tarefas

do sistema. Sabemos que, em geral, não é interessante gerar

sugerido por um moderador), mas, neste momento,

duas ações com um único clique, mas nesse caso achamos a

a arquitetura é o ponto mais crítico do portal, já que a

solução interessante e resolvemos seguir a sugestão.

navegação e os principais fluxos são razoavelmente

Wd :: Durante o período de experiência do usuário

triviais. Portanto, o primeiro teste que faremos será um

dentro do portal, ele pode escolher o tamanho de fonte

card sorting (em que os usuários organizam o conteúdo,

ideal para a sua leitura. Além disso, todos os links aparecem

segundo as suas expectativas). O livro Getting Real não

sublinhados. Tais escolhas foram definidas a partir de testes

fala sobre usabilidade, mas o processo simplificado que

de usabilidade? Como a usabilidade foi inserida dentro

ele sugere facilita o trabalho e as eventuais mudanças que

deste projeto e da metodologia “Getting Real”?

precisemos fazer em virtude dos testes.

Felipe :: Não. Infelizmente não conseguimos testar

Wd :: A grid do portal contém cabeçalho e rodapé,

nada antes do lançamento, em virtude do tempo que

reunindo algumas informações principais, busca, links

tínhamos disponível antes da data estipulada pela lei. A

e as marcas das instituições envolvidas com a Capes. Já

questão da mudança de tamanho da fonte está relacionada

no miolo, a interface foi dividida em quatro colunas, que apresentam as novidades e o conteúdo existente no site.

De que forma vocês trabalharam a arquitetura da informação do site e sua influência dentro da definição da grid do site?

estudo de caso - Capes.gov.br: 55

Felipe :: A arquitetura, projetada pelo Leonardo Burlamaqui, foi a primeira coisa com que nos p re o c u p a m o s . C o m o f a l e i a n t e r i o r m e n t e , f i z e m o s um levantamento da arquitetura atual e depois um planejamento de uma nova organização, totalmente baseada no público-alvo. Tivemos ainda uma série de reuniões em Brasília para validar o que projetamos.

“O uso de uma fonte serifada é interessante pelo fato de a instituição ter uma relação com a academia, com tradição”

Não foi uma tarefa simples, pois a Capes tem muitas

seria complexo e, por conseqüência, lento. Como não queríamos

responsabilidades e possui diversas áreas importantes.

colocar em risco ultrapassar a data limite para o lançamento do

Estabelecida à arquitetura, estavam definidos os itens de menu e já sabíamos o que deveria ser exposto na home.

site, optamos por utilizar o OpenCMS, que se mostrou mais flexível neste quesito.

Como optamos pelo menu vertical, a primeira coluna

Wd :: No ciclo final de um projeto, utilizar ferramentas

ficou dedicada a ele. A segunda coluna tem destaque

para medir o retorno sobre o investimento atesta um

para as notícias, que são diárias, e chamada para a página

bom trabalho realizado, além de garantir sua melhoria

de dúvidas freqüentes (já que a quantidade de e-mails

contínua. Como vocês trabalharam esta questão? Quais

recebidos pelos funcionários era enorme). A coluna do

são os próximos passos do projeto?

meio tem destaque para duas das áreas mais procuradas

Felipe :: O projeto do site da Capes ainda está

do portal: bolsas e avaliação de cursos. Na direita,

em andamento. Estamos no meio do caminho com

organizamos chamadas que podem ser reordenadas e

relação à parte de acessibilidade. Vamos fazer testes de

capazes de expor qualquer conteúdo. A chamada principal

usabilidade, migrar o sistema para o LifeRay, fazer testes

também tem diferentes versões. Essas soluções deixam o

de acessibilidade com portadores de deficiência, ajustar,

portal menos engessado e mais útil para quem o mantém

reorganizar, realinhar. Ainda temos trabalho pela frente e

e para os usuários, que podem ter necessidades diferentes

aos poucos, com novos releases, vamos deixando-o com a

dependendo do período.

cara que queremos.

Wd :: Na parte de gerenciamento de conteúdo,

A Capes não precisa gerar receita pelo site, não vive

o OpenCMS (www.opencms.org) foi escolhido como

de sua audiência com receitas publicitárias, nem precisa

ferramenta para execução de tal tarefa. Que tipo de

fazer propaganda de seus serviços. Por outro lado, precisa

estudos vocês realizaram para definir tal escolha?

manter sua credibilidade e a respeitabilidade de sua

F e l i p e : : T í n h a m o s c o m o p r é - re q u i s i t o a d o t a r

marca. O ponto mais legal desse projeto é que o retorno

uma solução Java, que foi uma solicitação da equipe

do investimento no site será semelhante ao retorno de

de desenvolvimento interna da Capes. Dado este fato,

investimento em um pesquisador que tem uma bolsa de

avaliamos várias ferramentas open-source disponíveis,

estudos no exterior com a missão de trazer conhecimento

antes de optarmos por uma ou por outra.

para o país. A experiência com o desenvolvimento do site

Na verdade, a plataforma final que vamos utilizar para o projeto é o LifeRay (www.liferay.com). Enquanto o OpenCMS é um gerenciador de conteúdo, o LifeRay é um gerenciador de Portal, o que é perfeito para melhor integrar o novo site aos aplicativos já existentes da Capes.

Entretanto, quando começamos a implementar o novo layout do site no LifeRay, percebemos que o processo para que ele gerasse um código acessível

vai gerar um conhecimento que será compartilhado. Esta entrevista já é um início desse retorno.

56 :: tecnologia na web

Tecnologia na web Estimule a troca de conhecimento pela web Durante muito tempo, o usuário de internet adminis-

pontando como a mais forte opção nacional nesta arena”,

trava sua biblioteca de informações dentro do próprio na-

afirma Augusto Campos, administrador do BR-Linux.org

vegador. A rotina era sempre a mesma: ao encontrar um

(http://br-linux.org).

conteúdo relevante, bastava ir até a barra de ferramentas

A popularidade dos agregadores foi o critério utili-

do browser, clicar no menu “Favoritos” e escolher a opção

zado por Carlos Merigo, criador do Brainstorm#9 (www.

“Adicionar Página” (ou “Adicionar a Favoritos”, dependen-

brainstorm.com.br). “Alguns blogs colocam dezenas de bo-

do do navegador utilizado).

tões para outros sistemas, mas acho que acaba mais atra-

No entanto, com o avanço das tecnologias disponíveis

palhando o usuário do que oferecendo uma facilidade”.

na web, esta dinâmica se tornou obsoleta e evidenciou algu-

Além destes fatores, uma opção é avaliar as caracte-

mas de suas desvantagens. A primeira delas é que o usuário

rísticas técnicas dos agregadores. “O que pesou também

só pode consultar uma lista de favoritos em seu computador.

foi a abertura dos desenvolvedores dos sites em questão,

Outro problema envolve o risco de vê-la indisponível por um

bem como os sites são construídos. O Rec6 ganhou a nos-

determinado tempo, ou até mesmo perdê-la, no caso de seu

sa preferência pelo fato de estarmos em contato com os

equipamento apresentar algum tipo de problema.

desenvolvedores e discutindo abertamente melhorias que

Além disso, não podemos esquecer que a internet traz em sua essência um forte estímulo ao compartilhamento do

são implementadas”, revela Leonardo Faoro, um dos fundadores do Meio Bit (www.meiobit.com).

conhecimento em rede. Assim, este cenário acabou criando

Como incluir?

espaço para o surgimento de sites destinados à troca de

Para quem pensa que a inclusão destes plugins pode

listas de favoritos, fenômeno conhecido como bookmarks

representar uma etapa muito técnica, a boa notícia é que

sociais, e também à classificação de conteúdos mais popula-

este processo pode ser feito de maneira simplificada. “Na

res, segundo a votação de uma determinada comunidade.

verdade, a inclusão de todos é muito simples. Reaproveitei

Dessa forma, se você quer estimular a troca de conheci-

o código do site de um grande amigo meu, adaptando às

mento, além de contar com uma ferramenta para divulgação

minhas URLs. O que deu mais trabalho foi ‘encapsular’ o bo-

de suas idéias, é possível adicionar dentro de seu site alguns

tão do Rec6 ao lado esquerdo do começo dos textos. Digo

plugins que vão ajudar o seu público-alvo nesta tarefa. A seguir,

mais trabalho, mas foi coisa de 20 minutos”, atesta Mauro

conheça a experiência de quem já passou por tal processo.

Amaral, do Carreira Solo (www.carreirasolo.org). “Como não

Critérios na adoção dos plugins

tenho muito conhecimento técnico, achei que fosse compli-

O primeiro passo é definir quais serão os critérios para

cado e que não seria possível sem um plugin pré-formatado

a utilização de plugins que estimulem a troca de listas de

como o que existe para o WordPress (http://wordpress.org).

favoritos e a votação dos conteúdos mais populares. “Há

Mas, no Movable Type (www.movabletype.org), bastou uma

um ano, quando incluí pela primeira vez estes links para

simples linha de código na template”, diz Carlos.

agregadores sociais, os serviços do Google e do Del.icio.us

A facilidade parece ser ainda maior nos sites admi-

eram os mais solicitados pelos leitores. Nos últimos meses,

nistrados através de sistemas de gerenciamento de con-

surgiram pedidos para a inclusão do Digg, e achei que valia

teúdo. “O BR-Linux adota o Drupal (http://drupal.org), um

a pena incluir também o do brasileiro Rec6, que vem des-

gerenciador com bastante oferta de recursos. Bastou fazer

tecnologia na web :: 57

“O benefício primário é facilitar a navegação do usuário que utiliza bookmarks sociais e queira salvar um post com apenas dois cliques” (Carlos Merigo)

o download do módulo de ‘social bookmarking’, instalar no

sites, como o dos comediantes Mikael Wulff e Anders Mor-

servidor e configurar por intermédio do próprio CMS. Para in-

genthaler (www.wulffmorgenthaler.com), por exemplo,

cluir o brasileiro Rec6, tive que fazer uma pequena edição do

brincam com os botões, criando versões estilizadas. Acho

código, mas nada de outro mundo”, conta Augusto. “São mo-

bem bacana também, pois acrescenta uma ferramenta man-

dificações simples que fizemos em um plugin específico para

tendo a identidade”, cita Carlos.

o Drupal, mas mesmo em outras plataformas são parâmetros

Quais são os benefícios?

simples que podem ser modificados”, completa Leonardo.

Esta é a pergunta que não poderia faltar! Para justifi-

Escolhendo os ícones

car o trabalho, por menor que seja, é importante determi-

Falando ainda sobre o processo de inclusão desses

nar que tipo de retorno estes plugins podem trazer. O pri-

plugins, uma etapa importante envolve a escolha dos íco-

meiro deles envolve a facilitação no processo de navegação

nes que vão representar cada uma das opções oferecidas.

do usuário. “O benefício primário é facilitar a navegação

“Até gostaria de ter dedicado algum tempo de análise de

do usuário que utiliza bookmarks sociais e queira salvar um

usabilidade a esta escolha, mas o fato é que cada um dos

post com apenas dois cliques. Sinceramente, esse tipo de

serviços oferece seu próprio ícone, já padronizado e em

ferramenta ainda é muito pouco usada pelos internautas bra-

diversos formatos. Havendo o ícone pronto, acredito que

sileiros, mas acredito que esses atalhos incentivam o uso e o

vale a pena aproveitar a sua carga semântica (que provavel-

colaborativismo por parte dos usuários”, destaca Carlos.

mente é mais intensa do que a de qualquer outra alternati-

Lembre-se ainda que tal avaliação varia de site para

va que eu pudesse criar), sem criar um design alternativo”,

site. “Em sites onde os leitores participam mais em comen-

orienta Augusto.

tários, estes tendem a usar mais os links e enviar notícias

Ou seja, a dica é aproveitar a identificação visual do

para estes sites colaborativos. Outro fator é que os leitores

usuário com os serviços oferecidos pela web. “Na escolha

do Rec6, por exemplo, já estão acostumados a verem no-

dos símbolos, procurei utilizar o padrão dos sites para se-

tícias do Meio Bit por lá, o que torna mais fácil um link do

rem reconhecidos com facilidade. Ícones que já foram in-

Meio Bit ser bem votado”, diz Leonardo.

corporados pela blogosfera e que combinam com o layout

Outra vantagem seria a criação de um serviço extra para

do blog. Porém, também incluí o nome do agregador junto

seus usuários. “Eu os vejo como um adicional para o usuário

da imagem para quem não conhece se familiarizar. Alguns

que tem interesse em bookmarking social e ferramentas de

58 :: tecnologia tecnologia na na web web

nível básico

Algumas opções de plugins - Del.icio.us (http://del.icio.us/help/savebuttons) - Digg (www.digg.com/tools/buttons) - Linkk (www.linkk.com.br/blog.php) - Rec6 (http://rec6.via6.com/faq.php) - Technorati (http://technorati.com/tools)

Weberê

Doações de alegria para uma páscoa mais feliz.

Agradecemos a todos que colaboraram com a nossa festa de páscoa.

Magê-Malien - Crianças que Brilham Faça parte você também deste projeto.

Para doação de alimento entre em contato: arteccom@arteccom.com.br Informações: www.arteccom.com.br/ong

60 :: tutorial

Actionscript - Parte 2 Erick Souza Desenvolvedor web desde 2001 e instrutor com o foco em RIA. Mantém um blog pessoal (http://blog.ericksouza.com) sobre Actionscript e correlacionados.

Hoje, o Actionscript encontra-se na versão 3.0, lançado junto ao Flex 2. No Flash, que está na versão 8, ainda é usado

3.

4.

5.

} }

o Actionscript 2.0. Para conhecer o Actionscript 3.0 no Flash, você pode usar a versão alpha do Flash 9, que a Adobe liberou estudos da linguagem enquanto o Flash 9 não é lançado.

Uma das principais diferenças entre o Actionscript 3.0 e as versões anteriores é que antes existiam diversas

Apenas uma classe pública é permitida por classe.

Outras classes podem ser declaradas no mesmo arquivo, mas apenas uma pode ser pública. Quando se omite o package, a classe é definida por padrão como top-level.

opções de onde colocar os códigos, por exemplo: timelines, movieclips, botões, arquivos de Actionscript externo e classes. Enquanto que o Actionscript 3.0 é totalmente baseado em classes, onde os códigos são colocados em métodos (funções) da classe.

1.

2.

3.

4.

5.

package { class Exemplo { } }

Algumas definições de termos usados na criação de Hello Word

classes:

Vamos começar com o velho “Hello Word”.

- Métodos - são funções, como o método onLoad da

Observação: Os códigos podem ser testados

classe XML; - Propriedades - são variáveis, como a propriedade loaded da classe XML; - Função construtora - uma função especial que possui

no Debug do Flex ou no Adobe Flash 9 Public Alpha, disponível em: http://labs.adobe.com/technologies/ flash9as3preview.

No Flash 9, no inspetor de propriedades em

o mesmo nome que a classe. É a função inicial da classe; - Pacotes - um conjunto de subclasses pertencentes a uma classe. A classe Tween, por exemplo, possui um pacote easing.

Packages (pacotes) A partir do AS3, a classe inicia-se com a instrução package, que é usado para especificar o pacote da classe.

Observe a diferença entre as versões nos exemplos abaixo:

ActionScript 2.0: 1.

2.

3.

class mx.transitions.Tween {

“Document class:”, coloque o nome da classe a ser executada.

1.

2.

3.

4.

5.

6.

7.

package { import flash.display.Sprite; public class saudacao extends Sprite { } }

No script acima foi criada a classe de nome “saudacao”, portanto, salve o arquivo AS da classe como “saudacao.as”.

A classe “saudacao” será uma subclasse da classe Sprite

}

(superclasse), que foi importada na segunda linha.

A classe “saudacao” herdará os métodos e propriedades

ActionScript 3.0: 1.

2.

package mx.transitions { class Tween {

da classe Sprite - a classe Sprite é semelhante à classe MovieClip, mas não possui uma timeline. Agora, basta criar a função construtora que iniciará a classe. O nome da função construtora

tutorial :: 61

deve ter exatamente o mesmo nome da classe (saudacao).

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

package { import flash.display.Sprite; public class saudacao extends Sprite { public function saudacao() { trace(“Hello Word! Actionscript 3.0.”); } } }

Ao testar a classe acima deve ser exibida, na janela Output, a mensagem “Hello Word! Actionscript 3.0.”. Nesta série, não aprofundarei mais no Actionscript 3.0, pois o foco aqui é o Flash e, como já foi dito, para o Flash ainda estamos trabalhando com o Actionscript 2.0.

Como foi visto, no Actionscript 3.0 toda a programação é escrita em classes, portanto mesmo agora programando em Actionscript 2.0, é altamente recomendável começar a se acostumar a programar em classes.

Classe de criação de um menu com dados vindos de um XML Na edição anterior, já vimos como trabalhar com XML. Agora, vou mostrar como criar uma classe de construção de um simples menu em Actionscript 2.0. O XML que será usado é este logo abaixo, que contém o título do botão e o número do frame que deve ser exibido ao clicar no botão.

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

<?xml version=”1.0” encoding=”UTF-8”?> <menu> <item <item <item <item

titulo=”Revista WebDesign” frame=”1” /> titulo=”Erick Souza” frame=”2” /> titulo=”Actionscript” frame=”3” /> titulo=”Flash” frame=”4” />

</menu>

Para escrever a classe, utilize um editor de sua preferência. Um ótimo editor que recomendo é o SEPY Actionscript Editor, ou você pode usar o próprio editor do Flash, no menu “File > New > Actionscript File...”. Salve o arquivo como “menuXMLWD.as”. class menuXMLWD { var urlxml:String = null; var xml:XML = null; function menuXMLWD(_urlxml:String) { _root.createEmptyMovieClip(“xmenu”, _root. getNextHighestDepth());

62 :: tutorial

this.urlxml = _urlxml; this.loadXML(); }

Na classe acima, temos o nome da classe menuXMLWD, lembrando que o

function loadXML() { var menuXML:XML = new XML(); menuXML.ignoreWhite = true; menuXML.load(this.urlxml); menuXML.onLoad = function() { xml = this;

nome da classe deve ser o mesmo nome do arquivo e da função construtora.

Foram criadas duas propriedades: urlxml p a r a a r m a z e n a r o e n d e re ç o d o x m l ; e a propriedade xml para armazenar o conteúdo do xml.

var item:MovieClip = null; var nItens:Number = xml.firstChild. childNodes.length;

função construtora e possui apenas um for(var i:Number = 0; i < nItens;

i++)

parâmetro, o endereço do XML. A função construtora cria um movieclip xmenu no _

{ item = _root.xmenu.createEmp tyMovieClip(“item” + i, _root.xmenu.getNextHighestDep th()); if(i > 0) item._x = _root.xmenu._width + 20; item.createTextField(“texto”, item.getNextHighestDepth(), 0, 0, 0, 20) item.texto.autoSize = true; item.texto.htmlText = String(this.firstChild.childNodes[i].attributes.titulo). toUpperCase(); item.frame = this.firstChild. childNodes[i].attributes.frame; item.onRelease = function() { _root.gotoAndStop(this. frame); + this.frame); } item.onRollOver = function() { this.texto.textColor = 0xFF0000; } item.onRollOut = function() { this.texto.textColor = 0x000000; } } } }

root, atribui o valor passado no parâmetro p a r a a p ro p r i e d a d e u r l x m l e c h a m a a função loadXML, que vai carregar o XML e criar os botões do menu.

Para usar a classe, salve-a na mesma pasta do xml e da classe, abra um novo arquivo no Flash e no primeiro frame insira o seguinte action: 1. stop(); 2. var menu:menuXMLWD = new menuXMLWD(“menu.xml”);

Na timeline, crie quatro frames e em cada um, insira um quadrado de cores

trace(“gotoAndStop - “

}

A primeira função menuXMLWD é a

diferentes para testar a troca de frames por meio do menu. Na próxima edição, v e re m o s s o b re a n i m a ç õ e s d i n â m i c a s .

Abraços e até a próxima.

64 :: internacional

Julius Wiedemann Guilhermo Reis Nasceu e cresceu no Brasil, onde estudou Design e Marketing (sem terminar) até que teve a Especialista em de Informação Usabilidade. autor do Kit de Conhecimento sobre AI de oportunidade deArquitetura ir para o Japão.

Trabalhouecomo designerÉde revistas e jornais até se tornar editor (http://tinyurl.com/p4j6w).

Atualmente, é responsável por projetos e manutenções nos arte (e posteriormente editor) de uma editora japonesa.

Emcoordenar 2001, a editora alemã TASCHEN (www. websites do Banco Real. para ser o editor responsável pelas áreas de design e pop culture. Por lá, taschen.com) o contratou desenvolve o programa de títulos nas áreas de propaganda, graphic design, web, animação etc. reis@guilhermo.com J.Wiedemann@taschen.com

TEDdy travel A primeira vez que ouvi falar em TED foi num almoço, em Londres, com o diretor de criação David Alberts, da GREY, em 2005. Afinal, o que era TED (que se define por Technology Entertainment, Design)?

Ele me contava entusiasmado sobre o fato dessa conferência, em Monterrey, na Califórnia, conseguir concentrar tantos cientistas, artistas, tecnólogos, empresários etc. Em 2006, inscrevime para o evento, que aparentemente está sempre rapidamente esgotado e consegui minha vaga para o desse ano.

Nesse momento, sentado no aeroporto de Los Angeles (esperando meu vôo de volta para Londres) e ainda digerindo as palestras que tive, quero tentar passar não só o que a TED oferece, mas quero ser um testemunho entusiasmado de que também podemos fazer muitas coisas para promover crescimento (tópico dos quentes) com investimento em cérebro!

Primeiro, os parâmetros técnicos: a conferência dura quatro dias e reúne em torno de mil atendentes e, nesse ano, 50 palestrantes. A listas desses últimos, costurada com brilhantismo, vai de Bill Clinton, Paul Simon, Tracy Chapman à Caroline Porco (cientista chefe da missão a Saturno), Lawrence Lessig (Creative Commons) e Phillipe Starck (sem apresentações). O mote desse ano, simplesmente “Icons, Geniouses, Mavericks”. Pensar pequeno aqui é realmente ter pesadelo, reforçando minha frase favorita. Não deixem de ver a lista completa de palestrantes, no site www.ted.com.

A Califórnia é realmente um país à parte. Todo esforço e investimento nos melhores laboratórios de tecnologia na região, incluindo aí as universidades, mostra mais um vez que o investimento em longo prazo é realmente o que interessa para um país.

Desde os anos 60, eles levam pesquisadores do mundo inteiro para a região e, numa combinação bem sucedida de esforço acadêmico e empresarial, uma quantidade enorme de empresas de tecnologia brota sem dar sinal de desaquecimento (mesmo depois que a “bolha” estourou).

Umas das idéias dessa conferência é que, além de todos os seminários, os atendentes possam compartilhar as experiências e enxergar oportunidades antes não percebidas. E gente para isso não falta. Cheguei a conversar com Chad Hurley (YouTube) e Sergei Brin (Google). A atriz Meg Ryan ainda quase tropeçou em mim.

O espírito não é tanto internacional, é californiano mesmo, mas logo fiz uma turma que incluía um francês, um chinês, uns dois americanos e um peruano (com o qual conversei até a hora de embarcar). Na parte das dezenas de cartões que se pode trocar, o mais legal é realmente trocar idéias com as outras pessoas. Existem sempre oportunidades em toda parte.

Celebrada pelas maiores mídias, tais como NY Times e Business Week, essa conferência tem crescido em importância. Desde a sua aquisição, em 2002, por Chris Anderson, um publisher inglês, tem se tornado bem mais internacional, com a organização de eventos em Oxford, na Inglaterra, e TED África, na Tanzânia, em breve. Um dos grandes highlights é hoje o TED Prize, que agracia todos os anos, com cem mil dólares, três pessoas, sendo que dessa vez os premiados

internacional :: 65

“Quero ser um testemunho entusiasmado de que também

“É preciso criar as casas, os prédios, as praças e principalmente as placas de sinalização.”

podemos fazer muitas coisas para promover crescimento com investimento em cérebro!”

foram o ex-presidente Bill Clinton, o biologista E.O.Wilson e o fotógrafo de guerra James Nachtwey.

Não tinham muitos brasileiros por lá. No site de social networking do evento, era possível encontrar algumas pessoas, mas que, na maioria, tinham alguma relação com o Brasil. Porém, o arquiteto e urbanista Jaime Lerner (www. jaimelerner.com) deu uma brilhante palestra sobre cidades e como se pode contornar problemas bastante complicados com soluções muitas vezes simples. Sua defesa apaixonada sobre urbanismo e educação das crianças arrancou aplausos no público que ficou de pé ao final da sua palestra.

Da minha parte, vou voltar correndo para os meus livros, ainda tentando absorver tudo que aprendi e escutei. Vou ficar mais conectado a todas as oportunidades que estão a nossa disposição. Se fosse tirar um programa de livros da TED, eu teria certamente mais de 20 títulos (isso fazendo uma filtragem e selecionando os com mais apelo comercial).

Se você não for a TED no próximo ano, o que só de conferência custaria seis mil dólares, você pode dar download de muitos podcasts no site (é só seguir TED Talks). Garanto a satisfação! Você vai achar palestras do Al Gore até o designer Ross Lovegrove, e muitas outras de grande valor. São mais de 60 palestras que não custam nada e valem de grande inspiração, esteja você em ciência, tecnologia, entretenimento, política, ou negócios.

66 :: arquitetura da informação

Luiz Agner Guilhermo Reis Ilustrador e designer. Doutorando em Design pela PUC-Rio, é professor da Escola de Comunicação e Especialista em Arquitetura de Informação e Usabilidade. É autor do Kit de Conhecimento sobre AI Artes da UniverCidade e da pós em usabilidade de interfaces da PUC-Rio. Além de dar aulas, trabalha (http://tinyurl.com/p4j6w). Atualmente, é responsável por coordenar projetos e manutenções nos atualmente no IBGE. É autor do livro “Ergodesign e arquitetura de informação: trabalhando com o websites do Banco Real. usuário” (Quartet, 2006). reis@guilhermo.com luizagner@gmail.com

Cortina de fumaça A quantidade de dados armazenados no mundo atingiu recentemente 160 hexabytes. Pela primeira vez na história, a informação está sendo produzida em um ritmo que excede as nossas habilidades para encontrá-la, gerenciá-la, revisá-la e compreendê-la. Se havia dez revistas de comunicação em 1750, o seu número foi multiplicado para aproximadamente dez mil por volta de 1900.

Hoje, podemos identificar um milhão e cem mil periódicos registrados no ISSN (International Standard Serial Number - Número Internacional Normalizado para Publicações Seriadas), um crescimento exponencial. A tarefa de se manter atualizado na própria área de especialização está se tornando cada vez mais difícil.

Acontece que as pessoas têm níveis de tolerância fisiológica à informação. A quantidade de informação e sua compreensão estão positivamente correlacionadas até um determinado grau. Acima desse ponto, a compreensão começa a declinar. Há um efeito negativo sobre o que já foi aprendido.

Os meios de comunicação despejam em cima de nós volumes cada vez maiores de dados e de notícias a velocidades estonteantes. Encontrar o que é relevante passou a ser uma tarefa árdua. Ninguém merece! Papos-cabeça sobre a Web 2.0 à parte, no passado, a informação costumava passar pelas mãos de bibliotecários, jornalistas, educadores e de fontes com credibilidade. Atualmente, grande parte dela é imprecisa e duvidosa. Na mídia de massa, ainda por cima, mistura-se à quantidade à baixa qualidade.

A crise contemporânea é justamente a de como transformar esse mundaréu de informações em conhecimento. Tudo isso acaba funcionando como uma espécie de cortina de fumaça.

A era da informação consiste, na verdade, numa explosão de dados. E a sociedade está preocupada com a sua incapacidade de tratar, entender, manipular ou compreender a epidemia de dados que passou a tomar conta de nossas vidas.

Elementos isolados de dados, notícias ou estatísticas pouco significam. Só quando são, de alguma forma, agregados ou processados, o seu significado começa a se tornar claro. Como disse o arquiteto Wurman, o exagero típico na nossa era turvou as diferenças entre dados e informação, e embaralhou fatos e conhecimento. Necessitamos de empresas dedicadas a tornar a informação acessível e compreensível, e de novas formas de interpretar os dados. Para isso, é preciso reeducar as pessoas que produzem informação.

Vamos encarar a realidade. Depois de mais de uma década de desenvolvimento da web, a maior parte dos sites ainda são muito ruins. Um site comum, de qualquer complexidade, revela centenas de problemas após poucos testes de usabilidade. Seus conteúdos são redigidos como se fosse propaganda. Redesenham-se os sites sem sucesso, ano após ano. Nas organizações, opções estratégicas são realizadas sem que, ao menos, se perceba que uma decisão foi tomada. O logo e as cores institucionais são consideradas suficientes para desenvolver o branding. Dados são disseminados no lugar da verdadeira informação. Os usuários andam perdidos e frustrados.

arquitetura da informação :: 67

“Vamos encarar realidade.

Depois de mais de uma década “É preciso criar asacasas, os prédios, as praças e principalmente as placas de desenvolvimento da web, a maior parte dos sites ainda são de sinalização.” muito ruins”

Por tudo isso, não é surpreendente a emergência de uma nova profissão para lidar com estas questões: a Arquitetura de Informação. Ela está envolvida com o projeto, a implementação e a manutenção dos espaços informacionais, explicou o “Journal of the American Society for Information Science and Technology”. Os arquitetos não medem esforços para realizar todo o potencial das tecnologias de comunicação. Consideram diversas disciplinas como o ergodesign, a ciência da informação, o marketing estratégico, o webwriting e a programação. Todas estas devem trabalhar em sinergia e evitar uma competição departamental. A Arquitetura de Informação é, por definição, um campo de prática e de estudos interdisciplinares.

Desenvolver um projeto de AI não é simples, porque a linguagem é ambígua, a organização da informação é subjetiva, e os objetivos e as metas de um site são complexos. Mas a Arquitetura é fundamental, pois as empresas precisam considerar os custos relacionados aos ambientes informacionais como: - o custo de encontrar a informação (tempo, frustrações); - o custo de não encontrá-la (decisões erradas, utilização de canais mais caros como, por exemplo, o telefone); - o custo da produção (que envolve a equipe, a tecnologia, o planejamento); - o custo de manutenção (que envolve a gestão e os redesenhos); - o custo dos treinamentos (empregados e o turnover); - o valor da educação (que pode alavancar à venda casada de produtos); - o custo do branding (a construção da reputação dos produtos).

A AI está aberta à atuação do designer, desde que devidamente aparelhado e capacitado, com as ferramentas teóricas e técnicas adequadas. E os melhores designers já sabem que conhecer o modelo mental dos usuários e projetar para ele não representa nenhuma ameaça à sua criatividade.

Crédito da foto: Julia Caldas

68 :: marketing

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

A internet jam-session Que Beethoven não nos ouça, mas talvez ele não tenha sido tão genial assim. Ao menos foi o que aprendi escutando uma entrevista bárbara outro dia com um professor de música.

Beethoven se dava ao luxo de escrever, reescrever, rabiscar, rascunhar e ir lapidando suas partituras até o ponto em que estivessem redondas, perfeitas, insuperáveis.

O contraponto a isso é outro tipo de genialidade: um pianista de jazz (Bill Evans foi o exemplo, Bill Evans que eu adoro) improvisa o tempo todo, em tempo real, sem tempo de voltar atrás e alterar o que ficou registrado para todos os tempos pelo microfone implacável. Bom ouvir isso, não? Improviso é nosso nome do meio, improviso sempre foi nosso pulo do gato.

Well, seria um bom pulo-do-gato se caíssemos sempre em pé. Ou se tivéssemos sete vidas.

Vai ver é por isso que desenvolvemos outra tecnologia interessantíssima, o “levanta-sacode-apoeira-dá-a-volta-por-cima”: para dar algum charme que seja a tombos esborrachados.

A nossa arte de disfarçar tombos se tornou tão elaborada que nem percebemos mais a variedade de estilos, nem notamos mais inovações fantásticas na arte de pisar na bola. Eu mesmo já apresentei para vocês diversas gafes invisíveis: projetos que caem no brejo das especificações vagas, prazos que viram fumaça na mágica das promessas incumpríveis etc. etc. etc.

Hoje, tenho a honra de apresentar a vocês um novíssimo e modernérrimo supervilão: o picadinho 2.0. A receita é simples, vocês encontram os ingredientes prontinhos no mercado: - Soluções em diversos sabores, pré-cozidas e... gratuitas; - Designers frilas já acostumados a trabalhar picadinho; - Programadores frilas que fazem projetos como o teu com um pé nas costas; - Um arsenal de ferramentas bacaninhas para garantir que esse povo disperso no espaço e no tempo consiga se misturar: Gmail, Basecamp, Google Docs, MindMeister etc.

Pronto! Nunca foi tão fácil “cozinhar” internet e... Ter uma dor de barriga das boas.

Algo como “faça você mesmo seu piriri”. E aí entra a tremenda originalidade, o segredo da invisibilidade do vilão picadinho 2.0: se ficou ruim, a culpa não é de ninguém.

Ok, como sempre estou carregando nas tintas. É bem possível que fique razoável.

Mas para ficar genial pra valer falta algo que ainda não tem nome, algo que em outro tipo de parto, o parto de verdade com parteira e tudo, aquele que botou no mundo gerações e gerações de seres humanos, se chama... Doula.

(Um detalhe: estou escrevendo esse texto off-line, sem acesso a wikipedias ou similares, portanto vou ter que dar uma de Bill Evans e improvisar sem chance de corrigir qualquer vacilo. Confira se Doula se escreve assim mesmo, por favor).

Doula, segundo uma grande amiga versada em partos, é um personagem tradicional na cultura russa que tem como papel fundamental dar apoio ao parto. Não, ela não faz o parto,

marketing :: 69

“A nossa arte de disfarçar tombos se tornou tão elaborada que nem percebemos mais a variedade de estilos, nem notamos mais inovações fantásticas na arte de pisar na bola”

quem faz é a parteira. Ela simplesmente garante que a mãe se sinta segura, amparada, assistida, sobretudo porque o pai nessa altura ou desmaiou ou mijou nas calças.

Em projetos grandes, as Doulas têm nomes bonitos: gerentes de projeto certificados por PMI, líderes black-belt de gerenciamento de mudanças, business analysts e blá-blá-blá. Mas, no mundo do picadinho 2.0, nesse buffet self-service de coisas pré-mastigadas... Quem garante que nasça um belo bebê interativo e não um jovem Frankenstein feito de partes mal-encaixadas?

Nesse cenário, onde qualquer um pode invocar os poderes de designers e programadores autônomos e remotos, quem garante que alguma mágica ocorra? Ficou fácil comprar as peças avulsas... Mas quem disse que o cliente sabe montar o brinquedo? Não olhem pra mim, não fui eu não :) Mea culpa, eu deveria ter dito. Venho falando há anos sobre projetos “clássicos”, tipo Beethoven, onde primeiro se cria uma belíssima partitura/documentação para só então chamar a orquestra e seu maestro.

Faltou eu dar alguma pista para internet jazzística, a internet improvisada por pequenos ensembles de talentos únicos, essas jam sessions remotas e assíncronas. Mea culpa.

Dou uma pista, então: o improviso absoluto é um mito. Jazzistas praticam muito, grupos ensaiam muito.

Ninguém é doido de gravar algo sem preparo algum. Uma Doula ajudaria? Alguém que segurasse na mão do cliente na hora do parto, alguém que ensaiasse o site, testasse, apontasse melhorias, alguém que poupasse o cliente dos erros mais crassos? Talvez sim. Já fiz esse papel, con mucho gusto. E sei que fez/fiz diferença.

Quem sabe vocês não viram e-Doulas on-demand também?

Ficou curioso sobre o Bill Evans? Procure pelo álbum Conversations with Myself, com gravações caseiras do gênio ensaiando sozinho, ensaiando, improvisando, ensaiando. Genial.

70 :: publicidade on-line

Ricardo Figueira Vice-Presidente de Criação da AgênciaClick. Trabalha com propaganda interativa há mais 10 anos.

Acumula prêmios e participação como jurado em quase todos os festivais internacionais, incluindo CannesLion, London Festival, One Show NY e outros. É membro da Academia de Artes e Ciências Digitais de Nova Iorque e responsável pelas estratégias criativas da AgênciaClick.

Blog: http://ricfigueira.blogspot.com

Banner de 468x60 ou anúncio de 29,7x 21?

Durante muito tempo ouviu-se falar do criativo on-line e do criativo off-line como duas especialidades distintas. Pois bem, concordo totalmente que ninguém põe de pé uma idéia brilhante e impactante dentro de um banner de 14k sem um treinamento-ninja e nem tão pouco escreve um bom roteiro com princípio, meio e fim com coerência, estilo e originalidade sem muita labuta.

Até aí, nada de surpreendente, por melhor que seja o conteúdo de um banner de 468x60 ou um anúncio de 29,7 x 21cm. A verdade é que a questão criativa na propaganda hoje em dia não se basta aos formatos, nem tão pouco às especialidades, até porque o consumidor, na figura de usuário, espectador, audiência, colaborador, produtor de conteúdo espontâneo, seja lá qual for o nome que daremos, passou os últimos 60 anos aperfeiçoando o seu interno “traditional advertising ignorator” e acabou se tornando muito mais exigente nas relações com seus produtos, serviços e marcas do que poderíamos imaginar.

Esse consumidor de hoje mudou muito, a ponto de utilizar outros meios de comunicação completamente diferentes que nem existiam há 15 anos. Passou também a se relacionar individualmente e grupalmente em rede, em tempo real. Ganhou o poder de manifestar publicamente a sua opinião e a sua experiência com uma marca, chegando ao ponto de possuir a expectativa de obter a personalização das coisas de acordo com as suas necessidades. E isso não é novidade para ninguém há, pelo menos, cinco anos. Hoje, então, não se fala de outra coisa.

Mas e o mercado publicitário acompanhou essa mudança? Enfim, mudou também? Mudou a teoria, mas mudou pouco na prática, criou uma infinidade de nomenclaturas e modelos de business para cada abordagem de comunicação que fosse possível padronizar. Com isso, acabou perdendo sobretudo originalidade e flexibilidade, tornando-se prisioneiro dos seus próprios kits de veiculação em vez de atuar com soluções mais profundas aos contextos relevantes da vida de cada público-alvo.

Hoje, ainda tem um monte de gente correndo atrás de uma “nova mídia” que até então poderia faltar nos seus kits mais modernos, para simplesmente fazer o banner com a cara de outdoor, e o pior, com o mesmo propósito. Só que agora, anos depois, a replicação da mesma experiência de um outdoor em 360 graus dificilmente cola. Não se trata mais de só criar freqüência de uma mesma mensagem em todas as mídias possíveis, até porque, se precisa de tanta freqüência assim para alguém se lembrar de algo, tem alguma coisa errada, né? Não se trata mais de repetir a mesma mensagem até o consumidor não agüentar mais.

Trata-se de proporcionar a ele experiências tão interessantes e pertinentes que ele não vai esquecer, principalmente se acontecer num contexto adequado para isso.

Agora, tirando das entrelinhas e falando abertamente, o bom criativo não é on-line nem off-line. É aquele que está ligado que uma prestação de serviço pode ter um molho especial para criar um diferencial ou uma satisfação a mais; que um meio proporciona muito mais do que a veiculação de uma mensagem; que uma mídia pode ser inventada a cada iniciativa; que

publicidade on-line :: 71

“A verdade é que o criativo de interatividade hoje traz uma vantagem abissal sobre o da propaganda tradicional”

faz parte do trabalho criativo criar o contexto inesperado em que ela vai impactar o consumidor, ou que os consumidores são os maiores porta-vozes de um benefício de um produto ou serviço.

E, apesar de não haver distinção entre as especialidades criativas, a verdade é que o criativo de interatividade hoje traz uma vantagem natural sobre o da propaganda tradicional no desenvolvimento de estratégias de comunicação de mão-dupla, em que tanto marca quanto consumidor tem voz ativa, afinal há 10 anos ele vem sendo treinado para isso.

A internet acabou sendo um meio capaz de reunir todas as vertentes do marketing e abriu essa brecha, inclusive ao inspirar a criação de formatos aparentemente tradicionais, como filme e impresso, porém de forma interativa. Espertos serão aqueles que estiverem antenados a esse movimento e não se renderem às engrenagens da reprodução industrial da comunicação, por mais sedutora que seja a proposta. Fácil? Não, fácil não vai ser, afinal ainda tem muita gente vivendo o discurso de Ford sobre eficiência produtiva: “Você pode escolher um carro de qualquer cor, desde que ele seja preto”.

72 :: webdesign

Luli Radfahrer PhD em Comunicação Digital, já dirigiu a divisão de internet de algumas das maiores agências de propaganda e de alguns dos maiores portais do Brasil. Hoje, é Professor-Doutor da ECA-USP, Diretor Associado do Museu de Arte Contemporânea e consultor independente. Autor do livro ‘design/web/ design:2’, administra uma comunidade de difusão do conhecimento digital pelo País. luli@luli.com.br

Steve Jobs, Bono, Al Gore e os novos professores Hoje em dia é bem mais fácil ser autodidata do que era há pouco mais de uma década.

Mesmo os que têm medo do excesso de conteúdo de qualidade duvidosa que existe por aí podem levantar, sem muito esforço, uma relação de bons livros a respeito de qualquer assunto na Wikipedia ou no serviço de listas da Amazon.

Se é assim, para quê escola? Considerando que o conhecimento se desatualiza em tempos cada vez mais curtos, faz algum sentido freqüentar durante alguns anos os bancos de uma faculdade? Ou seria muito melhor, mais abrangente e barato montar seu próprio aprendizado por conta própria, em um programa contínuo?

Por mais que a proposta faça sentido, a resposta não é tão simples. Para começar, porque o aprendizado contínuo demanda um esforço considerável, ainda mais se for por conta própria.

Se fosse fácil, seria muito maior o número de pessoas em perfeita forma física que saberiam dançar, falar várias línguas estrangeiras, tocar algum instrumento e lutar artes marciais.

Além disso, existe a velha questão do critério. Todos conhecemos aqueles sujeitos “sem noção” que, por não ter uma clara definição do que é adequado - em vestimenta, em etiqueta, em decoração, em conhecimento técnico seja qual for a área - se expõem ao ridículo. Daí o sucesso da geração auto-ajuda: como não há formação clara, todos têm medo de errar.

Por mais que possam contribuir para “construir noção”, não é novidade que as escolas estão muito longe de se tornarem paraísos. Mesmo em países com universidades de grande reputação há professores de péssima qualidade. Aqui no Brasil, poucos se deram conta que a escola com maior nota no ENEM ficava no Piauí. Uma educação de qualidade depende, acima de tudo, da vontade de aprender. Isso não é ensinado, mas pode ser inspirado. Professores atualizados em escolas bem-equipadas são apenas parte do processo. O que vai fazer a diferença é o brilho nos olhos de alunos apaixonados pelo que descobrem.

Na universidade tradicional existe a “livre-docência”. Ela é uma espécie de título atribuído a um pesquisador que, depois de ter concluído o Mestrado e o Doutorado, pode finalmente realizar pesquisas acadêmicas sem orientador. É uma carta de alforria, normalmente relacionada ao conjunto da obra. No mundo profissional, não é preciso tanto esforço. Depois de alguns anos de experiência profissional, é fácil identificar as principais deficiências e necessidades de aprimoramento. Cursos técnicos, administração, planejamento são os mais procurados. Não há dúvida que eles sejam úteis, mas, na maioria das vezes, só reforçam o ponto de vista que já se tem. Ao contrário da escola convencional, raramente se é contrariado em um curso desses. Além disso, boa parte do sucesso dos cursos de extensão deve-se ao fato que sua freqüência não é obrigatória.

webdesign :: 73

“Na sociedade da informação, a função do professor é definir parâmetros para ser o maestro do conteúdo disponível”

Isso cria um problema. Como o aluno não é questionado, não amplia sua perspectiva de mundo e não é capaz de identificar, aglutinar (ou até mesmo prever) tendências. Como não foi desafiado a pensar em áreas além da sua, não consegue desenvolver novas soluções. Em outras palavras, é criativamente nulo fora de sua área. Você certamente já viu figuras assim em autodidatas por aí. Na sua compulsão por cursos, acabam agindo como fashion victims - conhecem a fundo a tendência do momento, mas são incapazes de imaginar como se chegou a ela.

Um professor não é (ou não deveria ser) uma fonte de informação, mas de inspiração. Sob esse aspecto, Steve Jobs, Bono e Al Gore são excelentes professores. No entanto, ao longo da história essas funções se misturaram. À medida que a informação é abundante e acessível, o fornecedor de conteúdo se torna dispensável. O de orientação, pelo contrário, cada vez mais fundamental. O processo que elimina o primeiro deixa a seleção e controle das fontes de referência a cargo do aluno. Como é desprovido de noção, é natural que ele seja tolerante com seus próprios vícios, encorajando a polarização e alienação.

Na sociedade da informação, a função do professor é definir parâmetros para ser o maestro do conteúdo disponível. Ele não precisa identificar o novo - isso é feito pelos próprios alunos, mais competentes para a tarefa. Ele tampouco precisa se opor às novas tecnologias ou alertar sobre seus excessos. Isso já é feito pelos pais, mídia e sociedade.

Um professor de verdade não se intimida com o novo, muito pelo contrário. Cabe a ele estimular o debate e desenvolver a curiosidade para combater estereótipos, gerar conhecimento coletivo, filtrar o excesso de informação, influenciar e formar os formadores de opinião. Ao compartilhar experiências para desenvolver o senso crítico em seus alunos, poderá guiá-los através dos novos cenários. Só assim eles serão capazes de selecionar as opções que lhes são oferecidas - de crescer, enfim.

Parece catequese? Não é tão diferente assim.

Promoção assine um plano de hospedagem efetue o pagamento anual e ganhe um pendrive ou uma webcam. Confira o regulamento em nosso site. www.siweb.com.br tel: (11) 4063.8047 info@siweb.com.br

Empresa de respeito, credibilidade, honestidade, consolidada na carteira de clientes, atendimento e serviços elogiados, valores justos, sua satisfação aqui e garantida.

Hospedagem e registro de sites, planos individuais e revendas. www.datahosting.com.br tel: (11) 6951.2954 - (11) 6939.7305 atendimento@datahosting.com.br

Hospedagem de sites com infra-estrutura de altíssimo nível, planos a partir de R$ 8,90/mês. HTML, PHP, CGI, Flash, FrontPage, DreamWeaver, MySql, e-mail com anti-vírus/spam, suporte 24x7 entre outros recursos. www.hphost.com.br tel: (11) 6684.9597 info@hphost.com.br

A Informática Online.Net está preparada para hospedar seu site, nosso DataCenter possui servidores de última geração, nossos backbones sempre irão propiciar ao seu visitante uma alta velocidade e estabilidade de conexão. www.informaticasp.com.br tel: (11) 6944.2566 sac@informaticasp.com.br

Oferece hospedagem profissional linux e windows com recursos grátis como loja virtual, blog, enquete, boleto.

Possui planos de revenda ideais para webdesigners.

Suporte qualificado 24 horas e registro de domínios. www.portal123.com/ tel: Minas Gerais (31) 3761.2253 São Paulo (11) 4052.9253 suporte@portal123.com.br

E-mail de 1GB, webmail com leitor de notícias e disco virtual.

Soluções completas para webdesigners e desenvolvedores.

Qualidade, estabilidade e segurança. www.speedhost.com.br tel: São Paulo (11) 5644-1047 Rio de Janeiro (21) 3523-0387 Paraná (41) 3015-3077

Hospedagem de Sites, Revenda de Hospedagem e Registro de Domínios, tecnologia ASP, PHP e .net no mesmo plano, teste grátis por 30 dias e comprove a qualidade de nossa infra-estrutura e atendimento. www.redehost.com.br tel: Rio Grande do Sul (51) 3042.2030 São Paulo (11) 4063.7574 Rio de Janeiro (21) 3527.0848 comercial@redehost.com.br

Seja seu próprio servidor de hospedagem em hospede você mesmo o site de seus clientes, ilimitados domínios e e-mails, painel de controle CPanel para você e seus clientes, estatísticas, webmail, etc www.hospedagem.srv.br tel. (11) 4816.1994 hospedagem@hospedagem.srv.br

Hospede seu site com MYSQL 5.0 grátis, suporte integrado a .NET 2.0, PHP 5.2 e ASP no mesmo ambiente. Conheça também nosso plano de parceiro comissionado e ganhe comissões mensais de até 25%. www.iphotel.com.br tel: (11) 6971.0438

“ Há 6 anos no mercado, oferecemos planos HTML, PHP e ASP na medida para sua necessidade. Planos à partir de R$9,90 mensais.

Promoção: Utilize o código “webdesign” na inscrição e ganhe 20% de desconto!” www.sitehosting.com.br suporte@sitehosting.com.br

Hospedagem de sites em plataforma Linux e Windows.

Registro gratuito de domínios internacionais, acesse o nosso site e participe de nossa promoção. www.rjhost.com.br tel: (21) 2577.5545 vendas@rjhost.com.br

Parceria Tehospedo e você, Designer: a cada indicação você ganha 2 meses grátis para seu site, a cada 10, um site hospedado gratuitamente. Consulte mais vantagens. www.tehospedo.com.br/designer tel: RS (51) 3227.7727 / capitais de SP/RJ/MG/DF/ PR/SC 4062.1432, GO (62) 4052.1432 comercial@tehospedo.com.br

A EHB(ExtremeHostBrasil) trabalha com Hospedagem PHP ou ASP com servidores de ultima geração, utilizando Datacenters renomados para garantir o máximo de estabilidade em seu site. www.extremehostbrasil.com tel:(47)8405.4353 fale_conosco@extremehostbrasil.com

1) Alta Disponibilidade, Datacenter Brasil Telecom.

2) Link no Brasil, alta velocidade e alto desempenho.

3) Dotnet1/2, PHP4/5, ambiente integrado, o cliente escolhe.

4) Controle Total, você mesmo controla tudo pelo painel.

5) Suporte telefonico exclusivo, direto e sem intermediarios. www.develsoft.com.br/webhost tel: (16) 3618.1493 ou (16) 8123.4599

R$ 5 mensais ou R$ 50 ao ano. 800MB de espaço em disco, 20GB de transferência,PHP, MySQL, Emails e subdomínios ilimitados.Também registramos seu domínio. Atendimento imediato pelo MSN. www.triangulohost.com.br tel: (34) 3316-2433 hostmaster@triangulohost.com.br

Hospedagem de Sites com segurança e estabilidade total para os clientes mais exigentes nas plataformas Linux e Windows. Infra-estrutura de altíssima qualidade.

Planos de Revenda e VPS. www.ativahost.com tel: (21) 2238-3407 vendas@ativahost.com

Hospedagem de Sites com infra-estrutura no Brasil, 6 anos no mercado, multi-serviços para você e seus clientes.

Planos Windows e Linux, antivírus, anti-spam, banco de dados, relatórios de acesso, disponibilidade de 99,5%. www.creativehost.com.br tel: (11) 3849.1166 atendimento@creativehost.com.br

Para anunciar nesta seção, envie um e-mail para publicidade@arteccom.com.br, com o título "busca host" ou ligue para (21) 2253.0596