¿Qué es?
Una nube de palabras o nube de etiquetas es una representación visual de las palabras que conforman un texto, en donde el tamaño es mayor para las palabras que aparecen con más frecuencia (wikipedia).
Fig. 1. Nube de palabras
¿Para qué sirve?
Uno de sus usos principales es la virualización de las etiquetas de un sitio web, de modo que los temas más frecuentes en el sitio se muestren con mayor prominencia. Las etiquetas son palabras clave que suelen estar oredenadas alfabéticamente o, en ocasiones, agrupadas semánticamente. La importancia de una etiqueta se muestra con el tamaño de la fuente y/o color.
¿Qué se necesita para hacer una nube de palabras?
En Internet existen librerías diversas para la creación de una nube de palabras. Es algo bastante sencillo; para este caso voy a usar la librería jQCloud, la cuál podrán descargar desde este link.
Primeramente, debemos agregar la librería JQuery entre las etiquetas <head></head> de nuestra (s) página (s) web. Para esto utilizamos la siguiente línea de código:
<script src="js/jquery.min.js"></script>
Si no contaran con la librería JQuery en su proyecto, pueden agregar la ruta web para descargarla cada vez que entren a la página web:
A continuación, debemos agregar las librerías de jQCloud; para esto copiamos las siguientes líneas de código dentro de la etiquetas <head></head>:
<script src="jqcloud2/dist/jqcloud.min.js"></script> <link rel="stylesheet" href="jqcloud2/dist/jqcloud.min.css">
Una vez hecho lo anterior, es el momento de insertar las palabras y el div donde se va a visualizar nuestra nube de palabras. Para hacer esto, agregamos el código siguiente entre las etiquetas <body> y </body>:
<div style="width:90%; height: 70%;" id="demo"></div>
<script>
var words = [
{text: ".NET", weight: 13},
{text: "C++", weight: 16.5},
{text: "Java", weight: 9.4},
{text: "Ruby", weight: 8},
{text: "Python", weight: 6.2},
{text: "PHP", weight: 5},
{text: "Pascal", weight: 5},
{text: "Javascript", weight: 5},
{text: "HTML5", weight: 5},
{text: "Ensamblador", weight: 5},
{text: "Lorem", weight: 13},
{text: "Ipsum", weight: 10.5},
{text: "Dolor", weight: 9.4},
{text: "Sit", weight: 8},
{text: "Amet", weight: 6.2},
{text: "Consectetur", weight: 5},
{text: "Adipiscing", weight: 5},
{text: "Java", weight: 9.4},
{text: "Ruby", weight: 8},
{text: "Python", weight: 6.2},
{text: "PHP", weight: 5},
{text: "Pascal", weight: 5},
{text: "Javascript", weight: 5},
{text: "HTML5", weight: 5},
{text: "Ensamblador", weight: 5}
/* ... */
];
$('#demo').jQCloud(words);
</script>
El resultado es el siguiente:
Fig. 2. Nube de palabras con jQCloud
El código completo de la página web es el siguiente:
<html>
<head>
<title>
</title>
<script src="js/jquery.min.js"></script>
<script src="jqcloud2/dist/jqcloud.min.js"></script>
<link rel="stylesheet" href="jqcloud2/dist/jqcloud.min.css">
</head>
<body>
<div style="width:90%; height: 70%;" id="demo"></div>
<script>
var words = [
{text: ".NET", weight: 13},
{text: "C++", weight: 16.5},
{text: "Java", weight: 9.4},
{text: "Ruby", weight: 8},
{text: "Python", weight: 6.2},
{text: "PHP", weight: 5},
{text: "Pascal", weight: 5},
{text: "Javascript", weight: 5},
{text: "HTML5", weight: 5},
{text: "Ensamblador", weight: 5},
{text: "Lorem", weight: 13},
{text: "Ipsum", weight: 10.5},
{text: "Dolor", weight: 9.4},
{text: "Sit", weight: 8},
{text: "Amet", weight: 6.2},
{text: "Consectetur", weight: 5},
{text: "Adipiscing", weight: 5},
{text: "Java", weight: 9.4},
{text: "Ruby", weight: 8},
{text: "Python", weight: 6.2},
{text: "PHP", weight: 5},
{text: "Pascal", weight: 5},
{text: "Javascript", weight: 5},
{text: "HTML5", weight: 5},
{text: "Ensamblador", weight: 5}
/* ... */
];
$('#demo').jQCloud(words);
</script>
</body>
</html>
Los archivos de este ejemplo pueden descargarlos desde los siguientes links:
No hay comentarios.:
Publicar un comentario