Ed15

g

março 2005 :: ano 2 :: nº15 :: www.arteccom.com.br/webdesign R$ 7,90

/

e d i t o r a

arteccom

portfólio Softrent a empresa investe em treinamento e acredita no trabalho em equipe para vencer batalhas

ç

case Citroën C8 veja como a agência criadora do site utiliza tecnologia para fazer com que o usuário se sinta dentro do carro

g

debate: É possível desenvolver projetos de grande conteúdo só com o uso do Flash?

Um fator que contribuiu para o desenvolvimento de sites complexos em Flash foi o surgimento do novo conceito chamado RIA Rachel Mazzarotto

recursos e dicas sobre a mais usada ferramenta de animação para web internet sem barreiras como realizar um projeto acessível a portadores de necessidades especiais

direitos autorais

3

contar com a publicidade de várias empresas de hospedagem de sites, além da Locaweb, até então nosso patrocinador exclusivo. Ficamos impressionados com a acolhida de todas as outras empresas de hosting que irão contribuir, a partir de agora, através de seus anúncios, para a continuidade desta revista, sendo juntas, responsáveis pela impressão gráfica de cada edição, o que antes era responsabilidade apenas de nosso patrocinador. Acreditamos que fizemos um bom trabalho até aqui e começamos a colher os frutos.

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 Jeferson Costa jeferson@arteccom.com.br

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

Redação Vaness a Barbosa vanessa@arteccom.com.br

Isso representa mais que uma conquista. Significa que a revista está bem conceituada no mercado, graças ao conteúdo sugerido pelos leitores. Ficamos felizes quando lemos em diversos sites e fóruns os comentários sempre positivos sobre a Webdesign.

Acredito que estamos cumprindo nossa função de ser um importante canal de troca de informações sobre o assunto. Lembramos que a Arteccom, a partir de agora, está abrindo uma área que denominamos Gestão de conhecimento digital , onde colocamos todos nossos projetos de relacionamento: esta revista, o Encontro de Web Design, o portal Banana Design, o selo Peixe Grande, o concurso Plugin Websites Award e o curso Web para Designers. Esperamos nos consolidar cada vez mais como gestores de informações sobre o assunto. Em breve, lan-

Assinaturas Jan e C o s t a jane@arteccom.com.br

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

Webdeveloping Eric Nascimento eric@arteccom.com.br

Financeiro Luana Rocha luana@arteccom.com.br 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

çaremos nosso novo site com este perfil. Aguardem.

Enfim, desejo boas-vindas aos novos parceiros, bons negócios e sucesso!

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

Um grande beijo,

Produção gráfica www.ediouro.com.br/grafica

Distribuição

Adriana Melo

4

www.chinaglia.com.br

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

Temos uma novidade: a partir desta edição a Webdesign começa a

Editorial

Boas-vindas aos novos parceiros!

Direção Geral Adriana Melo

menu apresentação

matéria de capa

pág. 4 quem somos

pág. 20 entrevista: Luciana Jordão, Alessandra

pág. 5 menu

Rodrigues e Igor Maia pág. 26 Flash: o poder da arte em movimento

contato pág. 6 emails

pág. 33 debate: Já é possível desenvolver projetos de grande conteúdo só com o uso do Flash?

pág. 6 fale conosco e-mais fique por dentro

pág. 40 estudo de caso: Citroën C8

pág. 8 direito na web

pág. 45 artigo: Internet sem barreiras

pág. 9 adote esta página

pág. 54 tutorial : Álbum Digital - Parte I

pág. 10 clipping portfólio

com a palavra

pág. 12 veterano: Softrent

pág. 58 webwriting: Bruno Rodrigues

pág. 18 calouro: Marcos Barboza

pág. 60 bula da Catunda: Marcela Catunda pág. 62 marketing: René de Paula Jr. pág. 64 criação: Marcos Nähr

emails

Assunto: Primeiro emprego

Olá, primeiramente gostaria de parabenizá-los pelo ótimo

grupo Olá Pessoal! Tudo bem? Sou instrutor de Web em quatro escolas na Zona Oeste do Rio e sempre indico a revista como

disponível AQUI no nosso

posso comprá-la. Muito

estado. Obrigado.

obrigada,

Atenciosamente,

Rosangela M. Santana rosangela_ms@uol.com.br

Fabiano Rodrigo Costa fabiano_rodrigo@ibestvip.com.br

site. Mas preciso de uma ajuda

Oi Rosangela! A tabela saiu na edição

de vocês. Sou webdesigner e

1 e agora publicamos uma resumida

designer gráfica, mas ainda

no site da revista:

não consegui meu primeiro

www.arteccom.com.br/webdesign.

emprego. Não tenho idéias por

Mas lembre-se que é apenas uma

onde começar meu portfólio,

referência baseada nos valores

já que nunca trabalhei em Assunto: Assinatura em

se encontra, pois assim

nenhum local.

O que eu faço para iniciar na carreira que decidi seguir?

Por onde eu começo?

Obrigada pela ajuda!

praticados por profissionais da área.

A edição de fevereiro também explica como cobrar através de cálculo de horas.

Espero que isto ajude!

Carla Zampar carlahz83@yahoo.com.br

uma excelente fonte de

Carla, tente oferecer a alguma empresa

informação . Gostaria de saber

um estágio não remunerado para que

se há a possibilidade de

conheçam o seu trabalho. De repente,

fazermos algum tipo de parceria

depois, você conquista sua vaga.

para assinaturas nas turmas que

Meu nome é Fabiano, moro

Mas, com certeza, você vai precisar

ministro. Acredito que é de

em Florianópolis e sou

de um portfólio. Faça alguns trabalhos

artefinalista. Estou

experimentais, por conta própria, para

migrando para a área de

algum amigo ou algum empresário da

webdesign, e como um leitor

fundamental importância para os que estão chegando ter a sua disposição o conteúdo da Webdesign.

Gostaria também de sugerir uma matéria avaliando os níveis

família, sem custo, apenas para que você tenha projetos para mostrar aos futuros prospects ou às empresas onde

dos cursos de formação

pretende buscar uma vaga. No mínimo,

Webdesigner pelo Rio de

desenvolva uns três projetos e tente

Janeiro. Estrutura, material

publicá-los na internet. Boa sorte!

didático, grade curricular,

2005. Grande abraço a todos.

Fabio Joaquim Oliveira prof.fabiojoa@gmail.com

Olá, eu li em uma das

Vamos fazer sim essa assinatura para

edições que a revista tinha

o grupo, depois conversamos melhor

feito um levantamento de

Quanto à idéia da matéria, muito bacana, já até começamos!

Obrigada pela dica.

chegar lá, certo?

Enquanto isso, disponibilizamos a assinatura e a venda avulsa pelo site, para ninguém ficar sem a Webdesign.

Viu como não esquecemos de vocês? ;-) Abraços!

Webdesign , mas infelizmente não é vendida no meu estado. Por quê?

Gostaria muito de comprá-la

Assunto: Música no site

em uma banca, como faço

se dá ao trabalho de disponibilizar para os

Sugestão de matéria: como inserir música no site? Não consigo fazer isso!!!

Sylvio Edgard sylvioedgard@yahoo.com.br

valores para desenvolvimento de sites.

Gostaria de saber como posso ter essa tabela. Ou qual edição da revista ela

Catarina todo esse

A edição número 7, capa verde, discute

conhecimento desse ramo

esse assunto, Sylvio.

tão inovador. Gostaria que me desculpassem pelas críticas, mas creio que os profissionais de webdesign de SC ficariam lisonjeados com uma grande revista como a Webdesign

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

para atender outras cidades. Vamos tentar

profissionais de Santa

Olá professor!

sobre as vantagens.

precisaríamos aumentar muito a tiragem

livros, descobri a

assinar uma revista que não Assunto: Tabela de custos

a todas as cidades do Brasil, mas

de boas matérias, revistas e

interesse. Também não vou

sucesso para vocês nesse ano de

Gostaria muito que essa revista chegasse

Assunto: O indignado

com as revistas de meu

preços etc.. Desejo muito

Não fique tão indignado, Fabiano. ;-)

Você também pode entrar no fórum do www.bananadesign.com.br ou em qualquer outro. Com certeza outros profissionais vão te ajudar!

Boa sorte!

Adriana

7

direito na web

Música e Direitos Autorais Acompanho sua coluna na revista Webdesign e gostaria de parabenizá-la pelos conceitos esclarecedores da área jurídica. Esta é uma área extremamente carente de bons profissionais que nos auxiliem em diversos fatores legais, tanto para a nossa parte quanto para nossos clientes.

Estou desenvolvendo um site e gostaria de disponibilizar para o internauta uma música de fundo em todo o site. A minha dúvida é a seguinte: encontrei vários sites que trazem trilhas sonoras, porém nenhuma delas conhecidas. Eu poderia colocar músicas sem problemas com relação aos direitos autorais? Existe alguma lei que eu possa consultar? Obrigado pela ajuda. Um abraço.

Alexandre Monetto (monetto@infoatp.com.br) Marianna Furtado é advogada com pós-graduação em Direito da Propriedade Intelectual pela PUC-Rio. Atualmente, pertence à equipe do escritório

A obra musical encontra-se protegi-

das custas ao ECAD. Note que essas ex-

da na legislação brasileira pela Lei de Di-

ceções ficam restritas às hipóteses do

reitos Autorais (nº 9.610/98). Todas as

art. 46, não devendo ser estendida em

Lioce Advogados.

composições, contendo letra ou não, são

nenhuma forma.

Envie sua dúvida para:

protegidas por essa lei. Dessa forma, a

Para maior segurança, porém, é sem-

expressa autorização de seu autor é ne-

pre importante a autorização do titular da

cessária para qualquer utilização, seja

obra para sua execução. Mais ainda, a con-

ela a reprodução parcial ou integral, dis-

sulta ao ECAD, sobre a necessidade do re-

tribuição, execução, edição, adaptação,

colhimento da remuneração pelos direitos

entre outras.

autorais pela execução pública da obra

Montaury Pimenta, Machado &

marianna@montaury.com.br

Especificamente, a execução de uma obra como fundo musical de um website é uma forma de execução pública, o que pelo artigo 68 da mencionada lei de direitos autorais, exige a autorização do autor ou titular da música, bem como a arrecadação dos recolhimentos relativos aos direitos autorais, normalmente pagos ao ECAD - Escritório Central de Arrecadação.

A Lei de Direitos Autorais, em seu artigo 46, prevê algumas exceções, em que é possível a execução de obras musicais sem a autorização expressa do seu autor/titular, tão pouco do recolhimento

8

deve sempre ser considerada.

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

Anunciando aqui, o AZIMUT 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 AZIMUT, anuncie nesta página e ajude a manter o brilho dessas crianças.

adote esta página !

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

9 9

clipping Nokia e Macromedia levarão Flash para os celulares

Vírus falante chama internauta de idiota

A Nokia está investindo pesado em multimídia. Em fevereiro,

O vírus Cisum.A é um chato. Seu propósito é encher a paciência

fechou com a RealNetworks para levar o RealPlayer para seus

dos internautas, repetindo, a cada segundo, através de um MP3,

celulares e, agora, a história é com a Macromedia, que vai equipar os

a frase You are an idiot (Você é um idiota). O Cisum.A,

aparelhos com a tecnologia Flash.

detectado pela fabricante de antivírus Panda, se propaga por

Com o acordo, a Macromedia vai embutir a versão mobile da

email e redes P2P. Ele traz um anexo que se aberto gera o arquivo

tecnologia nos celulares Series 60 da Nokia, mas a fabricante

ProjectX.exe , que executa a cantilena.

finlandesa se comprometeu a oferecer suporte ao Flash também em

A nova praga, além de cometer a ofensa, causa sérios danos aos

outras plataformas.

PCs infectados, uma vez que é capaz de desabilitar antivírus e

Significa também que 1,8 milhão de desenvolvedores do Forum

outros softwares de segurança e abrir uma brecha no Windows

Nokia poderão criar aplicativos em Flash e que os mais de um milhão

para ataques remotos de hackers mal intencionados.

de desenvolvedores Macromedia poderão criar produtos para

O Cisum.A não é o primeiro vírus falante da história da internet.

telefones móveis. Para facilitar as coisas, as duas empresas vão

Em setembro de 2004, surgiu o Amus, um

soltar para essas comunidades um pacote integrado de ferramentas

verme de origem turca que dizia:

de desenvolvimento, bem como a documentação e suporte técnico

Eu sou o senhor Hamsi. Estou

necessários. Ou seja, surgirão aplicativos cada vez mais

de olho em você e vou limpar o

interessantes e divertidos para celulares.

seu computador.

A linha Series 60 da Nokia roda sistema operacional Symbian OS.

5,4,3,2,1,0 gule, gule

Informações sobre a plataforma estão em www.series60.com.

(adeus, em turco).

(01) (02)

Nota de Esclarecimento Em nossa edição de fev/05, na seção Portfólio Calouro , o

Errata

entrevistado Gabriel Luís de Oliveira esqueceu de mencionar que o site da Capa Engenharia resultou de um trabalho

Na seção Portfólio Calouro da Webdesign de fevereiro/2005, pág. 18, as

conjunto, como funcionário, com a equipe Divex Tecnologia,

urls saíram repetidas. A ordem correta, de cima para baixo, é:

empresa que presta serviço à Capa desde 1996.

www.clinicaarthemysa.com.br; www.capa.com.br; www.msi.ind.br.

Grupo quer levar tecnologia a brasileiros pobres O grupo estrangeiro Internet Acess for Everyone (Itafe), formado por empresas como BMC, Dell e Intel, investirá na inclusão digital de famílias brasileiras com renda mensal inferior a três salários mínimos.

A informação foi dada à Agência Brasil pelo secretário de Logística e Tecnologia da Informação do Ministério do Planejamento, Rogério Santanna.

O foco do Itafe é atingir os públicos de um a três salários mínimos, basicamente. É um programa complementar (ao PC Conectado, voltado para quem recebe mais de cinco salários) que visa criar um ecossistema com tecnologias mais baratas, mais adequadas à população com a renda menor, que permitam inserir essa população no mundo da sociedade de informação e que essa tecnologia seja auto-sustentável, permitindo obter alguma renda que sustente todo esse ecossistema , explicou.

Segundo Santanna, não se trata apenas de encontrar dispositivos mais baratos para substituir o computador, mas também da criação de um ambiente de negócios para as classes C, D e E. O Itafe tem essa oportunidade de criar produtos adequados para a sociedade da informação, para uso de comércio eletrônico, governo eletrônico e a criação de um novo ambiente computacional necessário para atingir as metas do milênio .

(03)

10

clipping Seu Windows congelou?

Reze para Santa Tecla.

