Tutorial sobre el uso de sIFR

Introducción

A la hora de diseñar un sitio web, tal vez nos gustaría usar tipografías distintas a las “clásicas”; pero nos vemos limitados a hacerlo, porque si usamos las fuentes que queremos, debemos esperar que todos los visitantes de nuestro sitio las tengan instaladas, y esta claro que no es muy probable de que esto suceda, y tampoco podemos obligar a quienes navegan nuestro sitio a instalar las fuentes necesarias.

Para intentar salvar este problema, es usual usar imágenes que tengan el texto con la fuente que queremos. Esta solución tiene varios inconvenientes, algunos de ellos son:

1- Sobrecargamos con imágenes nuestras páginas, lo que incrementa el tiempo de descarga de las mismas.

2- Obviamente el usuario no puede seleccionar los textos que se encuentran en las imágenes.

3- Los buscadores no podrán indexar los textos que se encuentran en imágenes.

4- Si para cada texto tenemos que hacer una imagen, el trabajo sea haría bastante tedioso y nuestro sitio seria mas difícil de mantener.

5- Si las imágenes las generamos en forma dinámica (por ej.: con PHP), estaríamos agregando una carga extra en el servidor.

Estos puntos que acabo de nombrar, nos dan un panorama de por que no deberíamos usar imágenes para mostrar textos. Aquí aparece una posible solución a estos inconvenientes llamada sIFR (Scalable Inman Flash Replacement).

sIFR se basa en la utilización de Flash + Javascript + CSS. Utilizando estas tres tecnologías, sIFR logra mostrar texto con cualquier fuente dentro del navegador, y si el mismo no tiene soporte (o esta deshabilitado) de todos modos veremos el texto con la fuentes “clásicas”.

¿Cómo utilizar sIFR en nuestras páginas?

Como dijimos antes, sIFR hace uso de Flash, Javascript y CSS; sin embargo te puedes estar preguntando como se combina todo esto .

Lo primero que debemos decir, es que tendremos que “adaptar” las fuentes de tal forma que sIFR las pueda utilizar. En realidad lo que debemos hacer, es “embeber” la fuente que queremos usar, dentro de un archivo .SWF (Flash). El archivo .SWF además de la fuente en si, contiene código escrito en actionscript que se encarga de generar el texto.

Para generar este archivo .SWF, lo mas simple es usar alguna herramienta que haga el trabajo por nosotros, sobre todo si no tienes o no quieres comprar una licencia de Flash sólo para crear estos archivos. La herramienta que te recomiendo se llama sIFR Generator, y es una aplicación web, donde podemos cargar la fuente que necesitamos y nos genera automáticamente el archivo .SWF listo para usar en nuestra página con sIFR.

Convirtiendo fuentes true type (.ttf) a .SWF (con sIFR Generator)

Utilizar el servicio que nos ofrece sIFR Generator hace realmente muy sencilla la tarea de generar el archivo .SWF para que lo podamos utilizar con sIFR. Haz click AQUÍ para ingresar al asistente.
El primer paso es subir el archivo .ttf que queremos usar; para esto pulsamos el botón “Examinar”, elegimos el archivo y pulsamos el botón “NEXT >>”

En el segundo paso, debemos elegir para que versión de sIFR queremos que el asistente nos genere el archivo .SWF. La versión estable de sIFR es la 2, pero existe una tercera version que se encuentra en desarrollo. Mas allá de que la versión 3 tenga mas opciones, por el momento es conveniente trabajar con la 2 para evitar problemas. Dicho esto, seleccionamos "sIFR 2" y pulsamos "NEXT>>".

