sIFR fácil con jquery

Escrito por Kemie Guaida en 1.07.08

sIFR, la técnica de reemplazo de textos usando flash y Javascript se ha vuelto muy popular, pero sigue siendo complejo para configurar. El plugin de sIFR para jQuery (un framework de javascript) permite hacerlo mucho más sencillamente. En este tutorial aprenderás cómo hacerlo.

Últimamente me he vuelto fan de jQuery. Mis conocimientos de javascript generalmente se limitan a poder bajar scripts e implementarlos, pero jQuery me permite escribir funciones básicas, y tiene una librería de plugins que 99% del tiempo tiene exactamente lo que necesito. Cuando encontré un plugin de jquery para sIFR, pensé que podría ahorrarme tiempo. Y en efecto, me encontré con que es mucho más sencillo de usar que el original

Lo primero: ¿Qué es sIFR y con qué se come?

explicación de sIFR sIFR, o scalable Inman Flash Replacement, es una técnica que nos permite usar fuentes en una página web sin necesidad de que el usuario la tenga instalada. Funciona con flash y javascript: el javascript detecta el elemento a ser reemplazado, y lo sustituye por un archivo de flash, dándole como parámetro el texto original. En la página aparece el flash con el texto original en la fuente que el autor ha embebido en el. Los usuarios que no tienen javascript o flash (como Google) ven simplemente el texto original. Puedes leer más sobre técnicas de reemplazo de texto o la versión original de sIFR.

¿Porqué jQuery?

Ahorra código. Una de las razones por las que empece a usarlo es simplemente que ya estoy usando jquery para la mayoría de mis proyectos, y el usar el plugin de sIFR significa algo menos de redundancia en código. Pero aún en los proyectos en los que no tengo otros scripts, prefiero esta versión.
Es más fácil de configurar. jQuery automáticamente utiliza el color y otros atributos de los estilos del elemento a configurar, así es que no es necesario especificarlos.
Es más fácil de probar. Fué decepcionante saber que la versión beta de sIFR no puede ser probada localmente. Si, ya sé que no es el fin del mundo subir a un servidor o instalar un servidor local, pero es un paso extra, y cuando se trata de enviar a clientes para revision el "en un servidor si funciona" no es lo más óptimo.

La desventaja es que no tiene todas las opciones que tiene la nueva versión de sIFR, en particular nuevas mejoras para accesibilidad. Pero para la mayoría de los usos (típicamente reemplazar encabezados) funciona perfecto.

Paso por paso:

1. Descarga los archivos

Baja los archivos de la página oficial del plugin. Te recomiendo el archivo "all-in one", que incluye jQuery, el plugin, y el archivo flash necesario. Descomprime los archivos.

2. Genera el .swf

generar el swf para sifr Hay que "convertir" la fuente que quieres usar a formato flash (.swf). Abre sifr-source.zip y extrae todos los archivos.

Abre sifr.fla. Al principio te aparecerá solo un cuadro en blanco. Haz doble clic y te aparecerá el texto "Do not remove this text". Selecciónalo y escoge del menú el font que quieres usar. Por default el archivo solo incluye los caracteres a-z, A-Z y puntuación básica. Si quieres incluir acentos y eñes, abre el panel de "Embed" (lo siento, tengo flash en inglés!) y adiciona "Basic Latin" o escribe los caracteres que quieres incluir. Publica tu archivo, y dale un nombre descriptivo. por ejemplo, vamos a ponerle el nombre de la fuente (cocktail.swf). Ponlo dentro del folder donde tienes tu html (o en subdirectorio)

¿No tienes flash?

Puedes usar este convertidor sIFR en línea

3. Aplica tus estilos

En tu página, dale estilo a los elementos de manera que se parezcan lo más posible en tamaño, colores, etc. a cómo quieres que se vean cuando sean reemplazados.

Ve la página antes de aplicar sIFR

4. Enlaza el javascript

Copia los siguientes archivos al directorio donde tengas tu html (o un sub-directorio):

