¿Te aburren las tipografá­as de siempre o deseas usar otro tipo de letra diferente a los que comúnmente se usan en internet? Pues aquí tienes este tutorial para aplicar sIFR en un simple paso a paso. Se trata de una traducción libre y un poco «macarrónica», lo admito, de este magná­fico tutorial de Design Intellection que encontré en webeame.

Después de seguir este tutorial, tendrás un conocimiento básico de cómo funciona sIFR.

El tutorial se divide en seis secciones:

1. Descarga de todos los archivos necesarios,
2. creación de archivos Flash para el tipo de letra que desees,
3. subiendo los archivos necesarios,
4. sustituyendo la llamada al texto «normal», por texto ‘sIFR’,
5. dando estilo al nuevo texto,
6. aplicando toques finales,
7. y finalmente, notas y más recursos.

Antes de comenzar, debes tener estas cosas en mente:

• No hay que modificar ningún archivo, salvo aquellos que se descargan de la web de sIFR. Por lo tanto, no tienes que preocuparte por editar tus actuales hojas de estilo, etc
• sIFR se degrada muy bien, por lo que no tienes que preocuparse por los usuarios que no tengan el Flash y/o el JavaScript habilitado.
• No usa demasiado ancho de banda (en comparación con los tá­picos archivos Flash).
• sIFR sólo funciona en un servidor web, no en local (es decir, en tu ordenador).
• Si lo deseas puedes utilizar el archivo sifr-debug.js en este tutorial en lugar de sifr.js para que te resulte más fácil (ya que este archivo muestra los mensajes de error especá­ficos).

Vamos a empezar!

1. Descargar sIFR

El primer paso es descargar el archivo zip sIFR. Descarga la última versión.

Al abrir el archivo zip verás cuatro carpetas y un archivo de texto. Puede hacer caso omiso de la carpeta demo por el momento, las otras tres carpetas (css, flash y js) contienen los archivos que necesitamos.

2. Crear TuTipoDeLetra.swf

Antes de subir los archivos sIFR, tenemos que crear el archivo SWF de los archivos FLA. En la carpeta de flash hay un fichero llamado sifr.fla, abre este archivo.

Al abrir el archivo sifr.fla deberí­as ver un cuadro blanco (ver Figura 2a).

Figura 2a: Captura de pantalla de pantalla inicial de Flash.

Haz doble clic sobre este marco para que se active. Ahora deberí­as ver el texto gris que dice «Bold Italic Normal» (véase la figura 2b).

Figura 2b: Captura de pantalla de Flash después de hacer doble clic.

Para «activar» tu tipo de letra, selecciona el texto, modifá­calo al tipo de letra que desees y, a continuación, escribe un carácter. One character as in a or n , whichever you choose. Un carácter como una a o una n, el que prefieras. Si deseas tener la opción de negrita o cursiva en tu texto, es necesario que tengas un carácter para cada una.

Por ejemplo, si quiero un texto normal, y también la opción de cursiva y/o negrita, tecleo ‘n n n’ (véase la figura 2c). La diferencia en el tamaño del archivo de mi fuente es de 30 KB entre la normal (70 KB) y los tres tipos de letra (100 KB). Puedes probar para ver la diferencia dependiendo del tipo de letra que elijas.

Figura 2c: Captura de pantalla de pantalla de Flash después de escribir los caracteres.

Por último, elige un tipo de letra especá­fico, para este ejemplo he elegido Arno Pro (ver la Figura 2d).

Figura 2d: Captura de pantalla del cuadro de diálogo utilizado para controlar la tipografá­a para Flash.

Una vez hecho esto y seleccionado el tipo de letra adecuado, ve a Archivo > Preferencias de Publicación. En este cuadro de diálogo asegúrate de establecer las siguientes opciones tal como se ven en la Figura 2e.

Figura 2e: Configuración en Flash para exportar un archivo SWF.

La configuración por defecto de calidad JPEG es 80. Para mi tipo de letra no hay diferencia de calidad entre calidad 80 y calidad 100, por lo que decido ponerlo a 100. Después de esto haz clic en el botón Publicar para crear tu archivo. Tu nuevo archivo SWF deberí­a aparecer en la misma carpeta que el archivo sifr.fla.

El archivo que acabas de crear tiene un nombre de archivo de sifr.swf; renombra el archivo a tu tipo de letra, en mi caso será­a arnopro.swf. Ahora ya puedes subir los archivos a tu servidor.

3. Subir los archivos

Para que sIFR funcione, debes subir los siguientes archivos:

• css/sIFR-print.css
• css/sIFR-screen.css
• js/sifr-config.js
• js/sifr.js
• flash/tutipodeletra.swf

Ahora crea el vá­nculo apropiado para los archivos CSS y JavaScript (Figura 3a). (Nos referiremos al archivo flash en el próximo paso.)

Figura 3a:

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

4. Inicializar sIFR

En este paso vamos a llamar al archivo SWF y decirle qué texto debe sustituir. El archivo que controla el reemplazo de texto es sifr-config.js, te habrás dado cuenta de que ahora tiene tamaño cero.

Para este tutorial usaremos un ejemplo de dos entradas del blog con el código que de la Figura 4a y el CSS de la Figura 4b, los cuales producen la salida que vemos en la Figura 4c.

Figura 4a:

<h2 class="cpost-title">Blog Post Title</h2>
<p>This will be our sample text for this example post.</p>

<h2 class="cpost-title">Another Questionable Title</h2>
<p>More example text is being shown here.</p>

Figura 4b:

