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:
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:
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.
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.
Sólo lo hago para expresar públicamente mi agradecimiento a 
Donec a arcu sit amet velit pharetra tincidunt. Aliquam erat volutpat. Praesent ac consectetur felis. Sed vitae augue eget dolor tristique blandit. Ut porttitor ultrices erat. Curabitur ac lectus sed ipsum venenatis scelerisque vitae adipiscing odio. Proin eget lacus lorem, eu euismod enim. In sodales, augue sit amet pretium volutpat, magna lacus viverra magna, vestibulum lacinia leo erat vel tellus. Suspendisse sed ante quis nibh aliquam commodo! Phasellus nisl tortor, posuere a scelerisque in, iaculis id ipsum. Vivamus in bibendum magna! Etiam congue elementum turpis et aliquet. Suspendisse elit nunc; tristique eget pretium ullamcorper, sodales in libero. Sed nibh est, cursus non ultrices non, volutpat vitae metus. Sed rutrum lectus at lacus ultricies et gravida massa suscipit volutpat.
Pellentesque pharetra; neque quis adipiscing porta, nisl nibh fermentum justo, eget dignissim libero tortor sit amet ligula. Nulla facilisi. Morbi magna dolor, ornare vitae lobortis in, tincidunt quis nisi. Vivamus et urna felis. Donec tristique felis a urna bibendum vitae dictum mauris mollis. Praesent non metus lectus, ornare varius nibh. Nullam nisi quam, commodo sed tincidunt et, vulputate non diam. Cras leo sem, tempor varius semper ullamcorper, porttitor sed turpis. Praesent eget sapien a dui feugiat elementum. Quisque facilisis auctor dui eget faucibus. Pellentesque auctor tristique ultricies. Pellentesque eu viverra ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam magna neque, malesuada eget ullamcorper vel, aliquam ac nullam.
Aenean porta commodo diam, vitae vestibulum urna ultrices a. Etiam posuere posuere nibh; sed adipiscing lorem lacinia vel. Maecenas scelerisque tellus at nisi volutpat in consectetur nisl auctor. In hac habitasse platea dictumst. Nunc scelerisque purus sed erat sagittis tempor? Integer iaculis rhoncus sagittis. Curabitur enim quam, aliquet vel hendrerit ac, accumsan sed eros. Vivamus tristique arcu sed ligula luctus volutpat. Nunc non nisi eu ligula rutrum scelerisque. Vestibulum tellus risus, pellentesque vitae dictum et, adipiscing ut neque. Sed ultricies, nisl a tristique porta, leo neque semper lorem; non interdum metus ipsum at nulla. Mauris suscipit fermentum velit at ultrices.
Proin at nulla nisl, ut porttitor purus. Duis sit amet enim iaculis mi lobortis tempor. Nunc quis arcu arcu; id porta erat. Sed sed libero ut dolor euismod bibendum. Nam sapien ante, pellentesque a malesuada fermentum, varius eget urna. In at felis velit, quis varius lacus? Ut placerat orci pretium elit vestibulum egestas. Sed in facilisis mi. Cras rhoncus elementum purus, id commodo leo laoreet quis. Cras malesuada mattis placerat! Etiam ut enim ut leo ultricies mattis non et tellus. Nullam vel sollicitudin mauris. Integer ante velit, rhoncus a fermentum eget; varius at erat. Nunc suscipit egestas posuere. Ut ut eleifend turpis. Sed pharetra nisl id ipsum tempor facilisis. Nunc eget nibh in augue porta aliquam. Nulla molestie sodales elit lacinia pulvinar. Duis eget lectus dui, a nullam.
Con 
