Erick Souza

O sIFR (Scalable Inman Flash Replacement) é uma técnica que nos permite subistituir elementos de texto por equivalentes em Flash, dando-nos a possibilidade de utilizar qualquer fonte, sem que seja necessário que o usuário as tenha instalada em sua máquina.

Basicamente esta técnica utiliza uma combinação do Adobe Flash, JavaScript e CSS. O sIFR foi criado pelo Mike Davidson, uma versão melhorada do iFR (Inman Flash Replacement), que não permite linhas múltiplas de texto, do Shaun Inman.

Veja o exemplo oficial do sIFR.

O sIFR funciona da seguinte maneira:

1. Uma página comum XHTML é carregada.
2. Um função do JavaScript verifica se o Flash PLayer 6 ou superior esta instalado.
3. Caso o Flash Player ou o JavaScript não sejam detectados, é exbida uma página comum em XHTML e CSS.
4. Se o Flash Player for detectado, o JavaScript procura os elemento a serem substituidos através de tags, ids ou classes.
5. Após verificar os itens, é criado filmes em Flash das mesmas dimensões e estes são posicionas sobre os textos originais.
6. Através do Actionscript em cada filme em Flash, é desenhado o texto que se ajusta ao tamanho do filme.

Este processo é imperceptível ao usuário comum.

A favor

• Texto selecionável, embora a confirmação visual se faça ausente quando selecionado junto com o texto do corpo do documento.
• Não requer alteração alguma no XHTML, todo o processo é realizado pelo Flash, JavaScript e CSS.
• O sIFR é escalonável, e se ajusta ao tamanho de fonte do usuário.
• Compátivel com leitores de tela. Não há relatos de problema algum.
• Não afeta o resultado em sistemas de busca.
• Melhor desempenho em relação há técnicas que utilizam imagens para a substituição, já que no sIFR são necessários apenas um arquivo JavaScript(js) e outro arquivo de filme Flash(swf).
• Fontes suavilizadas (anti-aliased).
• Compátivel com tradutores de páginas, uma vez que no sIFR o Flash consome o texto a partir do XHTML.

Contra

• Em links não exibe o endereço de destino na barra de status.
• Apesar de o sIFR ser escalonável e se ajustar ao tamanho da fonte do usuário, até que a página seja recarregada, o redimensionamente será ignorado. Por outro lado, as técnicas de substituição de imagens não se ajustam ao tamanho da fonte do usuário.
• Utilizar diversas vezes o sIFR em uma mesma página pode prejudicar a velocidade de carregamento, conseqüências do processamento que o JavaScript requer para realizar as substituições.
• Os títulos substituídos pelo filme em Flash, deixam de serem acessíveis pela busca do browser (CTRL+F).

Como usar

1. Baixe o sIFR 2.0.2 release.
2. Abra o arquivo “sIFR.fla”, na biblioteca de um duplo-clique no movieClip “holder”, selecione a caixa de texto e em seguida selecione a fonte a ser instalada, no arquivo os caractéres ingleses já estão incoporados, para habilitar acentuações comuns na língua portuguesa, click no botão “Character” ou “Embed…”, nas propriedades da caixa de texto dinâmico, e como a tecla CTRL precionada seleciona o grupo “Latin I”.
3. “File > Export > Export Movie” e exporte seu arquivo com a seguinte nomenclatura: [nome-da-fonte].swf.
4. Adicione os arquivos “sIFR-print.css, sIFR-screen.css e sifr.js” em sua página.
5. Abaixo um exemplo do código responsável por indicar quais elementos serão substituido, este conteúdo deve ser adicionado ao fim do arquivo “sifr.js”, ou se preferir pode ser adicionado na própria página HTML, no final, antes de fechar a tag body.

   if(sIFR != null && sIFR.replaceElement != null){
   	sIFR.replaceElement("h1", "vandenkeere.swf", "#0000FF", null, null, null, 0, 0, 0, 0, "", "", "");
   	sIFR.replaceElement("#principal h2, #principal h3", "vandenkeere.swf", "#FF0000", null, null, null, 0, 0, 0, 0, "", "", "");
   };

   Os parâmetros são os seguintes:

   sIFR.replaceElement(Seletor, EndereçoFlash, Cor, CorLink, CorLinkHover, Background, PaddingTop, PaddingRight, PaddingBottom, PaddingLeft, FlashVars, Casing, Windowmode);

   Seletor: Elementos a serem substituidos (ex. h1 ou #id ul li h2 ou .classe h3).

   EndereçoFlash: Endereço do arquivo Flash de fontes (ex. vandenkeere.swf).

   Cor: Cor do texto (ex. ‘#FF0000′).

   CorLink: Cor do link (ex. ‘#0000FF’).

   CorLinkHover: Cor do link no estado hover (ex. ‘#CCCCCC’).

   Background: Cor do Plano de fundo (ex. ‘#0066CC’ ou ‘transparent’, o parâmetro ‘transparent’ não é recomedado por apresentar problemas no Opera e em Macs).

   Padding: utilize ‘0′, a menos que tenha atribuído o mesmo valor do elemento no CSS.

   FlashVars: parâmetro especial que nos permite passar informações para o Flash. Exemplos possíveis:

   • textalign=center (texto centralizado na horizontal)
   • offsetLeft=5 (margem de 5pixel na esquerda)
   • offsetTop=5 (margem de 5pixel no topo)
   • underline=true (sublinha links no estado hover)
     Para incluir um ou mais a sintaxe é a seguinte:
     textalign=center&offsetTop=2&offsetLeft=4

   Casing: ‘upper’ ou ‘lower’ trasnforma o texto em maiúsculo ou minusculo. Este parâmetro é opcional.

   Windowmode: ‘transparent’ ou ‘opaque’. Este parâmetro não é necessário, utilize-o caso queira o fundo do filme transparente.

6. Caso seja necessário alterar o tamanho da fonte, basta seguir o exemplo abaixo e adicionar as linhas seguintes em seu CSS:

   .sIFR-hasFlash h1 {
     font-size: 18px !important;
     visibility: hidden;
   }
   

   Rapidamente, antes que a substituição ocorra, o tamanho da fonte é atualizado.

7. Finalizado!

Coclusão

O sIFR ainda necessita de algumas melhorias, mas já é uma solução madura, não prejudica a acessibilidade, e a possibilidade de copiar o texto é um ponto a favor.

Esta técnologia foi projetado para substituição de textos em títulos, onde designers necessitam de fontes específicas, além de poder contar com a suavilização nas fontes (anti-aliased). Vale lembrar que para se utilizar o sIFR são necessários apenas dois arquivos, seja para uma ou milhares de páginas.

Me parece que o sIFR não será mais atualizado, em outubro de 2004, o desenvolvedor, Mike Davidson, manifestou a possíbilidade de corrigir o problema dos links na barra de status, através de uma combinação de FSCommand e JavaScript no blog do Dave Shea, porém, até a data em que escrevo este post, a solução não foi implementada.

UPDATE (26.08.06): Ótimas notícias, o Mike Davidson divulgou o lançamento do sIFR 3.0 alpha, uma das novidades é a possibilidade de se utilizar filtros do Flash 8. Se você quiser testar, vale lembrar que ainda está em fase alpha, até agora a versão 2.0 é a mais indicada.

Mais informações a respeito da versão 3.0 alpha.

Links

• Página Oficial do sIFR.
• Download do sIFR 2.0.2 release.
• Página de exemplo do sIFR.
• CG-FlashyTitles: Plugin para Wordpress que facilita o uso do sIFR.
• Documentação do sIFR.
• Fórum de suporte do sIFR.

This entry was posted on Wednesday, May 17th, 2006 at 23:51 and is filed under Acessibilidade, Flash, Usabilidade. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.