Más tipografías con sIFR

8/may/2008 18

Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama de tipografías disponibles a la que podames aspirar que posean todos los usuarios. Hablamos de Arial, Helvetica, Verdana y Tahoma para las sans-serif (palo seco); Georgia, Times/Times New Roman para las serif y Courier/Courier New para monospace. Y sería, tenemos limitada la creatividad con eso. Si pensamos en utilizar una font especial, lo único que tenemos es recortarla como un GIF y ponerlas con alguna técnica de text-replacement.

Pero ya existe sIFR. Acrónimo de Scalable Inman Flash Replacement, es una técnica que permite que reemplaces elementos de texto con equivalentes en Flash. sIFR es una solución cross-browser ycross-platform para asuntos de tipografía en la web.

Su funcionamiento es bastante práctico. Está compuesto de una película SWF, un archivo Javascript y dos archivos CSS. Con el .swf lo que hará es incluir la tipografía que quieras utilizar en uno o varios estilos (normal, bold, italic). Con el .js se realizará la magia de reemplazar el texto que definas con la película .swf pero sin inyectar el objeto, o sea, tu código fuente generado no tendrá ningún <embed> u <object>, sino que estará el texto que tengas escrito tal y como sería un HTML. Ya los .css ayudan al .js a emplazar las películas (a través de un juego con visibility).

La idea no es reemplazar todos tus textos con tipografías en Flash, sino ser prudentes y sólo enfocarnos en títulos, bloques (blockquote) u otros elementos destacables. Lo bueno es que no pierdes la semántica y los indexadores leerán tu sitio tal y como sería un HTML, ya que realmente ES un HTML. Otra ventaja es que si utilizas la película Flash más de una vez, ésta quedará en el cache del usuario y será cargada sólo una vez, lo que no hará taaaaaaan grave el peso que ganas con esto. Ahora, veámoslo en la práctica:

Ver Ejemplo 1

No es muy complicado de implementar, pero me costó la primera vez así que lo haré didáctico para todos, detallando paso por paso.

Paso 1

Bajar el sIFR de su sitio web.

Paso 2

Crear tu película .swf con la font que desees. Para eso, debes abrir el .fla que está dentro del directorio flash y abrir el MovieClip ‘holder’, allí seleccionas el área de texto dinámico y cambias la tipografía que trae por defecto (Verdana) por la que quieras (en mi caso será Frutiger Condensed… bella).

Paso 2: seleccionar tipografía en sIFR

Un detalle importante para textos no-anglos son los acentos. Por defecto se incluyen caracteres básicos, números y algunos símbolos. Debes agregar a mano los acentos para nuestro idioma que creas necesarios: á é í ó ú ñ ä ë ï ö ü.

Paso 2: seleccionar caracteres especiales para sIFR

Luego publica tu película como siempre lo haces en Flash (command+enter o control+enter en Win) dentro de esta carpeta que estás trabajando (flash). Esto es importante ya que contiene algunos .as que hacen que la magia ocurra. Ponle un nombre característico a tu .swf, quizás el nombre de la familia tipográfica que estás usando sería apropiado.

Paso 2: exportar película para sIFR

Paso 3

Ordena tus archivos. Recomiendo que los juntes dentro de un único directorio llamado /sifr. Los únicos que necesitarás de todo eso son:

  • tu_tipografia.swf
  • sIFR-print.css
  • sIFR-screen.css
  • sifr.js

Paso 4

Ahora toca configurar nuestro HTML. Lo primero es incluir el .js y los .css correspondientes:

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

Lo segundo, agregar algunos comandos en Javascript para hacer que nuestra película funcione con los selectores que deseemos:

  var tu_tipografia = {
     src: 'sifr/tu_tipografia.swf'
};
sIFR.activate(tu_tipografia);
sIFR.replace(tu_tipografia, {
     selector: 'h1'
     ,css: {
          '.sIFR-root': {
          'color': '#FF0000',
          'font-size': 56,
          'text-align': 'center'
          }
     }
     ,wmode: 'transparent'
});

Claramente la variable tu_tipografia y todo lo que tenga este nombre deberá coincidir con el nombre que le has puesto a tu película SWF con la fuente que agregaste en el Paso 2.

El resto son comandos donde dicen cuál es el selector que quieres reemplazar (un H1, una class, un id… enfin) e incluso comandos CSS (no todos, principalmente para estilos de texto como color y tamaño por ejemplo).

Paso 5

Subir todo a un servidor, ya que localmente no podrás ver nada. Desde ahí la verás los resultados.

Ver Ejemplo Final

Miren el código fuente, verán lo simple que es y que funciona de maravilla.

Link

Comentarios

  1. Byteheadx [#]

    De lujo … muchas gracias …. esto si que me ayuda.

  2. fearlex [#]

    Honestamente, acabas de darme el mejor regalo en mucho tiempo, con esto se resuelven muchaaaaass cosas, y lo mejor de todo, trabaja con IE por suerte, o por desgracia.

    😀 Saluudos

  3. Rolando Murillo [#]

    Sí, por ambas, fearlex, porque almenos será compatible aunque éste script es no-obstrusivo pues si no es compatible no carga y se vé el texto normal, pero es mejor que funcione con cualquiera, así nuestro sitio se ve bien en cualquier lugar. Buen aporte Jorge, veré cómo incorporarlo con acualicio.us.

  4. Felipe [#]

    Ohhhh, si si si! me pone cuando accesibilidad diseño flash es posible! :)

  5. Carlos [#]

    Muy bueno muchas gracias, pero no anda para explorer 7 :(

    Existe algún parche?
    Gracias

  6. Usando sIFR, definitivamente — Tablosign [#]

    […] diseños de una manera editable, sIFR es la solución, usando la tecnología Flash y JavaScript. Hay un tutorial muy explícito en CSSLab. 0 […]

  7. Luciano [#]

    ¡Genial! Pero al comprobar que no funciona en IE7 he desistido de utilizarlo. Como dice Carlos: ¿Existe algún parche u otra alternativa que funcione con todos los navegadores?

    De todas formas ¡Muy bueno!

  8. Diseño Web [#]

    Lo había visto pero no lo había estudiado, la verdad es un gran avance, nos evitará mucho tiempo empleado en explicarle a clientes y algunos diseñadores que no es posible utilizar cualquier tipografía.

    Muchas gracias por el artículo también explicado como siempre.

    Lo del error con ie7 tendrá que ser un error en este ejemplo porque esta en la lista de navegadores soportados: http://wiki.novemberborn.net/sifr3/Supported browsers

    Además por ejemplo en la siguiente página lo puedo ver funcionando correctamente en ie7:
    http://zavesky.nofuture.cz/

  9. Jorge Epuñan [#]

    Revisare el tema de IE7… gracias por hacerlo notar, saludos.

  10. Francisco Sepúlveda [#]

    Hola, esta rebueno el artículo, pero tengo una duda, se puede hacer algo para que maneje varios swf (osea para ocupar dos o más fuentes distintas)

  11. Maitetxu [#]

    A mí con el firefox ningun problema, pero el explorer nada de nada, alguien ha encontrado la solución??? Me salvaría la vida

  12. Walter [#]

    hola, para poner a funcionar el sifr en IE7, es mejor descargar el ejemplo completo y ahi si poder realizarlo de otra forma no lo logré, ya que hace falta unos parámetros de flash que se encuentran en el html, si se tiene un sitio dinámico toca es colocar el js que enlaza a la clase o etiqueta antes de para que tome las etiquetas de todo el sitio o colocarlas en clases de css.. ojalá les sirva ya que de esa forma logré solucionarlo.

  13. Walter [#]

    <object data=”sifr/spaceboy.swf” name=”sIFR_replacement_0″ id=”sIFR_replacement_0″ type=”application/x-shockwave-flash” class=”sIFR-flash” width=”1664″ height=”64″>

  14. Walter [#]

    perdon lo ultimo no era sino:

    <script type=”text/javascript” src=”sifr/sifr.js”>

    var spaceboy = {
    src: ‘sifr/spaceboy.swf’
    };
    sIFR.activate(spaceboy);
    sIFR.replace(spaceboy, {
    selector: ‘h1′
    ,css: {
    ‘.sIFR-root': {
    ‘color': ‘#FF0000′,
    ‘font-size': 56,
    ‘text-align': ‘center’
    }
    }
    ,wmode: ‘transparent’
    });

  15. Walter [#]

    y usen la versión 406 esa fue ña que me funciono :) ke pena tanta molestadera

  16. Gabriela [#]

    Hola, alguien sabe como puedo hacer para que el color del selector (h1, h2, etc) se pueda colocar en el css y no en el js??

  17. sauu [#]

    ¡Muchas gracias!

  18. Más y mejores tipografías con @font-face | CSSLab | Laboratorio de ideas web [#]

    […] una propiedad font-family donde quieras incluirlas. Quizás ya conocías Cufón o SIFr, pero desde que uso @font-face he notado que es bastante más rápido en la carga y es […]

Deja tu Comentario

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

CSSLab