Cómo incrustar imágenes en un bótón para tuitear

Uno de los elementos que añade valor en un curso con estrategias de gamificación es la posibilidad de socializar (compartir) los logros alcanzados por el estudiante. Estos logros pueden tener forma de insignias (badges), subidas de nivel (level up) o consecución de objetos de inventario. Estos logros los representamos de forma gráfica a través de una imagen o icono, de manera que a la hora de compartirlos a través de una red social como Twitter lo hagamos en forma combinada de texto acompañado de imagen.

En esta entrada explicaremos cómo crear un botón para tuitear una imagen incrustada. Se trata de una traducción libre del siguiente artículo: How to: embed images in 'Tweet this' links

Incrustar una imagen en un botón para tuitear no es tan fácil como se podría esperar. La manera obvia de hacerlo, por ejemplo, sería añadir en el tuit un enlace URL a dicha imagen, pero Twitter en ese caso mostraría el enlace,  pero no la imagen incrustada.

A menos que utilicemos un tipo particular de URL de la imagen.

Cómo encontrar la URL correcta de una imagen para incrustarla en Twitter

Esta URL de la imagen en particular es una generado por el propio Twitter, una vez la hemos tuiteado previamente. Por lo tanto, antes de crear el botón publicamos un tuit con la imagen incrustada.

Una vez hecho esto, abrimos el tuit. Normalmente se puede hacer esto haciendo clic en la fecha o la hora siguiente a la misma.

La URL del tuit tendrá una aspecto parecido a:
https://twitter.com/CITYTIC_MZN/status/717086038074769408

Es importante señalar que la imagen de un tuit tiene dos URLs. Una empieza con pbs.twimg.com y otra comienza con pic.twitter.com. Nosotros necesitaremos la segunda.

Si pulsamos el botón derecho del ratón sobre la imagen y seleccionamos 'Copiar dirección URL de imagen' obtendremos el tipo incorrecto de URL - el que empieza con pbs.twimg.com. Esta no nos sirve.

En su lugar, hay que hacer clic de nuevo en la imagen. Esto debería mostrar el tweet una vez más - sólo que esta vez con la URL pic.twitter.com visible. Copia este enlace para su uso posterior.

Si no puedes ver la URL pic.twitter haz clic derecho sobre el tuit y selecciona Ver código fuente (o similar). Utiliza CTRL + F (find) para buscar pic.twitter y así encontrar la URL de la imagen que copiaremos.

Agregar la URL de la imagen al botón de 'Twitter'.

Ve a la página de recursos de Twitter  para crear un botón de Compartir un Enlace.

1. En el apartado Compartir URL pega la dirección de la imagen incluyendo el prefijo http://.
2. Completa el resto de opciones: texto del tuit, vía, etiquetas,...
3. Selecciona el código html generado y pégalo en vista HTML de la etiqueta o tarea de Moodle correspondiente (o en tu web o blog). Ten en cuenta que al tuitear no aparece todavía la imagen pero si compruebas la línea de tiempo, podrás comprobar su funcionamiento.

Nosotros hemos comenzado a utilizar estos botones para tuitear la consecución de material de inventario consistente en dispositivos digitales que el estudiante consigue cuando alcanza un nivel determinado de puntos.

Se pueden ver ejemplos de su uso por parte de los estudiantes en nuestro perfil de Twitter.

Gamificación con Moodle: Actividades condicionales y rastreo de finalización

Una de las características de Moodle que le da una mayor flexibilidad es la existencia de actividades condicionales, es decir la posibilidad de que un recurso o actividad esté disponible únicamente cuando una o varias condiciones se cumplan.

Los criterios de condición (restricciones) que se pueden utilizar son las siguientes:

Restricciones en actividades condicionales

Para poder aplicar la restricción de Finalización de una actividad hay que activar el rastreo de finalización de actividades en la plataforma y en el curso.

Las actividades condicionales nos permiten entre otras cosas:

• La aparición de "premios" o "recompensas" (en forma de etiquetas condicionales) como resultado de la realización de una o más tareas.
• La aparición de actividades de refuerzo o ampliación en función de una calificación.
• La generación de niveles de dificultad creciente que hay que ir superando progresivamente: ésta es una de las mecánicas clásicas de muchos videojuegos.
• En lugar de la aparición también se puede implementar la desaparición de recursos y actividades una vez se han cumplido determinadas condiciones. 

Dos de los ejemplos más sencillos en implementar en CITYTIC han sido los siguientes creados a partir de restricciones por calificación:

A. Creación de un inventario. A medida que los participantes acumulan puntos van apareciendo diferentes objetos que van coleccionando, en nuestro caso gadgets tecnológicos. 

       

Por ejemplo, el Smartwatch que aparece cuando el participante consigue los 4000 puntos (el 80% del total de 5000) en el curso se configura de la siguiente manera a partir de una etiqueta:

B) Emoticonos al final de cada tema que expresan el estado de ánimo de nuestro cliente ficticio una vez le hemos entregado el resultado de nuestras tareas. En este caso la calificación que se utiliza para las restricciones es una categoría de calificación que recoge la nota de todo un tema o unidad, pero el sistema es el mismo . Se trata de una manera visual a modo de semáforo de informar al alumno sobre su resultado. En función de si es  menor que 40%, está entre 40% y 70% o supera el 70% aparece uno de los siguientes mensajes.