Para nos livrar dos bugs, vírus, hackers e outros males que infernizam o espaço cibernético só mesmo um santo muito forte.

Mas qual deles? Os católicos apontam para dois nomes: Santa Tecla e Santo Isidoro.

Tecla que, por coincidência, tem nome informático, era uma jovem espanhola, rica e caridosa, muito popular no ano 48 dC. Foi ela quem libertou Paulo de Tarso do cárcere e com ele seguiu o caminho da evangelização.

Santa Tecla é a padroeira dos internautas catalães, que a veneram em uma capela virtual , onde é possível até mesmo pedir-lhe que resolva problemas com o computador. Basta escolher a questão (por exemplo, O Windows está falhando ) e os criadores do site

Bill Gates critica adeptos do software livre Durante palestra na Consumer Electronics Show, realizada em Las Vegas, em janeiro, Bill Gates criticou severamente os adeptos do software livre e disse que a legislação sobre propriedade intelectual não deve ser alterada.

O co-fundador da Microsoft não vê necessidade de introduzir novos modelos de licenciamento de softwares, como, por exemplo o Creative Commons, que tenta levar o código aberto ao cinema, música e outros meios de entretenimento.

Ele também falou sobre o assunto em entrevista publicada no site News.com. Hoje há menos comunistas no mundo. Mas existem alguns comunistas modernos que desejam suprimir pagamentos a músicos, produtores cinematográficos e desenvolvedores de softwares , declarou.

Os comentários repercutiram mal. Lawrence Lessig, um dos responsáveis pelo Creative Commons, acredita que Gates perdeu o contato com a

garantem que ela dará um jeito.

Melhor ainda é o confessionário com uma lista de pecados habituais cometidos por nós, navegantes online, como Estou visitando sites obscenos ou Mudei a data do PC para não pagar por softwares sharewares .

Santo Isidoro é tido como o homem mais culto do século VI. Fez

realidade do software e está confundindo commonists , ou seja, pessoas que compartilham suas idéias e criações, com communists .

Lessig aproveitou a escorregadela de Gates para lançar um logotipo vermelho com os dizeres Creative Communists , impresso em camisetas e outros objetos que têm sido um sucesso de vendas.

(05)

sozinho a Origens e Etimologias , enciclopédia com 20 volumes uma espécie de Internet de papel, pois reunia todo o conhecimento que se tinha até então.

O santo era bastante popular e engenhoso: a Igreja estava sempre em alta, em razão dos debates que ele promovia entre o clero. Santo Isidoro também tem site e até email. Anote: orapronobis@isidoro.ourfamily.com

(04)

Bebê Yahoo foi invenção de repórter A direção do jornal romeno Libertatea emitiu nota esclarecendo que a história do casal Nonu e Cornelia Dragon, que deu ao primeiro filho o nome de Yahoo, foi invenção do

Herança Escultórica da Tipografia Escrito por Norberto Gaudêncio Junior, o livro Herança Escultórica da Tipografia é o novo lançamento da editora Rosari. Neste estudo, o autor se propõe a entender o desenho do tipo gráfico a partir do tipo móvel idealizado por Gutenberg, oferecendo aos jovens designers conhecimentos da história das artes gráficas a partir dos tipos de metal e reflexões sobre o papel destes na era digital. A publicação tem 128 páginas e custa R$ 25, podendo ser encontrada no site www.rosari.com.br.

(01) http://info.abril.com.br/aberto/infonews/022005/11022005-6.shl (02) http://www.estadao.com.br/tecnologia/internet/2005/jan/27/54.htm

repórter Ion Garnod. A editora-chefe do Libertatea , Simona Ionescu, desculpou-se com seus leitores e anunciou a demissão de Garnod. A reportagem do jornalista contava que Nonu e Cornelia Dragon, da Transilvânia, se conheceram através do Messenger do Yahoo e, depois de alguns meses de namoro, se casaram. Ao primeiro filho, continuava a reportagem, eles deram o nome de Lucian Yahoo, como agradecimento ao popular portal da Web, por tê-los unido.

Se fosse verdade, seria uma excelente matéria , comentou Simona Ionescu. O repórter, segundo a agência de notícias Reuters, não foi encontrado

(03) http://info.abril.com.br/aberto/infonews/022005/11022005-9.shl

para falar sobre o

(04) http://www.estadao.com.br/tecnologia/internet/2005/fev/12/31.htm

assunto.

(05) http://www.estadao.com.br/tecnologia/informatica/2005/jan/10/152.htm

(06)

(06) http://www.estadao.com.br/tecnologia/internet/2005/jan/25/55.htm

11

portfólio veterano :: Softrent

Agradando gregos e troianos Por Tatiana Serra

Atender clientes de diferentes áreas e oferecer variados serviços e produtos, mantendo a qualidade. Este é um dos maiores sonhos de muitas empresas, e, é o que vem realizando a Softrent, desde que surgiu nos anos 80.

Hoje, a empresa trabalha com criação nas áreas de Webdesign e Multimídia, Treinamento, Controle e Monitoramento do uso da Internet em Empresas, Segurança da Informação e Automação Comercial. O segredo de tamanha diversidade? Investir em seus próprios funcionários.

Antes, a Softrent só produzia softwares e sites. Agora, ela também produz profissionais.

12 12

sa, segundo Sandro, físico italiano, que se apaixonou

cidade de Tróia, a Grécia foi vitoriosa. Na Softrent, a vitó-

pela informática e, hoje, se sente realizado na direção

ria é de todos e o objetivo é agradar gregos e troianos.

geral da Softrent. Feliz sim, mas com muito ainda para

Para chegar a essa conquista, segundo Sandro Fernandes,

fazer , enfatiza ele, tendo como meta para a empresa,

diretor geral da empresa, a qualidade do trabalho e a expe-

melhorar a equipe, crescer e, claro, ganhar dinheiro.

riência são os diferenciais da Softrent, a qual tem, em seu

Aos profissionais que estão entrando agora no merca-

histórico, produtos líderes de mercado na área de

do de trabalho, Sandro recomenda: estudem! Estudem

automação comercial, projetos premiados na internet e de-

muito! . Afinal, investir em si mesmo é o primeiro passo.

senvolvimento de softwares para o comércio varejista.

Com mais de 20 anos de experiência, a Softrent

E não pára por aí. A empresa acredita no trabalho em

conquistou uma admirável carteira de clientes, como a

equipe para vencer as batalhas, investindo em treinamen-

Cia. Marítima Beachwear (site) no segmento Moda; Os

tos, além de ampliar suas áreas de atuação, fazendo parce-

Noivos (site) e Família Pet (site), em Informação e Cul-

rias com empresas de diversos segmentos. Para isso, ela

tura; IBM (eventos); Fox Filmes (hotsite), em Entrete-

conta com uma equipe de 30 pessoas, tendo de tudo um

nimento; UOL (cd-rom e site), no segmento Comunica-

pouco: programadores, designers, fotógrafos etc. Alguns

ção e Internet; Easyvideo e Easyshop, em Tecnologia e

colaboradores têm mais de uma função , ressalta o diretor

Segurança; Fastshop (flashclip), no segmento Varejo;

geral, que tem a robótica como robby, gosta de ler, progra-

entre outros.

mar, assistir televisão e, acredite, brincar com Lego nas horas vagas.

Em meio a tantos trabalhos de sucesso, o diretor de arte da empresa, Marcelo Fragoso, destaca os sites do

Sucesso hoje e amanhã

Danoninho, Grupo Maeda e Guia do Bebê. Ainda assim, há

Tecnologia, metodologia e força de vendas. Estes

dificuldades a serem enfrentadas na conquista de nova cli-

sãos os fatores que determinam o sucesso de uma empre-

entela, como, por exemplo, fazer com que conheçam melhor

1313

portfólio veterano :: Softrent

Na luta travada entre gregos e troianos pelo domínio da

portfólio veterano :: Softrent

o trabalho da Softrent, a qual conseguiu seus primeiros clientes por indicação.

Transparência, Honestidade e Bom Trabalho

Qualidade premiada Versátil e criativa. Assim é a Softrent, que já

Para manter um bom relacionamento com os clientes, a

recebeu premiações no mercado em que atua,

Softrent aposta no trio transparência, honestidade e bom

como reflexo de trabalho, talento e conhecimento

trabalho. Segundo Marcelo Fragoso, trabalhar a imagem de

tecnológico. A empresa ganhou o Ibest 2000, na

um cliente na internet depende, principalmente, do próprio

categoria Saúde, com o site Guia do Bebê. Em

cliente. Quando a empresa já tem um padrão definido de

2002, ela recebeu o prêmio Ibest, também na cate-

identidade visual, fica mais fácil. A Internet expõe a empre-

goria Saúde, com o site Guia do Sexo. Este, na

sa para o mundo todo, por isso, há que se ter bastante cui-

ocasião, concorreu com o site do governo federal,

dado , diz ele, destacando a responsabilidade deste traba-

o qual, certamente, teve uma verba maior. O dire-

lho. E, quanto às dificuldades, Marcelo diz que o maior pro-

tor geral da Softrent, que busca inspiração no dia-

blema enfrentado pelo designer, na criação de um site, é

a-dia, acredita que os grandes diferenciais dos

quando o cliente já vem com idéias pré-concebidas. Aí, não

premiados

deixa o desenvolvedor criar, trabalhar .

interatividade e a alta audiência dos sites, lem-

foram

o

ótimo

conteúdo,

a

brando que, tanto o Guia do Bebê quanto o Guia do Sexo receberam voto popular.

Quando a empresa já tem um padrão definido de identidade visual, fica mais fácil.

A internet expõe a empresa para o mundo todo, por isso, há que se ter bastante cuidado Marcelo Fragoso

14 14

www.softrent.com.br

portfรณlio veterano :: Softrent

www.danoninho.com.br

www.guiadobebe.com.br

www.guiadosexo.com.br

15 15

portfรณlio veterano :: Softrent www.familiapet.com.br

www.maeda.com.br

www.easyvideo.com.br

16 16

www.osnoivos.com.br

anĂşncio

%

portfólio calouro :: Marcos Barboza

Por trás da lente de um webdesigner Apaixonado por fotografia, ele aproveita sua câmera digital para registrar os momentos importantes de sua vida. E as imagens registradas compõem seu site, que para o webdesigner Marcos Túlio Dias Barboza, 21 anos, é o local de mostrar suas características pessoais e os recursos técnicos que possui.

Logo na primeira página aparece Suzi, a cachorrinha companheira dos passeios de carro. Na seção do portfólio, surge a ima-

os recursos, mas o mais importante é ter a idéia e como você vai utilizar as ferramentas para montá-la.

gem de um bebê, filho de um amigo. E na página de contato, a ima-

Em 2005 ele espera aprender mais e ter novos trabalhos

gem de um gato ilustra a página. As grandes fotos demonstram a

para se desenvolver como profissional. Ser webdesigner é es-

importância que as imagens têm na vida desse estudante do 2º pe-

tar sempre atualizado. Isso nos mantém inspirados e

ríodo de Publicidade na Faculdade Pitágoras de Belo Horizonte.

antenados com o mercado.

Natural de Itabira, Marcos começou a se interessar por webdesign ao navegar pela internet. Tinha vontade de saber como aquilo era feito. Foi um passo para iniciar o aprendizado de programas básicos, como Photoshop, Flash MX, Dreamwever, Corel Draw e Illustrator. O meu primeiro projeto, meu site, tinha de tudo. Colocava imagens 3D, gifs animados, entre outros recursos. Aprendi muito.

Iniciou sua carreira profissional em 2000 no provedor de internet Valenet, onde atuou cerca de três anos. Atualmente, é programador visual da empresa J. Chebly Mídia Aeroportuária e desenvolve aplicações multimídias para CDs, vinhetas e websites. Além disso, faz manutenção mensal de diversos sites de empresas, clientes conquistados quando trabalhava no provedor da cidade de Itabira.

www.dinamicadesolidos.com.br

O webdesigner traz em seu portfólio trabalhos desenvolvidos para Revista DeFato, Engeoil, Spazio Produções, Dinâmica de Sólidos, entre outros.

Sempre correndo atrás de informações novas sobre a profissão, Marcos pretende se aperfeiçoar na área de edição de vídeo e 3D. Fã de filmes de aventura e ação, ele curte mesmo é acompanhar o making-of. Adoro cinema e sou muito curioso para saber como são feitos os grandes efeitos especiais. Às vezes fico horas assistindo um filme em DVD e os extras que mostram os bastidores.

A maior dificuldade na hora de criar um site, de acordo com

www.xiz.com.br

Marcos, é o medo do terrível branco. Você pode conhecer todos O site de Marcos Barboza é <www.xiz.com.br> e o email para contato <mtdias@terra.com.br>.

18

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

19

entrevista: Luciana Jordão, Alessandra Rodrigues e Igor Maia

Flash!

Por André Philippe Iunes

Ninguém melhor para falar sobre o Macromedia Flash do que três profissionais que conseguiram transformar seus trabalhos em arte por meio dessa ferramenta.

Luciana Jordão, Alessandra Rodrigues e Igor Maia, respectivamente sócia, designer e webdesigner da agência Seagulls Fly, receberam a equipe da Webdesign para uma conversa informal e, diga-se de passagem, bem didática. Fundada há sete anos, a Seagulls Fly atende produtoras de filmes, emissoras de TV, escritórios de design, além de agências de propaganda, como a DPZ, F/Nazca, Publicis Norton, entre outras. Para Luciana Jordão, o diferencial da produtora se dá pela sua equipe altamente especializada de ilustradores, designers e artistas 3D, que por meio da sensibilidade, aliada ao apuro técnico, conseguem sintonizar arte com tecnologia de ponta. Sendo assim, conheça um pouco mais sobre alguns conceitos para se criar com o Flash e descubra como conceber suas idéias em movimento.

20

distância ganham mais possibilidades de animações, interação

encontradas nos trabalhos feitos em Flash? Poderia

com o usuário e facilidades na exportação do filme para

citar alguns exemplos?

diferentes tipos de formatos.

Luciana :: Quando o Flash surgiu, os webdesigners, que

Luciana :: Inclusive, muitos profissionais que antes usavam o

estavam acostumados com o html de código duro e cansativo,

Director, também da Macromedia, adotaram o Flash como

se encantaram com todas as possibilidades que a ferramenta

principal ferramenta, já que a sua interface é mais amigável.

trouxe. Houve a fase dos excessos, quando usaram e

Wd :: Existe algum referencial no qual o webdesigner

abusaram ao extremo do programa, e tudo ficava over . Hoje

possa prestar atenção no intuito de aprimorar sua

em dia, o simples e o clean vieram como uma tendência mais

linguagem no Flash? Em que ele deve ficar atento e

sofisticada.

por quê?

Alessandra :: Além da utilização de vídeos no Flash, já que

