Página 1 de 11
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Tags (etiquetas)
Tags (etiquetas)
foro
Mensajes: 1
Reputación: 0
Mensaje Nº 1 | 4:23 PM
Hay muchos usuarios esperando hacer algo con sus manos, ahora regocíjense todos... después de la última actualización de uCoz les llegó la posibilidad de realizar esta función en sus sitio web sin ningún problema.

Creación de los tags (etiquetas) – es un proceso de crear palabras clave y su vinculación con los datos. La idea principal del nube de etiquetas consiste en exponer los tags conforme a su significado, su peso y frecuencia de aplicación al comparar con otros tags. Para esto se utilizan los siguientes elementos del diseño: tamaño de fuente y color. Con más importancia que la tiene un tag, más grande es el tamaño de fuente y color es más vivo, lo que lo destaca entre otros tags (por lo menos así ha de ser).

Las nubes de etiquetas se consideran como uno de los elementos tradicionales en Web 2.0.

“Nubes de etiquetas” ofrecen un modelo de navegación muy interesante. Aunque esta técnica a veces se considera “alternativa”, no se debe utilizarla en calidad de la sustitución del modelo de navegación tradicional, sino como una posibilidad adicional que ofrece a los usuarios el chance de orientarse más rápido en la estructura y el contenido del sitio. Gracias a su forma que parece a las nubes, el diseño de los tags (etiquetas) las aparta estrictamente de otros elementos del diseño colocados en la página.

Es decir, que podemos considerar la tecnología delos tags (etiquetas) como una catalogación de la información que vincula diferentes tipos y especies de la información, permite mediante los tags encontrar los documentos que son relacionados por su sentido (por los tags). Estoy de acuerdo que la idea es bien perfecta y cómoda, es originada por la tentativa de establecer los vínculos en los sitios web con gran volumen de diferentes documentos.

Incluso se ha creado un término para esto – folcsonomía.

http://es.wikipedia.org/wiki/Folcsonom%C3%ADa

Folcsonomía (folksonomy en Inglés, de “folk” — popular + taxonomy — taxonomía) — quiere decir la práctica de una categorización de la información común (enlaces, fotos, videos) por medio de los tags elegidos libremente.


Así que empezamos a crear una nube o lista de etiquetas. Hay que mencionar que no vale la pena de ir creando la nube de etiquetas si el sitio carece de materiales con señales (marcas), pues esto será irracional.

1. Antes de empezar hay que activar el módulo “Búsqueda por el sitio”, pues tus tags estarán relacionados directamente con este módulo.

2. Trata de dar señales a cuanto más número de materiales. Para esto en el Panel de Control del material haz clic en el signo ”Tags del material”, en la Ajax-ventana abierta después de la coma escribe las palabras clave que pertenecen a este material.

Recuerda: ¡cuanto más señales habrá, más eficaz será la nube!

3. Después creamos un informador (Panel de Control ==> Herramientas ==> Informadores).


Elegimos la sección de los informadores ”Tags”,

luego indicamos las configuraciones: método de exposición – “Nube de etiquetas” o “Lista de tags”, módulos para los cuales se irá creando la nube de etiquetas, y número máximo de los tags.

4. Hacemos clic en ”Crear” e introducimos el código recibido (por ejemplo, $MYINF_2$) en el lugar necesario de la plantilla requerida.

5. ¡Ya! La lista de tags está creada. Con el incremento del número de los signos (marcas) se modificará el panorama de esta lista.

P.S. Para más información sobre los tags y tagging (o etiquetado social) pasar a http://www.nosolousabilidad.com/articulos/indizacion_social.htm

GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 1:41 PM
Nube de Tags: tips de diseño y optimización

Mientras continúa la dicotomía pro-nube de tags y anti-nube de tags, la realidad es que más allá de gustos o preferencias, categorizar ítems utilizando etiquetas se ha vuelto una tendencia muy popular que hoy en día ya no se puede evitar en el mundo de Internet.

Las nubes de tags se han ganado un espacio en muchas webs, sin embargo para muchos siguen siendo sólo un objeto bonito, aunque haya sido la practicidad lo que masificó este widget. Aquí les dejamos algunos tips para optimizar la nube y mejorarla.

