Como usar Cualquier tipografía en la Web – Scalable Inman Flash Replacement (sIFR)
Filed Under (Uncategorized) by Martín G. on 05-06-2009
Tagged Under : Flash, fuentes seguras Web, JavaScript, sIFR, tipografias web, Web crawlers
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:
<script type="text/javascript"> //<![CDATA[ if(typeof sIFR == "function"){sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"mifuente.swf", sColor:"#000000"}));sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"mifuente.swf", sColor:"#666666"}));}; //]]> </script>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/
Las familias tipográficas disponibles en cada sistema operativo son diferentes. Aunque las versiones actuales de 
Como se puede apreciar en la imagen, los tamaños inferiores a 9 píxeles (7 puntos) no se visualizan correctamente, ya que las letras se hacen demasiado pequeñas a esos tamaños. Por el contrario, a tamaños superiores a 16 píxeles (12 puntos), las letras comienzan a escalarse, produciéndose un efecto de dientes de sierra en sus contornos, sobre todo en las zonas inclinadas y curvas de las mismas.