Este es el weblog de Alberto Contreras D'R (ViB). Acá se habla sobre diseño y tecnología web (aunque a veces me pueden bajar algunos "impulsos" y publico sobre cine, música, literatura, artes visuales o cualquier otra cosa que me haya llamado la atención). 
Reemplazo de Textos con Flash (sIFR)
Los diseñadores web siempre hemos tenido que lidiar con un hecho insoslayable: hay un cierto número de tipografías que podemos usar en el web…el resto, simplemente no se muestran. Punto.
El sIFR (o Scalable Inman Flash Replacement creada por Mike Davidson) es una tecnología que mejora sustancialmente el IFR (o Inman Flash Replacement creada por Shaun Inman) Esta tecnología permite, (a través de Javascript y Flash) reemplazar determinados tags html (h1, h2, etc) con texto generado on-da-fly por Flash. Este texto se mantiene seleccionable, linqueable y accesible (¡para los puristas de los estándares!) como cualquier otro texto html normal, salvo que esta vez puede llevar la tipografía que más calce con nuestro diseño…¡¡¡Ufff que alivio!!
El sIFR ha estado dando vueltas por el web desde hace algún tiempo, pero quizá porque las primeras versiones eran un poco complicadas de implementar, no logró expandirse con la rapidez que uno hubiera esperado. Ahora ya está madura la idea y el software. ¡Finalmente pude echarlo a andar! (los títulos de las secciones y artículos de este blog están hechos con esta técnica)
Este artículo no pretende ser un sustituto de la documentación que obtienes cuando bajes el sIFR. Ahí están los trucos principales para “sIFRear” tus sitios. Acá vas a encontrar un par de atajos que te ayudarán a no perderte en la madeja de acciones que TIENEN que ser hechas para que el sIFR funcione como debe. Yo estuve a punto de “tirar la toalla” un par de veces y después de horas cabeceándome encontré UNA manera. Pueden haber MILES. 
Primero: Lo primero:
- Bájate la última versión de sIFR
- Descomprime el archivo .zip
- Léete la documentación (ahí está todo o casi)
Segundo: El sitio
- Diseña tu sitio normalmente (basado en hojas de estilo, claro está)
- Define cuáles son los elementos que vas a querer sustituir posteriormente.
, no es muy recomendable abusar de esta tecnología. Llenar una página de llamadas a un script es, aparte de feo, un sin sentido.
Tercero: En Flash
- Abre el archivo sifr.fla (incluído en el .zip que bajaste) con Flash MX 2004 ó Flash MX.
- Doble click en el bloque de texto invisible que aparece en el centro del stage.
-En la paleta “Propiedades” define qué tipografía, de las que tienes instaladas en tu compu, quieres que sean las que se muestren finalmente en el sitio.
- Click en el botón “Character” y selecciona todos los caracteres necesarios. Te recomiendo que en el campo “Include this characters” -Incluir estos caracteres- tipées además todas las vocales acentuadas en Mayúsculas y Minúsculas. De esta forma te aseguras que las palabras acentuadas se van a mostrar correctamente.
- Exporta tu movie como lo harías con cualquier otra y dale un nombre que puedas identificar (En mi caso, y para mantener las cosas en orden, siempre uso el nombre del tag que voy a sustituir Ej: Si voy a sustituir los h1, mi movie con la tipografía se llamará h1.swf)
Esta movie necesita ser exportada a la misma carpeta donde se encuentran todos los archivos que recién bajaste. En esa carpeta hay dos archivos más (”customize_me.as” y “dont_customize_me.as”) que le sirven a Flash para insertar toda la información necesaria en el .swf que vas a exportar. No es necesario subir estos dos archivos a tu web server.
Cuarto: En los CSS
Quinto: El Javascript
</script>
Inserta el siguiente código justo antes de que se cierre el body.
<script type="text/javascript">
//< ![CDATA[
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));
};
//]]>
</script>
Sustituye lo que aparece entre comillas en sFlashSrc:"vandenkeere.swf" por el nombre de la .swf que exportaste. Además puedes cambiar el color de tu texto (sColor), el color de tu texto cuando sea un link (sLinkColor), el color de fondo de tu texto (sBgColor), etc.
En la documentación viene especificado para qué sirve cada uno de estos argumentos. Vienen otros además.
En este caso sólo estamos sustituyendo el tag “h2″. Si deseas sustituir otros tags sólo tienes que copiar y pegar la declaración anterior y cambiar el nombre que aparece entre comillas en el parámetro “sSelector”. Esto tiene la ventaja de que puedes crear cuantos argumentos de sustitución quieras. Si, por ej., quisieras sustituir el tag h3 dentro del div #contenido, lo tienes que declarar de esta forma: sSelector:"#contenido h3"
Si has seguido todos los pasos hasta acá, abre tu sitio en tu browser (ojalá Firefox ) y tus “h2″ deberían estar mostrando la nitidez propia de las películas Flash. El “sIFReo” está funcionando.¡¡Bien!!
Sexto: Los trucos en el CSS
Es probable que el primer problema que tengas sea que el tamaño de tus fonts ahora no sea exactamente el que querías tener. Te recomiendo que no alteres el tamaño de tus definiciones de estilos originales. Mejor altera los tamaños en los bloques de estilos que copiaste y pegaste desde “sIFR-screen.css” y “sIFR-print.css”. Esto además, te va servir para, si quieres desactivar sIFR en el futuro, no tendrías que volver a repasar tus estilos originales y si tus usuarios no tienen Flash instalado (¡lo dudo!), verán igual tu texto formateado con los parámetros originales.
Revisa bien tu hoja de estilos. Para cada “tag” que quieras reemplazar tienen que haber tres estilos asignados: el original, el basado en “sIFR-screen.css” y el basado en “sIFR-print.css”
Si tus estilos originales involucran el uso de “padding”, inserta el mismo valor en los estilos que copiaste y pegaste. ESTO NO ES PARA TOMARLO A MENOS. Te puedes pasar una tarde entera tratando de averigüar por qué tus títulos se comportan tan raros y algo tan simple como esto puede ser la causa.
En este parámetro: “offsetTop=0″ es mejor que mantengas el offset en 0. Según vayas incrementando ese valor tus textos se van a ir “cortando” por la horizontal, o sea, reduciendo el área donde se muestran.
Evita usar el parámetro “height” en tu css. Las letras tienden a escalar su tamaño para llenar esa altura y te puedes tropezar con el caso de que un título que tiene 50 letras se ve espectacular pero que otro, que sólo tiene 10, las letras se agrandan, tratando de llenar un “espacio” que nadie las forzó a usar.
Trata de no usar muchos .swf distintos para tus títulos. El sIFR puede llegar a consumir muchos recursos de la máquina de tu usuario y no todos tienen un G5 (era broma, era broma! 
)
De nuevo: lee la documentación. Te vas a ahorrar un par de dolores de cabeza.
Este no es un truco y mucho menos una recomendación: Por alguna razón que desconozco cuando empecé a testear todo este proceso en Mac, no me resultó. Los .swf no salían con todos los caracteres necesarios y cosas por el estilo. Desde un PC todo funcionó de maravillas. Mmmmmm…raro ¿cierto?
————————————————————————
Hasta aquí este pseudo tutorial.
Yo no soy ningún experto en sFIR, pero de tanto cabecearme algo he ido entendiendo. Si tienes alguna duda (que yo pueda responder, claro está) puedes dejarla en los comentarios y yo trataré de responderla lo antes posible.
Acá dejo algunos otros links relacionados con el sFIR que te pueden ayudar:
Foro dedicado exclusivamente al tema sFIR
Página de ejemplos
Cuando ví esta página fue que quedé marcando ocupa’o
Mark Wubben
Blog personal de uno de los creadores de sFIR
CC-CL 2.0
Si no se dispone del flash para crear un archivo .swf se pueden utilizar las fuentes que se están en http://www.fontsmack.com/
Hey. Genial. Lo intenté una vez y me rendí, todo salía muy mal, vamos a ver si ahora ene español y de alguien que no le quedó grande puedo.
Saludos.
Dr. Zippie,
El problema con los swf de fontsmac.com es que en su mayoría no traen todas las puntuaciones en español..o sea, las eñes y acentuaciones. Entonces hay que usarlas con cuidado.
Se pueden comprobar las fuentes en fontsmac y bajar luego las versiones con el charset español
Hay muchas con todos los caracteres.
Alberto, una consulta con respecto a la utilización de sIFR… se puede trabajar con flash 8 pero exportando el swf como flash player 7?
Que estés bien.
Saludos.
[…] La librería que usaba se llamaba sIFR, y si queréis usarla, aquí tenéis un manual de instalación de sIFR. […]
Hola, esta estupendo este tuto sobre sIFR, y es de los pocos en español que se consiguen. Pero tengo un estupido problema (de seguro) que llevo días sin poder resolver:
Resulta que en Firefox 2.0.0.1 se muestran tanto los headings (hx) HTML como el flash correspondiente con su texto .Y en IE explorer funciona perfecto!!!…
No entiendo, los archivos sIFR-screen y sIFR-print estan bien declarados y cargados. Por raro que parezca, pareciera que Firefox no esta interpretando bien las reglas CSS.
Por favor, te agradeceria si me pudieras dar un consejo al respecto, ya revise todo el wiki de sIFR y no se dan mayores explicaciones, porque todos los que han tenido este percanse solo han olvidado cargar bien los estilos.
Disculpa la molestia
Que estés bién. Saludos
[…] Virtuality in Black » Blog Archive » Reemplazo de Textos con Flash (sIFR) - […]
very thanks
Gracias