Diseñorama » Articulos

Reemplazo de textos – una comparación

Escrito por Kemie Guaida en 1.03.05

Imágenes

La forma más sencilla y más común para utilizar una fuente no-standard es simplemente poner una imagen en vez del texto. Es importante que esta imagen tenga el mismo texto en el atributo alt, para aquellos usuarios que no tengan habilitadas imagenes o que tengan problemas de visión.

Ventajas

Es sencillo. No se necesitan conocimientos técnicos. Es bastante infalible, ya que si el usuario no puede ver las imagenes, podrá acceder al texto alt.

Desventajas

Hay que hacer cada imagen y colocarla manualmente. Al imprimir, las imagenes se pueden ver pixeladas.

Imagenes y JS

Peter-Paul Koch desarrolló un script que, basado en la clase de un elemento, lo reemplaza por una image, tras verificar que el usuario permite tanto javascript como imagenes.

Ventajas

Si el usuario no soporta imagenes, obtendrá el texto con los estilos CSS correspondientes, en vez de solamente el texo ALT. Esto es particularmente util para los buscadores. El proceso de reemplazo es automático.

Desventajas

El diseñador aun tiene que crear y nombrar cada imagen.

Dynatext

En la técnica descrita en A List Apart, Stewart Rosenberger propone una técnica que, empleando php y javascript checa que el usuario pueda usar imágenes, genera una imagen con el texto y la fuente que se quieren reemplazar, y lo reemplaza automáticamente.

Ventajas

El diseñador no tiene que generar las imágenes, lo cual lo hace muy práctico para contenidos dinámicos o para sitios que se actualicen constantemente. Se pueden especificar estilos en CSS para cuando no se muestre la imagen, y para impresión.

Desventajas

Se necesita un servidor que soporte php, y además tenga soporte para GD, que permite crear las imágenes.

SIIR- Scalable inline image replacement

Un script similar a Dynatext, que genera imagenes con php y las reemplaza con js. A diferencia del script anterior, este permite aumentar o disminuir el tamaño del texto generado.

Ventajas

Mayor flexibilidad para los usarios

Desventajas

El cambio de tamaño parece no funcionar muy bien en Mozilla

FIR- Fahrner Image Replacement (CSS)

Una sencilla manera de reemplazar texto utilizando una imagen de fondo en un elemento, y ocultando el texto a traves de un oculto con CSS.

Ventajas

Se hace todo a través de CSS. No requiere ningún otro script. La presentación se mantiene separada del contenido.

Desventajas

Requiere un elemento extra en el codigo (). Si el usuario tiene CSS habilitado pero imagenes deshabilitadas, no verá el texto ni la imagen. No se pueden hacer enlaces en la imagen de fondo, ni tener texto alternativo. Algunos lectores de pantalla pueden ignorar el span oculto.

Accessible image replacement

Técnica de Mike Rundle , basada en FIR, que utiliza la propiedad text-indent para ocultar el texto.

Ventajas

Funciona en lectores de pantalla. No utiliza ningún elemento extra en el código.

Desventajas

Tiene el mismo problema que FIR cuando se tiene CSS habilitado e imagenes deshabilitdas. IE 5 tiene problemas con esta tecnica (que se pueden solucionar con posicionamiento relativo)

Gilder Image Transform / Wellstyled

Variaciones (aparentemente simultaneas) de Tom Gilder y Wellstyled que resuelven el problema de CSS habilitado- imágenes deshabilitdas

Ventajas

Casi infalible. Se puede usar para hacer links también.

Desventajas

Usa un span extra.

IFR- Inman Flash Replacement – Flash

Shaun Inman desarolló una técnica que a través de JS reemplaza elementos por flash. Esta es la técnica usada en este sitio.

Ventajas

No se necesitan generar imágenes. El texto es seleccionable.Generalmente el peso del flash es inferior al de las imagenes que se necesitarían.

Desventajas

Requiere de un plugin externo (aunque si el usuario no lo tiene, verá el texto normal). No se pueden hacer enlaces en los elementos reemplazados.

SIFR- Scalable Inman Flash Replacement

Mejoras IFR por Mike Davidson, que permiten escalar el texto, hacer links, cambiar el color, y más. (ultima versión)

Ventajas

Permite hacer links, tener fondos transparentes, y reutilizar un mismo .swf para distintos tamaños y colores. Más rápido que IFR.

Desventajas

Requiere un plugin. El texto solo se escala al recargar la página.

En realidad no es una técnica que reemplazo como tal, pero vale la pena hacer una breve mención de la tecnología WEFT de microsoft, que permite incrustar fuentes en una pagina. Desgraciadamente, solo funciona para IE bajo Windows.

¿Cual usar?

En realidad eso dependerá de varias cosas, las características de tu servidor, tu audiencia potencial, etc. Pruébalas, ve cual te convence

Links Relacionados:

---

Comentarios

1. 1 marzo 2005, 22:01Eden

   genial artículo ^^ justo lo que necesitaba… aunque buscaré un tutorial concreto de ShaunInMan en castellano aunque no creo que encuentre. Muchas gracias por el artículo, Kemie. Un 10
   

2. 1 marzo 2005, 23:58Sosa

   ¡Que buen artículo!
   Yo, siendo enemigo del código extra prefiero siempre la técnica de Mike Rundle.
   Un tiempo use sIFR pero aunque se veía muy bien, creo que no es para mi.
   

3. 2 marzo 2005, 06:56Federico

   Habría que agregar como desventaja a los métodos con Flash: Si el usuario guarda la página localmente, el archivo JS se guarda pero el archivo SWF no. Resultado: todo el texto a reemplazar se convierte en un hermoso cuadrado blanco. Guardado con Opera 7.54 y probado con Firefox 1.
   

4. 2 marzo 2005, 17:29Kres

   Muy bueno Kemie, a mi me gusta especialmente el sistema que usa Flash, me parece cómodo, lo he probado un poco por encima y va perfecto.
   

5. 8 marzo 2005, 04:03Alex Sancho

   Muy buena explicacion, clara y concisa, ya conocia casi todas las tecnicas, y personalmente prefiero el “Accesible Image Replacement”, pero reconozco que “SiFR” tiene muchisimas posibilidades.
   Salu2 desde BCN
   

6. 8 marzo 2005, 17:38Carlos

   muy bueno el artículo, muy interesante.
   
   sin haberlos probado me parece que el mejor método es el Dynatext de Stewart Rosenberger. sus únicos inconvenientes son requerimientos técnicos, y no añade elementos extras que empeoran la semántica del código. si no se dispone de tales posibilidades en el servidor, creo que el Gilder Image Transform ofrece la mejor alternativa, se puede pasar por alto un span sin significado :)
   

7. 10 marzo 2005, 06:54CHUCHUREX

   Muchas gracias por el artículo, yo he utilizado FIR, espero aprender a utilizar pronto IFR pero tengo una duda, se pueden poner tildes con este método?
   

8. 4 abril 2005, 02:35Kemie

   Chuchurex, verás que en este sitio puedo usar tildes sin problemas, pero requiere un pequeñisimo cambio en el javascript. Si buscas en los comentarios de la página de IFR, verás la solución.
   

9. 5 abril 2005, 04:05sand

   y ese codigo que llamam a al fuente que uno sube al servidor?, en FDW había un post sobre eso. Excelente sitio
   

10. 27 abril 2005, 04:34NOlo

    Muy buen articulo compilatorio, aunque creo que por el momento me quedo con mis textos jajaja :-p
    
    Los invito a visitar nuestra página también, apenas estamos empezando pero bueno, ya por ahi te agregué a los links recomendados, nos estamos leyendo :-D
    

11. 14 junio 2005, 23:02ricardo cabello

    A ver si sacamos un poco de tiempo en spring y sacamos el script que nos hemos hecho al publico, que es mucho mas flexible que los que se comentan en este articulo :P
    
    Pero visto lo visto sera mas costoso explicar en una pagina porque es mejor, que el script en si. Asi que seguramente no pueda salir a la luz :(
    

12. 20 julio 2005, 12:32Juan Ignacio

    He visto todos estos métodos, pero aun no puedo descifrar cuál se usa en este sitio!... Veo el código y me encanta que no tenga y que a su vez se vea el texto en el código fuente. ¿Qué método estas usando?
    

13. 20 julio 2005, 12:34Juan Ignacio

    (Perdon por haber puesto disenorama en el URL del post, no me di cuenta realmente…)
    

14. 20 julio 2005, 15:47Kemie

    Juan ignacio, creo que no leiste el articulo a fondo ;).
    Ahi mismo dice que IFR es la técnica que uso en el sitio :)
    

15. 19 agosto 2005, 01:26Chuqui

    Muy bien Kemie!! Excelente artículo y lindo sitio. Te agregué a mis favoritos. Gracias desde Chile.
    

16. 18 septiembre 2005, 17:55DvD AdN

    Estan buenas las sugerencias y solo tengo una cosa que decir, pon atención al momento de escribir el código porque no cerraste algunas etiquetas y a los estilos del tootip le faltan el atributo type, por lo demás ‘ta bien :-).
    
    Ah! Sand, el metodo de usar fuentes cargadas en el servidor con CSS se comprobó que es obsoleto :(
    
    

17. 29 noviembre 2005, 18:54Oscar

    Hola solo decir que los enlaces relacionados no funciona casi ninguno, estaria bien que los comprobaras y los actualizaras.
    Un saludo.
    

18. 30 noviembre 2005, 02:08Kemie

    A mí todos los enlaces me funcionan bien, menos el último, porque el sitio parece estar en remodelación. Voy a esperar un par de semanas, y si no reaparece, modifico el enlace. Gracias!
    

19. 9 mayo 2006, 12:20neb

    I como solucionamos el tema de que salgan los acentos en los textos?
    Lo digo porque uso tipos que tienen el set completo en Photoshop en cambio en este actionscript de flash no aparecen.

    Incluso he añadido a mano los caracteres áàéèíòóú en el sfri.fla antes de exportar y tampoco.

    secorrooo!!

20. 23 junio 2006, 05:20José Luis

    Un inconveniente más a la primera opción (la más sencilla de todas): para los buscadores no tiene el mismo peso un texto normal que un texto en el atributo alt. Probablemente pasen por alto o le den poca relevancia a tu texto en alt.

21. 12 septiembre 2006, 18:53e-mypes

    Muy buen aporte y felicitaciones

22. 26 diciembre 2006, 11:50Petazeta

    Enhorabuena en primer lugar, muy buen artículo. Tengo 2 preguntas: – Cual es la técnica que utilizas para tu página y la tipografía que utilizas para los titulares? – Yo uso mucho WebEmbedFont pero sólo funciona para Microsoft, y antes utilizaba WebFontMaker de BitStream, pero ya está en desuso.
    Alguien conoce una herramienta parecida a WebEmbedFont de MIcrososft para Mozilla Firefox?
    Gracias a todos y enhorabuena de nuevo por el artículos

23. 19 febrero 2007, 15:48MAKINADEAPRENDIZAJE

    Por favor actualiza los links que aún no funcionan. Por todo lo demas , muy claro.

24. 3 mayo 2007, 16:01mautik

    me gusta más el IFR aunque me gustaría saber como hizo Kemie para ponerle sombras al texto…ya lo averiguaré

25. 5 noviembre 2007, 14:08Emilio

    Yo creo que Dinatext es una opción muy buena y hoy en día casi todos los servicios de alojamiento disponen de la librería GD. Donde no he podido aplicarlo es en los textos cuya letra inicial es de mayor tamaño. En css se consigue con el atributo first-letter (recomiendo leer http://www.mandarindesign.com/dropcaps.html) pero no he podido crear una imagen de texto cuya letra inicial sea de mayor tamaño; supongo que habrá que modificar el script de Stewart Rosenberger, seguiré intentándolo. Muy buen artículo.

26. 11 enero 2008, 06:12Gabriel

    A mi me gustaría que contaran que método es el utilizado aqui… Muchas gracias

27. 11 enero 2008, 09:01Kemie

    Diseñorama usa sIFR

28. 30 enero 2008, 18:03Run

    Uso Firefox 2.0.0.11 y por ejemploen este sitio donde usan el reemplazo de fuentes se ve con una caja verde… se ve horrible!!!

29. 5 abril 2008, 20:50josedelaranda

    Excelente artículo, yo uso sifr y me va my bien, excepto por la dificultad para poner sifr a los enlaces. Saludos

30. 10 octubre 2008, 20:38MatiasCruz

    Uno más para la colección, lo estoy estudiando pero me parece que tiene muchas ventajas sobre sIFR… en el manejo de links y cuestiones de usabilidad que tanto se le ha cuestionado a sIFR: Con ustedes… FaceLift http://facelift.mawhorter.net/learn-more/

    Saludos desde Argentina…

31. 12 marzo 2009, 00:36Demssite

    El Facelift me parece un poco mierda, ya que si desactivas las imágenes o tu browser no muestra imágenes, adiós, ya que no muestra el texto, se lo carga, con lo cual es accesible 0

32. 10 junio 2009, 17:14MatiasCruz

    Demssite, no sé cómo lo estarás usando, pero cuando visualizo una web que utiliza Facelift con un navegador que no soporta imagenes (el común de los mortales ve las imagenes, pero suponiendo que entra con un dispositivo movil o tiene una computadora del año 1980 o lo que sea) veo el texto HTML que normalmente reemplazaría.

    Por otro lado. Yo descubrí Facelift porque me molestaba de sIFR que al ser Flash perdía el click derecho y el click con la reduita del mouse para abrir link en una nueva pestaña. Lo cual si es un gran problema de usabilidad. Y cosa que viene a solucionar Facelift al ser una imagen.

    Saludos.-

33. 15 junio 2009, 17:33diseño web

    siempre utilice imagenes para los titulos cuando quiero utilizar una fuente especial. la mayor ventaja que veo es que no se pierde el texto a los ojos de los buscadores ya que mediante el nombre que le damos a la imagen y el alt se mantiene la optimizacion.

---

¡Comenta!

Nombre:

Email:

URL:

Mensaje: