Como usar Cualquier tipografía en la Web – Scalable Inman Flash Replacement (sIFR)

Ya hemos hablado de lo limitado que es le HTML+CSS las tipografias web, para los diseñadores y la necesidad de recurrir a reemplazar algunos texto con imágenes, con toda las contras que esto implica. El HTML limita a los diseñadores, con lo que puedes hacer con el estilo de fuente en la web. Quizás limitando a elegir fuentes estándar y compatibles en cada sistema. Esta presentación le introducirá a una técnica, llamada sustitución escalable de Flash ó Scalable Inman Flash Replacement (sIFR), lo que le permitirá usar esa nueva fuente y que se visualicen en todos los navegadores y en las páginas que cree, sin verse obligadas a utilizar las imágenes, fácil de usar, discreto, compatible con motor de búsqueda, seo friendly, de manera fácilmente y accesible por medio de un elegante combinación de Flash y JavaScript.

Internet, a pesar de sus cambios acelerados y sus mejoras en diferentes tecnologías, Todavía parece que no puede mantenerse al día con las exigencias de la tipografía, el diseñador no es una excepción. A partir de esto, los diseñadores se limitan a sólo seis “fuentes seguras Web”, Arial, Courier New, Georgia, Times New Roman, Verdana y Trebuchet MS.

Y poder diseñar sitios optimizados para Search Engine Optimization (SEO) y estándares web, parece poco probable que una opción basada en Flash podría resolver sus problemas tipografía.

Sustitución escalable de Flash (sIFR), es un código abierto de tecnologías JavaScript y Flash, inicialmente desarrollada por Shaun Inman y el mejoramiento de Mike y Mark Davidson Wubben que permite la sustitución de elementos de texto HTML en páginas web con equivalentes Flash. Como se mencionó anteriormente, el HTML y CSS sólo permiten el uso de la fuentes seguras Web que es seguro asumir que estas fuentes se encuentra instaladas en el ordenador. sIFR, por otra parte permite que los diseños para los sitios Web puedan utilizar cualquier fuente, permitiendo al diseñador para utilizar las fuente de su elección en un elemento Flash que muestra el texto. En consecuencia, la fuente usada no tiene que estar instalada en la máquina del usuario. Esencialmente, cualquier asignación de encabezamientos (H1, H2, etc …) se convertirán en archivos Flash con la fuente requerida. Sin embargo, cualquier motor de búsqueda Web a través de su sitio seguirá siendo capaz de leer todo el contenido de la página. Esto se debe a que los motores de rastreo de páginas web (web crawlers), no ejecutan el JavaScript, que modifica en tiempo de carga, la pagina y reemplaza las cadenas identificadas como encabezados con el Flash. Una alternativa más común a sIFR (pero que su sitio podría obtener penalizaciones por los motores de búsqueda) implica la creación de una imagen, ajustada en el fondo, y luego ocultar el texto mediante CSS. En el loco mundo de los blogs y contenido generado dinámicamente, creando una imagen para cada nueva partida no es muy eficiente – en especial si está realizando varias actualizaciones al día. En comparación, sIFR automáticamente carga las etiquetas que haya establecido en su hoja de -esencialmente un método “set it and forget it “.

Desde su lanzamiento en 2005, muchas compañías internacionales han adoptado el uso de sIFR,  incluyendo:

ABC News Nike redhat Aston Martin Aquí les paso un ejemplo del sIFR: http://www.mikeindustries.com/blog/files/sifr/2.0/

En resumen,

las ventajas de sIFR

1. Muestra tus titulares en casi cualquier tipo de letra Ideal para empresas con las fuentes y la identidad corporativa que quiere quedarse visualmente coherente con la prensa. (Revise su tipo de letra del acuerdo de licencia para ver si se permite la incorporación en línea.)

2. SEO amistoso

Contenido / copia “spidered” como HTML

3. Más dinámico que las imágenes

Puede ser fácilmente creado “sobre la marcha” para el contenido dinámico

Copia más rápido los cambios y actualizaciones texto Seleccionable

4. Graceful degradación

Si Flash y / o JavaScript no es detectado, sIFR por defecto utiliza las reglas de estilos del CSS

Desventajas sIFR

1. Un control limitado

“Por lo tanto, / Por lo tanto,” anti-aliasing

2. Flash para la edición y configuración 3. Flash Player necesario para visualizar 4. Requiere JavaScript para ver . 5. Se recomienda aplicarlo solo sobre los titulares . 6. Uso mínimo recomendado (por página). 3-5 (o menos) los casos por página Por último, sIFR no es visto como una revisión a largo plazo, sino más bien una alternativa temporal a la imagen basada en los encabezados. Si está ejecutando actualmente un sitio web que requiere actualizaciones frecuentes y / o tipos de letra y la costumbre quiere simplificar el proceso (mientras permanezcan SEO friendly) sIFR puede ser una buena alternativa para estudiar.

¿Como Funciona?

Sin entrar en más detalles técnicos, una descripción breve de su funcionamiento:

• Tenemos una página normal, con sus elementos determinados con CSS
• Tenemos un archivo .swf, que contiene los contornos de una fuente, y un poco de actionscript.
• Tenemos un archivo .css con instrucciones especiales
• Tenemos un archivo de javascript, que es el que hace que todo funcione
• Al momento de cargar la página, el javascript checa si el usuario tiene flash instalado, encuentra los elementos que hemos señalado que queremos reemplazar, e inserta en su lugar el archivo flash, con el contenido de los elementos (respetando las dimensiones del elemento original), y esconde los elementos originales.

