Diseñorama 50% mas clears
Manual sIFR, paso a paso
Hace poco presenté varias opciones para el reemplazo de textos. Una de las opciones más populares, por su facilidad de uso, es sIFR, o Scalable Inman Flash Replacement. Habiendo poca documentación en español (perdón, castellano :) ), intentaré mantener un manual básico de su implementación.
Qué es sIFR
sIFR es un script que reemplaza un elemento de texto (o varios) en una página por un archivo flash que despliega el mismo texto. Esto nos permite utilizar tipografías que no estén instaladas y tener texto con suavizado (anti-aliasing). La técnica fué desarrollada originalmente por Shaun Inman (de ahi su nombre) y Mike Davidson, con otros colaboradores, la mejoraron y convirtieron en escalable, es decir que su tamaño es relativo al elemento que se reemplaza.Un ejemplo
Cómo funciona
Sin entrar en más detalles técnicos, una descripción breve de su funcionamiento:
- Tenemos una página normal, con sus elementos determinados con CSS
- Tenemos un archivo .swf, que contiene los contornos de una fuente, y un poco de actionscript.
- Tenemos un archivo .css con instrucciones especiales
- Tenemos un archivo de javascript, que es el que hace que todo funcione
- Al momento de cargar la página, el javascript checa si el usuario tiene flash instalado, encuentra los elementos que hemos señalado que queremos reemplazar, e inserta en su lugar el archivo flash, con el contenido de los elementos (respetando las dimensiones del elemento original), y esconde los elementos originales.
Precauciones
sIFR fué pensado para sustituir textos pequeños, tales como encabezados. No es recomendable utilizarlo en elementos largos. Aunque se pueden tener enlaces en los textos sustituidos, su comportamiento puede ser impredecible, por lo que tampoco es recomendable usarlos para elementos como menús.
Paso a paso:
1. Preparación
Diseña tu página normalmente, utilizando para los elementos que quieras reemplazar, fuentes, colores y tamaños que se acerquen lo más posible a los textos reemplazados.
Descarga los archivos de sIFR , y descomprímelos a un folder en tu computadora
2. Exportar el .swf
Primero hay que asegurarnos que los archivos solo puedan ser usados en nuestro sitio. La licencia de muchas fuentes comerciales prohibe la redistribución, y el tener un archivo .swf que contiene todos los contornos se considera redistribución.
Abre el archivo customize_me.as (Por defecto se abrirá con flash). Para poder hacer pruebas en tu computadora, asegurate que allowlocal sea igual a true. Una vez que subas tu página al servidor, te conviene cambiarlo a false. Bajo la variable alloweddomains escribe el dominio o dominios de las páginas donde vayas a utilizar ese archivo .swf. Recuerda incluir el dominio con y sin www. Guarda y cierra el archivo.
Abre el archivo sIFR.fla. En un principio, parecerá que no hay nada, pero si haces doble clic en la mitad del escenario, se abrirá un movieclip y verás un texto que dice "Do not remove this text". Haz clic a ese texto, y en la barra de propiedades, selecciona la fuente que quieras usar. Luego haz clic en el boton de caracteres, y selecciona los que quieras utilizar. Recuerda especificar caracteres con acento y eñes.
Exporta tu archivo (Archivo-->Exportar). Lo más práctico es nombrarlo como la fuente que usas, en caso de que tengas más de una. Asegúrate que customize_me.as y dont_customize_me.as estén en la misma carpeta que tu archivo .fla al momento de exportar. Copia tu archivo .swf a la carpeta donde tienes tu html.
3. Estilos
Hay 2 cosas que debes de hacer con tus estilos, primero, esconder los elementos que quieres que se reemplazen una vez que se haya determinado que el usuario tiene flash, y cambiarlos de regreso al momento de imprimir. Para eso incluye los contenidos de sIFR-screen.css y sIFR-print.css en tu hoja de estilos. Asegurate que contengan reglas para los elementos que quieras reemplazar. Si tu fuente sIFR tiene proporciones muy distintas a la que usas en html, puede que sea necesario que cambies el tamaño o espaciado en este archivo.
4. Llamar al javascript
Copia el archivo sifr.js a la carpeta donde tienes tu html.
Pon el siguiente código entre las etiquetas <head> y </head> de tu página.
<script src="sifr.js" type="text/javascript"></script>5. Reemplazar los elementos
En tu archivo html, justo antes de la etiqueta </body>, pega el siguiente codigo:
<script type="text/javascript">
//<![CDATA[
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"mifuente.swf",
sColor:"#000000",sLinkColor:"#000000",
sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20,
nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));
};//]]>
</script>Una explicación de qué hace cada elemento, para que puedas cambiarlo según los resultados que quieras.
- sSelector
- Es el elemento que quieres que se reemplace. Puede ser una etiqueta html (h1, por ejemplo si quieres que se reemplazen todos los h1 de la página), una clase (.miencabezado), un id (#mitexto) o una combinación de todos ( .midiv h1#principal , si quieres que se remplace el h1 con id principal dentro del elemento con clase .midiv)
- sFlashsrc
- Es la ruta a tu archivo .swf, relativo a tu html.
- sColor
- El color que quieres que sea el texto, en formato hexadecimal.
- sLinkColor
- El color que quieres para los enlaces.
- sBgColor
- El color de fondo para tu texto. Puedes ponerlo transparente en otra variable, pero no funciona en todos los navegadores
- sHoverColor
- El color que será el texto al pasar el puntero sobre el.
- nPadding
- El padding (variables distintas para cada lado) que tenga tu elemento original en el css. Es muy importante que coincida, de lo contrario tu tamaño variará.
- sFlashVars
- aca puedes especificar variables para tu archivo .swf, como textalign para alinear el texto, offsetLeft y offsetTop para especificar una distancia desde el borde superior e izquierdo. underline=true subraya los enlaces .
- sCase
- Cambia el texto a mayusculas (upper) o minúsculas (lower)
- sWmode
- El ponerlo transparent te dará fondo transparente y aparecerá debajo de elementos posicionados absolutamente como menús. Pero ojo, no funciona en Opera ni en versiones viejas de Mozilla y Safari.
Puedes tener varias llamadas para reemplazar varios elementos, de esta forma:
<script type="text/javascript">
//<![CDATA[
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"mifuente.swf", sColor:"#000000"}));
sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"mifuente.swf", sColor:"#666666"}));
};
//]]>
</script>Y listo! al visualizar tu página, deberás poder ver tus flamantes nuevos encabezados con flash
Checa algunos ejemplos de implementaciones sIFR
Actualización 25-04-06
Te recomiendo la extension Dreamweaver para sIFR, que te enlaza los archivos necesarios y te genera el código javascript en la página
Comentarios
Suscríbete a la lista de correo y mantente informado sobre las actualizaciones del sitio.
Suscríbete
Suscríbete al RSS de Diseñorama
¿Sugerencias?
¿Quieres compartir una noticia o enlace? ¿Sugerir un tema para un artículo? Hazlo aquí:
Categorías en Tutoriales
Tutoriales Recientes
- Una aplicación para iPhone en minutos con IUI
- sIFR fácil con jquery
- Manual sIFR, paso a paso
- Como solucionar problemas en CSS
- Contrato de Servicios de Diseño
- Diseña una página con código semántico
Contenido Relacionado
Promoción
- RT @Vectips: Vectips Weekly Vector Inspiration 25 http://bit.ly/16Dt6O 5 hours ago
- friiiiday! 8 hours ago
- @VeerUpdate how long does it take to get an answer from support@ ? One week after writing, no response, and still cannot purchase 11 hours ago
28 julio 2005, 00:01
Sr. Ternasco
Esto es un puntito de rosca másGracias.
Así se aprende bien!
28 julio 2005, 01:45
cristian
excelente tutorial!.... ahora, tengo una duda ¿Qué pasa con estos textos y los spiders de los buscadores? ¿Son capaces de leerlos? o es como un flash, que tiene dificultades para ser leído….28 julio 2005, 15:22
Kemie
Cristian, cualquier navegador que no soporte javascript y/o flash (el caso de los robots de los buscadores) simplemente obtendrán el texto original.28 julio 2005, 15:28
chinaski
os dudas que tuve al momento de implantar sIFR por vez primera:– Exportar en flash… ¿como imagen o película? Rta: como película, claro…
– No salen los caracteres acentuados ni eñes… Rta: agregarlos manualmente en la lista de caracteres exportados.
Por lo demás… nunca pude utilizar fondo transparente sinq ue me aparezca un recuadro verde por detrás…
28 julio 2005, 20:43
VentdAval
Excelente tuto, gracias! :Dun par de apuntes… el punto 2 de “PASO A PASO” debiera llamarse “Publicar el swf” al igual que en el cuarto parrafo de dicho punto donde dice:
Exporta tu archivo (Archivo—>Exportar).
debiera decir:
Publica tu archivo (Archivo—>Publicar).
Esto para evitar confusiones ;)
Y lo otro, debieras especificar que el uso de wmode en “transparent” ú “opaque” genera extranios comportamientos en FireFox.
Saludos…
10 agosto 2005, 02:16
Johnny
Muy buen articulo, la verdad es que yo no te mande ningun mail porque pensé que estarías ocupada, y como ya te mandé uno preguntandote acerca de los nicetitles, pues pensé que sería abusar…xDMuchas gracias por seguir ahí, preocupandote por seguir ayudando a la gente.
Saludos…
PD:Cada vez que tengo que poner mis datos en este formulario me hago un lío… yo pondría las cajas junto al texto que indique el campo a rellenar (es mi opinión)
14 septiembre 2005, 06:37
Rubén
Yo tengo un problemita…y es que no me sale nada…es decir, se ocultan los textos pero no me aperecen los archivos flash….¿a que puede ser debido?25 septiembre 2005, 12:40
Roberto
Lo mismo, hago todo pero no se ve ni un carajo :(26 septiembre 2005, 15:42
Kemie
Es dificil saber cual es el problema sin ver la pagina, pero les recomendaria que verifiquen la ruta al archivo .swf, que podría ser un problema.27 septiembre 2005, 17:37
dosdedos
Yo tengo una duda aún mayor… estoy intentando armar un weblog con WordPress y no tengo idea de dónde debo poner por ejemplo, el enlace al sifr.js, ya que no tengo html sino sólo archivos php.Lo siento, soy una ignorante… ¿sería mucho pedir que lo explicaras en este caso en concreto? ¡Gracias!
1 octubre 2005, 03:23
Rubén
Hola Kemie!Aquí pongo el ejemplo: http://pruebas.rubenlozano.com/
Hago todo tal cual, lo he repetido ‘n’ veces, y no doy con ello.
Espero me ayudes.
Salu2.
25 octubre 2005, 04:51
enrike
Cómo agrego los caracteres acentuados y ñ’s a los caracteres exportados.. si puedes ser mas específico ?25 octubre 2005, 05:11
kemie
Enrike:Con el area de texto seleccionada, en la barra de propiedades, haz clic en el boton de caracteres (“Character…” en inglés)
Ahi podras especificar diferentes rangos (mayusculas, minusculas, numerales, solo caracteres basicos, todo el alfabeto), y tambien puedes poner caracteres especificos como eñes y vocales con acento.
Haz clic en OK, y listo!
18 noviembre 2005, 03:43
FR@N
¡Hola!me parece un sistema genial de poder incluir fuentes en un site.
He estado dandole a este manual ya 2 dias y por fín comienzo a sacar cosas en claro.
Mis dilemas son:
– No soy capaz de hacer que cambie a un stilo de mi hoja de stilos, tengo que hacerlo mediante las etiquetas etc.. como en los ejemplos de los archivos.
– Tampoco soy capaz de incorporar los carácteres deseados con éxito, aún así siguiendo correctamente tus pasos:
agrego los carácteres a mano (áéíóúÁÉÍÓÚ `´ @ ñ Ñ) y los acentos no se me visualizan y segun que fuentes la arroba tampoco.
– Tampoco he sabido implantar correctamente la funcion de transparencia, pero lo he resuelto con el fondo del mismo color de la page.
– Se puede hacer compatible con Mozilla? lo digo porque intento cargarlo con mozilla y lo ignora. Supongo que no … pero por preguntar ^^
Gracias por este artículo tan interesante y espero que me puedas echar un pequeño cable ^^
Saluts
21 noviembre 2005, 03:40
Fr@N
Ya solucioné lo de los carácteres, al parecer según que fuentes no aceptan las puntuaciones de la acentuación.Lo de la compatiblilidad con Mozilla y demás navegadores…. es dificil tanto como nula ^^
En fin, saludos.
24 noviembre 2005, 18:17
kemie
Fran, debería de funcionarte en mozilla sin problemas. si checas esta página verás que los títulos funcionan en cualquier navegador…2 diciembre 2005, 16:37
demimismo
Gracias Kemie!No creo haber puesto nunca un comentario aquí, pero me encantan estos artículos tan detallados que pones :-)
Un saludo.
16 enero 2006, 21:22
MartinP
Buenas, estoy tratando de editar el archivo .as con flash y me poner archivo no valido, que puede ser?? Gracias, muy bueno el instructivo ahora lo tengo que hacer andar.21 enero 2006, 21:50
LightDown
En esta web el flashreplace produce un texto doble (algo así como un texto con sombra) ¿Cómo se consigue eso con sIFR? He intentado dejar una capa de texto estático debajo de la dinámica pero entonces no me la redimensiona.22 enero 2006, 04:39
mauro
el problema que tuve con ifr y que tampoco se me veia el texto, era porque al texto lo ponia en negrita (o en bold) y al sacarselo, ahi funcionaba.sino otro problema era el del posicionamiento que estos tenian, o el tamaño que le daba (ancho y alto) al swf.
no se bien como se maneja el sifr, pero el ifr que dentro de todo es bastante similar tenia esos problemas, asi que tenganlos en cuenta.
saludos
7 febrero 2006, 15:59
Óscar
Pues yo he conseguido q desaparezcan h1 h2 h3… pero no me genera el flash nada… alguna sugerenca??Gracias!!
17 febrero 2006, 21:38
gamboa
Cuando dices en el punto 3 “Para eso incluye los contenidos de sIFR-screen.css y sIFR-print.css en tu hoja de estilos”. Es un error, pues debes separar el enlace del css print y el screen con el siguiente códigoPara que funcione correctamente a la hora de imprimirlo.
17 febrero 2006, 21:42
gamboa
Este es el código para enlazar los estilos correctamente, a ver si se ve…link rel=”stylesheet” type=”text/css” media=”screen” href=”miestilo.css”
link rel=”stylesheet” type=”text/css” media=”print” href=”miestilo_print.css”
23 febrero 2006, 23:48
Gustavo
tengo una hoja “base.css” donde tengo lo siguienteh4{font:12px Tahoma; color:#cc0000; font-weight:bold;}
en mi html incluyo esa hoja y las de sIFr de esta manera junto a los javas
y al final de mi pagina lo siguiente:
//
pero no me remplaza ni oculta nada en IE y en firefox me oculta pero no muestra
nota:hice todos los pasos.
¿¿¿¿¿¿¿¿¿¿¿¿¿???????????????
24 febrero 2006, 05:04
Gustavo
luego de bastante luchar, logre que me remplace los textos, el tema pasa por los padding y ofset que pones en el ejemplo, los puse en 0 y se ve de lujo.Ahora en IE sigue sin remplazarmelos. Otra cosa yo en IE a esta pagina la veo sin remplazos tambien. Y a los ejemplos de la pagina oficial de sifr tambien.
27 febrero 2006, 21:07
Enrique
A ver, creo que se me está escapando algo.Lo hago todo exactamente como se explica en el tutorial, pero cuando llego al paso “5. Reemplazar los elementos”, me asalta una duda que después sinceramente no se como resolver.
Según dice el tutorial, hay que pegar el código “justo antes de ”, con lo cual, queda dentro del cuerpo de la web, y el código se ve justo al final de la web. Creo que o se ha omitido un “pequeño” paso para comentar este código, o no se… sinceramente estoy perdido. Por que a part de esto, que no se como resolver, a mi no me hace ningún cambio en pantalla… todo sigue igual…
Bueno, muchas gracias de antemano.
Salu2.
2 marzo 2006, 00:58
roy hess
en esta pagina el typo de fuente de la frase OPINIONES como se la asignas? usas sifr?Me parece espectacular
Gracias
6 marzo 2006, 09:38
man0l0
Solo decirles (aparte de las merecidas felicitaciones), que en Flash 8 castellano el botón ya no se llama “caracteres”, sino que “INCORPORAR”.Saludos!
6 marzo 2006, 20:07
alamarcheta
Hola. Excelente tutorial pero tengo una pregunta: ¿Como poner el fondo en transparente? y si se puede ¿Cuales son los navegadores que lo soportan?Saludos y gracias.
9 marzo 2006, 21:52
Danny
el enlace esta roto, donde puedo bajar esos fuentes del codigo? gracias11 marzo 2006, 00:09
sebastian
buen tutorial, el de mike davidson no es muy claro para mi y en la pagina de shaun no encontre nada mas claro que esto, ahora mi pregunta es como hacer que el texto tenga sombra como los que usas en esta pagina, o reemplazar el color de fuente por un degradado11 marzo 2006, 03:20
flodar
Un poco de luz para la gente a la que no le aparecen los textos.Lo primero meter el script que dice Kemie antes del pero de esta forma:
//
Y luego poner los valores del nPaddingTop y nPaddingBottom a 0 ( como aparece en el codigo de arriba)
Espero que os sirva !!
Saludos.
18 marzo 2006, 06:07
manuel
Que ocurre al modificar el tamaño de las fuentes en el navegador?6 abril 2006, 22:40
Juanmi
Hola a todos, al creador de la pagina, ENHORABUENA!!. Tengo una pregunta. Podrias decir de que forma debemos ocultar los tags, es decir dejar una pizca mas explicado el paso 3. Saludos y muy muy bueno.Juanmi
9 abril 2006, 02:53
sebastian
tengo problemas para reemplazar los headings, en Firefox andan perfecto pero en IE no los reemplaza, necesito un poco de ayuda y que alguien me explique por que no me andan en IE11 mayo 2006, 11:58
nateskin
hay algo que no me cuadra.
si yo giro una fuente en el diseño se ve girada pero como modifico el tamaño del texto (en altura) para q no se corte la fuente?
11 mayo 2006, 14:49
kemie
nateskin, no te va a funcionar texto rotado sin modificar el codigo de sIFR para adaptarlo, ya que por default toma el ancho y el alto del texto, y pone el flash de estas mismas dimensiones.
31 mayo 2006, 06:57
owis
tengo problemas al momento de querer visualizar mi pagina desde iexplorer
cual puede ser el error?, viendolo desde firefox no hay ningun problema con los reemplazos, pero en iexplorer se ve el texto normal… ayuda por favor!
31 mayo 2006, 16:17
estorde
He seguido los pasos uno a uno, ya lo había utilizado el sistema en otra web, sin embargo con esta nueva versión no logro que el tamaño del marcador sustituido (en mi caso el h2) coja el tamaño de letra que deseo (14px).
Le he dado ese tamaño en el archivo sifr.fla (asi como el color del texto, la tipografía que quiero, y los caracteres, todo esto sin problema), además he añadido el tamaño a mayores (por si las moscas) en el marcagor h2 de mi hoja de estilos, pero nada. No logro que me pille el tamaño de la fuente.
Podeis ver lo que os digo en esta web (a medio hacer)
2 junio 2006, 14:18
estorde
Lo siento… a pesar del inconveniente, he publicado la web (se que no debería hacerlo, pero exigencias del cliente).
Podeis ver el ejemplo en hameväki.com
16 junio 2006, 17:55
Alvaro Farfan
Como puedo crear enlaces en el texto reemplazado…???
26 junio 2006, 18:40
Anilorac
Como puedo hacer que los textos reemplazados sean parte de un mail…estoy creando un boletin y lo estoy enviando con la funcion mail de php, pero al momento de enviar el mail no me reemplaza el texto.
Unos textos me los pone en diferente tamaño, a que se debe…
Otra duda es como puedo hacer que el texto reemplazado sea un link o enlace.
10 julio 2006, 14:26
ReynierPM
Bueno veamos:
He comenzado y he seguido el tutorial al paso de la letra. Como estoy trabajando con PHP y un Framework llamado CodeIgniter entonces parece que algo anda mal.
1) Cree mi archivo .swf con la fuente que quiero usar.
2) Personalize el archivo customize_me.as poniendole como dominio el “localhost” puesto que por ahora no tengo hosting ni nada por el estilo y como estoy programando el sitio entonces lo tengo local.
3) He incluido el script de esta forma:
themes/js/sifr/waltdisney.swf”,
sColor:”#000000”,sLinkColor:”#000000”,
sBgColor:”#FFFFFF”, sHoverColor:”#CCCCCC”, nPaddingTop:20,
nPaddingBottom:20, sFlashVars:”textalign=center&offsetTop=6”}));
};//]]>
Fijense los cambios en el sflashSrc.
Resultados: no me sale nada de nada.
Pregunta: Qué estoy haciendo mal?
Salu2
11 julio 2006, 00:14
Jak
Un tutorial estupendo
16 julio 2006, 10:58
AlexOnti
Excelente tutorial.
Son mis primeros jugueteos con sIFR y me salió a la primera. =) Bueno, casi… en IE me dió problemas con un “DIV float” adyacente. En la Wiki de sIFR no encontré respuesta a mi problema, así que le puse un display:inline a mi H1 (en la CSS exclusiva para IE) y problema resuelto.
Veo que aquí en Diseñorama algunos textos sIFR se ven dobles (como sombrita despegada ochentera) y me gustaría aprender a hacerlo. ¿Duplicas el MovieClip “Do not remove this text”?
Salu2 desde la bella Ciudad Chilangótica.
2 septiembre 2006, 05:04
Pablo
Segui todas las instrucciones paso a paso, pero no logro adaptar el tamaño del texto…
con el sifr el texto se me ve muuuuuy chiquito!
No importa cuanto modifique el .fla, el tamaño no cambia!
Que he hecho mal?
12 octubre 2006, 15:28
Ricardo
Kemie excelente tutorial, como todo lo que estás haciendo en este fantástico site…
Bueno yo tengo un problema similar al que comentáis ultimamente, el tamaño de la fuente se me adapta a la cantidad de texto que pongo, es decir, no respeta el tamaño especificado ni me hace saltos de línea para adaptarse cuando los necesita. Imagino que es porque al swf se le asigna un alto. Yo pensaba que el tamaño del swf se adaptaba a la cantidad de texto que pones…
bueno si alguien puede ayudar, lo agradeceré. Saludos a todos!!
12 octubre 2006, 20:21
David
Hola, ¿alguien ha intentando utilizar SIFR con tamaños en ‘em’?.. yo lo he probado pero el texto convertido no me respeta el tamaño especificado en el css.
Por otro lado, y relacionado con esto… si yo tengo en mi css:
padding-top: 1.2 em
¿como pongo ‘nPaddingTop’ en el js del sIFR, si se supone que debe ir en px?
Un saludo.
24 octubre 2006, 10:02
maroc
gracias por el artículo, muy interesante.
mi problema es con el padding bottom, sin especificar ningun padding ni en los css ni en al javascritp los titulop h.. me estan dejando un margin-bottom que no consigo eliminar. aver si alguien ha tenido el mismo problema
17 noviembre 2006, 19:10
ReynierPM
Pues ahora los problemas viene con los elementos reemplazados. He incluido los archivos de sIFR (CSS) y los elementos que reemplazo no se me ocultan y en su lugar sale el texto reemplazado por sIFR + el texto original. Tienen un ejemplo de lo que me pasa aquí:
http://img142.imageshack.us/my.php?image=errorsp1.gif
¿Alguna idea de que puede estar pasando?
30 diciembre 2006, 04:18
Rolo
Como lo has hecho para lograr la shadow en tus h1?
26 enero 2007, 11:56
Ruben Megido
Todo perfecto, pero me sucede algo raro.
Tengo reemplazados los h2 y h3, pero a la hora de visualizar la página en el navegador ¡los h4 no se muestran! Si quito la llamada al script de sifr si se ven de modo que le está afectando de algún modo, pero no tengo ni idea de porqué. Los h4 no están siendo reemplazados en ninguna declaración del script.
28 enero 2007, 22:11
Rodrigo Copiapo
Muy bueno el tutorial, ya estoy biendo como implementar el script en mi web, pero una consulta…. como hacer q no aparesca la ventana en Internet Explorer que prohibe mostrar contenido activo… tu web no presenta este problema pero las que bienen de muestra en la carpeta sIRF si.
31 enero 2007, 09:53
Ruben Megido
Ya encontre la causa, en los estilos oculta por defecto todos los h1, h2, h3 tengamos o no definidos en el script que se van a reemplazar por una fuente flash. Basta con quitarlos o modificar la visibilidad y ya vuelven a aparecer…
15 marzo 2007, 16:33
wilian
necesito crear una pagina de animacion para ver datos desde C# no se como hacer si alguien puede ayudarme gracias necesito lo mas pronto
9 mayo 2007, 15:23
pollo. ..
quien dijo que no funciona en Opera!
16 mayo 2007, 09:01
Eric
Hola a todos, primero el tutorial muy bueno.
El problema que tengo ya ha surgido en alguna conversa. He seguido todos los pasos que estan en el tutorial, pero no hay forma que se vea el texto.
El texto esta linkeado, y se puede acceder al link pero no se ve nada de nada. Ni el texto con la fuente en sifr ni sin el formato flash.
Agradeceria mucho una ayuda, ya que llevo unos dias con el problema y no consigo solucionarlo.Gracias
31 agosto 2007, 08:41
Emanuele
Pues yo no veo los fuentes sostituidos en esta pagina con IE6.. con FF si funciona.. en el IE tengo el nivel de seguridad medio.. necesito cambiar algun parametro??
20 septiembre 2007, 16:50
JDM
El color de la fuente se puede cambiar?
20 septiembre 2007, 18:10
Kemie
sColor:”#000000”
30 octubre 2007, 22:00
coyr
Hola, he implementado sifr y pues me funciona bien. Lo he utilizado en ”.class h2”, mi problema es que no quiero usar el resto de h2 con sifr, sin embargo desaparecieron. Es esto normal?? Se pueden usar algunos h2 con sifr o otros sin sifr. Gracias por tu ayuda ;)
31 octubre 2007, 09:56
Kemie
coyr, checa tus estilos de sifr. probablemente tengas h2{visibility hidden}
cambialo por .class h2{visibility:hidden}
29 noviembre 2007, 19:27
Moon
Hola,
Estoy implementando esta técnica de reemplazo de texto usando sIFR. Mi duda es si el texto reemplazado aun puede ser indexable para buscadores como google. ¿sIFR es compatible con SEO?
Saludos!
24 enero 2008, 19:54
Ivy
Como puedo hacer para que el texto generado tenga background transparente? le puse sWmode=”transparent” y no paso nada, sigue blanco :(
12 marzo 2008, 21:17
Matias
Algunas cosas que vi en los comentarios, aporto por si a alguien le sirve.
SIFR es compatible con SEO, es una de las razones para los cuales fue creado. Si miras el código fuente que genera el navegador verás que el HTML está intacto. El navegador lo lee de pelos.
El background transparente da dolores de cabeza, mejor evitarlo.
El SWmode:”transparent”, si funciona, sirve para que el texto reemplazado no quede por delante de elementos posicionados de manera absoluta como bien se dijo en el tutorial (menús desplegables, lightboxes, etc.). Acá se dijo que no anda con Opera (en la nueva versión 9 sí funciona, Firefox también, Explorers nunca tuvieron drama con esto y la versión vieja de Safari ya casi nadie la tiene… el que tiene Mac suele actualizar sus softwares con frencuencia).
Espero haber ayudado a alguien y sino, la próxima será. GRAN TUTORIAL y MUY BIEN EXPLICADO!!!. FELICITACIONES KEMIE.
19 marzo 2008, 21:34
vuarnet
Excelente tutorial como de costumbre Kemie…
Sólo tengo una observación en el paso 5, creo ques mejor meter el código a un js externo.
Mi sigueinte comentario es en relacion a un problema que estoy teniendo con la propiedad sHoverColor en un menú, cunado se la pongo no hay poder humano que haga que los links funcionen en Firefox (2.0.0.12).
A alguien le ha pasado y como lo soluciono??? yo he optado por cargarme esa función y dejar el texto de un solo color. :(
22 marzo 2008, 00:33
Diseño web Tintapíxel
Muy buen articulo, empezaré a utilizar esta tecnica! Gracias.
28 marzo 2008, 20:42
jack-5
tengo un problema con esto pongo mis acentos en el swf pero no me los muestra estoy utilizando Century Gothic pero a la hora que incremento el height me los empieza a mostrar pero me hace mas grande la letra y eso no lo quiero
.sIFR-hasFlash h1 {
visibility: hidden;
margin: 0;
height: 25px;
me podrian ayudar con esto muchas gracias
7 abril 2008, 03:51
Michel
Gracias Kemie por el tutorial. Por favor, permíteme un aporte:
Hay otra opción para poder embeber una fuente en el .swf sin necesidad de usar Adobe Flash ¡y en un sólo paso!,
es “sIFR Font Embedder”. Lo pueden ver en la siguiente dirección:
http://digitalretrograde.com/Projects/sifrFontEmbedder/
Trae una opción para agregar los caracteres que queramos usar, como las eñes y tildes (siempre y cuando la fuente los soporten obviamente).
Bueno espero que les sirva de algo.
Saludos a todos.
17 abril 2008, 20:05
Florencia
Me encanta tu site, y tus explicaciones son super didácticas. Aquí me tomo mis recreos cuando estoy cansada de trabajar. Gracias por tu espacio!
Saludos desde Argentina
28 abril 2008, 21:06
emiliano|d.r
Hola a todos, he notado que en Firefox le da un padding top y basse, que en IE7 no. Alguna manera de solucinarlo?
28 mayo 2008, 16:56
marisolivier
como se maneja el tema del tamaño de las fuentes???...
8 junio 2008, 00:04
José Luis
Odio sIFR. A veces funciona, otras no. ¿Por qué? Ni idea. Prefiero el Dynamic Text Replacement. Es un tanto menos cacprichoso.
24 junio 2008, 12:31
james
Muy interesante!! Muy buena la web… los artículos y tutoriales están muy bien! os felicito…
2 julio 2008, 21:05
epa epa epa !!!...
execelnte tutorial !!!!… el que no logre montar sifr???? lo debe leer en camara lenta.
25 octubre 2008, 22:59
maribel
ayudeme por favor no aparecen los elementos de la pantalla, y eso me evita a escribir paginas electronicas y no puedo vernada.
14 enero 2009, 15:30
Tadeo René Calderón
¡Hola kemie!. Excelente articulo. Te comento que ya lo estoy usando. Y para poder implementarlo me baje los archivos del sitio oficial y luego para las fuentes que quería usar entré al sitio de sIFR Generator. Sin embargo hay un pero en este asunto y es que tiene un ancho fijo y no puedo personalizar la caja que contiene el texto. Me gustaría que la caja se expanda hasta unos 650px de ancho. Pero como ya dije, no se mueve de lo que trae por defecto.
Bueno, eso es todo. Muchas gracias por todos los artículos que publicas que siempre son de gran interés para mi.
Y también muchas gracias por tu tiempo.
Éxitos.
Saluda atentamente,
Tadeo.
27 enero 2009, 12:50
Joseph
Saludos a todos
De verdad que el tutorial esta muy bueno, solo tengo una consulta…. ya pude hacer que desplegara los caracteres especiales … pero sigo sin poder ponder fondo transparentes de las letras…. este es el codigo que tengo
sIFR.replaceElement(named({sSelector:“body h1”, sFlashSrc:“benguiat.swf”, sColor:”#000000”, sLinkColor:”#000000”, sBgColor:”#FFFFFF”, sHoverColor:”#CCCCCA”, nPaddingTop:0, nPaddingBottom:0, sFlashVars:“textalign=center&offsetTop=0”}));
Gracias por la ayuda
27 enero 2009, 14:18
kemie
Joseph, the falta el atributo sWmode, agrega a tu declaración sWmode:“transparent”,
27 enero 2009, 18:43
Joseph
Hola Kemie…. gracias por la respuesta…
De hecho lo proble y le agregue lo que me dices pero ahora no se despliega nada del texto
sIFR.replaceElement(named({sSelector:“body h1”, sFlashSrc:“benguiat.swf”, sColor:”#000000”, sLinkColor:”#000000”, sBgColor:”#FFFFFF”, sHoverColor:”#CCCCCA”, nPaddingTop:0, nPaddingBottom:0, sFlashVars:“textalign=center&offsetTop=0”, sWmode:“transparent”}));
26 febrero 2009, 04:53
richard
hola tengo un problema estoy usando 3 tipografias para suplantar diferentes textos q son mas de 10 XD bueno uso estas 3:
-traveling typewriter
-lucida sans
-lucida sans unicode
las ultimas 2 funcionan bien
pero la primera no m haceel intercambio no funciona :(
estoy usando la version sifr3-r436
la cual viene con un archivo
de configuracion “sifr-config.js”
aqui les dejo mi archivo de config
var traveling = { src: ‘../flash/traveling_typewriter.swf’ };
var lucida_sans = { src: ‘../flash/lucida_sans.swf’ };
var lucida_sans_unicode = { src: ‘../flash/lucida_sans_unicode.swf’ };
sIFR.activate(traveling, lucida_sans, lucida_sans_unicode);
sIFR.replace(traveling, { selector: ‘cabezera’, css: [ ‘.sIFR-root {font-size:22px; font-weight:normal; color:#ffffff;}’, ‘strong { font-size:25px; font-weight:bold; color:#ffffff; }’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans, { selector: ‘tit1’, css: [ ‘.sIFR-root {font-size:11px; text-align: center; font-weight:bold; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans, { selector: ‘tit2’, css: [ ‘.sIFR-root {font-size:11px; text-align: center; font-weight:bold; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans, { selector: ‘tit3’, css: [ ‘.sIFR-root {font-size:11px; text-align: center; font-weight:bold; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘cont’, css: [ ‘.sIFR-root {font-size:12px; text-align: justify; font-weight:normal; color:#ffffff;}’, ‘strong { font-size:24px; font-weight:bold; color:#ffffff; }’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t1’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t2’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t3’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t4’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t5’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t6’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t7’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t8’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
sIFR.replace(lucida_sans_unicode, { selector: ‘t9’, css: [ ‘.sIFR-root {font-size:11px; text-align: left; font-weight:normal; color:#ffffff;}’, ], wmode: ‘transparent’
});
espero que me puedan ayudar porfa que la vdd no se quees lo q estoy haciendo mal por q veo todo = y todas funcionan exepto una
esta es la pagina en la q lo estoy usando
5 abril 2009, 22:07
mao
Muchas gracias!!! Está muy bueno
18 abril 2009, 06:37
Vic
No funciona con firefox
29 junio 2009, 06:46
Christian
interesante articulo, sin embargo cuando lo use para mi web algo no salio como debia, simplemente, cuando seleccione mi fuente (vi que tenia soporte para las tildes y la ñ) no aparecia la ñ ni la tilde osea que las palabras parecian incompletas, podrias ayudarme a configurar eso por favor. y gracias por este buen aporte
29 junio 2009, 11:37
kemie
Christian, asegúrate que al exportar estés seleccionando todos los caracteres que quieres usar:
Con el area de texto seleccionada, en la barra de propiedades, haz clic en el boton de caracteres (“Character…” en inglés)
Ahi podras especificar diferentes rangos (mayusculas, minusculas, numerales, solo caracteres basicos, todo el alfabeto), y tambien puedes poner caracteres especificos como eñes y vocales con acento.
Haz clic en OK, y listo!
2 julio 2009, 19:52
Esteban
Para los que no pudieron hacer que su flash tubiera fondo transparente,
solo tienen que ubicar en la función el valor:“transparent” en el mismo orden en que está el java scripts ya que la función respeta el ciclo del java scripts.
Asi que si en el J.V la funcion sWmode esta en el orden 13.
deben colocar “tranparent” en el ordén 13.
y yap!! :)
Saluodos
3 julio 2009, 18:46
stella
hola gente, alguien sabe como setear un interlineado en sifr? es que estoy aplicando sifr en un sitio pero los interlineados me quedan gigantes, donde puede modificarse eso? alguien sabe?
gracias!