SWF Object 2

Por: Henrique Pereira

Saturday 18 October 2008 às 21:46

Categoria: Acessibilidade, HTML / CSS / JavaScript

Para quem não se lembra do UFO ou do próprio SWF Object, trata-se do script mais porreta para embedar vídeos em Flash no mundo, sem detonar semântica, acessibilidade, etc. Leia a defesa do upgrade para a versão 2.0 escrita por um dos criadores do script.

O SWFObject funciona assim: se você precisa colocar um objeto em Flash no seu site você usa o script que permite inserir um conteúdo alternativo para os usuários que não possuem o plugin do Flash player instalado. Se você preferir, pode exibir uma solicitação para que o usuário escolha instalar o plugin ou nem isso, basta apenas exibir o link para a fonte do vídeo dentro do conteúdo alternativo.

Se o usuário não tem o javascript ativado, o conteúdo alternativo é exibido automaticamente. Se não há plugin flash player instalado no browser também! Detalhe, também funciona em sites que usam XHTML enviado como application/xhtml+xml e você pode usar o script de forma estática ou dinâmica.

O mais importante nisso tudo é a acessibilidade! Se você possui a transcrição do vídeo que você quer compartilhar, de quebra você pode ainda fazer o Google indexar o conteúdo alternativo referente ao vídeo. Faça um teste aqui no meu blog, desabilite o javascript e/ou o plugin do Flash player do seu browser e veja o que está escrito “debaixo” do vídeo que você está vendo (ou não) logo abaixo. O vídeo do Videolog trata-se do conterrâneo Manoel Lemos que falou um pouco sobre o BlogBlogs no Campus Party 2008. Você precisa assistir.

Comentários: 5

SWFObject e o fim do UFO

Por: Henrique Pereira

Saturday 08 March 2008 às 18:18

Categoria: HTML / CSS / JavaScript, Internet / Web

Para quem não se lembra, o UFO era a biblioteca de javascript para embedar arquivos em Flash mais popular tempos atrás. Era, porque o UFO chegou ao fim, segundo o próprio criador do script, Bobby van der Sluis. Mas ninguém vai ficar órfão nessa história. O UFO só chegou ao fim por causa dos esforços conjuntos em cima do SWFObject, incluindo van der Sluis que também é criador do SWFObject.

Acredito que o SWFObjct, que já está se aproximando de sua versão 2.0, seja a biblioteca de javascript para embedar Flash mais estável e confiável que existe. Eles tem se preocupado muito com acessibilidade, não obstrutividade e markup semântica. Se você costuma embedar vídeos do You Tube, Videolog, etc, nos posts do seu blog, estude a possibilidade de fazer isso usando o SWFObject. Depois você me fala o que achou!

Comentários: 11

swfir – SWF Image Replacement

Por: Henrique Pereira

Wednesday 28 February 2007 às 16:19

Categoria: HTML / CSS / JavaScript, Internet / Web

Alguns caras que trabalham com o Zeldman desenvolveram esta nova técnica que alguns gringos estão falando por ai. Eles a chamaram de swfir (pronuncía-se "suiffer"), ou SWF Image Replacement. O blá blá blá disso ainda está se espalhando enquanto todos pensam se realmente vale a pena usar Flash para contornar algumas limitações naturais do CSS ao se trabalhar com imagens. Eu particularmente não sou fã de Flash e não sei se usaria esta técnica amplamente. De qualquer maneira swfir é uma técnica criativa e interessante.

Ela utiliza CSS, JavaScript e um arquivo swf para aplicar alguns efeitos visuais em qualquer imagen do seu site. O script te fornece alguns parâmetros padrões que te permite rotacionar uma imagen, aplicar bordas arredondadas, dar certa elasticidade etc, sejam em múltiplas imagens ou apenas em uma.

O script e todo o "kit" para aplicar isso é gratuito e pode ser baixado no hotsite que os caras criaram para o swfir. Vale lembrar também que o javascript não é obstrusivo (se desabilitar o javascript do seu browser a imagem fica sem os "efeitos" da técnica) e não é necessário colocar nenhum tag <object> ou qualquer outra coisa relacionada a embedar flash em uma página, tudo é feito pelo javascript.

O que mais me chamou a atenção foi o exemplo da imagem "elástica". Vá até a página de exemplo e aumente o tamanho da fonte pra ver. A imagem acompanha perfeitamente. Agora é só fazer suas próprias experiências…

Comentários: 12

Eu já disse que validação não significa nada?

Por: Henrique Pereira

Thursday 16 March 2006 às 21:04

Categoria: HTML / CSS / JavaScript

Lendo textos e comentários em blogs por aí eu fiquei analisando o que muitas pessoas pensam sobre os web standards. Não é vergonhoso não saber algo que você está aprendendo mas é muito triste ver pessoas ostentar aquilo que não conhecem ou que não sabem nada a respeito. É simplemente amador.

[ UPDATE ]

