Técnicas y herramientas prácticas de reemplazo dinámico de imágenes

Cuando se trata de diseño web, la creatividad del diseño no debe ser frenada por las opciones limitadas de fuentes web compatibles que llamamos fuentes seguras para la web. Los diseñadores deben tener libertad para usar cualquier fuente que prefieran en títulos y contenidos.

En 2005, la sustitución dinámica de imágenes se hizo popular con una técnica llamada Reemplazo de Flash Inman escalable (sIFR). Desarrollado por Shaun Inman, sIFR aprovecha Javascript y Adobe Flash para permitir a los diseñadores web usar cualquier fuente personalizada que les guste en el sitio web y mantener la visibilidad de aquellos que no la tienen. Y a medida que la web continúa evolucionando, hoy tenemos más soluciones alternativas que utilizan diversas tecnologías, en caso de que no sea un fanático de Flash..

Sin más preámbulos, echemos un vistazo a algunas de las Técnicas para lograr el reemplazo dinámico de imágenes..

Técnicas de uso común

Estas son algunas de las técnicas más comunes para el reemplazo dinámico de imágenes..

Reemplazo de Flash Inman escalable (sIFR)

SIFR es uno de los métodos más populares para incrustar fuentes personalizadas en sitios web. Utiliza Javascript y Flash para generar un tipo de letra personalizado para su sitio web y permite que se pueda seleccionar el tipo de letra convertido. Aparte de eso, el tipo de letra convertido permanece como texto en los códigos fuente para que el motor de búsqueda pueda rastrearlos.

sIFR 2 (recomendado) es la versión estable actual, sin embargo, si está considerando la implementación de sIFR, también debe saber que siFR 3 beta también está disponible para su descarga. Puede ser un poco defectuoso, pero al menos resuelve el problema de la expansión de la fuente de sIFR 2.

Herramientas para sIFR que pueden ser útiles:

• sIFRvaultsIFRvault es un repositorio de fuentes sIFR que puedes descargar.
• generador sIFRHerramienta en línea que le permite crear archivos sIFR .swf con unos pocos clics del mouse. Simplemente cargue la fuente TTF de la fuente que desea convertir, previsualizar y descargar.
• Convertir fuentes a sIFRCargue una fuente .TTF y este sitio web los convertirá a un archivo sIFR Flash.

sIFR Lite

El sIFR original es 22k, por lo que Dave ¿Decidió volver a trabajar con un enfoque más orientado a objetos, y el resultado? 3 veces más pequeño a 3.7k.

Reemplazo dinámico de texto PHP + CSS (P + C DTR)

Como sugiere su nombre, este es un método de reemplazo de texto que usa PHP y CSS que hace uso del método original descrito por Steward Rosenberger. También es una mejora de la versión anterior desarrollada por R. Marie Cox que no admite el ajuste de texto y las etiquetas internas. Otra cosa interesante sobre P + C DTR es que el texto de la imagen se puede personalizar con etiquetas CSS.

tipo de letra.js

Lo que hace tipo de letra.js lo especial es que solo usan Javascript para incrustar fuentes personalizadas y el estilo se puede personalizar aún más con HTML y CSS, no se requiere Flash. Es de código abierto y es compatible con la mayoría de los navegadores que utilizamos en estos días, ya sea Safari, Firefox, IE (6 y superior).

Personalmente, después de algunos experimentos con tipo de letra.js, creemos que podría haber algún margen potencial para mejoras. En primer lugar, las fuentes tienden a ser ligeramente diferentes entre diferentes navegadores. Si está utilizando typeface.js, le sugerimos que realice una comprobación en varios navegadores antes de asumir que lo que ve en Firefox será lo que verá en Safari. Los textos tampoco son seleccionables con tipo de letra.js.

Las fuentes personalizadas en tipo de letra.js no se compilan; lo que significa que los usuarios pueden descargar las fuentes. Eso podría llevar a un problema de derechos de autor. Se recomienda que verifique a fondo para asegurarse de que las fuentes que está utilizando están bien para la redistribución..

Cufon

No requiere flash, Cufon es una excelente alternativa a sIFR y es bastante simple de implementar. Primero, utiliza el generador de Cufon para generar y personalizar la fuente que desea, luego inserta el Javascript de Cufon en su código fuente y le dice a la secuencia de comandos qué selectores desea que personalicen las fuentes..

El mayor problema con Cufon sería el problema legal del uso de estas fuentes personalizadas en línea. Como está incrustado en Javascript, cualquiera que vea el código fuente puede copiarlo fácilmente. Las fuentes personalizadas de Cufon no son seleccionables, ese es el otro apagado.

Estiramiento facial

También conocido como Reemplazo de imagen de estiramiento facial (FLIR), Es otro gran método para sIFR que no requiere Flash. Parece que hay otra alternativa muy acertada en el problema de Flash de sIFR.

Facelift utiliza PHP y la biblioteca GD de PHP. Heredan el problema heredado de los reemplazos de fuentes personalizados, no pueden seleccionar el texto. Aparte de eso, creemos que también es genial.

Más métodos

Las técnicas anteriores pueden ser más utilizadas, pero también hemos observado otras formas de convertir tu texto en hermosas tipografías personalizadas..

Tipo Seleccionar

TypeSelect Aprovecha en typeface.js, jQuery, el lienzo, toDataURL, las propiedades de fondo de CSS y el texto real superpuesto para dar un tipo de letra personalizado en tu sitio web. La selección de texto funciona en Firefox, Safari e incluso Chrome pero no en IE.

Reemplazo de imagen swf (swfIR)

swfIR le brinda la posibilidad de aplicar una variedad de efectos visuales a cualquiera o todas las imágenes de su sitio web. Por ejemplo, puede agregar cualquier imagen en su sitio web y swfIR agregará un borde redondeado, rotará la posición o incluso le agregará sombras..

Nueve técnicas para el reemplazo de imágenes CSS

Estos no son reemplazos de texto dinámico, pero Chris Coyier demuestra hasta nueve técnicas diferentes de CSS para reemplazar el texto con imágenes; cada uno con una libreta de calificaciones con la condición de: qué sucede si las imágenes están activadas / desactivadas, CSS está activada / desactivada.

Font Burner

Font Burner Aproveche el Reemplazo Inman Flash Escalable (sIFR) para cambiar sus títulos a fuentes personalizadas. Todo lo que necesita hacer es encontrar la fuente, seleccionarla e insertar el código en la cabecera y su título se cambiará de inmediato..

WordPress + reemplazo dinámico de imágenes

Si usted es un usuario de WordPress que busca una solución de reemplazo de imagen dinámica para el título o incluso el contenido de su blog, es probable que haya un complemento para ellos. Aquí hay algunos complementos de reemplazo de texto que conocemos.

sIFR WordPress Plugin - WP sIFRWP sIFR fue creado para eliminar las complicaciones de obtener fuentes personalizadas en un sitio de WordPress. Con WP sIFR, solo tiene que cargar su archivo de fuente SWF en el directorio del complemento y luego iniciar sesión, activarlo y configurar sus estilos, todo en el panel de Configuración.

Cufon WordPress Plugin - WP-CufonLo único que tienes que hacer es convertir tus archivos de fuentes y subirlos al directorio de complementos. Puede habilitar los objetos que desea que sean reemplazados en el Menú de administración de WordPress.

Reemplazo de imagen de cambio de cara (FLIR) Wordpress PluginFLIR WordPress es amigable para SEO y solo muestra la imagen en el navegador si JavaScript está habilitado. El código HTML / XHTML permanece sin cambios, lo que permite que los motores de búsqueda puedan leer las etiquetas de su cabeza y que los que no tienen JavaScript puedan leer la página..

Panel de control del quemador de fuenteslos Font Burner El complemento del Panel de control te permite agregar fácilmente a tu tema de WordPress cualquiera de las más de 1000 fuentes gratuitas disponibles en el sitio web de Font Burner.