domingo, 15 de septiembre de 2024

Nube de palabras en HTML / CSS / PHP

Si son asiduos usuario del Mentimeter, que entre sus varias funciones tiene la posibilidad de hacer nubes de palabras en vivo, habrán notado que ahora la versión gratuita tiene un límite de 50 usuarios para una votación. Suelo dar talleres con más de 100 personas, y utilizo mucho las nubes de palabras para conocer que traen los cursantes a una reunión y tambien para saber que se llevan. Preguntas como... "¿Qué aprendimos hoy?" o "¿Qué me llevo?" sirven tanto para evaluar la efectividad del encuentro como para la metacognición, el parar y reflexionar sobre qué sucedió en esa hora, hora y media.

Comencé a buscar alternativas en la web, aplicaciones gratuitas que me dieran lo que me daba Mentimeter. No encontré nada que me sirviese. O el límite de participantes era insuficiente, o tenían otras funcionalidades pero no nubes de palabras.

Así que puse manos a la obra y decidí hacer mi propia aplicación.

Utilicé HTML, CSS, Javascript y la librería WordCloud2.js, la que permite generar nubes de palabras visualmente atractivas. 

Como base de datos: Mysql.

Generé 3 programas: 

CONFIGURAR.PHP - Utiliza la tabla CONSIGNA, donde guardo la pregunta (de esa manera puedo preguntar lo que quiera) y blanquea la votación anterior.

VOTAR.PHP - Allí el usuario coloca la respuesta a la pregunta, y una vez que vota ve la nube de palabras que se está generando con las votaciones de todos,en tiempo real.


En la tabla votaciones coloco cada votación y sumo un contador si es una respuesta que se repite. También guardo la cantidad de personas que participaron en la encuesta.

La librería WordCloud.js no la habia utilizado nunca, así que utilice inteligencia artificial para que me ayude a comprender como insertarla en mi código. Utilicé Poe.com y ChatGPT . No fue fácil y las respuestas muchas veces no respondían mis preguntas o, si las respondían, luego no funcionaban al bajarlas a código. También Googleé, por supuesto, y una gran ayuda fue Codepen.io , en el que encontré el siguiente código: https://codepen.io/randyburden/pen/oNqKPPR con el que terminé de cerrar la idea.
MOSTRAR.PHP - El último programa es de visualización en tiempo real, para poder proyectar las respuestas a medida que la gente vota.

De vez en cuando me gusta volver a mi primer pasión, la programación. Resolver problemas utilizando sólo código es apasionante. A veces me siento un poco "oxidada", pero con la cantidad de material que hay en la red siento que no estoy sola.

#NubesDePalabras  #Programación  #WordCloud  #DesarrolloWeb  #HTML  #CSS  #JavaScript  #HerramientasInteractivas  #EducaciónInteractiva  #Talleres










4 comentarios:

Los comentarios serán moderados antes de mostrarse. De ser posible, omitir mensajes anónimos.