jquery.min.js
jquery.flash.min.js
jquery.sifr.js

En la cabeza ( <head> ) de tu documento, pega los siguientes enlaces, ajustando las rutas si usaste un subdirectorio:

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

5. Configura los elementos que vas a reemplazar

Abre jquery.sifr.js. Al final del archivo agrega lo siguiente:

$(document).ready(function(){
			$.sifr({
				path: '',
				save: true
			});
		
			$('h1').sifr({ font: ' ' });
		});

y modificalo de esta manera:

Path: si tienes tus archivos .swf en un subdirectorio, pon la ruta aqui, por ejemplo
path: 'swf/',

Agrega cada uno de los elementos que quieres reemplazar en una linea con el formato
$('[selector]').sifr({ font: '[nombre del swf] ' });

El selector puede ser un elemento de html, una clase, un id,o cualquier combinación de "selectores de jQuery":http://docs.jquery.com/Selectors. El nombre del swf no necesita llevar extension, el script automaticamente la añade. Ejemplos:

 	$('h1').sifr({ font: 'trebuchet' });
    $('#contenedor h2').sifr({ font: 'mifuente' });
    $('span.reemplazame').sifr({ font: 'metaplusbold' });

Prueba tu html, y deberás de ver ya tus elementos reemplazados, con el tamaño, márgenes y colores que especificaste en tu documento.

6. Más opciones

Puedes configurar tu sIFR si quieres hacer ajustes. La tabla completa de opciones está en el sitio oficial

Ve el ejemplo terminado »

Comentarios

2 julio 2008, 09:10Juan Jorge

Muy buen tutorial Kemie, ni siquiera conocía la existencia de este plugin, me será muy útil.
Un saludo ;)
2 julio 2008, 20:59Víctor

Llega a tiempo esto, necesito hacer algo en sIFR para dos clientes. Nunca dejan de sorprenderme los links y los recursos que posteas. =)
3 julio 2008, 00:26Tania

Hey!! muy buena explicación!!
Te felicito por tu blog!
Yo participo en el blog de Prodigy/MSN:
http://elblogprodigymsn.spaces.live.com/
Espero lo puedas checar y darme tu opinión!!
Saludos!!
Tania
3 julio 2008, 18:05JOse

Hola para empesar gracias por el tuto, ahora tengo una duda quiero ver si me pueden ayudar, al poner motools junto con este escript deja de funcionar saben porque es o como lo puedo solucionar?
3 julio 2008, 20:20Víctor

@Jose, Mootols no es compatible con jQuery, la razon es que algunas funciones llevan al mismo nombre, y por lo tanto al ejecutar ambos scripts juntos se sobreescriben y dejan de funcionar.
4 julio 2008, 02:30Fran

Muchas gracias, Kemie, por este excelente tuto… dan ganas de ponerse con ello de inmediato.

Pronto lo probaré. Saludos
7 julio 2008, 07:56Claudio S

Alguien sabe como hacerlo funcionar teniendo ademas lightbox y accordean en la misma pagina?

Gracias!
7 julio 2008, 09:46kemie

Claudio, son plugins de jquery lo que estas usando? o alguna otra librería?
10 julio 2008, 09:45Fabián Valencia

Estan utilizando la versión 2.x.x?, o por qué los encabezados de cada post no son ‘clicqueables’?
10 julio 2008, 10:05Kemie

Fabian, en este sitio de hecho sigue estando una versión bastante vieja del sIFR original, pero yo si puedo cliquear los encabezados sin problemas… en que navegador/OS tienes problemas?
11 julio 2008, 17:39daro

hola, acabo de migrar mis sIFR 3 a esta version y tengo algunas preguntas: – Como hago para que no me muestre la palabra antes de aplicarle el sIFR, porque veo primero la verdana? – No logro tener una calidad tan buena como el anterior, tiene algun parametro Quality?, eh visto que los SWF pesan mucho menos que los anteriores.
saludos
16 julio 2008, 12:18Fabián Valencia