h2.cpost-title { margin:12px 0 7px 0; padding-bottom:5px; font-family:Georgia, "Times New Roman", serif; font-size:24px; font-weight:normal; color:#9f0000; border-bottom:1px solid #ccc; }
p { padding-bottom:11px; font-family:Verdana, Helvetica, Arial, sans-serif; font-size:13px; line-height:22px; }

Figura 4c:

En primer lugar, abrimos el archivo sifr-config.js y añadimos el código de la Figura 4d, donde tutipodeletra es el nombre del tipo de letra que elegimos cuando estábamos editando el archivo Flash. Por tanto, mi nombre var será­a arnopro. (Nota: Asegúrate de que el nombre var sea una palabra sin espacios, yo uso caracteres de subrayado en lugar de guiones).

Figura 4d:

var tutipodeletra = {
src: '/ruta/a/archivo/tutipodeletra.swf'
};

sIFR.activate(tutipodeletra);

sIFR.replace(tutipodeletra, {
selector: 'h2.cpost-title',
wmode: 'transparent'
});

*Nota: Asegúrese de cambiar la comilla de la derecha, al final de la segunda lá­nea por una comilla simple. (WordPress la está convirtiendo en unas comillas tipográficamente correctas.)

Esta referencia activa el archivo SWF que hemos creado en el paso 2 y, a continuación, sustituye nuestros tí­tulos con el texto sIFR. Presté especial atención a la complejidad del formato porque es muy intensa (y bastante implacable si se le pasa algo). Por otra parte, el comando wmode: ‘transparent’ impide que el color de fondo por defecto está en blanco.

[ACTUALIZACIá?N: Sólo uso la propiedad CSS background-color, y lo pongo en transparente.] [ACTUALIZACIá?N 2: Hacer esto parece que da lugar a un fondo verde, por lo que recomendamos que utilice wmode: «transparent» por ahora. Tenga en cuenta que el resultado en Opera es un fondo blanco en vez de un fondo transparente.]

5. Dar estilo al nuevo texto

Ahora que estamos sustituyendo el texto normal con texto sIFR necesitamos dar estilo al nuevo texto. Lo que puede dar pie a confusión es que los estilos CSS para el texto sIFR se editaron ya en el archivo sIFR-config.js. El formato (en su mayor parte) se ejecuta con la sintaxis CSS regular, excepto si está en un archivo JavaScript.

Los estilos CSS se insertan en la raá­z de SIFR. Ver la Figura 5a. Esto se hace básicamente para decir: «asociar cada estilo de aquí con el nuevo texto sIFR.»

Figura 5a:

sIFR.replace(tutipodeletra, {
selector: 'h2.cpost-title',
css: [
'.sIFR-root { PROPIEDADES PRINCIPALES DEL CSS }'
],
wmode: 'transparent'
});

Para el estilo del texto introduce propiedades CSS del mismo modo que lo hará­as en la tá­pica hoja de estilo. Asá­, para nuestro ejemplo vamos a meter el CSS como se indica en la Figura 5b.

Figura 5b:

sIFR.replace(tutipodeletra, {
selector: 'h2.cpost-title',
css: [
'.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }'
],
wmode: 'transparent'
});

Ahora compara el texto normal (columna izquierda) con el texto sIFR (columna derecha) en la figura 5c.

Figura 5c:

Es evidente que cuando el texto se sustituye hay algunas cuestiones de espaciado que habrá­a que desarrollar. Afortunadamente, estas cuestiones de ajuste de sIFR pueden abordarse desde las opciones avanzadas de JavaScript. Pero vamos a dejarlo para otro momento.

Agregando estilos adicionales

También tienes la posibilidad de añadir estilos para etiquetas adicionales entre el texto. Por ejemplo, si deseas añadir cursivas em o negritas strong para usar en tí­tulos h2 puedes añadir el código de la Figura 5d.

Figura 5d:

sIFR.replace(yourtypeface, {
selector: 'h2.cpost-title',
css: [
'.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }',
'em { font-style:italic; }',
'strong { font-weight:bold; color:#333333; }'
],
wmode: 'transparent'
});

En este ejemplo, si añadimos la etiqueta strong a las palabras Very Long las hacemos salir en negrita y gris oscuro (véanse las figuras 5e y 5f respectivamente)

Figura 5e:

<h2 class="cpost-title">A <strong>Very Long</strong> Blog Post Title </h2>

Figura 5f:

6. Toques finales

Por último, vamos a establecer una norma en el archivo sIFR-screen.css donde se oculta el texto por defecto, mientras se carga el texto sIFR. Esto evita que el texto normal aparezca y desaparezca cuando se carga el texto sIFR. Para hacer esto abrimos sIFR-screen.css (está en el directorio css de sIFR ), nos desplazamos hasta el final y añadimos el código de la Figura 6a.

Figura 6a

.sIFR-active h2.cpost-title { visibility:hidden; }

Ahora el texto normal no se verá si sIFR está activa, pero si se desactiva, el texto se verá con el estilo normal debido a la clase .sIFR-active que hay antes de h2.cpost-title.

7. Notas finales y más recursos

Notas importantes sobre el estado actual de sIFR y acerca de este tutorial.

1. No todas las reglas CSS son válidas para sIFR, consulta la documentación de sIFR 3 sobre compatibilidad (concretamente sobre el estilo).
2. No puedo pretender ser un experto sIFR por lo que si descubres algún error en el anterior tutorial, por favor házmelo saber. Mi principal objetivo era mostrar a otros cómo poner lo básico en marcha y funcionando.

¿Necesitas leer más o más ayuda?

1. Ahora que puedes elegir entre una mayor variedad de tipos de letra, tu trabajo se hace más difá­cil. Lee más sobre la elección de tipos en I Love Typography (en inglés).
2. Además, si te quedas atascado, Joyent tiene un foro dedicado a sIFR (en inglés).