HTML & CSS
La nube de etiquetas no es más que un listado de enlaces. Los únicos elementos aceptables para organizar etiquetas en una nube de etiquetas son listas ordenadas o desordenadas.

Es aconsejable utilizar listas desordenadas debido a la naturaleza “desprolija” de la nube. Si posees necesidades específicas de estilo puedes envolver la lista dentro de un div. Obteniendo algo así:

Quote
<div class="tags">
<ul>
<li class="tag1"><a href="#">Lorem ipsum</a></li>
</ul>
</div>

La idea es basarnos en ciertos parámetros (más populares, más vistos, etc.), para darles a los ítems de la nube un tratamiento visual diferente. La idea es enfatizar aquellos ítems con más “valor” (de acuerdo a cierto parámetro) y eso se logra mayormente cambiando el tamaño y peso de la imagen, como en la nube de tags de Flickr:

Pero también existe otra opción que incluso se puede combinar con el cambio de tamaño: usar color y contraste. En estos ejemplo, aquellos ítems con menos valor tendrán menos contraste y viceversa:

Aunque la mayor parte de las nubes de etiquetas son generadas con código back-end y desde esa perspectiva no importa si añades nombre de clase o estilo interior de línea; es recomendable usar nombres de clase. Al final, es mucho más fácil cambiar una línea del CSS para modificar la apariencia que escarbar en el código back-end.

Y…¡Acción!
Muchos visitantes identifican a las nubes de etiquetas como algo muy confuso de utilizar. Justamente por cuestiones de usabilidad es que sería bueno contar con una alternativa. Con simples líneas de JavaScript puedes añadir ciertas opciones que harán que tu nube de etiquetas sea más utilizable, como por ejemplo la opción de poder ordenar los tags alfabéticamente, ya sea visualmente como una nube de tags o convirtiendo la nube en un listado. En el siguiente ejemplo, la nube de tags de delicious.com se puede ordenar alfabéticamente:

Nosotros te mostraremos cómo generar una nube que pueda ser ordenada alfabéticamente en un listado. Lo que hacemos aquí es básicamente añadir un nombre de clase al UL que hará que cambie la apariencia de la nube.

Agregando un botón de cambio utilizando simples líneas de jQuery podemos cambiar fácilmente estos estilos.

Quote
$(document).ready(function(){

// create a style switch button
var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
function(){
$("#tags ul").hide().addClass("alt").fadeIn("fast");
},
function(){
$("#tags ul").hide().removeClass("alt").fadeIn("fast");
}
);
$('#tags').append(switcher);

});

Nota: En este ejemplo se está utilizando id como container de la nube de etiquetas en lugar de nombre de clase como en el primero.
Luego, permitiremos la clasificación por orden alfabético o por valor de etiqueta. Para esto se puede usar un plugin de Sjeiti llamado TinySort que se puede encontrar aquí.

Quote
$(document).ready(function(){

// create a style switch button
var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
function(){
$("#tags ul").hide().addClass("alt").fadeIn("fast");
},
function(){
$("#tags ul").hide().removeClass("alt").fadeIn("fast");
}
);
$('#tags').append(switcher);

// create a sort by alphabet button
var sortabc = $('<a href="javascript:void(0)" class="btn">Sort alphabetically</a>').toggle(
function(){
$("#tags ul li").tsort({order:"asc"});
},
function(){
$("#tags ul li").tsort({order:"desc"});
}
);
$('#tags').append(sortabc);

// create a sort by alphabet button
var sortstrength = $('<a href="javascript:void(0)" class="btn">Sort by strength</a>').toggle(
function(){
$("#tags ul li").tsort({order:"desc",attr:"class"});
},
function(){
$("#tags ul li").tsort({order:"asc",attr:"class"});
}
);
$('#tags').append(sortstrength);

});



Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 12:43 PM
Flash Tag Cloud (Flash-nube de etiquetas).

INSTALACIÓN

