Compartiendo imágenes con vi.sualize.us

vi.sualize.us es un servicio de marcadores especializado en imágenes. Está pensado para que una vez que nos registramos podamos marcar nuestras imágenes favoritas mientras navegamos por la red y compartirlas con otros usuarios de manera pública o privada.

Hay varias formas de utilizar el sistema. Lo elemental es desde el propio sitio, agregando la URL de la imagen pero nos dan dos posibilidades más que son útiles. Para Firefox hay una extensión que, una vez instalada, nos agrega la opción Add image to vi.sualize.us al menú que se activa con el botón derecho sobre cualquier imagen. Se abrirá una ventana y si estamos logueados, sólo deberemos poner el título y una descripción o etiquetas optativas. También incluye la posibilidad de agregar un ícono en la barra de herramientas del navegador.

Otra alternativa es agregar un botón que funciona a modo de bookmarklet. Esta, es válida para Firefox, Internet Explorer, Safari y Opera y es, probablemente, la forma más simple de usar el servicio.

Al crear la cuenta se crea un sitio accesible desde cualquier navegador, con una dirección URL única que posee feeds por lo que puede ser agregada a cualquier lector externo o ser agregada a Feedburner: http://vi.sualize.us/rss/vagabundia/

Como el RSS del sitio es compatible con el de Flickr, casi cualquier herramienta o gadget de este, funcionará con vi.sualize y una serie de direcciones extras permiten suscribirse a determinadas etiquetas:

• vi.sualize.us/rss son las imágenes más recientes de todo el sistema
• vi.sualize.us/rss/popular son las imágenes más populares
• vi.sualize.us/rss/popular/nombreEtiqueta son las imágenes más populares filtradas por etiqueta
• vi.sualize.us/rss/tag/nombreEtiqueta son las imágenes de una etiqueta
• vi.sualize.us/rss/nombreUsuario son las imágenes de un usuario específico
• vi.sualize.us/rss/nombreUsuario/nombreEtiqueta son las imágenes de un usuario específico con cierta etiqueta
• vi.sualize.us/rss/nombreUsuario/nombreEtiqueta1,nombreEtiqueta2 o con una serie de etiquetas

Esta posibilidad de acceder a los feeds es lo que lo hace interesante. A partir de ahí, hay una aplicación que permite agregarla a Facebook, un plugin para Wordpress y también un badge que podemos insertar en cualquier sitio web y que se puede personalizar casi por completo, utilizando CSS.

Para crear este último, accedemos a la herramienta respectiva y allí, colocamos los datos elementales: el nombre del usuario (el nuestro o el de cualquier otro), etiquetas si es que queremos filtrar los resultados, alguno de los modelos gráficos predeterminados y la cantidad de imágenes a ser mostradas (entre 1 y 30). El resultado, será un código que deberemos copiar y pegar donde nos guste.

Por defecto, se mostrará un tira vertical (manias de los desarrolladores) pero podemos cambiarlo ya que bastan cambiar un par de datos de ese código que tienen cuatro partes:

<style type="text/css">
... aquí están las propiedades que podemos modificar ...
</style>
<h2> el título </h2>
<ul id="visualizeus"></ul>
<script type="text/javascript">
... aquí está el script que genera el badge ...
</script>
<script type="text/javascript" src="http://vi.sualize.us/json/posts/nombreUsuario//?callback=vslzBadge&count=6"></script>

Podemos eliminar <h2> </h2> si no queremos mostrar el título y cambiar la cantidad de imágenes a mostrar cambiando el valor de count pero, lo más importante es lo que está en style.

ul#visualizeus { ... es el bloque donde s mostrarán las imágenes ... }
#visualizeus li { ... cada uno de los items de esa lista ... }
#visualizeus a#logo { ... el enlace que aparece al final del badge ... }

Si no queremos mostrar el logo colocamos:

#visualizeus a#logo {display: none;}

El resto, lo controlamos con las propiedades de ul#visualizeus y lo elemental sería esto:

ul#visualizeus {
background-color: #valor; /* el color de fondo */
border: 1px solid #valor; /* el borde */
height: valorpx;  /* la altura */
list-style-type:none !important;
margin: 0 auto;
padding: 0 !important;
width: valorpx;  /* el ancho */
}

Con height y width es podemos definir la forma de mostrarlo. Supongamos que usáramos seis imágenes:

width: 95px; height: 540px; lo mostrará de forma vertical
width: 570px; height: 95px; lo mostrará de forma horizontal
width: 285px; height: 185px; lo mostrará como dos filas con tres imágenes por fila

Así que todo es cuestión de imaginación y un poco de aritmética.