Precauciones sIFR fué pensado para sustituir textos pequeños, tales como encabezados. No es recomendable utilizarlo en elementos largos. Aunque se pueden tener enlaces en los textos sustituidos, su comportamiento puede ser impredecible, por lo que tampoco es recomendable usarlos para elementos como menús. Paso a paso:

1. Preparación

Diseña tu página normalmente, utilizando para los elementos que quieras reemplazar, fuentes, colores y tamaños que se acerquen lo más posible a los textos reemplazados. Descarga los archivos de sIFR , y descomprímelos a un folder en tu computadora

2. Exportar el .swf

Primero hay que asegurarnos que los archivos solo puedan ser usados en nuestro sitio. La licencia de muchas fuentes comerciales prohíbe la redistribución, y el tener un archivo .swf que contiene todos los contornos se considera redistribución. Abre el archivo customize_me.as (Por defecto se abrirá con flash). Para poder hacer pruebas en tu computadora, asegúrate que allowlocal sea igual a true. Una vez que subas tu página al servidor, te conviene cambiarlo a false. Bajo la variable alloweddomains escribe el dominio o dominios de las páginas donde vayas a utilizar ese archivo .swf. Recuerda incluir el dominio con y sin www. Guarda y cierra el archivo. Abre el archivo sIFR.fla. En un principio, parecerá que no hay nada, pero si haces doble clic en la mitad del escenario, se abrirá un movieclip y verás un texto que dice “Do not remove this text”. Haz clic a ese texto, y en la barra de propiedades, selecciona la fuente que quieras usar. Luego haz clic en el botón de caracteres, y selecciona los que quieras utilizar. Recuerda especificar caracteres con acento y eñes. Exporta tu archivo (Archivo–>Exportar). Lo más práctico es nombrarlo como la fuente que usas, en caso de que tengas más de una. Asegúrate que customize_me.as y dont_customize_me.as estén en la misma carpeta que tu archivo .fla al momento de exportar. Copia tu archivo .swf a la carpeta donde tienes tu html.

3. Estilos

Hay 2 cosas que debes de hacer con tus estilos, primero, esconder los elementos que quieres que se reemplacen una vez que se haya determinado que el usuario tiene flash, y cambiarlos de regreso al momento de imprimir. Para eso incluye los contenidos de sIFR-screen.css y sIFR-print.css en tu hoja de estilos. Asegúrate que contengan reglas para los elementos que quieras reemplazar. Si tu fuente sIFR tiene proporciones muy distintas a la que usas en HTML, puede que sea necesario que cambies el tamaño o espaciado en este archivo.

4. Llamar al Java Script

Copia el archivo sifr.js a la carpeta donde tienes tu HTML. Pon el siguiente código entre las etiquetas <head> y </head> de tu página.

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

5. Reemplazar los elementos

En tu archivo html, justo antes de la etiqueta </body>, pega el siguiente codigo:

<script type="text/javascript">

//<![CDATA[

if(typeof sIFR == "function"){

    sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"mifuente.swf",

sColor:"#000000",sLinkColor:"#000000",

sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20,

nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));

};//]]>

</script>

Una explicación de qué hace cada elemento, para que puedas cambiarlo según los resultados que quieras.

sSelector

Es el elemento que quieres que se reemplace. Puede ser una etiqueta html (h1, por ejemplo si quieres que se reemplazen todos los h1 de la página), una clase (.miencabezado), un id (#mitexto) o una combinación de todos ( .midiv h1#principal , si quieres que se remplace el h1 con id principal dentro del elemento con clase .midiv)

sFlashsrc

Es la ruta a tu archivo .swf, relativo a tu html.

sColor

El color que quieres que sea el texto, en formato hexadecimal.

sLinkColor

El color que quieres para los enlaces.

sBgColor

El color de fondo para tu texto. Puedes ponerlo transparente en otra variable, pero no funciona en todos los navegadores

sHoverColor

El color que será el texto al pasar el puntero sobre el.

nPadding

El padding (variables distintas para cada lado) que tenga tu elemento original en el css. Es muy importante que coincida, de lo contrario tu tamaño variará.

sFlashVars

aca puedes especificar variables para tu archivo .swf, como textalign para alinear el texto, offsetLeft y offsetTop para especificar una distancia desde el borde superior e izquierdo. underline=true subraya los enlaces .

sCase

Cambia el texto a mayusculas (upper) o minúsculas (lower)

sWmode

El ponerlo transparent te dará fondo transparente y aparecerá debajo de elementos posicionados absolutamente como menús. Pero ojo, no funciona en Opera ni en versiones viejas de Mozilla y Safari.

Puedes tener varias llamadas para reemplazar varios elementos, de esta forma:

<span style="font-family: mceinline;"><script type="text/javascript"></span>

<span style="font-family: mceinline;">  //<![CDATA[</span>

<span style="font-family: mceinline;"> if(typeof sIFR == "function"){</span>

<span style="font-family: mceinline;">sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"mifuente.swf", sColor:"#000000"}));</span>

<span style="font-family: mceinline;">sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"mifuente.swf", sColor:"#666666"}));</span>

<span style="font-family: mceinline;">};</span>

<span style="font-family: mceinline;"> //]]></span>

<span style="font-family: mceinline;">  </script></span>

Y listo! al visualizar tu página, deberás poder ver tus flamantes nuevos encabezados con flash Te recomiendo la extension Dreamweaver para sIFR, que te enlaza los archivos necesarios y te genera el código javascript en la página ¿Busca más información? Visita www.mikeindustries.com / sifr de documentación y archivos. un ejemplo: http://www.mikeindustries.com/blog/files/sifr/2.0/