JMiur [E]

PageGlimpse es un servicio que nos permite generar miniaturas de páginas web y mostrarlas en nuestro sitio, sin necesidad de crearlas previamente, utilizando sólo etiquetas HTML o JavaScript.

Implementar esto es extremadamente sencillo. Primero que nada, debemos crear una cuenta gratuita, enseguida nos enviarán un correo a través del cual nos informarán cuál es nuestra clave (una serie de números y letras).

Para utilizar el servicio, en 925html.com han creado una librería de apenas 4KB que nos permite manejar estas miniaturas pero, en realidad, si miramos la documentación del API de PageGlimpse, nos daremos cuenta que no hace falta todo eso y que todo se reduce a crear una URL o un enlace con los parámetros correctos.

Una función muy interesante que nos ofrecen es que, si la miniatura no existe, ellos la generarán en menos de 24 horas.

¿Cómo creamos esa URL? Lo mínimo que debemos escribir es algo así:

http://images.pageglimpse.com/v1/thumbnails?url=http://XXXXXXXXXX&devkey=XXXXXXXXXX

La base es:

http://images.pageglimpse.com/v1/thumbnails?

a lo que le agregamos algunos parámetros uniendolos con el símbolo &:
  • devkey es un texto obligatorio, la clave que previamente nos adjudicaron
  • url es un texto obligatorio con la dirección URL de la página que queremos mostrar y siempre, debe comenzar con http:// o https://
  • size es un texto opcional que tiene tres valores posibles y que establecen el tamaño de la miniatura a mostrar:
    • small muestra una imagen de 150x108 (es el valor por defecto)
    • medium muestra una imagen de 280x202
    • large muestra una imagen de 430x310
  • root es un texto opcional que indica si se mostrará la miniatura de la raiz del dominio y no de una página interior si esa miniatura no está disponible. Por defecto es yes.
  • nothumb es u texto con la URL de una imagen alternativa que será mostrada en caso que la miniatura no esté disponible.
Un ejemplo:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.blogger.com/&size=large&devkey=XXXXXXXXXX

Esa URL la podemos aplicar a cualquier etiqueta, por ejemplo IMG:
<img src="http://images.pageglimpse.com/v1/thumbnails?url=http://www.blogger.com/&size=large&devkey=XXXXXXXXXX" />
Con un poco de JavaScript, podríamos simplificar als cosas aún más. Podríamos crear una función que creara esa etiqueta IMG por nosotrso, enviándole algunos datos.

Agreguemos esto antes de </head>:
<script type='text/javascript'>
// <![CDATA[ 
function getMiniaturaPG (cual,como) {
if (cual == null){return}
if (como == null){como = 'small'}
document.write('<img class="miniPG" src="http://images.pageglimpse.com/v1/thumbnails?url=' + cual + '&size=' + como + '&devkey=XXXXXXXXXX" />');
}
// ]]>
</script>
Por supuesto, reemplazando XXXXXXXXXX por nuestra clave personal.

Y lo usaríamos de este modo:
<script>getMiniaturaPG('http://unaDireccion');</script>
En cuyo caso, se mostrará la miniatura de tamaño mínimo, o bien, podemos agregarle el parámetro para mostrar miniaturas más grandes:
<script>getMiniaturaPG('http://unaDireccion','small');</script>
<script>getMiniaturaPG('http://unaDireccion','medium');</script>
<script>getMiniaturaPG('http://unaDireccion','large');</script>
Como en el script, la etiqueta tiene una clase (miniPG), podríamos darle propiedades CSS para mostrarla con cierto diseño: por ejemplo:
.miniPG {
background-color: #000;
border: 2px solid #456;
margin: 5px;
padding: 5px;
}

30 comentarios:

los sin techos  

Admirado Maestro quisiera que entre los post y el menu que me separa de la cabecera no existiera espacio alguno solo el necesario para colocar el titulo. tambien quiero quitar la linea que aparece arriba del post.

Responder
E-migrad@  

K buen truco, JMiur, es excelente.


Lo voy a implementar a la brevedad. Me viene como anillo al dedo ahora mismo.


Cuando puedas, pasa por el este post de Migraciones Internas, por favor:

http://migraciones--internas.blogspot.com/2009/04/los-blogs-que-leo.html

Buen martes, E-migrad@

Responder
Aleandra Alcón  

Me perdí adentro de la pagina de Glimpese, pensaba encontrar un lugar donde me pedían la url de la pagina y me devolvían ese código. Pero no. Llegué y ni siquiera sé para qué lado arrancar. Y ya lei lo que escribiste, que parece que lo tienes clarisimo, pero antes de llegar a eso, tengo el eslabon perdido.

Sorry
gracias igual. Me gustaba.

Responder
Yhonny E.  

Esta buenisimo el dato..

y hablando de datos
Jm debido a el dolor de cabeza que me ha causado el tener que pedirle favores a mis amigos.para que me descarguen las plantillas para mi blog puesto a que esta pc tiene virus.he descubierto una web.jeje.donde puedo descomprimir mis archivos en linea.y me dan el codigo.con sus respectivos analisis de datos.bueno si ya sabes de el.no importa..solo queria aportar algo.jeje

la web es esta http://www.wobzip.org/

y simplemente guardamos el archivo de la weu donde lo queremos sacar.y examinamos luego en esta web desde nuestra pc.y listo.

saludos!

Responder
Unknown  

genial JM, no se me hubiera ocurrido lo de ponerle bordes...escucha tesoro, tienes explicado lo de suscribirse???, solo se usa Feedburner??? gracias!!!

Responder
Gem@  

Andaaaaa mi página de Twitter jajajaja no sabía que decía tantas tonterías :O
PageGlimpse no está mal pero con las explicaciones ya es otra cosa :)

Responder
JMiur  

Los sin techos:
Lo mejor, sería agregarle propiedades a ese elemento para no cambiar el resto. Coloca esto antes de <b:/skin>

#HTML1 {margin-bottom:0;padding-bottom:0;border:none;}

Con eso quitas el margen y el borde. Si quieres que se separe un poco, coloca un valor en margin-bottom

E-migrad@:
¡Qué bueno! Te lo agradezco mucho :)

Monte:
En realidad, no hay eslabón perdido. Una vez que te registras y tienes el número de clave personal, en la página de PageGlimpse no hay nada más que hacer. Simplemente, usa esa clave y escribe las direcciones de las páginas que quieres mostrar, siguiendo el modelo del post.

Yhonny E:
Miraré de que se trata eso. Gracias por la información.

Graciela:
En esta entrada esta explicado un poco cada opción de Feedburner. Algunas cosas han cambiado pero básicamente sigue siendo lo mismo. Dime si tienes alguna dificultad con algo específico y lo resolvemos.

Gem@:
Es de lo mejor que he visto. Ayer, al publicar, la captura de tu Twitter no estaba disponible y, evidentemente, la han creado. Muy fácil de usar, creo que tiene muchas posibilidades.

Responder
PedroX  

Hola JMiur.. Aqui vengo con dos preguntas mas xD (es que compre el dominio del blog, tengo unos dias agitados xD):

1. Compre el Dominio Ayer a las 4:00pm (venezuela), y cuando voy a escritorio y le doy a VER BLOG sale el aviso de Blog En Transición, entiendo eso, pero ahi dice que en 3 dias estara listo, bla, bla, bla.. Pero si coloco el link "nuevo" en el navegador se abre sin problemas.. Entonces la pregunta es: Despues de los 3 dias es que se quitara el anuncio de Blog En Transicion???????

2. Esto es urgentisimo xD: Tengo 3 cuentas de Hotmail, pero odio tener q abrir cada una.. Hay alguna forma de que todos los correos que me llegan a esas 3 cuentas me lleguen a una sola????????????????? Esuche por ahi que con GMail se puede hacer.. de ser asi, tu me harias el gran favor de explicarme como?? Gracias!!!!!!!

Responder
Unknown  

:P gracias George, si algo no funciona te aviso!!!

Responder
JMiur  

Lo del dominio propio no sabría decirte. El tiempo ese es el tiempo que tarda en expandirse la IP por la red, es un valor variable, puede ser que digan tres doias para tomarse el tiempo máximo. Por supuesto, una vez pasado ese tiempo, debería desaparecer el mensaje.

No uso Hotmail hace años. La redirección se hace desde la cuenta original, n orecuerdo que Hotmail tuviera esa opción pero pudo haber cambiado.

Responder
Anónimo  

Pues a mí no me funciona y no entiendo la razón.
Mira, copio todo tal cual es, pero no me muestra las imágenes.

por que no me salen las imágenes de las paginas

Responder
Nicar  

Hola JMiur.
Tenia la misma duda que Montes pero ya leí como solventarla.
Con tu permiso, para Pedro X ,que mire esto para la segunda pregunta.
http://holacape.blogspot.com/2009/03/recibir-en-gmail-el-correo-de-hotmail.html.
Saludos.

Responder
JMiur  

La dirección está correcta, te faltaría usarla en alguna parte, tal como dice el post, por ejemplo, en una etiqueta IMG. De esta manera:

<img src="http://images.pageglimpse.com/v1/thumbnails?url=http://alkaviedez.blogspot.com/&size=small&devkey=5b576ae0e8291538f7f70ef3dff5986e" />

Responder
Nicar  

Este invento lo puse en una "faviconera" con lightwindow. Lo que no se, es si las miniaturas.. ¿se van actualizando?.

Responder
Anahí  

Me gusta esta aplicación, se le puede dar muchos usos, ya mismo la estoy probando, ¿pero dónde pongo los enlaces?
Saludos.

Responder
Anónimo  

Gracias, lo copio tal cual, como me lo diste ahora, pero tampoco sale. Solamente se ve el texto del código.
Quizas sea wordpress...
Lástima, me gustaba.

Responder
JMiur  

NKR: Buena idea, es similar a lo que pensaba, por ejemplo, usarlo para los blogrolls. No sé si se actualizan.

Anahí: Donde quieras. Es una URL como cualquier otra, si colocas una IMG se verá, si colocas un enlace se mostrará como cualquier otro.

Monjaguerrillera: Acabo de copiar ese código en WP y aquí está el resultado. No parece haber problemas. Trata de hacerlo desde el editor en modo HTML. Cualquier cosa, colócalo en un post donde pueda verlo o en una Page, por ejemplo.

Responder
los sin techos  

Gracias Maestro jmiur logre lo que quería pero ahora quisiera que la cabecera quedar al mismo nivel de la barra del menú es decir que no hubiera espacio, agradecido como siempre por tan magnos servicios

Responder
Anahí  

¿Y si uso el script? sería enlace + script?

Responder
JMiur  

Si quieres que sea del mismo ancho, cambia ese ancho en la barra de menus:

#subnavbar {
..................
width:720px;
}

Responder
JMiur  

Anahí:

Una miniatura con enlace sería algo así.

<a href="laURL/"><script>getMiniaturaPG('laURL/','medium');</script></a>

Responder
Anahí  

Perfecto, JMiur, gracias.

Responder
Anónimo  

Gracias, pero es que lo puse en una page. (De hecho quería que en mi Page "Amigos" aparecieran los enlaces mostrando la imagen de la pagina de ellos) Y también lo probe en un post. Y nada...
Sabes que vi, que si tomo un texto por ejemplo "vagabundia" y le coloco el enlace (usando el icono de enlazar) con todo el código de glimpse pues se abre otra pagina y se ve perfectamente tal como quería que se viera. Pero si no le coloco el enlace, pues sólo me muestra la linea de código. Pienso si tal vez algún plugin no me esté permitiendo que se vea automáticamente. Pero ya no sabría cuál.
Gracias por tu atención y ayuda.

Responder
JMiur  

Es extraño, realmente. Lo puse en WP para verificarlo ya que no lo había probado ¿Has intentado colocar el código desde el modo HTML y no desde el editor visual?

Responder
Nicar  

Hola JMiur.
Al final desistí del servicio y puse la faviconera con LightWindons . De este modo siempre están actualizados los blogs. Me costo trabajo poner las medidas (que yo queriapara abrir la ventana modal Al final te lo copié del código fuente.
Un saludo y muchas gracias.

Responder
JMiur  

Mientras funcione, todo esta perfecto :D

Responder
KnxDT  

Ah, llevaba tiempo sin andar sumergido blogeramente como para pasearme a comentar. Qué satisfacción que hayas seguido creando material de calidad, como éste, mientras tanto.

Saludos.

Responder
JMiur  

Saludos Knot. Um gusto en verlo :)

Responder
Pancho Gamez  

una consulta esas imagenes en miniatura se actualizan solas al cambiar la portada de la pagina ala cual se le saco la miniatura? es decir: si la captura de pantalla es de por ejemplo google la miniatura sera las clasicas letras de google y fondo blanco, pero si google cambia el fondo a negro entonses en mi miniatura cambiara a fondo negro?

Responder
JMiur  

No tengo idea. Dudo mucho que se actualicen de manera dinámica; tal vez lo hacen cada cierto tiempo. No lo sé.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR