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.
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.
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.
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.
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.
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
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
[...] v í a webmasterlibre.com [...]
[...] swfIR pretende ser a las imagenes lo que sIFR es al uso de tipografías no convencionales en nuestros diseños, mediante Javascript y Flash, de forma no intrusiva, nos permite incluir efectos en nuestras imágenes de forma automática. Entre los efectos que nos permite están: [...]
Reemplazo dinámico de imágenes y tipografías para web…
Mediante flash y Javascript podemos editar dinámicamente imágenes en la web con
swfIR: http://www.swfir.com/
Se puede Añadir un borde, Añadir sombras, Rotar imágenes, Bordes redondeados.
Anteriormente salió algo parecido y muy interesante para t…
Feed RSS de los comentarios de este post.
Buenas!
Me he leido el artículo y es muy bueno, a la vez que el método, lo único malo que le veo es que no es recomendable para textos largos. Me podríais recomendar alguno?
Muchas gracias