JMiur [E]

Existe un plugin para WordPress llamado WP-Cumulus que nos permite generar un archivo de Flash donde mostraremos una nube con las etiquetas del blog. Por suerte, los creadores han pensado en nosotros, los pobres mortales y también nos explican como poder crear lo mismo en cualquier página web.

Será tal vez un poco más engorroso porque habrá que hacer ciertas cosas manualmente pero en realidad es bastante sencillo y flexible ya que podremos colocarlo en cualquier parte, ya sea en un post, en la sidebar o en la plantilla y personalizarlo para que se adapte a nuestras necesidades.

Para empezar, descargamos el archivo ZIP que contiene los archivos necesarios y los ejemplos.

De todo eso, lo mínimo que necesitamos tener son dos archivos:

swfobject.js es una librería que nos permite utilizar Flash de manera sencilla y sin necesidad de reproductores externos (más información)
tagcloud.swf es el archivo de Flash que se mostrará

Para usarlo, lo que vamos a hacer es transferirle a ese archivo, una serie de datos mediante un atributo llamado flashvars. Esos datos, los podemos "escribir" uno por uno o bien utilizar un archivo XML externo que deberá llamarse tagcloud.xml y tiene que estar alojado en el mismo lugar que el SWF.

Como en Blogger esto no es tan sencillo, lo mejor es hacerlo "a mano", escribiendo el código que, en realidad, no es otra cosa que enlaces. Veamos un ejemplo concreto:
<script type="text/javascript" src="URL_swfobject.js"></script>

<div id="flashcontent">Es el DIV donde se mostrará el FLASH</div>

<script type="text/javascript">
var so = new SWFObject("URL_tagcloud.swf", "tagcloud", "ancho", "alto", "7", "#FFFFFF");
so.addParam("allowScriptAccess", "always"); 
so.addParam("wmode", "transparent"); // si no se quiere un fondo transparente, eliminarlo
so.addVariable("tcolor", "0x333333"); // el color de los textos en formato hexadecimal
so.addVariable("tspeed", "100"); // la velocidad
so.addVariable("tagcloud", "<tags>
// la lista de enlaces que se mostrará en la nube
<a href='URL_enlace1' style='tamaño'>TEXTO-1</a>
<a href='URL_enlace2' style='tamaño'>TEXTO-2</a>
.......
</tags>");
so.write("flashcontent");
</script>
ancho y alto definen el tamaño del Flash que vamos a mostrar
#FFFFFF es el color de fondo si no queremos que sea transparente

Cada texto es un enlace donde tamaño es un número que indica la dimensión de la fuente; por ejemplo, una etiqueta para Blogger se escribiría así:
<a href='http://vagabundia.blogspot.com/search/label/JavaScript' style='10'>JavaScript</a>
El punto clave aquí es la forma en que transferimos los datos, es decir, los enlaces y los textos. Si es un post, todo deberá ser escrito en una sola línea y deberán reemplazarse los caracteres < y > por &lt; y &gt; así que pude ser un poco confuso y hay que hacerlo con cuidado:
so.addVariable("tagcloud", "&lt;;tags&gt;&lt;a href='URL_enlace1' style='10'&gt;TEXTO-1&lt;/a&gt;&lt;a href='URL_enlace2' style='14'&gt;TEXTO-2&lt;/a&gt;&lt;a href='URL_enlace3' style='12'&gt;TEXTO-3&lt;/a&gt;&lt;/tags&gt;");
Este TXT tiene el código del ejemplo del post usando un SWF alojado en ImageShack.

También es posible colocarlo en la sidebar. Hay un ejemplo de esto en mi blog de pruebas usando una técnica diferente, colocando el código en un archivo de texto y cargándolo como un script en un elemento HTML:
<div id="flashcontent">Es el DIV donde se mostrará el FLASH</div>
<script src="URL_cumulusDEMO_sidebar.txt" type="text/javascript"></script>
Este TXT tiene el código del ejemplo.

Sea cual sea el modelo, debemos cargar swfobject.js, ya sea en el header de la plantilla o antes de usar el script.

ACTUALIZACIÓN:

En La Bloguería nos muestran la forma de implementar la misma nube sin necesidad de "escribir" los enlaces uno por uno. Es una forma sencilla de hacerlo si lo que queremos es aplicarlo a las etiquetas de nuestro blog.

62 comentarios:

solrac  

Qué casualidad! Precisamente anoche navegando por internet ví un blog de WP con este plugin, me pareció muy bueno y estube mirando un poco el código fuente de la página para ver si podía encontrar algo, pero como era un poco tarde (los ojos se me estaban cerrando!) decidí dejar la investigación para otro día ... Muchas gracias JM, me has ahorrado el trabajo ;)

Responder
Ignasi  

Hola!

Tiene buena pinta esto del cumulus; lastima que se tenga que hacer tanto a mano, sobre todo poner todos los links de las etiquetas...

Peeero... con paciencia y una caña todo se consigue. :)

Gracias JMiur!

Responder
Gem@  

Yo también lo vi hace unos días en la página del autor y la verdad el efecto es muy llamativo y atractivo, debo reconocer que en tu blog queda mejor al tener el fondo oscuro.

Responder
LUIS BORGES  

¡Uy! ¡que bonito!, cuando en blogger se puedan alojar estos archivos lo haré jejejeje.

Amigo JMiur, me gustaban mas las letras blancas en los comentarios :(

Pero es tu blog haz lo que desees, ¡sé libre!, ¡sé BLOGGER!

Responder
Claudio "Poca Tinta"  

Que bueno, me sumo a los comentarios.. jejeje. También lo habia visto y esperaba que te animaras a poner algo.

Veremos que sucede y gracias por los aportes amigo. :)

Responder
La Blogueria  

La verdad que directamente te lo queria pedir, ya que vi el plugin para Wordpress y me recomía la envidia... no sé si lo aplicaré (no creo que mi blog lo aguante sin explotar), pero es bonito de mirar; de hecho llevo un buen rato moviendo las etiquetas y ahora volveré otro rato. ¡Gracias mil!

Responder
Chessco  

Gracias lo implemente en mi sitio y funciono a las mil maravillas. Muy bien explicado.
http://blog.cdobregon.net

Responder
Tejer Bien  

muy bueno!

Responder
JMiur  

En WordPress es sencillo peo en Blogger es engorros escribir los enlaces aunque, puede hacerse con paciencia.

Algo es cierto: es hipnotizante :D

Luis: no hay cambios de colores, las letras siguen siendo las mismas.

Responder
Gem@  

Una pregunta J.Miur ¿es posible añadir más de un color en los textos de las etiquetas? en concreto un mismo color pero en diferente tonalidad.

Responder
LUIS BORGES  

Hey son blancas! mmm que raro, estoy perdiendo mis sentidos...T.T

Responder
((Marco))  

Me leiste la mente JMiur, gracias miles de gracias!, y al final aunque la forma de hacerlo sea un poco larga, el resultado lo vale

Responder
Luzdeluna  

vaya vaya!!! me salió Jmiur!!
Un abrazo

Responder
LUIS BORGES  

Caballero J, necesito su ayuda :(

Sabes que uno puede elegir de que color quiere los links, por ejemplo: azul eléctrico, verde radioactivo, esos colores fluorescentes, bueno, cuando colocas el cursor sobre un link el mismo se subraya y cambia de color, los links de mi blog son morados o violetas, y al colocar el cursor sobre ellos se ponen blancos, yo quisiera que no se pusieran blancos sino de otro color, o que al menos no cambien su color y que solamente se subrayen... busqué en la plantilla, pero ¿adivina que?, no lo ví:(

Responder
JMiur  

Gem@:
No hay forma de hacerlo sin modificar el archivo de Flash. Eso es posible ya que también stá disponible el código fuente (FLA) para quien quiera hacerlo pero, no es un tema que conozca.

Marco:
Es engorroso pero realmente es original. No sé si lo usaría pero me gusta :D

Luzdeluna:
Me alegro que resultara :D

Luis:
Ese efecto se controla con a:hover En el blog veo tres:

a:hover {color:#ffffff;text-decoration:underline;}
es el genérico, color blanco y subrayado

#header a:hover {color:#ffffff;}
es para el texto del header

.post h3 strong, .post h3 a:hover {color:#ffffff;}
es para los títulos de los posts

Cambia el color en cada uno de ellos o solo en uno (el genérico). Eventualmente podrían agregarse mas reglas para que en diferentes sectores los enlaces tengan propiedades diferentes.

Responder
Sergio  

Me da problema con los acentos

Tengo Etiquetas como Configuración, Formación y todas ellas al enlazar dan error

Ainss con lo bonito que me habia quedado

Responder
LUIS BORGES  

Eres el maestro man :)

Muchas Gracias :)

Responder
LUIS BORGES  

JMiur esto es extraño pero en la Pc de mi casa veo las letras blancas como siempre, pero en la laptop que uso en el trabajo ¡AZULES! ¿No me crees?, miralo tú mismo...

(Repito el comentario por que me equivoqué con el comentario anterior, sorry)

Acá la imagen: TEXTO AZULADO

Responder
JMiur  

Alex: con los acentos suele ocurrir eso y en la página del autor hablan del tema. Siempre se sugiere que las etiquetas no contengan caracteres acentuados.

Luis: Rarísimo porque el color específico es #CCCCCC que es un tono de gris y uno de los colores llamados "seguros".

Responder
Marvin8  

Esa nube desde que la vi me gusto, la vi hace ya como 1 mes, y me gusto mucho :P, y dije! que impresionante es wordpress :), espero algun dia migrar a wordpress.org :P

Saludos JMiur...

PD: JMiur tu blog lo veo más rápido y más ligero que antes, que paso?, como le hiciste eso?, podrías decirme?, ya que quisiera también agilizar mi blog :(

PD2: Como agrego esos Bookmark, que siempre te los e visto y no e logrado encontrar en tu blog, me refiero a los botones que hay en cada post :(

Responder
JMiur  

Marvin:
No he hecho nada especial más allá de organizar los scripts por razones de fuerza mayor: 1 2. Casi me he deshecho de los archivos externos y he tratado de colocar la mayor parte de las cosas que uso, directamente en la plantilla.

Lo de los marcadores sociales lo puedes ver en este post.

Responder
Sami  

¡Ya no se ve la imagen que pusiste como ejemplo de las etiquetas en movimiento! ¿qué será?

Responder
JMiur  

Debe haber sido un problema temporal, en este momento, las veo.

Responder
Nav!´s  

Jmiur sería posible utilizar este script en el blogrrol o en otro elemento que no sean las etiquetas?.


Saludos :D

Responder
JMiur  

Sí, Navs, como son enlaces escritos manualmente, en realidad puedes hacerlo con cualquier otra cosa.

Responder
Nav!´s  

Probé el script y funciona muy bien, pero el problema es que cuando trato de cambiar los enlaces (tengo el archivo txt que pusiste de ejemplo) el script se deshabilita.

Esta funcionando este blog de pruebas.

Saludos.

Responder
JMiur  

Para que no funcione debe haber un error de sintaxis, una comilla, probablemente. Cambia sólo un enlace y enviame el código que usas o mandame un mail con los enlaces que quieres poner.

Responder
Anónimo  

Hola Jmiur, la verdad esta forma de mostrar los articulos en tu web me gusta mucho, pero no hayo la forma de implementarlo en mi web,
cambie el tagcloud xml y le puse mis links, aloje los 3 archivos, en una misma parte, pero no logro ke se vean, podrias guiarme un poco por favor?? no entendi la parte donde ES EL DIV DONDE SE MOSTRARA EL FLASH,
gracias

Responder
JMiur  

¿Podrías dejarlo puesto en tu sitio y decirme dónde puedo verlo online? El tema del XML y el Flash podría ser un inconveniente si n ose dispone de un servidor que aloje ambos en el mismo directorio, deben estar en el mismo; por eso, predferí no usarlo sino copiar el contenido directamente en el script auqnue sea más engorroso.

Si lo usas para las etiquetas de Blogger, he visto en La Bloguería un método que hace lo mismo directametne como widget lo que evita tener que escribir esos enlaces a mano y usar un XML.

"ES EL DIV DONDE SE MOSTRARA EL FLASH" El script de swobject l oque hace es "escribir" el código HTML en alguna parte de nuestra página. Le indicamos dónde colocando ese DIV "vacio".

Responder
Anónimo  

Hola de nuevo Jmiur, pues lo kite porke no se veia nada, yo uso Paginas Web Gratis, alli no diponemos de poder editar el head de nuestras plantillas, sin embargo, algunos codes o scripts funcionan bien en una seccion que tenemos, los 3 archivos como te dije los aloje en geocities y luego lo que hice, fue con la url del flash, insertarlo en mi web, o sea solo dispongo de html, y no se como hacerlo para que me funcione, me interesaria me dijeras como hago lo del texto y todo lo demas, sorry si no me explico bien

Responder
JMiur  

Allí en el post están unos archivos de texto con un código de ejemplo donde sólo deberías modificar los enlaces.

Responder
Armando  

Oye, Rosa hizo un post ahora sobre "Nube de etiquetas", y lo pone muy facil, sin mucha cosa.

Responder
Armando  

¡Lo copio Rosa de "La bloguería"!, ya vi ;)

Responder
La Blogueria  

¡QUE NO, QUE NO, Y QUE NO! que nadie me copió nada, yo sólo traduje el post de BloggerBuster como bien indico en mi post, y nada más Caifás. YO COPIÉ EL CÓDIGO DE BLOGGERBUSTER ya que ni en mil años discerniría cómo hacer esa cosa para Blogger, cosa de la que creo a Rosa perfectamente capaz.

Armando, estas cosas se extienden así, el mérito lo tiene el creador, lo tiene Amanda por adaptarlo, lo tiene JMiur por explicarlo, lo tengo yo y ella y aquella por distribuirlo, y lo tienes tú por ponerla en tu blog (si fuere el caso) y hacerlo bonito.

Y que nadie me pregunte nada: no tengo ni idea de cómo funciona esto, afortunadamente no lo necesito ya que entre todos nos lo van poniendo cada vez más fácil. ¡Alguien lo hizo, alguien lo adaptó, alguien nos explicó cómo ponerlo, y gracias a todos, ahí está! Reproduciéndose como la misma peste :D

Nav's, tuvimos la misma idea, siempre en la búsqueda del blogroll perfecto, esta opción me gusta :D

Responder
La Blogueria  

¡Y NO, TAMPOCO SÉ DONDE ESTÁ LA MERCERÍA CABRERA!

Responder
JMiur  

¡Maldición! ¿En serio no sabes donde está la Mercería Cabrera? :D

No creo que haya nada que explicar porque ya está más que explicado y es así. La rueda, la inventó alguien y cada uno de nosotros, lo único que hacemos es hacerla rodar.

En realidad, todos estamos hablando de lo mismo desde diferentes ángulos y eso es lo que enriquece las cosas.

Responder
Graciela Ventimiglia  

JMiur: yo puse en blogger el flash directamente con el código de La Bloguería. Te consulto a vos porque ella ya fue sincera y dijo que no sabe cómo funciona.
Las opciones para agrandar la nube no me funcionan, las llevé de 300 a 500 pero los tags siguen ocupando el mismo espacio, o sea todo amontonado. Lo otro que me gustaría hacer pero no sé si pueda es quitar algunas etiquetas, estuve mirando el código pero al parecer funciona directamente con TODAS las etiquetas, no vi cómo quitar algunas.
Saludos y gracias

Responder
Graciela Ventimiglia  

JMiur: olvidate del tamaño je, ya descubrí. Por más que estire el largo si al ancho no lo modifico no pasa nada. Como mi sidebar tiene 220 al flash le cambié de 240 a 220 y al largo lo llevé de 300 a 500. Como es proporcional no me dio pelota. Eso ya está. Será que hay solución para quitar algunas etiquetas?
Saludos

Responder
JMiur  

Graciela:
Por lo que vi, la idea del Flash es interesante pero, sólo tiene un efecto agradable si se colocan pocos enlaces, de ahí que, ex-profeso, me centré en hacerlo manualmente y no en un bucle que leyera las etiquetas. El plugin de WordPress permite excluir algunas de ellas pero en Blogger eso es muy complicado de hacer.

Probablemente, podría lograrse que si una etiqueta tiene menos que un mínimo de entradas no se muestre, habría que pensarlo un poco.

Por ahora, lo único que se me ocurre es escribir los enlaces manualmente.

Responder
admin-atajar  

EN MI BLOG NO LO PUEDO PONER ME HECHAN UNA AYUDITA PLIS

Responder
JMiur  

Deberías eexplicar cuál es el problema.

Responder
La Blogueria  

Pero antes, oremos...

Responder
JMiur  

oremos ...

PD: ¿En serio no sabes donde está la Mercería Cabrera?
Bueno, seguiré buscando ...

Responder
Graciela Ventimiglia  

Ajá. Me interesa escribir a mano los enlaces...pero cómo? je
Con el código que ya puse se puede?
Saludos

Responder
JMiur  

Graciela:

En ese caso, deberías usar el modelo de este post y no el otro. Hacen lo mismo pero en este caso, hay que poner los códigos en un elemento HTML y varian un poco ya que no se leen las etiquetas.

Fíjate si puedes usar el ejemplo y luego modificarlo ... con paciencia. Sino, me mandas un mail y vemos.

Responder
Graciela Ventimiglia  

JMiur: lo que yo quiero es que se lean las etiquetas, no las categorías. Como no sabía cómo hacer categorías, en los tags de los post están ambas, por eso en la nube se ven ambas.
Ahora estoy quitando las categorías de los 160 post trabajosamente(snif snif) y poniéndolas como links con el elemento vínculos. Quizá para reyes termine jaja.
Saludos y gracias por tu ofrecimiento.

Responder
JMiur  

En Blogger, sólo existen etiquetas y no hay categorías, tal vez es un problema de semántica y se las llama de una u otra forma pero, el servicio sólo dispone de tags o sea, etiquetas.

Responder
Graciela Ventimiglia  

Sí, estuve leyendo bastante sobre que Google no implementa las categorías además de las etiquetas. Hay varias soluciones para el problema. Veremos cuál de todas implemento y veo cómo me va.
Muchas gracias por tu ayuda. Saludos!

Responder
La Blogueria  

Graciela, ya entendí: por un lado tienes las etiquetas, y por otro, las categorías de Delicious. Y también has usado las palabras de las categorias en las etiquetas (¿cierto?). En vez de borrarlas para incluir el script que las detecta automáticamente, sigue las instrucciones de este mismo post que te permite poner solo las etiquetas que quieras.

Me repito en lo que dice JMiur y lo que ya te comentaba en mi blog, pero es que me habia hecho la "cosa" un lío, y al fin lo entendí :D

Responder
Eroz  

Hola JMiur 1 pregunta de esta nube de etiquetas mira yo la quiero poner en un post copie exactamente el txt y antes le agregue el .js tal cual lo indicas en mozilla se ve de maravilla peeeero en Explorer se ve de contentillo jajajajajaa sip osea (una vez si las demás no ni aunque refresques la pág.) ¿Ay alguna manera de que no tenga ese problema con Explorer?

(Creo que lo mismo pasaba con el que mencionas de La Blogueria)

Gracias =)

Responder
JMiur  

Eroz: ¿Puede verse online en algún ejemplo? Lo pregunto porque debería funcionar sin inconvenientes; por lo menos en IE7 que es donde puedeo verificarlo.

Responder
Eroz  

Sep claro aquí http://verdetodoonline.blogspot.com/2008/07/nube-de-etiquetas_01.html tiene el del ejemplo haaaaaaaaa ahora que recuerdo pueda que sea la compresión del archivo js mmmmm con banana y las indicaciones charset="ISO-8859-1"

¿Mmmmmmmmmm algo me dice que pueda ser eso no crees?

Muchas gracias por responder JMiur

Responder
Eroz  

de nuevo yo ya cambie el .js por el original deje el swf de imageshack como el original y lo que pasa es que se ve como resultado del buscador al darle click en la entrada ceeeero se ve ni aunque refresque.

Ya note algo igual y sea algo de mi explorer por que aqui tambien lo veo la primera vez y despues le doy refrescar y ya no sale ni aunque le de enter de nuevo a la pag tengo que salirme y volver a entrar para verlo.

¿Acaso tengo que tener algo adicional? ¿o actualizarlo? por que como casi no lo uso pues tengo la descarga al natural.

Jajaajajajaa disculpame JMiur por tanta molestia.

Buen dia =)

Responder
JMiur  

Eroz:
Veo el ejemplo que me dices perfectamente en IE7 así que el problema debe estar en el mismo navegador, en alguna parte de la configuración o en el mismo plugin de Flash. Fijate actualizando el plugin y desahabilitando, aunque sea temporalmente, todos los bloqueos de seguridad y popups de IE.

Responder
Gem@  

No consigo ver tu nube con Explorer J.Miur y el texto de la entrada se ve azul como decían más arriba ¿es por la versión que uso?

Responder
Gem@  

Este es para suscribirme sorry...

Responder
JMiur  

Pués, en IE7 lo veo sin problemas, ¿te ocurre lo mismo cuando lo insertas en un blog? Si es así, me dices donde y me fijo.

El color que coloqué de base es #40C8FF:
so.addVariable("tcolor", "0x40C8FF");

En IE suele haber ciertas restricciones con Flash. Por las dudas, cambién el SWF de lugar, estaba en SkyDrive y ahora está en ImageShack a ver si eso influye.

Responder
Gem@  

Ahora lo veo perfecto y con IE 7 también, los colores de la fuente también cambiaron se ve igual con los dos navegadores ;)

Voy a intentar añadir la nube tal y como explicas aquí, la añadí a mi blog de amigos con la versión de Amanda como en La Bloguería expliican y con Explorer desaparece al clicar en alguna etiqueta.

Tengo una pregunta más pero no tiene que ver con el tema, veré si encuentro la solución en tus archivos ;)

Responder
JMiur  

Entonces, el problema estaba en SkyDrive porque el SWF es el mismo :D

Acabo de ver el ejemplo en el blog y, efectivamente, el enlace funciona pero, al recargarse la página, la nube deja de verse en IE.

Responder
AM  

Hola,

Tengo un pequeño problemilla al implementarlo. Funciona correctamente, sin embargo, mi blog está escrito en otro idioma (polaco) y no solo las vocales tienen (´), sino también las consonantes. ¿Sabes si se puede hacer algo al respecto? Me daría pena quitarlo una vez lo incluí.

Muchas gracias

Responder
JMiur  

Antiendo pero, no sabría decirte si eso tiene álguna solución.

Responder
Ebelio  

Saludos,

Excelente post, alguien sabe como dimensionar una imagen en el tagcloud.swf, pues cuando coloca una imagen esta no se ve.

Muchas gracias a quien me ayude!!

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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