¡Vaya! Nuestro cliente no está muy contento con el resultado obtenido.

Revisa las tareas y consigue que se le pase el enfado. 

 ¡BIEN! Nuestro cliente está bastante contento con el resultado, aunque piensa que  podría ser mejor. Piensa cómo mejorar el trabajo realizado y consigue un cliente totalmente satisfecho.

 ¡Buen trabajo! Nuestro cliente no para de comentar la calidad del trabajo realizado. 

La aplicación detallada de las actividades condicionales se puede ver en los siguientes recursos:

• Gamificación en Moodle. Explica con algunos ejemplos el uso del rastreo de finalización y las actividades condicionales en un entorno de gamificación. 

• Gamify your Moodle courses in under 20 minutes (vídeo en inglés).

• Guía de gamificación para Moodle. Universidad Politécnica de Madrid. Ver el apartado 1.5. sobre actividades condicionales.

Creación de avatares

La creación de avatares es un sencillo elemento que nos ayuda a crear una estética de juego. Al subir una imagen customizada en el perfil de moodle el alumno queda identificado ante el resto en todas aquellas actividades de carácter "social": mensajería, wikis, foros, tablas de puntuación,...

La creación de un "alter ego" es sin duda una actividad interesante también por todo lo que implica de proyección personal del propio alumnado.

Aunque a los alumnos se les daba libertad en las aplicaciones y técnicas para la creación de su avatar la mayoría optaron por hacerlo a través de alguna de las aplicaciones web que les propusimos:

• Cartoonify
• Crear un Avatar
• Face Your Manga
• Pocoyizador

He aquí una muestra de los resultados de nuestros alumnos.

 

Y así es cómo aparecen en las tablas de puntuación:

Puntos de experiencia (XP)

Los puntos son uno de las mecánicas básicas de gamificación que forman parte de la tríada PBL: Points (puntos), Badges (Insignias) y Leaderboards (tablas de clasificación). Los puntos de experiencia o puntos XP son aquellos que se otorgan por la realización de diferentes actividades y que expresan el dominio de una cierta habilidad.

En CITYTIC hemos querido aplicar diferentes elementos y mecánicas de gamificación para el desarrollo de los proyectos. Uno de los primeros elementos básicos que hemos implementado son los puntos de experiencia que son los que luego condicionan los otros dos elementos de la tríada PBL como son la obtención de insignias y las tablas de clasificación, y otros elementos de gamificación como la adquisición de material de inventario. La razón de ser el elemento básico es su correlación con las calificaciones de las diversas tareas y que proporcionan una información al alumno de su progreso en la materia.

Para la generación de puntos de experiencia. hemos utilizado en lugar de una, seis categorías correspondientes a diferentes habilidades o competencias que están presentes en el curriculum de la asignatura. Las habilidades están presentes en los juegos de rol ya que definen las características del personaje. En nuestro caso, desde un punto de vista más serio, definen las habilidades de nuestro trabajador Las 6 competencias se representan por iconos en la interfaz del proyecto y son las siguientes: 

	Diseño gráfico	Tratamiento de fotografía y edición de imágenes. Elaboración de gráficos vectoriales. Diseño de infografías y otras producción gráficas.
	Edición audiovisual	Edición de sonido. Edición de vídeo. Uso de plataformas de distribución (podcast).
	Comunicación	Elaboración de diferentes tipologías de documentos de texto. Creación de presentaciones digitales para el apoyo de exposiciones orales.
	Tecnología y seguridad informática	Instalación y configuración de hardware. Conocimiento de sistemas operativos. Aplicación de medidas de seguridad y protección informática.
	Redes sociales	Participación en redes sociales. Elaboración de un blog. Licencias de contenidos digitales.
	Tratamiento de Datos	Uso de la hoja de cálculo. Diseño de bases de datos.

La definición de estas seis habilidades tienen la ventaja de que pueden ser fácilmente relacionadas con los criterios de evaluación y las competencias del curriculum.

Cada una de las tareas que configuran los proyectos  está asignada a una de estas habilidades de manera que la puntuación obtenida en cada tarea contribuye a la mejora de dicha habilidad. Los alumnos-jugadores-trabajadores disponen al inicio de cada proyecto una tabla de evaluación como esta, correspondiente al proyecto del restaurante.

A medida que realizan las tareas y son evaluadas, la puntuación aparece en la  cabecera de la página principal del curso de esta manera:

348

419

655

620

88

490

Dado que las tareas también contribuyen a las calificaciones ordinarias por temas y por evaluación en Moodle hemos utilizado dos sistemas de agrupación.

• Para calcular las notas de cada proyecto y cada evaluación utilizamos los sistemas de agregación de calificaciones proporcionados por Moodle de manera que el alumno pueda ver sus calificaciones en el orden en que realiza las tareas. Como en los proyectos planteamos un "exceso" de tareas entre las cuales el alumno puede elegir una parte según sus intereses y fortalezas, nosotros utilizamos el método natural ya que se adapta mejor a la suma de puntuaciones. En el mismo proyecto del restaurante podemos ver que realizando todas las tareas se pueden alcanzar 600 puntos, pero al definir una de ellas (la presentación del restaurante) como puntos extra (signo +-) un alumno obtendría su calificación según el % de sus puntos respecto a los 500 puntos que sería el 100%.

• Para calcular la puntuación de las habilidades utilizamos categorías calculadas situadas al inicio del árbol de calificaciones.