Más tipografías con sIFR
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][1].
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 y_cross-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 u , 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][2] 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][3]{.verejemplo}
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][4]
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][5]
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][6]
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" /><br />
<link rel="stylesheet" href="sifr/sIFR-print.css" type="text/css" media="print" /><br />
<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 = {<br />
src: 'sifr/tu_tipografia.swf'<br />
};<br />
sIFR.activate(tu_tipografia);<br />
sIFR.replace(tu_tipografia, {<br />
selector: 'h1'<br />
,css: {<br />
'.sIFR-root': {<br />
'color': '#FF0000',<br />
'font-size': 56,<br />
'text-align': 'center'<br />
}<br />
}<br />
,wmode: 'transparent'<br />
});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][7]{.verejemplo}
Miren el código fuente, verán lo simple que es y que funciona de maravilla.
Link⌗
[1]: http://www.csslab.cl/2006/09/25/image-replacement-o-como-reemplazar-contenido-por-imagen/ “Enlace en CSSLab a “Image Replacement o cómo reemplazar contenido por imagen”” [2]: http://www.csslab.cl/2006/04/12/un-paseo-por-la-semantica/ “Enlace en CSSLab a “Un paseo por la Semántica”” [3]: http://www.csslab.cl/ejemplos/sifr/ejemplo1.html “Ver Ejemplo 1 sobre sIFR en CSSLab” [4]: http://www.csslab.cl/wp-content/uploads/2008/05/fig1.jpg [5]: http://www.csslab.cl/wp-content/uploads/2008/05/fig2.jpg [6]: http://www.csslab.cl/wp-content/uploads/2008/05/fig3.jpg [7]: http://www.csslab.cl/ejemplos/sifr/sifr.html “Ver Ejemplo Final sobre sIFR en CSSLab”