Achei interessante um post sugerido pelo Alexandre postado hoje (20/03/2006) no Berea Street que diz basicamente o que eu disse aqui. Validity does not equal best practices.

[ /UPDATE ]

Validação não significa nada

Muitas pessoas ficam presas a validação do (X)HTML. Elas associam validação com semântica e cometem o grande erro dos iniciantes. Eu já escrevi sobre isto e basta você rever meus argumentos. Mas semântica não é validação e nunca haverá algum tipo de relação entre elas. O validador da W3C serve para te ajudar a encontrar algum erro de sintaxe que está difícil de achar, serve pra te ajudar a ver se você deixou alguma tag aberta sem fechar mas ele nunca vai te informar se você está usando as tags corretamente nos lugares certos. A validação de um site não mede nunca a competência de um profissional. Se você tem o seu site validado isso não significada nada.

Os pedantes

Pedante é aquela pessoa que possuiu muita “vaidade” na maneira com que fala das coisas, e que acaba de forma arrogante e precipitada ostentando conhecimentos que na verdade não possui. Todos que foram adolescentes um dia sabem o que é isso. Geralmente este comportamento está relacionado com uma necessidade de auto-afirmação, uma necessidade de se impor ideologicamente. O profissional pedante é aquele que vai se apegar a detalhes desnecessários e vai se esquecer do principal. E ainda vai se orgulhar disso: “tenho um site validado em XHTML Strict”. Isso não significa nada.

Muitas vezes vários sites possuem erros de sintaxe por que são alimentados por editores de CMS e por pessoas não especializadas em markup de XHTML. Nada mais natural do que isso. Um site criado sobre padrões semânticos de HTML diz muito mais sobre a qualidade de um trabalho do que se ele é validado ou não. No mundo real, um site seguindo os padrões web e com alguns erros de sintaxe são centenas de vezes mais eficiêntes para os mecanismos de busca, do que um site não semântico mas validado. A razão disso é que o significado das tags é mais importante do que alguns erros de sintaxe. Lembre-se disso.

Seja no HTML ou XHTML erros de sintaxe são completamente ignorados pelos browsers com exceção daqueles relacionados com a estrutura. Diferentemente dos parsers de XML, você pode sustendar centenas de erros de sintaxe e ainda assim ter seu site perfeitamente apresentável nos browsers. Do mesmo modo é possível ter uma verdadeira tag soup no seu código fonte e ainda assim ter seu site validado pela W3C, desde que não tenha erros de sintaxe. Até um site completamente estruturado em tabelas pode ser validado.

No futuro quando tudo na web for servido como xhtml+xml, erros de sintaxe não serão permitido, mas não é uma preocupação que traga alguma dor de cabeça hoje.

A web será 2.0 somente quando ela for uma web semântica

Muitas pessoas estão preocupadas com Web 2.0 porque alguns meses atrás muitos sites (parece que o Gmail foi o carro chefe) começaram a utilizar JavaScript para fazer requisições assíncronas e várias ferramentas colaborativas surgiram e de repente “boom”; todos só falam em Web 2.0. Puro hype do momento.

Pra mim a web será 2.0 quando toda a web for Web semântica, seguindo os padrões RDF, quando tudo tiver o XML como a base de ordem e lei e a interoperabilidade da web for algo que possa facilmente ser servido a vários dispositivos de forma mais a la carte possível. Ficar usando JavaScript obstrusivo e construir coisas que se mexem é tão amador quanto àquele período em que todos colocavam animações feitas em Flash em seus sites e achavam que os dias do HTML estavam contados.

Mas isto tudo sobre uma web semântica ainda está muito longe de se tornar realidade, principalmente considerando que o Internet Explorer 7 não vai suportar o MIME type aplication/xml+xhtml. Quem sabe daqui alguns 6 ou 7 anos a web comece a dar os primeiros passos reais no mundo da web 2.0? Quem sobreviver verá.

Comentários: 25

Dossier: Objetos Flash – Unobtrusive Flash Objects (UFO) v1.0

Por: Henrique Pereira

Wednesday 24 August 2005 às 23:08

Categoria: HTML / CSS / JavaScript

[ATUALIZANDO - 20/07/2010] Versão mais atual do SWF Object 2.0.[/ATUALIZANDO]

[ATUALIZANDO] Se você costumava utilizar este script para embedar Flash no seus sites, saiba que ele ficou obsoleto. Leia meu texto “SWFObject e o fim do UFO” para mais detalhes.[/ATUALIZANDO]

O Script deste artigo pode ser baixado em AQUI e o código de exemplo AQUI.

Inserir objetos Flash nos sites que construímos é sempre uma tentação. Mesmo sabendo que o sistema de indexação de mecanismos de busca não "lê" objetos flash, ainda assim fazemos uso dele em menus, banners e destaques do site. Outro problema decorrido da utilização de objetos flash além da falta de indexação é a limitação do acesso apenas àqueles que possuem o plugin Flash Player instalado na máquina. Apesar de existir diversas soluções para este problema, até hoje eu não encontrei aquela que seria definitiva. Pelo menos até agora!

Antes de migrar para webstandards o padrão para inserção de objetos flash era o seguinte:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="AQUELA URL GRANDE DEMAIS " width="588" height="24">

<param name="movie" value="imagens/Inovando.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<embed src="imagens/Inovando.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="588" height="24"></embed>
</object>

Este código era utilizado na época em que o Internet Explorer reconhecia a tag "object" e ignorava a "embed" e o Netscape fazia o inverso. A existência dos dois browsers no mercado fez com que a maioria de nós procurasse atender aos dois tipos de público/usuários. Com o fim da "guerra dos browsers", tudo pode ser resumido no seguinte código que é interpretado por praticamente por todos os browsers contemporâneos ou posteriores ao Internet Explorer 5.0 / 5.5:


<object type="application/x-shockwave-flash" data="swf/header.swf" width="778" height="129">
<param name="movie" value="swf/header.swf" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
</object>


A tag embed é extinta, apesar de a maioria dos webdesigners continuarem a fazer sites como se fazia no início da década de 90. Utilizando este código, é possível validar o seu XHTML, mas o problema de alguém acessar o seu site e não ter o plugin instalado não está resolvido. Você deve estar se perguntando: Mas daí é só o cara baixar e instalar o plugin certo? A resposta é sim, mas procure ver esta outra solução.

 

Fora este problema da ausência do plugin, eu me deparei com problema. Para movies com tamanhos superiores a 200kb por exemplo, com carregadores internos, o objeto flash começava a exibir o movie após já ter sido carregado 30%, 40% e às vezes até 60%, sem explicação alguma. O que pude observar é que quanto maior era o objeto, mais o carregador demorava para aparecer. Antes do movie começar a ser exibido, geralmente um quadro branco ocupava o lugar, ou quando se utiliza transparência, nada aparecia até que o carregamento já estivesse avançado. Isso pode ser frustrante para a maioria dos usuários que não possuiu uma banda muito larga. Ou seja, seguir os webstandards e deixar os usuários frustrados, ou colocar o código sujo? Ainda não encontrei uma explicação concreta para isto, quem souber explicar e quiser me escrever…

 

No site de Bobby van der Sluis ( http://www.bobbyvandersluis.com/ufo/ ) encontrei o Unobtrusive Flash Objects ( UFO ). UFO é um DOM Script que parte do princípio que se você utiliza flash no seu site, você deve estar preparado para usuários que não possuem o plugin instalado exibindo um conteúdo alternativo para o site. Como um menu em flash e outro em HTML para quem não tiver o plugin. Qual o principal propósito disso? A pessoa pra navegar no seu site pode não querer instalar o plugin, ou por pressa ou falta de conhecimento ela não deve ficar de fora do seu site naquele momento em que ela se interessou em te visitar. Porque, segundo as pesquisas, talvez ela nunca mais volte!

 

Para aplicar o script, proceda da seguinte maneira:

Na tag <head> do seu site você insere o seguinte código:


<script type="text/javascript" src="../ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"../swf/test6.swf", width:"300", height:"120", majorversion:"6", build:"0" };
UFO.create(FO, "ufoDemo");
</script>


A primeira referência, linka o arquivo ufo.js e o seguinte especifica o objeto Flash que você quer inserir.

 

No <body> do HTML, você prepara um conteúdo correspondente alternativo para o seu objeto Flash. Com o mesmo "id" referenciado pelo javaScript acima:


<div id="ufoDemo">
<p>Replacement content</p>
<p>
<a href="http://www.macromedia.com/go/getflashplaye"">
<img src="../img/get_flash_player.gif" alt="Get macromedia Flash Player" style="border: none"" /></a>
</p>
</div>


Quando o usuário entra no site e possuiu o plugin flash player instalado, ele esconde o conteúdo alternativo e exibe o flash, com a grande vantagem de o conteúdo alternativo permanecer no código através de texto ou imagens (devidamente inseridas com "alt" é claro) para serem indexadas pelos mecanismos de busca e como acessíveis a outros tipos de dispositivos como palms, celulares etc que talvez não possuam o flash player instalado.

 

Resultados Finais:

Para quem não possui o plugin, o conteúdo alternativo é exibido normalmente sem nenhuma limitação de navegação. Se você for criativo ela nem perceberá que algo esteja faltando. Os problemas com o carregamento de objetos com carregadores inseridos dentro dos movies se foram e o carregamento ficou perfeito. Foi esta a solução utilizada no Charges para exibição dos objetos Flash. W3C reconhece o código como válido, porque no código fonte o que fica é o conteúdo alternativo, e, além disso, todo o conteúdo é indexado pelos mecanismos de busca, ao contrario do que seria se o objeto flash estivesse na página.

Comentários: 19