Adicionar uma imagem em miniatura das webs com Thumbshots

Explicamos como integrar Thumbshots em sua página web, um serviço gratuito que permite apresentar pré- visualizações das páginas com as quais você se conecta.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 16/8/11
Valorize este artigo:
Thumbshots é um serviço para incluir em uma página web pré-visualizações, por meio de uma imagem, de outras páginas web. A palavra Thumbshots vem da junção de outras duas palavras inglesas: Thumbnail e Screenshot.

Em linguagem técnica chamamos thumbnail à miniatura de uma imagem, que muitas vezes se utiliza para mostrar fotos que carreguem rápido, de modo que é o usuário o que decide se quer ver a imagem original, com formato maior e portanto mais pesada. Por sua parte, um Screenshot é uma captura de tela. Assim, o que se chama Thumshots poderíamos descrevê-lo em português como uma captura de tela em miniatura.

Podemos ter visto em vários websites estas imagens em miniatura, que aparecem ao lado de links para outras páginas web e servem para que os usuários obtenham uma pré-visualização do site com que se está fazendo um link e tenham mais informação para decidir se lhes interessa ou não clicar esse link.

Colocar thumbnails das capturas de tela de todas as páginas com as quais nos conectamos seria talvez demasiado laborioso, caso tenhamos muitos links em nossa página, porque teríamos que fazer as capturas de cada um dos sites com os que nos linkamos, salvá-las, subi-las ao servidor, etc. Além disso, se o website linkado muda, também deveríamos mudar a miniatura de sua imagem, de modo que seria um pouco aborrecido ter que ir revisando cada um dos sites, atualizando a imagem, etc.

Neste artigo vamos mostrar um método bem simples para dispor de miniaturas de pré-visualização de páginas web, para integrar em qualquer página, comercial ou pessoal. Trata-se de utilizar um serviço gratuito que podemos encontrar em http://www.thumbshots.org/

Como utilizar Thumbshots

O sistema é realmente simples. Em princípio, em Thumbshots.org nos pedem para nos registrarmos para poder desfrutar dos serviços, mas na verdade não seria exatamente necessário, já que em princípio só temos que configurar de uma maneira determinada a imagem que vamos mostrar com a miniatura dos sites.

O código de uma imagem que mostra um thumbshot de qualquer website seria o seguinte:

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

Como se pode ver, basta compor a imagem com o src dirigido para http://open.thumbshots.org/image.aspx, passando como parâmetro a variável url com a URL ou endereço da página web que se pretende mostrar o thumbnail.

Por exemplo, para ver o thumshot de DesarrolloWeb.com utilizaríamos um código como este: (embora ainda houvesse que matizar o código seguinte, assim que continue lendo)

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

Esta imagem será visualizada perfeitamente nos navegadores, mostrando a imagem em miniatura do website indicado, mas há um pequeno detalhe que deve ser comentado, e que talvez você conheça. Resulta que as cadeias de texto passadas como variáveis na URL têm que ser codificadas com uns códigos especiais para que certos caracteres se comuniquem corretamente. Por isso, o link do que se quer mostrar o thumbshot deve codificar-se em formato URL. Isto, por exemplo, com PHP é feito de maneira automática, com a função urlencode(). Poderíamos utilizar um código como este:

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

Esta conversão para um formato URL nos daria um resultado como o que pode ser visto neste código:

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

Nota: Em ASP, existe um método similar à função urlenconde() de PHP. É o método URLEncode() do objeto server. Para ver como utilizá-lo leia o artigo Objeto Server de ASP.

Ademais, as imagens que nos retorna Thumbshot têm tamanho de 120x90, de modo que poderíamos utilizar um código de etiqueta IMG que indique esse tamanho:

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

Linkar com Thumbshots.org

O serviço de Thumbshots é inteiramente gratuito, mas, para cumprir as políticas de uso de Thumshots.org necessitamos linkar a página web dos autores do serviçoa todas as páginas que mostram estas miniaturas de imagens de webs.

Talvez seja um pouco excessiva esta política de uso, que nos obrigaria a inserir links em todas as páginas que mostram as miniaturas, porém é requisito indispensável. Isto porque Thumbshots tem um robot que a cada certo tempo escaneia as páginas que utilizam o serviço e se não encontra o link no código fonte da página, as imagens de miniatura em todo nosso site deixarão de ser mostradas.

Assim, haveria que inserir um link como este:

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

Logicamente, entendemos que o texto do link pode ser mudado e escrito em português:

Este site usa Thumbshots

Como são as miniaturas de Thumbshot

Para uma mostra do que poderíamos conseguir com Thumbshots, o melhor é utilizar diretamente o serviço neste artigo e mostrar miniaturas de algumas páginas web.

Google.com
O buscador mais utilizado por internautas em todo o mundo.
http://www.google.com
DesarrolloWeb.com
Sua melhor ajuda para aprender a fazer páginas web.
http://www.desarrolloweb.com
DesarrolloMultimedia.es
Aprenda a criar sistemas multimídia: áudio, vídeo, infografia, 3D, CD e DVD interativos, desenho gráfico, etc.
http://www.desarrollomultimedia.es
CriarWeb.com
Projeto de tradução para o português de DesarrolloWeb.com.
http://www.criarweb.com

Como se pode ver, as imagens em miniatura de Thumbshots podem dar um aspecto bastante atrativo a nossas listas de links, ao mesmo tempo que oferecem ao usuário alguma informação adicional sobre o website linkado , e servem de ajuda visual para o interesse ou não de clicar os links.

Agora , à hora de escrever este artigo de Criarweb. com, pelo menos a imagem em miniatura de CriarWeb.com não aparece de maneira correta. Isto deve ser porque o renderizado utilizado para compor a imagem não pega bem os estilos que essa página utiliza.

Se não nos agrada a imagem mostrada de nosso website podemos solicitar que seja atualizada através da URL: http://www.thumbshots.com/manage/updatethumbshot.aspx

Conclusão sobre Thumbshots versão gratuita (e referencia à versão paga)

Concluindo, thumbshots oferece uma maneira quase imediata de mostrar pré-visualizações de páginas web em imagens em miniatura de bastante qualidade. É gratuito, de modo que pode ser interessante tanto para webs pessoais quanto comerciais.

Claro está que a política de obrigar a colocar um link em todas as páginas que utilizam o serviço pode ser excessiva, mas claro que também nos parece uma justa contraprestação. Caso não nos interesse colocar links para thumbshots.org, também podemos contratar o serviço pago que está em http://www.thumbshots.com/

No serviço pago não há necessidade de linkar com Thumbshots , além do que é oferecido , com algum valor adicional, por exemplo, a possibilidade de mudar o tamanho das imagens.





Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato