Tutorial FLIR: Como utilizar cualquier tipografía en nuestro sitio
Luego de leer el tutorial que hizo Nettuts me propuse hacer una pruebas y ver más en detalle de que se trata esta librería que va a dar que hablar y mucho.
¿Qué es y para que sirve FLIR?
Facelift (FLIR) es una librería realizada con Javascript que nos permite con muy pocas líneas de código utilizar cualquier tipografía en nuestros sitios web, independientemente si están o no instaladas en el ordenador del visitante y para realizar la conversión del texto a las tipografías seleccionadas utiliza la librería GD de php. Algo muy similar a lo que hace sIFR pero con dos grandes diferencias: Es muy fácil de implementar y no utiliza Flash.
Para lograr una correcta visualización de las tipografías que no vienen por defecto instaladas en los sistemas operativos, FLIR convierte de forma dinámica las etiquetas que nosotros seleccionemos a imágenes, con una excelente definición.
¿SEO y Facelift (FLIR)?
Si, y sin ningún problema. Por lo que pude ver el código fuente es exactamente igual, eso quiere decir que las imágenes que reemplazan a los textos no aparecen en el fuente y no son visibles por parte de las arañas de los buscadores, por lo tanto, esta implementación es visible solo por los visitantes, y a los “ojos” de los buscadores estamos igual que siempre que utilizamos las etiquetas de siempre.
Como instalar FLIR (Facelift)
1. Lo primero que tenemos que ver es si tenemos instalada la librería GD de PHP en nuestro servidor, esto es sencillo basta crear un archivo con el código que coloco a continuación y ejecutarlo en nuestro explorador una vez subido a nuestro servidor, cuando se despliegue la información debemos buscar en el apartada correspondiente si tenemos o no la librería GD, en la mayoría de los hosting viene instalada, de lo contrario, debemos pedirle a nuestros proveedor que lo haga.
-
<?php
-
?>
Si la librería GD de php esta instalada veremos lo siguiente:
2. Ahora deberías descargar Facelift, obviamente descomprimirlo y editar el archivo flir.js y buscar en la línea 30 lo siguiente: ,path: '' ahí mismo deberíamos poner la ruta en donde subimos todos los archivos que descomprimimos en el paso anterior quitando los que son de ejemplo o de lectura informativa que no sirven para nada, aunque su peso es insignificante.
3. Ya tenemos todo lo necesario para empezar a utilizarlo, ahora viene lo divertido. Abrimos el archivo donde queremos utilizar FLIR, y colocamos dentro de las etiquetas <head></head> lo siguiente:
-
<script src="js/flir.js" type="text/javascript"></script>
Y luego dentro del Body lo siguiente:
-
<script type="text/javascript">
-
FLIR.init();
-
FLIR.auto();
-
</script>
4. Ahora lo que tenemos que hacer es mucho más sencillo, subimos todos los archivos de las tipografías que queramos utilizar a la carpeta fonts dentro de la carpeta de facelift que subimos en el paso anterior. Luego vamos a editar el archivo config-flir.php y veremos lo siguiente:
-
$fonts['tribalbenji'] = 'Tribal_Font.ttf';
-
$fonts['antagea'] = 'Antagea.ttf';
-
$fonts['illuminating'] = 'ArtOfIlluminating.ttf';
-
$fonts['bentham'] = 'Bentham.otf';
-
$fonts['geo'] = 'Geo_Oblique.otf';
-
$fonts['puritan'] = 'Puritan_Regular.otf';
-
$fonts['konstytucyja'] = 'Konstytucyja_1.ttf';
-
$fonts['promocyja'] = 'Promocyja.ttf';
-
$fonts['stunfilla'] = 'OPN_StunFillaWenkay.ttf';
-
$fonts['animaldings'] = 'Animal_Silhouette.ttf';
Lo que coloque arriba es solo una parte del contenido del array, a continuación de las que liste (no hace falta borrarlas) agregamos las tipografías nuevas que nosotros queramos, en mí caso agregue las siguientes:
-
$fonts['bedrockC'] = 'BedrockC.ttf';
-
$fonts['brushsci'] = 'BRUSHSCI.TTF';
-
$fonts['magneto'] = 'MAGNETOB.TTF';
También ‘seteamos’ una letra por defecto:
-
$fonts['default'] = $fonts['magneto'];
6. Ya casi estamos listos. Ahora simplemente tenemos que indicarle a FLIR que etiquetas debe reemplazar, para eso debemos pasárselas por parámetros a la función que colocamos en el segundo paso, quedando lo siguiente:
-
FLIR.auto([ 'h1', 'h2', 'h3' ]);
Y con todo esto debemos estar disfrutando las tipografías que seleccionamos, algunas aclaraciones, FLIR utiliza un sistema de cache, si tienen algún problema intenten darle permisos CHMOD a la carpeta 'cache', en mi caso no fue necesario pero puede ocurrir que si. También hay que destacar que esta cache evita que php tenga que generar una nueva imagen por cada persona que visita nuestro sitio reduciendo considerablemente el consumo de recursos.
Ejemplo del resultado de este tutorial
Espero que les resulte útil, a mi me encanto 
Agosto 12th, 2008 a las 2:09
Hay un plugin (se llama TFTtitles si no me equivoco) que convierte los textos en figuras.
La diferencia es que hay que “personalizarlo”, o sea, cargarle las fuentes y elegir por ejemplo que tipo de estilo va con que fuente y tamaño.
Emiliano
Weblog-Lab.com
Agosto 12th, 2008 a las 2:40
Los probé y ví que funciona en FireFox y Safari para windows, pero en Opera9.52 e IE6 no muestra la fuente como debería. Lástima, yo uso más el Opera.
Agosto 12th, 2008 a las 3:45
Cada vez que utilizo Sifr tiemblo… a veces le da la vena y va cambiando el tamaño de las fuentes y otras lo enlaces no funcionan o lo hacen a veces (la ultima version lo arreglaba pero no del todo ).
A ver si esta solución funciona más “finica”
Había probado lo de substituir los textos por imágenes pero no me gustaba por que no quedaba el texto original, pero veo que en este caso se mantiene el texto en el fuente.
A probarlo
Septiembre 16th, 2008 a las 6:30
No hay manera! he subido todo el contenido del rar al servidor y nada. He comprabado que tengo la libreria GD activada… y no va.
Me refiero al ejemplo que viene, que en teoría deberia de funcionar no?
Alguna ayudita plis?
Septiembre 16th, 2008 a las 6:32
ya se cual era el problema, perdón or el post anterior. Estaba ejecutando el script al principio de l la etiqueta body… y es al final! no me habia dado cuenta… bueno lo dejo aquí estcrito por si a alguien le pasa lo mismo.