1. Primero hay que crear un informador según la instrucción descrita arriba, el método de exponer ha de estar elegido como “Nube de etiquetas” (Tag cloud).
2. Se descargan los archivos:


3. Los archivos zip se descomprimen y su contenido se pone (swfobject.js y tagcloud.swf) en el sitio web (se puede en cualquier carpeta).
4. Después en el lugar donde ha de estar Tag Cloud, se pone el código:

Quote
<?if($USER_AGENT$='ie' && $USER_AGENT_VER$<7)?>
$MYINF_4$
<?else?>
<div id="nnube" align="center">$MYINF_4$</div>
<script type="text/javascript" src="enlace_al_archivo_swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.mode = 'tags';
flashvars.minFontSize = '8';
flashvars.maxFontSize = '14';
flashvars.tcolor = '0x1D3D61';
flashvars.tcolor2 = '0x4D6D91';
flashvars.hicolor = '0xd193978';
flashvars.distr = 'true';
flashvars.tspeed = '100';
eTagz = document.getElementById('yoblako').getElementsByTagName('A');
flashvars.tagcloud = '<tags>';
for (var i=0; eTagz[i]; ++i) flashvars.tagcloud += '<a href=\'' + eTagz[i].getAttribute('href')
+ '\' style=\'' + parseInt(eTagz[i].style.fontSize)
+ '\'>' + eTagz[i].innerHTML.replace(/&/i, '%26') + '</a>';
delete eTagz;
flashvars.tagcloud += '</tags>';
var params = {};
params.wmode = 'transparent';
params.bgcolor = '#FFFFFF';
params.allowscriptaccess = 'always';
var attributes = {};
attributes.id = nnube;
attributes.name = 'tagcloud';
swfobject.embedSWF('enlace_аl_archivo_tagcloud.swf', 'nnube', '250', '200', '9.0.0', false, flashvars, params, attributes);
</script>
<?endif?>

Este código no puedes estar puesto en otros informadores (es imposible insertar un informador en otro, o sea, no se pone el contenido del informador $MYINF_4$ en el contenido de $MYINF_5$ etc.)

EXPLICACIÓN

Nosotros utilizamos el operador condicional para $USER_AGENT$='ie' && $USER_AGENT_VER$<7 – prohibimos la exposición de Flash Cloud para las versiones de IE inferiores de 7 (para estos usuarios se expondrá una nube de etiquetas común).

id="nnube" – es un identificador del contenedor con la nube a donde se pondrá el objeto Flash. Para el identificador se puede configurar los estilos en CSS. A la tabla de estilos (CSS) se añade el parámetro: #nnube{outline:0;}. El parámetro prohíbe la exposición del marco punteado alrededor de todo el objeto Flash al hacer clic sobre éste. Se puede centrar el contenedor al agregar align=”center” dentro del tag div.

$MYINF_4$ –es el código de tu informador que corresponde a la nube de etiquetas de uCoz, sustituye la cifra si es necesario. (En las configuraciones del informador “Tags” indica el número de los tags a exponer: 50. Asegúrate que el método de exponer está puesto a “Tag cloud”).

En las líneas

Quote
<script type="text/javascript" src="enlace_аl_archivo_swfobject.js"></script> ... swfobject.embedSWF('enlace_аl_archivo_tagcloud.swf', 'nnube', '250', '200', '9.0.0', false, flashvars, params, attributes);

en vez de “ enlace_аl_archivo_swfobject.js” y “ enlace_аl_archivo _tagcloud.swf” pon los enlaces correspondientes.

CONFIGURACIÓN

En la línea:

Quote
swfobject.embedSWF(' enlace_аl_archivo_tagcloud.swf', 'nnube', '250', '200', '9.0.0', false, flashvars, params, attributes);

250 – ancho de la nube en Px;
200 – alto de la nube en Px.

flashvars.minFontSize = "8"; – tamaño mínimo de la fuente;
flashvars.maxFontSize = "14"; – tamaño máximo de la fuente;
flashvars.tcolor = "0xffffff"; – color del enlace más raro;
flashvars.tcolor2 = "0x0be4f8"; – color del enlace más popular. Para los demás enlaces el color será elegido entre estos dos;
flashvars.hicolor = "0xd95800"; – color del texto al situar el cursor sobre el enlace;
flashvars.tspeed = "100"; – velocidad de la giración de Flash tag Cloud;
params.wmode = "transparent"; – este parámetro significa el fondo transparente;
params.bgcolor = "#333333"; – color del fondo de Flash Tag cloud.