Luciana :: Todos os tipos de linguagem visual, desde que com

atualmente o próprio programa possibilita isso com leveza e

bom senso e sem exageros são válidos. Vídeoclipe pode ser um

rapidez, outra tendência são os personagens, caricaturas

grande baú de idéias, já que nele o diretor pode ser mais

animadas e ilustrações feitas neste programa.

ousado e o resultado fica mais autoral porque não é

Igor :: Exemplos de alguns sites que representam essas

publicidade. Cinema também é uma fonte constante de

tendências: www.2advanced.com, www.neostream.com,

inspiração de estilo. Aqui na Seagulls, temos um HD no nosso

www.workingtitlefilms.com e www.oxcube.com.

servidor que já está em 50 GB de imagens de referência.

Wd :: Em que outras aplicações, sem ser internet, o

Qualquer coisa que alguém da equipe ache interessante ou

Flash vem se destacando como uma ferramenta de

esdrúxulo é salvo lá para comentar com a equipe.

grande utilidade?

Igor :: Além disso, os jogos eletrônicos, histórias em

Alessandra :: Com o Flash, aplicações como vídeos

quadrinhos e comerciais de TV enriquecem muito a cultura

corporativos, screen-savers e projetos de educação a

visual. Cada uma dessas referências traz um universo de

Com o Flash, aplicações como vídeos corporativos, screen-savers e projetos de educação à distância ganham mais possibilidades de animações, interação com o usuário e facilidades na exportação do filme para diferentes tipos de formatos Alessandra Rodrigues

21

entrevista: Luciana Jordão, Alessandra Rodrigues e Igor Maia

Wd :: Quais são, hoje, as principais tendências

entrevista: Luciana Jordão, Alessandra Rodrigues e Igor Maia

Dependendo do tamanho final do arquivo, em vez de trabalhar apenas com um arquivo swf, você pode dividir o site em vários pequenos arquivos que podem ser carregados aos poucos, de acordo com a necessidade do usuário Alessandra Rodrigues

elementos, como as interfaces de jogos, as formas de ação de personagens nos quadrinhos e o uso de videografismos em comerciais, que podem ser explorados de acordo com o seu projeto.

Wd :: Já é possível desenvolver trabalhos complexos em Flash e que ao mesmo tempo sejam fáceis de carregar? Como isso é possível?

Igor :: Claro, tudo depende da otimização de cada projeto. A primeira coisa com que me preocupo é como determinar a melhor compressão para as imagens do site, de modo que não ocorra uma perda de qualidade notável. Recomendo o uso do Adobe Photoshop ou Macromedia Fireworks. Imagens com poucas cores e sem degrade, como as marcas e desenhos, recomendo o uso do formato GIF. Para as demais aplicações, indico o formato JPEG. Em seguida, procuro otimizar o áudio do site. Músicas e efeitos sonoros quase nunca precisam estar com qualidade excepcional. Neste caso, o próprio Flash dispõe de uma opção no quadro de exportação, que permite configurar a saída de áudio.

Alessandra :: Dependendo do tamanho final do arquivo, em vez de trabalhar apenas com um arquivo swf, você pode dividir o site em vários pequenos arquivos que podem ser carregados aos poucos, de acordo com a necessidade do usuário.

22

entrevista: Luciana Jordão, Alessandra Rodrigues e Igor Maia

Se o público-alvo do projeto não possui internet rápida, o que acontece na maioria dos casos, fique de olho no tamanho do seu swf, porque ninguém gosta de ficar esperando muito Alessandra Rodrigues

Luciana :: O Flash possibilita ainda a interação com outros softwares, como o Dreamweaver, 3D Max, Swish etc. e com outros tipos de linguagens, como o asp, php e Java.

Wd :: Quais são as possíveis formas de interação que um site em Flash proporciona ao seu usuário? Até que ponto a experiência do usuário pode ser beneficiada com o uso dessa ferramenta?

Alessandra :: Hoje, o Flash está mais maleável e não depende de outros softwares. Em poucos anos, as possibilidades proporcionadas pela ferramenta aumentaram e melhoraram muito em relação às linguagens de programação e a interação com outras mídias. Antigamente, era mais difícil fazer um

www.neostream.com

formulário ou um joguinho. Vídeo então, era impossível.

Luciana :: O profissional que souber usufruir do ActionScript em todas suas possibilidades pode realizar sites robustos com formulários, jogos, questionários etc. Além disso, como foi dito antes, proporciona a interação com outras linguagens como asp e php, aumentando as possibilidades de interação.

Wd :: O fascínio pelo movimento e por certos recursos tecnológicos faz com que muitos profissionais cometam alguns exageros com as possibilidades que o Flash proporciona. Qual o momento certo de se fazer um site com mais movimento e outro mais estático?

www.workingtitlefilms.com

23

entrevista: Luciana Jordão, Alessandra Rodrigues e Igor Maia

Com o briefing, vamos seguir o estilo desejado pelo cliente e adaptar a ferramenta a ser utilizada em cada projeto. Podemos até fazer um site em Flash que tenha cara de portal e que seja bem leve Igor Maia

Igor :: Tudo tem que ser bem medido, sem exageros. Acredito que estas duas linhas estão diretamente ligadas ao produto e ao seu público-alvo. Acho que o Flash pode ser uma solução aplicável a qualquer tipo de produto, desde que o uso de seus recursos não interfira com a mensagem e nem prejudique o resultado final.

Wd :: Sites institucionais, em geral, não priorizam o uso do Flash. Na sua opinião, a que se deve isso?

Alessandra :: Essa premissa vem de alguns clientes que ainda rotulam o Flash como pesado e demorado .

Outros possuem a idéia equivocada de que o Flash é infantil e não proporciona a sobriedade que uma empresa exigiria em um site institucional.

Luciana :: Na maioria das vezes, nós conseguimos convencer, entre um layout e outro, muitas reuniões e cafezinhos, de que é possível atingirmos a linha visual desejada sem comprometer a imagem da empresa. Pode ser necessário apresentar ao cliente dois protótipos, um em Flash e outro em html, para convencê-lo de que o Flash permite um resultado mais dinâmico, sem perder a sobriedade almejada.

Wd :: Em um projeto para internet, quais critérios são levados em consideração para escolher trabalhar com o Flash? Existe uma regra para sua utilização ou depende da proposta de cada trabalho?

Igor :: Não existe nenhuma regra. Tudo depende das necessidades do cliente e de como ele se sente em relação ao u s o

24

entrevista: Luciana Jordão,portfólio: Alessandra remando Rodrigues a favor e Igor da maré Maia

desta tecnologia. Com o briefing, vamos seguir o estilo desejado pelo cliente e adaptar a ferramenta a ser utilizada em cada projeto. Podemos até fazer um site em Flash que tenha cara de portal e que seja bem leve, ou construir um site híbrido, como já aconteceu.

Wd :: Na sua opinião, além da possibilidade de se criar sites mais dinâmicos, qual outro benefício o Flash trouxe para o meio online?

Igor :: Acho que o principal benefício que o Flash trouxe para a web foi o entretenimento. Uma

www.www.2advanced.com

infinidade de formas. Desde ferramentas de pintar quadrinhos animados como Havaiana de pau , até jogos que colocam o Street Fighter para trás.

Usuários de banda larga no Brasil

Luciana :: O Flash aproximou mais os usuários dos

Segundo o PNAD 2003 (IBGE) 11,4% dos domicílios

sites, deixou de ser algo estático, como uma revista

brasileiros tinham um computador com acesso a internet

eletrônica que você vai clicando uma página após a

em 2003. Este percentual correspondia a um total de 7

outra, e passou a ser um ambiente vivo, dinâmico e mais

milhões de domicílios ou 19,3 milhões de pessoas.

humano, em que você produz uma ação e uma reação.

O Teleco estimou em 1,65 milhões o número de

Wd :: Finalizando, que dicas essenciais você daria

usuários banda larga no Brasil em junho de 2004, sendo

para quem utiliza o Flash?

82% ADSL (conexão que utiliza modem, como Velox,

Alessandra :: Preste muita atenção no briefing do cli-

Virtua etc.).

ente, porque o que lhe agrada a princípio nem sempre é o que o seu cliente espera do projeto. Se o público alvo do projeto não possui internet rápida, o que acontece na maioria dos casos, fique de olho no tamanho do s e u s w f, p o r q u e n i n g u é m g o s t a d e f i c a r e s p e r a n d o muito. Se não tiver jeito, proponha um jogo ou alguma brincadeira para rodar enquanto o usuário aguarda.

Cultura visual nunca é demais. Fique de olho nos sites que

elegem

os

melhores

da

internet,

como

o

www.linkdup.com, www.internettinyawards.com, entre outros, e se atualize com o que anda acontecendo.

Luciana :: Um site brasileiro que visito com freqüência é o www.zupi.com.br, que é uma ótima fonte de inspiração e de referência. E uma última dica: sempre surpreenda seu cliente.

25

Flash: o poder da arte em movimento

Flash

Ano de 1895, subsolo do Grand Café em Paris. No dia 28 de dezembro, um cartaz anuncia: Cinematógrafo Lumière .

Olhos atentos e curiosos testemunham o que viria a ser a maior revolução artística do século XIX. Acontecia a primeira sessão

o poder da arte em movimento

de cinema, promovida por Louis e Auguste Lumière, que exibiu

Por André Philippe Iunes

entre o cinema e a própria rede, poderíamos afirmar que o

10 filmes, com cerca de dois minutos cada. A invenção dos irmãos Lumière, chamada cinematógrafo, tornava possível seqüenciar imagens, com velocidade aproximada de 15 quadros por segundo, criando a nítida sensação de movimento. Nascia, dessa maneira, a sétima arte e com ela toda a expectativa em torno do que viria a partir daquela nova forma de expressão.

Retornando aos dias atuais, se fizéssemos uma analogia navegador está para a tela de projeção, assim como o Macromedia Flash está para o cinematógrafo. A possibilidade de trazer movimento para a web revolucionou a forma de como conceber na rede, recriando paradigmas e redefinindo padrões artísticos em um meio até então estático e unidimensional. A partir da necessidade de tornar a www um canal cada vez mais dinâmico, o Flash torna-se protagonista, proporcionando talvez o que nenhum outro software conseguiu: o de criar sem limitações. Porém, a falta de maturidade em entender como

26

Tenho visto um grande número de experiências em comunicação

utilização precoce desta ferramenta se volte contra você.

visual online ao redor do mundo. Pelo que percebo, os bons

Por isso, observar como tudo se move à sua volta é fa-

webdesigners vêm fazendo o uso correto das possibilidades da

tor crucial para compreender os fundamentos e conceitos

programação por objetos, criando situações inusitadas em um

desse programa.

ambiente em que, tantas vezes, as pessoas acham que já viram

Do movimento à interação com o usuário

de tudo . Contudo, Gazel alerta para os que fazem trabalhos ex-

No início da popularização do Flash, o grande diferencial

perimentais com o Flash, que isso pode criar algumas situações

que esta ferramenta trouxe aos profissionais da área se devia

nem sempre agradáveis para o usuário. Segundo ele, é necessá-

à possibilidade de adicionar movimento aos trabalhos

rio ficar atento para não ultrapassar a tênue linha que separa a

produzidos na rede. A partir daí, era viável, por exemplo, criar

ousadia da falta de bom senso e cita como um bom exemplo o site

em sites aberturas mirabolantes, as chamadas páginas de

da produtora Fishouse (www.fishouse.net), que mesmo com

splash , e outras estripulias de gosto duvidoso. O Flash criou

uma interface ousada, possui riqueza interativa agregada.

uma espécie de desejo comum pela necessidade de inserir, a qualquer custo, um elemento dinâmico nos produtos feitos

Flash Communication Server

para a web. Talvez, os exageros cometidos pela sua má

O Macromedia Flash Communication Server é também

utilização possam ser, de certa forma, provenientes do fascínio

chamado de FlashComm e trata-se de um servidor que permite

que o próprio movimento causa nas pessoas. Sendo assim, este uso pelo uso tornou-se mais importante do que as possibilidades de interatividade que o programa oferece.

Quando o assunto é interação, Ronaldo Gazel, diretor de arte da BHTec, afirma que as possibilidades com o Flash são qua-

:

o streaming de áudio e vídeo em filmes feitos com o Flash.

Silvana Tauhata explica que o seu funcionamento é bem simples. Basta o desenvolvedor instalar o FlashCom na sua máquina e, se for o caso, atualizar os componentes. Esses componentes, por sua vez, serão utilizados para a criação dos aplicativos usando o Flash, como por exemplo, salas de chat, vídeo ou áudio conferência, por exemplo.

se que inesgotáveis.

Analisando pela ótica técnica, Silvana Tauhata Ynemine, autora do livro Flash MX , da editora Visual Books, explica que por meio do uso de linguagens de programação como, por exemplo, PHP ou ASP, é possível criar interações com o servidor, enviando dados de formulários e manipulando banco de dados. O uso, nesse caso, é praticamente ilimitado e dependerá apenas da criatividade do desenvolvedor em criar os aplicativos. O uso do Actionscript, script de programação nativo do Flash, bem como de javascript e XML, permite a criação de interações entre o filme e o usuário. Com a utilização do FlashComm é possível exibir vídeos e áudios em streaming no servidor , explica a autora.

Quando usar o Flash?

Dependendo da proposta de cada projeto, a dúvida em usar ou não o Flash se torna fator crucial para o sucesso ou

27

Flash: o poder da arte em movimento

funciona a fisiologia do movimento pode fazer com que a

Flash: o poder da arte em movimento

fracasso de uma iniciativa na internet. Seja por questões

Para Laert Yamazaki, diretor de criação da Idéia 3 Digital,

conceituais ou técnicas, uma escolha mal feita de qual

o momento certo para usar um site com mais movimento de-

tecnologia adotar pode arruinar todo um planejamento. Com

pende da sensibilidade e da experiência do designer. Em sua

relação a trabalhos institucionais, Gazel afirma que ainda exis-

opinião, existem trabalhos que podem explorar mais as

te um preconceito contra a utilização do Flash. Isso se dá espe-

possibilidades do Flash sem trazer prejuízos na comunicação,

cialmente pela falta de conhecimento, tanto do webdesigner,

como o tempo de carregamento, dificuldade de navegação

como do desenvolvedor do sistema, em como trabalhar de manei-

etc.. Por outro lado, há sites que precisam ser objetivos e rá-

ra eficiente as tecnologias de

pidos, permitindo ao usuá-

atualização de dados. Um

rio ter uma experiência

projeto de qualidade conse-

apropriada ao tipo de tran-

gue superar todas essas difi-

sação ou interação neces-

culdades e ainda deixa evi-

sária naquele momento.

dente as vantagens dessa fer-

Particularmente, prefiro

ramenta. Tudo começa com um

não fazer um site comple-

bom planejamento, passa por

tamente em Flash. Nesse

uma boa relação entre o sistema

caso, só o utilizo nas áreas

e o trânsito e armazenamento

em que preciso de uma dinâ-

dos dados, e finaliza em uma

mica maior ou uma interação

interface visualmente concisa

com o visitante em diversos níveis , explica Laert.

que inspire a navegação. Partindo desse tripé, não importa

Ele completa, expli-

se o site é sério ou divertido,

cando que quem usa a

complexo ou mínimo, clean ou

internet hoje já entende que nela a comuni-

caótico , lembra.

Gazel destaca que a

cação é feita de for-

primeira dica a seguir

ma diferenciada de

é experimentar sempre novas

outros veículos.

interfaces e aplicações para

Porém, o diretor

que, ao desenhar o protótipo

de criação lembra

estrutural, o Flash surja em

que isso não significa dizer que todo e

seu trabalho como uma necessidade natural, que potencializa e

qualquer site deve usar Flash em sua concepção. O propósito

se relaciona com os demais componentes do sistema. Ele explica que se o projeto focar programação Actionscript, é preciso que

Objetos e classes

se dê preferência ao uso inteligente de objetos, criando classes sob

Assim como o JavaScript, o ActionScript é uma linguagem de

medida, que possam ser expandidas e melhoradas. O

programação orientada a objetos. Essas informações são

webdesigner não precisa ser um expert em Actionscript, mas conhecer o suficiente para conceber um produto da maneira mais simples e flexível possível , enfatiza.

28

organizadas em grupos, denominados classes. Existem classes pré-definidas do ActionScript, mas é possível criar outras personalizadas.

:

tecnologia, mas sim o tipo de comunicação que é preciso ser feita para que a mensagem chegue da melhor forma possível na outra ponta. E isso vai depender da análise de cada caso .

Acessibilidade e Flash já andam juntos

Flash: o poder da arte em movimento

Lançamento

maior não é o tipo de site que deve ou não usar essa

Além do Flash MX 2004, a Macromedia lança o novo Flash MX 2004 Professional, direcionado para desenvolvedores e para quem trabalha com vídeo.

Para os profissionais mais conservadores que, acima de

Flash MX 2004

qualquer hipótese lúdica de interação com o usuário, priorizam - Todo o conteúdo funciona de maneira bem melhor, gra-

o acesso irrestrito à informação, o Flash é visto como uma ferramenta que vai contra os princípios de acessibilidade. Entre-

ças às melhorias incorporadas ao plugin Flash 7.

- Vídeo tem o dobro de performance e qualidade, sem

tanto, ao contrário do que muitos pensam, o programa já possui recursos que possibilitam tornar os projetos feitos nele

aumentar o tamanho dos arquivos.

mais abrangentes. Dessa forma, é possível democratizar a

- Tarefas comuns tornam-se mais simples de serem exe-

navegação de usuários portadores de algum tipo de deficiên-

cutadas. Os Timeline Effects facilitam a criação de animações,

cia, tornando sua utilização menos rejeitada pelos

além de oferecer outras funções que não existiam, como Blur,

webdesigners mais radicais.

Drop Shadow e Explode.

- Os Behaviors adicionam blocos de código em ActionScript

Acessibilidade

:

Para quem quer conhecer mais sobre o assunto, o site da Macromedia tem uma seção dedicada à Acessibilidade que é

sem a necessidade de o usuário conhecer programação.

- Arquitetura abertas permite que terceiros desenvolvam plugins, adicionando novas funcionalidades ao produto

bem completa e oferece uma grande variedade de informações.

Flash MX 2004 Professional

As informações encontram-se em inglês: www.macromedia.com/macromedia/accessibility

- Maior suporte ao desenvolvimento de aplicativos - Nova interface de desenvolvimento de aplicativos baseSilvana Tauhata explica que o Flash possui um painel chamado Accessibility , que gera objetos que podem ser lidos

ada em formulários, similar a linguagens como Delphi, em que o programador não precisa usar a Timeline.

pelos leitores de tela como Window-Eyes e o Jaws. Assim, o

- Novos compontentes (30 no total, divididos em Compo-

desenvolvedor pode inserir um texto descritivo sobre o objeto

nentes de Interface, de Acesso a Dados e de Controle de Mídia

e definir teclas de atalho. Dessa forma, é possível definir a

vídeo e mp3)

acessibilidade em elementos individuais ou em um grupo de

- ActionScript 2.0 - a própria linguagem de programação,

elementos. Podemos organizar o layout de forma que facilite a

a ActionScript, evoluiu e está mais robusta, com orientação a

navegação de pessoas com deficiências visuais ou motoras. O

objetos, herança etc.

que eu vejo ainda é uma grande dificuldade de navegação nos sites feitos em Flash. E isso já pode ser resolvido hoje em dia , explica Tauhata.

Internet Rica Com as últimas versões do Flash, a Macromedia reforçou um conceito diferenciado de aplicativos chamado Rich Internet

RIA

:

É possível saber mais sobre os Aplicativos RIA no site da Macromedia. As informações encontram-se em inglês: www.macromedia.com/resources/business/rich_internet_apps

Application - RIA (Aplicativos Ricos para Internet), ou simplesmente

29

Flash: o poder da arte em movimento

Aplicativos RIA, que oferecem riqueza de interações, integração com vídeo e animações e amplo alcance. Para Marcos Scheidegger, gerente da Macromedia, as empresas não querem ter simplesmente sua presença na web apenas como se fosse um cartão de visita digital. Elas querem prestar algum serviço,

jeto, facilitando e otimizando, assim, todo o pro-

agregar algo de valor aos seus clientes

cesso de desenvolvimento. A partir do mo-

e usuários.

mento que uma certa funcionalidade está pronta,

Ele destaca que para desenvolver este tipo de aplicativo é necessária uma nova abordagem, uma vez

ela pode ser reutilizada como um componente. Uma boa dica é

que o HTML e sua estrutura não servem para fazer transa-

o site www.flashcomponents.net, que oferece uma gama con-

ções mais complexas. Um dos nossos clientes, o Broadmoor

siderável de componentes prontos para utilização e que certa-

Hotel (www.broadmoor.com ), que oferece um serviço de

mente podem servir de modelo, ou até mesmo de estudo na

reserva online, tinha um índice de desistência de cerca de

hora de resolver alguns problemas.

95% quando seu site era em HTML. Após a mudança de seu

Fora das fronteiras da web

sistema de reserva para um aplicativo rico, em apenas três

Não é só no meio online que o Flash se destaca como uma

meses foi possível recuperar todo o investimento e o índice

ferramenta versátil. Em outras aplicações offline, o programa

de transações completadas dobrou. Os usuários do site atri-

vem atuando como forte aliado em projetos que requerem

buíram esta taxa de sucesso diretamente à nova interface

maior grau de interação e movimento. Trabalhos que muitas

apresentada , explica.

vezes podem ser feitos pelo Director, software da Macromedia

É bom lembrar também que, ao trabalhar com o

direcionado para aplicações multimídia, hoje são feitos com o

Macromedia Flash, é possível armazenar as funcionalidades de

Flash devido à própria agilidade que a ferramenta proporciona

um determinado trabalho para serem utilizadas em outro pro-

aos desenvolvedores. Com a possibilidade em se criar arquivos executáveis para PC e MAC, torna-se possível a criação de CDs-ROM que possam ser veiculados em qualquer computador, sem a obrigatoriedade de ter o plugin instalado para rodálos.

Ronaldo Gazel afirma que antigamente o grande poder do Flash estava na alta qualidade e no pequeno tamanho em bytes dos arquivos gerados, os .swfs. Hoje, além do formato de animação já consagrado e do seu tamanho reduzido, o Flash possui uma linguagem poderosa, que o caracteriza como um verdadeiro ambiente de desenvolvimento multimídia, fato esse reforçado pelo suporte a vídeo digital, que ampliou ainda mais suas possibilidades. Ele explica que o Flash vem sendo

www.vodafone.com/futurevision

30

utilizado também como projetor e controlador de mídia, in-

Flash: o poder da arte em movimento

