Otimizando sites em flash com SWFObject e SWFAddress
O post abaixo foi fornecido pelo programador Sandro Silva, ele complementa o artigo “SEO Para Flash – Otimizando Sites Em Flash Com SWFAdress“.
Hoje vamos falar de de duas bibliotecas importantíssimas.
Inicialmente este post é para nível intermediário, assim optei por não indicar a programação direta por classes(evolução natural de desenvolvedor Flash) e usar exemplos e flas fornecidos pelos desenvolvedores das bibliotecas.
SWFObject
A primeira biblioteca que vamos nos centrar é o SWFObject e é em JS (Javascript) e HTML.
Para que serve o SWFObject?
Inicialmente ele vai substituir aquele HTML com Javascript gerado pelo Flash, quando você publica um trabalho e a opção HTML está marcada.
Através do SWFObject temos mais facilidade de passar alguns parâmetros do HTML para o Flash e vice-versa.
Através do SWFObject temos também um mecanismo de inserção do Flash no HTML que é muito amigável ao Google, facilitando a indexação do conteúdo, ou também poderemos mostrar um conteúdo alternativo aos 0,1% daqueles que não tem o FlahsPlayer Instalado no navegador.
E o mais importante: poderemos colocar tags importantes em HTML, sem que isto seja visível para o usuário, sendo apenas visível para o Google!
Vamos ao site do desenvolvedor http://code.google.com/p/swfobject/downloads/list
e vamos baixar a última versão.
A estrutura da pasta que você baixou deve ser a mesma da imagem abaixo:
Veja esta imagem ampliada
Vamos prestar a atenção no arquivo HTML index_dynamic.html é ali que vamos nos centrar incialmente.
Use um editor qualquer para abrir o código fonte ou até mesmo, se você for fodão no HTML, no Notpad.
Você deverá ver algo semlhante a imagem abaixo:
O que vamos alterar aqui?
Na linha 04:
<title>SWFObject 2 dynamic publishing example page</title>
Coloque o título do teu site, conforme você já viu aqui nos posts anteriores de SEO e Flash.
Na linha 06:
<script type=”text/javascript” src=”swfobject.js”></script>
Só mude se você gosta de se organizar e colocar arquivos JS numa pasta específica para arquivos JS.
No meu caso, sempre faço da forma abaixo:
<script type=”text/javascript” src=”_js/swfobject.js”></script>
Na linha 08:
swfobject.embedSWF(“test.swf”, “myContent”, “300”, “120”, “9.0.0”, “expressInstall.swf”);
Aqui já estamos atualizando o Javascript onde:
1º parâmetro “test.swf” -> mude para o swf root do teu site em Flash.
2º parâmetro “myContent” -> é o id da DIV onde abrirá o swf oou conteúdo alternativo para quem não tem o plugin do Flash.
3º parâmetro “300” -> é o width do swf.
4º parâmetro “120” -> é o height do swf.
5º parâmetro “9.0.0” -> é a versão do Flash Player que você compilou seu swf.
6º parâmetro “expressInstall.swf” -> o swfobject permite que você utilize o expressInstall. O expressInstall permite que todo usuário que atualizar o Flash Player, se ele tiver uma versão anterior a usada no teu Flash, ele não precisará sair do teu site para atualizá-lo. Na verdade eu ignoro o expressInstall e deleto esta parte a partir da versão do plugin do Flash.
Com o tempo você verá que poderá adicionar mais parâmetros como Flash Vars e FullScreen.
Agora vamos para parte interessante da coisa :
Na linha 12 temos a DIV cujo id é “myContent”, é nela que vamos trabalhar agora.
Resumidamente faremos um HTML simples sem formatação nenhuma entre as tags <div id=”myContent”> e </div>.
Vamos adicionar inicialmente 4 tags importantes correlacionadas com algumas palavras chaves que funcionarão nesta estrutura:
Vamos apresentar as tags para quem não conhece nada de HTML
<H1></H1>
Esta tag representa o título que vamos dar a um texto.
Exemplo:
<h1>um titulo</h1>
<H2> </H2>
Esta tag representa o subtítulo que vamos dar a um texto.
Exemplo:
<h2>um subtítulo</h2>
<P> </P>
Esta tag representa um paragráfo para nós, onde irá o nosso texto.
Exemplo:
<p>primeiro texto</p>
<STRONG></STRONG>
Esta tag é para dar ênfase a uma parte do texto. Funciona como bold.
Exemplo:
um texto qualquer aqui<strong>seu destaque no texto</strong>
Antes de dar um exemplo prático, vale um comentário:
Note que na linha 13 temos:
<h1>Alternative content</h1>
Fiz um teste e joguei no Google “Alternative content” e a busca me retornou vários e vários websites desenvolvidos em Flash.
Isto aconteceu porque esta é uma das tags mais importantes para SEO e por consequência, busca no Google.
Vamos ao Exemplo:
<h1>Melhor restaurante de São Paulo</h1>
<h2>Frutos do Mar </h2>
<p>O <strong>Restaurante Caribeans</strong> apresenta grande variedades em <strong>frutos do mar</strong>
e um ambiente onde você se sentirá numa ilha.<p>
E já eras! Simples desta maneira!
Você fazendo este HTML, equipara quase com igualdade qualquer site desenvolvido em HTML puro e de qualidade.
Com mais experiência e tempo, você poderá adicionar Links, Imagens e muito mais conteúdo, e fazer uma página completa para aquele 0,1% que não tem Flash Player no navegador.
SWFAddress
A segunda biblioteca foi desenvolvida pela pequena Companhia búlgara Asual: o SWFAddress é de vital importância para qualquer website desenvolvido em Flash.
Através desta importante ferramenta poderemos adicionar nos sites em Flash as seguintes funcionalidades:
- Ter links únicos na URL para todos os links estabelecidos dentro do Flash;
- Possibilidades de favoritar qualquer link do site;
- Facilidade para indicação de qualquer seção do site;
- Colocar páginas do site em Flash dentro do histórico do navegador:
- Navegação pelos menus do navegador (Voltar e Avançar);
- Mudar o título da página para cada link acessado.
Inicialmente visite o site da Asual para baixar a biblioteca e o fla que servirá de base para nosso um pequeno exemplo de execução:
SWFAddress e baixe a versão Download SWFAddress 2.4
Baixe a versão completa com docs, samples e sources ou se você é fodão, baixe só a library em AS3 e JS.
Descompacte o e jogue em algum lugar do teu computador, de preferência naquele que você, profissional organizado, mantém sua extrutura de websites.
Muito do que tem ali não precisaremos, assim acesse direto a pasta “samples” e dentro dela te gruda na pasta “cs3”, é ali que está o ouro!
A estrutura ali deve estar mais ou menos assim:
Se você é um cara experto vai separar tudo por pastas direitinho, colocar as sources longe do que vai ser publicado e os arquivos AS em uma pasta diferente de onde você tem outros arquivos FLAs.
Note também que este pacote já vem com o SWFObject preparado para funcionar conjuntamente com o SWFAddress.
Abra o arquivo website.fla, pois é somente nele que faremos a alteração inicial do SWFAddress.
No primeiro frame temos o preloader as indicações de alinhamento do arquivo.
Você pode alterar conforme necessidade mais tarde.
No segundo frame temos os eventos do SWFAddress. Nos próximos temos eles todos organizados por frames nomeados.
Lógicamente, e entendendo o processo, o SWFAddress será ativado no click de qualquer link, mudará o link dentro do Flash de acordo com os parâmetros do listener do link clicado e após fará a alteração no Javascript do HTML.
Caso você tenha deixado os arquivos SWFAddress.as e SWFAddressEvent.as em pastas separadas, convém direcionar eles corretamente na importação os AS ou na timeline ou nas configurações públicas dentro de Script/Source Path.
Crie um movieclip qualquer no segundo frame e estâncie ele como você bem entender e na action dele faça o seguinte:
onde:
var tituloSite = “seu título de site”;
varíável do SWFAddress onde setaremos o título da página que vamos mudar.
deepLink=’/localacessado/’;
varíável do SWFAddress onde setaremos o nome do frame para onde vamos, ou no caso swf, se você for fazer de outra forma.
SWFAddress.setValue (deepLink);
Chamada da função ASWFAddress com o parâmetro do deepLink.
SWFAddress.setTitle (tituloSite);
Chamada da função SWFAddress com o parâmetro do título da página.
Na timeline (2º frame) você verá somente como abaixo:
Mude somenta na linha 23, onde está var title:String = ‘SWFAddress Website’;
Este será o título inicial do site.
Resumindo:
você chamará a função de alteração de link através de: SWFAddress.setValue (deepLink);
você chamará a função de alteração de nome através de: SWFAddress.setTitle (variável de titulo Site);
No restante, a não ser que você programe diretamente por classes, não altere mais nada.
O que esta action faz é justamente pegar os parâmetros da função que você chamou no seu link e alterar o HTML da página no título e na URL e ir para o frame que você indicou.
Agora vamos dar uma olhadinha em como está o HTML da página que está junto nas pasta:
Note que a estrutura do HTML está semelhante ao visto acima em SWFObject, mudando poucas coisas:, alguns parâmetros e nome de IDs.
Você poderá adicionar mais parâmetros ou retirar alguns, são necessárias algumas mudanças como vimos na parte SWFObject.
Altere na linha 5 onde está <title>SWFAddress Website</title> e mude para um títuilo que você deseja para seu website, este título mudará assim que o Flash for carregado e a função SWFAddress.setTitle (variável de titulo Site); for chamada pela primeira vez.
Você também pode alterar o CSS na medida que você tem conhecimento para isso.
Nada muito complicado agora.
Para você ver isto funcionando, você deverá jogar o conteúdo todo em um servidor interno ou externo.
Colocando no ar você poderá ver a mudança feita no HTML.
A URL inicial de index deverá ser assim, por exemplo:
Veja esta imagem ampliada
a de home assim, por exemplo:
Veja esta imagem ampliada
a de produtos assim, por exemplo:
Veja esta imagem ampliada
Navegando entre um link e outro haverá mudança na tua url e você também poderá voltar e avançar através dos links do navegador.
Também permitirá o usuário de favoritar uma página única do Flash, como por exemplo produtos.
Com um pouco mais de trabalho, você poderá permitir que o usuário indique uma referência de produto, que ele favorite este produto único ou que mande post no Twitter sobre este produto ou publique no mural do Facebook.
A coisa toda, para quem conhece AS3 é bem simples, e jogar isto para classes separadas também é e você poderá, a medida que for entendendo, modificar as ações de chamada, facilitando muito o trabalho.
Adicionando SWFAddress na tua vida você estará contribuindo para melhorar e muito a nossa classe de desenvolvedores, pois muitos não usam e assim desfavorecem a competição com sites em HTML.
Lembre-se: um site bem feito em Flash pode muito bem ser indexado pelo Google em muitos links.
Na próximo post de Flash e SEO veremos sobre a Indexação do Flash pelo Google!
fonte: http://sandrosilva.tumblr.com/post/2969019259/sandrosilva-com-br
Tags: SEO, seo para flash
[...] – Easy SEO Este artigo foi publicado automaticamente via feed Rss, Avalie, vote ou comente Fonte A primeira biblioteca que vamos nos centrar é o SWFObject e é em JS (Javascript) e HTML. [...]
Muito Show Este Post !
Parabéns !
Abraços,
Paulo Roberto Web Design