ADICIÓN

En caso de que sea necesario el soporte de los caracteres latinos extendidos (p.e., caracteres ĀāČčĒēĢģĪīĶķĻļŅņŠšŪūŽž), se los puede bajar e instalar este аrchivo ZIP.

Así mismo está resuelto el problema del carácter & mediante su sustitución por el análogo de éste en el sistema hexadecimal: %26.
eTagz[i].innerHTML.replace(/&/i, '%26')

Eliminar los tags “rotos” (los que hay en la nube pero los materiales a éstos ya están eliminados):

1. Entra en la página de cualquier usuario excepto los que tienen los materiales (para esa operación puedes “organizar” a un usuario local, p.e.: Don Paquito); wink
2. Encuentra el panel de moderador y “Eliminación de los materiales del usuario” (he aquí esta imagen – );
3. Elige cualquier módulo que pueda contener los tags (ejemplo: módulo “Noticias del sitio”). Pon una marca;
4. Ahora piensa bien duro: ¿tiene este usuario los materiales en este módulo? Si el usuario está creado por ti como “Don Paquito”, no ha añadido los materiales, o sea, no se eliminará nada. puedes eliminar los materiales inexistentes a pie juntillas;
5. Introduce el código de comprobación y haz clic sobre “Eliminar”.

- Hay un método más para eliminar los tags “rotos”;
- Ten cuidado con este método: no elimines por casualidad los materiales de los usuarios;
- Antes de eliminar asegúrate de que el usuario no tiene los materiales;
- Período de la actualización independiente de los informadores es 15 minutos.

Para no esperar 15 minutos, sino actualizar en seguida el informador con los tags, haz lo siguiente:

1. Pasa al Panel de Control: Inicio » Informadores y encuentra tu informador con los tags, luego haz clic sobre la imagen “llave” () y se expondrá la ventana de edición.
2. Tú no cambias nada, sino cliqueas sobre “Guardar”.
3. Después pasa a la página con los tags, la actualizas y no encuentras los tags “rotos”.

AÑADIR LOGO ADENTRO DE LA NUBE
(será una ilusión óptica: de verdad el logo está por detrás)

Es muy simple: basta con dar al contenedor el estilo con la imagen de fondo. Por ejemplo, para una celda de la tabla:

Quote
<td style="background: url('images/logobnube.png') center center no-repeat;padding:0px 0px 0px 0px;"> Código para poner la nube </td>

o contenedor

Quote
<div style="background: url('images/logobnube.png') center center no-repeat;padding:0px 0px 0px 0px;"> Código para poner la nube </div>

Hay un método más complicado: en la tabla de estilos (CSS) crear una clase especial para un contenedor de la nube. En el caso de la celda de la tabla:

Quote
td.backoblako { background-image: url('images/logobgnube.png'); /* Ruta a la imagen de fondo */
background-position: center center; /* Situación del fondo Sintaxis
background-position: [por ciento | valor] | [left | center | right] || [top | center | bottom] */
background-repeat: no-repeat; /* Revocamos la repetición delfondo */ }

images/logobgnube.png – es un enlace al logo. En las páginas del sitio, donde se pone el código de la nube, para la celda se adjudica el clase backnube:

Quote
<td class="backnube"> Código para poner la nube </td>

Se requiere aumentar el objeto por todo el ancho (o alto) de la celda de tabla.
Hacemos lo siguiente:

Quote
<table border="0" width="100%" cellpadding="0" cellspacing="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">

En el cuerpo de la celda (td) hay que eliminar todos style=”padding-left:15px;” etc., entonces no habrá sangrías de los límites de la tabla.

PREGUNTA – RESPUESTA:

PREGUNTA: Cuando estoy mirando el sitio en Internet Explorer 6, en vez de los Flash Tag Clouds se me exponen las nubes ordinarias. ¿Porqué sucede esto?
RESPUESTA: Así ha de ser. Con ayuda de la línea

Quote
<?if($USER_AGENT$='ie' && $USER_AGENT_VER$<7)?>
$MYINF_4$
<?else?>

para los usuarios de IE menos de 7 se expone la nube ordinaria, de lo contrario al hacer clic sobre un tag en la nube se expone una página con los símbolos como estos: едактор.


PREGUNTA: Hago clic sobre uno de los tags, pero en mayoría de los casos la página se expone feo: el segundo contenedor desplaza generalmente abajo, el sitio donde estaba el contenedor, está ocupado por las descripciones breves etc.
RESPUESTA: Eso está relacionado con la limitación del número de los caracteres expuestos como resultado de la búsqueda. Por ejemplo: un material se ataja en la mitad de la palabra o sucede la interrupción de una tabla (si material se añade en forma de la tabla). Como resultado la tabla se cierra anticipadamente. Trata de poner los materiales utilizando los contenedores <div>. Esto suele pasar a todos y es imposible corregir.


PREGUNTA: Hice todo pero Flash Cloud no se abre.
RESPUESTA: Mira si están añadidos los tags al material, también asegúrate de que los tags de los materiales carecen de los caracteres especiales ', &, “. Así mismo hay que chequear: tal vez firewall haya bloqueado todos los objetos flash del sitio.
RESPUESTA: Si la nube está hecha mediante un widget, entonces desde el momento de poner la nube y y el de su exposición en la página puede pasar un rato. Mientras que la nube está ausente, se va exponiendo un bloque vacío.
RESPUESTA: En caso de que una nube hecha con scripts se expone en un sitio donde se utiliza el constructor, o sea, no a través del diseño, entonces esta nube puede no exponerse debido a que pudo haber una inserción de los bloques uno en otro.
RESPUESTA: Es posible que las nubes no se expongan en los sitios por no haber sido puestos de manera correcta: ten en cuenta que JavaScript ha de estar puesto exclusivamente con el editor HTML, y no mediante los BB-códigos.


PREGUNTA: He creado un Flash Tag Cloud, pero, ¡ño! Se esponen sólo 10 tags aunque se han creado más.
RESPUESTA: Es posible que hayas creado utilizado el widget “Nube de etiquetas”, el máximo número de tags allá es 10. Para hacer más, hace falta poner Flash Tag Cloud según la instrucción.


PREGUNTA: ¿Cómo se configuran los colores y donde se puede mirar el sistema hexadecimal de los colores?
RESPUESTA: Es una cosa bastante interesante. Te invito a que leas mi post acerca de los colores.


PREGUNTA: He creado una nube de etiquetas (tag cloud). Al añadir los nuevos tags, éstos no se exponen en la nube. ¿Porqué?
RESPUESTA: Espera un poquitín: el plazo de la actualización de los informadores es 15 minutos


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 12:48 PM
Flash-nube de enlaces

Además de Flash-nube de etiquetas podemos crear Flash-nube de enlaces (para los que quieren añadir “como si fueran tags” para las páginas). La información se toma del archivo xml donde estarán todos los enlaces con los adjudicados estilos, tamaños, colores etc. Supongamos que hay un archivo sitio.com/carpeta/tagcloud.swf. Él recoge la información acerca de los enlaces y tags del archivo sitio.com/carpeta/tagcloud.xml. En este archivo se indican los enlaces y sus parámetros en el formato:

Quote
<a href=“Dirección de la página" class="tag-link-12" rel="tag" style="font-size: 18pt;"
color="0xff0099" hicolor="0x000099">Soy enlace </a>

• href="Dirección de la página" – página a que entras al hacer clic sobre el enlace “Soy enlace
• class="tag-link-12" – clase para el enlace “Soy enlace
• style="font-size: 18pt;" – tamaño del enlace “Soy enlace”
• color="0xff0099" – color del enlace “Soy enlace” donde ff0099 es el valor del color en el sistema hexadecimal
• hicolor="0x000099" – color del enlace “Soy enlace” al situar el cursor sobre éste, donde 000099 es el valor del color en el sistema hexadecimal
Soy enlace – nombre del enlace que estará en la Flash-nube.

