las soluciones basadas en CSS para sustituir el texto por imágenes presentan problemas técnicos no resueltos: los lectores de páginas pueden no leer el texto y los navegadores normales tienen problemas cuando no se pueden cargar las imágenes.
Además, estas soluciones basadas en CSS siempre tienen el inconveniente de que se deben crear todas las imágenes que sustituyen al texto. Si las imágenes se crean a mano, el proceso es tedioso y poco flexible. Si las imágenes se generan dinámicamente, la aplicación web puede sufrir una penalización apreciable en su rendimiento.
La solución definitiva de todos los problemas de las soluciones basadas en CSS es la técnica sIFR (Scalable Inman Flash Replacement), que combina CSS, JavaScript y Flash para mostrar correctamente cualquier texto con cualquier tipografía deseada.
La versión de sIFR recomendada para su uso en sitios web es la versión sIFR 2, ya que la versión sIFR 3 todavía se encuentra en período de pruebas.
A continuación se muestran los pasos que hay que seguir para sustituir el texto con la técnica sIFR:
1) Descarga la última versión disponible de los archivos de sIFR. Actualmente, la versión estable es 2.0.7 y se puede descargar mediante el archivo comprimido http://www.mikeindustries.com/blog/f.../sIFR2.0.7.zip Descomprime este archivo en cualquier carpeta del sistema.
2) El segundo paso consiste en crear un archivo Flash que incluya la fuente que se va a utilizar en la sustitución. Abre el archivo sifr.fla con un editor de archivos de tipo Flash (como por ejemplo el programa Flash Professional). Si no dispones de ningún editor de archivos Flash, más adelante se muestran varias herramientas y utilidades alternativas.
Cuando se abre el archivo sifr.fla, sólo se ve un rectángulo blanco. Pincha dos veces sobre ese rectángulo de forma que se muestre un texto. Selecciona el texto, modifica su fuente por la tipografía que quieres utilizar en el diseño de tu página y guarda los cambios.
Si el texto que vas a sustituir contiene caracteres especiales o caracteres propios de algunos idiomas, debes añadir todos esos caracteres mediante la paleta de Propiedades del texto.
3) Exporta el archivo Flash mediante la opción File > Export > Export Movie (o Archivo > Exportar). Una buena recomendación consiste en guardar el archivo con el mismo nombre del tipo de letra que incluye (arial.swf, verdana.swf, etc.). Una vez creado el archivo, guárdalo en un directorio del servidor en el que guardes todas las fuentes de sIFR (puedes llamar a este directorio fuentes/ por ejemplo).
4) sIFR necesita varios archivos CSS y JavaScript para funcionar. Copia el archivo sifr.js en la carpeta de archivos JavaScript de tu servidor web (normalmente este directorio se llama js/). Copia los archivos CSS sIFR-screen.css y sIFR-print.css en la carpeta de archivos CSS de tu servidor web (normalmente este directorio se llama css/).
5) Todas las páginas en las que se sustituye el texto por Flash deben incluir los archivos JavaScript y CSS. Para ello, añade lo siguiente dentro de la sección <head> de la página:
Código PHP:
<head>
...
<script src="js/sifr.js" type="text/javascript"></script>
...
<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print" />
...
</head>
El valor de los atributos src y href debe contener la ruta completa (absoluta o relativa) hasta los archivos JavaScript y CSS respectivamente.
También es posible añadir las reglas de los archivos CSS de sIFR en los archivos CSS propios de la página y así no tener que enlazar otros dos archivos CSS en cada página.
6) A partir de este momento ya es posible sustituir cualquier texto por Flash utilizando instrucciones JavaScript sencillas. A continuación se muestra el código JavaScript necesario para mostrar todos los titulares de la página con una tipografía propia:
Código PHP:
if(typeof sIFR == "function"){
sIFR.replaceElement("h1", named({sFlashSrc: "../fuentes/mifuente.swf"}));
};
La sustitución requiere que en la función replaceElement() se indique el selector CSS de los elementos que se van a sustituir y una serie de opciones que se deben tener en cuenta en la sustitución. La única opción obligatoria se denomina sFlashSrc e indica la ruta completa hasta el archivo .swf que contiene la tipografía deseada.
El siguiente ejemplo muestra los titulares de sección <h1>, <h2> y <h3> con el mismo tipo de letra y color negro, mientras que sus posibles enlaces se muestran de color azul que cambia a rojo cuando se pasa el ratón por encima del texto:
Código PHP:
if(typeof sIFR == "function"){
sIFR.replaceElement("h1, h2, h3", named({sFlashSrc: "./sifr/vandenkeere.swf", sColor: "#000", sLinkColor: "#336699", sHoverColor: "#CC0000"}));
};
saludos