@Kemie En winXP, lo he probado con Firefox 3.0, IE 7 y Safari 3, en ningún otro sitio he tenido ese problema.

btw, ya se estan preparando en el diseñorama headquarters para adquirir el dominio diseñorama.com?

http://www.icann.org/en/announcements/announcement-4-26jun08-en.htm
16 julio 2008, 13:40kemie

daro- no te lo deberia de mostrar. puedes decirme donde estas viendo que te lo muestre?
Fabián- ya intentaste ir a “diseñorama.com”:http://www.diseñorama.com ? ;)
18 julio 2008, 08:57Pablo

Muy buena y muy útil, me va a sacar de muchos apuros esta herramienta mientras los navegadores no soporten CSS3.
Muchas gracias.
24 julio 2008, 02:18Augusto

Estoy implementando sIFR por primera vez (con este método con jQuery) y tengo un problema: en el remoto el texto se ve negro en vez de tomar los colores del CSS, como lo hace localmente.
Posiblemente sea algo sencillo, pero no me doy cuenta cuál es el problema. Alguien me da una mano?

Aprovecho para saludarte Kemie, Diseñorama es una gran referencia para todos los que vivimos del diseño web ;)
Sigue así!!
25 julio 2008, 17:03crashman

Hola, acabo de implementar este sistema en uno de mis sitios, pero me encuentro con un problema… Necesito que las tipografías tengan el fondo transparente para que se vea el fondo de la web que en este caso es un degradado.

En parte lo he conseguido con embedOptions: { wmode: ‘transparent’} y claro, el que haya tenido experiencias con el wmode sabrá que, funciona en todos los navegadores menos firefox-linux y mac. Mi pregunta es; ¿Hay algún hack para poder conseguir la transparencia del wmode en firefox de linux para que la fuente se vea correctamente?
27 julio 2008, 21:05Zerf

Facile e divertente.

Lo había probado hace un tiempo con otro método y no acababa de funcionar, siguiendo estos pasos ha sido coser y cantar (tan sólo los típicos problemas con las friendly url).

Muchas gracias!
31 julio 2008, 17:21Cado

Muchisimas gracias por este tutorial, hace mucho tiempo que intente implementar el famoso sIFR pero siempre tenia algun problema, pero despues de leer y aplicar lo que dices acá me resulto inmediatamente, gracias!
4 agosto 2008, 10:01Carlos

He encontrado el tutorial muy util, sin embargo tengo una duda, he intentado hacer enlaces con sIFR y no me lo permite… es posible? ya que no encuentro suficientes referencias o ejemplos con esta version al menos! Y es la que me gustaria utilizar por su sencillez, pero ninguno de los enlaces que he probado funcionan ni con FF o IE!
5 agosto 2008, 10:52Pete

Excelente tutorial !!

Un gran método, pero hay alguna manera de controlar el letter-spacing?
8 septiembre 2008, 12:47glucko

Gracias por el tutorial, mucho mejor que usar unicamente sIFR. ¡Muchas gracias! *NOTA:El enlace al tuto desde el ejemplo está mal
11 noviembre 2008, 21:20Jair

Que buen tuto Kemie, me ha servido bastante.
13 noviembre 2008, 20:38Aiteok

Hola!
No puedo creer, acá encuentro todo… justamente estuve implementando una plantilla en Wordpress y tenía problemas con Lightbox: la plantilla BELLA utiliza sIFR que tapan el lightbox, intenté hacer que no suceda, retocando el código en los archivos JS del plugin y los CSS del lightbox, pero no hubo caso… voy a probar este recurso en estos días.
Habrá alguna forma de hacer “opaco” el sIFR?
Gracias y saludos!
EXCELENTE PÁGINA! :D
3 diciembre 2008, 14:47Emiliano

Hola! A alguien le funciona el tema de color? yo debo darlo al exportar el SWF porque por java no funciona.
Gracias.