¿Lo qué? Seguramente muchos ya conocereis sIFR (Scalable Inman Flash Replacement). Para los que no, se trata de un script utilizado para reemplazar elementos de texto en una página web por otros renderizados en Flash que mostrarán el mismo texto.

En esta entrada intentaré explicar cómo implementé sIFR 3 aquí mismo, con algunos ejemplos y demás, así como una serie de cosas a tener en cuenta.

Lo único que sí que debeis tener en cuenta antes de empezar, es que yo soy autodidacta. A mi nadie me ha explicado nada, porque no conozco a nadie que haga estas cosas. Tengo poca idea de JavaScript, el CSS me lo he currado como he podido y tengo la sensibilidad visual atrofiada, a parte de algún que otro problema de expresión; por lo que si encontrais algún error en este artículo o no entendeis alguna explicación, no dudeis en dejar constancia de ello en los comentarios o bien usad el formulario de contacto.

Ventajas y desventajas, según mi opinión

Como ventajas le veo el antialiasing y la posiblidad de usar tipografías “no estándar” que se podrán visualizar en prácticamente cualquier navegador.

Como desventajas, básicamente que no podemos aplicar algunas de las propiedades de CSS y que si un navegador no tiene activado el soporte para Java ni para Flash, no va a funcionar, por lo que no se verá en el 100% de los equipos.

Algo muy importante, y no lo considero una desventaja en sí, más bien como una advertencia, como algo que no deberíais hacer. Se trata de reemplazar todo el texto de una página con texto renderizado en sIFR; esto provocaría que la página tardase demasiado en cargar, ya que se necesita un tiempo para descargar la película flash con la información de la tipografía a utilizar y luego convertir el texto. La recomendación en este caso es tan sólo sustituir las cabeceras y los títulos y no hacerlo con párrafos de mil palabras. Recordad que sIFR se utiliza principalmente para darle fuerza a un diseño, para reforzar “nuestro estilo”, no es algo de lo que debamos abusar aunque sea capaz de, como os he comentado, reemplazar párrafos enteros de unas muchocientas palabras.

Dicho esto, pasamos a la acción.

¿Qué necesito?

• Primero, necesitas sIFR. Como yo utilizo la versión 3 r408 y es la única que he implementado, es en la que voy a basar este artículo. Podeis descargar la misma versión de sIFR 3 de aquí. Si quereis utilizar otras versiones las teneis disponibles en el Wiki de sIFR 3.
• Una página web, con algo de CSS. Diséñala como lo harías normalmente. Eso sí, procura que todos aquellos elementos que quieras reemplazar se acerquen lo más posible al estilo que definirás con sIFR.
• Adobe Flash.
• Un editor de textos, cualquiera sirve.

Vale, ya lo tengo todo, ¿y ahora qué?

Empecemos por el principio. En el paquete de sIFR, tenemos varios archivos, pero los que utilizaremos son los siguientes:

• sifr.fla: es el archivo flash con algo de actionscript que utilizaremos para especificar la tipografía que queremos usar.
• sifr.js: el JavaScript que incluiremos en nuestra página para indicarle que utilice sIFR.
• sifr-config.js: aquí vamos a definir qué elementos queremos que reemplace y qué aspecto queremos que tengan. También haremos que cargue en nuestra página.
• sifr-print.css y sifr-screen.css: son los archivos que utiliza sifr.js para hacer el reemplazo de los elementos. Puedes utilizar ambos tal cual o bien puedes añadir el contenido a tu hoja de estilos actual, esto como veas.

sifr.fla

Abrimos el archivo sifr.fla. A primera vista parece que el archivo está totalmente en blanco, pero si haceis doble click en el espacio en blanco o seleccionas el holder que aparece en la librería y haces doble click en el item que hay dentro, aparecerá un texto con una tipografía por defecto en el que se puede leer:

Llegados a este punto tan sólo nos queda especificar la tipografía que queremos utilizar y los carácteres especiales que queramos añadir. Para ello, elegimos la tipografía que queramos y pulsamos en el botón Embed… seleccionamos los juegos de carácteres mostrados en la imagen:

Agregamos la siguiente cadena para poder mostrar las tildes y las diéresis, así como la Ñ:

áéíóúäëïöüñÑÁÉÍÓÚ

Una vez hemos acabado, pulsamos en Aceptar y tan solo nos quedará exportar la película. Esto lo hacemos desde el menú Archivo > Exportar > Exportar película. Se nos pregunta el nombre del archivo, por lo general se recomienda ponerle el mismo nombre de la tipografía que hemos utilizado, pero podeis poner el que querais, tampoco va a pasar nada. De todas maneras, luego es más fácil acordarse de cual era aquella tipografía si lo haceis así. Pulsamos aceptar y nos hará una serie de preguntas como la versión para la que queremos exportar, la versión del actionscript, etc…

Todo esto lo podemos dejar por defecto, así que aceptamos y ya tenemos nuestro archivo flash con la tipografía que queríamos.
sifr-config.js

Lo siguiente es especificar en el archivo sifr-config.js los elementos que queremos reemplazar con dicha tipografía. Este sería el contenido del archivo:

//<[CDATA[
var tipografia = {
src: 'http://tusitio.com/ruta/al/archivo/flash/tipografia.swf'
};
sIFR.activate(tipografia);
sIFR.replace(tipografia, {
selector: 'h2'
,css: [
'.sIFR-root { color: #3C3C3C; font-size: 100; }'
,'a { text-decoration: none }'
,'a:link { color: #000000 }'
,'a:hover { color: #000000 }'
]
,wmode: ‘transparent’
});
//]]>

En este ejemplo reemplazamos el elemento h2 con el archivo tipografía y le aplicamos un estilo básico.

El “,wmode: ‘transparent’” es para las transparencias del bloque reemplazado, sin esto seguramente veamos un pegote de color en el elemento reemplazado, debajo de las letras.

Subir los archivos al ftp y llamar al script

Bien, ya lo tenemos todo listo, ahora tan sólo falta subir los archivos a nuestro hosting o donde sea y especificar en nuestra página que queremos usar dichos archivos. Yo, por ejemplo, tengo un directorio creado llamado sifr en el raiz del directorio de mi tema de wordpress. Os recomiendo que lo metais todo en el mismo directorio para tenerlo todo ahí guardadito y que no se os pierda nada.

Los archivos que necesitamos subir, son:

• sifr.js
• sifr-config.js
• sIFR-print.css (si no hemos puesto el contenido en nuestra hoja de estilos actual)
• sIFR-screen.css (idem)
• la película flash con nuestra tipografía

Una vez hemos subido los archivos, deberemos hacer la llamada al script dentro de la etiqueta head de nuestro html:

<!– sIFR –>

<link rel=”stylesheet” href=”sifr/sIFR-screen.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”sifr/sIFR-print.css” type=”text/css” media=”print” />
<script type=”text/javascript” src=”sifr/sifr.js”></script>
<script type=”text/javascript” src=”sifr/sifr-config.js”></script>

y listo!

Espero que le sirva a alguien este mini-howto. Que yo apenas encontré documentación en español sobre sIFR, y toda la que encontraba no me servía para nada, ya que todas se referían a versiones antiguas.

Si quereis hacer alguna sugerencia o bien algún apunte al escrito, no dudeis en poneros en contacto conmigo.

Un saludo!