sIFR: Reemplazo dinámico de tipografías con Flash
El universo está lleno de preciosos tipos de letra, lamentablemente el uso de tipografías personalizadas en la web está francamente limitado. No existe un método fiable de garantizar que el usuario ve la tipografía que queremos que vea ya que estamos supeditados a las fuentes que tenga instaladas en su sistema.
Durante muchos años, los diversos navegadores han ido haciendo experimentos con tipografías descargables y artimañas similares pero su implementación es irregular y se hace desaconsejable.
Cuando lo que queremos es utilizar fuentes personalizadas para pequeños detalles en el sitio es francamente simple hacer un reemplazo con imágenes pero, ¿qué pasa cuando necesitamos reemplazar, por ejemplo, los títulos de las entradas de una bitácora? ¿Crearemos uno por uno todos los títulos como imágenes y haremos un reemplazo manual?
sIFR nos sale al rescate para esos momentos, ofreciéndonos una forma dinámica de conseguir encabezados con algo más de estilo.
Contenido:
¿Qué es sIFR?
Las siglas sIFR significan scalable Inman Flash Replacement y se trata de una tecnología que te permite reemplazar elementos de texto con equivalentes en Flash para así poder ofrecer tipografías más variadas en tu página web sin necesidad de que el usuario las tenga instaladas en su máquina.
sIFR reemplaza el texto del elemento que seleccionemos y lo muestra con la tipografía que hayamos escogido. Es importante precisar, sIFR reemplaza el texto no el elemento en si mismo, por tanto el elemento se posiciona y se le da estilo de la forma tradicional, con CSS.
No precisa ningún cambio en el (x)HTML, todo el trabajo se desarrolla por medio de Javascript y se muestra al usuario por medio del plugin de Flash (versión 6 para máxima compatibilidad). Si el usuario no tiene instalado o habilitado el javascript o el plugin de flash, se le mostrará el elemento original, antes de ser reemplazado, con su estilo CSS.
¿Cómo funciona?
Cuando la página es cargada, el Javascript comprueba que el usuario tiene instalado el plugin de Flash y busca las clases o id que le hayamos indicado. Si no está instalado Flash o el Javascript está desactivado, se mostrará la página normal y listo.
Cuando se detecta el Flash, el Javascript inspecciona todo el documento y mide todos los elementos que queremos reemplazar. Una vez medido, el script creará las películas en Flash y las colocará sustituyendo los elementos seleccionados. Dentro de la película se generará un texto de un tamaño mínimo que se irá ampliando para ajustarse al tamaño del elemento reemplazado.
Todo esto de forma transparente al usuario.
Accesibilidad y Compatibilidad
A pesar de que Flash parece un enemigo natural para la Accesibilidad, si se utiliza bien no tiene por qué serlo. Como ya hemos comentado antes, sIFR no hace ninguna modificación en el código (x)HTML de nuestras páginas y los usuarios que no disponen de Flash o Javascript, los lectores de pantalla o, incluso, las arañas de los buscadores reciben la página como fue concebida inicialmente en (x)HTML y CSS, tan accesible como seamos capaces de hacerla.
El texto reemplazado con sIFR puede ser seleccionado y copiado y reacciona igual que el texto normal cuando un usuario hace zoom. Además, también funciona con enlaces (a pesar de que no es lo más recomendable).
sIFR funciona en sistemas Windows, Linux y Mac, siempre que estos dispongan de Flash y Javascript. En cuanto a navegadores, su compatibilidad es mucho más que aceptable funcionando en los tipicos Internet Explorer, Mozilla Firefox y Opera y también en otros como Konqueror, Omniweb, Safari…
No obstante, aunque el usuario navegase con un sistema no compatible no hay problema, la página se mostrará como siempre, con los encabezados controlados por CSS.
Conclusiones
sIFR es una herramienta potente y ligera (el script se carga sólo una vez y si utilizamos sólo un tipo de letra para varias partes también la película Flash carga sólo una vez) que puede beneficiar mucho a nuestros diseños. No obstante, como siempre con el Flash, es recomendable usarla con moderación, en este caso se recomienta utilizarlo sólo para reemplazar encabezados ya que, por ejemplo, el reemplazo de enlaces mediante esta técnica impide a los usuarios realizar acciones tan simples como dar click con el botón derecho sobre ellos.
Ni que decir tiene que se desaconseja el reemplazo de párrafos y textos completos.
Enlaces
sIFR:
http://wiki.novemberborn.net/sifr
Artículos en inglés:
http://www.mikeindustries.com/sifr/
http://usabletype.com/articles/2004/how-and-when-to-use-sifr/
Manual paso a paso en castellano:
http://www.disenorama.com/tutoriales/manual-sifr-paso-a-paso
Otras entradas
Esta entrada fue publicada por Alma Fernández el Thursday, 20 de July de 2006 y está archivada en: (x)HTML, Javascript, Recursos. Puedes dejar un comentario, o enviar un trackback desde tu sitio.
