Reemplazo de texto por imagen

severicks · #1 (**permalink**) 11/09/2009, 18:09

me pregunto si al reemplazar un texto de por ejemplo un H1 con css haciendo q el texto se mueva a la izquierda lo suficiente para que la gente no lo vea y poninedo una imagen de fondo afecta el modo en q los spiders de los buscadores leerian ese H1 y si de algun modo el hacer esto con todos mis H1 se consideraria BlackHat por esconder el texto considerando q es una pagina extensa y tendria bastantes H1

Alvarix18 · #2 (**permalink**) 12/09/2009, 06:37

La verdad es que debería, pero no sé porque muchas webs importantes lo hacen y no son penalizadas...

severicks · #3 (**permalink**) 12/09/2009, 11:19

en serio es black hat? es decir, el texto q se esconde es un h1 normal no esta sobrecargado de palabras clave ni nada por el estilo simplemente se esconde para q una imagen de fondo con el mismo contenido q el h1 le de una mejor presentacion al sitio

Daniel Ulczyk · #4 (**permalink**) 12/09/2009, 11:41

Doy como referencia una entrada en el blog de Dave Shea: Image replacement + Google

sorinsoso · #5 (**permalink**) 13/09/2009, 06:35

Si no es recomendable, ¿porque hacerlo?
No creo que se merece el esfuerzo.

rashid · #6 (**permalink**) 13/09/2009, 07:59

No es una técnica penalizada por que este tipo de usos se hacen principalmente para mejorar el rendimiento de las páginas en dispositivos móviles.

Es lo mismo con reemplazar un link en imágen para ser visto por los robots como link en texto, o una imágen por texto. Son técnicas válidas y transparentes y G no las penaliza por que tienen como ojetivo alcanzar la población móvil

;)

zerpico_01 · #7 (**permalink**) 14/09/2009, 15:22

La única solución técnicamente correcta desde el punto de vista de CSS es el uso de la directiva @font-face. Esta directiva se definió en el estándar CSS 2, pero desapareció en el estándar CSS 2.1 que utilizan todos los navegadores de hoy en día. La futura versión de CSS 3 volverá a incluir la directiva @font-face en el módulo llamado Web Fonts. --> http://www.w3.org/TR/css3-webfonts/

La directiva @font-face permite describir las fuentes que utiliza una página web. Como parte de la descripción se puede indicar la dirección o URL desde la que el navegador se puede descargar la fuente utilizada si el usuario no dispone de ella. A continuación se muestra un ejemplo de uso de la directiva @font-face:

Código PHP:

  @font-face { 
  font-family: "Fuente muy rara"; 
  src: url("http://www.ejemplo.com/fuentes/fuente_muy_rara.ttf"); 
} 
  
h1 { 
  font-family: "Fuente muy rara", sans-serif; 
}

La directiva @font-face también permite definir otras propiedades de la fuente, como su formato, grosor y estilo. A continuación se muestran otros ejemplos:

Código PHP:

  @font-face { 
  font-family: Fontinsans; 
  src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype"); 
  font-weight: bold; 
  font-style: italic; 
} 
  
@font-face { 
  font-family: Tagesschrift; 
  src: url("fonts/YanoneTagesschrift.ttf") format("truetype"); 
}

Los ejemplos anteriores han sido extraídos de la página 10 Great Free Fonts for
http://opentype.info/demo/webfontdemo.html
@font-face embedding. Para ver el efecto de la directiva @font-face, debes acceder a esa página utilizando un navegador como Safari.

Si se dispone de un título de sección <h1> que se quiere mostrar con una tipografía muy especial, se puede utilizar el siguiente código HTML y CSS para sustituirlo por una imagen:

Código PHP:

  <h1><span>Lorem ipsum dolor sit amet</span></h1> 
  
h1 { 
  width: 450px; 
  height: 100px; 
  background: #FFF url("/imagenes/titular.png") no-repeat top left; 
} 
  
h1 span { 
  display: none; 
}

El código anterior muestra como imagen de fondo del elemento <h1> la imagen que contiene el titular escrito con la tipografía deseada. Para sustituir el texto por la imagen, simplemente se oculta el texto mediante la propiedad display: none.

Aunque se trata de una de las técnicas FIR más sencillas, su principal problema es que el texto oculto mediante display no lo leen correctamente los dispositivos lectores de páginas que utilizan las personas con discapacidades visuales.

La evolución de la técnica anterior consiste en reemplazar la propiedad display por text-indent:

Código PHP:

  <h1>Lorem ipsum dolor sit amet</h1> 
  
h1 { 
  width: 450px; 
  height: 100px; 
  background: #FFF url("/imagenes/titular.png") no-repeat top left; 
  text-indent: -5000px; 
}

Utilizando un valor negativo muy grande en la propiedad text-indent del elemento que se quiere reemplazar, el texto no se oculta pero se desplaza fuera de la pantalla. Los navegadores normales no muestran el texto y los lectores de páginas lo leen correctamente porque el texto no está oculto.

El problema de la solución anterior es que si el navegador tiene activado CSS y desactivada la carga de las imágenes, no se muestra nada. La solución consiste en volver a utilizar otro elemento <span> dentro del elemento que se quiere reemplazar:

Código PHP:

  <h1><span></span>Lorem ipsum dolor sit amet</h1> 
  
h1 { 
  width: 450px; 
  height: 100px; 
  position: relative; 
} 
  
h1 span { 
  background: #FFF url("/imagenes/titular.png") no-repeat top left; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
}

En esta solución, la imagen se muestra por delante del texto, por lo que aunque el texto no se oculta ni se desplaza, el usuario no puede verlo. El principal problema de esta técnica es que no se pueden utilizar imágenes con transparencias.

Por último, se muestra una versión simplificada de la solución anterior que presenta los mismos problemas con las imágenes transparentes:

Código PHP:

  <h1><span>Lorem ipsum dolor sit amet</span></h1> 
  
h1 { 
  width: 450px; 
  height: 100px; 
  background: #FFF url("/imagenes/titular.png") no-repeat top left; 
} 
  
h1 span { 
  position: relative; 
  z-index: -1; 
}

El artículo Revised Image Replacement presenta otras técnicas FIR y discute sus problemas y limitaciones.

http://www.mezzoblue.com/tests/revis...e-replacement/

1.7.3. Soluciones avanzadas

Las soluciones basadas exclusivamente en CSS suelen presentar problemas con los lectores de páginas que utilizan las personas discapacitadas para navegar. Por ese motivo se han ideado otras soluciones basadas en diferentes lenguajes de programación.

El programador Peter-Paul Koch ha creado una solución basada en JavaScript y que explica en su artículo Image Replacement. Esta solución muestra las imágenes en todos aquellos navegadores que las soporten y muestra sólo el texto en cualquier otro caso. De esta forma, el texto original no se oculta de ninguna manera que pueda impedir a los lectores de páginas acceder a los contenidos.

http://www.quirksmode.org/dom/fir.html

Otras soluciones permiten crear de forma dinámica las imágenes que sustituyen al texto. El proceso es muy complejo porque hay que considerar aspectos como el espacio máximo que puede ocupar la imagen y los posibles saltos de línea en el texto. Existen multitud de soluciones de este tipo para diferentes lenguajes de programación, como por ejemplo el proyecto http://code.google.com/p/pcdtr/

salute

zerpico_01 · #8 (**permalink**) 14/09/2009, 15:33

mas info aqui

http://www.forosdelweb.com/f16/susti...6/#post3083703

saludos!!

Daniel Ulczyk · #9 (**permalink**) 14/09/2009, 15:46

impecable tu exposición *zerpico_01*

excepto por...

Cita:

Iniciado por zerpico_01

La única solución técnicamente correcta desde el punto de vista de CSS es el uso de la directiva @font-face.

Como bien decís, el uso de font-face no es hoy día un estándar; por lo tanto no es soportado por la mayoríía de los navegadores. Ergo, no es una solución ténicamente correcta.

Desde el punto de vista de SEO y en la medida en que Googlebot "ve" los documentos, tanto sIFR como CSS Image Replacement (ver 9 techniques for CSS Image Replacement) son 2 técnicas amplia y difundidamente utilizadas.