Reemplazar imágenes y texto HTML con Flash | Tutorial sIFR 3 y swfIR

sIFR (texto – titulares)

Los diseñadores web tenemos muchas limitaciones, navegadores, resolución, cumplir los estándares, accesibilidad, y sólo utilizar fuentes de sistema. Bien para esto último hace tiempo que existe una solución, se trata de sIFR que sitios como el magní­fico Critrerion utilizan desde hace tiempo y sin duda mejoran la plantilla. Es importante que bajéis la última versión puesto que se ha solucionado por ejemplo el funcionamiento de los enlaces cuando se utilizaba un color para el rollover.

Los tí­tulos de los artí­culos de este blog, de pqpq.es y de justtellmewhy.com utilizan sIFR 3.

Descarga última versión de sIFR:

http://novemberborn.net/sifr3/beta2 (actualmente la versión 3 de la que puedes obtener toda la información en esta wiki).

Esta es una galerí­a con más ejemplos del uso de sIFR 3:

http://wiki.novemberborn.net/sifr3/Examples

Lo que hace es utilizar tecnologí­a Flash y Javascript para renderizar un texto con la fuente que incluyamos en una pelí­cula Flash alojada en el servidor. El proceso es el siguiente:

  1. Se carga el XHTML
  2. Mediante una función javascript se chequea si está instalado o no el reproductor de Flash, si no lo está se seguirá viendo el XHTML normal con la fuente de sistema.
  3. Si está instalado se buscan los elementos, se miden y se crean los swf necesarios para colocarlos en vez del texto.

Bondades:

Es accesible, liviano, rápido y compatible.

Notas:

  • Pudiera ser que sobre el texto que vas a sustituir tengas algún fondo que quieras mantener. No todos los navegadores son compatibles con Flash transparente además de consumir más este parámetro.
  • El menú contextual cambia.
  • En los enlaces se pierde la posibilidad de hacer clic con el botón central o CTRL+Clic para abrirlo en una nueva ventana o pestaña.

Plugin para WordPress

Puedes añadirlo a cualquier sitio pero si utilizas WordPress quizás te sea más fácil instalar este plugin, aunque advierto que no es de la última versión:

Descargar Custom Font WordPress plugin

Lo subes y lo activas como cualquier plugin, recuerda renombrar la carpeta antes de subirla a solo custom_fonts.

Puedes elegir entre una serie de fuentes que vienen ya con el plugin:

‘A Charming Font’
‘Allstar’
‘Arno Pro’
‘Beautiful Ink’
‘Creaminal’
‘Cretino’
‘Flowerchild’
‘Hirosh’
‘Luna Bar’
‘Rounded Cent’
‘Sonderfistad’
‘Tondo’
‘Trade Gothic’
‘Type Knight’
‘Van Den Keere’
‘Vivaldi’

Una vez activado te diriges a Design (Diseño) > Custom Fonts donde aplicas reglas (blocks) para asignar una fuente u otra según el selector CSS y las páginas donde aparezcan.

Si por ejemplo lo que necesitáis es cambiar el tipo de los tí­tulos de los posts, seguramente puedas poner como selector h1 o h2 y listo.

Pero si quieres otra fuente lo que necesitas es crear el archivo swf con la fuente que tú quieras y que debes tener instalada en tu equipo. Si lo haces como explican desde la web del plugin no podrás añadir los glifos con tildes, recuerda que las fuentes que vienen con sIFR no incluyen los glifos, los caracteres con tildes, ni la ñ o Ñ o el signo para abrir interrogación ¿

Descarga http://novemberborn.net/sifr3/beta2

Este .zip contiene todo lo necesario, la documentación y ejemplos para configurarlo en cualquier sitio incluido WordPress, sin la necesidad del plugin.

  1. Abres en Flash el archivo sifr.fla en la carpeta Flash
  2. Haces doble clic en el movieclip «holder» de la biblioteca
  3. Elimina el texto para que ocupe menos, si quieres usar Bold o Italic inserta 1 solo carácter.
  4. En Propiedades cambias la fuente.
  5. En Propiedades haces clic en Incorporar y añades los glifos con tildes, la ñ y los que necesites.Reemplazar imágenes y texto HTML con Flash | Tutorial sIFR 3 y swfIR - 0 - elfinalde
  6. Publicas el swf con estas opciones

Reemplazar imágenes y texto HTML con Flash | Tutorial sIFR 3 y swfIR - 1 - elfinalde

Una vez creada por ejemplo futuraligth.swf debes subirla a esta carpeta:

wp-content/plugins/custom_fonts/sifr/fonts/

Para poderla utilizarla desde Diseño > Custom fonts edita el archivo «custom_fonts.php», verás el listado de las fuentes anteriormente descritas, para añadir la o las tuyas añade tantas lí­neas como fuentes de la siguiente forma:

$cf_fonts[] = 'New Font Name';

Opciones avanzadas

Si puedes hacerlo sin plugin siempre tendrás más opciones, puedes utilizar la extensión para Dreamweaver o seguir estos pasos:

  1. Enlaza en tu <head> los archivos sifr.js, sIFR-print.css y sIFR-screen.css
  2. Edita el archivo de la carpeta js sifr.js e incluye una llamada a la función para reemplazar el texto según el selector que quieras:
var nombre = { //le puedes poner cualquier nombre a la variable

src: 'tufuente.swf' // Pon la ruta a tu archivo creado en el paso anterior

}; sIFR.activate(nombre);

sIFR.replace(nombre, {

selector: 'h1', css: [ 'a { text-decoration: none; }' ,'a:link { color: #000000; }' ,'a:hover { color: #E2A42B; }' ]

});

Este código es el que reemplaza h1 que corresponde a los tí­tulos de los artí­culos en este blog. Os ruego que si alguien tiene algún problema me deje un comentario con la configuración de su equipo y navegador.

Recuerda que la última versión corrige muchos bugs aunque sigue en Beta, puedes hasta añadir filtros de Flash a tu text

swfIR (imágenes)

Con la misma tecnologí­a se ha desarrollado swfIR (swf Image Replacement), algo parecido a sIFR pero para imágenes, en este caso la descarga son sólo 3 archivos, un zip de 11,89KB:

  • 1 txt con las instrucciones
  • 1 javascript al que llamas desde el head
  • <script src="swfir.js" type="text/javascript"></script>

  • 1 swf que también debes alojar en tu servidor

Reemplazar imágenes y texto HTML con Flash | Tutorial sIFR 3 y swfIR - 2 - elfinalde

Por último añades el comando javascript dentro de window.onload, puedes modificar todos estos parámetros según selectores CSS especí­ficos o usando la etiqueta img para todas las imágenes:

  • border-radius
  • border-width
  • border-color
  • shadow-offset
  • shadow-angle
  • shadow-alpha
  • shadow-blur
  • shadow-blur-x
  • shadow-blur-y
  • shadow-strength
  • shadow-color
  • shadow-quality
  • shadow-inner
  • shadow-knockout
  • shadow-hide
  • rotate
  • overflow
  • link
  • elasticity

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. Muchas gracias por mencionar aqui tan detalladamente mi plugin. Pondre un vinculo en su pagina para que Españoles puedan leer esta documentacion tan estupenda.

    Pronto estara lista la version 3 del plugin, que utilizara sIFR 3. Estoy esperando a que Mark Wubben (El desarrollador principal) acabe de comprobar la ultima beta…

    Solo una cosa, en el paquete de fuentes que incluyo con el plugin he tenido en cuenta el tema de los acentos, y la mayorí­a de ellas si tienen soporte para tildes y ñ, creo que todas excepto Tondo pueden…

    En resumen, un gran post, y muchas gracias.
    Alejandro

  2. Hola Alejandro,

    En primer lugar enhorabuena por tu trabajo, estoy seguro que tu plugin será un exitazo, ya que hablas español cuando hagas la actualización igual puedes ponerlo en este idioma.

    Sobre las fuentes, antes de hablar de él lo instalé en mi blog de prueba, en http://www.pqpq.es con la Trade Gothic y según recuerdo no contení­a las tildes, confí­rmamelo por favor cuáles tienen todos los caracteres para español (tildes en mayúsculas y minúsculas, ñ y Ñ y el signo de abrir interrogación ¿) Si hay fuentes compatibles actualizaré el post para dar la información correcta.

    Muchas gracias por el enlace y seguiré tu trabajo para ver ese plugin con sIFR 3

    Un saludo

  3. Hola tengo un problema estoy intentando crear mi fuente, hago todo al pie de la letra y agrego mi fuente, todo bien cuando la pruebo en el localhost pero al subirla a mi servidro no funciona, el resto de las fuentes que ya vienen incorporadas trabajan bien excepto la mia en el servidor, alguna solucion?

  4. hey sigo aca, ya hasta me da pena tanta consulta, pero hay manera de poder remover el fondo? me da algo de miedo meterme a moverle a los scripts.

    por cierto Felicidades por el plugin es muy util

  5. Hola de nuevo Claudio,

    Edita el archivo de la carpeta flash > Options.as

    En él puedes configurar las propiedades del swf de la fuente que se genera, por ejemplo la opacidad o el modo de fusión:

    http://wiki.novemberborn.net/sifr3/Flash+Configuration

    Aunque creo que lo que necesitas es hacer el flash transparente para ello debes utilizar javascript:

    wmode (String)
    Specifies the window mode of the Flash movie. When transparent the movie will be transparent. When opaque elements can be displayed on top of the movie. If transparency is not supported wmode will be set to opaque and the background color specified in the CSS will be used. Therefore, it is important to always specify a background color!
    transparent (Boolean)
    Equivalent to wmode: ‘transparent’, if set to true.

    http://wiki.novemberborn.net/sifr3/JavaScript+Methods

    El plugin no lo he desarrollado yo, lo he publicado como ayuda en el caso de que no quieras instalarlo manualmente.

    Un saludo

  6. Por un momento estuve a punto de tirar el Sifr, porque no me mostraba caracteres como Ñ, í, etc, pero me encontré con tu guí­a y todo quedó perfecto ahora… muchas gracias por el aporte.. saludos