En el tercer paso, debemos seleccionar que set de caracteres queremos embeber dentro del archivo Flash. El asistente nos permite elegir si queremos “sólo caracteres en minúsculas y mayúsculas”, o “lo anterior, mas los números y algunos caracteres comunes (como @!#$%^)” o bien “todos los caracteres que se encuentran en el archivo de la fuente”. El asistente también nos advierte que cuantos mas caracteres incluya el archivo .SWF, mas “pesado” sera ést,e y por tanto deberíamos usar la opción que mas se adapte a nuestra necesidad en particular. En este caso vamos a utilizar la opción predeterminada (a modo de ejemplo).

Antes de pasar al cuarto paso, debemos “demostrar” que somos una persona y no un bot, para lo que solo debemos escribir el texto verificador y pulsamos “NEXT>>”.

Una vez en el cuarto paso, el asistente nos muestra una vista previa de la fuente.

Si todo esta bien, pulsamos “NEXT>>” y descargamos el archivo .SWF generado por el asistente.


Si quisiéramos usar otras fuentes, hacemos click en el link “Start the Wizard again”, y repetimos los pasos.
Con esto ya tenemos la primera parte del trabajo terminada, ahora veremos como hacer para utilizar el archivo que acabamos de generar.

Utilizando el archivo .SWF

Ahora que ya generamos el archivo SWF, es hora de hacer algo con este. Antes de seguir debemos descargar sIFR desde AQUÍ.
Una vez que hayas bajado sIFR, lo deberás descomprimir con tu herramienta favorita. Dentro de la carpeta descomprimida, hay varios archivos, pero sólo usaremos 3:

• sifr.js
• sIFR-screen.css
• sIFR-print.css

El resto de los archivos son de ejemplo, excepto el archivo sifr.fla, que es el archivo que deberíamos usar como base para generar el archivo .SWF en forma manual, pero en nuestro caso ya lo hicimos con sIFR Generator, así que no lo vamos a necesitar.

Dentro de la carpeta donde tienes tu sitio web, creá una carpeta llamada CSS y otra llamada JS. Mueve el archivo sifr.js en la carpeta JS, y los archivos sIFR-screen.css y sIFR-print.css en la carpeta CSS. Esto no es un requisito que nos ponga sIFR, pero nos da una cierta organización, y tambien te coincidirán las rutas con las del ejemplo que veremos. Si no queres crear estas carpetas, puedes usar otra organización que se acomode mejor a tu forma de trabajo. Al momento, la estructura te debería quedar mas o menos así:

Para terminar de organizar los archivos, nos falta crear dentro del árbol del proyecto, un carpeta donde guardar los archivos .SWF que creamos antes. Para esto procedemos a crear la carpeta “Fonts” y copiamos todas las fuentes convertidas dentro de esta. La estructura de archivos quedaría así:


Para continuar, vamos a crear una pequeña página (X)HTML de ejemplo (la guardamos dentro de la carpeta raíz del proyecto). La página, en principio no tendrá nada especial, de hecho podrías usar alguna que tengan ya creada. El código es el siguiente:

<html>

<head>

<title>Probando sIFR</title>

</head>

<body>

<h1>Página de prueba</h1>

<p>Un párrafo</p>

<p>Otro párrafo</p>

</body>

</html>

El resultado en el navegador sera este:


Ahora procedemos a llamar a los archivos propios de sIFR que organizamos en las carpetas que creamos. Las llamadas las debemos hacer desde la sección <head> de la página:

<html>

<head>

<title>Probando sIFR</title>

  <script src="js/sifr.js" type="text/javascript"></script>

  <link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen"/>

  <link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print"/>

</head>

<body>

<h1>Página de prueba</h1>

<p>Un párrafo</p>

<p>Otro párrafo</p>

</body>

</html>

Ahora nos queda hacer el reemplazo de las fuentes “normales” por las que generamos con sIFR Generator. Para esto simplemente debemos hacer uso de un poco de javascript. Imaginemos que queremos reemplazar la fuente del <h1> por una de las fuentes que guardamos en la carpeta Fonts que se encuentra en formato .SWF. Para hacerlo, debemos agregar el codigo que se encuentra en negrita:

<html>

<head>

<title>Probando sIFR</title>

  <script src="js/sifr.js" type="text/javascript"></script>

  <link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen"/>

  <link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print"/>

</head>

<body>

<h1>Página de prueba</h1>

<p>Un párrafo</p>

<p>Otro párrafo</p>


  <script type="text/javascript">

   if(typeof sIFR == "function")
   {
    sIFR.replaceElement("h1", named({sFlashSrc: "fonts/freeserifbolditalic.swf"}));
   }

  </script>

</body>

</html>

Así se vería la misma página de antes, pero haciendo uso de sIFR:



Como vemos, la fuente del <h1> ha sido reemplazada.

Analizando el código

El código que hace las llamadas para el reemplazo de fuentes puede estar en cualquier parte de la página, pero se suele poner dentro del <head> o antes de la etiqueta </body>. En el ejemplo, lo ubicamos antes del fin del body.

Si la versión de Flash o el navegador no es adecuado para utilizar sIFR; Javascript verá a la “palabra” sIFR como un objeto, de lo contrario la “palabra” sIFR será una función, y esto es precisamente lo primero que debemos chequear antes de hacer el reemplazo de fuentes.

<script type="text/javascript">

if(typeof sIFR == "function")

{

...

}

</script>

La función que hace el reemplazo en si, es sIFR.replaceElement(), la cual llevará a cabo su tarea según los parámetros que le enviemos. La función tiene sólo dos parámetros.

1- El primer parámetro es el llamado “sSelector” y es donde especificamos el o los elementos que queremos reemplazar, lo cual lo hacemos mediante un selector CSS, pudiendo ser algo tan simple como un tag html como el que usamos en el ejemplo (<h1>), un elemento con un id concreto (#elemento), una clase (.clase) o un selector mas complejo del tipo "ul#lista>li>ul>li" (en otro tutorial veremos con mas detalle el tema de los selectores CSS)

2- El segundo parámetro es una combinación de opciones separadas por coma (,). Las opciones que podemos combinar son las siguientes:

sFlashSrc: especifica la ruta al archivo .swf por el cual queremos reemplazar la fuente original de los elementos especificados en el primer parámetro. Esta opción es la única obligatoria.

sColor: es el color del texto reemplazado.

sBgColor: es el color de fondo del texto reemplazado.

sLinkColor: es el color de los enlaces.

sHoverColor: es el color del texto de los enlaces al pasar el mouse por encima de ellos.

IMPORTANTE: Todos los colores los debemos escribir en hexadecimal.

nPadding[Top | Bottom | Right | Left] : Aquí podemos especificar el padding que tendrán los elementos a reemplazar. En realidad esta no es una sola opción sino cuatro: nPaddingTop (padding de arriba), nPaddingBottom (padding de abajo), nPaddingRight (padding derecho) y nPaddingLeft (padding izquierdo).

sFlashVars: este parámetro nos permite establecer valores para las variables de los archivos .SWF. Las opciones posibles son: textalign, offsetleft, offsettop y underline. Estas opciones deben ser pasadas concatenandolas con un ampersand (&). Ejemplo:

sIFR.replaceElement(".otro_parrafo", named({sFlashSrc: "fonts/freeserifbolditalic.swf", sColor:"#22cc99", sFlashVars: "underline=true&textalign=center"}));

sWmode: Si especificamos “transparent” en este parámetro tendremos fondo transparente para los textos reemplazados, pero esta opción no funcionan en algunos navegadores (Opera por ejemplo). Su valor por defecto es "opaque", con lo cual mostrara un color solido de fondo.

sCase: Este parámetro nos permite convertir el texto a mayúsculas o minúsculas (Los valores posibles son "upper" y "lower" respectivamente)

En el ejemplo sólo reemplazamos la fuente del tag <h1>, pero si quisiéramos hacer mas reemplazos de fuentes, solo agregariamos mas lineas llamando a la funcion sIFR.replaceElement(). Veamos un ejemplo donde reemplazamos mas elementos y modificamos los estilos:

<html>

<head>

<title>Probando sIFR</title>

  <script src="js/sifr.js" type="text/javascript"></script>

  <link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen"/>

  <link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print"/>

</head>

<body>

<h1>Página de prueba</h1>

  <p id="un_parrafo" href="#">Un parrafo</p>

  <p class="otro_parrafo">Otro parrafo</p>

  <script type="text/javascript">

   if(typeof sIFR == "function")
   {
    sIFR.replaceElement("h1", named({sFlashSrc: "fonts/freeserifbolditalic.swf"}));
     sIFR.replaceElement("#un_parrafo", named({sFlashSrc: "fonts/freeserifbolditalic.swf", sBgColor:"#ffcc99", sColor:"#ff3300"}));
     sIFR.replaceElement(".otro_parrafo", named({sFlashSrc: "fonts/freeserifbolditalic.swf", sBgColor:"#ff3300", sColor:"#ffcc99"}));
   }

  </script>

</body>

</html>

la página se vería así:

Algunos problemas conocidos

Existen algunos inconvenientes que se pueden presentar al utilizar sIFR.

1- Uno de los problemas mas comunes a la hora de trabajar con sIFR, es que el tamaño de la fuente reemplazada puede ser que no coincida con el tamaño original. Esto generalmente se debe a que las proporciones de la fuentes que estas usando son muy diferentes, por lo que siempre te conviene usar fuentes parecidas en lo que a proporciones se refiere; o puedes “jugar” con los valores del tamaño (font-size) y el espaciado (letter-spacing) desde el CSS, hasta lograr que se aproximen.

Recuerda que si Flash o Javascript no están disponibles (o el navegador no es compatible), el usuario verá los textos sin reemplazar, así que es importante que no cambie mucho el tamaño entre el reemplazado y el original, para que no se arruine el diseño general de las páginas si no se hace el reemplazo.

Esto se debe a que el algoritmo de sIFR 2 no es del todo “potente” en este sentido. Este problema, promete mejorar en la versión 3 de sIFR (como dijimos antes, aún esta en Beta).

2- Otra situación donde puedes tener problemas, es cuando dentro del texto que quieres reemplazar existen enlaces (<a>). La solucion a la hora de trabajar con enlaces (por la naturaleza del algoritmo de sIFR) es poner los enlaces dentro un contenedor, siendo lo mas común usar el tag <span>, y luego reemplazar el texto de los tags <span> y no los del tag <a> directamente. Veamos una ejemplo:

El código (X)HTML:

<span><a href="www.google.com">Ir a Google</a></span>

El código Javascript:

sIFR.replaceElement("span", named({sFlashSrc: "fonts/freeserifbolditalic.swf"}));

3- Otro problema conocido al trabajar con enlaces (por mas que apliquemos el tip explicado en el punto anterior) es que cuando se reemplaza su texto con sIFR, y uno pasa el mouse por encima, no vemos la dirección del enlace en la barra de estado.

4- Al utilizar la opción nPadding[Top | Bottom | Right | Left] es importante que conincidan los valores con los que estan especificados dentro del CSS, de lo contrario el efecto puede desconsertarte bastante.

5- Como ya les he comentado, deben evitar el uso de la opcion sWmode con el valor "transparent"; para no tener problemas con los navegadores que no soportan Flash con transparencia.

Conclusión

Por ultimo, decir que esta técnica debe ser usada con cierto cuidado y sentido común; dado que al hacer uso de Flash, si reemplazaras textos muy largos, la carga de la página se vería afectada drásticamente, así que solo se recomienda para reemplazar encabezados, o cosas muy puntuales.