saltar al contenido. saltar al menu
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
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
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.
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.
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.
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)
Puedes usar este convertidor sIFR en línea
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
Copia los siguientes archivos al directorio donde tengas tu html (o un sub-directorio):
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>
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.
Puedes configurar tu sIFR si quieres hacer ajustes. La tabla completa de opciones está en el sitio oficial
Suscríbete a la lista de correo y mantente informado sobre las actualizaciones del sitio.
¿Quieres compartir una noticia o enlace? ¿Sugerir un tema para un artículo? Hazlo aquí:
2 julio 2008, 08:10
Juan Jorge
Muy buen tutorial Kemie, ni siquiera conocía la existencia de este plugin, me será muy útil.
Un saludo ;)
2 julio 2008, 19:59
Víctor
Llega a tiempo esto, necesito hacer algo en sIFR para dos clientes. Nunca dejan de sorprenderme los links y los recursos que posteas. =)
2 julio 2008, 23:26
Tania
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, 17:05
JOse
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, 19:20
Ví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, 01:30
Fran
Muchas gracias, Kemie, por este excelente tuto… dan ganas de ponerse con ello de inmediato.
Pronto lo probaré. Saludos
7 julio 2008, 06:56
Claudio S
Alguien sabe como hacerlo funcionar teniendo ademas lightbox y accordean en la misma pagina?
Gracias!
7 julio 2008, 08:46
kemie
Claudio, son plugins de jquery lo que estas usando? o alguna otra librería?
10 julio 2008, 08:45
Fabián Valencia
Estan utilizando la versión 2.x.x?, o por qué los encabezados de cada post no son ‘clicqueables’?
10 julio 2008, 09:05
Kemie
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, 16:39
daro
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, 11:18
Fabiá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, 12:40
kemie
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, 07:57
Pablo
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, 01:18
Augusto
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, 16:03
crashman
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, 20:05
Zerf
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, 16:21
Cado
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, 09:01
Carlos
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, 09:52
Pete
Excelente tutorial !!
Un gran método, pero hay alguna manera de controlar el letter-spacing?
8 septiembre 2008, 11:47
glucko
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, 20:20
Jair
Que buen tuto Kemie, me ha servido bastante.
13 noviembre 2008, 19:38
Aiteok
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, 13:47
Emiliano
Hola! A alguien le funciona el tema de color? yo debo darlo al exportar el SWF porque por java no funciona.
Gracias.
16 enero 2009, 12:09
Nico
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
16 enero 2009, 12:15
Felipe 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
3 febrero 2009, 08:43
Javier
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!
6 febrero 2009, 12:54
Charo
Muy buena la explicación!!Qué bien que hagamos este buen uso de la red en colectivo.
Mil gracias.
24 febrero 2009, 18:30
jaumeAV
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!
10 abril 2009, 18:20
Leonardo
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
11 abril 2009, 18:23
kemie
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
29 abril 2009, 11:07
Ismael 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
29 abril 2009, 20:54
Fernando
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
27 mayo 2009, 12:43
Alkarod
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.
2 junio 2009, 11:14
kemie
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
10 junio 2009, 18:51
Darnux
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
15 junio 2009, 13:20
Fran
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?
15 junio 2009, 13:33
Fran
Hola,
Lo arreglé. Millones de gracias a Diseñorama ;)
2 julio 2009, 06:54
Fonoteca
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í.
2 julio 2009, 23:05
Esteban
como hago la sombra al texto ???????????
15 julio 2009, 08:52
Tamara
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)
20 julio 2009, 23:01
vafeLu
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.
28 julio 2009, 15:29
Juan
Genial! Gracias, la vida ahora es más fácil
28 julio 2009, 16:51
kemie
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;
}
31 julio 2009, 11:55
Tamara
Gracias Kemie! Solucionado en todos los navegadores!
7 agosto 2009, 11:31
Nacho
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.
7 agosto 2009, 14:38
Nacho
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é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?
16 noviembre 2009, 09:16
Fran
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)
19 noviembre 2009, 23:50
Luis Alberto
Hola, aun probando el consejo de Nacho continua mi problema del texto en negro… alguien ya lo solucionó?..
28 febrero 2010, 05:07
cristian_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.
22 marzo 2010, 17:27
Leo
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?
23 marzo 2010, 18:08
jethrov
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.
26 marzo 2010, 21:54
Leo
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.
7 abril 2010, 23:02
powerzander
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
10 junio 2010, 17:33
iRiDiuM
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!
10 junio 2010, 19:03
kemie
iridium, ya viste la seccion “paso por paso” de este tutorial? que parte no entiendes?