Respectivamente, se puede configurar cada enlace a mano. Ningún parámetro es obligatorio, se puede sólo exponer el enlace.

Presta atención: con cada actualización de la Flash-nube los enlaces se sitúan al azar. El archivo tagcloud.swf en este caso influye poco sobre la información expuesta.

Para aplicar esto en tu web has de crear un archivo tagcloud.xml en el bloc de notas según el modelo:

Quote
<tags>
<a href="enlace a cualquier objeto" class="tag-link-31" rel="tag" style="font-size: 18pt;" color="0x0000AA" hicolor="0x0000FF">Soy enlace</a>
</tags>

Lo subes a cualquier carpeta, guardas el nombre del archivo. Es importante que el el archivo “tagcloud.xml” esté en la misma carpeta que tagcloud.swf. A la página se añade así llamada Flash-nube de enlaces que se exponen a mano mediante el código:

Quote
<embed src="enlace_аl_archivo_tagcloud.swf" play="true" loop="true" wmode="Opaque" quality="high" bgcolor="" align="" width="200" height="200">

width="200" – ancho en Px
height="200" – alto en Px

No olvides sustituir enlace_аl_archivo_tagcloud.swf por tu enlace.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Aldoux
Mensajes: 8
Reputación: 0
Mensaje Nº 5 | 9:04 PM
Buenas tardes,

me gustaría implementar la opción para ordenar alfabéticamente mi lista de etiquetas pero no sé dónde insertar el código suministrado (mensaje #2). ¿Podrían orientarme por favor?. De antemano gracias cool

Post editado por Aldoux - Viernes, 2011-05-06, 9:05 PM
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 6 | 4:58 PM
Нerramientas online para generar nubes de etiquetas de tu sitio web




Una nube de etiquetas es una interesante manera de ilustrar el contenido de tu sitio web. Lo usual es que las palabras más populares o usadas en tu sitio sean las que aparezcan en mayor tamaño para diferenciarse del resto en la nube de etiquetas.

En la Internet podemos encontrar varias herramientas online que nos facilitan a hacer éste trabajo, a continuación presentaremos 5:

Tagxedo: Genera nubes de etiquetas con formas singulares
El uso de tagxedo es sumamente sencillo. Tienes que cargar un texto subiendo un archivo, ingresando la URL de tu sitio web, o pegando directamente el texto.
Luego de eso, diseñas la etiqueta, seleccionando la forma, tipo de letra, dirección del texto, tamaño, entre otras opciones.

Una vez terminado, puedes guardar la nube como jpg, png, ó embeberlo en tu sitio.



Enlace | Tagxedo

Wordle: Crea nubes de etiquetas con un estilo artístico
Wordle es una herramienta muy fácil de usar para generar nubes de palabras, a partir de un texto. Para crear una, solo ingresa la fuente del texto, la URL de tu sitio web, ó tu cuenta en delicious.com de donde se generarán las nubes a partir de etiquetas.

También puedes personalizar el tema, tipo y color de letra:



Enlace | Wordle

TagCrowd: Genera nubes de etiquetas ignorando las palabras comunes
Otra alternativa para éste tipo de herramientas es TagCrowd, que a diferencia del resto permite crear una lista de palabras que no quieres que vayan en tu nube.

El texto que necesario para generar la nube lo puedes insertar dándole la dirección URL de tu sitio web, subiendo un archivo de texto, ó pegando un texto al sitio de TagCrowd. El resultado puedes emberlo en tu sitio web.



Enlace | TagCrowd

Tagul: Crea nubes de etiquetas e incrustálas en tu sitio web

Para usar Tagul tendrás primero que registarte, seguido de eso, similar a los servicios similares puedes ingresar el contenido de la nube vía URL, ó texto.

Una vez guardado tu diseño de la nube, lo puedes embeber en tu sitio de ésta manera:



Enlace | Tagul


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Tags (etiquetas)
Página 1 de 11
Búscar: