Thumbshots es un servicio para incluir en una página web previsualizaciones, por medio de una imagen, de otras páginas web. La palabra Thumbshots viene de juntar otras dos palabras inglesas: Thumbnail y Screenshot.

En lenguaje técnico llamamos un thumbnail a una miniatura de una imagen, que muchas veces se utilizan para mostrar fotos que carguen rápido, de modo que sea el usuario el que decide si quiere ver la imagen original, con formato mayor y por lo tanto más pesada. Por su parte, un Screenshot es una captura de pantalla. Así que lo que se llama Thumshots podríamos describirlo en español como una captura de pantalla en miniatura.

Podremos haber visto en varios sitios web estas imágenes en miniatura, que aparecen al lado de enlaces a otras páginas web y sirven para que los usuarios obtengan una previsualización del sitio que se está enlazando y tengan más información con la que decidir si les interesa o no apretar ese link.

Colocar thumbnails de las capturas de pantalla de todas las páginas con las que enlazamos sería quizás demasiado laborioso, si es que tenemos muchos enlaces en nuestra página, porque tendríamos que hacer las capturas de cada uno de los sitios con los que linkamos, guardarlas, subirlas al servidor, etc. Además, si el sitio web enlazado cambia, también deberíamos cambiar la miniatura de su imagen, con lo que sería un poco pesado tener que ir revisando cada poco cada uno de los sitios, actualizando la imagen, etc.

En este artículo vamos a mostrar un método bien sencillo para disponer de miniaturas de previsualización de páginas web, para integrar en cualquier página, comercial o personal. Se trata de utilizar un servicio gratuito que podemos encontrar en http://www.thumbshots.org/

Cómo utilizar Thumbshots

El sistema es realmente simple. En principio en Thumbshots.org nos piden registrarnos para disfrutar de los servicios, pero realmente tampoco sería estrictamente necesario, ya que en principio sólo tenemos que configurar de una manera determinada la imagen que vamos a mostrar con la miniatura de los sitios.

El código de una imagen que muestra un thumbshot de cualquier sitio web sería el siguiente:

<img src="http://open.thumbshots.org/image.aspx?url=[LINK]" />

Como se puede ver, tan solo deberíamos componer la imagen con el src dirigido hacia http://open.thumbshots.org/image.aspx, pasando como parámetro la variable url con la URL o dirección de la página web que se pretende mostrar el thumbnail.

Por ejemplo, para ver el thumshot de DesarrolloWeb.com utilizaríamos un código como este: (aunque todavía habría que matizar el código siguiente, así que continua leyendo)

<img src="http://open.thumbshots.org/image.aspx?url=http://www.desarrolloweb.com/" />

Esta imagen se mostrará perfectamente en los navegadores, mostrando la imagen en miniatura del sitio web indicado, pero hay un pequeño detalle que se debería comentar, que tal vez conozcas. Resulta que las cadenas de texto que se pasan como variables en la URL tienen que ser codificadas con unos códigos especiales para que ciertos caracteres se comuniquen correctamente. Por ello, el link del que se quiere mostrar el thumbshot debe codificarse en formato URL. Esto, por ejemplo, con PHP se hace de manera automática, con la función urlencode(). Podríamos utilizar un código como este:

<img src="http://open.thumbshots.org/image.aspx?url=<?echo urlencode("http://www.desarrolloweb.com/");?>" />

Esta conversión a un formato URL nos daría un resultado como el que puede verse en este código:

<img src="http://open.thumbshots.org/image.aspx?url=http%3A%2F%2Fwww.desarrolloweb.com%2F" />

Además, las imágenes que nos devuelve Thumbshot tienen tamaño de 120x90, con lo que podríamos utilizar un código de etiqueta IMG que indique ese tamaño:

<img src="http://open.thumbshots.org/image.aspx?url=<?echo urlencode("http://www.guiarte.com/");?>" width=120 height=90 />

Enlazar con Thumbshots.org

El servicio de Thumbshots es enteramente gratuito, pero, para cumplir las políticas de uso de Thumshots.org necesitamos enlazar con la página web de los autores del servicio en todas las páginas que muestren estas miniaturas de imágenes de webs.

Quizás es un poco excesiva esta política de uso, que nos obligaría a insertar links en todas las páginas que muestran las miniaturas, pero es requisito indispensable. Esto es porque Thumbshots tiene un robot que cada cierto tiempo escanea las páginas que utilizan el servicio y si no encuentra el enlace en el código fuente de la página, se dejarán de mostrar las imágenes de miniatura en todo nuestro sitio.

Así pues, habría que insertar un link como este:

<a href="http://www.thumbshots.com" target="_blank" title="This site uses Thumbshots previews">This site uses Thumbshots previews</a>

Lógicamente, entendemos que el texto del enlace se puede cambiar para escribir el link en español:

Este sitio usa Thumbshots

Cómo son las miniaturas de Thumbshot

Para muestra de lo que podríamos conseguir con Thumbshots, lo mejor es utilizar directamente el servicio en este artículo y mostrar miniaturas de unas cuantas páginas web.

	Google.com El buscador más utilizado por internautas en todo el mundo. http://www.google.com
	DesarrolloWeb.com Tu mejor ayuda para aprender a hacer páginas web. http://www.desarrolloweb.com
	DesarrolloMultimedia.es Aprende a crear sistemas multimedia: audio, vídeo, infografía, 3D, CD y DVD interactivos, diseño gráfico, etc. http://www.desarrollomultimedia.es
	CriarWeb.com Proyecto de traducción al portugués de DesarrolloWeb.com. http://www.criarweb.com

Como se puede ver, las imágenes en miniatura de Thumbshots pueden dar un aspecto bastante atractivo a nuestras listas de enlaces, a la vez que ofrecen al usuario alguna información adicional sobre el sitio web enlazado, y sirven de ayuda visual sobre el interés o no de hacer clic en los enlaces.

Ahora bien, en el momento de escribir este artículo de desarrollo web. Com, por lo menos la imagen en miniatura de CriarWeb.com no aparece de manera correcta. Esto debe ser porque el renderizado que utilizan para componer la imagen no pilla bien los estilos que utiliza dicha página.

Si no nos gusta la imagen que muestran de nuestro sitio web podemos solicitar que la actualicen a través de la URL: http://www.thumbshots.com/manage/updatethumbshot.aspx

Conclusión sobre Thumbshots versión gratuita (y referencia a la versión de pago)

En definitiva, thumbshots ofrece una manera casi inmediata de mostrar previsualizaciones de páginas web en imágenes en miniatura de bastante calidad. Es gratuito, con lo que puede ser interesante tanto para webs personales como comerciales.

Claro está que la política de obligar a poner un enlace en todas las páginas que utilizan el servicio puede ser excesiva, pero claro que también nos parece una justa contraprestación. Para los casos que no nos interese colocar enlaces a thumbshots.org, también podemos contratar el servicio de pago que está en http://www.thumbshots.com/

En el servicio de pago no tenemos necesidad de enlazar con Thumbshots y se ofrece además con algún valor añadido, como la posibilidad de cambiar el tamaño de las imágenes.