Vídeo no Flash É possível criar dentro do seu projeto um player de vídeo personalizado, com a aparência e formato que contextualizem com o seu trabalho. Um exemplo é o site RedBull Copilot (http://www.redbullcopilot.com/ ), que mostra uma corrida de aviões em que tudo é vídeo e aplicativo rodando na própria página. O usuário pode trocar de piloto, trocar a câmera, acompanhar em um mapa os outros aviões, ver todos os controles de navegação do seu avião e gráficos, trocar a trilha sonora etc. E isto ainda poderia estar integrado com os

www.eoside.com

aplicativos ricos como é possível ver no site MSNBC cluindo vídeo, som, imagem e swf, por exemplo. É possível

(http://www.msnbc.com/modules/bigpicture/elex/ ),

também criar jogos de todas as categorias, inclusive

onde se tem uma votação online no meio deste

multiplayers e interface multiusuários para os mais variados

programa de TV e até mesmo em sites como o Globo

fins. O fato também de se poder trabalhar com vídeo no Flash

Media Center (http://gmc.globo.com ). Ambos utilizam o

MX expandiu as possibilidades do seu uso em ilhas de edição.

Flash Communication Server.

Novas tendências A própria internet ainda é muito recente, e durante o seu desenvolvimento, alguns dos exageros cometidos com o Flash

Interação com dispositivos móveis Todo o dispositivo que tiver o plugin do Flash vai

talvez tenham sido fruto do experimentalismo natural às novas

executar

realidades e demandas dessa mídia. Gazel destaca que é per-

independente de plataforma e navegador. Entretanto,

ceptível a melhora do relacionamento dos webdesigners, e até

um detalhe que é importante frisar é a capacidade de

dos próprios clientes, com a ferramenta. Infelizmente muitos

processamento desses dispositivos. Um PDA não tem um

clientes decidem erroneamente em projetos importantes, es-

processador tão eficiente quanto um PC ou um

quecendo de que a comunicação visual é fruto de pesquisa e

PlayStation 2, por exemplo. Por isso, alguns aplicativos

reflete a experiência e a dedicação das pessoas especialistas

mais pesados podem funcionar de maneira diferente. O

no assunto. É o que acontece quando, na ocasião da modela-

Flash, por ser vetorial e se adequar a qualquer tamanho

gem da estrutura, algum executivo ou gerente diz, por puro

de tela, resolve um dos maiores problemas que é a

arquivos

SWF

da

mesma

maneira,

diferente resolução de tela dos dispositivos.

Flash no celular Multiplayer

:

O desenvolvimento de conteúdo rico para ser

Diferentemente de outros servidores do mercado, que fazem

acessado em celulares e dispositivos móveis é uma

streaming apenas de vídeo e áudio, o Flash Communication

tecnologia nova com uma abordagem diferente, em que

Server também faz stream de dados, ou seja, além da riqueza do vídeo é possível fazer jogos multiplayer que podem ter mais de 1000 usuários conectados.

não é o usuário que busca a informação, e sim a informação que se apresenta para o usuário.

31

Flash: o poder da arte em movimento

preconceito, que não se usará Flash porque pesa. É uma pena, mas acontece , lamenta o diretor.

Flash Player 7

Gazel aponta que uma das maiores tendências é o uso do

A Macromedia está lançando o Maelstron, a versão 8

vídeo digital dentro do ambiente Flash. Só para se ter uma

do plugin do Flash Player. Este novo plugin trará evolu-

idéia das possibilidades, ele explica que mesmo nas páginas

ções no que diz respeito à performance do código, o que

que precedem sites e hotsites, que até então se restringiam,

diminuirá o tempo de carregamento do filme.

em sua maioria, ao uso de imagens estáticas, podemos encontrar vídeo digital. Um bom exemplo é a title screen de www.eoside.com . Outra boa tendência que o diretor destaca é

o

que

ele

chama

de

estilo

Vodafone

Future

(www.vodafone.com/futurevision), que abrange uma série de conceitos visuais e navegacionais como o redimensionamento

Treinamento

on-the-fly do canvas, ou a utilização de um quadro intermedi-

A Macromedia possui uma série de MATPs

ário com o efeito de zoom, explorado com sucesso no cinema.

(Macromedia Authorized Training Partner) espalhados

E tudo isso alinhado a uma tipografia elegante e ótimos

pelo Brasil. Uma lista pode ser consultada no endereço:

vetores. Alguns exemplos interessantes em que o

www.macromedia.com/br/partners/training

webdesigner pode encontrar as últimas tendências em Flash estão nos sites www.4efx.com.br, www.newwebpick.com, www.res72.com ou ainda www.pixelmakers.com.br , aponta.

Antes de beber na fonte de modelos pré-existentes na web, é importante para o profissional de internet, principalmente os que lidam com forma e movimento, ter o poder de observação, pois a qualidade dos trabalhos feitos no Flash reside justamente na riqueza dos detalhes. E é nessas pequenas observações que a arte e a sensibilidade de um bom projeto feito com essa ferramenta torna evidente o grau de complexidade exigido para se criar nela. Dessa forma, como fizeram os irmãos Lumière, que por meio da experimentação conseguiram revolucionar toda uma geração com a criação do cinema, pesquisar, saber ousar e sair do lugar comum podem ser fatores determinantes para tornar seus trabalhos dignos de um Oscar. Então luz, câmera e tweening motion !

32

debate

Já é possível desenvolver

projetos de grande conteúdo só com o uso do Flash?

Que o Macromedia Flash é uma ferramenta com inúmeros recursos ninguém pode discordar.

Entretanto, em trabalhos que contenham grande quantidade de informações, o seu uso pode-se tornar dúvida. Neste caso, é importante saber disponibilizar certos tipos de conteúdos como imagens, áudio e vídeo da maneira correta e conhecer algumas técnicas para fazê-lo auxiliar no bom resultado final do produto. Sendo assim, como é possível conciliar alguns conceitos de usabilidade, que prevêem o carregamento rápido de uma página, por exemplo, em sites feitos em Flash? Já é viável desenvolver trabalhos complexos e que ao mesmo tempo sejam fáceis de carregar?

33 33

debate A verdade é que o Flash não anda mais sozinho. Deixou de ser uma simples ferramenta de animação e está cada vez mais integrado às linguagens de programação, oferecendo assim soluções mais seguras.

Então, dá pra criar projetos complexos totalmente em Flash? Sim. Desde que o conteúdo acessado esteja fora dele. A utilização do Xml é apenas um dos recursos para isso. É também o que mais utilizamos em nossos projetos. O conteúdo de textos e imagens fica armazenado fora do Flash e é chamado apenas quando solicitado, como em uma página em formato html comum.

Apenas as animações principais permanecem no arquivo principal. Isso torna o projeto mais leve. O que pesa não é o Flash em si, mas sim a quantidade de animação de som dentro dele. É preciso saber otimizar isto.

O programa pode e deve ser usado em projetos complexos, se acompanhado por uma equipe de design e tecnologia trabalhando juntas. Mesmo assim, o público-alvo e o tipo de conteúdo determinam a ferramenta a ser utilizada na construção de um site. É preciso analisar cada caso. A velocidade de produção e fácil atualização contam bastante.

Sites de entretenimento, como o www.heavy.com usam apenas Flash para apresentar seu conteúdo. No caso deles, funciona tão bem que grandes empresas como Budweiser, Sony e Diesel anunciam seus produtos neste site. Estes anúncios ou inserções publicitárias não aparecem em forma de banner convencional e sim no meio do conteúdo. Outro exemplo é o site da Curve Music (http://www.curvemusic.ca). Nele é possível ouvir músicas e ter acesso a informações das bandas da gravadora.

Tudo dentro do Flash. Tem uma ótima navegação, acesso rápido e uma grande base de dados.

A verdade é que o Flash não anda mais sozinho. Deixou de ser uma simples ferramenta de animação e está cada vez mais integrado às linguagens de programação, oferecendo assim soluções mais seguras

34

:: André Cury Diretor de criação da Rumba www.rumba.com.br

debate Temos basicamente duas opções para trabalhar com arquivos pesados. Ou dividimos o conteúdo em vários pacotinhos, que só serão carregados quando o usuário demandar aquele conteúdo. Ou fazemos uma programação para que, quando ocioso, se carregue uma outra parte do conteúdo

Tudo depende do que se denomina como complexo. Sem dúvida, o Flash teve um grande avanço. Acompanho este programa desde a sua versão quatro e nunca imaginei que ele poderia importar arquivos de vídeo, isso realmente me impressionou muito.

Entretanto, penso que a Macromedia deixou de desenvolver certas melhorias quanto ao poder de design do programa, pois da versão quatro em diante, não houve evoluções nas ferramentas de desenho. Por outro lado, a linguagem ActionScript impulsiona o aumento exponencial do uso deste programa na área de programação.

Temos basicamente duas opções para trabalhar com arquivos pesados. Ou dividimos o conteúdo em vários pacotinhos, que só serão carregados quando o usuário demandar aquele conteúdo. Ou fazemos uma programação para que, quando ocioso, se carregue uma outra parte do conteúdo.

Podemos criar alguns recursos que desviem a atenção do usuário enquanto o conteúdo principal é baixado, como uma pequena animação ou um joguinho simples.

:: Sigrid Wiederhecker Diretora de criação da NJOBs www.njobs.com.br

35 35

debate Um fator que contribuiu para o desenvolvimento de sites em Flash foi a convergência com outras tecnologias, desenvolvendo-se um novo conceito chamado RIA (Rich Internet Application) ou internet Rica

Sem dúvida, hoje já é possível criar websites em Flash com grande volume de conteúdo e uma interface atraente e interativa para o usuário. No cenário atual, segundo o Grupo de Pesquisas e-bit, aproximadamente 50% dos acessos são feitos por meio de banda larga, o que é muito significativo.

Um fator que contribuiu para o desenvolvimento de sites em Flash foi a convergência com outras tecnologias, desenvolvendo-se um novo conceito chamado RIA (Rich Internet Application) ou internet Rica. Isso representou um novo estágio na internet e trouxe uma experiência muito mais rica, intuitiva e interativa para o usuário.

O interessante em desenvolver um projeto baseado em Flash com essas novas tecnologias é que podemos combinar a interatividade, as funcionalidades do computador do cliente e a flexibilidade que a web oferece, originando uma única e integrada experiência rica em design, interatividade e conteúdo. O e-commerce é um exemplo disso. O uso dessas tecnologias permite que todo o trabalho seja feito na mesma interface, o que agiliza os processos. O design é completamente flexível e atraente, contando ainda com a possibilidade de se enriquecer o conteúdo com áudios, vídeos interativos e animações, e conseqüentemente aumentar os argumentos de venda para conquistar o usuário.

O cliente tem a possibilidade de montar seu produto e ver como ele ficará antes de comprá-lo. Um exemplo são os sites de venda de automóveis, em que pode-se escolher a cor do carro, opcionais, formas de pagamento, tudo na mesma interface de forma dinâmica, onde tudo é calculado automaticamente até a concretização da venda.

O Flash aliado a essas tecnologias é uma ferramenta muito poderosa para o designer e para o desenvolvedor de aplicações para a web. É a capacidade de se criar interfaces atraentes com poder de interação maior com o cliente.

:: Rachel Mazzarotto Diretora de arte do Portal de Educação do Exército www.ensino.eb.br

36 36

debate Exemplos de sites, citados por Rachel, com o uso de algumas dessas tecnologias:

http://gmc.globo.com

www.nike.com/corre

www.miniusa.com/crm/load_mini.jsp

www.redbullkingoftheair.com/virtual_kite.php

37 37

Acredito que, com o tempo, a habilidade de se projetar um protótipo estrutural que anteveja com clareza as maneiras mais diretas e rápidas de se produzir determinado resultado no Flash melhorará. Seja em projetos de comunicação visual pura ou de natureza mais técnica, ou em sistemas baseados em informações dinâmicas, que muitas vezes precisam ser facilmente atualizáveis, em interfaces criadas sob medida.

Isso significa preloadings (pré-carregamentos) mais inteligentes, que sejam chamados sob demanda, e que sejam, na medida do possível, imperceptíveis ao usuário. É preciso, na outra ponta do desenvolvimento, que o carregamento não se comporte como um ruído visual e temporal no seu projeto, mas sim como parte indispensável à composição, reduzindo o tempo psicológico em torno da espera de determinado evento ou ação.

Também tenho visto boas combinações de código formatado (com imagens, textos, menus etc.) e Flash em locais estratégicos, para o melhor aproveitamento das características dos diversos elementos em composição. Do lado oposto há um grande número de sites que usam Flash puro em dimensões superiores a 1024x768 e banda larga, só pra citar alguns recursos em fase de popularização.

É preciso, na outra ponta do desenvolvimento, que o carregamento não se comporte como um ruído visual e temporal no seu projeto, mas sim como parte indispensável à composição

:: Ronaldo Gazel Diretor de arte da BHTec www.bhtec.com.br

38

debate Sem dúvida que não basta apenas ser bonitinho. Prevendo isso a Macromedia tratou de tornar o Flash não apenas uma ferramenta para animação e sim uma ferramenta robusta para desenvolvimento de aplicações, usando conceitos de RIA (Rich Internet Application).

Dessa forma, podem-se desenvolver grandes projetos com o uso dessa ferramenta como camada de apresentação de aplicações. Mas para completar o cenário, é preciso disponibilizar também as camadas de negócios e dados. E estas, você pode desenvolver em qualquer linguagem, de preferência produzindo resultados em formato de WebServices, XML etc. Dessa forma, o Flash irá receber e manipular esses dados e exibi-los para o usuário. Isso porque, atualmente, os projetos web requerem atualizações constantes. Afinal, o que seria uma aplicação web sem conteúdo dinâmico? Não existe mais essa mentalidade de que o programador vai ficar atualizando um site todo dia manualmente, alterando htmls, ou alterando seus arquivos no Flash a cada mudança.

E frisando, quando o Flash é usado como camada de apresentação para exibir dados dinâmicos, torna-se essencial que o resultado final seja excelente. E isso exige que exista uma aplicação complexa e de carregamento rápido.

Maxwell Dayvson Analista de Sistemas - Globo.com

Quando o Flash é usado como camada de apresentação para exibir dados dinâmicos, torna-se essencial que o resultado final seja excelente. E isso exige que exista uma aplicação complexa e de carregamento rápido

39 39

estudo de caso :: Citroën C8

Que bons ventos tragam o

Citroën C8

Por Bete Veiga

Inspirado no outono, o site do Citroën C8 se destaca pela leveza e originalidade. Através do uso de tecnologias como IPIX, tornou-se possível fazer com que o usuário se sentisse dentro do automóvel, em uma ótima simulação de visita à concessionária. Todo o cuidado na construção do site, que possui opção de navegação até para internautas menos experientes, poderá ser conferido na entrevista concedida por André Cury, fundador e diretor de criação da agência Rumba, escolhida pela Citroën para elaborar e desenvolver o projeto.

40

to, tecnologia e design são explorados de O

IPIX

forma leve,

leve. Isso faz parte de alguma estra-

usuário pode interagir com o cenário criado

tégia para se alcançar um público-

passeando pela tela onde as imagens apa-

resolução em 360 x 360

alvo específico, como o segmento fe-

recem e se transformam.

graus. Outras tecnologias

WD :: O ato de arrastar o mouse

visualizar na internet fotografias com alta

permitem apenas que você veja fotos panorâmicas

Cury :: O excesso de informação mui-

sobre as ilustrações possibilita efei-

horizontais, isto é, sem o

tas vezes atrapalha o foco e dificulta a lei-

tos de aproximação/afastamento,

movimento para cima e

tura. Por isso, adotamos esta linha (clean)

dando a impressão de que o usuário

para todos os carros da Citroën, seguida

está no interior do veículo. Há tam-

uma visita virtual com a

sempre de um ar tecnológico.

bém o giro de 360º. Que tecnologias

composição de fotografias

Desta vez, queríamos algo mais hu-

foram empregadas nesses recursos?

mano, que tivesse associação com o pú-

Cury :: Para o efeito de aproximação

blico (família).

Era importante retratar o espaço

utilizamos a linguagem de programação do próprio flash ActionScript .

:

Tecnologia que permite

se depara com um ambiente clean,

minino, por exemplo?

simples e elegante.

Tecnologia

para baixo.

Consiste em desenvolver

captadas em local real, possibilitando ao visitante rotacionar a imagem em 360º completos.

As fotos em 360º graus proporcionam melhor

e o conforto. A tecnologia é visível,

No caso do giro 360°, escolhemos a

mas o mais importante é o bem-estar

tecnologia IPIX, que além de rotacionar o

que ela proporciona.

carro, possui o recurso zoom.

visualização de locais que dificilmente seriam interativos com fotos comuns. O usuário poderá

WD :: Qual o conceito inicial ado-

WD :: A própria agência optou

tado para construir a programação

por desenvolver o site em Flash ou

visual do site e desenvolver a parte

o cliente já havia determinado isso

tecnológica?

no briefing?

ver uma foto de um ambiente tridimensional no mesmo espaço, utilizando-se de cursores posicionados na foto, tendo assim uma visão

Cury :: O site brinca com a chegada do

Cury :: O cliente precisa estar seguro

outono e sua navegação sugere um passeio

de que você entregará a melhor solução,

pelas features do carro. Espaço, confor-

indiferente da tecnologia aplicada.

completa do ambiente. Áreas de atuação: - Construção Civil (apartamentos decorados) - Mercado Imobiliário (vendas e aluguéis) - Instalações Comerciais (lojas, shoppings, cinemas, móteis) - Entretenimento (teatros, estádios, shows) - Turismo (hotéis, pousadas, praias, restaurantes, cidades

features

: :

históricas) - Instituições de Ensino

feição, aspecto, caráter;

(escolas, universidades)

feições fisionômicas;

- Indústria automotora

características.

(interiores de veículos).

www.citroenc8.com

41 41

estudo de caso :: Citroën C8

WD :: Ao entrar no site, o usuário

estudo de caso :: Citroën C8

Apesar de o html ter avançado bastante em recursos, não teríamos o mesmo resultado

Por isso, na maioria dos casos, não há restrição.

Isso faz com que a criação não fique limitada. Assim podemos voltar nossa atenção para a comunicação.

De qualquer forma, sabemos que o público-alvo está familiarizado com este tipo de tecnologia.

Sempre que trabalhamos com lançamentos e precisamos de interação para exemplificar na prática como funciona um produto, utilizamos Flash.

WD :: Você acha que seria possível desenvolver o mesmo site em html e obter um resultado tão atraente quanto o atual?

Cury :: Poderíamos usar o mesmo conceito, mas apesar de o html ter avançado bastante em recursos, não teríamos o mesmo resultado. Perderíamos muito da interação com o produto.

WD :: Quanto tempo levou cada etapa do projeto e que etapas foram essas?

Cury :: O processo foi rápido, pois tínhamos um conceito forte que fez com que o cliente comprasse a idéia e visualizasse o resultado final logo no início. Essa relação de parceria entre o cliente e o fornecedor favorece muito a produção. Foram quatro semanas, divididas em quatro etapas entre: esboço e definição de conceito, criação de layout navegável, programação e inserção de conteúdo.

WD :: Os testes de usabilidade apontaram ajustes em que elementos do site?

42

mouse através das seções nos deu muito trabalho.

Queríamos que o mecanismo se adequasse às várias resoluções de tela e que o site estivesse sempre centralizado, inclusive em telas wide-screen. As transições das máscaras deveriam se encaixar no tempo certo.

Para atender aos usuários menos experientes, criamos uma navegação paralela através do menu.

WD :: Sabe-se que muitos sites em Flash toNa seção extras o usuário pode escolher a

mam o tempo do internauta com o carregamento

cor do automóvel e ter acesso a wallpapers

das páginas. Houve uma preocupação com esse fator durante o desenvolvimento do projeto? Foram feitas pesquisas sobre que tipo de conexão é predominante no público-alvo (banda larga ou discada)? Utilizaram algum recurso específico (de linguagem, por exemplo) para deixar o site mais leve ?

Cury :: Estamos utilizando, para a maioria dos nossos sites, a linguagem XML para integrar o conteúdo com o Flash. Os textos e imagens ficam armazenados fora do Flash e são chamados apenas quando solicita-

É possível também dar um zoom em diversas partes do automóvel e vê-lo em 360°

dos, como em uma página em formato html comum. Apenas as animações principais permanecem no arquivo

Linguagem XML

:

A sigla XML corresponde à Linguagem de Marcação Expansível, do inglês eXtensible Markup Language .

A utilização do XML passou a ser possível na web, a partir do lançamento do Internet Explorer versão 5, primeiro navegador comercial compatível com esse padrão. É caracterizada por prover independência de dados bem como separar conteúdo de apresentação. O suporte que oferece tal separação é um aspecto de suma importância na linguagem. Tem sido, cada vez mais, utilizada por desenvolvedores de aplicações devido ao suporte que ela oferece em interoperabilidade e funcionalidade da web.

Trata-se de uma linguagem baseada em texto, a qual possibilita qualquer pessoa escrever um código em XML, sendo ele facilmente compreensível às pessoas e manipulável aos computadores. Simples, possui estrutura de dados rica, permite a troca e exibição de conteúdo de bases de dados e pode ser utilizada como formato para troca de mensagens na comunicação entre aplicações.

principal. Isso torna o arquivo bem mais leve, além facilitar a atualização.

WD :: Qual a porcentagem de pedidos de compra pelo site em relação à compra direta na concessionária?

Cury :: Esta é a informação mais valiosa para o nosso cliente e que mostra se o site é realmente efetivo.

Em média, 30% das solicitações de TEST-DRIVE e interesse de compra vêm do cadastramento online.

Esses números foram conferidos não só ao C8, mas também em outros sites que criamos para a montadora (C3, C5 e Xsara Picasso).

WD :: Qual(is) o(s) diferencial(is) do site do Citroën C8 se comparado aos demais sites dos modelos Citroën e das demais montadoras?

43 43

estudo de caso :: Citroën C8

Cury :: Fazer com que o usuário navegasse com o

Cury :: Acredito que o principal diferencial seja o tipo de abordagem. Quando um usuário entra em um de nossos sites, convidamos para um passeio e queremos que ele tenha uma experiência única. Que teste o carro, como se estivesse dentro dele.

Este é o desafio.

Comparando com os sites de outros modelos que produzimos para a Citroën, a diferença está mesmo no carregamento das informações, devido à utilização da linguagem XML, que torna o site mais leve e ágil.

Posicionando o mouse sobre a seção, o usuário interage com o cenário

A navegação é facilitada através de um menu paralelo

44

internet sem barreiras

I n tern et sem barreiras Por Vanessa Barbosa

É fru st ran t e. É com o u m jorn alist a qu e procu ra in form ações sobre u m det erm in ado fat o, m as n in gu ém sab e con t ar o qu e est á acon t ecen do. U m a sen sação de v az io, de qu ero m ais. Est es são os sen t im en t os qu e o an alist a de sist em as Laércio San t an a, 38 an os, cego de n ascen ça, possu i qu an do n av ega por u m sit e qu e n ão é acessív el a port adores de n ecessidades especiais.

4455

internet sem barreiras

É difícil compreender, apesar dos avanços tecnológicos e

Para o usuário com uma deficiência, o desafio é identifi-

da consolidação da própria internet como veículo universal e

car ferramentas que forneçam a maneira mais conveniente de

interativo, como tantos sites ainda não são desenvolvidos

acessar conteúdo na web ou outras informações eletrônicas.

com a preocupação de promoverem a interação para todos os

Para o designer ou desenvolvedor web, o desafio é remover os

usuários. Por isso, a Webdesign convidou especialistas em

obstáculos que impedem que as ferramentas de acessibilidade

acessibilidade digital para esclarecer sobre o que é e como re-

funcionem efetivamente , explica Marcos.

alizar um projeto acessível aos navegadores ansiosos pelo fim das barreiras na rede mundial de computadores.

De acordo com Marcelo Bergasse, diretor de criação e sócio-fundador da agência Eyedea, acessibilidade digital é o

O conceito de acessibilidade na web é muito amplo. Segun-

processo que permite tornar o conteúdo da web acessível a

do Aracy Maria Bernardes Gonçalves, designer e analista de sis-

pessoas que precisam de uma interface diferenciada. O traba-

temas da Companhia de Processamento de Dados do Município de

lho de acessibilidade realizado pela produtora está

São Paulo (Prodam/SP), a exclusão digital possui origem em di-

direcionado aos deficientes visuais, que utilizam para a nave-

versos fatores: pessoas que não têm computadores ou têm baixa

gação os softwares leitores de tela , que lêem tudo aquilo que

renda, pouca escolaridade ou dificuldade de acesso à educação e

aparece na tela do computador. Apenas o software, entretan-

falta de acessibilidade digital para pessoas com deficiências audi-

to, não é o suficiente. Os sites precisam de alguns cuidados

tivas, visuais (parcial, completa ou deficiência para cores), neu-

em sua programação e estrutura para que sejam realmente

rológicas (como a dislexia), motoras, paralisias e, inclusive, as

acessíveis , afirma Marcelo.

causadas pela idade avançada.

P adrões ex istentes

Para Aracy, acessibilidade digital significa a flexibilidade do

Segundo Aracy, quando o serviço tem como alvo o cida-

acesso à informação e interação dos usuários portadores de al-

dão, a importância da acessibilidade cresce. Além disso, tanto

gum tipo de necessidade especial, relacionados aos meios de na-

conteúdos governamentais como os informacionais de empre-

vegação e apresentação das páginas, operação de softwares,

sas, entidades, organizações e universidades devem possuir

hardwares e adaptação de ambientes.

características que facilitem o acesso para todas as pessoas.

Marcos Scheidegger, advogado e consultor técnico da Macromedia, destaca que para a empresa a acessibilidade en-

Por isso, existem alguns padrões que devem ser seguidos para desenvolver um site acessível.

volve dois elementos chaves: como os usuários com necessi-

No Brasil, em 2 de dezembro de 2004, foi assinado

dades especiais podem acessar informações eletrônicas e

um decreto lei de acessibilidade (n° 5296), divulgado no Diá-

como os designers e desenvolvedores podem criar conteúdo

rio Oficial da União. Segundo o documento, sites e portais da

que funcione com dispositivos auxiliares para serem consumi-

administração pública têm o prazo de 12 meses para serem

dos por esses indivíduos.

totalmente acessíveis às pessoas com deficiência visual.

P ara o usuário com um a deficiência, o desafio é identificar ferram entas que forneçam a m aneira m ais conveniente de acessar conteúdo na w eb ou outras inform ações eletrônicas. P ara o designer ou desenvolvedor w eb, o desafio é rem over os obstáculos que im pedem que as ferram entas de acessibilidade funcionem efetivam ente M arcos Scheidegger 46 4 6

e técnicas de acessibilidade na web para desenvolver suas

na frente, como é o caso da Procuradoria da República do Es-

normas e leis , explica Aracy.

tado de São Paulo, que inaugurou em julho do ano passado o

Em alguns países específicos, depois de 1999, surgiram pa-

primeiro site do Ministério Público Federal com acessibilidade

drões nacionais em relação ao tema. Segundo Marcos, a Section

total para deficientes visuais.

508 do Federal Rehabilitation Act nos Estados Unidos é baseado

Os padrões para acessibilidade são muito importantes

no checkpoint Priority One do WCAG. Este mesmo checkpoint ser-

afirma Marcos, pois auxiliam os designers e desenvolvedores

ve como base dos padrões na Austrália, França, Alemanha e em

a identificarem e endereçarem problemas relacionados às de-

outros países. No Canadá e Inglaterra, os sistemas são baseados

ficiências. O Content Accessibility Guidelines (WCAG) do W3C

nos checkpoints 1 e 2. E no Brasil, a Associação Brasileira de Nor-

representou o primeiro esforço para estabelecer regras gerais

mas Técnicas (ABNT) é o órgão responsável por esse tipo de pa-

para o design de conteúdo acessível. Este padrão consiste de

dronização e possui um Comitê Técnico para discutir o tema.

14 regras, cada uma com três checkpoints (níveis de verifica-

Li m i t a ç õ e s e r e c o m e n d a ç õ e s

ção) a serem alcançados com prioridades um, dois e três.

O W3C, ou Consórcio para a WEB, e a WAI, Iniciativa

O modelo que tem norteado a rede mundial nesse assun-

para a Acessibilidade na Rede, apontam, segundo Aracy, situ-

to é o recomendado pelo W3C. De acordo com Aracy, esse

ações e características diversas a que o usuário pode estar

grupo formado por grandes empresas criou a Web

sujeito e que podem impactar sua interação no meio digital. Algu-

Accessibbility Iniciative (www.w3c.org/wai), ou seja, um comi-

mas delas são a incapacidade de ver, ouvir ou deslocar-se, gran-

tê de trabalho que desde 1999 elabora diretrizes para garantir

de dificuldade quando não a impossibilidade de interpretar

acessibilidade aos conteúdos web para pessoas com necessi-

certos tipos de informação, dificuldade visual para ler ou compre-

dades especiais. O W3C, ou World Wide Web consortium,

ender textos, incapacidade para usar o teclado ou o mouse, loca-

além de acessibilidade, publica e discute outros padrões de

lização na estrutura dos websites, entre outras.

desenvolvimento, programação, tecnologia para a internet.

As recomendações para cada tipo de deficiência, afirma

Muitos países, inclusive o Brasil, têm se baseado nas diretrizes

Aracy, também são encontradas no W3C, que apresenta um

47

internet sem barreiras gam es

Marcelo ressalta que alguns setores do governo já partiram

internet sem barreiras

Esses cuidados com a acessibilidade na maioria das vezes não são difíceis de se implementar, mas é preciso prevê-los no início do projeto, pois fica mais barato A racy Gon çalv es

documento de técnicas de construção de um site acessível, que compreendem cerca de 65 itens, mostrando como ajustar os elementos da interface. Usuários com deficiência auditiva, por exemplo, precisam ser avisados que uma interface contém sons. Esses conteúdos sonoros, se possuírem uma informação importante, devem ter um equivalente em forma de texto , explica a designer.

Um projeto web e multimídia que contemple uma pessoa com deficiência auditiva deve prever que os sons (trilhas de áudio de um vídeo, sons de fundo de tela, sons em botões etc.) possam ser desabilitados. Esses cuidados com a acessibilidade na maioria das vezes não são difíceis de se implementar, mas é preciso prevê-los no início do projeto, pois fica mais barato. O que custa menos: colocar, por exemplo, um botão de ativa e desativa som em um template ou protótipo de interface ou ter que alterar 200 telas um dia antes da entrega do produto? Isso envolve custos e a motivação dos desenvolvedores , complementa Aracy.

As etapas que acontecem durante a concepção de um site para que este possa ser acessado por qualquer pessoa são similares à produção de um website comum. Porém, Marcelo enfatiza que, em cada estágio, como planejamento, definição de conteúdo, estrutura de navegação, os padrões de acessibilidade devem ser considerados e incorporados.

Aracy destaca que não existe uma metodologia específica para o desenvolvimento. De acordo com a designer, é importante adotar as recomendações do W3C, ter em mente as prioridades de ações fornecidas pelo comitê a serem seguidas pelos desenvolvedores, deixando o produto em conformidade com as recomendações, e testar o site com softwares avaliadores e de forma manual também. Além disso, Aracy ressalta itens essenciais presentes na produção de qualquer site: conhecer bem o perfil do usuário, levantar os requisitos de mercado, do cliente e do contexto do uso do determinado produto.

Segundo Marcos, todas as ferramentas da Macromedia oferecem recursos para criar sites acessíveis de maneira simples: sejam ferramentas para desenvolver sites e sistemas web, como o Dreamweaver, o Flash e o Contribute, sejam para produção de conteúdo para e-Learning, como o

48 4 8

multimídia, como o Director.

Outra ferramenta, para Marcos, que facilita é o XHTML, a evolução do HTML, que já foi desenvolvido levando em conta os usuários com necessidades especiais. Além disso, é a especificação XML para a internet, o que permite integrar esse conteúdo com outros sistemas. Por isso, se eu fosse dar uma dica para os desenvolvedores é que eles adotem o XHTML. Isso tornará o conteúdo acessível, além de trazer outros benefícios bem significativos, como facilidade de manutenção, separação

U su ários com deficiên cia au dit iv a, por ex em plo, precisam ser avisados qu e u m a in terface con tém son s. Esses con teú dos sonoros, se possuírem um a inform ação im portante, devem ter um equivalente em form a de tex to Aracy Gonçalves

do conteúdo da camada de apresentação, entre outros. O consultor técnico afirma que o XHTML é tão simples como o

com elementos multimídia e vídeos. Como tornar um vídeo

HTML, e o próprio Dreamweaver cria automaticamente o

acessível? Quem tem deficiência visual já está ouvindo a

conteúdo em XHTML, possuindo uma função que converte

própria locução do vídeo e, por isso, ficaria difícil colocar

páginas HTML em XHTML (menu File > Convert > XHTML).

uma outra narração para explicar o que está sendo mostra-

Já para conteúdo desenvolvido em Flash, Marcos diz que

do. Já no caso dos deficientes auditivos é mais fácil, basta

o profissional pode buscar mais informações através do Help

colocar uma legenda. Um dos nossos produtos, o Flash

do produto ou através do Painel Accessibility (menu Window >

Communication Server, faz streaming de áudio e vídeo, e

Other Panels Accessibility).

também de dados, o que permite facilmente agregar essa

Cr i a t i v i d a d e e cu st o s

legenda no vídeo , explica.

Mas será que pensar na acessibilidade no momento de pro-

Em relação aos custos de equipamentos e softwares, a

duzir um site limita a criatividade do profissional de criação? Para

implementação da acessibilidade depende do projeto e do nú-

Aracy, isso não é problema desde que seja previsto no início e no

mero de páginas. Segundo o diretor de criação da Eyedea, um

planejamento do projeto. Muitas vezes quando encaramos posi-

site complexo pode custar até 30% mais que um site tradicional

tivamente uma barreira, nossa criatividade é aguçada para

para ter os recursos de acessibilidade. Já projetos mais sim-

ultrapassá-la. Seja qual for nossa motivação ou limitação criativa,

ples, se forem planejados com este propósito desde o início,

quando pensamos em um serviço que atingirá milhares de cida-

têm custos adicionais muito menores.

dãos, os objetivos da comunicação devem ser prioridade.

O usuário portador de necessidade especial, segundo

Para o consultor técnico da Macromedia, talvez exista limite

Aracy, utiliza tecnologia de apoio para interagir com a vida no

no desenvolvimento, mas ele acredita que o maior problema seja

cotidiano. São teclados adaptados, cadeiras de rodas,

ainda conscientizar empresas e profissionais sobre a impor-

softwares e hardware concebidos para ajudar a pessoa

tância de sites acessíveis. Alguns limites podem surgir de

com deficiência. Outro conhecimento importante para estes

acordo com cada tipo de deficiência, mas talvez técnicas al-

usuários é a utilização dos leitores de tela e sintetizadores

ternativas aliadas aos padrões de acessibilidade possam ga-

de voz.

rantir, ao menos, uma experiência satisfatória para a maioria dos usuários , afirma Marcos.

Um exemplo, segundo ele, é que a empresa tem trazido para a internet o conceito de aplicativos web que interagem

Os softwares de navegação mais utilizados são o Screen Readers, Screen Magnifiers, Software de Voice Recognition e Voice Input Aids, Single Switches e Teclados Adaptive ou Dispositivos Alternativos de Input.

4499

internet sem barreiras

Breeze e Authorware e, até mesmo, para criação de

internet sem barreiras Um a sugestão seria a criação de um selo de acessibilidade, conferido apenas para aqueles sites que utilizassem estes padrões M arcelo B ergasse

Para saber se o site está realmente acessível, ele deve

também o LIFT Online, ferramenta da UsableNet, empresa es-

ser testado, de acordo com Marcelo, pela própria equipe de

pecializada em tecnologia para usabilidade na web. O LIFT

desenvolvimento, no qual estes profissionais se colocam no

Online avalia cinco páginas gratuitamente e também oferece

lugar do deficiente, testando a acessibilidade a cada etapa do

validação de outras mediante uma taxa.

projeto. Outra alternativa é consultar periodicamente um por-

Lu z n o fi m d o t ú n el

tador de necessidade especial que utilize a web com freqüên-

Apesar de tantos caminhos e modelos, por que tantos

cia, que pode, com mais precisão, detectar as falhas não

sites ainda não oferecem uma melhor experiência aos usuários

identificadas pelos profissionais.

com necessidades especiais? Marcos acredita que os padrões

Já o Macromedia Dreamweaver MX 2004 oferece um re-

já existem, são eficientes e deveriam ser seguidos. Na minha

curso chamado Accessibility Report que valida automaticamen-

opinião, o grande problema é conscientizar o empresariado em

te as páginas de acordo com as normas da Section 508. Marcos

primeiro lugar e depois os designers e desenvolvedores de

afirma que existem outras ferramentas, como o Bobby, onde

que é importante criar conteúdo acessível. O prazo é sempre

você digita o endereço do site em um formulário

apertado, os projetos normalmente são orçados abaixo do va-

(bobby.watchfire.com/bobby/html/en/index.jsp) e o sistema

lor ideal para que os clientes comprem, além de ser comum sur-

lhe devolve um relatório com os problemas mais comuns. Há

girem problemas não previstos durante o desenvolvimento.

50

gráfico e digital, à ciência da computação, à sociologia e à

eles não inventem mais uma coisa para se preocuparem , expli-

psicologia , complementa.

ca o consultor técnico da Macromedia.

Algumas empresas já possuem a preocupação em pos-

Para Marcelo, no caso dos deficientes visuais, a evolução

suir sites acessíveis a portadores de necessidades especiais.

deve ocorrer em duas frentes. Uma referente ao software,

Porém, ainda é algo muito novo que tende a aumentar com a

para que este seja mais acessível, pois estes programas hoje

conscientização da importância de permitir a interação des-

têm um custo relativamente elevado para o usuário. Acredito

ses usuários por parte das produtoras. Na verdade, esta

que isso poderia ser feito através de subsídios governamen-

preocupação vai crescer quando um maior número de em-

tais , afirma. A outra evolução diz respeito aos próprios sites

presas contratantes incorporarem estas solicitações em

que precisam incorporar em sua estrutura os padrões de aces-

seus projetos , conclui Marcelo.

sibilidade. Uma sugestão seria a criação de um selo de acessi-

E isso deve acontecer brevemente, pois as empresas

bilidade, conferido apenas para aqueles sites que utilizassem

não vão querer perder clientes, fornecedores e acionistas

estes padrões.

por não possuírem um site que ofereça recursos que facili-

Os profissionais que desenvolvem para a internet devem

tem o acesso de todos às suas páginas. Para Laércio, a situ-

levar em consideração, segundo Aracy, de preferência no iní-

ação ainda precisa melhorar e os webdesigners possuem

cio, as recomendações para construção de sites acessíveis.

pouca informação sobre o assunto.

Além disso, devem procurar inserir formas de avaliação da

Normalmente, segundo ele, os sites governamentais

usabilidade em seus projetos e podem aprender, por exemplo,

oferecem algum tipo de acessibilidade muito mais pela sim-

que imagens utilizadas como link em uma página web devem ter

plicidade das páginas do que pelo cuidado com as pessoas

um texto alternativo equivalente.

com deficiência. Apesar do número pequeno de sites que

Aracy acrescenta que é necessário também que os

possuem tal iniciativa, Laércio acredita que já é um começo.

desenvolvedores da camada de apresentação conheçam os

Afinal, ninguém gosta de acessar um site para obter uma

padrões de linguagem da internet e as usem de forma correta,

informação e não obter resposta. É fuga do usuário, sem

conforme foram desenvolvidas. Alguns designers não se pre-

dúvida. E será difícil que ele volte. A sensação é de que fo-

ocupam em conhecer o HTML de forma aprofundada por conta

mos mal atendidos , diz Laércio. E foram mesmo!

de usarem ferramentas que constroem automaticamente o código , afirma Aracy.

Assim, quando é necessário fazer ajustes pontuais para acessibilidade ou mesmo acertos simples para verifica-

Você já desenvolveu algum site levando em

ção em diferentes plataformas, os profissionais ficam em

consideração a acessibilidade de usuários

apuros. Então, as recomendações da designer são as seguintes: conhecer os usuários para quem você está desen-

com necessidades especiais (deficiências físicas/motoras)?

volvendo, utilizar corretamente os padrões da linguagem

83% 17%

escolhida de forma efetiva e teste, teste, teste .

Acesse e participe!

Ainda, segundo ela, a acessibilidade está ligada ao de-

Não Sim

www.arteccom.com.br/webdesign

senvolvimento centrado no usuário e por sua vez à interação humano-computador. Por isso, acessibilidade diz respeito à arquitetura, ao desenho industrial, ao design

51 51

internet sem barreiras

Acaba que para os empresários o caminho mais lógico é que

internet sem barreiras

Algumas recomendações, segundo o designer Marcelo

Sites indicados:

Bergasse, que tornam um site mais acessível: :: o site deve ter uma linguagem simples e objetiva, com um

www.acessobrasil.org.br

padrão consistente de navegação em todas as páginas;

Site da Acessibilidade Brasil, organização voltada para o

:: os leitores de tela começam lendo o topo da página, portanto,

desenvolvimento de estudos e projetos que promovam a

é importante que neste espaço haja um link para o conteúdo

inserção social e econômica de pessoas portadoras de

principal, em todas as páginas. Este recurso evita que os

deficiências. A internet assume papel relevante como fator de

usuários com deficiência visual ouçam as informações desta

inclusão social nesse processo.

área (propagandas, menus etc.) repetidamente; :: para utilização de recursos em Flash, utilizar a versão

www.designinclusivo.com

MX ou superior do programa, que possui recursos próprios

Possui artigos e links de referência sobre o assunto.

de acessibilidade; :: para páginas com áudio, é importante fornecer uma maneira

www.intranetportal.com.br

fácil de desabilitar o som, pois o fato do leitor de telas funcionar

Artigos sobre portais corporativos, intranets e gestão do

simultaneamente ao áudio da página dificulta a compreensão;

conhecimento com seção sobre acessibilidade e usabilidade.

:: para imagens e gráficos, o site deve fornecer uma descrição em modo texto, que explique o que está sendo exibido;

www.macromedia.com/macromedia/accessibility

:: a navegação deve ser possível integralmente através do

O site da Macromedia tem uma seção dedicada à

teclado. Além disso, os links devem ser palavras ou expressões

acessibilidade e oferece uma grande variedade de

e, ainda, deve-se evitar a utilização de muitos frames, que

informações, como especificações dos padrões, informações

tornam a navegação confusa para o leitor de telas (no caso dos

sobre os produtos usados pelas pessoas com deficiência,

deficientes visuais);

ferramentas, white papers (artigos técnicos), como criar um

:: quanto ao texto, deve-se utilizar a pontuação para aumentar

site acessível, como validar um site acessível, modelos de

a legibilidade. Os leitores de tela utilizam a pontuação para

acessibilidade, aplicações de exemplo, estudos de casos e

modular o tom e o ritmo da leitura. Por exemplo, uma vírgula

muito mais.

causa pausa. Além disso, a utilização de siglas e abreviações deve ser sinalizada.

www.macromedia.com/macromedia/accessibility/ technologies.html Ainda no site da Macromedia, há esta página que apresenta uma descrição mais detalhada para qual tipo de deficiência alguns softwares foram projetados, como funcionam e quais são os impactos no desenvolvimento de sites/sistemas.

Livros sobre o assunto: www.microsoft.com/enable :: Usabilidade na web - Criando portais mais acessíveis.

Site da Microsoft sobre acessibilidade digital.

Claudia Dias. Editora Alta Books www.prodam.sp.gov.br/acess :: Beyond ALT Text: Making the Web Easy to Use for Users

O site da Prodam/SP possui uma área com dicas sobre

With Disabilities -Jakob Nielsen. <www.useit.com>

acessibilidade digital.

:: How to Conduct Usability Evaluations for Accessibility

www.tetrapak.com.br

Methodology Guidelines for Testing Websites and Intranets

Como exemplo de site acessível para navegação com leitor

With Users Who Use Assistive Technology. <www.useit.com>

de telas , uma boa dica é o novo site da Tetra Pak, desenvolvido pela agência Eyedea (www.eyedea.com.br).

:: Constructing accessible Websites. Jim et al Thatcher.

Glasshaus.

www.w3c.org As especificações de acessibilidade podem ser obtidas no site

:: Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests. Jeffrey Rubin. John Wiley & Sons.

52 52

do W3C.

53

tutorial

Álbum Digital - Parte I

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

Olá Pessoal! Nesta matéria nós vamos aprender como criar um álbum digital e gravar em DVD. Álbum Digital seria você selecionar todas as fotos que

figura 3

você mais gosta e criar transições entre elas e inserir uma tri-

4- Agora nós vamos jogar todas as imagens para nossa

lha sonora de fundo musical.

Para iniciarmos este projeto, iremos usar o Pinnacle

timeline (linha do tempo). Clique em uma imagem e arraste para baixo na timeline. Veja a figura 4:

Studio 8 em inglês.

1- Clique na opção Show Photos and Frame Grabs (figura 1).

figura 1 figura 4

2- Depois selecione a pasta onde se encontram as imagens .JPG e clique em abrir (figura 2).

OBS: Se você quiser ganhar tempo e não tiver preferência em escolher quais as imagens serão as primeiras, clique na primeira imagem e depois segure a tecla SHIFT e clique na última imagem da sua janela. Feito isso, clique e arraste para a timeline. Veja um exemplo abaixo: Figura 5 - Seleção com a tecla SHIFT. Perceba que todas as imagens ficam com uma moldura azul.

figura 2

3- Pronto! Todas as nossas imagens já estão carregadas.

Veja na figura 3. figura 5

54

tutorial Figura 6 - Arrastar todas as imagens selecionadas para a

7- Clique e arraste vários efeitos para cima de cada

timeline. Veja que todas as imagens se posicionam automatica-

imagem. Perceba que as transições irão ficando entre as ima-

mente ao arrastar.

gens (figura 9).

figura 9

8- Agora teremos que salvar o nosso projeto. Selecione o figura 6

menu File / Save Project (figura 10).

5- Feito isso, iremos criar os efeitos de transições, portanto clique na opção Show transitions (figura 7).

figura 10

Pronto! Nosso projeto esta quase pronto, porém está figura 7

faltando inserir uma trilha sonora. Na próxima edição iremos aprender como converter uma música de CD para MP3 e apli-

6- Em Show transitions nós temos diversos tipos de efeitos. Para que você não perca tempo em um trabalho como

carmos em nosso projeto Álbum Digital.

Um grande abraço.

esse, é importante que você escolha qualquer um dos efeitos e vá aplicando na timeline. Se ficar se preocupando com as transições irá perder tempo e hoje tempo é dinheiro. Não se preocupe, porque todos os efeitos são muito legais.

OBS: Caso queira realmente visualizar todos os tipos de transições primeiro, apenas clique na transição desejada e visualize o efeito na janela de visualização.

Exemplo:

figura 8

55

56

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

Sopa de letrinhas Por vezes, dizer que o webwriter lida com o universo da Informação na web é muito vago.

Afinal, em que caixas o texto, a imagem, a animação, o ícone e tantos outros elementos informativos da mídia digital moram de fato dentro de um campo tão amplo?

Definir estes espaços é a grande dificuldade para os profissionais do webwriting e não sem motivo. Conceitos como portal, hotsite e até mesmo site se misturam e provocam tantas dúvidas que acabam por interferir no resultado final da boa distribuição da Informação. Como adaptar um material para um hotsite, se não está claro para um produtor de conteúdo online a diferença entre hotsite e minisite?

Já ficou para trás o tempo em que havia resistência do mercado brasileiro de internet em criar definições para estes termos simplesmente porque alguns deles eram tentativas de anglicismo e, outros, pura afetação . O que seria simples de entender, tornava-se sânscrito, só porque alguns apontavam tudo como frescura .

Fato é que, em pleno 2005, o profissional que não sabe identificar cada um dos espaços de Informação na web não só se arrisca em prejudicar o resultado final do seu trabalho, como fica perdido ao tentar destrinchar livros e sites sobre o mercado da internet, além de não ter condições de participar de fóruns na área.

Caso você ainda se sinta vítima indireta deste preconceito bobo, nada melhor que pôr os pingos nos is . Abaixo, há definições bem claras dos principais espaços de Informação, e como é seu comportamento em cada um deles: Site Como espaço básico da Informação, o website tem como principal objetivo organizá-la, estruturando uma hierarquia para que todo o conteúdo seja entendido e acessado com facilidade. A alma de um site é sua arquitetura de informação, ciência que tem séculos de vida e nasceu da primeira grande experiência do ser humano em organizar seu conhecimento adquirido e documentado a biblioteca. Um website nada mais é que um grande arquivo. Se estiver bem organizado, encontra-se facilmente a Informação, e o objetivo final foi alcançado.

Portal Não, portal não é um site grande . A diferença é que portal tem 100% do foco nos seus públicos, e cria conteúdos específicos para eles, os chamados conteúdos verticais . Além disso, um portal possui ferramentas que constroem um real relacionamento entre quem produz e que consome a Informação, como fóruns bem conduzidos e compilados, pesquisas online sérias

58

webwriting

Não há dia que não surja um novo termo no universo da web. Como profissionais da área, temos que ficar em dia com as novidades e encará-las com naturalidade

- que vão muito além das enquetes rasteiras e mal aproveitadas -, e chats que promovem a construção de um real Conhecimento, e não são apenas salas de bate-papo. Muitos sites de grandes empresas não incluem nem conteúdos verticais, nem ferramentas de relacionamento, mas ainda assim se dizem

No dia 29 de março, o Bruno estará em São Paulo, na sede da ABA (www.aba.com.br), ministrando um workshop sobre Webwriting & Arquitetura da Informação. Participe!

Para mais informações, ligue (11) 3283-4588.

portais.

Hotsites São áreas de Informação criadas para o lançamento de um produto, o anúncio de um evento ou uma grande promoção.

Ou seja, é um conteúdo com prazo de validade, seja uma semana ou um mês. A quantidade de páginas é pequena, pelas características de conteúdo que um hotsite carrega; o tom, sempre persuasivo; e o visual, diferenciado do restante do site ou portal, abrindo em janela menor.

Minisites Geralmente são morada para os conteúdos verticais produzidos para os portais. Criados para atrair um público específico, os minisites abordam de forma detalhada um tema restrito. Os minisites podem ser fixos ou flutuantes, já que muitos cobrem eventos e, visualmente, comportam-se como os hotsites, com design diferenciado e abrindo em janela menor.

Mas, ao contrário do hotsite, que tem na persuasão o seu norte , o tom do minisite é essencialmente informativo.

Não há dia que não surja um novo termo no universo da web. Como profissionais da área, temos que ficar em dia com as novidades e encará-las com naturalidade, olhando menos para a sua embalagem .

Vamos em frente - e até o próximo mês!

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

Moro num país tropical Quem inventou as férias de janeiro com certeza as tirava em abril. Como posso sobreviver janeiro como freela? Todo mundo se manda. A Ilha de Caras tá lotada de gente, o Brasil está viajando e meu condomínio aumentando. Socorro.

- Alô, por favor, eu poderia falar com o Beltrano?

- Quem deseja?

- Desejo o George Clooney (mas não posso falar isso). Aqui é a Marcela, sou redatora.

- O seu Beltrano está viajando. Só volta depois do carnaval.

Deus, carnaval Marceleza, e eu nem tô com o corpo cheio de purpurina, cadê meu samba enredo, meu camarote, o pessoal da produção? Já vi que vou sambar e não vai ser na avenida.

Minhas contas, meu plano de saúde, meu aluguel, meu celular. Roleta russa. Qual eu pago primeiro? Bem-me-quer, malmequer, bem-me-quer...

Eu esqueci que tem que pular janeiro, que folia. Pô, mas é meu primeiro ano como freela.

Eu não imaginava que a coisa fosse tão braba assim.

Será que vendo os panetones que sobraram do Natal? Sempre compro além da conta.

Atenção, estabelecendo contato com autocontrole. Respiro fundo.

Então, eu devia ter me planejado melhor. É eu devia. O pior do mês de janeiro é o fevereiro, porque é resultado dele. Nada pra cair? Nem um centavo. A não ser eu, aos pés do meu gerente jurando juros de amor. Ai, essa vida de freela.

Eu tinha algum guardado, mas o carro quebrou. Fora os impostos todos. Devia pular de dezembro pra fevereiro, que me perdoem os que fazem aniversário em janeiro. Hoje eu não tô podendo.

- Alô, por favor, eu poderia falar com o Fulano.

- O Fulano da Silva?

- Esse mesmo.

- Qual sua graça?

Aí que eu morro de rir quando fazem essa pergunta pra mim. Minha graça...(gargalhadas) O Fulano da Silva também estava em alguma praia da Bahia, assim como Cicranos e Fulanos e todos mais que tentei encontrar sem sucesso naquela tarde chuvosa. E como chovia. Acho que vão nascer bolinhas verdes no meu corpo, vou mofar de tanto que chove. Será que vou virar um queijo?

Minha sorte era ter algum guardado pra casos de emergência. E nesse caso, um caso de urgência urgentíssima.

60

bula da Catunda

Piada maior é meu humor - quando me bate aquela sensação desesperadora que nada mais vai dar certo na minha vida, que as calotas polares vão derreter e que a novela das oito vai acabar

Sorte ter a santa reserva de freela . O ideal é ter uma

Piada maior é meu humor - quando me bate aquela sen-

grana guardada para, pelo menos, seis meses de dureza. Mas

sação desesperadora que nada mais vai dar certo na minha

como acumular essa grana é que são elas.

vida, que as calotas polares vão derreter e que a novela das

Mas, mesmo essa instabilidade financeira me parece mais

oito vai acabar. Mas daí, nesse momento México em mim eu

divertida que a tensão atendimento berrando pra ontem e as

dou umas risadas bem altas, quase histéricas e vou escrever

tardes vazias de jobs de outros lugares. Pelo menos eu não

meus textos pro Banheiro Feminino, pro Banana, um livro, falar

fico sofrendo da culpa de estar ganhando pra não fazer nada.

com meus amigos e daí tudo passa.

Não faço nada, mas também não ganho. Acho justo.

É preciso ter coragem, cara de pau e uma grande dose de

O que eu fiz de errado em janeiro?

bom humor pra encarar os altos e baixos dessa vida maluca do

Enrolei pra receber alguns cheques. E quando fui recebê-

freelar , mas vale a pena. Eu recomendo.

los a moçada tinha puxado o carro alegórico pré-carnaval.

E aí, topas uma tranca?

Foi bom porque agora eu aprendi que não dá pra deixar pra receber em janeiro. Pelo menos em alguns lugares.

Tem um cheque meu em uma produtora que falta um dos sócios assinar. Cada hora é um que viaja e não assina. Já falei pro cara do financeiro que posso receber em dinheiro, que não me importo. Mas acho que ele não entendeu a piada.

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

Bullshit Generator de-activator Saudade do Renato. Demos muitas risadas juntos.

Uma vez chamaram o Renato. Já era a enésima vez que o layout batia e voltava.

Nossos chefes disseram: O cliente está perdendo a paciência.

Renato alegou: Não entendo nada de siderúrgicas, não tenho como criar.

Nossos chefes argumentaram: Crie algo do nada, oras!

Renato contra-argumentou: Meu nada não inclui siderúrgicas.

Saudades do rapaz. Virou DJ. Difícil encontrar gente assim tão franca. No nosso ramo, a resposta default é Fazemos! .

Você chama um fornecedor X e pergunta: - Vocês fazem criação? Fazemos!

- Vocês fazem conteúdo pra e-learning? Fazemos!

- Vocês fazem integração de sistemas legacy? Fazemos!

- Newsletters? E-commerce? Business Intelligence? Shiatsu? Feng-shui? Fazemos!

A resposta é quase sempre a mesma, e o que vem depois idem: o cara promete que entrega, sai desesperado procurando um jeito de fazer, se atrapalha todo e faz... mal feito. Ou não faz nada, e adeus prazos. É questão de tempo, só.

(Aliás... eis uma definição alternativa de Mentira: é uma verdade com prazo de validade bem curtinho.)

Quando eu comecei nesse ofício, justamente na época que conheci Renato, eu tinha certeza de que os embromadores, os picaretas, os malandros estavam com os dias contados. Na nova era da transparência, da integração, da informação compartilhada, haveria cada vez menos espaço para bullshitagem.

Well, o mundo realmente mudou, o digimundo cresceu, e a malandragem, de tão malandra que é, se adaptou rapidinho. Continua tão difícil quanto antes distinguir quem realmente entrega dos bullshiteiros de plantão.

Ontem mesmo uma amiga me ligou, desabafando: como é difícil escolher fornecedores no mercado! . Concordei.

Que tipo de fornecedor ela estava procurando? Um Da Vinci do flash? Um Matisse do webdesign? Um Hemingway do webwriting? Gênios?

Não. Ela precisava de um fornecedor com qualidade constante, processos, solidez e preços decentes. E, sobretudo, transparência. Gente que tivesse a coragem de, ao ouvir vocês integram nossos sistemas a web , tivessem a decência de dizer não temos experiência com isso, não é nosso foco .

62

marketing

A resposta é quase sempre a mesma, e o que vem depois idem: o cara promete que entrega, sai desesperado procurando um jeito de fazer, se atrapalha todo e faz... mal feito

Ou que, ao ouvir a pergunta se eu precisar de

aprofundar no que sei quanto a mapear o que ainda

1 0 m i n i s i t e s em vez d e u m , v o c ê s t ê m c o m o e n t r e -

n ã o c o n h e ç o . É uma corrida sem fim, haja perna, mas a

g a r ? , t i v e s s e a h o n e s t i d a d e d e d i z e r n ã o t e m o s r e -

longo prazo faz um mundo de diferença.

cursos humanos e materiais pra isso tudo, teremos que expandir nossa equipe e isso pode impactar pra-

Que bom que mentira tem perna curta. Sobretudo no digimundo.

z o e c u s t o s .

Ou que, ao ouvir o pedido precisamos disso em seis meses, vocês entregam? , tenha a hombridade de dizer temos um processo de quality assurance do qual não abrimos mão, e com esse prazo é inviáv el .

Onde quero chegar com esses exemplos todos? A um ponto só: transparência, honestidade, profissionalismo e humildade são hoje tão importantes quanto brilhantismo ou competência extraordinária.

Aquele legado publicitário que tanto influenciou o nosso métier nos seus primórdios, todo o glamour e todo o discurso sedutor e a pirotecnia e as apresentações mirabolantes... tudo isso até abre portas, mas não fecha mais negócio. Não com clientes escolados.

(Eu tinha no meu palm uma versão genial do Web E c o n o m y B u l l s h i t G e n e r a t o r, h t t p : / / w w w. d a c k . c o m / w e b / b u l l s h i t . h t m l , que gera randomicamente pérolas como drive interactive schemas / innovate back-end convergence / cultivate impactful solutions / expedite vertical solutions / integrate scalable e-services / facilitate dynamic action-items e por aí vai... Acho que muitas das propostas em Powerpoint que já vi usaram o tal do Bullshit Generator.)

Eu sou honestíssimo: quando não sei, digo que n ã o s e i . Q u a n d o n ã o p o s s o e n t r e g a r, n ã o p r o m e t o .

Quando eu erro, assumo. Dedico tanto esforço a me

63

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

Estética o que é beleza afinal?

Todos concordam que a fórmula ideal para o desenvolvimento de um projeto de interface se faz com o equilíbrio entre conhecimento e estética. Além de aspectos como arquitetura da informação, usabilidade, navegabilidade e conteúdo consistente, importantíssimos nestes projetos, sabemos que a estética - o tratamento gráfico desempenha um papel extremamente importante.

De fato, a questão sobre o que é ou não belo influencia diretamente muitos aspectos de nossa vida. Em seu livro O que é Belo? , Gábor Paál tenta localizar este conceito em meio à estética e ao conhecimento.

Enquanto os filósofos a relacionam principalmente com a arte e os psicólogos a vêem como pura sensação de prazer, para o leigo estética é pura questão de gosto.

A biologia evolutiva explica que os ideais de beleza , pela vantagem seletiva que proporcionam, ficaram programados de algum modo em nosso patrimônio genético. É fato comprovado que as pessoas acham mais agradáveis regiões fluviais e lugares com vegetação verde e exuberante que desertos e montanhas escarpadas. Para nossos antepassados, viver naquelas áreas representava uma vantagem, pela facilidade de conseguir alimento e água e porque ofereciam defesa contra seus inimigos.

A psicologia experimental, por sua vez, deu origem também ao chamado campo da estética informacional. Pesquisadores demonstraram serem os padrões gráficos os que estimulam a capacidade investigativa do observador, isto é, aqueles capazes de despertar sua curiosidade.

Equilíbrio parece ser a palavra chave quando o assunto é estética. Figuras muito simples são monótonas; as muito complexas surgem como uma massa confusa que não desperta interesse. As figuras consideradas mais atraentes pela maioria das pessoas têm exatamente o nível de complexidade capaz de produzir no aparelho perceptivo estruturas de ordem superior, também chamadas de supersignos .

Ou seja, um padrão dotado de beleza é caracterizado por um ótimo grau de densidade informacional.

Entretanto, não faz sentido separar a cognição e a emoção na experiência estética. Aquilo que nós consideramos belo não é sempre racional, embora a pura racionalidade possa ser muito bela. Mas uma coisa é certa, a eficiência e a elegância estão extremamente ligadas.

Vamos pensar agora em um objeto estético de qualquer espécie - uma interface, uma escultura, uma teoria científica, uma paisagem - apenas como um modelo formado por elementos individuais relacionados entre si.

64

criação

Pensamentos e objetos adquirem valor estético quando nos tocam pessoalmente, nos emocionam, refletem algo de nós, quando nos identificamos com eles de alguma forma

A questão é: como deve estar arranjado esse modelo, como devemos percebê-lo, para julgá-lo belo?

4. Estética elementar. Esta é a categoria que melhor corresponde à concepção da beleza como experiência sensorial e

Com este procedimento, praticamente todos os fenômenos

sensação de prazer. Nossa preferência por sons harmônicos, pai-

de experiência estética descritos pela psicologia experimental

sagens fluviais, rostos simétricos ou corpos bem moldados faz

podem ser classificados em quatro categorias:

parte desta categoria. A característica central das teorias da

1. Beleza do primeiro tipo. Surge das relações dos ele-

estética elementar é que os objetos não possuem nenhum cará-

mentos no interior de um modelo. Essas propriedades são a coe-

ter simbólico adicional. Uma rosa, nesse aspecto, é realmente

rência, a simetria, o equilíbrio, a clareza, a simplicidade, a harmo-

uma rosa, não um sinal de afeto, nem um símbolo romântico, nem

nia, a elegância, a unidade, a continuidade e - talvez o mais im-

uma metáfora para o florescimento e a decadência.

portante - a adequação. Descrevem um certo tipo de ordem no interior de um modelo.

2. Beleza do segundo tipo. Refere-se menos a um objeto e mais a uma relação pessoal entre o objeto e quem o contem-

Estas quatro categorias nos ajudam a descrever as sensações estéticas em toda sua amplitude e, ao mesmo tempo em que nos fornecem uma nomenclatura para valores de beleza, deixam espaço para preferências individuais.

pla. Ou seja, ligação, familiaridade, confiança, empatia, ou a

Este sistema de classificação dos valores estéticos tem tam-

possibilidade de participar pessoalmente de algo. Pensamentos e

bém uma utilidade prática para todos os que lidam com a produção

objetos adquirem valor estético quando nos tocam pessoalmen-

e divulgação de conhecimentos. Designers, artistas, jornalistas, pu-

te, nos emocionam, quando refletem algo de nós, quando nos

blicitários, pedagogos ou cientistas podem e devem levar em conta

identificamos com eles de alguma forma, ou projetamos neles

os valores estéticos fundamentais,

nossos pensamentos e emoções. A beleza do segundo tipo está

de forma consciente ou pura-

na base de fenômenos tão distintos como a simpatia, a sensação

mente intuitiva.

de pertencer a um lugar e também nossa predileção por teorias e idéias de acordo com nossa visão de mundo. Além disso, não é simplesmente a familiaridade que produz o valor estético, mas uma particular mistura do novo e do familiar.

3. Beleza do terceiro tipo. Os critérios de beleza são estímulo, excitação, novidade, complexidade, mas também criatividade. É belo sentir-se criativo. A beleza não refere apenas a objetos, mas também a ações. Pode ser belo fazer novas descobertas, produzir arte, escrever livros, ou expressar as próprias idéias. A beleza dessas ações não depende tanto de o objeto produzido ter sido belo: a questão mais importante é se lidar com esse objeto foi uma experiência estimulante.

65

66