Está aqui

Visão Diferente - blog de jfilipe

O desafio de criar sites animados sem flash

por jfilipe

[Artigo do Leitor] O desafio de criar sites animados sem flash
(13)

Um dos meus últimos trabalhos como web designer foi realmente desafiador: um site voltado ao público de moda. Basta uma rápida pesquisa no Google para descobrir que a tecnologia da Adobe domina este nicho do mercado. Música de fundo, carregadores animados, imagens que aparecem do nada, menus que dançam… enfim.

Este cliente em particular não fez exigências tecnológicas e acredito que nem se apegue à elas, nem mesmo as conheça. Simplesmente queria um site bonito e animado. Depois de cogitar a compra de ferramentas para desenvolver em flash, resolvi ir a luta e encarar de frente o futuro. Graças aos deuses da web a Apple está do nosso lado e nos dá um aval bastante forte à nossa escolha, pois o IPad, por exemplo, não suporta flash de fábrica.

Desenvolver um site animado com javascript e html não é tão complicado. Temos ferramentas ótimas que facilitam muito o trabalho, como o JQuery. O maior problema, na minha opinião, é a compatibilidade entre os navegadores. Aliás, entre os navegadores decentes e o Internet Explorer. Eu tive que abandonar a idéia de fundos transparentes pois versões antigas do IE (e ainda muito utilizadas) não suportam PNG transparente decentemente. Entre os demais, tudo funciona bem.

A rotina era: desenvolver com Chrome e testar no IE e cortar o que não funciona. Desenvolvo no Chrome porque ele oferece ótimas ferramentas de debugging nativas. No final acabei com um conjunto de idéias bem interessantes e que não prejudicaram o resultado final. E, principalmente, o cliente adorou.

O JQuery foi o pilar do projeto. Utilizei vários plugins para dar vida ao conteúdo do site. Para a música de fundo, utilizei o ótimo plugin JPlayer, que suporta tocar tanto via tag quanto via flash, e escolhe o melhor automaticamente, dependendo da configuração do visitante. A página de carregamento, muito semelhante ao que vemos em sites em flash, foi conseguida com a ajuda do plugin queryLoader. Ele vasculha as imagens do site e as carrega automaticamente logo no início, chamando um callback após tudo ser carregado. Para o mostruário da coleção, usei o plugin SmoothDivScroll, que suporta navegação com o scroll do mouse. Excelente!

Vale mencionar também o excelente plugin (apesar de extremamente simples) HashChange, do Ben Alman. Com ele consigo links para pontos específicos do site, mesmo ele inteiro sendo apenas uma página html. Assim eu consigo, por exemplo, passar para alguém um link direto para o mostruário da coleção. Este comportamento também habilita a utilização dos botões de navegação dos navegadores.

E, claro, tudo isso grudado um no outro por várias linhas de código javascript. Essa, pra mim, é a parte mais divertida.

O resultado desta experiência foi gratificante. Um site dessa natureza escrito sem flash é raridade e precisa ser divulgado para que mais desenvolvedores decidam fazer o mesmo. Mesmo pequena, esta é a minha contribuição.

Você pode ver o projeto em www.gabriellabraga.com.br.

Abraço a todos e até a próxima.

Por: Paulo Brito

Fonte:
http://carreirasolo.org/inspiracao/artigo-do-leitor-o-desafio-de-criar-s...

Comentários

Olá Filipe,

Penso que colocaste este texto no Lerparaver porque se tem falado que o flash tem sérios problemas de acessibilidade, e esta seria uma página que tentou evitar o flash. O problema é que esta página é na realidade bastante inacessível, mais do que muitas páginas com flash! Qualquer validador dá nota bem negativa, mas basta dizer que nem todos os leitores de ecrã conseguem tirar algum partido da página e os que conseguem apenas conseguem aceder a parte do conteúdo. Não basta não ter flash para que a página seja acessível. Muitas técnicas de AJAX também o são. Além disso, o texto não refere nunca que houve qualquer preocupação com acessibilidade. O flash deverá ser substituído por técnicas acessíveis, e espera-se que o HTML 5 venha dar alguma ajuda.

Olá Daniel !

Este texto, não era para demonstrar q o site que eles colocaram de demonstração seja acessível, mas sim no sentido, que realmente se tá a dar os primeiros passos efectivos no sentido de perceber finalmente q o flash é inacessível, e que existem outras alternativas para tornar o site elegante, interactivo e atraente ... !

O Flash, principalmente nos jogos da zynga é demasiado pesado, e por vezes torna a máquina temporáriamente lenta ... ! :-(

Eu penso q o futuro será o recurso ao HTML5 e JavaScript, e vamos acreditar q sejam efectivamente mais acessíveis ... !
Abraços

Olá Filipe.
Compreendo a intenção do texto, mas, como diz o Daniel, este não é o caminho.
De fato o Flash morreu, aliás isso já foi definido pela Adob, já faleceu na nova versão do Android, como já tinha falecido, melhor, nunca tinha nascido, no iOS.
E agora morrerá progressivamente nos browsers para pc, tanto mais que a Microsoft já fez saber que o IE10 não terá suporte ao Flash.
Agora coloca-se a questão, e que alternativas?
Ao que tudo indica, a alternativa será o HTML 5. Fácil, universal, leve e acessível.

Olá !

O HTML 5 já tem sido incluido nas recentes versões do Firefox, e do Chrome, portanto estes dois browsers já tão preparados ! loool
Eu penso q o sucessor do Flash será de facto o HTML 5, que tal como dizes é leve, universal, acessível .... !
Já começam a haver as primeiras aplicações em HTML 5, mas ainda são poucas !

Claro q a preocupação com a acessibilidade deve tar sempre presente !
Abraços