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

Inteligencia artificial y Scratch

 Preparando una actividad sobre Machine Learning en el aula, sobre cómo se puede trabajar con los estudiantes qué es el aprendizaje automático y como se realiza (y de paso trabajar sesgos) me encontré con un proyecto que me pareció interesante para trabajar contenidos curriculares que tengan que ver con identificar ciertos espacios culturales, turísticos, históricos.

Es algo muy simple que puede llegar a escalar, pero para comprender que es el aprendizaje automático y como se puede relacionar con el lenguaje Scratch (que se usa en la escuela desde 4to grado aproximadamente).

Manos a la obra, vamos a entrenar a una inteligencia artificial. para ello podemos utilizar Machine Learning for kids (a partir de ahora lo llamaré ML4K) o LearningML (LML) ambos sitios tienen un funcionamiento similar, aunque ML4K posee interfases con otros lenguajes (Python, Appinventor) además de Scratch. 

Debo confesar que tengo mi corazoncito en LML, pero en este caso utilicé ambos sitios. 

Primero recorrí los proyectos de ML4K para encontrar alguno que pudiese transversalizar con el diseño curricular, después de pasar por varios me decidí por INFORMACIÓN TURISTICA una app de recomendaciones para turistas.

El sitio nos permite descargar el material para el docente y para los estudiantes. Allí me encontré con algunos problemas, ya que propone crear una cuenta docente y conectar y crear una cuenta de IBM Watson... cosa que no pude hacer ya que parecería que ahora se llama Watsonx y a pesar de tener free  trial pide datos de la tarjeta de crédito, algo que no estoy dispuesta a dejar.

 Por suerte el proyecto puede funcionar sin problemas sin cuenta de profesor y sin Watson, así que.... sigamos adelante!

Primer punto que propone es mostrar en Scratch como trabajaría una app sin inteligencia artificial. Uno le dice lo que quiere hacer y "al azar" le recomienda un shopping, un museo, un lugar de pesca o un parque de diversiones.

Lo utilicé en LML, y adapté un poco lo que propone ML4K. Los bloques en ambos son similares (no iguales). Así, en este código, uno dice "me gusta pescar" y al azar hace la recomendación (por ejemplo, ir a un museo).

Ahora, es momento de entrenar nuestro modelo para utilizar IA en nuestro proyecto. Mínimo habría que encontrar 5 frases que podría preguntar un turista para que le recomendemos uno u otro lugar (hay que pensar 20 frases... son muchas... ¿Qué puedo hacer? 💡💡💡

Por suerte, tengo a mi asistente ChatGPT, al que le puedo pedir algo así como "Necesitaria 20 frases  que un turista podria decir a un guía local para expresar que quiere ir a un museo, otras 20 para ir a un parque de diversiones, otras 20 para ir de pesca, otras 20 para una galeria de arte. las frases serán utilizadas para entrenar a una IA, por lo que deben ser variadas." La verdad es que afiné varias veces el prompt, el resultado puede ser utilizado aunque no es excelente.

Ya tengo las frases, y acá es cuando decido utilizar LML ya que me permite incorporar el set de datos de forma automática importando un archivo .JSON - Este archivo tiene un formato especial, así que se lo muestro a ChatGPT y le pido que sus recomendaciones las arme en ese formato.

Como ven, está la opción de copiar código, así que copié, pegué en un archivo de texto (bloc de notas) y lo nombre con la extensión .JSON.

Luego en LML dije que quería entrenar con textos, y desde la opción Archivo / Subir desde el  ordenador ingresé las frases que había preparado chatGPT.

Próximo paso: decirle que aprenda (entrenar el modelo) y probar con algunas frases. En ese momento, si las respuestas son erróneas, se pueden agregar más frases y volver a entrenar. Si estamos en clase, podemos trabajar el tema de los sesgos y brindarles a los estudiantes la posibilidad de que entrenen para que, por ejemplo, la posibilidad de que los envíe a un shopping sea mayor que a un museo... ¿Esto sucederá en la vida real? 🤔🤔

Y ahora.... ¡Vamos a Scratch! ¿Recuerdan el código anterior? Vamos a modificarlo utilizando bloques de IA.

Podemos seguir probando agregando datos de entrenamiento, podemos colocar como fondo algún lugar turístico, podemos generar más etiquetas... ahora sólo es dar rienda a la imaginación y tener en claro cuales son los objetivos de aprendizaje que queremos que se logren.

Les dejo los archivos de entrenamiento, el proyecto Scratch sin entrenamiento y el entrenado. Recuerden que deben abrirlo dentro del entorno de LML, si lo querés hacer desde ML4K el lote de entrenamiento no se puede importar (o no encontré como hacerlo) así que hay que copiar y pegar cada frase. La lógica del programa es similar.

¿Qué les pareció este ejemplo? ¿Es factible de llevar al aula?

¡Gracias a Aldo Ferrari que se tomó su tiempo para hacer pruebas conmigo!

CHAT GPT como copiloto para programar

 Desde hace rato utilizo Chat GPT para optimizar mis tiempos de programación. ¿Quiere decir que ya no necesito saber programar para realizar sistemas? Personalmente creo que no es así, ya que más allá de que la IA me devuelve un código bastante exacto para lo que necesito, generar el prompt para que esto suceda requiere de conocimientos previos de programación, pensamiento computacional y lógica.

En este caso, quería un listado que involucra dos tablas con un campo en común, en SQL, un JOIN. El lenguaje es PHP para un sitio web que utiliza Bootstrap como framework.

Con este prompt:

Preciso generar el código php de un listado en tiempo real en la web que posea como columnas datos.RUEE, datos_escuelas.Departamento, datos_escuelas.Escuela, datos_escuelas.Grado, datos_escuelas.Grupo, login.DR, datos_escuelas.Fecha_inicio y que puedan ordenarse con un click en el nombre de la columna. Los datos que poseo son: Base de datos "Nombre_Base_de_Datos"   El JOIN de las tablas datos_escuelas y login, relaciona datos_escuelas.ID_DR con login.IDCrea. Las columnas deben llamarse como los campos, sin referir a las tablas, por ejemplo datos_escuelas.RUEE la cabecera de la columna será RUEE. El sitio web utiliza Bootstrap, por lo que este listado deberá incluir este diseño

En unos segundos tuve el código:

con las siguientes recomendaciones: "Lo importante aquí es que debes llenar la sección PHP con tu lógica para conectarte a la base de datos, ejecutar la consulta SQL y mostrar los resultados de la tabla. Asegúrate de manejar correctamente los parámetros GET para la ordenación de las columnas ($_GET['sort']) y de implementar las medidas de seguridad necesarias para prevenir inyecciones SQL.

Si tienes dudas específicas sobre cómo realizar alguna parte de la implementación, ¡no dudes en preguntar!"

Ya que me lo ofrecía, me animé a pedir el query:

"Este query te devolverá los datos de las escuelas junto con la información de los usuarios que las crearon, relacionando las dos tablas a través de los campos especificados. Asegúrate de ejecutar este query en tu base de datos y adaptar la lógica de conexión y ejecución de consultas en PHP según tu entorno específico."

¿Copié y pegué el código y salió andando? No, tuve que armar las conexiones y tocar algunas líneas de código que no me conformaban del todo.

Ahorré algunas horas de trabajo, en un código bastante simple, habrá que hacer pruebas con requerimientos más complejos y otros lenguajes. 

Les acerco un artículo de hace dos años llamado "No-code is code" donde se reflexiona sobre el avance de los discursos de "No-code" en los que se malinforma sobre el futuro de la programación.

Para generar un prompt que permita que una IA nos entregue un código funcional, no hay duda de que debemos tener una base que nos permita identificar qué y cómo debemos comunicar a la IA lo que necesitamos.

Inteligencia Artificial, un tema obligado

Hace mucho que no escribo. 

No porque no tenga nada que contar, sino porque el tiempo es escaso y siempre siento que debo preparar con tiempo el contenido, pulirlo, buscar fuentes... siempre hay emergentes que hacen que postergue la escritura. 

Desde hace mucho tiempo estoy leyendo, estudiando y preparando talleres para docentes sobre IA (Inteligencia Artificial). Esto genera que cada vez reciba más material en mi correo, mi Instagram, TikTok y por amigos/as y familiares que saben que consumo material sobre el tema. Si sos docente de escuelas secundarias, te recomiendo que pases por http://chicos.net/humania . Preparamos un material muy interesante para trabajar en el aula.

Pero esta vez quiero compartir una entrevista que realizó Gerry Garlbusky en su podcast del ciclo "Aprender de Grandes" que me dejó pensando y me hizo reflexionar sobre Inteligencia Artificial no ya a nivel tecnología, sino a nivel de Humanidad. Y como la entrevistada, Rebeca Hwang, además de como docente, como madre.

La entrevista dura hora y media, una hora y media en la que uno queda hipnotizado por la voz de Rebeca, la simpleza de las respuestas, y a la vez la profundidad de las mismas.

En la entrevista, uno los momentos que me estremecieron es cuando postula una metáfora que dice algo así como que "la inteligencia artificial actual es como haber tenido de repente un niño de 5 años neurodivergente". ¿Parece fuerte? Es fuerte sacado de contexto, te invito a ver el capítulo y compartir tus impresiones. También es muy, my interesante cuando habla del futuro de la educación y la función del docente. Empatía, conexión, habilidades son palabras que toman otra relevancia en este mundo.