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