.

Diseñorama » Tutoriales

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

Actualización

El plugin para jquery de sIFR ha sido actualizado, y por el momento no se pueden bajar los archivos fuente de flash del sitio oficial. Los dejo aquí para descargar (corresponden a la versión 2 de sIFR). También se pueden generar archivos .swf compatibles con herramientas como el sIFR font generator

archivo: sifr.source.zip [6.57KB]
download: 696

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

explicación de sIFRsIFR, 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 sifrHay 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

  1. 2 julio 2008, 08:10Juan Jorge

    Muy buen tutorial Kemie, ni siquiera conocía la existencia de este plugin, me será muy útil.
    Un saludo ;)

  2. 2 julio 2008, 19: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. 2 julio 2008, 23: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

  4. 3 julio 2008, 17: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?

  5. 3 julio 2008, 19: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.

  6. 4 julio 2008, 01:30Fran

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

    Pronto lo probaré. Saludos

  7. 7 julio 2008, 06:56Claudio S

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

    Gracias!

  8. 7 julio 2008, 08:46kemie

    Claudio, son plugins de jquery lo que estas usando? o alguna otra librería?

  9. 10 julio 2008, 08:45Fabián Valencia

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

  10. 10 julio 2008, 09: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. 11 julio 2008, 16: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

  12. 16 julio 2008, 11: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

  13. 16 julio 2008, 12: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 ? ;)

  14. 18 julio 2008, 07:57Pablo

    Muy buena y muy útil, me va a sacar de muchos apuros esta herramienta mientras los navegadores no soporten CSS3.
    Muchas gracias.

  15. 24 julio 2008, 01: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í!!

  16. 25 julio 2008, 16: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?

  17. 27 julio 2008, 20: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!

  18. 31 julio 2008, 16: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!

  19. 4 agosto 2008, 09: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!

  20. 5 agosto 2008, 09:52Pete

    Excelente tutorial !!

    Un gran método, pero hay alguna manera de controlar el letter-spacing?

  21. 8 septiembre 2008, 11:47glucko

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

  22. 11 noviembre 2008, 20:20Jair

    Que buen tuto Kemie, me ha servido bastante.

  23. 13 noviembre 2008, 19: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

  24. 3 diciembre 2008, 13:47Emiliano

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

  25. 16 enero 2009, 12:09Nico

    Me ha funcionado muy bien, excepto el hover en los links, no puedo hacer que tome el color definido en el css. ¿Alguien pudo utilizar a:hover con el sifr?
    Muchas gracias

  26. 16 enero 2009, 12:15Felipe Lorenzo

    Creo que hay problemas de compatibilidad con la nueva versión de jquery 1.3, con la versión que tienes en el ejemplo funciona sin problema, pero con la 1.3 no tira

  27. 3 febrero 2009, 08:43Javier

    Hola! Muchas gracias por este maravilloso tutorial. En 5 minutos lo he tenido funcionando sin problema.

    Solo tengo un par de preguntas… a ver si me las podeis resolver…

    ¿Como puedo centrar el texto? Imagino que desde la parte que se inserta al archivo jquery.sifr.js, pero no se como hacerlo.

    Y… ¿como se pone la sombra que le habeis puesto vosotros a la letra? Por ejemplo, arriba del todo, donde pone “sIFR fácil con jquery” el texto tiene una sombra, y no se como añadirsela a mis fuentes.

    Un saludo y de nuevo mil gracias!

  28. 6 febrero 2009, 12:54Charo

    Muy buena la explicación!!Qué bien que hagamos este buen uso de la red en colectivo.
    Mil gracias.

  29. 24 febrero 2009, 18:30jaumeAV

    hola gente.

    yo estoy intentando seguir estes tutorial.. de hecho creo q lo he seguido al dedillo, pero no consigo que me aparezca nada…

    no aparece lo que escribo…

    para que veais os dejo un ejemplo:
    http://www.additive.es/web2/index3.html

    si clicais en el segundo flash os deberia aparecer un div con un par de palabras… pero aparece vacio…

    necesito solucionar esto lo antes posible. alguien que me pueda ayudar?

    gracias!

  30. 10 abril 2009, 18:20Leonardo

    Hola muy buen aporte pero tengo un problema… no me carga los swf… :S
    los levanta los pone en la web pero no los carga estoy trabajando con asp desde vs2008 y genero parte del codigo con xsl pero no creo q eso tenga algun inconveniente si al momento que le llega al usuario el html ya esta armado… espero ancioso una respuesta y muchas gracias por el post

  31. 11 abril 2009, 18:23kemie

    Leonardo, dificil adivinar cual es el problema sin ver el codigo o la página, pero generalmente es un problema de rutas, asegurate de estar especificando la ruta correcta en el parametro path

  32. 29 abril 2009, 11:07Ismael González

    Y ese texto que se crea en el flash, es indexable?
    Sinceramente prefiero un h1 con una imagen de fondo y el text-indent, asi por los menos en los navegadores no visuales y los bots de google lo pueden leer.

    Y si el user no tiene flash instalado? No le aparecen los encabezados?

    Hasta que no haya soporte full en css3 seguire usando css2 para mis encabezados.

    Un saludo

  33. 29 abril 2009, 20:54Fernando

    Ya no están más disponibles los archivos :-(
    (Está el zip, pero faltan algunos archivos entre ellos los .fla).
    Si alquien los puede subir x favor. Gracias

  34. 27 mayo 2009, 12:43Alkarod

    Es cierto, no puedo conseguir los archivos originales de los que se habla en el tutorial. Parece ser que es debido al cambio de versión del plugin de jquery.

    Si alguien pudiera pasar un enlace para descargarlos tendría mi agradecimiento eterno xD.

    Gracias.

  35. 2 junio 2009, 11:14kemie

    Ismael, como dice el artículo:
    los usuarios que no tienen javascript o flash (como Google) ven simplemente el texto original.

    Fernando y Alkarod, subí los archivos fuente, encuentran el enlace al principio del artículo

  36. 10 junio 2009, 18:51Darnux

    Hola, he seguido el tutorial, y aunque hay cambios (como los archivos .js) lo he adaptado y funciona. La úncica pega es que cuando escribo un texto con espacios me lo muestra así: texto%20con%20espacios

    Soy totalmente lego en SIFR, nunca lo he usado, y estoy un tanto desorientado con las diferentes versiones, tanto del SIFR como del plugin de JQuery.

    ¿Alguna aclaración, por favor?

    Muchas gracias

  37. 15 junio 2009, 13:20Fran

    Hola,

    Agradezco tu tutorial. Mi problema es que no sale el texto que escribo si no Do not remove this text. ¿Sabes por qué puede ser?

  38. 15 junio 2009, 13:33Fran

    Hola,

    Lo arreglé. Millones de gracias a Diseñorama ;)

  39. 2 julio 2009, 06:54Fonoteca

    Genial, Kemie.
    Es una de las pocas explicaciones (si no la única) sobre el plugin sIFR de jquery.
    Mi pega sigue siendo el color…
    lo especifico en el CSS y sale negro, en el atributo style de la capa… y sale negro.
    ¿Puedes ayudarme, por favor?
    Gracias de todas formas.
    La información es muy útil para novatos como yo.
    Ah! la muestra aquí.

  40. 2 julio 2009, 23:05Esteban

    como hago la sombra al texto ???????????

  41. 15 julio 2009, 08:52Tamara

    Hola, Mi problema es el mismo que el de Darnux, y además el navegador ie8, no reemplaza, simplemente pone el flash encima del html, alguna solución? (en los otros navegadores lo veo corerectamente)

  42. 20 julio 2009, 23:01vafeLu

    Hola; se me presenta el mismo problema de Tamara; alguien tiene idea.

    En IE8 no funciona correctamente.

    Además que el sifr.fla no abre el Flash CS4.

  43. 28 julio 2009, 15:29Juan

    Genial! Gracias, la vida ahora es más fácil

  44. 28 julio 2009, 16:51kemie

    Hoy estuve “jugando” un poco con la ultima version de este plugin, y me encontre con los mismos problemas de Darnux y Tamara. Las soluciones:
    para el tema de los %20, hay que actualizar el script de swfobject a la ultima versión
    Para el tema de ie8, lo solucioné agregando esto a mi css:
    .sIFR-alternate
    { visibility: hidden;
    }

  45. 31 julio 2009, 11:55Tamara

    Gracias Kemie! Solucionado en todos los navegadores!

  46. 7 agosto 2009, 11:31Nacho

    Hola, para todos aquellos que les sale el texto en negro creo que he dado con la solucion.

    jquery: jQuery sIFR Plugin v3.0.4 de http://jquery.thewikies.com/sifr/

    Cuando generamos el swf de la fuente si lo cambiamos de Flash 6 a 8 o mayor para por ejemplo poner “Anti-alias for readability” para que quede mejor o otros,…

    El codigo que tenemos en “dont_customize_me.as” tiene una diferencia con el jquery.sifr.js que es textColor y textcolor… la C mayuscula y es por eso no funciona!!!!

    Soluciones,…

    Se puede hacer dos cosas:

    1. Una como tiene www.mikeindustries.com que en el sifr.js tiene alli los parametros de cuando se genera el flash en el HTML todos a minuscula: “textcolor”,…

    2. Menos curro,… cuando generamos la fuente cambiar el “dont_customize_me.as” de “textcolor” a “textColor” creo que pasa igual con linkcolor y hovercolor.

    Lo demás textAlign y otros… no se porque no pasa pero si hay algun programador que lo explique… no se si es por que acaba siendo un color… ahi ya no llego :D

    Lo del CS4 yo lo que he hecho es abrirlo con CS3 y luego ya podia hacerlo con el CS4.

  47. 7 agosto 2009, 14:38Nacho

    Me a surgido otro problema con todo esto… es que he embebido los caracteres de acentos y otros… pero no me salen.

    Pongo por ejemplo:
    texto “También te recomendamos”
    html “Tambi&eacute;n te recomendados estos hoteles”

    y sale
    “Tambite recomendados estos hoteles”

    se come el acento la n y el espacio…
    la variable que pasa es “txt” y pasa esto… txt=Tambi%E9n%20te%20recomendados

    ¿Alguien me puede ayudar?

  48. 16 noviembre 2009, 09:16Fran

    Se que llego un poco tarde pero tengo una duda. He usado tu tutorial para usar sifr en una web que estoy realizando y me va bien. El problema lo tengo con textos pequeños, que directamente me los difumina. aqui tienes el ejemplo:
    link
    Al final de la pagina veras que aparece un texto y sale difuminado (al menos al usar pc, en mi mac se ve bien) Ahh, esta optimizado para firefox, en IE el pie de pagina sale fatal (no le he metido una css para IE aun)

  49. 19 noviembre 2009, 23:50Luis Alberto

    Hola, aun probando el consejo de Nacho continua mi problema del texto en negro… alguien ya lo solucionó?..

  50. 28 febrero 2010, 05:07cristian_cena

    Hola, resulta que hago todos los pasos que se indica en el tutorial pero el resultado raro, me toma los swf pero no el texto. Pueden verlo aquí
    inicio2770 . com . ar/sIFR/sIFR-jQuery . htm
    Desde ya les agradezco si lo miran, a lo mejor se me pasó algo por alto y no me doy cuenta.
    Gracias.

  51. 22 marzo 2010, 17:27Leo

    Pruebo una y otra y otra vez y no puedo dar con esto. No me muestra nada!!!
    ¿Puede ser porque el swf lo hice con el generetor ya que descargue el zip de aqui pero al parecer esta roto el fla?
    También chequee la ruta, hasta hice varias copias del swf de la fuente, ¿La ruta tiene que ser relativo al php o a la ubicacion del js?

  52. 23 marzo 2010, 18:08jethrov

    Acabo de probarlo en wordpress con un plugin que te lo pone fácil. Pero hay problemas.

    El sifr generator tiene que generar un swf que contiene todas las caracteres por lo tanto se vuelve pesado. Y si solo selecciono los caracteres comunes, entonces no me sirve para el castellano.

  53. 26 marzo 2010, 21:54Leo

    kemie ¿como haces para controlar el tamaño del título o palabra a modificar? he logrado que me funcione pero no puedo cambiar el tamaño, trato editando el css como agregando la propiedad fontsize al java y no consigo nada.

  54. 7 abril 2010, 23:02powerzander

    Hola buenas esto el sifr esta muy bien solo que tiene un problema que para mi punto de vista que da desagradable para un diseño web por que tarda en cargar los títulos haciendo en IE un efecto de pantallazo y aparte se ve un hueco hasta que no cargar el flash haciendo un efecto en la web para mi punto de vista no es muy agradable. En diferencia al ajax ejemplo el flash lo rompe

  55. 10 junio 2010, 17:33iRiDiuM

    Hola, muy interesante aporte y creo que solucionara muchos problemas de mucha gente. Mi problema es que no logro entender como hacerlo funcionar! Algun link donde se pueda explicar mas o menos para alguien de bajo nivel? Un saludo y gracias!

  56. 10 junio 2010, 19:03kemie

    iridium, ya viste la seccion “paso por paso” de este tutorial? que parte no entiendes?


¡Comenta!

lista de correo

Suscríbete a la lista de correo y mantente informado sobre las actualizaciones del sitio.


Suscríbete

rss

Suscríbete al RSS de Diseñorama


¿Sugerencias?

¿Quieres compartir una noticia o enlace? ¿Sugerir un tema para un artículo? Hazlo aquí: