Ed16

abril 2005 :: ano 2 :: nº16 :: www.arteccom.com.br/webdesign R$ 7,90

e d i t o r a

arteccom

TABLELESS: a nova web motivos de sobra para você adotar esse formato

portfólio: Orange Design A competição é muito grande, pense sempre em ir além do que lhe foi solicitado Renato Nascimento

e-mais: Vídeo na internet conheça os formatos e compactações ideais para se disponibilizar vídeos na rede

colunas: Bruno Rodrigues mostra os princípios básicos da Arquitetura de Informação para se construir uma navegação intuitiva

estudo de caso: Europa Filmes descubra de que maneira esse site transportou a emoção dos telões para a web

direitos autorais

3

designer, gerente de projetos, diretor de agência, enfim, seja qual for o seu cargo, você precisa aprender sobre Tableless. Nesta edição, a Webdesign traz uma matéria especial sobre a construção de sites sem tabelas, com todas as informações para que você conheça melhor essa metodologia. São argumentos suficientes para convencer qualquer pessoa a adotar essa nova metodologia. A revista traz também as recomendações do W3C para que seu site seja visualizado por diferentes navegadores, plataformas e conexões.

Equipe

adriana@arteccom.com.br

Direção de Arte Patrícia Maia patricia@arteccom.com.br

Ilustração Beto Vieira beto@arteccom.com.br

Diagramação Jeferso n Costa jeferson@arteccom.com.br

Direção de Redação Andr é Philipp e Iunes andre@arteccom.com.br

Redação Bet e V e i g a bete@arteccom.com.br

Escolhemos esse tema a partir das sugestões que recebemos de nossos leitores. E, este mês, tivemos uma grande surpresa com o email de Nádia Devigilli, contando que abriu uma comunidade (Revista Webdesign) no Orkut que, em menos de dez dias, já tem 74 membros.

Parabéns, Nádia, pela iniciativa! Esperamos superar sempre as expectativas de sua comunidade em relação aos temas propostos, sugestões

Tatiana Serra tatiana@arteccom.com.br

Vaness a Barbosa vanessa@arteccom.com.br

Assinaturas Jan e Costa jane@arteccom.com.br

Gerência de Tecnologia Fabi o Pinheiro fabio@arteccom.com.br

etc. Começando por esta!

Bem, para atender a tantos pedidos, a partir de maio, vamos contar também com um tutorial fixo sobre Tableless, assinado por professores da área. Aguardem...

Webdeveloping Eric Nascimento eric@arteccom.com.br

Financeiro Luana Rocha luana@arteccom.com.br

E pelo que tudo indica, aí vem a nova web! Boa leitura!

Um grande abraço, Adriana Melo

A Arteccom é uma empresa de design, especializada na criação de sites e responsável pelos seguintes projetos: Revista Webdesign :: www.arteccom.com.br/webdesign Curso Web para Designers :: www.arteccom.com.br/curso Encontro de Web Design :: www.arteccom.com.br/encontro Portal Banana Design :: www.bananadesign.com.br

Criação e edição

Adriana Melo Obs: Para quem faz parte do Orkut, o endereço da comunidade é: www.orkut.com/community.aspx?cmm=1509934

www.arteccom.com.br

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

Distribuição www.chinaglia.com.br

4

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

quem somos

Se você é programador, gerente de tecnologia, desenvolvedor,

Editorial

Aí vem a nova web...

Direção Geral Adriana Melo

menu apresentação

matéria de capa

pág. 4 quem somos

pág. 20 entrevista: Prof. Bechara

pág. 5 menu

pág. 24 Tableless: de volta à simplicidade

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

e-mais pág. 40 estudo de caso: Europa Filmes pág. 45 artigo: Luz, câmera... download! pág. 54 tutorial : Álbum Digital - Parte II

fique por dentro pág. 8 direito na web pág. 9 adote esta página

com a palavra

pág. 10 clipping

pág. 56 criação: Marcos Nähr pág. 58 webwriting: Bruno Rodrigues

portfólio

pág. 60 bula da Catunda: Marcela Catunda

pág. 12 veterano: Orange Design

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

pág. 18 calouro: Fabrício Cidral

pág. 64 webdesign: Luli Radfahrer

emails Assunto: Tableless já!

Assunto: Contrato de freela

Assunto: Quanto posso cobrar de entrada?

Gostaria de ler uma matéria

Estou querendo começar a

sobre a técnica Tableless

trabalhar como freelancer e

Escolhendo revistas em uma

com seus prós e contras, se é

com essa vontade também

banca, vi a edição 13 da

que existem contras, pois de

surgiram várias dúvidas.

Webdesign. Comprei, me

alguns trabalhos pra cá estou

Sendo Pessoa Física, posso

apaixonei pela revista e decidi

utilizando tableless e ainda

fazer um contrato? E se me

comprá-la sempre. Adoro como

não descobri nada de ruim no

pedirem uma nota fiscal, o

é escrita, com assuntos de

método.

que devo fazer? Acredito que

interesse para iniciantes e

Rafael Kunz rafael@fast4web.com.br

muitas pessoas que tentam

especialistas. Fiquei com uma

começar algo na área de

dúvida sobre a reportagem de

Web, também possuem essas

capa da edição 14: a agência de

dúvidas.

um amigo foi fechada devido a

Nelson Saraiva nsaraiva@email.com

um cliente que não pagou um

A revista é show. Sugiro a vocês que dêem uma atenção para os chamados web standarts, CSS, tableless .

Hoje todos os designers estão falando muito nisso.

Cícero Monthiel monthiel@gmail.com

Assunto: A caminho do Com certeza, Nelson!

Seria legal você entrar em contato com a Dra. Marianna, nossa colunista sobre direito na web. Este tema é

Olá, Rafael e Cícero!

bem bacana para ser explorado na

Seus pedidos foram atendidos. Leiam

revista. Converse com ela!

sucesso Depois de 14 edições da revista Webdesign e após ler a matéria do René de Paula entitulada A caminho do sucesso , cheguei à

a matéria nesta mesma edição e

conclusão: preciso estudar,

depois me digam se gostaram, ok?

definitivamente. Como diz o Assunto: Que curso fazer?

Curso o 2º ano do ensino médio e tenho que começar a me definir sobre que curso fazer. Não sei se faço ciência da computação, design gráfico ou webdesign, sendo que sequer tenho idéia de quais faculdades oferecem

Assunto: Conceitos Assino a revista desde o Encontro de Web Design em Brasília e, sem dúvida, não me arrependo. O diferencial é o foco na teoria e no mercado, deixando de lado aqueles tutoriais que vemos

meu amigo jornalista Israel Oliveira: Estamos na era do

dúvidas, ok?

em várias outras revistas.

Estão de parabéns.

Bruno Perotto bruno@net4u.com.br

Obrigada, Bruno! E este ano o evento vai para Brasília novamente!

esses elogios depois de tantos esforços.

A Arteccom agradece! Bem, estou vendo que a Dra. Marianna está bem requisitada

dúvida, poderá falar sobre este assunto

Webdesign me ajudou muito,

em sua coluna. Boa sorte!

por se tratar de uma revista CONCEITUAL e não uma Veja no CD 14.000 modelos de templates para usar no Nos encontramos no 10º

Cristiano Santos cristiano@w4u.com.br

Assunto: Tabela de preços Olá! Li em um dos números da Webdesign, que a revista tinha feito um levantamento de valores para desenvolvimento de sites. Gostaria de saber em qual edição a tabela se

Oi, Cristiano. Fiquei super feliz com sua decisão de fazer uma faculdade na área que você gosta! Que bom,

encontra, pois gostaria de comprá-la.

Rosangela M. Santana rosangela_ms@uol.com.br

acho que a revista está cumprindo seu papel. E, pelo que estou vendo,

Colocamos a tabela no site da revista,

encontrarei vários amigos no Encontro

Rosangela:

de Web! Por favor, não deixe de falar

www.arteccom.com.br/webdesign

comigo para nos conhecermos pessoalmente!

Nos vemos lá! Abraços, Adriana. fale conosco pelo site www.arteccom.com.br/webdesign :: Os emails são apresentados resumidamente. :: Sugestões dadas através dos emails enviados à revista passam a ser de propriedade da Arteccom.

6

Olá, Carol! Foi muito gratificante receber

8. Caso ela considere pertinente sua

Abraços,

responder, na própria matéria, suas

entrada?

Carolina M. Oliveira cacarosenbaunm@yahoo.com.br

conhece! E nisso, a revista

EWD, lá na UERJ!

maio. Vamos aproveitar e tentar

direito de cobrar até quanto de

nesta edição! O email dela está na página

Gabriel Muniz Antonio gabriel.muniz@terra.com.br

cursos. Acho que será a edição de

coisas desse tipo? Tenho o

seja, você vale o quanto

seu site!

edição inteira, bem bacana, sobre

Como faço para me proteger de

capitalismo cognitivo, ou

esses dois últimos cursos.

Gabriel, estamos preparando uma

trabalho de cerca de 6 mil reais.

7

direito na web

Logotipo na internet Uma cliente pediu que eu desenvolvesse um site e também criasse um logotipo. Fiz o trabalho e, ao final, combinamos que ela poderia usar o logo somente na internet.

Como funciona a questão da propriedade neste caso? A marca é dela e pode ser usada em qualquer lugar (imprimir cartões, estampar em camisetas etc.)? Se ela publicar um livro, eu tenho participação nisto?

O leitor solicitou anonimato.

Marianna Furtado é advogada com pós-graduação em Direito da Propriedade Intelectual pela PUC-Rio. Atualmente, pertence à equipe do escritório

Primeiramente, há que se esclarecer

lho ou prestação de serviço, e sem a utili-

que, diferentemente do direito autoral, que

zação de qualquer recurso do empregador

tem sua proteção e propriedade nascida

e contratante.

quando da criação da obra, independente-

Para a marca pertencer a ambos, em-

mente de registro, a marca (logotipo) tem no

pregador/contratante e empregado/con-

registro a condição primeira do direito de pro-

tratado, na criação e desenvolvimento da

priedade, ou seja, determinada pessoa (física

marca deverá ocorrer uma contribuição

Lioce Advogados.

ou jurídica) só pode ser considerada titular de

pessoal do empregado, desvinculada do

Envie sua dúvida para:

uma marca, caso conste como titular de seu

que fora acordado anteriormente, aliada à

respectivo registro.

utilização de recursos, meios, dados, mate-

Montaury Pimenta, Machado &

marianna@montaury.com.br

Portanto, na prática, se você tiver registrado o logo perante o Instituto Nacional

pregador ou contratante.

da Propriedade Industrial, a propriedade da

Há que se ressaltar que o ideal para se

marca será sua, e sua cliente só poderá usar

evitar qualquer tipo de conflito é que seja fir-

da forma autorizada por você. Caso sua cli-

mado um contrato por escrito, onde conste

ente a tenha registrado, a propriedade será

necessariamente cláusula referente à propri-

dela e poderá usá-la como bem entender.

edade do objeto contratado.

Contudo, existem algumas regras que regem a titularidade quando a criação da marca advém de uma relação de emprego ou prestação de serviço, senão vejamos: O empregador/contratante só terá propriedade exclusiva da marca caso tenha contratado o profissional especificamente para a sua criação e seu desenvolvimento.

Por outro lado, o empregado/contratado só terá a propriedade exclusiva da marca na hipótese da criação da marca não ter qualquer relação com o contrato de traba-

8

riais, instalações ou equipamentos do em-

adote esta página A renda deste anúncio é integralmente revertida para o projeto Magê Malien - Crianças que brilham.

Anunciando aqui, a CADRITECH contribuiu com o Magê Malien, projeto social que possibilita a crianças de comunidades carentes, o acesso à educação, arte e cultura, através da prática da capoeira, dança e oficinas de teatro.

Faça como a CADRITECH, anuncie nesta página e ajude a manter o brilho dessas crianças. o AZMT, anuncie nesta página e ajude a manter o brilho dessas crianças.

Informações: tel. 21 2253-2464/e-mail publicidade@arteccom.com.br

adote esta página !

Visite o site www.arteccom.com.br/magemalien

9 9

clipping Microsoft lançará Office com chat e voz sobre IP

FIFA testará bola de futebol com chip Uma nova bola fabricada pela Adidas, equipada com um microchip, será

Em princípio, o Istambul, codinome de um novo programa desenvolvido pela Microsoft, parece uma cópia melhorada do MSN Messenger. Mas pelo que se sabe até agora, ele é, na realidade, um Office de tripla ação, que oferece um show de multimídia à disposição dos internautas, principalmente para os que fazem negócios online, o que significa um tremenda

testada pela Fifa no mundial sub-17, que será realizado no Peru, em outubro. Quando a bola transpõe a linha de gol, emite um bipe que é enviado a um dispositivo semelhante a um relógio, usado pelo árbitro. A tecnologia, acredita, Sepp Blatter, presidente da FIFA, pode solucionar casos de gols duvidosos.

A novidade foi experimentada com sucesso em uma partida entre titulares e reservas de

redução de custos.

um time de Nuremberg, na Alemanha,

Pelo Istambul, será possível, por exemplo, realizar videoconferências, fazer chamadas telefônicas pela internet, editar documentos do Word e exibir slides criados no PowerPoint. O software parece ser também democrático, uma vez que terá links para seu principais rivais como o AOL

e poderá ser adotada oficialmente no lugar dos controvertidos vídeotapes apresentados pelas emissoras de televisão.

Instant Messenger e o Yahoo Messenger. Seu lançamento está previsto para o segundo semestre deste ano.

(01)

(02)

Estudos para sistema de TV digital envolvem 79 institutos O Sistema Brasileiro de TV Digital, mesmo antes de sua entrada em

Bill Gates, não. Sir Gates, por favor.

Bill Gates, co-fundador da Microsoft e um dos homens mais ricos do mundo, ganhou um dos mais cobiçados lauréis do planeta. No início de março, no Palácio de Buckingham, ele foi consagrado Knight Commander of the Most Excellent Order of the British Empire (Comandante Cavaleiro da Excelsa Ordem do Império Britânico). O título, que data de 1917, lhe foi concedido pela rainha Elizabeth II, por seu notável espírito empreendedor .

Gates é um dos mais importantes líderes do mundo dos negócios na atualidade. E a tecnologia da Microsoft tem tido um profundo e positivo impacto na economia britânica , disse à Reuters, o secretário de Relações Exteriores Jack Straw, justificando a outorga da honraria.

vigor, já está trazendo benefícios para o país, assegurou André de Castro Pereira Nunes, analista de projetos da Financiadora de Estudos e Projetos (Finep), do Ministério da Ciência e Tecnologia, responsável pela execução das Chamadas Públicas de TV Digital.

Só pelo fato de a gente estar conseguindo envolver nesse projeto 79 institutos de pesquisa das mais variadas regiões do País e podendo capacitar 1,2 mil pesquisadores na área de TV digital, só isso já é um benefício enorme para o país , garantiu Nunes. Os pesquisadores estão discutindo como funciona a TV digital, investigando o desenvolvimento de todos os sistemas, a fim de propor saídas para os problemas existentes no Brasil.

Isso dá ao país, ainda de acordo com o analista, a possibilidade de negociar de melhor forma o padrão a ser escolhido, com maior participação dos pesquisadores brasileiros, atendendo às necessidades especiais do Brasil. Os estudos tecnológicos que estão sendo desenvolvidos pelas universidades vão subsidiar o governo na decisão a ser tomada. A vigência do sistema brasileiro de TV digital depende dos estudos tecnológicos, cujos resultados finais deverão ser apresentados até o dia 10 de dezembro. A partir daí, o governo terá alguns meses para

(03)

decidir qual será o padrão adotado para o modelo brasileiro.

(04)

Bíblia tem versão na linguagem dos chats A história da criação do mundo já foi contada em prosa e verso para crianças, deficientes visuais, no cinema, na televisão, em CDs. Faltava uma versão feita especialmente para os freqüentadores de salas de bate-papo online.

O site The Irc Bible preenche a lacuna. Nele, a linguagem formal do Velho e do Novo Testamento é substituída por termos e abreviações típicos dos chats, nem sempre fáceis de decifrar.

O Gênese, por exemplo, começa com o tradicional Deus entra na sala . Em determinado trecho, Ele pergunta se os participantes estão entediados com a conversa e convida-os: Sejam então produtivos e multipliquem-se .

O projeto por ser novo foi iniciado em 2004 ainda está pela metade. Mas promete ser a sensação da Web para este ano.

10

(05)

clipping 49% dos indianos buscam relações extraconjugais na internet Os indianos estão entre os maridos virtualmente mais infiéis: 49% deles procuram relacionamentos extraconjugais na web. As

Etiópia venderá café pela internet Vai aí um cafezinho online? O convite estará valendo a partir de maio, quando a Etiópia começar a leiloar pela internet dez de seus melhores tipos de café. Abraham Begashawe, gerente do Centro de Controle de Qualidade de Café e Chá, do Ministério da Agricultura do país, espera

informações são baseadas em uma pesquisa do site de

que as vendas pela mídia virtual gerem quatro dólares por libra-peso do

relacionamentos CupidBay, divulgada pelo site Vnunet .

grão, bem mais do que os US$ 0,87 alcançados no mercado aberto.

Em segundo lugar, vêm os usuários do Paquistão, com 7% dos maridos infiéis pelo menos no ambiente virtual. Também entre os destaques estão Egito (6%) e Arábia Saudita (5%).

Os britânicos e os norte-americanos estão entre os homens mais fiéis do mundo, afirma a pesquisa. Apenas 1% dos maridos que vivem no Reino Unido acessam sites de relacionamento em busca de aventuras com outras mulheres. Entre os residentes dos EUA, esse valor chega a 2%.

Ainda no grupo dos mais fiéis, destacam-se os internautas da Irlanda e Grécia, com taxas que ficam abaixo de 1%. Os brasileiros não são citados pelo Vnunet .

O estudo mostra a diferença de comportamento entre as várias regiões do

Begashawe, citado pela Reures, conta que 13 provadores dos Estados Unidos, Japão, Nova Zelândia, Holanda e França experimentaram mais de 190 tipos do café etíope, segundo critérios de aroma e sabor, para escolher os dez que estarão em oferta.

A Etiópia produz entre 250.000 e 300.000 toneladas do grão por ano, a maior parte consumida localmente. Com a iniciativa, o país pretende conseguir melhores preços e atrair mais compradores para o produto.

mundo , afirma Francis Deacon, responsável pelo site CupidBay.

(06)

(07)

Bug no Windows XP gera polêmica de especialistas Um alerta sobre nova vulnerabilidade no Windows,

Novas tendências em infra-estrutura Buscando maior qualidade e segurança, a hospedagem de sites e e-mails em servidores dedicados tem sido cada vez mais procurada por empresas de pequeno e médio portes.

Com a evolução das ferramentas para gerenciamento de servidores, o custo de manutenção ficou mais atraente.

A Hostlocation (http://www.hostlocation.com.br), empresa especializada em hospedagem de sites e servidores, anunciou nova versão do seu pacote de gerenciamento de servidores, uma ferramenta que possibilita a administração e integração de ambientes Windows e Linux. Devido aos recursos de integração de plataformas, vários projetos foram viabilizados em empresas dos mais diversos setores , explica Marcelo Safatle, diretor da empresa.

Com o crescimento vertiginoso da oferta de servidores dedicados, alguns aspectos devem ser analisados com atenção, como a infra-estrutura de data center (preferencialmente alocado no Brasil), a forma de gerenciamento da solução e os serviços complementares (firewall, por exemplo).

publicado no fórum da SecurityFocus por um pesquisador, disparou um debate técnico envolvendo especialistas em segurança e a Microsoft.

O pesquisador, identificado como Dejan Lavaja, afirma que o Windows Server 2003 3 o Windows XP Service Pack 2 (com o firewall desligado), estão sujeitos a um velho tipo de ataque de negação de serviço, conhecido desde 1997. Trata-se de um ataque no qual um pacote é enviado tendo como remetente e destinatário a máquina Windows.

Para Lavaja, isso leva ao esgotamento dos recursos do sistema. A Microsoft rebate, dizendo que o impacto de um ataque bem-sucedido seria apenas o de fazer o computador ficar lento por um curto período .

O SANS Institute, especializado em segurança, confirma a existência da vulnerabilidade, mas concorda com a Microsoft. Diz que tentou o ataque e não conseguiu derrubar completamente a máquina Windows. A Secunia, empresa também especializada na área, informa o

(01) http://www.estadao.com.br/tecnologia/internet/2005/mar/08/173.htm (02) http://www.estadao.com.br/tecnologia/informatica/2005/fev/28/41.htm (03) http://www.estadao.com.br/tecnologia/informatica/2005/mar/02/41.htm (04) http://www.estadao.com.br/tecnologia/telecom/2005/mar/06/10.htm

contrário: ela conseguiu, sim, parar o sistema com o tipo de ataque descrito por Dejan Lavaja.

No meio desse desencontro dos especialistas, o certo a

(05) http://www.estadao.com.br/tecnologia/internet/2005/fev/28/111.htm

fazer, para quem usa o Windows XP, é manter o

(06) http://www1.folha.uol.com.br/folha/informatica/ult124u18091.shtml

firewall ligado.

(07) http://www.estadao.com.br/tecnologia/internet/2005/fev/28/137.htm

(08)

(08) http://info.abril.com.br/aberto/infonews/032005/08032005-14.shl

11

portfólio veterano :: Orange Design

Orange Design: colhendo os frutos Por Bete Veiga

Com quase dois anos de mercado, a Orange Design já se mostra madura o suficiente para desenvolver projetos significativos para os mais variados ramos de negócios. Tanto a versatilidade quanto a trajetória de êxito devem-se à experiência e seriedade de seus sócios, Renato Frutuoso Nascimento e Rogério Odorizzi Tonello, ambos diretores de arte.

Trabalhando há mais de sete anos na área de web, eles acumularam uma bagagem profissional capaz de fazer a agência dar bons frutos em tão pouco tempo de existência.

12 12

sócios-diretores. Renato, hoje com 31 anos, formado em Design Gráfico pelo Santa Monica College (Califórnia EUA) e em Design Digital pela UniABC (Universidade do Grande ABC SP), morava nos EUA nessa época e teve oportunidade de conhecer o mundo web em primeira mão. Comprei meu primeiro computador, a internet já estava em grande ascensão, fiquei maravilhado por aquele mundo digital. Na mesma semana, um amigo me apresentou ao Photoshop e a partir daí tudo mudou na minha vida. Vi naquele momento o que eu gostaria de continuar fazendo dali em di-

www.orangedesign.com.br

ante, profissionalmente. Comecei a estudar, a me interessar cada vez mais e não parei . Enquanto isso, Rogério, de 28 anos,

Levamos a palavra design ao pé-da-letra, desenvolvemos proje-

cursava o primeiro ano de faculdade e estagiava na área de web.

tos, logo, na nossa visão, um website completo requer ferramen-

A internet começava a crescer no Brasil. A partir deste momento,

tas, design e conteúdo adequados, enfim, estratégia para atingir

comecei a pegar gosto pela nova mídia e não parei mais. Traba-

o público-alvo. A missão da Orange é juntar todos esses elemen-

lhei como diretor de criação de uma agência de internet nos últi-

tos, gerando um case de sucesso. Para isso, contamos com par-

mos quatro anos .

cerias muito importantes em todos os setores. Por exemplo, para

Renato e Rogério ocupam o tempo livre com surf e futebol,

conteúdo temos parceria com agências de notícias, colunistas,

respectivamente. Renato se autodefine como determinado,

tradutores etc.. A cross media é um fato, a internet tem seu pa-

observador e crítico, sobretudo em relação ao comportamento

pel assim como o rádio, a TV, a mídia impressa; o relacionamento

humano, e confessa ficar 24 horas ligado ao que está relacionado

entre elas pode gerar um resultado muito satisfatório na busca

à mídia. Na mesma linha, Rogério considera-se muito crítico e

por soluções completas , defende Renato.

detalhista, mas também um bom ouvinte de opiniões alheias,

Germinando

para analisar fatos de maneira mais completa e tirar melhor pro-

Um contato no departamento de marketing de uma grande

veito das experiências.

empresa foi o bastante para que eles criassem a oportunidade de

Plantando a semente

transformar um projeto-piloto, sem compromisso, em um projeto

Surgiu como uma idéia surge no meio da madrugada, sem

definitivo, que seria o primeiro de muitos outros. Essa pessoa do

razão específica, quando era apenas um projeto na mente de cada um dos sócios. E agradou a todos , explica Renato o porquê do nome da agência. Dois diretores de criação (sócios), um assistente de produção, uma redatora, um analista de sistemas e um profissional encarregado do atendimento e da área comercial formam a equipe da Orange, que atua nas áreas de Design Digital (soluções completas para internet, planejamento, conteúdo, consultoria, ferramentas de relacionamento e gerenciamento, assessoria, apresentações multimídias) e de Design Gráfico (identidade visual). Marketing e Press também estão entre os serviços oferecidos pela agência, que não se limita apenas ao design.

13 13

portfólio veterano :: Orange Design

Coincidência ou não, tudo começou em 1996 para os dois

portfólio veterano :: Orange Design

marketing comentou sobre nosso interesse em apresentar um

Saber ouvir para personalizar ao máximo

projeto ao presidente da empresa, que concordou em ver nosso

Renato cita o design e a personalização de cada projeto como

trabalho. Montamos a arquitetura toda do site e desenvolvemos

os grandes diferenciais de sua agência. Na condição de maior conhe-

um layout. O presidente da empresa adorou, não questionou

cedor do seu próprio negócio, o cliente pode fornecer dados funda-

nada e nos deu carta branca para prosseguirmos com a monta-

mentais para que o resultado final seja o mais personalizado possível.

gem e publicação do site, que se tornou uma referência no seg-

Com base nessa linha de atendimento, a Orange busca além de sub-

mento . MormaiiDive, Alw Hotéis, Athie|Wohnrath, Alumitrade,

sídios para a criação, conquistar credibilidade. Conhecimento, com-

A Miniatura, Advocacia Motta e Associados, Long Jump,

prometimento, qualidade e transparência são imprescindíveis. Além

Piemonte Ferrari Arquitetura e SPMetals Trade são parte da

de apresentar resultados já obtidos e metodologia de trabalho, é im-

diversificada clientela.

portante mostrar para o cliente o que e por que está sendo feito, que você sabe e acredita num retorno. A confiança do cliente é primordial para o sucesso do seu trabalho .

A partir daí, tudo fica mais fácil e as chances de adequação à imagem do contratante só tendem a aumentar. Personalizamos desde o design até as ferramentas conforme a necessidade do projeto.

Também oferecemos assessoria, essencial para que um trabalho de web obtenha sucesso e atinja seus objetivos. Fazemos um acompanhamento dia-a-dia. Para nós, um projeto nunca tem fim, é um trabalho diário junto ao cliente , esclarece.

Porém, chegar a um consenso junto com o cliente nem sempre é tarefa das mais fáceis. É necessário saber equilibrar as opiniões que os clientes fazem no meio do desenvolvimento do job, mesmo após a aprovação dos layouts. No meio ou no final do projeto sempre surgirão críticas e sugestões, e você tem que saber aceitá-las, ou não, sem comprometer o projeto .

Laboratório Criar é inovar. Por essa razão, a Orange também se dedica a experimentos que tragam novas soluções de design e tecnologia.

Renato relata que a tentativa de adaptar novas ferramentas, principalmente de edição de vídeo para a WEB, é uma constante. O fator peso ainda é o nosso maior inimigo, mas já conseguimos adaptar bastante coisa. No final do ano passado, presenteamos todos os nossos clientes com um cdcard, onde usamos a combinação de Flash, After Effects e Combustion. O resultado ficou muito legal .

Da mesma forma, a cabeça do designer não deixa de ser um laboratório que funciona a todo vapor em busca de inspiração para suas criações. Ao nosso redor tudo é inspiração, a nossa cabeça não pára nunca. Tudo pode ser fonte de idéias, tanto para proje-

14 14

O objetivo desse projeto era criar um portfólio do fotógrafo, focado em seu trabalho, ou seja, imagens. Uma das principais exigências do cliente era que fosse um site dinâmico.

Optamos por desenvolver um projeto totalmente em tos em andamento como para aqueles que já estão no ar e podem

flash, onde seria possível trabalhar com mais liberdade as

ser melhorados . Estudar muito, ler bastante, estar sempre

transições das imagens com animação e som. Foi adotada

antenado nos novos acontecimentos são algumas dicas de Renato,

uma linha clean, com cores claras, essencial para o suces-

que ainda acrescenta: Nos tempos de hoje, a tecnologia evolui a

so do projeto, pois assim seria possível fixar sempre a

cada hora e precisamos estar sempre atualizados. A competição é

atenção do usuário para os trabalhos do fotógrafo.

muito grande, pense sempre em ir além do que lhe foi solicitado .

Criar um espaço que comportasse tanto fotos verti-

Semear para colher

cais quanto horizontais, sem comprometer a harmonia do

Provar a viabilidade de estar na web ainda é um desafio, pois

design, foi um desafio. Então, tivemos a idéia de fixar uma

muitos empresários permanecem descrentes ou indiferentes aos

barra destinada à legenda das imagens. Usando um pouco

efeitos positivos que uma página na internet pode produzir. Mudar

de ActionScript permitimos que essa barra mudasse de

esse quadro é uma das metas da Orange, afirma Renato: A nossa

posição conforme o tamanho da imagem (vertical/hori-

intenção é, com muito trabalho, contribuir para que tenham cada

zontal).

vez mais consciência de que a internet veio para somar e, se for

Separamos os tópicos do menu, segmentando por

feita com planejamento, pode contribuir demais para a evolução

áreas da fotografia (Ex.: produtos, modelo, editorial, ilus-

de qualquer empresa . Por esse motivo, entre outros, a filosofia da

trações digitais etc.).

agência é oferecer sempre o melhor serviço e a melhor informa-

Para esse projeto, também adotamos o recurso de

ção, com agilidade e qualidade para o usuário final. Temos orgulho

animação quadro a quadro, onde usamos fotos e efeitos

de tudo o que fazemos dentro da Orange Design, trabalhamos

no flash para simular o fotógrafo tirando uma foto.

muito duro para tudo sair daqui agradando, além do cliente e seu público, a nós mesmos .

No fim, conseguimos um resultado muito legal, o retorno do site foi ótimo e o cliente ficou muito satisfeito .

Recém-inserida no mercado, a agência mantém-se fora de concursos por enquanto. A Orange ainda não participou de nenhuma premiação, nem ganhou nenhum prêmio até agora. Apesar disso, o reconhecimento e os resultados obtidos junto aos nossos clientes é a nossa melhor premiação até o momento , afirma Renato com a satisfação de quem já colhe os primeiros frutos do investimento e dedicação plantados.

A competição é muito grande, pense sempre em ir além do que lhe foi

www.rmtonello.com.br

solicitado . Renato Nascimento

15 15

portfólio veterano :: Orange Design

RM Tonello

portfólio veterano :: Orange Design

Athie|wohnrath

Long Jump

O objetivo era desenvolver um projeto à altura da

A proposta para este cliente era atingir um público

empresa, o maior escritório de arquitetura corporativa da

composto de lojistas, representantes e consumidores fi-

América Latina. Foi um desafio, pois era necessário trazer

nais, tudo agregando uma grande quantidade de produtos

para a internet e mostrar para o usuário todo o know-how

e informações. Para isso, decidimos desenvolver um portal

de uma empresa já consolidada no mercado. O cliente veio

destinado a um tema específico, portal vertical . Inicialmen-

com a necessidade de oferecer ao público-alvo um site

te, priorizamos as informações que seriam disponibilizadas

institucional. Fomos além, buscamos através de pesqui-

na home, em seguida, buscamos quais os serviços relevan-

sas, um estudo de mercado, onde levantamos informações

tes seriam oferecidos aos usuários. As cores vibrantes es-

necessárias para um diferencial em relação à concorrên-

colhidas para o site buscam destacar os produtos e criar um

cia. Apresentamos, então, um projeto agregando serviços

universo lúdico. Animações foram usadas para deixar o site

focados na mostra de imagens de trabalhos desenvolvidos

mais alegre e dinâmico, mas sem perder a navegabilidade

pela empresa (projetos corporativos). Sempre buscando

simples e eficiente. Dentro do site, o usuário pode se ca-

integrar design e conteúdo, chegamos à conclusão de que

dastrar para receber informações sobre sua marca ou per-

teríamos de equilibrar o uso entre html e flash. Desenvol-

sonagem preferidas, saber aonde está a loja mais próxima

vemos um design discreto e moderno, seguindo a identida-

do seu comércio ou residência para adquirir um produto e

de visual da empresa. Na seção Portfólio , o uso do flash

ler informações referentes ao que está acontecendo no

veio para sugerir sofisticação e minimizar a impressão cau-

mercado específico, além de ver detalhadamente todos os

sada pela grande quantidade de imagens, por meio de

produtos comercializados pela empresa separados por mar-

transições entre elas e botões animados. Para a seção

cas e linhas. É importante para o usuário final ver o produ-

Etapas , tínhamos uma outra questão: uma quantidade

to, e para o lojista e o representante, visualizar o produto

grande de texto e uma diagramação a ser apresentada.

dentro, fora da embalagem e montado, por isso, elabora-

Evitar o uso tradicional do scroll era a nossa diretriz para

mos uma capa apresentando todas as marcas. No interior

esta nova etapa, onde utilizamos o flash para facilitar a

de cada marca temos uma capa separada por linha com um

navegação e torná-la mais dinâmica .

preview de todos os produtos da respectiva marca, clicando no produto tem-se todas as informações técnicas do mesmo e fotos complementares .

www.athiewohnrath.com.br

www.longjump.com.br

16 16

17

portfólio calouro :: Fabrício Cidral

Abraçando o mundo

Por Tatiana Serra

Paulista de Piracicaba e trabalhando em Caraguatatuba, o webdesigner Fabrício Cidral encara cada projeto como o projeto de sua vida. Valorizando a sinergia entre agência, webdesigner e parceiros, ele conquista clientes no Brasil e em outros países, à base de seriedade e confiança.

Desde que se encantou por design interativo e pediu de-

tes e algumas marcas, como Caterpillar Brasil e América (USA),

missão de uma agência onde trabalhava como diretor de arte,

BMW Z3 Roadster (USA), Sonystyle (Hungria), Opel Motors

Fabrício passou a se dedicar à multimídia e, há oito anos, traba-

(Hungria), Rootsblogger.com (Israel), Danubio, entre outros.

lha como webdesigner freelancer. Já me aventurei em montar

Como diferencial, Fabrício não vende um site, mas sim, uma

um studio, mas não deu certo. Os clientes queriam ser atendi-

solução para o cliente, e acredita que cada profissional deve

dos por mim e não pelo atendimento , diz o profissional, que

ter seu próprio estilo. Hoje, o empresário busca resultados na

trabalha na área de comunicação visual desde os 15 anos.

internet, e não um site maravilhoso apenas . Ao trabalhar a ima-

Hoje, com 31 anos, o webdesigner trabalha sozinho na parte de criação, porém, conta com um vasto leque de parceiros. Em se

gem de um cliente na web, ele considera que é fundamental conhecer o público-alvo e criar uma navegação mais otimizada.

tratando de web, você não consegue e nem pode querer fazer tudo.

As tecnologias e opções se movem muito rápido, então, cada um na sua especialidade consegue dar mais vazão aos projetos , afirma ele, que prega a humildade como o primeiro passo profissional.

Atualmente, Fabrício desenvolve projetos para agências de publicidade e departamentos de marketing, acreditando que nestas áreas estão os grandes jobs , já que, o mercado de web é muito prostituído . Ele estudou Desenho Industrial e Processamento de Dados, valoriza a carga de conhecimentos adquirida em cursos, mas não acha primordial um webdesigner ser formado. Você tem que estar sempre se reciclando e aprendendo

www.fabriciocidral.com.br

novas tecnologias , além de navegar para ter muitas referências de mercado. É o que recomenda o jovem e experiente profissional.

As agências trabalham com prazos curtos e cobranças diárias dos clientes. Se você atrasar no prazo de entrega, inicia-se o efeito dominó: o prazo da agência atrasa e ela fica mal vista pelos clientes , diz Fabrício, destacando a filha Letícia como seu melhor projeto e responsável pela seriedade, amadurecimento e alegria refletidos em seu trabalho.

O trabalho do webdesigner ganhou projeção global depois da parceria com uma das maiores agências interativas da Europa, a extinta Insenic. Agora, ele tem um portfólio com dezenas de clien-

www.danubio.com.br

O site de Fabrício Cidral é <www.cidral.net> e o email para contato, <fabricio@cidral.net>.

18

Para participar da seção portfólio, cadastre-se no site www.arteccom.com.br/webdesign.

19

entrevista: Prof. Bechara

menos é

mais

Numa espécie de caminho de volta, o uso de linguagens mais simples vem se mostrando uma forte tendência na construção de sites.

Adaptáveis a qualquer tipo de browser, não só criam páginas mais leves (com custos reduzidos) como também aumentam a acessibilidade. Nessa maior abrangência, usuários ganham mais informação, e empresas, mais clientes em potencial. HTML, XML, XHTML, CSS, DOM, seja qual for o padrão, o importante é aplicálos de forma correta para que o resultado seja o melhor possível.

A seguir, uma aula sobre o assunto com o Professor Bechara, Matemático, pós-graduado pela COPPE/UFRJ e coordenador acadêmico do Centro de Treinamento iLearn.

20

Firefox surgiu há pouco tempo e já conquistou 4,6% do mercado.

Bechara :: Web Standards ou Padrões Web são um conjunto de

Os desenvolvedores hesitam em aplicar os Padrões Web em seus

especificações técnicas de desenvolvimento para a web. Com

projetos por desconhecimento das vantagens que a adoção

estas especificações implementadas de forma correta,

destes padrões podem trazer aos seus projetos e empresas.

poderemos extrair o máximo do potencial da web. Tais

Muitos pensam que a adoção dos padrões pode ser um fator que

especificações e recomendações são elaboradas por um grupo

limite a expressão de sua criatividade na elaboração dos designs

de empresas que são integrantes do W3C World Wide Web

das páginas, entretanto, é justamente o contrário.

Consortium, um consórcio que completou recentemente dez anos de existência e já conta com cerca de 364 empresas

:

membros.

W3C

Wd :: Levando-se em consideração que há alguns anos só

Fundada em outubro de 1994, por Tim Berners-Lee, no

utilizava-se conexão via modem, dificultando o acesso a

Massachusetts Institute of Technology (MIT), o W3C

sites pesados , por que só agora veio à tona o assunto padrões web e por que alguns desenvolvedores ainda hesitam em aplicá-los em seus projetos?

Bechara :: Isso tem muito a ver com uma época em que vivíamos brigando para que as implementações em nossos sites funcionassem da mesma forma em diversos browsers. A famosa

(www.w3c.org) é uma organização que tem a missão de levar a web ao seu potencial máximo. Isso se deve por meio do desenvolvimento de protocolos comuns que promovam sua evolução e garantam sua interoperabilidade. O W3C criou as linguagens básicas de publicação de conteúdo para web, como, por exemplo, o HTML, o CSS, o SVG, o XML, entre várias outras, denominadas de Web Standard ou, no português, Padrões Web.

época da Guerra dos Browsers . Nessa época, a aplicação dos padrões era de difícil implementação, pois os browsers enalteciam

Outro argumento utilizado pelos desenvolvedores baseia-se na

seus códigos proprietários. Somente a partir das versões 5 foi

experiência que os mesmos tiveram no passado, ou seja, quando

possível a implementação dos padrões de uma forma mais

desejava-se desenvolver para mais de um browser o trabalho

coerente. Infelizmente, a conscientização por parte das

era bem maior, pois tornava-se necessário adicionar linhas de

empresas desenvolvedoras dos browsers foi uma conquista

código que possibilitassem a visualização dos projetos nos

recente. Estas empresas estão assistindo, e se preocupando,

browsers desejados. Esse fator aumentava consideravelmente o

com o crescimento de seus concorrentes, que já vêm se

custo do projeto

esforçando e se atualizando há algum tempo, com uma

e, tendo em vista

maior aderência aos padrões,

a participação do

como por exemplo, a

IE no mercado,

família Mozilla.

muitas empresas

Quem ainda não

optavam

ouviu

desenvolver

falar

do

por

Firefox? Um browser

somente para

criado por Blake Ross,

este browser.

hoje com 19 anos, aluno

O que se deve

da Universidade de Stanford

entender

e considerado o maior pesadelo do Bill Gates. Observem que o

é

que, hoje, a adoção dos padrões, além de outras

21 21

entrevista: Prof. Bechara

Wd :: Em que consistem os Web Standards?

entrevista: Prof. Bechara

vantagens, reduz o custo de desenvolvimento e manutenção devido à redução de linhas de código e possibilita a visualização em diversos browsers.

Wd :: Você poderia citar quais são as principais recomendações do W3C? Bechara :: São várias e depende da aplicação que se deseja para um projeto. A adoção do XHTML e do CSS é necessária a todos os projetos web. Não podemos esquecer de que o padrão XML vem sendo bastante utilizado em projetos mais complexos,

folhas de estilo (CSS)

:

O CSS (Cascading Style Sheets), como o próprio nome já diz, são folhas de estilos em cascata. São as definições nestes arquivos com terminação .CSS que estabelecem a camada de apresentação. O conceito de cascata vem da utilização de heranças. Podemos utilizar o mesmo arquivo CSS para diversas páginas, desta forma se, por exemplo, desejarmos alterar uma informação como a fonte do corpo do site, através da alteração do CSS, automaticamente todas as páginas renderizadas (forma pela qual o código é interpretado e exibido pelo browser) passarão a ter a nova fonte atribuída.

quando desenvolvemos, por exemplo, aplicações com banco de dados ou precisamos ler ou disponibilizar informações de

apenas o CSS para dar uma forma diferente a um link.

terceiros. A correta forma de implementação poderá trazer

Entretanto, se este site implementar o CSS para fazer layout, aí

reduções drásticas nos acessos ao banco de dados e rapidez em

sim, estará no caminho correto de sua implementação.

disponibilizar informações.

Na minha opinião, o quesito básico é trabalhar em três camadas:

Lista de padrões recomendados pelo W3C para aplicações web:

uma camada de estrutura, outra camada de apresentação e a

HTML - Hyper Text Markup Language

terceira camada de comportamento.

XML - Extensible Markup Language XHTML - Hyper Text Markup Language

Wd :: Que cuidados é preciso se ter para criar um site

CSS - Cascading Style Sheets

totalmente acessível e que funcione em todas as

DOM Document Object Model

plataformas?

Wd :: Na sua opinião, o que seria um site tecnicamente

Bechara :: Este é o paradigma que todos os seguidores dos

perfeito? Quais os principais quesitos que ele deve atender?

Padrões Web buscam. No Brasil, em 2 de dezembro de 2004, foi

Bechara :: Bem, hoje, se um site ou projeto web implementar de

assinada a Lei 5.296, que estabelece normas gerais e critérios

forma correta o XHTML e o CSS já podemos dizer que este site

básicos para a promoção da acessibilidade das pessoas

está tecnicamente correto. Embora seja necessário nos

portadoras de deficiência ou com mobilidade reduzida. Esta lei

aprofundarmos mais sobre os conceitos do que é uma boa

estabelece que, num prazo de 12 meses, a partir de sua

implementação, pois não podemos considerar tecnicamente

publicação, todos os órgãos municipais, estaduais e o órgão

correto, num sentido amplo, o fato de, por exemplo, se usar

22 22

considerar perfeito na tarefa de geração de layouts com CSS,

diretrizes do Brasil foram criadas com base nas mesmas diretrizes

mas aposto na rápida evolução dessa categoria de software.

internacionais do W3C/WAI (WCAG1). A adoção dos Padrões

Recomendo a todos os profissionais de web que não se prendam

W3C de Acessibilidade, do XHTML e do CSS engloba muitos

a programas, e que saibam gerar códigos digitando-os e não

conceitos que, implementados de forma correta, possibilitam um

somente apertando botões ou arrastando elementos.

excelente funcionamento em diversas plataformas.

Wd :: Como é possível avaliar a acessibilidade de um site?

Avaliadores de acessibilidade

Bechara :: Existem programas (avaliadores de acessibilidade)

Todos avaliam segundo as recomendações do WAI (Web

que lêem e interpretam seu site de forma a avaliar o grau de

Accessibility Initiative):

adesão. Esses programas emitem um relatório apontando as linhas com problemas e apresentam recomendações com exemplos. Eu sempre recomendo a avaliação humana após a avaliação por software, pois assim estaremos adequando melhor com o retorno dos usuários. Os avaliadores de acessibilidade estão disponíveis online e são gratuitos.

:

A-Prompt - http://aprompt.snow.utoronto.ca/ Bobby - http://bobby.watchfire.com/bobby/html/en/index.jsp Cynthia Says - http://www.cynthiasays.com/ Da Silva - http://www1.acessobrasil.org.br/dasilva/ dasilva.html Wave - http://wave.webaim.org/index.jsp Existem diversos outros avaliadores de acessibilidade no mercado.

Wd :: O que é validação de código em um site?

Bechara :: Validar um código é verificar se as especificações do W3C estão implementadas de forma correta. Existem validadores de códigos para HTML, XHTML, CSS etc..Um exemplo é o validator.w3.org (gratutito).

Wd :: Quais são os maiores problemas enfrentados por quem opta por trabalhar com a metodologia tableless?

Bechara :: Trabalhar com os Padrões Web exige dedicação, conhecimento e técnica. Alguns profissionais ainda não entenderam que trabalhar com os padrões é trabalhar apenas uma vez e visualizar em todos os devices, utilizando-se do mesmo código (PDAs, celulares, browsers, webTV etc.).

Wd :: Na sua opinião, por que os programas mais usados para criação de sites (como o Dreamweaver) não auxiliam o designer no desenvolvimento de páginas tableless? Já existe algum software no mercado que trabalhe dessa maneira?

Bechara :: Atualmente não existe nenhum programa que poderíamos

23

entrevista: Prof. Bechara

federal deverão implementar acessibilidade em seus sítios. As

Tableless: de volta à simplicidade

href="info.ph REAMID=768 0f541eee473 </Tableless: us</a></li> de volta à simplicidade> href="info.ph EAMID=768 541eee4730 rules</a>< Por André Philippe Iunes

Saiba como construir sites sem tabelas, respeitando os Padrões Web de acessibilidade, e conheça a opinião de especialistas sobre o assunto.

24

criatividade, matemática sem números e sites sem tabelas?

Pois bem, para quem trabalha no meio online, idealizar a última situação pode ser a mais difícil em um universo no qual as tabelas balizam praticamente todos os tipos de idéias, conceitos e padrões estéticos. Desde o surgimento da WWW, a tag <table> faz parte do cotidiano de quem desenvolve páginas, e conceber um site sem ela é algo quase inviável para muitos profissionais. Entretanto, o método de construção sem tabelas é possível, melhor e mais politicamente

correto

no

que

diz

respeito

às

recomendações do World Wide Web Consortium (W3C).

Diferente de outros modismos na web, essa metodologia deflagra um amadurecimento na forma de desenvolver sites, em que o retorno à simplicidade do código HTML sinaliza a adoção de modelos mais responsáveis e conscientes de produção. Primeiramente, é necessário que se entenda o conceito dos Web Standards, que são padrões estabelecidos pelo W3C visando ampliar as

Web Standards

:

Os Web Standards constituem uma ética para todos que trabalham com a web, sejam da área de desenvolvimento, design ou conteúdo. São um conjunto de sete pontos estabelecidos pelo W3C (www.w3.org/Consortium/Points) que sintetiza seu esforço de ampliar as possibilidades da web para todos os usuários com base somente em padrões livres.

possibilidades da rede para todos os usuários, assegurando a viabilidade de qualquer documento publicado na internet.

A idéia inicial da WWW era que existisse um ambiente no qual as pessoas conseguissem trocar informações livremente, e que essas informações pudessem ser acessadas por diversos dispositivos.

Era uma vez uma guerra entre dois navegadores...

Nos primórdios da popularização da web, foi dado início a uma espécie de disputa entre os dois softwares de

25

Tableless: de volta à simplicidade

É possível imaginar música sem melodia, design sem

<h4>annoying for some of you.<br /><br / >Also, here is a handy <a href="inf=aboutDRE SXC search plugin</a> = O caminho que a web deve percorrer é a liberdade para troca de informações, independente do dispositivo utilizado. É isso que o usuário espera">< Diego Eis> <div id="contents"> <div ><br /><br / id="rightcolumn"> <div id="statbox"> <h1>quick stats</ h1>

Tableless: de volta à simplicidade

<title>esdi / novidades</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <script language="JavaScript"> <!-<p>In response to popular demand we'll alt="" /></a></div> <div id="introbox"> <p class="head"><id="O ideal na produção profissional de documentos para a web é que se procure sempre usar a última versão do tipo de documento. A versão mais recente é o XHTML 1.1.">< Simone Villas Boas > <p class="orange">Whether you just want to browse our huge image function AbrePagina(Foto, tamx, tamy) { status=no,menubar=no,scrollbars=no,width=" + tamx + ",height=" + tamy) } navegação líderes no mercado. De um lado, o Internet

no desenvolvimento de interfaces. Isso porque os

Explorer, com a maior fatia do mercado e, de outro, o

fabricantes destes softwares de navegação passaram a

Netscape, atendendo a uma minoria fiel, travavam uma

adotar seus próprios padrões. Em uma ponta estava o

briga para conquistar mais adeptos. Diego Eis, webdesigner

desenvolvedor,

da agência Atípico e fundador do site sobre Web Standards

navegador, para assim escolher qual priorizar e qual ignorar.

chamado Tableless.com.br, explica que, durante essa

Na outra, o usuário, com o mesmo dilema. Se ele escolhesse

disputa, as linguagens do W3C ainda eram rascunhos e as

um determinado browser, os sites que ele visitaria poderiam

empresas desenvolvedoras de browsers ainda não tinham

não funcionar , explica.

um guia completo para se basearem e lançarem seus produtos com suporte aos Padrões Web.

estudando

as

diferenças

de

cada

Ele destaca que os visitantes com algum tipo de deficiência, por exemplo, ficavam praticamente isolados do

Diego lembra que foi a partir daí que os problemas

mundo digital, já que toda a concepção do site tinha que se

referentes à concepção de sites afetou não só os usuários,

adaptar a um certo tipo de navegador, obedecendo so-

mas também, e principalmente, os profissionais envolvidos

mente às suas peculiaridades. Na sua opinião, conceber

26

27

Tableless: de volta à simplicidade

uma página naquela época era um trabalho árduo, levando a equipe envolvida a escolher apenas um caminho a seguir.

Era insuportável se adequar às principais plataformas de navegação existentes. O trabalho de atualizar ou de fazer manutenções era enorme e exigia muito tempo e paciência.

Hoje, há mais liberdade de desenvolvimento que há cinco anos, pois a visão dos fabricantes de browsers mudou completamente , lembra.

Essas transformações ficam mais evidentes nos dias atuais, pois a necessidade de se democratizar o acesso à informação na rede tornou quase obrigatória a adequação de um site às recomendações do W3C. Não é mais levado em consideração somente o navegador utilizado pelo usuário, mas também o tipo de plataforma usada, a qualidade da conexão e se ele é ou não portador de alguma limitação cognitiva ou motora. Pensar nessas questões traz à tona outras implicações referentes ao modo de produção na web, em que a praticidade de se construir um site para ser exibido em um único e exclusivo navegador dá lugar à experimentação exaustiva de vários outros. Tudo com um único objetivo: melhorar a experiência do usuário no que diz respeito à qualidade de acesso e no maior número possível de dispositivos.

Existe vida sem tabelas na web?

Para entender melhor o que significa Tableless, é preciso saber que o termo é nada mais do que um nome fantasia para se referir à construção de sites que seguem os Padrões Web e, principalmente, que não utilizam tabelas em seu desenvolvimento. Isso é possível devido à forma e ao conteúdo estarem em arquivos distintos.

No lugar da tabela tradicional, representada pelas tags <table></table> , são utilizadas as tags <div></div> , que têm suas propriedades de cor, altura, largura, posição etc. especificadas pelo arquivo de Folha de Estilo (CSS) vinculado. Essa independência traz vantagens em grandes projetos online, pois para modificar a formatação de várias páginas em um site, por exemplo, basta apenas alterar uma única linha do código da Folha de Estilo (CSS).

28

<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Strict// EN" "http://www.w3.org/ TR/xhtml1/DTD/ xhtml1<id="Este é um movimento das pontas para o centro, legítimo caso em que a tecnologia e o método avançam devido aos seus próprios méritos"> < Elcio Ferreira > xmlns="http:// www.w3.org/1999/ xhtml" xml:lang="en" lang="en"> <head> <title>stock.xchng the leading free stock photography site</ title> <meta httpequiv="ContentType" content="text/html; charset=iso-8859-2" /

Os sete pontos que representam os princípios operativos do W3C 1. Acesso Universal - Define a web como o universo de informação acessível por rede (por meio de seu computador, telefone, televisão, ou refrigerador conectado a uma rede).

2. Web Semântica Atualmente, os usuários compartilham seu conhecimento no meio online por meio de uma linguagem destinada a outras pessoas. Na Web Semântica ( semântica significa relacionado a significado ) será possível nos expressarmos de maneira que nossos computadores possam nos interpretar e fazer as trocas.

3. Confiança - Para promover um ambiente mais colaborativo, é necessário a existência de uma Rede de Confiança que torne possível às pessoas arcarem com as responsabilidades por aquilo que é publicado na rede.

4. Interoperabilidade - O W3C promove interoperabilidade por meio do desenvolvimento e promoção de linguagens de computador abertas (não proprietárias)

e

protocolos

que

evitam

uma

fragmentação do mercado que existia no passado.

5. Evolução - O W3C almeja a excelência técnica, entretanto está ciente de que o que conhecemos e necessitamos hoje pode não ser suficiente para a solução de problemas no futuro. O objetivo é criar uma rede que possa evoluir sem quebra de funcionalidades anteriores.

6. Descentralização - É limitada a quantidade de pontos centrais na rede para reduzir sua vulnerabilidade.

7. Multimídia Por meio de seus membros, o W3C analisa a opinião dos usuários finais, objetivando fornecer bases sólidas para o desenvolvimento de uma melhor multimídia na rede.

29

Tableless: de volta à simplicidade

Diego destaca que dessa forma, um mesmo arquivo

facilidade de navegação em páginas sem tabelas. Diego cita

HTML pode ter versões totalmente diferentes de um mesmo

como exemplo, a utilização de um site por uma pessoa que

conteúdo.

site

possui algum tipo de deficiência visual. Neste caso, é

www.csszengarden.com, em que os usuários podem criar

necessário o uso de um programa que lê todos os dados

layouts variados da mesma página apenas modificando a

mostrados na tela por meio de um sintetizador de voz. Como

Folha de Estilo. O criador deste site disponibilizou o arqui-

no método Tableless o conteúdo está separado da

vo HTML para download. Os interessados baixam esse arqui-

formatação, é mais fácil para um software leitor de tela ler

vo e fazem um CSS em cima dele e o enviam de volta. Entre-

as informações do HTML. O desenvolvedor pode até mesmo

tanto, eles não podem modificar o código HTML, podendo

criar hierarquias específicas do que vai ser interpretado

apenas ter o direito de criar um CSS e, caso queiram, usar

pelo programa.

Ele

cita

como

exemplo,

o

Ele destaca que as páginas convencionais são feitas,

imagens para compor o novo layout , destaca.

No que diz respeito à utilização de tabelas, o que antes

em sua maioria, com editores visuais e em todas são usados

poderia ser sinônimo de destreza, hoje pode se tornar um

os spacer.gif, gifs transparentes de 1px por 1px que servem

fator desfavorável em uma entrevista de emprego nas

para amarrar o espaçamento entre células de uma tabela.

agências que trabalham seguindo as recomendações do

Esses spacer.gif normalmente são colocados apenas na tag

< >

relacionada à imagem, sem nenhum tex-

W3C. A perspicácia em saber aninhar tabelas fazia do webdesigner um verdadeiro arquiteto, solucionando problemas de layout com um simples colspan ou rowspan . Antes de pensar que as tabelas foram totalmente apagadas do mapa,

to alternativo. Suponha que você

É claro que há uma curva de

tem uma célula separada por um

aprendizado a ser vencida, mas ela não é íngreme e bons resultados

podem ser obtidos logo no início

Diego explica que para determina-

spacer.gif de 20px. Neste caso, o leitor de voz o lerá assim mesmo, confundindo a navegação. Quando isso

acontecer, o visitante terá que

Simone Villas Boas

das situações, em que dados tabulares

ouvir ou apertar uma tecla 20

vezes, já que essas imagens são extre-

são exibidos, as tags <table> são muito bem-vindas e re-

mamente inúteis para ele. Isso transforma a navegação

comendadas. No movimento Web Standards, cada tag tem

muito cansativa para esse público , alerta Diego.

a sua função. Se você quer fazer um parágrafo, usa-se a

Outra vantagem que interessa a grandes portais é a di-

tag <p></p>. Se quiser fazer um título de primeiro nível,

minuição do consumo de banda. Segundo Diego, no método

usa-se a tag <h1></h1>. No caso de exibir dados tabula-

Tableless há uma queda significativa no número de linhas

dos, como, por exemplo, um calendário ou uma lista de pro-

de código, já que tags desnecessárias foram totalmente

dutos seguidos de nome, preço e tamanho, você usará as

excluídas. Além disso, o visitante tem maior flexibilidade na

tags <table></table> , ensina.

escolha dos dispositivos, plataformas e navegadores

Acessibilidade, leveza e flexibilidade

utilizados para visualizar os sites. Um usuário pode operar

As vantagens do método Tableless, bem como a adoção

um Mac e navegar com Safari, Firefox ou até mesmo com o

dos Padrões Web, não se restringem somente à otimização

Internet Explorer, por exemplo. Ou, quem sabe, utilizar o

de certas atualizações no layout. No caso da acessibilidade,

Linux e navegar com Konqueror, Galeon ou Opera. Se prefe-

os usuários com necessidades especiais ganham maior

rir, pode usar algum dispositivo móvel, como um PocketPC

30

Internet Explorer. O caminho que a web deve percorrer é a

O poder das folhas de estilo

liberdade para troca de informações, independente do dis-

A especialista em interfaces, Simone Villas Boas,

positivo utilizado. É isso que o usuário espera , exemplifica.

destaca que o fundamental sobre as folhas de estilo é

Sites Tableless já são realidade no mercado?

deixar que somente elas se responsabilizem por todas

Mudar costumes nem sempre é uma tarefa fácil, ainda

as resoluções de layout. Cores, fontes, fundos,

mais quando mexem com certos alicerces estruturais. Antes

marcadores para listas, posicionamento de elementos

de tudo, para criar sites Tableless é necessário retroceder e

na interface, tudo pode ser resolvido via CSS com boa

reaprender a formatar o código HTML utilizando certas tags

compatibilidade entre diferentes navegadores.

esquecidas pelo desuso. Neste caso, o tempo desprendido

Além disso, o CSS favorece o controle sobre a

para se dedicar a uma nova forma de conceber páginas pode

exibição em diversas mídias, como a impressão em

gerar resistência entre os profissionais acostumados às

papel e a visualização em celulares. Com relação à

tabelas. Até porque as vantagens proporcionadas por esse

manutenção do site, se o cliente mudou de idéia e quer

método não afetam diretamente o layout. Ou seja, sendo em

trocar a fonte ou a cor, com uma pequena alteração isso

Tableless ou não, um site terá, à primeira vista, a mesma

é resolvido. Se a definição sobre as fontes estivesse

interface nos navegadores mais usuais. Neste caso, a maturidade

em todos os arquivos, o processo seria mais complicado

em optar por construir sites que priorizem as recomendações do

e exigiria uma revisão documento a documento.

<td align="left" valign="top" colspan="2" height="256"> <p align="left"><font face="Arial, Helvetica, sans-serif" size="2"><id="A reação que mais vejo em nossos alunos quando descobrem os Padrões Web é como eles puderam viver tanto tempo sem conhecê-los">< Elcio Ferreira > href="p_even.shtml">eventos</a></ font>< <p align="left"><font face="Arial, Helvetica, sans-serif" size="2"><i>&Uacute;ltima atualiza&ccedil;&atilde;o em 31 4 de mar&ccedil;o de 2005.<br>

Tableless: de volta à simplicidade

com Windows Mobile e visitar o site utilizando o mesmo

Tableless: de volta à simplicidade

W3C pode fazer a diferença quando o objetivo do projeto é a

facilidade de manutenção também foi enorme. Outro caso inte-

busca por uma maior abrangência de visitação.

ressante é o da ESPN. Depois que migraram o seu site para os

Diego destaca que hoje a resistência por não se trabalhar

padrões, estima-se que a economia de banda foi de 730

com o método Tableless é menor. Entretanto, segundo ele,

terabytes ao ano. A Wired também conseguiu uma redução de

alguns desenvolvedores ainda têm medo do novo, decidindo não

tamanho das páginas de 54%. Se não valesse a pena adotar

se atualizar nas tendências do mercado. Alguns ainda pensam:

os padrões, por que sites como Lee Jeans, Fast Company,

preciso aprender tudo outra vez? Tenho que largar o editor

Macromedia, Blogger, Chevrolet, Terra, Quark e outros

visual e fazer o código na mão? Ou, muitas vezes, o

migrariam para os Web Standards? , indaga.

desenvolvedor já se convenceu, quer mudar, mas esta decisão

É preciso conhecer as regras do jogo

não depende dele somente, e sim, do chefe. Outros dizem que

Antes de começar a aplicar os conceitos de Tableless, é

não vale a pena dedicar mais tempo para aprender tudo de

necessário que se conheça algumas recomendações do W3C.

novo só para fazer sites funcionarem em outros browsers que

Para Simone Villas Boas, sócia da empresa Synapsis, especi-

não sejam Internet Explorer. Contudo, felizmente, esses

alizada no desenvolvimento de interfaces para a web, as prin-

comentários estão desaparecendo, pois já se percebe todas as

cipais se referem à definição do XHTML e do CSS. Segundo a

vantagens de se seguir os Padrões Web , enfatiza.

especialista, o HTML era eficiente apenas para formatar

Ele destaca que treinou equipes como a do Terra, por

documentos e inserir alguns recursos multimídia. Apelos

exemplo, que adotou o método Tableless na construção do seu

estéticos mais complexos tiveram que ser improvisados

portal. Neste caso, a economia de banda foi espetacular e a

com o início da rede comercial para que funcionassem nos navegadores disponíveis da época. Durante o

XHTML

:

boom da internet, houve uma geração inteira de pro-

Chamada de Extensible Hyper Text Markup Language, é uma

fissionais que aprendeu a ignorar várias tags

versão mais recente do HTML, que deixou de evoluir a partir

elementares do código HTML. Eles passaram a usar

da versão 4.0. À primeira vista, um documento XHTML se parece muito com um HTML comum e possuem ambos a mesma finalidade de ser visualizado no navegador web.

apenas

uma

meia-dúzia

delas

que

possuía

flexibilidade suficiente para montar qualquer tipo de layout de interface. Era possível, assim, improvisar

32

Significa Cascading Style Sheets ou, em português, Folha de

Teste comparativo:

estilo em cascata. É um arquivo ou um conjunto deles onde

site com tabela X Tableless

estarão os parâmetros de formatação e ilustração do layout de cada página para cada mídia onde ele será mostrado. Neste

Nos gráficos abaixo, constam os resultados médios

documento, dizemos qual é o tamanho da fonte, qual a entrelinha, espaçamento entre letras, se os títulos estarão em

no tempo de carregamento entre sites que têm o

caixa alta e negrito etc.. É possível definir também como será a

desenvolvimento tradicional e os que seguem os

disposição dos elementos gráficos.

Padrões Web.

HTML Tradicional uma tabela para termos um site mais ou menos c o m p a t í v e l e m v á r i a s p l a t a f o r m a s , d e s t a c a .

Devido à necessidade de pensar a web a longo prazo,

Simone

explica

que

a

publicação

da

HTML normal HTML otimizado

recomendação do XHTML pelo W3C obrigou o mercado a rever o seu modo de produção. O XHTML permite transformar os documentos HTML em arquivos que podem ser importados para qualquer base de dados, em qualquer sistema. Ainda assim, estes documentos continuam sendo lidos por navegadores comuns.

Mas

para

que

esta

transação

aconteça

1ª visitação

Os dados acima apontam que o site tradicional leva 10 segundos para carregar totalmente na primeira visitação do usuário. Na segunda visita, em que alguns arquivos já estão no cache do navegador, o tempo é de 6,2 segundos.

Tableless

corretamente, o código do documento tem que ser simplificado

ao

máximo,

priorizando

os

seus

elementos perenes, que é o conteúdo em si, e não o fundo ou a cor de fonte que ele vai ter em 2005 ou em 2 0 1 8 . A i n d a h o j e , s ã o p o u q u í s s i m o s o s p r o f i s s i o n a i s que tentam aplicar estas recomendações mais seriamente. Poucos se animam a mudar a forma de trabalho, e muitos dos que o fazem ainda não possuem a experiência necessária para desenvolver as mesmas coisas que realizavam com o método tradicional. Entretanto, a tendência é que este quadro mude nos próximos anos e que mais projetos s e j a m f e i t o s s e g u i n d o a s r e c o m e n d a ç õ e s d o W 3 C , lembra Simone.

Para Elcio Ferreira, diretor de tecnologia da agência Atípico, conhecer os Padrões Web é essencial para se adequar à nova filosofia de construir sites.

2ª visitação

Piores resultados Melhores resultados 1ª visitação

2ª visitação

O mesmo site, construído nos Padrões Web, leva 7,3 segundos para carregar totalmente na primeira visitação do usuário. Na segunda visita, em que os arquivos já estão no cache do navegador, o tempo é de 2,5 segundos. Uma redução de 48% em relação à primeira visita.

Neste caso, as vantagens no tempo de carregamento se deve aos seguintes fatores: - não utilizar tags desnecessárias; - separar informação da formatação; - não utilizar tabelas para estruturação do layout.

Ele destaca a considerável economia de tempo e a re-

33

Tableless: de volta à simplicidade

:

CSS

Tableless: de volta à simplicidade

dução dos custos de desenvolvimento como os atrativ o s p a r a s e o p t a r por t r a b a l h a r s e g u i n d o a s r e c o m e n dações. É claro que há uma curva de aprendizado a ser vencida, mas ela não é íngreme e bons resultados podem ser obtidos logo no início. E depois de aprendido, o sistema de trabalho é apaixonante.

Meus desenvolvedores, aqui na Atípico, não querem saber de construir sites de outra maneira. Nos cursos que ministramos, a reação que mais vejo em nossos alunos quando descobrem os Padrões Web é como eles puderam viver tanto tempo conhecêl o s , e n f a t i z a .

Na busca pela perfeição: como validar o código do seu site?

Va l i d a r u m c ó d i g o d e u m d o c u m e n t o é c e r t i f i c a r s e de q u e e l e e s t á d e a c o r d o c o m a s r e c o m e n d a ç õ e s

:

Robots

Onde buscar mais informações Bobby* http://www.watchfire.com/products/desktop/ bobby/default.aspx Cynthia* http://www.contentquality.com/ DaSilva* http://www1.acessobrasil.org.br/dasilva/ dasilva.HTML The W3C Markup Validation Service* http://validator.w3.org/ TIDY* http://tidy.sourceforge.net/ http://www.w3.org/People/Raggett/tidy/ Web Acessibility Initiative (WAI): http://www.w3.org/WAI/

São mecanismos autômatos que rodam na Web procurando e

Section 508:

indexando informações. Os robots de busca, como o do Google,

http://www.section508.gov/

MSN e Yahoo!, são os que periodicamente varrem os diretórios

Recomendações de Acessibilidade para a Construção

dos sites indexando seus conteúdos para os sites de busca.

Outro tipo de robot é o utilizado para validação do código. São

e Adaptação de Conteúdos do Governo

usados para ajudar a verificar a integridade do código, em

Brasileiro na Internet:

termos semânticos e de acessibilidade.

http://www.governoeletronico.gov.br/consultas/ consultas/dsp_dadosconsulta.wsp?tmp.id=17

do W3C. Simone destaca que existem robots para val i d a ç ã o c o m o o T h e W 3 C M a r k u p Val i d a t i o n S e r v i c e e o T i d y. P a r a f a z e r a v a l i d a ç ã o c o r r e t a mente, é preciso determinar qual tipo de documento está sendo analisado. Seja HTML 4.0 ou XHTML 1.0, o

código

passará

pelo

validador

de

sua

especificação. O ideal na produção profissional de documentos para a web é que se procure sempre usar a última versão do tipo de documento. A v e r s ã o m a i s r e c e n t e é o X H T M L 1 . 1 . , d e s t a c a .

Com relação à acessibilidade, Simone lembra q u e t a m b é m h á r o b o t s c o m o o C y n t h i a e o B o b b y, o u o brasileiro Da Silva, que fazem uma avaliação

34

XHTML 1.1 http://www.w3.org/TR/xHTML11/ XML http://w3.org/XML/ The Extensible Stylesheet Language Family (XSL) http://w3.org/Style/XSL/ Exemplos bons e bem fundamentados sobre Web Standards http://www.w3.org/QA/Tips/ W3C in 7 points http://www.w3.org/Consortium/Points/ * Validadores

35

Tableless: de volta à simplicidade

simples do site de acordo com as especificações do

ne, em sua opinião, é importante submeter uma página ao

WAI (Web Acessibility Initiative) e do Section 508.

validador do W3C, que segundo ele é extremamente útil

Deve-se também ter cuidado com a seqüência de

para esse tipo de avaliação. O programa mostra onde

tabulação dos elementos da página para permitir

você está errando, se esqueceu de fechar alguma tag.

uma experiência de navegação sem o mouse mais

Adquirindo experiência, você percebe que os erros do

tranqüila. É assustador usar apenas o tab e o alt-

validador começam a diminuir. Claro que o site não será tec-

t a b p a r a n a v e g a r e m a l g u n s s i t e s , r e s s a l t a .

nicamente perfeito só fazendo isso, pois sempre haverá

Diego Eis, explica que para conseguir um site tecnicamente perfeito é preciso testá-lo incessantemente em várias plataformas. Compartilhando da mesma visão de Simo-

questões de usabilidade, acessibilidade que podem sempre ser modificadas .

Alguns cuidados que devem ser tomados Construir um site Tableless requer, acima de tudo,

Section 508

:

alguns

cuidados

referentes

às

diferenças

de

A 508 é uma lei federal norte-americana que define os padrões

i n t e r p r e t a ç ã o d o c ó d i g o p o r c a d a n a v e g a d o r. S i m o n e

de acessibilidade a documentos eletrônicos por pessoas

explica que, se todos os navegadores seguissem

portadoras de deficiências. Tornou-se uma referência mundial para quem precise verificar a acessibilidade de uma interface,

fielmente as recomendações do W3C, as interfaces

devido à disponibilidade de vários validadores automatizados.

seriam renderizadas da mesma forma em todos eles. Os

O projeto de lei que está em consulta pública no Brasil é bem

desenvolvedores teriam que se preocupar somente com

semelhante a 508. Então, é possível testar agora os documentos nestes validadores já existentes e se antecipar à publicação da lei brasileira.

as alterações derivadas da plataforma utilizada pelo usuário. Depois de algum tempo produzindo código semântico, é possível antecipar o tipo de problema que

Como simplificar o código do seu site O método utilizando Web Standards tem como princípio usar código semântico. Portanto, códigos como: <font face= verdana size= 3" color= black >Título</font> são substituidos por: <h1>Título</h1> As características do h1, como cor de fonte, tamanho, tipologia e background, por exemplo, são colocadas no arquivo CSS desta maneira: h1{font:13px Verdana; color:black;} No arquivo HTML fica apenas a informação do site. Nos arquivos CSS está a formatação desta informação, em que é possível estipular onde ficará cada bloco de texto, que cor e tamanho terão, como será o background, qual será a cor de fundo dos parágrafos e se terá ou não bordas.

Uma vez que a formatação está separada da página em outro arquivo, fica mais fácil realizar simples manutenções, ou até mesmo mudar um site inteiro.

36

pode ocorrer e como evitá-lo. Além disso, os navegadores disponíveis hoje no mercado ainda trazem resquícios da guerra dos browsers entre Microsoft e Netscape. Há muitos recursos proprietários embutidos nos navegadores que são chamarizes para alguns profissionais mais desavisados. E convencer alguém da equipe a desistir de um recurso proprietário pode ser bem complicado .

Recursos

proprietários

:

São tecnologias desenvolvidas por algumas empresas para uso público. Elas normalmente não têm o código aberto, sendo tratadas como uma estratégia de mercado para atrair desenvolvedores, sob o rótulo de inovação tecnológica .

Entre os mais conhecidos estão o JavaScript, da Netscape, o Flash, da Macromedia, e o ActiveX, da Microsoft.

Descreva em até oito linhas o que seria um site tecnicamente perfeito.

Um site com harmonia nas cores, com as informações bem arquitetadas, textos breves mas explicativos. Deve-se valorizar o que for importante, associar as formas e figuras ao site, e ter somente o que for realmente relevante para o público alvo.

Adilson dil.adilsera@gmail.com

Um site com links objetivos e que dispõe o seu conteúdo de maneira limpa e de fácil entendimento. Deve ter opções variadas de navegação e um layout limpo e objetivo, com rotinas rápidas e simples. Ou seja, deve combinar beleza, agilidade e usabilidade.

René Pinheiro rene@renepinheiro.com

Um site nunca é perfeito, mas um site com design limpo, com combinação de cores, com uma estrutura bem planejada e de fácil navegação, isso sim, com certeza, trará bons resultados.

Douglas Lourenço grafi@grafi.com.br Acesse e participe! www.arteccom.com.br/webdesign

37

Tableless: de volta à simplicidade

< > Hoje, há mais liberdade de

desenvolvimento que há cinco anos, pois a visão dos fabricantes de

browsers mudou completamente Diego Eis

nos estudos sobre acessibilidade no meio online. Pad r o n i z a r a semântica na rede não significa, talvez, castração do código, mas sim a garantia do acesso universal e irrestrito às informações nela veiculadas. Desta maneira, lucram desenvolvedores, fabricantes de navegadores e, principalmente, o usuário, o maior beneficiado de todo esse processo.

Para Elcio, o maior problema a ser enfrentado chama-se Internet Explorer 5. Ele explica que este

Existe hoje um maior

browser, lançado em março de 1999, possui uma gran-

amadurecimento no que diz respeito

de defasagem tecnológica para os dias atuais. Mesmo

à construção de sites politicamente

o Internet Explorer 6, desenvolvido dois anos depois, já tem quatro anos de idade. Os padrões web fazem seu site funcionar nestes navegadores, mas as pessoas esperam ter a mesma experiência proporcionada

corretos , que priorizam as recomendações do W3C? 58% 42%

Sim Não

Acesse e participe! www.arteccom.com.br/webdesign

com esses browsers mais antigos em comparação ao m o d e r n í s s i m o M o z i l l a F i r ef ox . , d e s t a c a .

O interesse pelos Padrões Web vem crescendo nos últimos anos e conhecê-los é, sem dúvida, um diferencial no currículo do profissional de internet. Elcio destaca que alguns grandes portais e sites brasileiros,

bem

como

uma

legião

de

pequenos

desenvolvedores, já adotaram os Web Standards em seus projetos. Este é um movimento das pontas para o centro, legítimo caso em que a tecnologia e o método avançam devido aos seus próprios méritos. Não há uma grande empresa explorando os padrões comercialmente, como um produto. Logo, não há grandes somas de dinheiro investido em propaganda, nem uma multidão de vendedores incentivando o uso dos pad r õ e s .

Como a adoção dos conceitos de usabilidade na web foi fundamental para definir seus padrões de uso, estudar a anatomia de um site denota investimento

38

O que é preciso para criar um site totalmente acessível?

34%

Simplicidade no código-fonte.

30%

Seguir todas as normas de acessibilidade do W3C.

29%

Testar incansavelmente em todas as plataformas e dispositivos que conseguir.

7%

Submeter o site a softwares avaliadores de acessibilidade disponíveis na rede.

Acesse e participe! www.arteccom.com.br/webdesign

39

estudo de caso :: Europa Filmes

Em todo momento, no site, buscamos elementos lúdicos na diversão que os filmes proporcionam

A Europa Filmes é um exemplo onde o cliente tem mais autonomia para suas atualizações e não depende da agência para isso

EUROPA FILMES

A SÉTIMA ARTE NA WEB Por Vanessa Barbosa

TRAZER A EMOÇÃO DO CINEMA PARA A INTERNET. ESTE É OBJETIVO DO SITE DA DISTRIBUIDORA EUROPA FILMES, DESENVOLVIDO PELA

DOTCOMM MARKETING ONLINE. UTILIZANDO ELEMENTOS LÚDICOS E DOS PRÓPRIOS FILMES, SEGUNDO CARLOS NERY, DIRETOR GERAL DA AGÊNCIA, A INTENÇÃO É TRANSPORTAR O USUÁRIO PARA DENTRO DA TELA E PERMITIR QUE ELE INTERAJA COM O FILME, E ISSO SÓ É POSSÍVEL NA INTERNET .

40

estudo de caso :: Europa Filmes

WD :: Em relação à distribuição das informações, quais foram os critérios adotados para a organização do conteúdo?

Nery :: Toda a criação de website na Dotcomm passa antes, obrigatoriamente, por um criterioso planejamento inicial.

Nesta fase procuramos absorver ao máximo o negócio do nosso cliente e entender o perfil de seus consumidores, no ciclo de comercialização. A partir disso, surge o escopo com toda a arquitetura da informação do site, que é, em seguida, validado com o cliente antes de iniciarmos a fase de criação.

Dentro desta diretriz, o site da Europa Filmes teve sua arquitetura e distribuição de informações baseadas em um mix entre o formato de atuação da própria empresa e o que buscam os usuários. A estrutura organizacional da Europa trabalha com as áreas distintas de Cinema e VHS & DVD, portanto, do ponto de vista do negócio, era importante transmitir essa distinção também no ambiente online. Focando o conteúdo no consumidor, ousamos um pouco mais e criamos uma área, o Fun Club, que centraliza tudo o que possa acrescentar à experiência do usuário.

www.europafilmes.com.br

PROCURAMOS ABSORVER AO MÁXIMO

O NEGÓCIO DO CLIENTE E ENTENDER O PERFIL DE SEUS CONSUMIDORES NO

CICLO DE COMERCIALIZAÇÃO

41

estudo de caso :: Europa Filmes

Como o negócio da Europa Filmes se divide claramente

de design foi criar uma programação visual que realmente

entre o público consumidor de filmes e as locadoras, que são

privilegiasse o uso das imagens dos filmes, cartazes de divul-

os clientes-chave dos produtos, era importante criar uma área

gação, trailers, fotos etc.. Estas são as imagens mais traba-

totalmente dedicada ao contato e ao relacionamento com este

lhadas de todo o site, e não queríamos que a interface bri-

segmento de cliente institucional. Assim, surgiu uma área res-

gasse com isso. Todo o layout foi construído para valorizar os

trita, com todas as funcionalidades e serviços, estreitando

produtos, sem cair em soluções já exploradas em outros

ainda mais a relação comercial.

sites. O briefing era: criar um site de filmes que fosse total-

WD :: Sobre os conceitos utilizados na elaboração do layout, quais elementos foram importantes para criar a identidade visual do site da Europa Filmes?

mente diferente dos demais.

Em todo momento, no site, buscamos elementos lúdicos, na diversão que os filmes proporcionam. Passar aquela sensa-

Nery :: É realmente muito gratificante para todos que es-

ção de sentar em uma poltrona comendo pipoca e bebendo re-

tão envolvidos neste projeto trabalhar com um produto tão

frigerante que sempre passa pela cabeça quando pensamos

fantástico quanto cinema e filmes. A preocupação da equipe

em cinema ou em vídeo. Claro que a interface teve todo o

A parte mais interessante de todo projeto, que é um verdadeiro presente para qualquer designer, é o fato de cada filme lançado com mais destaque ganhar um hotsite próprio

Na área do Fun Club, o usuário confere notícias, promoções e downloads dos lançamentos

capricho, até mesmo para fortalecer a identidade da Europa Filmes na internet e seguir o briefing do cliente de sair do lugar comum.

A parte mais interessante de todo projeto, que é um verdadeiro presente para qualquer designer, é o fato de cada filme lançado com mais destaque ganhar um hotsite próprio. O material para trabalharmos é inesgotável e os elementos que precisamos para criar o visual estão dentro dos próprios filmes. A intenção da Dotcomm com os hotsites é transportar o usuário para dentro da tela e permitir que

www.europafilmes.com.br/hotsites/meninadeouro ou www.meninadeouro.com.br

42

ele interaja com o filme, e isso só é possível na internet.

WD :: Quais são os públicos-alvos do site?

ÕE Ç A Z I AL

estudo de caso :: Europa Filmes

is te do men a c i s o ba vai a mos foca uem q s e o t m Fil ra, tan cado ropa mes, o u l l i E f a e e ;e sit rd DVD nte tado :: No alme spec mpra e e o r Nery c o é u o os: So o-alv segstint a VH úblic ada os di alug c p c i e e l O u u b . q e pú oq chav rmos anto idor a qu idera m s m u n o. e s o n ci ec con finid auxíis de nte s blico a e ú m m p l te no o a o i n v i c a m t t e a o r c c ic po esp blico o im Publ sto, m pú muit o va s de u t o o i ã u m m ç e a m t un ão cham filme ma f ão s que em u to de eraç t o t , e n i t o i men v s té -al ro e óprio erne blico dast O pr a int e pú e ca e t d u s q e s edinta , já do d nção er im rame estu s e r t o e e a f d d a po As lio muit de o osta ent. resp ieda s com opm r a l A p d e . o a v o r De tiv anh ais p omp ntera om m nte i c re ac e p o m m d va se en efeti úbli nhec meio aop ca co o r i c f a i n p ê ú s es voc utro film assim idor. os o dos e m o o a u t s ã ã a n ç s ulga eu co uais s, q a div l do s e d t n m perfi é ta ng : : Al rketi esen WD e ma repr d s e e a ad ara rens ço p ativid imp s as dos? espa i o á c m d co, e a so foc , por ofer as is nte, mes l m e ços i i , F m v s a r a o p sic ut se ntar Euro :: B a prod site leme dos p o Nery o d m ã o ç b c lu lga ento un C divu do ci tenim ndo rea F e na e u á r n t i l m A n n e o s. eo a de açõe mes a gam eras os fil m m o u ú d n n i i ce e ofere ite va nvolv plo, do e s, o s u m a t r e s o x a e cad efeti ios, m de lo suár ócios g ento e m n g aos u de se ea entr orma ara o a. lataf rcial nte p p e e a m nem m co um omm cifica ão. É lação Dotc Espe ulgaç na re s. A i v i a e d n d da rece cio m da agili stitu a ofe s n p i i o alé o t a i s r e u r Eu m em rado . Reue a rmit iro q e pe comp rático e u s p c q u s n i , e a va in ma ses ma f tudo ilme siste rnou pa F o o o t r m o u o E ss site c s, e i liente rou o c g e s t a r n i o locad suas p ara

S,

ATU CUSTO QUE O E D TINA VEZES, É UM O R DE N A S E A D T N IA

E O Ã N E T N E I CL ACEITA

AIO NA M

R

O E NÃ

43 43

estudo de caso :: Europa Filmes

centemente, criamos uma loja virtual exclusiva para locadoras que foi um enorme sucesso, chegando a cerca de R$ 475 mil em compras de todo o Brasil em dois meses.

WD :: Quantas pessoas trabalharam na criação do projeto? Qual é a função de cada integrante?

Buscamos transmitir aquela sensação de sentar em uma poltrona comendo pipoca e bebendo refrigerante que sempre passa pela cabeça quando pensamos em cinema ou em vídeo

Nery :: Da equipe da Dotcomm tivemos nove profissionais envolvidos no projeto: um diretor de arte, dois webdesigners, um estagiário, dois programadores, um arquiteto de informação, um redator e um coordenador de projeto. Isso além da participação

locadora a comprar este mesmo filme quando disponível. Portanto,

das gerências de planejamento, criação e tecnologia.

as informações devem ser segmentadas o máximo possível.

WD :: Quais tecnologias foram utilizadas para a construção e produção do site?

Nery :: Utilizamos, basicamente, Cold Fusion na linguagem de programação do site, além de diversos recursos em Flash.

WD :: Por causa dos lançamentos semanais de filmes, o site é atualizado constantemente. Qual o sistema utilizado para a atualização e como é a rotina?

Nery :: Essa pergunta é ótima porque encaixa exatamente

WD :: O projeto é voltado para diversos segmentos.

com o conceito da campanha de divulgação da Dotcomm, onde

Há uma preocupação no tratamento da linguagem e das

dizemos: Fazemos mais que site. Site todo mundo faz. O que

informações para esses diferentes tipos de público?

fazemos é marketing online com resultado . E a resposta para a

Como isso é feito?

Europa Filmes passa por esse caminho. A rotina de atualizações,

Nery :: Uma parte desta questão foi comentada anterior-

na maioria das vezes, é um custo que o cliente não entende e não

mente, quando falamos sobre a área restrita para locadoras.

aceita. Neste caso, toda a rotina básica do site é feita diretamente

Realmente é importante destacar linguagens diferentes para

através de um módulo de administração customizado criado pela

tratar com os públicos específicos. No caso da Europa Filmes, o que

Dotcomm em paralelo com o projeto do site. Costumamos dizer

motiva uma pessoa a assistir a um filme não é igual ao que leva uma

que, ao construirmos um ativo (site) para o cliente, não podemos ficar cobrando cada vez que ele quer acender uma luz.

Neste formato podemos direcionar nossos esforços para as ações de marketing online que trarão mais resultados no negócio.

Não que as atualizações não sejam importantes, pelo contrário, são fundamentais. Mas quando é um trabalho mecânico pode ser executado pela própria equipe do cliente, sem um custo fixo mensal para eles. Assim, temos mais tempo e mais verba para investir no marketing online. Algumas áreas estratégicas do site, onde há uma criação mais especializada, são de responsabilidade da Dotcomm na rotina.

www.europafilmes.com.br/hotsites/grudge ou www.ogrito.com

A Europa Filmes é um exemplo de onde o cliente tem mais autonomia para suas atualizações e não depende da agência para isso. O nosso principal objetivo é que o cliente se sinta confortável com o formato e entenda a importância de um marketing online mais amplo, onde o site é mais uma ferramenta.

44 44

Luz, câmera... download!

, z Lu

. . . a r e m â c

...download!

Por Vanessa Barbosa

Tornar disponível o trailer de um filme, uma aula online, cenas do casamento, capítulos de novelas, uma palestra, reportagens do telejornal que você não assistiu. Enfim, ninguém duvida das funcionalidades que o vídeo tem como recurso na web. O que importa é saber como utilizálo sem dificultar a navegabilidade do usuário e não deixar que a espera pelo download se torne um verdadeiro exercício de paciência. Para entender melhor como aplicá-lo em seu site, a Webdesign convidou especialistas no assunto para explicar como usar o vídeo na web de forma eficiente e com qualidade, buscando sempre facilitar e despertar o interesse do internauta.

45 45

Luz, câmera... download!

Novos codificadores estão sendo desenvolvidos e novas formas de compactação estão sendo

Para aplicar um vídeo na web é necessário conhecer os formatos e compactações existentes, as tecnologias utilizadas para a produção e reprodução. Para Ricardo Cavallini, diretor de tecnologia e produção da Euro RSCG 4D, antes de saber os formatos, é importante entender o conceito de qualidade de vídeo na internet.

Na verdade, estamos falando do resultado de uma soma de fatores: largura e altura da imagem (geralmente medido em pixel ou em linhas), quantidade de quadros por segundo (a TV tem 30), quantidade e fidelidade de cores e, por último, não menos importante, a quantidade de informação ou detalhes que contém o vídeo , explica Ricardo.

Há motivo para temê-lo?

Para entender o porquê do vídeo ser, às vezes, um problema na internet, Ricardo explica que basta compará-lo com uma fotografia. Se o vídeo tem 30 quadros por segundo e dura 10 segundos, significa que, na prática, ele tem 300 (30x10) imagens em seqüência que aos olhos do observador dão a impressão de movimento, assim como acontece com a película do

criadas. Em breve,

cinema. Neste exemplo, o vídeo ocuparia um espaço 300 vezes maior que uma fotografia de mesma largura e altura .

O diretor complementa que essa diferença faz com

alcançaremos a

que o arquivo do vídeo seja maior, causando demora no tempo de download, e ocupe mais espaço no disco rígido d o c o m p u t a d o r. R i c a r d o d e s t a c a q u e p a ra c o m p r i m i r

qualidade de

a r q u i v o s e x i s t e m p r o g r a m a s c o m o o W i n Z I P. Po r é m , apesar de nesse método o material não sofrer alteração na qualidade, ele não tem velocidade para comprimir e

compressão de

descomprimir o vídeo em tempo real.

Por isso, surgiram formas de compressão com perda de qualidade conhecidas como CODECs (COmpression

um DVD

DEcompression Codes). Cada método de compressão e descompressão utiliza uma fórmula diferente, mas o objetivo de todos é diminuir o tamanho do arquivo,

Diogo Boni 46 46

fazendo com que a perda de informação seja menos perceptível para o espectador. É graças a esta perda que,

prática,

trabalha há oito anos com

você pode ter

planejamento e criação

uma imagem do

para internet, fazendo

tamanho da TV

sites, campanhas e

(640x480 pixels) com

peças

a mesma quantidade de

interativas.

quadros por segundo

publicitárias

Para tornar disponível

(30), mas ter uma

um vídeo na internet, a

péssima qualidade de

escolha fundamental.

imagem , expl ica.

do

formato

Fa t o r e s

é

como

tamanho, duração e tecnologia

Segundo Ricardo, o MPEG 2 é um CODEC

podem

de

ficou

f ra c a s s o d a a p l i c a ç ã o . Pa ra C e z a r,

famoso por ser utilizado

um dos pontos mais importantes é o

nos

vídeo

que

DVDs.

o

sucesso

ou

c u s t o d e t r a n s f er ên c i a , p o i s ví d e o s são

Outros

arquivos pesados e consomem muito tempo

CODECs de vídeo citados pelo diretor são: MPEG1, MPEG4,

significar

para download. Outro aspecto relevante é a

Sorenson, Cinemac, DIVX e Real. Existem CODECs

capacidade de transmissão. Se muita gente acessar o

específicos para streaming uma maneira de ver o vídeo

site ao mesmo tempo, o peso dos arquivos pode deixar

enquanto o download é feito, não esperando o vídeo

a transferência lenta ou o servidor pode até sair do ar.

baixar inteiro e também é possível produzir vídeos

O coordenador de criação destaca também que

interativos, utilizando softwares como o Macromedia

não adianta colocar um vídeo na web em um formato

Flash , acrescenta.

que ninguém consiga visualizar ou em um formato que

Qual formato escolher?

obrigue seu visitante a baixar um plug-in pesado.

Para Cezar Calligaris, coordenador de criação online

Não existe consenso sobre o melhor formato

da DPTO, a produção de vídeo na internet segue

para vídeos na web. De modo geral, podemos dizer

praticamente o mesmo processo da produção de um vídeo

que vídeos de longa duração acima de três minutos

para a TV: passa pela captação das imagens brutas, pela

devem ser disponibilizados por streaming, onde

edição e tratamento dessas imagens e, na internet, pela

predomina a tecnologia Windows Media. Vídeos de

adaptação ao formato mais interessante para a

curta duração podem ser disponibilizados para

visualização dos usuários.

download

o

site

da

Apple,

por

exemplo,

A g ra n d e d i f e r e n ç a e n t r e o s v í d e o s d a T V e d a

disponibiliza trailers de diversos filmes no formato

internet é a compactação ou adaptação ao formato mais

QuickTime, que possui ótima qualidade. Os vídeos

adequado. Isso é necessário para que os usuários

que você recebe de amigos por email estão nos

possam visualizá-los. Assim como na TV existe VHS ou

formatos MPG e AVI. Em sites e campanhas, o

DVD, para a visualização na web existem muitas

formato mais usado é o Flash, por ser o que

tecnologias as mais usadas atualmente são: Windows

possibilita interação com mais facilidade. Mas

Media, Flash, MPG, AVI e Quicktime , afirma Cezar, que

n e n h u m a d e s s a s a s s o c i a ç õ e s é r e g r a , e x p l i c a .

47

Luz, câmera... download! games

na

Luz, câmera... download!

Para Diogo Boni, sócio-diretor da DB4 Comunicação,

Já Alex Falcão não vê tanta diferença entre

a estratégia a ser adotada é codificar os vídeos para

as duas mídias. Segundo ele, o importante é escolher a

todas as velocidades possíveis no Windows Mídia Vídeo,

extensão correta. Ao optar por colocar o vídeo com alta

que habilita transmissão para três bandas: 56k, 150k,

resolução, este, conseqüentemente, ficará muito

256k. Assim, usuários de todas as conexões vão ter a

pesado, mesmo sendo em streaming. Acho que o grande

oportunidade de assistir. A de 56k destina-se a usuários que utilizam conexão discada via modem; a de 150k para os que utilizam banda larga até 256k (cabo, dsl e ADSL) e a de 256k para aqueles que usam banda larga. Em nossos projetos sempre utilizamos o Windows Media Player, pois o usuário já tem instalado no computador.

Fazendo a codificação pelo Real Player, o visitante tem uma barreira à frente, pois além de fazer o download do arquivo, precisará instalá-lo , explica.

Alex Falcão, webdesigner e desenvolvedor de tutoriais do site ComunidadeWeb, concorda com Diogo. A estratégia é usar o Windows Mídia Vídeo para não ter problemas de o usuário possuir ou não o software em sua máquina. Isso porque qualquer pessoa que tem o Windows pode visualizar os vídeos no Windows Media Player , justifica. Porém, segundo ele, o ponto negativo será a qualidade do vídeo, que apesar de ficar mais leve, não é tão interessante. Outras opções, como o Quick Time, RealPlayer e o FlashPlayer são excelentes, mas o que dificulta é o usuário ter de baixar o software para rodar o filme.

Internet x TV E a qualidade do vídeo na internet é inferior à da TV? Para Diogo Boni, a compressão dos vídeos para internet é muito grande e com isso perde-se muito a qualidade. Com o crescimento da banda larga, temos a diminuição nesta compressão e naturalmente ganho na qualidade de áudio e vídeo.

problema ainda é a

Além

sendo

vel oci d ad e d e c o n e x ã o p a r a i n t e r n e t . Vo c ê t e m d e

desenvolvidos e novas formas de compactação estão

produzir um vídeo pensando em qualquer usuário. Desde

sendo criadas, assim já se tem um ganho mesmo com

o modem de 14.400 até a maior velocidade de ADSL.

a banda larga de hoje. Em breve alcançaremos a

Mas, com certeza, é possível produzir vídeos com boa

q u a l i d a d e d e co m p r e s s ã o d e u m D V D.

qualidade para a web .

48 48

disso,

novos

codificadores

estão

compactar o vídeo para colocar na internet pode-se

Luz, câmera... download!

R i c a r d o C a v al l i n i e x p l i c a q u e n a h o r a d e

Se você vende

utilizar uma compressão com qualidade muito superior à da TV ou até mesmo à do DVD, porém, pela limitação de velocidade de download, desenvolvedores optam por

produtos

degradar a qualidade para obterem arquivos menores, no qual o download será mais rápido.

Nos

últimos

apareceram

anos

tecnologias

melhores para compressão de vídeo,

mas

diferenciados,

nenhuma

como produtos

milagrosa. Assim, a lógica mostra que a qualidade do v í d e o n a w e b va i m e l h o r a r,

premium ou

acompanhando a qualidade e a quantidade de internautas com banda larga que tivermos .

automóveis de

Para Cezar Calligaris, o cenário não é tão ruim quanto parece. A principal diferença

luxo, vale arriscar.

está n a tecnologia u sada p ara transmissão e recepção a TV é muito mais rápida que a internet,

O vídeo faz uma

o que faz com que seja possível transmitir uma quantidade maior de informação e, assim, oferecer

diferença muito

mais qualidade. O vídeo na internet ainda está em uma fase de evolução e existe muito para melhorar, desde o aumento da

grande para um

capacidade de transmissão até tecnologias que permitam transmitir mais qualidade em menos bytes .

Como aplicar um vídeo digital

público de maior

Publicar um vídeo na internet pode ser simples ou complicado. Segundo Cezar é como fazer um site: existem desde sites simples até os de internet banking.

poder aquisitivo

Colocar um vídeo de 15 segundos do seu aniversário na web é muito simples. Criar um jornal com vídeo online já é mais difícil. Apesar de não existir muito material a

Cezar Calligaris 49

Luz, câmera... download!

respeito, alguns livros disponíveis no mercado podem

está sendo exibido corretamente e o tempo que leva para

a j u d a r . Pa ra o w e b d e s i g n e r t e r u m a v i s ã o g e ra l va l e

carregar.

procurar as publicações para saber mais sobre o tema.

Ricardo Cavallini ressalta que hoje existem vári-

Com esse material, de acordo com Cezar, o profissional já

os softwares para captura, digitalização e compressão de

conhece os programas e pode publicar seus primeiros

maneira amigável. O iMovie, da Apple, é um bom exem-

v í d e o s . A m a i o r i a d o s p r o f i s s i o n a i s é a u t o d i d a t a . S e

plo. Com estes softwares, consegue-se editar e comprimir

você quiser conhecer as técnicas a fundo, a melhor

o vídeo sem muitos conhecimentos técnicos .

maneira é buscar contato com profissionais que

Dentre os profissionais envolvidos na produção d e v í d e o s , D i o g o B o n i d e s t a c a a a t u a ç ã o d e câ m e r a s ,

conhecem o assunto .

O primeiro passo para colocar um vídeo na web, de

operadores de corte, diretor de corte, técnico de

acordo com Cezar, é fazer o roteiro e o planejamento.

streaming,

cabo-man,

Vo c ê t e m d e s a b e r o q u e va i f a z e r e c o m o va i

webdesigners, entre outros.

operadores

de

áudio,

disponibilizar e divulgar os vídeos ao público . O segundo

Um fator importante para identificar a eficiência

passo é captar, editar e tratar as imagens, seja por meio

do recurso é verificar as estatísticas de acesso. Os

de uma equipe própria ou de uma produtora. A terceira

softwares mais utilizados com este objetivo são: Web

etapa é a criação dos arquivos finais, sem compactação,

Trends, Web stats, Web Surfer e Web Analyzer.

a partir dos quais se pode dividir e transformar no tipo

De acordo com Cezar Calligaris, o levantamento

de arquivo que se deseja. A quarta fase é transformar o

é feito, em geral, por meio de relatórios fornecidos pelo

vídeo em formato para visualização na web ou, então,

local onde os vídeos estão hospedados. As conclusões

para o uso em uma peça interativa.

obtidas são praticamente as mesmas que você tira de um

Por último, o material é publicado

relatório de um site tradicional: quantas pessoas

e são feitos testes para ver se

acessaram, os vídeos mais acessados, a hora e o dia com mais acessos, freqüência das visitas, vídeos

50

portantes: visitação e custos. A análise da visitação é essencial para saber se as informações estão colocadas corretamente no site. Outro dado que você pode obter é o melhor horário para fazer a publicação dos vídeos ou a manutenção do site quando há menos visitas. Os relatórios também são importantes para controlar custos, como o consumo de banda .

Quando ousar?

Para Ricardo Cavallini, a usabilidade é uma questão que não pode ser esquecida, sempre atenta às necessidades do usuário. Em um site de notícias, o usuário quer entrar, ler a informação que veio buscar e ir embora. Em um site de comércio eletrônico, quer entrar, p e s q u i s a r s o b r e o p r o d u t o , c o m p r a r e f u g i r. C o l o c a r vídeos em sites assim pode ser um tiro pela culatra.

Claro, nem todo site é igual, e sempre é possível ousar, mas é preciso cautela e cuidado para não atrapalhar mais do que ajudar , destaca.

Outro fator importante a ser lembrado quando o vídeo está sendo produzido é o uso de conexão discada por grande parte dos usuários da web no Brasil. Alguns sites, de acordo com Ricardo, disponibilizam o conteúdo com qualidade inferior, indicando baixa resolução ou 5 6 k . A ú n i c a s o l u ç ã o p a ra e s s e p r o b l e m a é m e s m o aguardar a mudança para banda larga, o que deve levar u m t e m p o a i n d a p a r a a c o n t e c e r. E n q u a n t o i s s o , é possível trabalhar para o público que já a possui ao desenvolver tecnologias e criar experiências o que dá e o que não dá certo , afirma.

Por outro lado, Ricardo destaca um elemento que pode popularizar bastante o vídeo na web: o crescimento dos aparelhos capazes de captar vídeos, como palms, celulares e câmeras digi tais. Assim como as fotos, as p e s s o a s p o d e m c o m p a r t i l h a r v í d e o s n a w e b , l e m b ra .

Luz, câmera... download!

fora do ar etc . Segundo ele, dois aspectos são mais im-

Em um site de notícias, o usuário quer ler a informação e ir embora. Em um de comércio eletrônico, quer comprar e fugir.

Colocar vídeos em sites assim pode ser um tiro pela culatra

Cezar Calligaris ressalta também outra novidade: os vlogs, ou seja, blogs de vídeos que funcionam de maneira semelhante aos blogs de texto e foto.

Ricardo Cavallini 51 51

Agências e produtoras também já perceberam como o vídeo é um elemento que chama a atenção do usuário,

permite

funcionalidade

do

a

interação produto.

O

e

demonstra vídeo

vem

a se

destacando em campanhas e sites, basta ver as peças q u e f o r a m p r e m i a d a s n o s f e s t i v a i s m a i s r e c e n t e s , r e s s a l t a C e z a r.

Porém, no Brasil, o vídeo na web ainda é pouco u t i l i z a d o p o r d uas razões: o s c u s t o s d a p r o d u ç ã o e a predominância de conexão discada. Mesmo com todas essas limitações, consegue-se fazer peças muito c r i a t i v a s . Te m o s c o m o ó t i m o e x e m p l o o s v í d e o s interativos, em que a pessoa cria um vídeo personaliz a d o , a f i r m a C e z a r. A l é m d i s s o , e l e d e s t a c a o v í d e o como uma excelente ferramenta de marketing online: Se você vende produtos diferenciados, como produtos premium ou automóveis de luxo, vale arriscar. O vídeo faz uma diferença mui to grande para um público que possui maior poder aquisitivo, mais acesso à informação e capacidade técnica para r e c e b e r e s s e c o n t e ú d o .

52

53

tutorial

Álbum Digital - Parte II Olá Pessoal ! Vamos dar sequência a nossa matéria sobre

Alex Falcão - Adm. do Portal ComunidadeWeb ramek@comunidadeweb.com.br

OBS.: Neste caso eu escolhi a pasta mt08 porque eu fiz com que gravasse nesta pasta, mas, por padrão, ao conver-

Álbum Digital.

Nesta matéria, vamos inserir a trilha sonora.

ter para MP3, ele salva direto na pasta MEUS DOCUMENTOS.

Primeiramente, é importante que você tenha aprendido

É importante que você perceba onde está sendo salvo para

como transformar sua trilha sonora em MP3. Caso não

não ficar perdendo tempo em achar onde foi salvo seu MP3.

tenha feito isso ainda, assista ao vídeo aula no site da Re-

Repare que, ao selecionar, nosso MP3 aparece na janela (figura 4).

vista Webdesign.

Vamos ao que interessa agora! Abra o Pinnacle Studio e, em seguida, vamos abrir o projeto da matéria anterior.

Feito isso, clique no botão: Show sound effects (figura 1).

figura 4

Pronto ! Agora, na timeline, repare que temos um ícone da câmera de filmar; clique nela para travarmos esta timeline.

Se não travarmos esta timeline, não será possível inserir o MP3. Feito isso, apenas clique no MP3, segure o botão do

figura 1

mouse e arraste para sua timeline na parte de áudio.

Depois clique na pastinha e selecione a pasta onde se

Veja a imagem abaixo:

encontra a música em MP3, como mostrado nas figuras 2 e 3.

figura 5

figura 2

Ainda não acabamos. Preste atenção que no final da timeline o MP3 é bem maior que a quantidade de fotos que temos inserida na timeline. Para corrigir isso, basta ir até o final da timeline do áudio, clicar no final e arrastar para a esquerda até chegar ao final da timeline das imagens.

A figura 6 mostra a timeline do áudio bem maior que a figura 3

54

timeline das imagens.

tutorial Feito isso, bem no final da timeline de áudio, você clica e figura 6

arrasta para baixo. Veja a imagem abaixo:

Imagem correta do sincronismo entre imagem e áudio (figura 7):

figura 9

figura 7

Agora sim ! Finalizamos nosso álbum.

Para o resultado final ficar bem melhor, clique na

Se você quiser colocar seus créditos no final, use o

timeline de áudio bem no finalzinho, para podermos baixar o

Corel Draw ou Photoshop, faça uma criação e coloque no

áudio conforme vão acabando as imagens, para não ficar um

final da timeline. Salve como JPG.

final grotesco. Repare que fica um pontinha demarcando a

Na próxima edição, vamos aprender como queimar nosso álbum no DVD ou CD.

timeline (figura 8).

Isso significa que dali em diante o áudio vai baixando aos poucos.

Veja o projeto final com fotos no site da revista (www.arteccom.com.br/webdesign)

figura 8

55

criação

Marcos Nähr Web technologist do departamento de marketing da Dell Computadores.

Responsável pelo desenvolvimento do site e loja online da Dell Computadores no Brasil.

Marcos_Nahr@Dell.com

Narrativas fantásticas Estima-se que no século IX d.C. começaram a ser escritos os contos árabes Les Mille et Une Noits , reunidos e traduzidos para a cultura ocidental por Antoine Galland, no século XVII. Essa obra compõe-se de 12 volumes e tem como uma de suas características principais um encadeamento contínuo de histórias, isto é, uma história contém outra história, que por sua vez contém outra e assim por diante.

Pode-se dizer que foi uma das primeiras obras a utilizar, de forma consistente e planejada, links dentro de um mesmo documento, ou seja, um dos primeiros hipertextos produzidos.

Outro aspecto a ser ressaltado na obra As Mil e Uma Noites é o fato de seus personagens serem sempre planos, sendo perfeitamente substituíveis pela ação que representam. Seus atos seguem uma causalidade circular e sempre previsível: matam porque são cruéis, são cruéis porque matam, são boas e sábias porque ajudam seus semelhantes, ajudam porque são boas e sábias.

A n a r ra t i va d e A s M i l e U m a N o i t e s é i m p e s s o a l e , p o r t a n t o , t í p i c a d e u m a narrativa pura e as personagens são apresentadas apenas como modelos de estados mentais, completamente transparentes e vazias, prontas para servirem de veículo de uma idéia.

A eficácia psíquica desta estrutura narrativa é algo que pode ser usado no design de um website, valorizando sua navegabilidade e usabilidade. Este é um modelo que podemos seguir ao criar uma estrutura, um design com características marcantes de hipertexto. À medida em que o usuário vai entrando na malha do website, todos os demais conteúdos à sua volta serão reconhecidos, por efeito de comparação, como produtos inquestionáveis da realidade. Ícones, menus, estruturas de textos e navegação, tudo deve ser assimilado pelo usuário, criando um modelo mental que seja reconhecido por ele e aceito como verdadeiro, algo com o qual ele não precise lutar, mas com o qual possa interagir naturalmente.

Diferentemente dos textos que procuram causar o terror, o susto ou o suspense a o l e i t o r, a s n a r r a t i v a s fa n t á s t i c a s , c o m o A s M i l e U m a N o i t e s , a p r e s e n t a m personagens e incidentes sobrenaturais, não com o fim de deixar o leitor em guarda, c o m o , p o r e x e m p l o , n o s r o m a n c e s p o l i c i a i s o u d e t e r r o r, m a s s i m d e c o n d u z i - l o

56

criação

O design deve seguir uma estrutura semelhante àquela usada nas narrativas fantásticas, conduzindo o usuário serenamente através do novo e diferente mundo que a ele é apresentado

serenamente através do insólito para que faça a travessia da trama em um estado de espírito entre acreditando e desacreditando. Plantar a semente da dúvida ou da suspeita naquele que lê é condição necessária da literatura fantástica, é o que faz com que o leitor vá adiante.

O design, do mesmo modo, deve seguir uma estrutura semelhante àquela usada nas narrativas fantásticas, conduzindo o usuário serenamente através do novo e diferente mundo que a ele é apresentado.

Deixá-lo curioso, ávido por mais informação, ávido por seguir adiante.

57

webwriting

Bruno Rodrigues Autor do primeiro livro brasileiro e terceiro no mundo sobre conteúdo online, intitulado Webwriting - Pensando o texto para a mídia digital . É coordenador de informação do website Petrobras e titular da primeira coluna sobre Webwriting no mundo, elaborada desde 1998 e hoje veiculada na revista online WebInsider . Ministra treinamentos de Webwriting e Arquitetura da Informação no Brasil e no exterior. bruno-rodrigues@uol.com.br

Arquitetura de Informação No universo da informação digital, a Arquitetura da Informação tem lugar de honra. É a partir da estrutura criada para os sites e afins (Arquitetura da Informação) que se distribui a Informação (através do Webwriting) e produz-se Conhecimento.

A Arquitetura da Informação (A.I.) não surgiu com a internet, nem com a informática.

Aplicada no dia-a-dia do ser humano há séculos, a A.I. 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.

Muito se tem falado sobre Arquitetura da Informação, mas, como ciência recente ( foi formalizada há pouco mais de um século), existem mais dúvidas do que certezas, principalmente quando aplicada à web.

Vamos, então, separar o joio do trigo?

O que é Arquitetura da Informação?

Em um ambiente digital, é a tarefa de estruturar e distribuir as áreas, principais e secundárias, tornando 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.

Quais são os princípios da Arquitetura da Informação?

Há sete princípios, denominados palavras de ordem: - Organizando sugere diversas opções de construção para um ambiente digital como um todo e para suas áreas secundárias.

- Navegando lida com o aprendizado, tanto na aquisição da informação pelo usuário, quanto na percepção de como ele navega pelos ambientes digitais.

- Nomeando estuda de que maneira as áreas serão identificadas, seja através da palavra (neste caso, é preciso escolher a terminologia mais adequada), do ícone, ou de ambos.

- Buscando ensina como indexar a informação para que a sua procura seja tranqüila.

- Pesquisando é o caminho a seguir para apurar junto ao cliente toda a Informação necessária à construção do conteúdo.

- Desenhando testa o resultado final da Arquitetura da Informação, antes mesmo da construção do protótipo, ou seja, no próprio fluxograma.

58

webwriting

Saber o que é e o que não é Arquitetura da Informação, e aprender a usar softwares que constroem fluxogramas, não faz de ninguém um especialista no assunto

- Mapeando é a palavra de ordem mais estudada hoje na Arquitetura da Informação para a web. Afinal, seria mesmo o fluxograma a melhor maneira de representar graficamente para o usuário um sistema de informação?

No excelente livro Information Archictecture for the

muito mais para o trabalho de um bibliotecário do que o de um especialista em internet.

Perceba que o caminho do conteúdo na web está, muitas vezes, em olhar para o que foi feito até agora, e não reinventar o que já existe há séculos.

World Wide Web , de Peter Morville e Louis Rosenfeld, considerada a principal referência em A.I. para a web (assim como seus autores), as sete palavras de ordem são descritas em detalhes. Opte pela 2ª edição, revista e ampliada.

O mapa de um site é sua Arquitetura da Informação?

Não. O mapa de um site é um resumo da Arquitetura da Informação. O real fluxograma de uma A.I. explicita itens que não interessam ao usuário, como as phantom labels (áreas previstas, mas que ainda não existem) e os filtros usados pelo mecanismo de busca.

Quem pode trabalhar com Arquitetura da Informação para a mídia digital?

Bibliotecários, engenheiros, arquitetos, profissionais de planejamento e, é claro, de conteúdo. Em um mercado tão multifacetado com o da internet, em que diversos perfis de profissionais participam ativamente da tarefa da construção de ambientes digitais, a realidade demonstra que quem lida com organização e construção de sistemas tem sempre algo precioso a acrescentar.

Saber o que é e o que não é Arquitetura da Informação, e aprender a usar softwares que constroem fluxogramas, não faz de ninguém um especialista no assunto, já que A.I. requer muito estudo e raciocínio apurado. O dia-adia de um profissional de Arquitetura da Informação está

59

bula da Catunda

Marcela Catunda Trabalhou nas redes Bandeirantes, TV Gazeta, Manchete e Globo. Foi redatora da DM9DDB e supervisora de criação de mídia interativa da Publicis Salles Norton.

Atualmente é autônoma. marcelacatunda@terra.com.br

Senhor Roarke, mito ou realidade?

Hoje acordei cansada da vida de freela. Normal. Nem todos os dias a gente acorda com o pé esquerdo (eu sou canhota), tem dias em que o pé direito encontra o chão antes que o bom humor arranque o primeiro pensamento do dia.

Por que eu preciso estar todo dia bem humorada? Onde diabos está escrito isso, hein?

Entrando no prumo depois de um café da manhã com pãozinho e suco de laranja e mais nada, a grana tá curta, reflito jogada no pufe da sala...

O mês passado foi dureza globeleza. E nesse? Até quando terei que fugir do pessoal do condomínio e descer pela escada? A síndica está sempre no elevador. Que onipresença. É impressionante!

Exageros à parte, e tirando a outra do condomínio atrasado, o resto todo é verdade.

A instabilidade da vida de um freela ainda é a parte mais difícil de administrar. Nisso, o telefone toca.

- Marcela Catunda?

- Não (Respondo enquanto coloco um bigode). Vai que é a mocinha do crediário da C&A...

- Ela está?

Eu estava e pra minha sorte, o cara do outro lado também estava. Estava a fim de me dar um freela. Benza Deus, alguém ouviu as minhas preces.

Sem fazer a linha desesperada, cheguei à produtora em pouco mais de dez minutos (risos).

Brincadeirinha! Marcamos para o fim da tarde e cheguei pontualmente. Pontualmente a tempo de ler uma Caras do Carnaval 2001. Pra minha falta de sorte, a leitura prolongou-se e depois de decorar o nome de todas as rainhas da bateria, escutei a mocinha da recepção chamar meu nome: Carlunga? Pode entrar. Ele já vai te atender .

Carlunga! Isso tá ficando cada vez melhor.

Poucos passos e lá estava eu na sala de reuniões. Alguém pode me explicar por que elas sempre têm uma mesa com tampo de mármore? Só mudam os pés. Já reparou? E por que sempre aquele ar condicionado congelando se nem existem pingüins por lá? Por que aquele bando de cinzeiros se é proibido fumar? Por que eu nunca sei em que cadeira sentar quando dou de cara com mais de oito na minha frente?

Pra variar, o Boss em questão demorou mais algum tempo pra chegar e agora eu não tinha nem uma revista Caras pra me distrair, só aqueles anúncios enquadrados. Que mania! Decorei todos, mas comecei a confundir com os nomes das rainhas da bateria.

60

Quando o Boss chegou, eu puxava um ronco de olhos abertos. Ainda bem que deu tempo de disfarçar e fazer aquele olhar distante.

bula da Catunda

Gente! Ele é o Senhor Roarke e estou sendo bem-vinda à Ilha da Fantasia. Cadê o Tatoo?

Não posso olhar muito, vai que eu acho um baixinho e daí não vou conseguir parar de rir

que eu acho um baixinho e daí não vou conseguir parar de rir.

Será que vão achar que eu sou louca?

E já que estou na Ilha da Fantasia, preciso de um pedido:

- Demorei muito? Me desculpe, mas...

quero fazer um grande trabalho, receber direitinho e ser cha-

Por que sempre a mesma introdução? Só muda a explica-

mada sempre. Fiz três.

ção que vem depois do mas e da vírgula.

Meus pedidos foram prontamente atendidos e tudo deu

Algum tempo depois...

certo. A dor foi deixar aqueles amigos de trinta e poucos dias

Simpático e perfeito. Hum, bom demais pra ser verdade.

de trabalho ali.

Interativo, escutou minhas loucuras e riu de todas, elogiava

Não, o que doeu mesmo foi dizer não para um pedido de

cada idéia e me ofereceu uma grana, e das boas, pelo trabalho.

efetivação . É. Senhor Roarke queria me contratar. Mas eu

Depois da reunião, andou comigo pela produtora, me apresentou as pessoas, a ilha de edição em que eu montaria o

não podia aceitar. Sou freela, ora bolas.

Mais uma porta aberta, e essa deixei escancarada, pra

vídeo e uma mesa ao lado de uma janela.

poder voltar sempre. E estou voltando. Foi deles o telefonema

- Você vai ficar aqui, Catunda.

da ex-triste manhã de ontem. Dessa vez, vou ficar mais tem-

Gente! Ele é o Senhor Roarke e estou sendo bem-vinda

po. Oba! Salva pelo gongo.

à Ilha da Fantasia. Cadê o Tatoo? Não posso olhar muito, vai

Carlunga! O avião! O avião!

61

marketing

René de Paula Jr. Analista de negócios da Sony Latin America, René é profissional de internet desde 1996, passou pelas maiores agências e empresas do país: Wunderman, AlmapBBDO, Agência Click, Banco Real ABN AMRO. É criador da usina.com , portal focado no mundo online, e do radinho de pilha (www.radinhodepilha.com), comunidade de profissionais da área. rene@usina.com

Diário de bordo San Francisco, Califórnia - Vocês estão procurando algo? Posso ajudá-los?

Tirei meus olhos do mapa amarrotado e ali estava ele, sorridente. Perguntei por uma casa vitoriana XYZ que deveria ficar nas imediações. O moço a conhecia, sim, era na rua de cima, à esquerda, coisa simples. Agradeci pela solicitude e hospitalidade e pensei comigo: esse cara é o Google 2.0.

Miami, Flórida Vishal me deu uma carona. Veeranna também veio conosco. No carro, comentávamos felizes o jantar indiano comme il faut que Lalitha nos oferecera. Perguntei ao Vishal se ele gostava da cidade, se ele gostava da América. Enquanto dirigia pela noite tranqüila, me disse que tanto fazia Miami, San Diego ou qualquer outra cidade, dava mais ou menos na mesma.

Encontrar lugar para morar, achar trabalho, fazer compras, dirigir, tudo na vida cotidiana era o mesmo, tudo funcionava igual. Sistema americano foi a palavra que ele usou. Você pode mudar de cidade sem pestanejar, porque o sistema é o mesmo. Insisti: Vocês não estranham nada? .

Claro! As maçanetas. Aqui são ao contrário!

Rindo, Veeranna acrescentou: Os interruptores também! Aqui são de cabeça para baixo!

São Paulo Rua Manoel Maria Tourinho? Deixa comigo.

Pacaembu eu conhecia bem. Aquilo era um labirinto, ruazinhas sinuosas serpenteando bairro adentro num traçado perverso que eu só aprendi depois de anos morando na área.

De casual, porém, o desenho do bairro não tinha nada: foi um truque urbanístico para que as ruas não virassem um corredor de tráfego, para que as casas ficassem sossegadas numa ilha impenetrável aos motoristas de fora.

Adoro cidades. Adoro. E quanto mais eu trabalho no digimundo, mais eu vejo que estamos de novo erguendo cidades, metrópoles, bairros, malls... sem tijolo algum. Cidades Invisíveis, do Calvino, está ganhando um adendo. (Você não leu? Leia. Releia.)

Esse paralelismo cidades x internet me fascina faz um bom tempo. A primeira coisa que me ocorreu foi mais pobre, porém: pensava no quanto webdesign e arquitetura eram parecidos - a home e a fachada, o sitemap e a planta, e por aí vai. Não é de se espantar que se fale em arquitetura de informação, afinal.

62

A analogia não ajuda muito, porém: se você quiser fazer sua casa redonda, é problema seu. O vizinho fez uma palafita?

Azar o dele. A casa em frente vai ser inteira cor-de-rosa, paredes e teto? Sorte sua que você não vai morar lá.

softwares sociais, padrões emergentes e, como sempre, usabilidade.

Cidades são complexas. Cidades são imprevisíveis.

Cidades desafiam qualquer tentativa de controle. Internet é

Muito do que se fez de webdesign, no começo, era assim:

igual: o email favelizou-se, sites de banco são fortalezas anti-

cada site era a cara do dono, cada site era original, homes

fraude, o Orkut já não é mais entre amigos , homes são

competiam em originalidade e impacto.

pichadas por vândalos.

Algo, felizmente, nos salvou desse festival de bizarrices.

Como evitar que a internet degenere? Como criar ambientes online que sejam dignos, que enriqueçam a vida

Google. E por três razões.

Primeira razão: sites demais. Antes dava para navegar a

das pessoas? Como tornar a vida digital mais humana? Como

esmo, checar alguma lista de hot links e topar com o que você

usar esse universo em favor da democracia e liberdade? Como

queria. Agora, não dá mais.

desarmar o egoísmo para que a colaboração floresça?

Segunda razão: se o conteúdo do teu site é invisível para

Essas são as questões que eu me coloco hoje, seja ao

o Google (Arrá!!! Quem mandou fazer em flash?), teu site vai

esboçar um novo projeto, seja na escolha de um ou outro

passar batido, a menos para internautas paranormais.

layout, seja na hora de comprar um gadget. É isso que me

Terceira razão: uma busca no Google traz dezenas de resultados. Se tua página for bizarra, se não

orienta quando modero uma comunidade.

Pensar grande não é pensar pirâmides ou monumentos. Pensar grande é pensar em como

for imediatamente compreensível e

manter as calçadas do digimundo gostosas,

usável, o usuário clica, rejeita,

seguras, e plurais.

volta atrás e tenta outro mais

Essa é a nossa

fácil.

natureza.

Adeus condomínios fechados.

Adeus aldeiazinhas e tribos. Adeus ilhas da fantasia. Google é o novo Robert Moses do digimundo. (Não sabe quem é? Confira... no Google).

Hoje, não penso mais em arquitetura.

Hoje penso em urbanismo. Na minha cabeceira, hoje, está Vida e Morte das Grandes Cidades, da Jane Jacobs. Meus assuntos

de

interesse,

hoje,

são

63

marketing

Cidades desafiam qualquer tentativa de controle.

Internet é igual: o email favelizou-se, sites de banco são fortalezas anti-fraude, o Orkut já não é mais entre amigos , homes são pichadas por vândalos

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, é ProfessorDoutor 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. webdesign@luli.com.br

Nu com a minha música O sonho de qualquer tecnologia é desaparecer

Fernanda, bela e serena, chega com profundas olheiras ao trabalho pela manhã. Sem sinal de estresse, desgaste físico ou emocional aparente, aquilo parecia apenas o reflexo de uma noite pouco (ou muito mal) dormida. Ela tinha ficado até às quatro da manhã acordada. No Orkut.

Daniella, linda e explosiva, desaparece no Carnaval para reaparecer, feliz e cansada, sem sinal de sol ou praia. Seus dias e noites foram emocionantes e cheios de surpresas.

No PlayStation.

Suzana, fascinante, falante e sexualmente saudável, não pode ouvir nenhum ruído nessa manhã, tamanha a sua ressaca. Tomou quase uma garrafa de Jerez de estômago vazio enquanto conversava animadamente com três velhas amigas noite adentro, sobre todos os assuntos imagináveis. Via MSN. Juliana, independente e durona, vai à beira de um ataque de nervos depois de ver seu namoro de dois anos chegar ao fim. Tudo por causa de um mal-entendido, um silêncio enorme e uma avalanche de acusações. A bateria do celular tinha acabado, o carregador não foi para a praia e, mesmo que fosse, não havia sinal nem energia elétrica por ali. Silenciado e enciumado, o namorado teria enviado 19 mensagens de texto a última dando o romance por terminado.

Mais do que as mulheres fictícias destas histórias igualmente fictícias, o que todas elas têm em comum não é a tecnologia, mas sua forma de uso: o componente emocional no trato com algumas delas é tão grande que, muitas vezes, esquecemos que estamos em máquinas e nos comportamos como se estivéssemos conversando face a face com alguém de verdade. Assim, o videogame mais simples acaba sendo muito mais humanizado que o microondas mais completo.

Quem nunca gesticulou ao falar no celular que atire a primeira pedra: por mais que teimem em nos explicar as diferenças de CDMA, TDMA e GSM, no fundo, sabemos que o que temos na mão ao pilotar aquele aparelinho de rádio individual (sim, o celular nada mais é que um rádio metido a besta) não é uma forma sofisticada e miniaturizada de aparelho eletrônico: é o meu amigo na minha orelha.

Assim, o errado seria não gesticular.

O objetivo primordial de cada tecnologia ao atingir sua maturidade é tornar-se transparente.

Isso não quer dizer que será invisível, mas que seu uso fica automático e óbvio, só percebido quando falhar. Quando combino de encontrar alguém, raramente menciono o sistema de transporte que usarei. Se mencioná-lo, certamente sua forma de funcionamento não será

64

webdesign

Não interessa saber que o sinal de rádio não consegue atravessar a parede de concreto ou que o código-fonte do aplicativo conflitou com o sistema operacional. Isso é problema deles

assunto ou você consegue imaginar algum tipo de maluco que

Por isso, muita gente joga o celular no chão quando fica

diga ...e aí o metrô fechou as portas e saiu...movido a energia

sem sinal. Ou bate no monitor quando a CPU dá pau. Não inte-

elétrica, ele foi parando a cada estação até chegar naquela

ressa saber que o sinal de rádio não consegue atravessar a

mais próxima do lugar onde eu iria descer, daí a porta abriu e

parede de concreto ou que o código-fonte do aplicativo

eu desci, subi a escada rolante, movida a energia elétrica... .

conflitou com o sistema operacional. Isso é problema deles.

O mesmo se aplica ao uso de coisas como as marchas em um

Mais do que nunca, o design de interfaces é fundamental

carro e explica por que nos irritamos tanto quando falta a luz

se antes servia para fazer com que as pessoas perdessem o

ou o computador dá pau: como um pneu furado, isso não era

medo do computador, hoje, serve para que se envolvam e se

para acontecer.

sintam confortáveis. Por isso que o Google e a Amazon, mesmo

Em seu início, os computadores eram ferramentas frias,

espartanos, são fenomenais. Se antigamente o cursor se

complexas e, em muitos casos, estupidamente teimosas, tão

transformava em um dedinho e os links tinham a forma de bo-

interativas quanto furadeiras e, portanto, tão interessantes

tões na tela, hoje os sites buscam exatamente o contrário,

quanto é natural que, nessa época, fossem coisa de menino

tentando fazer com que o usuário esqueça que está em um

e que seu uso excessivo indicasse alguma carência, mesmo

computador e que, portanto, é usuário .

que social. O panorama mudou muito rapidamente e, hoje,

O que me leva a uma pergunta final: quando bebo só,

eles são vistos como meros intermediários, a tal ponto que a

em casa, ligado no Orkut e no MSN, estaria, por acaso,

maioria dos usuários não faz a maior idéia do que é um byte e

bebendo socialmente ?

vive muito bem sem isso. Quando a máquina dá pau, chama-se um encanador, um eletricista, um mecânico, um advogado, um médico. E fim de problema.

Hoje, a máquina sofreu uma perversão emocional em sua estrutura original ainda não existem (duvido que existam) máquinas que chorem, riam ou sejam criativas, mas a cada dia elas se tornam menos visíveis, é essa a sua glória.

Não questiono que a experiência de conversar ao vivo com um amigo seja infinitamente mais rica que falar com o mesmo no celular ou via e-mail, mas percebo a cada dia que essas distinções estão cada menos relevantes. O importante é ter contato com os amigos, a forma faz cada vez menos a diferença.

65

66