Tutorial: Cómo utilizar sIFR
sábado, 10 de febrero de 2007

sIFRsIFR (Scalable Inman Flash Replacement) es una conocida tecnología que permite reemplazar pequeños trozos de textos por su equivalente en Flash. Su modo de operacion se basa en combinar JavaScript, CSS y ActionScript. Su mayor utilidad es poder mostrar textos con tipografías que el usuario no tiene instalada en su computadora. [ Ejemplo ]

Además en caso de no tener instalado Flash Player, sIRF lo detecta y nos muestra el texto original. Por otra parte no es recomendable para textos grandes, sino para títulos, encabezados y muy pequeños párrafos. Su ultima version es la 2.0.2

Entonces, si tenemos un texto como este:

Lorem ipsum dolor sit amet

 

Con sIRF veremos:


En el ejemplo se ve el texto con la fuente Scriptina .  Y aca no hay limite, se puede utilizar cualquier fuente (siempre y cuando se respete la licencia de la tipografia)...

 

 

Implementación

En primer lugar necesitaremos 4 archivos que vienen dentro del paquete de descarga [ Bajar ]

  • sifr.js : Es el script que permitirá intercambiar el texto HTML.
  • sIFR-screen. css y sIFR-print.css : son los estilos en cascada necesarios para mostrar el .SWF. Ademas debemos contar con nuestro propio estilo en cascada principal, con las reglas que formatearán los textos originales (en caso de no tener habilitado el Flash Player)
  • tipografia.swf: Es el archivo Flash que contendrá la fuente que se utilizará. En el paquete de descarga vienen dos:  tradegothic.swf y vandenkeere.swf. Es decir que uno de los archivos contendrá la fuente Trade Gothic y el otro VandenKeere.

 

Para obtener el archivo SWF hay que seguir una serie de pasos. Además hay que contar con Flash para hacerlo. Sin embargo en FONTSMACK hay una gran cantidad de SWF para usar con sIRF. En caso de querer introducir tu fuente aca está la explicación (Sección Exporting the Flash file)

Lo primero que se hace es añadir  los CSS y el JS. Para eso entre <head>y </head> ponemos:


HTML
  1. <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
  2. <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />
  3.  
  4. <script src="sifr.js" type="text/javascript"></script>

 


Luego supongamos que tenemos un encabezado con la etiqueta H1:

HTML
  1. <h1><a href="http://www.google.com" target="_self">Google</a></h1>

 

Finalmente debemos incorporar un pequeño codigo JS con los parámetros de sIRF. Los más importantes son:

  • sSelector: La etiqueta HTML a reemplazar;
  • sFlashSrc: El archivo Flash;
  • sColor: El color de las letras, en hexadecimal (#FFFFFF);
  • sLinkColor: El color en caso de ser un link;
  • sHoverColor: El color cambiante en caso de ser un link;
  • sBgColor: El color de fondo.

Existen varios parámetros más, en el wiki de sIFR explican que es cada uno [sección Replacement Syntax]

Por lo tanto agregaremos un pequeño codigo JavaScript con los parámetros arriba puestos:

HTML
  1. <script type="text/javascript">
  2. if(typeof sIFR == "function"){
  3.     sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"actionIs.swf", sColor:"#99C137", sLinkColor:"#99C137", sBgColor:"#FFFFFF", sHoverColor:"#508A15"}));
  4. };
  5. </script>

 

De esta forma estamos indicando que se debe reemplazar el texto entre las etiquetas H1 por el archivo actionIs.swf (que contiene la fuente Action Is ). Además el color de las letras debe tener tonos verdes con un fondo blanco.

En caso de querer agregar más reemplazos tenemos:


HTML
  1. <script type="text/javascript">
  2. if(typeof sIFR == "function"){
  3.     sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"actionIs.swf", sColor:"#99C137", sLinkColor:"#99C137", sBgColor:"#FFFFFF", sHoverColor:"#508A15"}));
  4.     sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"vandenkeere.swf", sColor:"#FFFFFF", sLinkColor:"#FFFFFF", sBgColor:"#CCCCCC", sHoverColor:"#F5F8FF"}));
  5. };
  6. </script>

 


 En este caso se agrego para que reemplace a la etiqueta H2. Y eso es todo, si tenemos algo así:

Google

 

Implementando sIFR quedaría:


 

Unos puntos más para agregar

  • Los usuarios de Firefox que tengan la extensión Adblock no verán su solapa sobre el archivo Flash. Sin embargo los que tengan la extension Adblock Plus si se mostrará la solapa. Esto es porque el CSS que crea dicha solapa no deja casi ninguna propiedad para quitarla. El CSS que pone las solapas es este .

 

  •  Existe un addon para sIFR que permite darle la posibilidad al usuario de ver o no los textos en Flash. Este addon viene en el paquete de descarga y se llama sifr-addons.js. De esta forma si agregamos este archivo entre <head> y </head>


HTML
  1. <script src="sifr-addons.js" type="text/javascript"></script>



Y luego agregamos un link asi haremos que se desabilite sIFR:


HTML
  1. <a href="javascript:sIFR.rollback();">Quitar sIFR</a>

 


 

 


Tags:  tutorial css javascript flash diseño



 Comentarios (6)
 1 Escrito por Jose Llinares website, el 20-12-2007 08:17
Por lo que veo, el texto se muestra a través de un javascript, es decir que esto no es nada apropiado para buscadores. ¿Existe alguna instrucción para mostrar el texto alternativo?¿Alguien sabe algo sobre lo \"amigable\" de esta técnica con buscadores? 
Gracias!
 2 Escrito por Leonardo Picado website, el 01-01-2008 19:23
Jose 
 
El texto es reemplazado através de JavaScript, el texto siempre es desplegado en la página (pero sin la tipografía seleccionada) aunque el usuario tenga JS o Flash desactivado, lo que nos lleva a decir que es amigable con los buscadores.
 3 Escrito por Gustavo Fino website, el 09-01-2008 11:39
para modificar el tamaño de la font, solo hay que editar el archivo sIFR-screen.css especificando el FONT-SIZE: 99px; correspondiente. 
 
cualquier otra receta es complicación extra innecesaria. 
 
saludos, feliz 2008, muy buen tutorial, felicitaciones por el esfuerzo de realizarlo.
 4 Escrito por cristian, el 22-01-2008 15:01
excelente la explicación, muy útil. 
agradecido por la ayuda, 
saludos 
cristian fortunato
 5 Escrito por Ray Acosta website, el 03-03-2008 21:29
Consulta: 
 
Saludos. Gracias por la explicación de este tutorial. Bajé los archivos de Mike Industries. Todo funciona bien, pero... 
 
Soy diseñador, y como adivinarán implementar códigos es toda una aventura y aquió estoy. 
 
Con el html de ejemplo y sustituyendo el swf con las fuentes no hay problelma. Pero cuando integro los css y js links a otra págnia, no funciona. 
 
¿Se trata de que debo utilizar los nombres de ID que vienen en los css del paquete? 
 
¿Alguna sugerencia para personalizaros? 
 
Simplemente no los muestra hasta que no utilizo el mismo html y los IDs originales.
 6 Escrito por maximiliano lanzi website, el 24-06-2008 21:51
la verdad q muy util y muy bien explicado, lo que no logro hacer es quitarle el color de fondo, he probado con borrarle la etiqueta \\\"sBgColor: El color de fondo.\\\" pero sigue apareciendo blanca, se tendra que hacer desde el fla?


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code
 
Delicious
Mister Wong
< Anterior   Siguiente >
[Volver]

Suscribirse por feed


Suscribirse por e-mail

Tu dirección de correo
  • Aleatorios
  • Lo más leido
  • Destacados

Nube de tags

Sitios Recomendados