Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos ›...

133
1 | P á g i n a PROYECTO FINAL DE CARRERA Ludificación del sistema web de reserva de turnos de prácticas Alumno: Manuel Estévez Palencia

Transcript of Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos ›...

Page 1: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

1 | P á g i n a

PROYECTO FINAL DE CARRERA

Ludificación del sistema web de reserva de

turnos de prácticas

Alumno: Manuel Estévez Palencia

Page 2: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

2 | P á g i n a

Índice 1. Introducción al proyecto ....................................................................................................... 8

1.1. Introducción ...................................................................................................................... 9

1.2. Objetivos ......................................................................................................................... 10

2. Estado del Arte .................................................................................................................... 11

2.1. Historia y evolución de la Gamificación .......................................................................... 12

2.2. En que consiste la motivación y por qué jugamos .......................................................... 15

2.3. La gamificación y la enseñanza ....................................................................................... 19

2.4. Mecánicas y técnicas de juego ........................................................................................ 22

2.5. Las mecánicas de juego en detalle: ................................................................................. 24

2.5.1. Los sistemas de puntuación .................................................................................... 24

2.5.2. Niveles ..................................................................................................................... 29

2.5.3. Leader Boards o rankings ........................................................................................ 30

2.5.4. Badges ..................................................................................................................... 31

2.5.5. Onboarding o reclutamiento de usuarios ............................................................... 32

2.5.6. Bucles de fidelización .............................................................................................. 32

2.5.7. Retos y “misiones” .................................................................................................. 33

2.5.8. Feedback ................................................................................................................. 33

2.6. Ejemplo de sistema educacional gamificado: Duolingo .................................................. 36

3. Desarrollo ............................................................................................................................ 38

3.1. ¿Qué se quiere desarrollar con este proyecto? .............................................................. 39

3.2. Partes que forman el sistema y como se relacionan entre ellas .................................... 39

3.3. Cambios que se aplican a las partes que forman la web ................................................ 40

3.4. Herramientas utilizadas en el desarrollo del proyecto ................................................... 42

3.4.1. Instalación del entorno LAMP ................................................................................. 42

3.4.1.1. Problemáticas que pueden surgir después de realizar la instalación: ........... 44

3.4.2. Motor de plantillas Smarty ...................................................................................... 44

3.4.2.1. Instalar Smarty en el equipo ........................................................................... 45

3.4.2.2. Configurando Smarty en el proyecto .............................................................. 45

3.4.3. Autenticación de usuarios mediante UVUS ............................................................ 46

3.4.3.1. Funcionamiento .................................................................................................. 47

3.4.3.2. Como incluir el sistema UVUS en el proyecto ..................................................... 47

3.4.3.3. Configuración ...................................................................................................... 48

3.5. Bases de datos relacionales ............................................................................................ 49

3.5.1. Introducción ............................................................................................................ 49

3.5.2. Diseño ...................................................................................................................... 50

Page 3: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

3 | P á g i n a

3.6. Manejo de la base de datos con PhpMyAdmin............................................................... 52

3.7. Gestión de la base de datos con PHP .............................................................................. 55

3.8. Funcionalidades que aporta la gamificación de la web de prácticas. ............................ 58

3.8.1. Modificaciones en la web a la que tienen acceso los alumnos ............................... 59

3.8.2. Modificaciones en la zona de administración ......................................................... 64

4. Funciones ............................................................................................................................ 66

4.1. Introducción .................................................................................................................... 67

4.2. Zona Usuario: common.php ............................................................................................ 68

4.2.1. Función filas_tabla: ................................................................................................. 68

4.2.2. Función consultalogros: .......................................................................................... 68

4.2.3. Función actualizar_puntuaciones: .......................................................................... 69

4.2.4. Función tipo_puntuación: ....................................................................................... 70

4.2.5. Función crear_array: ............................................................................................... 70

4.2.6. Función intro_en_array: .......................................................................................... 71

4.2.7. Función consulta_ordenada: ................................................................................... 71

4.2.8. Función consulta_turnos: ........................................................................................ 72

4.2.9. Función validacion_enteros: ................................................................................... 72

4.2.10. Función valor_dec_md5: ......................................................................................... 73

4.2.11. Función pasar_a_md5: ............................................................................................ 73

4.2.12. Función monedas_alumno: ..................................................................................... 73

4.2.13. Función calcular_precio_turno: .............................................................................. 74

4.2.14. Función actualizar_log: ........................................................................................... 74

4.2.15. Funciones de Login por UVUS: ................................................................................ 75

4.2.15.1. check_and_force_sso() ................................................................................... 75

4.2.15.2. all_attributes($force_arrays = FALSE) ............................................................. 75

4.3. Zona Usuario: mercado.php ............................................................................................ 76

4.3.1. Función crear_intercambio: .................................................................................... 76

4.4. Zona Usuario: perfil.php .................................................................................................. 76

4.4.1. Función consulta_perfil_alumnos ........................................................................... 76

4.5. Zona Usuario: logros.php ................................................................................................ 77

4.5.1. Función ver_videos: ................................................................................................ 77

4.6. Zona Usuario: practica.php ............................................................................................. 78

4.6.1. Función demanda_turno ......................................................................................... 78

4.7. Zona Administración: common.php ................................................................................ 79

4.7.1. Función consultaasistencia :.................................................................................... 79

4.7.2. Función consulta_crea_array: ................................................................................. 80

Page 4: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

4 | P á g i n a

4.7.3. Función edicion: ...................................................................................................... 80

4.7.4. Función edicion_texto: ............................................................................................ 80

4.8. Funciones comunes a las del common.php de la zona usuario: ................................. 81

4.9. Zona administración: logros.php ..................................................................................... 82

4.9.1. Función asistencia_practicas: .................................................................................. 82

5. Pruebas del sistema ............................................................................................................ 83

5.1. Introducción a este apartado .......................................................................................... 84

5.2. Apuntarse a un turno ...................................................................................................... 84

5.3. Asistencia a prácticas ...................................................................................................... 89

5.4. Crear un logro y editarlo ................................................................................................. 92

5.5. Realización de un intercambio ........................................................................................ 97

6. Conclusiones y mejoras futuras ........................................................................................ 106

6.1. Conclusiones.................................................................................................................. 107

6.2. Mejoras futuras ............................................................................................................. 108

6.2.1. Sistema de puntuación .......................................................................................... 108

6.2.1.1. Leaderboard .................................................................................................. 108

6.2.1.2. Estadísticas de usuario .................................................................................. 108

6.2.1.3. Logros con niveles ......................................................................................... 109

6.2.2. Optimización del código ........................................................................................ 109

6.2.2.1. Actualizar a php 5 .......................................................................................... 109

6.2.2.2. Mejoras en seguridad .................................................................................... 109

6.2.3. Diseño web ............................................................................................................ 110

6.2.3.1. Actualizar diseño a los tiempos actuales ...................................................... 110

6.2.4. Contenido adicional docente ................................................................................ 110

6.2.4.1. Creación de una plataforma de complemento al estudio............................. 110

6.2.4.2. Entorno que relacione lo que aprende el alumno con el mundo real .......... 110

AnexoA: Instrucciones para administrar y crear logros ............................................................ 111

1. Manual de la nueva zona de administración .................................................................... 112

1.1. Gestión de logros ...................................................................................................... 112

1.3. Gestión de videos ...................................................................................................... 116

Page 5: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

5 | P á g i n a

Anexo B: Código fuente ............................................................................................................. 118

1. Ficheros de la zona usuario ........................................................................................... 119

1.1. ce2t.php y common.php ....................................................................................... 119

1.2. Config.php ............................................................................................................. 119

1.3. contenido.php ....................................................................................................... 120

1.1. contraofertas.php ................................................................................................. 120

1.2. loginusr.php ........................................................................................................... 120

1.3. logros.php .............................................................................................................. 120

1.4. mercado.php ......................................................................................................... 120

1.5. perfil.php ............................................................................................................... 120

1.6. practica.php ........................................................................................................... 121

2. Vistas creadas para la zona de usuario ......................................................................... 121

2.1. contenido.tpl ......................................................................................................... 121

2.2. contraofertas.tpl ................................................................................................... 121

2.3. login.tpl.................................................................................................................. 121

2.4. mercado.tpl ........................................................................................................... 121

2.5. perfil.tpl ................................................................................................................. 121

2.6. pracscambios.tpl ................................................................................................... 121

3. Ficheros de la zona administración ............................................................................... 122

3.1. asistencia.php ........................................................................................................ 122

3.2. asociarvideos.php .................................................................................................. 122

3.3. ce2t.php y common.php ....................................................................................... 122

3.4. config.php .............................................................................................................. 122

3.5. logrocrear.php ....................................................................................................... 123

3.6. logroeditar.php ..................................................................................................... 123

3.7. logros.php .............................................................................................................. 123

3.8. videos.php ............................................................................................................. 123

3.9. videoeditar.php ..................................................................................................... 123

4. Vistas creadas para la zona de administración ............................................................. 123

4.1. asociarvideos.tpl.................................................................................................... 123

4.2. asistencia.tpl .......................................................................................................... 123

4.3. logrocrear.tpl ......................................................................................................... 123

4.4. logroeditar.tpl ....................................................................................................... 124

4.5. videos.tpl ............................................................................................................... 124

4.6. videoseditar.tpl ..................................................................................................... 124

Page 6: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

6 | P á g i n a

Anexo C: Bibliografía ................................................................................................................. 125

1. Teoría sobre la gamificación ......................................................................................... 126

2. Mecánicas y técnicas de juego ...................................................................................... 127

3. Entorno de desarrollo LAMP ......................................................................................... 127

4. Apache ........................................................................................................................... 127

5. PHP ................................................................................................................................ 128

6. Base de datos y phpMyAdmin ....................................................................................... 129

7. Mockup y bocetos ......................................................................................................... 131

8. Smarty, CSS y HTML ...................................................................................................... 131

9. JavaScript ....................................................................................................................... 133

Tabla de imágenes

Ilustración 1 El juego debe mantenerse en una zona donde no produce ansiedad ni

aburrimiento (Flow Zone) ........................................................................................................... 15

Ilustración 2 Imagen de lo que se encuentra un usuario de Duolingo nada más acceder a ella 36

Ilustración 3 www.smarty.net ..................................................................................................... 45

Ilustración 4 Archivos y carpetas que se crean si Smarty se copia correctamente ................... 45

Ilustración 5Ejemplo de configuración de Smarty en un proyecto php ..................................... 46

Ilustración 6 Esquema general del funcionamiento del UVUS.................................................... 47

Ilustración 7 Ejemplo de cómo se comprueba sesión ................................................................. 48

Ilustración 8 Ejemplo de tablas en relación padre-hijo ............................................................... 49

Ilustración 9 Creación de una tabla y varios elementos de su .................................................... 52

Ilustración 10 Inserción de nuevos elementos a la estructura de una tabla .............................. 53

Ilustración 11Menú de phpMyadmin que muestra .................................................................... 54

Ilustración 12 Tabla en la que se va a insertar datos .................................................................. 54

Ilustración 13 Página de inicio de la web de prácticas ................................................................ 59

Ilustración 14 Ahora la plataforma requiere login por la US para usar la web de prácticas...... 59

Ilustración 15 Vista del perfil al que tiene acceso el alumno cuando se autentica

correctamente ............................................................................................................................. 60

Ilustración 16 Vista del contenido extra asociado a las prácticas ............................................... 60

Ilustración 17 Ejemplo de la lista de prácticas disponibles en una asignatura .......................... 61

Ilustración 18 Ejemplo de turnos disponibles en una práctica ................................................... 61

Ilustración 19 Ejemplo de la página del mercado a la que tiene acceso los alumnos ............... 62

Ilustración 20 Ejemplo de la página donde un alumno puede consultar las contraofertas que

otros le hacen a su turno en venta ............................................................................................. 63

Ilustración 21 Pagina de creación de logros ................................................................................ 64

Ilustración 22 Ejemplo de la lista de asistencia a las prácticas de una asignatura .................... 65

Ilustración 23 Página de gestión del contenido extra ................................................................. 65

Ilustración 24 Perfil del alumno sin turnos asociados ................................................................. 84

Ilustración 25 ejemplo lista de prácticas disponibles.................................................................. 85

Ilustración 26 vista de los turnos de una práctica ....................................................................... 85

Page 7: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

7 | P á g i n a

Ilustración 27 Mensaje de inscripción correcta ......................................................................... 86

Ilustración 28 Mensaje de error al inscribirse ............................................................................. 87

Ilustración 29 Perfil del alumno con el turno recién reservado .................................................. 87

Ilustración 30 El turno reservado queda reflejado en la tabla reservas de la base de datos .... 88

Ilustración 31 Lista con los estados de asistencia ....................................................................... 89

Ilustración 32 Tabla que almacena la asistencia a practicas ....................................................... 89

Ilustración 33 Cambio de asistencia en una práctica .................................................................. 90

Ilustración 34 El cambio en la asistencia se ve en la base de datos ............................................ 90

Ilustración 35 La asistencia a una práctica puede desbloquear logros ....................................... 91

Ilustración 36 Vista de creación y gestión de logros ................................................................... 92

Ilustración 37 Rellenar datos del logro ....................................................................................... 92

Ilustración 38 El logro recién creado aparece en esta vista ........................................................ 93

Ilustración 39 Resultado en base de datos de la creación de un logro ....................................... 93

Ilustración 40 Edición de un logro creado anteriormente .......................................................... 94

Ilustración 41Introdución de nuevos datos ................................................................................ 94

Ilustración 42 Al actualizar se ven los nuevos datos ................................................................... 94

Ilustración 43 La edición del logro también se muestra en la base de datos ............................. 95

Ilustración 44 Los cambios del logro también se ven en la vista de gestión de logros .............. 95

Ilustración 45 Un logro deshabilitado tiene su campo "borrado" a 1 ......................................... 96

Ilustración 46 Al pulsar en "vender" puede poner su turno a la venta ....................................... 97

Ilustración 47 Ventana donde se introduce el precio de venta .................................................. 97

Ilustración 48 Éxito en poner un turno a la venta ....................................................................... 98

Ilustración 49 Ejemplo de intercambio en base de datos ........................................................... 98

Ilustración 50 El turno que se puso a la venta aparece para su compra para el resto de

alumnos ....................................................................................................................................... 99

Ilustración 51 Mensaje de compra de un turno .......................................................................... 99

Ilustración 52 Ventana donde se realiza la contraoferta al vendedor ...................................... 100

Ilustración 53 contraoferta creada correctamente ................................................................... 100

Ilustración 54 Un Intercambio en base de datos ...................................................................... 101

Ilustración 55 Pulsar el botón para ver las contraofertas ......................................................... 101

Ilustración 56 Vista con la lista de contraofertas realizadas al vendedor ................................ 102

Ilustración 57 Instrucciones para aceptar la contraoferta ........................................................ 102

Ilustración 58 Recordatorio al vendedor................................................................................... 103

Ilustración 59 Actualización de la contraoferta ........................................................................ 103

Ilustración 60 Cambios en "intermedios" ................................................................................. 104

Ilustración 61 Cambios en reserva debidos al intercambio ...................................................... 104

Ilustración 62 perfil con el turno comprado/intercambiado .................................................... 105

Ilustración 63 Ventana principal de la página de “Gestión de logros” en administración ....... 112

Ilustración 64 Página donde se asocian los contenidos extras a las distintas prácticas ........... 114

Ilustración 65 En la parte final de la vista de logros, en administración, se muestran los logros

en estado borrado ..................................................................................................................... 115

Ilustración 66 Vista de la página de edición de un logro ya existente ...................................... 115

Ilustración 67 Vista de la lista de asistencia a prácticas ............................................................ 116

Ilustración 68 Página para la creación de contenido extra (videos u otra url) ........................ 116

Ilustración 69 Página para editar un contenido extra creado anteriormente ......................... 117

Page 8: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

8 | P á g i n a

1. Introducción al proyecto

Page 9: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

9 | P á g i n a

1.1. Introducción

Un problema con el que se encuentran muchas plataformas webs tanto en el mundo laboral

como el educativo es que sus potenciales usuarios las utilizan poco, mal y sólo pasan por ellas

cuando no queda más remedio. El florecimiento de las herramientas webs y el éxito de las redes

sociales, parecen haber inculcado la idea de que si desarrollas un proyecto web y no lo

programas como red social, este proyecto está condenado al fracaso y muchas veces es al revés.

El principal problema es que no se consigue que estas herramientas, páginas o redes sociales

sean interesantes para los usuarios objetivos. Como consecuencia de este desinterés se

empezaron a investigar soluciones a este problema. Una de las conclusiones a las que se llegó

fue la gamificación de los proyectos, o lo que es lo mismo buscar una serie de funciones y

mecánicas que hacen a los juegos tan interesantes y divertidos para luego aplicarlas en

actividades que normalmente no tienen relación ninguna con el entretenimiento.

En este proyecto se trabaja sobre una web de reserva de turnos de prácticas, una herramienta

de obligado uso por parte de los alumnos de ciertas asignaturas. Al ser de uso obligatorio para

apuntarse a unas clases obligatorias, los alumnos en su mayoría muestran una gran indiferencia

con la web y sólo la usan para apuntarse en los turnos disponibles y nada más. Por lo que toda

información extra que haya incluido el profesor en dicha página, por muy importante que sea,

pasa desapercibida para gran parte de los alumnos.

Además con la reserva de los turnos surge otro problema y es que hay horarios que nadie quiere

y otros turnos que tienen mucha demanda. Este pico de demanda suele producirse en los días

no cercanos a los puentes, fines de semana y vacaciones, por lo que los alumnos que planifican

muy bien su tiempo libre acaban con los huecos en poco tiempo. Como consecuencia no hay un

reparto demasiado justo de los turnos y el uso de la web queda reducido a los días en los que

hay nuevos turnos disponibles. Este comportamiento de la web, a la hora de reservar turnos,

tampoco ayuda a que los alumnos quieran usarla más de lo justo y necesario.

A lo largo de este documento se explica parte de la teoría asociada a la ludificación, también

conocida como gamificación, y como su aplicación puede afectar positivamente al uso de la web

de prácticas por parte de los alumnos. Además se explica cómo las funciones son el resultado

de investigar en base a esta teoría, el modelo de entorno que se quiere conseguir con el proyecto

y el proceso de desarrollo de este.

En una parte de la memoria, se podrá consultar varías pruebas realizadas al sistema gamificado

que se ha obtenido como resultado del proyecto. Por último se incluyen una serie de anexos con

el código del proyecto y un manual de administrador del nuevo contenido.

Page 10: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

10 | P á g i n a

1.2. Objetivos

En resumidas cuentas lo que se quiere conseguir con este proyecto es probar la eficiencia de los

entornos gamificados y si su aplicación puede ser beneficiosa para las páginas con docencia de

la universidad de Sevilla.

En este primer contacto con la gamificación, se aplicará todo lo que se expone a lo largo de la

memoria, en un sitio web ya existente como es la web de prácticas de varias asignaturas del

departamento Ingeniería Electrónica de la ETSI y con ello se espera alcanzar los siguientes

objetivos:

Mejorar la experiencia de la web de prácticas de ciertas asignaturas del departamento

de Ingeniería Electrónica, para aumentar su tráfico de visitas generado por parte de los

alumnos. Para esto se realizarán algunos cambios de diseño, funcionalidad y se

integrará gamificación al sistema.

Con la gamificación del sistema se quiere motivar al alumno a usar esta página para

más actividades que el acto de apuntarse a las clases prácticas. Para conseguir esto, se

integrarán en la plataforma web una serie de mecánicas típicas de los juegos adaptadas

a los requisitos de una web docente y así mejorar con ellas la interactividad del alumno

con la web y fomentar la competitividad entre los usuarios de esta.

Mediante las funciones que aporte la gamificación, se quiere conseguir una distribución

más satisfactoria para los alumnos dentro de las posibilidades existentes. Con este

reparto se pretende fomentar la interacción entre los alumnos a la hora de reservar o

modificar un turno de prácticas.

Integrar la autenticación mediante UVUS para que los alumnos pueda acceder a sus

datos, acceder de forma privada a las nuevas funciones de la web y les facilite el hecho

de apuntarse o abandonar un turno de prácticas.

Page 11: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

11 | P á g i n a

2. Estado del Arte

Page 12: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

12 | P á g i n a

2.1. Historia y evolución de la Gamificación

A partir del año 2008 se pueden encontrar las primeras referencias al término "gamificación", pasando este a ser un campo bastante popular alrededor del 2010. Aunque el término sea reciente su historia en cambio, no lo es. Como la gamificación pretende añadir mecánicas de juego en campos que normalmente no las tienen, su historia está muy relacionada con la del juego y con el hecho de que los humanos aprendamos jugando. Jugar ha sido y es, un mecanismo básico de supervivencia de nuestra especie que nos ha permitido transmitir conocimiento de unas generaciones a otras. La gamificación en si engloba muchas de sus fórmulas y técnicas para implementarlas en distintos ámbitos de nuestro día a día que por regla general no tienen relación alguna con los juegos, para conseguir optimizarlos y motivar a las personas que trabaje en dichas actividades por muy tediosa que sean sus tareas. Un ejemplo claro de cómo el juego se ha usado en otros campos distintos al del ocio a lo largo de la historia, es el que nos ha trasmitido Heródoto, historiador de la antigua Grecia, que recogió el caso de como el rey del Reino de Lidia (Actualmente parte de Turquía) mantuvo contenta a su población y casi sin revueltas durante los 18 años que duró la hambruna en el reino. Para ello fomentó el juego entre la población, de forma que todos los habitantes del reino estuviesen activos y concentrados en ellos durante los días que no pudiesen comen. Así mientras parte de la población comía ese día la otra se dedicaba a jugar al balón, a la taba o a los dados (la invención de estos se le atribuye al propio rey). Esta medida permitía que la gente que ese día no pudiese comer estuviese entretenida y se "olvidase" del hambre durante el día de ayuno. Por supuesto esta medida tenía los días contados y tarde o temprano la gente se sublevaría, para evitarlo lo que hizo fue dividir a la población en dos, a unos les obligo a quedarse en el reino y a los otros junto a su hijo Tyrsenos les mando explorar otras regiones de fuera del reino, dándoles privilegios totales sobre los nuevos territorios que colonizasen. Así consiguió tener la mitad de población y que hubiese más provisiones por personas sin necesidad de una guerra civil y el grupo que abandonó el país consiguió asentarse en nuevas tierras con más recursos y fundar un nuevo reino, los Tyrsenios. Con este ejemplo se puede ver hasta qué punto disfrazando, de manera correcta, un problema como un juego se pueden alcanzar metas muy ambiciosas, en casos parecidos al anterior lo más normal es que se resuelvan con guerras, golpes de estados o intervenciones exteriores, incluso en nuestros días. Por ello la gamificación de los eventos diarios es una herramienta potente que se puede usar desde la cosa más banal hasta problemas de estado si se aplica correctamente. Obviamente este proyecto no es tan ambicioso y una de las coas pretende es motivar a los alumnos en el uso de la web de prácticas y en que negocien con sus turnos añadiendo ciertas mecánicas de juego. Otro ejemplo menos dramáticos que el anterior y volviendo a una época no tan alejada de la nuestra, concretamente el primer tercio del siglo XX. Podemos ver como el comercio ha sido el gran beneficiado de estas ideas. En 1930 aproximadamente se popularizaron los programas de fidelización de los clientes en las tiendas de la época, estos programas proponían cosas tan simples como si compras 10 und la siguiente es gratis, este método en pleno 2014 sigue siendo un método muy popular, aunque arcaico y que no explota todas las ventajas de gamificar un producto o servicios.

Page 13: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

13 | P á g i n a

Los puntos flacos de este sistema son que sólo se recompensa al usuario más asiduo y se deja de lado a los nuevos clientes o al esporádico, otra pega es que aunque a todos nos guste algo gratis sabemos perfectamente cuanto hemos tenido que pagar antes para obtener lo "gratuito" por lo que se puede llegar a pensar si merece o no la pena "jugar" para conseguir la compensación prometida por comprar tantas unidades. Una solución muy popular para evitar que los usuarios asignen valores a los beneficios que se ofrecen y que sigan motivados con este tipo de programas es el uso de una moneda virtual. Por ejemplo con la compra de las 10 unidades te doy un sello, si consigues varios sellos puedes cambiarlos por descuentos importantes en una serie de productos que ofrezco por catálogo y a cuanto más sellos más grande es el descuento. Con esta solución se consiguen dos cosas: la primera es que el cliente no conozca de forma fácil cuanto tiene que pagar para obtener el beneficio y la segunda es que al ofrecer descuentos el cliente siempre va a tener que dar algo a cambio, por el premio que quiere por su fidelidad, con esta medida se consigue que baje casi a coste cero el dar premios a los cliente fieles. Ya por los años 80 y gracias a que el avión cada vez tenía más clientes por su bajada de precios, las líneas áreas vieron que una mejor solución (y más barata) era dar menos vuelos gratis y más privilegios, así aparecieron los programas de fidelidad basados en el status Siguiendo con el ejemplo de las líneas aéreas, muchas de ellas dan puntos por cada vuelo que tomes, cuanto más largo y caro sea el vuelo más puntos obtienes y al llegar a cierta puntuación, el cliente alcanza un status, este status por ejemplo le da acceso a una atención al cliente mejor, a tener prioridad de embarque, a elegir asiento en el próximo vuelo o tener un menú gratis en trayectos cortos. Estas bonificaciones son de coste ínfimo de dinero y recursos para las empresas y los clientes obtienen una serie de beneficios que no pueden asociar a lo que les cuesta viajar, además suelen apreciar estas ventajas por lo que las tienen en cuenta a la hora de elegir compañía en sus próximos viajes. En conclusión el cliente está contento y se siente exclusivo, además no se entera de lo que le cuesta mantener esos privilegios y a la empresa no le cuesta casi nada dar esas ventajas, por lo que es un plan de fidelización bastante rentable. La única pega de este modelo de fidelización es que cuesta algo de dinero el mantenerlo y que aparte de la publicidad que haga el "boca a boca” de los clientes, casi que no genera ningún beneficio extra a la empresa o producto en el que se aplica. Con el auge de las redes sociales, si tu programa de fidelización no se expone ni comparte en ellas, su fracaso está casi asegurado. A la gente en general le gusta exponer su nivel de vida y que los demás lo vean, por lo que los programas de fidelización o gamificación de un producto, negocio o actividad ven potenciados sus efectos si cuentan con el componente social. El caso más exitoso en estos años, aunque en estas fechas en declive, son juegos como el Farmville, que consiguieron hacer que la gente se preocupase por ordeñar sus vacas o regar su campos virtuales, actividades que no tienen sentido en un videojuego ya que en la vida real estas tareas son aburridas, laboriosas y casi nadie quiere trabajar en ellas, pero que en el mundo digital han tenido un gran éxito por el simple hecho de estar compartiendo continuamente tus datos de tu forma de jugar con el resto del mundo. Zynga, la empresa desarrolladora del juego, hizo muchísimo dinero vendiendo sus añadidos para el juego y ella a cambio solo recompensaba a sus jugadores con bienes virtuales que a ella no le costaba nada darlos. En resumen Zynga sólo tiene beneficios y mantener contentos a sus jugadores les cuesta cero, encima estos le hacen publicidad gratis a otros potenciales jugadores a través de las redes sociales. Hasta ahora este modelo ha sido uno de los más rentables de la historia de la gamificación de actividades nada lúdicas.

Page 14: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

14 | P á g i n a

Como se ha comentado en los párrafos anteriores las empresas e instituciones parecen haber encontrado un filón al añadir ciertas mecánicas de juego a sus actividades. Al explotar con ellas ciertas tendencias del ser humano como la competitividad, ganas de lucirse ante otros o incrementar nuestro status social, han conseguido mejorar el rendimiento de sus trabajadores, la productividad o han aumentado sus ventas. Por lo que queda casi demostrado mediante la práctica que el uso correcto de ciertas mecánicas de juego y la búsqueda de la forma más apta de adaptarlas a cierto sector hacen que la gamificación sea un elemento cada vez a tener más en cuenta tanto en el mundo empresarial (más beneficios), en el de la psicología (produce gran cantidad de datos para el estudio del comportamiento) o en el de la ingeniería (integración de estos sistemas y desarrollo de estos).

Page 15: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

15 | P á g i n a

2.2. En que consiste la motivación y por qué jugamos

El ser humano necesita cierta motivación para realizar cualquier tarea de su día a día. Hay tres motivaciones básicas que hacen que cualquier persona se motive a realizar una u otra actividad, o enfrentarse a problemas totalmente desconocidos para esta persona. Estos factores de motivación tan poderosos son el sexo, la violencia y el juego. El sexo es el factor que más motiva al ser humano pero tiene desventajas a la hora de aplicar su potencial, ya que este va ligado al deseo sexual y este no siempre está presente, además de ser imposible el generalizarlo a toda la población, ya que cada persona tiene diferentes predilecciones y lo que motiva a unos puede desalentar a otros. Por ello las técnicas de motivación basadas en el sexo no funcionan en tareas a largo plazo. La violencia por su parte, permite que las personas hagan de todo con tal de evitar el castigo que se está dirigiendo hacia ellas. Las desventajas del uso de la violencia son muchas, pueden incluso provocar que personas con talento en algo acaben odiando dicha actividad si les es impuesta de forma violenta, además el simple hecho de sentirse amenazado de forma continua provoca que la gente huya, abandone o que cree una situación nada ventajosa al que aplica la violencia como motivación. Por último el juego, el cual tiene como ventajas las principales carencias de las otras dos motivaciones anteriores. El juego es predecible, ameno y es más fáciles de que provoque un deseo de participación en las personas. Además por lo general, no producen estrés ni hay necesidad de aplicar ningún tipo de violencia para que las personas por si solas realicen el juego. El aspecto negativo es que pueden ser muy adictivos y que son difíciles de diseñar para que un número relativamente amplio de personas se vea atraído a jugar. Para que un juego tenga éxito por lo general tiene que durar un tiempo limitado, que jugarlo sea un hecho placentero y que haya algún tipo de recompensa para los jugadores. Para producir estos efecto con el juego que se diseñe, este debe tener un cierto 'flow' y una serie de refuerzos. Con el flow simplemente nos referimos a que el jugador cuando juega no debe sentir ni aburrimiento ni ansiedad, se le debe conducir por un 'flujo' intermedio en el que el jugador pierda la noción del tiempo y del espacio, ya que si se llega a ese estado, la persona en sí, estará usando el 100% de sus capacidades en realizar ese ejercicio. Entonces se puede decir que la principal tarea y objetivo de todo diseñador de juegos es conseguir producir ese estado en el jugador.

Ilustración 1 El juego debe mantenerse en una zona donde no produce

ansiedad ni aburrimiento (Flow Zone)

Page 16: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

16 | P á g i n a

Los refuerzos por otro lado, nos permiten convertir la recompensa esperada por jugar, en una serie de actividades para que el jugador las realice en un determinado periodo de tiempo y así pueda obtener dicho beneficio. Un refuerzo al que estamos muy acostumbrados es al sueldo y este según como se aplique puede producir unos u otros efectos en el trabajo del empleado. Si se recibe el sueldo cada cierto periodo de tiempo, mensualmente por ejemplo, la persona sabe que si hace su trabajo en ese tiempo recibida su nómina, por tanto con este tipo de refuerzo se consigue una constancia en el trabajo pero se aniquila la creatividad e innovación ya que como se sabe que al final de mes se cobra, con hacer lo que se pida cada mes, el sueldo está asegurado (Refuerzo de intervalo fijo). Por otra parte si el sueldo se pagase sin previo aviso y nunca transcurriendo los mismos días se puede producir un efecto "tragaperras" en la persona, es decir puede que trabaje y aporte más si recibe muy a menudo una serie de pagos, por lo que se va haciendo "adepto" a su trabajo, pero puede frustrarse y resentirse su labor si pasa mucho sin recibir nada (Refuerzo de operativo condicionado). El segundo tipo de refuerzo normalmente no es aceptado en el ejemplo de las nóminas de los trabajadores porque se consideran manipuladores y condicionantes pero no es raro ver que empresas den este tipo de refuerzos como un extra y los presenten como concursos, rifas o competiciones. En las mecánicas de juego de un sistema gamificado este tipo de refuerzos son más efectivos que los de valor fijo. Además de esta clasificación, la psicología suele dividir en dos tipos a la motivación según su origen:

Intrínseca: Son las que provienen de nuestro ser y necesariamente no están basadas en el entorno que nos rodea.

Extrínseca: Son las que están provocadas por el entorno que nos rodea.

A la hora de enfrentar ambos tipos de motivaciones en un entorno gamificado, hay ciertas conclusiones comunes: Un motivador extrínseco como puede ser el dinero, no funciona cuando se le pide a la

gente que resuelva tareas que necesiten emplear "pensamiento lateral" Es decir que el dinero como premio baja el rendimiento en tareas complejas o creativas. Conclusión, algunos buenos motivadores extrínsecos como el dinero pueden no provocar los efectos deseados.

Los jugadores del tipo recolector y de tipo asesino (explicados más adelante) pueden ser muy competitivos y serlo hasta en cosas que no dan recompensa alguna. Pueden llegar a competir con sus compañeros de grupo incluso cuando hay que trabajar junto a otros.

Lo más fácil de realizar es sustituir la motivación intrínseca con alguna recompensa extrínseca. Lo malo es que una recompensa de este tipo puede anular para siempre la motivación intrínseca.

Si con tu sistema empiezas a dar algún tipo de premio extrínseco, como por ejemplo, dinero. Una vez que empieces a darlo tendrás mantener a esas persona en ese ciclo de premios extrínsecos hasta el final.

Page 17: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

17 | P á g i n a

Pero, ¿Por qué jugamos? La mayoría de nosotros nos vemos atraídos a jugar por las siguientes razones, ya sea por una de ellas o por una combinación de varias: Para divertirnos Para socializar Para ver medir destreza Para mejorar y perfeccionar nuestras habilidades

Y la diversión que produce un juego podría asociarse a uno o varios de los siguientes tipos de diversión (Nicole Lazzaro, 2004):

Diversión difícil El jugador intenta ganar algo en una competición.

Diversión fácil El jugador se centra en explorar el juego.

Estado alterado de diversión

El juego tiene la capacidad de cambiar los sentimientos del jugador.

Diversión social En la cual el jugador tiene como principal objetivo interactuar con otros jugadores.

Es necesario conocer a los que van a ser jugadores del juego e investigar a los posibles futuros jugadores que queremos atraer para facilitar las tareas de diseño de un juego, por lo que el tipo de jugador es un conocimiento básico a la hora de crear juegos y sus mecánicas. Como casi en todo campo del comportamiento humano, hay diferencias en cómo nos comportamos unos con otros y a la hora de jugar no es diferente por lo que hay varios tipos de jugador, siendo alguno de estos tipos más comunes que otros:

Exploradores (Apróx. 50%)

Son los jugadores a los que les gusta descubrir todo lo que les ofrece un juego y luego compartir o enseñar sus hallazgos al resto de la comunidad. Para este tipo de jugador la experiencia que ofrece el juego es el objetivo por el que juega.

Recolectores (~40%)

Este tipo de jugador es él quiere alcanzar cualquier meta que el juego le ofrezca. El problema de desarrollar un juego centrado sólo en este tipo de jugador es que es difícil crear un juego donde todo el mundo pueda ganar y acumular victorias. Además son jugadores que si suelen perder, dejan de sentir interés por el juego de forma rápida.

Social (~80%)

Son los jugadores que juegan simplemente por obtener beneficios de la interacción con otros jugadores. No suele estar interesado en ganar o en las mecánicas de juego, no es que no tengan ganas de ganar, pero el hecho de ganar no está en sus metas principales.

Page 18: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

18 | P á g i n a

Asesinos (~20%)

Son los jugadores que no se conforman solo con ganar, necesitan además que alguien pierda y demostrar ante el mayor número de personas su victorias, suelen buscar además la admiración de los que derrota y de terceros jugadores que no se atreven a retarle.

Por supuesto casi ninguna persona es sólo de un tipo y normalmente su forma de jugar es resultado de la combinación de varios tipos de jugador, de ahí que la suma de los porcentajes de tipos de jugador no sume 100%. Conocer el tipo de jugador predominante en nuestro sistema de gamificación nos servirá para diseñar las mecánicas de juego y aumentar las interacciones entre los usuarios del mismo. El algo básico y esencial a la hora de crear las mecánicas de juego desarrollo del sistema, si no se sacan bien las características de los jugadores que van a entrar en el sistema gamificado, este está condenado al fracaso. Lo que sí parece real siguiendo los datos de diferentes libros y webs, es que el jugador de tipo

social es el más común. Este proyecto final de carrera tiene como público objetivo a los alumnos

de prácticas de las asignaturas de Ingeniería Electrónica y de primeras, no se sabe qué tipo de

jugador predomina, por lo que se tendrá que suponer que cumplen la tendencia general hasta

que se les estudie. Aun así se tienen ideas para contentar a cada tipo de jugador en la web:

El jugador social podrá interactuar con otros alumnos a la hora de intercambiar turnos y llegar así a un beneficio mutuo con otros, ya sea ganando monedas o comprando un turno que le interesaba.

El sistema de logros que premia las distintas hazañas que consiguen los alumnos en la plataforma, es una mecánica ideal tanto para el tipo recolector como para el explorador. El primero siempre tendrá algo que hacer cuanto más logros a desbloquear haya y el explorador siempre podrá descubrir hazañas nuevas que luego relatará al resto de compañeros.

Los asesinos y recolectores por su parte tendrán un perfil donde se les muestra lo que van consiguiendo. Los asesinos podrán ver sus puntuaciones y si se implementase un ranking podrían ver su “superioridad” sobre otros alumnos, mientras que los recolectores pueden ver sus hazañas desbloqueadas y tener así una idea del tipo de metas que pueden alcanzar en la plataforma.

Los asesinos podrán hacer uso de la economía virtual que añade la gamificación para perjudicar a rivales directos y no tan directos.

Concluyendo, con estos datos por delante, la mayoría de diseñadores de juegos y videojuegos crean sus productos en torno al tipo recolector, centrándose en su mayoría en mecánicas de juego de recolección de puntos. Poco a poco se van añadiendo, en su mayoría en los videojuegos, mecánicas de juego relacionadas con el jugador social. Lo malo de las mecánicas de juego social aunque gusten mucho, es que hay situaciones que su aplicación no encaja o son muy difíciles de desarrollar incluso conociendo bien al tipo de jugador y el entorno a gamificar.

Page 19: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

19 | P á g i n a

2.3. La gamificación y la enseñanza Uno de los mantras que quiere conseguir la gamificación es que “La diversión es trabajo". Desde hace un par de décadas (80's aprox.) se ha intentado combinar la educación y los juegos para fomentar el interés y la absorción de conocimientos de los alumnos en clase. Un recurso muy utilizado para alcanzar esta unión ha sido el uso de software educativo pero no siempre ha tenido éxito y en muy pocos casos ha funcionado como se esperaba. El principal problema es que los niños que usan este tipo de software en clase se aburren muy rápido de él. Esto es así porque la mayoría de estos programas se realizan basándose en la idea que tienen los padres de cómo sus hijos se divertirían aprendiendo con un ordenador y no al revés que sería ver como sus hijos se divierten con un videojuego y usar esas mecánicas de juego para aprender. Los sistemas de gamificación se encuentran a día de hoy en una situación similar, se sabe que como herramienta funciona, se conocen que procesos y mecánicas atraen a los usuarios, existen numerosos tipos de bonificaciones y aun así e incluso repitiendo una fórmula de algún caso de éxito, el nuevo proyecto puede fallar. El caso es que pasa lo mismo que con el software educativo y es que la gente que los desarrolla, los monta en torno a su idea de cómo el usuario estaría a gusto usándolo, en vez de ver como éste se comporta y usar ese patrón de comportamiento como base para montar todo el entorno. Debido a la popularización del acceso a Internet, la solución más usada en la actualidad para unir estos dos mundos es la creación de una comunidad de alumnos (learners) vía web o red social, e incluir una serie de actividades o mecanismos que actúan como entrenamientos de los alumnos, en una materia. En nuestro caso ya contamos con que los “learners” son los alumnos matriculados en las asignaturas de electrónica donde se va a implementar este proyecto y las actividades (o entrenamientos) son las prácticas de dichas materias, además contamos con una plataforma online donde los alumnos se apuntan a los distintas actividades y en el cual se va a integrar la gamificación que se plantea en este proyecto. La gamificación sirve como apoyo y refuerzo a la enseñanza y no es un sustituto a esta, sólo la complementa y mejora. Al querer implementar un sistema de gamificación en la web de prácticas se necesita "algo" que haga a dicha web atractiva al alumno y fomente su uso. Por lo general el reconocimiento de un estatus, el valorar las pequeñas acciones o que el alumno tenga un rol participativo en la web, son mecanismos que están funcionando bien en diferentes medios educativos online (ej.: Coursera) a los cuales les interesa tener una base de alumnos constantes haciendo sus cursos. Parte de estos reconocimientos vienen dados a base de badges, en este término englobamos todos los elementos que modifican el perfil del usuario cuando este va progresando en el curso. A nosotros nos interesa bastante crear un sistema que una un reconocimiento visual, como puede ser una imagen y una puntuación, por ser una técnica de gamificación de éxito bastante común en el e-learning. Si estos reconocimientos además tienen algún incentivo en clase, por ejemplo elegir turno de prácticas, un aumento de nota o premiar a los mejores con una actividad que no suele darse a lo largo del curso, los alumnos se verán atraídos a completar las diferentes tareas que se pongan con tal de alcanzar dichos privilegios.

Page 20: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

20 | P á g i n a

Otros tipos de recompensas asociadas más al status del jugador que a una recompensa material, están teniendo una gran aceptación y suelen tener coste cero para los que montan estas plataformas de e-learning. Por poner un ejemplo, los alumnos con más puntuación tienen prioridad en las tutorías con los profesores o tienen acceso anticipado a la elección de turnos de prácticas. Estos privilegios sueles ser difíciles de asociar a un valor en puntos, dinero o tiempo invertido, además la tensión e interés por alcanzar esos beneficios no desaparece con la obtención de los mismos, algo que si pasa con las recompensas "materiales”. Los sistemas más avanzados de e-learning no solo motivan al estudio a nivel personal sino que fomentan la mejora de los distintos perfiles de grupo que se formen y al intercambio de información entre ellos. En muy pocos sitios se usan estas técnicas pero todo apunta a que la gamificación en un futuro intentará apelar y desarrollar el sentido de comunidad más que a la realización personal tal y como hacen la mayoría de los sistemas gamificados de hoy en día.

¿Por dónde empezar? Lo ideal es que se sepa exactamente los objetivos que se quiere alcanzar con la gamificación en el proyecto donde se quiere implantar y entender a la audiencia a la que va dirigido. Algunos pasos iniciales son: Tiene que ser social. Tal y como se comenta antes, hay que tener claro que problema se quiere tratar y cómo hacerlo atractivo para que los usuarios lo resuelvan. Si hay incentivos de por medio lo más probable es que la motivación de los usuarios aumente. Por último, la mayoría de sistemas de gamificación son dinámicos, es decir exploran diferentes mecánicas de juego a lo largo del tiempo para no tener aburrido al usuario. La gamificación debe "elogiar" al usuario El perfil del alumno debe reflejar un progreso constante, donde se vea claramente las metas que ha alcanzado y cuales le quedan por alcanzar. Si esto lo combinamos con estadísticas y una interfaz de usuario amigable, junto a una tecnología amigable con el usuario, se está haciendo bien este paso. Mide, ajusta e itera Existen ciertas dinámicas que necesitan ser controladas a lo largo del tiempo y que nos permiten adaptar el sistema a lo largo de la vida de este. La primera es ver si la gamificación está dentro del "pasillo de interés" del usuario, por ejemplo, si algo es muy difícil el alumno se desmotiva, si es demasiado fácil pasa lo mismo por lo que hay que conseguir un equilibrio. Lo segundo es poder controlar y gestionar el feedback que nos de la gamificación, por tercero y último conseguir que la gente se interese en las tareas a largo plazo y no sólo en lo que puede resolver en pocos minutos.

Page 21: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

21 | P á g i n a

Tecnologías que implica un sistema de gamificación

Plataforma con mecánicas de juego

El diseño y la experiencia de uso, junto a los mecanismos que los hacen posible son los 3 factores que forman el esqueleto del proyecto.

Aspectos sociales En la mayoría de plataformas, una forma de añadir mecánicas de juego es usar el factor social: fomentar la colaboración entre alumnos, integrar la plataforma con las distintas herramientas del departamento, crear foros o fomentar el intercambio de compañeros de prácticas pueden ser algunos ejemplos.

Integración Para que el sistema tenga más posibilidades de éxito debe estar bien integrado con el resto de la web, que las mecánicas de juego se alimenten del feedback del usuario y de las recompensas, además debe ser un elemento que se refleje en las actividades que realice en la web de la asignatura y no sólo en la de las prácticas.

Análisis de datos El sistema puede devolver al profesor muchos datos según los diferentes logros que desbloquen los alumnos e incluso por los que no desbloquean. Por lo que si se piensa un sistema estadístico para este feedback se puede comprobar el comportamiento de los alumnos, los conocimientos que asimilan, que materias le son complejas de entender, etc.

Móvil Es importante pero no de máxima prioridad, aunque la tendencia está cambiando a favor de las aplicaciones móviles. Hoy en día el móvil es algo con lo que no salimos sin el de casa por lo que si el sistema se adapta a este formato y se agregan funciones exclusivas a esta versión, es posible extender las mecánicas de juego fuera del escritorio donde se encuentra el PC.

Page 22: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

22 | P á g i n a

2.4. Mecánicas y técnicas de juego Para generar un sentimiento de progreso y mejora en los alumnos es recomendable mostrarles de alguna forma, por ejemplo en sus perfiles o en la propia web de prácticas su progreso y evolución en los objetivos que propone el sistema de gamificación. Esta es la técnica básica de motivación que usan estos sistemas, el recordarte continuamente lo “bien” que estás haciendo las actividades que te indica el sistema. Una barrera de los sistemas gamificados es que el diseño de las mecánicas de juego es demasiado novedosas, por lo que no hay un estándar o metodología tipo. Además como incluye parte de psicología, de creación de sistemas y de ingeniería telemática, hacen que el desarrollo de este tipo de entornos sean aún un poco idealistas y complejos. Lo que si se tiene claro es hay que tener bien definido de que va el sistema y desarrollar alrededor de él y de sus jugadores las mecánicas de juego, no al revés. Para crear dichas mecánicas existe un entorno de trabajo (framework) conocido como MDA:

Mechanics (Mecánicas): realizan las funciones de componentes del "juego"

Dynamics (Dinámicas) Son las interacciones de los jugadores y las mecánicas

Aesthetics (estética) Nos indica cómo se siente el jugador durante esa interacción

Este framework nos sirve para analizar los diferentes elementos del juego, como interaccionan entre sí dichos elementos y cómo es posible aplicarlos a otros campos fuera del mundo del juego. Las mecánicas de juego son las herramientas que usadas de forma correcta nos permiten obtener una respuesta positiva del usuario. Las más usadas y conocidas junto algunos ejemplos son: Puntuación

o Marcador general. o Marcador puntos conseguidos en relación con todos los puntos posibles a conseguir.

Mostrar nivel

o Indicar nivel de usuario respecto al máximo posible. o Crear rangos según nivel. o Mostrar número de seguidores, likes u otro marcador de popularidad o Una barra de progreso

Indica cuantas partes del total has desbloqueado. Indicar cuantas partes de una hazaña en específico has realizado y cuanto

tienes completo de esa tarea. Mostrar cuanto te queda para llegar a un mínimo de calidad (Linkedin y su

medidor de calidad de perfil). Señalar cuanta gente comparte tu opinión, en porcentaje, y cuanta no.

Page 23: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

23 | P á g i n a

Símbolos de hazaña (badges) o Muestran un gráfico relacionado con el evento desbloqueado.

Leaderboards

o Muestran a los mejores en algún campo y hacen que estas listas sean visibles para todos los usuarios.

o Las personas que están/estuvieron en alguna de estas listas suelen tener algún reconocimiento por pertenecer/haber pertenecido a una de estas, ya sea en forma de badge, en diseños exclusivos de sus perfiles o en títulos (como si fueran nobiliarios) que pueden añadir su nombre en su perfil público.

o ATENCIÓN: si el sistema de puntos o badges no está bien calibrado puede desmotivar en vez de animar a competir a la gente ya que si los usuarios en estas listas tienen puntuaciones muy elevadas, y estas puntuaciones son difíciles de conseguir, el resto de usuarios puede rendirse antes incluso de comenzar.

o Uso de Leaderboards locales, es decir que sólo compare al usuario con sus amigos o personas de interés y no con todos los usuarios.

o Indicar victorias o Número de victorias y toda estadística que se quiera asociar a estas.

Retos Onboarding/Alistamiento Bucles de compromiso

Hay que tener en cuenta que por muchas mecánicas que uses y por muy bien que las integres, los usuarios van a intentar explotar al máximo las posibilidades que ofreces. Esto siempre va a ser así, ya que ofreces algún tipo de recompensa (virtual o real), por ello no hay que bloquearse por este motivo en ningún momento, es imposible tener solución para toda la casuística que se pueda dar. Lo mejor que se puede hacer es ir probando el sistema e ir corrigiéndolo sobre la marcha y si además tenemos feedback de los usuarios sobre lo que mejorar, será más fácil contemplar más casos y optimizar el sistema.

Page 24: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

24 | P á g i n a

2.5. Las mecánicas de juego en detalle:

2.5.1. Los sistemas de puntuación Los sistemas de puntuación son importantes, independientemente de cómo se comporte con

los usuarios y el diseñador del entorno. Tampoco importa la forma en que se ideen estas puntuaciones, pero lo que si hay que tener en cuenta es que es una mecánica básica en todo medio gamificado. Tal es su poder que si se desarrollan correctamente se pueden obtener de su uso datos como el comportamiento de los alumnos en el sistema o estadísticas sobre las acciones que realizan o no, o cómo interactúan por defecto con el sistema u otros usuarios. Los sistemas de puntos tienen gran variedad de propósitos y según lo que se puntué hay varios tipos de sistemas de puntuación:

Puntos de experiencia (XP)

Son los más importantes de toda actividad gamificación y no se suelen usar como moneda de cambio en sus entornos gamificados. Sólo están para indicar el rango y mostrar al usuario su progreso. Para que sea una puntuación efectiva en el entorno gamificado, se deben puntuar bastantes interacciones del usuario con estos puntos de experiencia. Estas puntuaciones pueden caducar cada cierto tiempo para poder crear ciclo competitivos y evitar así que los mismos estén siempre a la cabeza en puntuación. Es decir se pueden comportar estas puntuaciones como los puntos de una liga, donde al acabar la competición todos los equipos al siguiente año empiezan a cero puntos. Otro factor fundamental es que no tienen límite superior, es un tipo de puntuación que solamente puede crecer.

Puntos canjeables (RP)

A diferencia de los XP estos puntos se idean para ser canjeados por algo. Suelen ser el núcleo central de los bucles de motivación de los juegos sociales y programas de fidelización. Su principal cometido es que sean usados por el cliente. Estos sistemas implican economías virtuales y suelen asignar nombre a esos puntos como si de una moneda se tratase. Aunque sea virtual, necesita monitorización, gestión y control para aseguran que funciona bien y evitar inflación/deflación o trampas de cualquier tipo asociadas a su uso.

Page 25: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

25 | P á g i n a

Puntos de habilidad

Están diseñados para asignarse a una actividad en concreto y es un sistema de puntuación relacionado pero no determinado por los XP y RP. Suelen ser puntuaciones extras que permiten al jugador ganar experiencia/beneficios por completar tareas alternativas.

Puntos de Karma

Son sistemas de puntuación poco comunes y no se gana nada por tener más puntos de carga, sólo dan un beneficio si se comparten. Por ejemplo dar las gracias en un foro a alguien que te responde una duda sería dar un punto de karma a otro usuario por su ayuda. Otras páginas por ejemplo dan un número fijo de estos puntos a sus usuarios para que estos los usen en votaciones que de verdad les interesen y que se estén discutiendo en dicha página, una vez que se decide sobre esa votación y se cierra ese tema los puntos de karma vuelven al usuario para que los pueda usar en otras votaciones.

Puntos de reputación

Es el sistema más complejo. Cuando se requiere en un sistema gamificado que exista confianza entre dos o más participantes, la cual por norma general no puedes garantizarla o es difícil de mantener. La solución a este problema es el uso de un sistema de reputación con el que se quiere reforzar la credibilidad de los participantes. Un caso de ejemplo es StackOverflow con su sistema de puntuaciones positivas y negativas a las respuestas de otros usuarios. Para votar positivo mínimo tienes que haber participado 10 veces en la web (reputación igual a 10 puntos). Para ganar esos puntos debes participar en la web o que otros usuarios valoren lo que haces. Como solo te permiten votar si tienes 10 o más puntos de reputación al dar tu voto demuestras al resto de usuarios que tienes cierto cache en la red y que te has esforzado para ganar tu derecho a votar.

¿Cómo usar los sistemas de puntuación? Es clave que el sistema de gamificación tenga un desarrollo que gire alrededor de un sistema de puntos de experiencia, con el cual puedas informarte del comportamiento de tus usuarios e informar a estos sobre como lo están haciéndolo de bien en el sistema gamificado. Si se quiere crear una economía virtual, como es nuestro caso, es imperativo el uso de un sistema de puntuación basado en puntos canjeables. Una consecuencia de insertar este sistema es que lo primero que van a hacer los usuarios es ver que pueden conseguir con esta “economía” el mayor beneficio, por lo que si esta ofrece cosas poco realistas o de escaso valor es muy posible que no despierte ningún interés en los usuarios. Los puntos de reputación pueden ser necesarios pero su principal problema es cómo convertirlos en mecánicas jugables, un buen ejemplo de sistema de reputación es el de eBay, en el cual se puntúan varias características del usuario según las compras o ventas que realice, mejorando(o no) la credibilidad del usuario tanto como comprador o vendedor según como varíen dichas valoraciones.

Page 26: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

26 | P á g i n a

Las economías virtuales en estos sistemas suelen gestionarse como la de los países comunistas. La persona que los visitan pueden cambiar su moneda por la local pero le será casi imposible cambiar la local por otra divisa extrajera. Así es como se monetizan muchos juegos gratuitos ya que la gente cambia sus euros por monedas virtuales del juego pero el paso inverso no es posible. Nosotros al no usar dinero tenemos que pensar una economía algo distinta en el que la moneda se obtenga por el trabajo dentro del portal de prácticas. Una práctica cada vez más común es el uso de economías duales, es decir que hay varios sistemas de puntos canjeables a la vez. Normalmente unos puntos son más complicados de obtener que los del otro sistema de intercambio y las recompensas que da son muy diferentes y de más valor. Lo bueno de estos últimos tipos de economías virtuales es que permiten cambiar de forma más fácil el valor de las distintas actividades sin tener que provocar inflación o deflación en todo el sistema. Además de todo esto hay que tener en cuenta la forma de asignar los puntos, un ejemplo de cómo puede variar la asignación de estos, es la que a más nivel se alcance menos puntos se gana por la misma actividad, así se evita la sobre-participación en alguna de las actividades que se pongan en la plataforma web.

A la hora de repartir puntos se tiene que ver qué actividad los da, cuántos puntos se recibirán y cuáles son las ventajas y desventajas de darlos. Por lo general se pueden dividir las recompensas de puntuación en las siguientes categorías:

Recompensas por constancia

Suelen darse cuando el usuario realiza una tarea que requiere un esfuerzo continuo, como por ejemplo ver todos los vídeos de una sección o compartir un enlace con cierto número de personas. En nuestro caso podría ser por asistir a las prácticas, por asistir a cierto número turnos menos solicitados o por completar correctamente todos los apartados de la memoria de la práctica.

Ventajas: Motivan al usuario a realizar

ciertas tareas repetitivas o que son a largo plazo.

Desventajas: El usuario puede conocer como

desbloquear estas recompensas, por lo que su motivación baja al conocer cómo obtenerlas.

Un exceso de este tipo de tareas puede agobiar al usuario por no verse capaz de completar todas.

En el sistema gamificado, las recompensas de este tipo es recomendable que sólo se muestren en parte y se oculten las demás, para mantener al usuario motivado a realizar las tareas. Las recompensas ocultas sólo deben ser visibles al desbloquearlas.

Page 27: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

27 | P á g i n a

Recompensas del día

Son premios que se dan por realizar una tarea específica en un periodo de tiempo limitado. Por ejemplo responder a una pregunta de conocimiento extra sobre la práctica antes de que acabe el día en que se realiza esta tenga un premio que sólo se puede obtener ese mismo día.

Ventajas: Refuerzan el trabajo diario y

fomentan que los usuarios den un poco más de sí.

Desventajas: Si estas tareas no son claras y

variadas la gente se aburrirá rápido de ellas.

Este tipo de desbloqueables suelen mostrarse claramente al usuario para que pueda realizarlas en el periodo establecido. Deben ser variadas, no muy difíciles y de baja puntuación. Pueden ser tareas cíclicas.

Símbolos de hazaña (badges)

Son los símbolos gráficos asociados a las hazañas conseguidas, NO SON PUNTOS

Ventajas: Provocan que la gente quiera coleccionarlos. Si quieren coleccionarlos seguirán usando y progresando en la web.

Desventajas: Un uso excesivo de estos puede hacer que pierdan todo su significado. Hay que dejar bien claro que hazañas desbloquean estos símbolos, sólo puntos o ambas cosas a la web.

El uso de varios sistemas de puntuación dentro del entorno gamificado puede ser beneficioso, permitiendo asignar puntuaciones a diferentes comportamientos del usuario en la web y enfocar al usuario hacia el que más nos interese en cada momento. Por ejemplo se puede tener un sistema de puntos para indicar rango y nivel del usuario y otro sistema de puntos que funcione como moneda de cambio por los turnos de la web. Así se consigue que el usuario mantenga su rango o posición por completar tareas independientemente de que tenga o no puntos para comprar/cambiar turnos. Usar un sistema de puntos para indicar el rango de usuario y otro para comprar/vender los turnos de prácticas parece ser lo ideal a usar en este proyecto. Así con un sistema mantenemos la reputación del alumno y por muchos puntos de compra que gaste, su rango no decrece. Una puntuación que nunca baja y que sólo aumenta, motiva a la gente y eso es algo básico si queremos usar otros elementos como los leaderboards.

Page 28: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

28 | P á g i n a

Equilibrar las puntuaciones Según lo que se quiera puntuar habrá que darle más puntuación a unos eventos que a otros. En nuestro caso nos interesa que los alumnos se repartan en los distintos grupos y que no se concentren solo en unos turnos concretos, tal y como muestran las estadísticas de años anteriores. Por ello los turnos menos apetecibles son los que más puntos darían por asistir o serían los más baratos de comprar u ambas cosas a la vez. A la hora de repartir las puntuaciones debemos tener claro los objetivos que queremos alcanzar con el sistema gamificado. Por eso si queremos que los alumnos se repartan por los turnos menos populares, habrá que incentivarles a que se apunten a esos turnos, si además queremos que la gente intercambie sus turnos mediante compra/ventas a través de la plataforma, también se debería dar puntos por realizar estas transacciones, etc. Resumiendo hay que crear una escala descendiente en puntuación con las interacciones, logros o eventos que se quieren puntuar, dando mayores puntuaciones a las hazañas que más fomenten el alcance de los objetivos que se quieren conseguir con el sistema gamificado.

¿Qué debemos puntuar? Esta parte es una de las más críticas, ya que con ella hay que conseguir que los alumnos se motiven a usar el sistema de gamificación y que así se alcancen los objetivos, como puede ser el mejor reparto de los alumnos por los distintos turnos de prácticas. Estas puntuaciones hay que ordenarlas luego de mayor a menor según importancia para indicar su dificultad y ver las puntuaciones que van a tener de bonificación. Debe de haber un valor mínimo de puntos para gastar y con el que todos los alumnos comienzan. Así todos los usuarios tienen derecho a asistir a uno o varios turnos de su elección independientemente del valor de estos turnos. También habrá que dejar los turnos menos apetecibles a valor cero y así siempre haya turnos accesibles aunque no se tengan puntos para gastar. Lo visual gusta, por tanto no sería mala idea que alguna de las acciones que puntuemos tengan alguna imagen y texto asociados como una recompensa extra a la puntuación que por defecto dan.

Page 29: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

29 | P á g i n a

Algunos ejemplos de tareas que podrían dar puntos:

Asistencia a practica El alumno recibiría puntos para mejorar su rango y puntos para poder comprar turnos. Cuanto menos popular sea el turno al que asista más puntos recibe de ambos.

Intercambio de turnos

Por diferentes transacciones o traspasos de turnos entre alumnos se puede dar puntos de rango y puntos de compra

Entrega de memorias Si las memorias están completas y correctas se puede dar puntuaciones que reconozcan este trabajo bien hecho

Asistencia a varios turnos "malos"

Por ejemplo si un alumno va tres veces seguidas a un turno nada popular se le puede recompensar por ello. Esta sería un ejemplo de hazaña por constancia de las antes comentadas.

Pregunta/s tipo test vía web

Para hacer algo más participativa la web, las prácticas podrían tener una o varias preguntas tipo test que si se contestan bien, dan puntos. Este proceso debe pensarse para que sea totalmente automático y que nadie tenga que corregir dichas preguntas.

2.5.2. Niveles

Con los niveles principalmente se quiere indicar el progreso del jugador, eso sí, para gamificar un entorno no podemos aplicar los niveles como en un videojuego, aunque puede servirnos de inspiración para llevar a cabo nuestras ideas de diseño de niveles del usuario. Estos niveles sirven para indicar la puntuación, rango, destreza u otra cualidad que se quiera destacar del jugador en su perfil público y privado, además de indicarle donde se encuentra en el progreso de las actividades que el sistema de gamificación le propone. En el diseño de niveles, la dificultad de pasar de nivel no debe ser ni lineal ni exponencial. Debe ser semialeatorias y que no sea sencilla de descifrar dicho mecanismo de subida por parte del usuario. En los sistemas gamificados de hoy en día se diseñan los niveles más simples primero y se va avanzando progresivamente sobre el diseño de los niveles más complicados una vez los simples estén bien integrados y los participantes los alcancen. El nivel por lo general indica la dificultad del juego o es un elemento que muestra el liderazgo del alumno sobre el juego, por lo general se usa como una marca pasiva que da más profundidad y complejidad al sistema. Lo que se debe tener claro es que el sistema de niveles debe ser lógico, expandible y flexible, por lo que puede variar con el tiempo todo el sistema de niveles que montes por ejemplo para adaptarlo a las exigencias de tus usuarios.

Page 30: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

30 | P á g i n a

Un elemento que está adquiriendo fuerza a la hora de indicar nivel, son las barras de progreso. La mayoría de estas indican, mediante porcentajes, lo cerca que están de completar el "juego". Se usan principalmente con los nuevos usuarios para que estos completen una serie de formularios o para crear una relación más profunda entre el usuario y el entorno. En el sistema pueden convivir perfectamente un sistema de niveles y las barras de progreso ya que son elementos complementarios y nada excluyentes entre sí. Lo mejor de estas barras es que la gente cree que se puede llegar al 100% algo que es imposible en las que están bien diseñada, esto se hace así para que el usuario siempre tenga una motivación a superarse. Si se va a hacer una representación de los niveles de forma gráfica, NO USAR representaciones literales o dibujos. Suele ser más efectivo el uso de colores. Claro está que esto depende del entorno en donde se desarrolle pero para dar un poco de seriedad es mejor olvidarse de las imágenes para indicar rangos.

2.5.3. Leaderboards o rankings

Su principal propósito es la comparación. Usualmente son elementos muy claros que no hacen falta explicar a los usuarios. Se suelen presentar como una lista ordenada por puntuaciones en las que también se muestra el nombre de usuario o nickname de este.

Tipos de Leadeboards.

Las no incentivas Este concepto ha surgido con fuerza desde la aparición de juegos con un factor social elevado. Son herramientas que se usan para incentivar dichos valores sociales. Algo tan simple como que aparezca siempre el jugador en medio de la lista del leaderboard, sea cual sea su posición y poner por debajo a los que casi le igualan y por encima a los que está a punto de alcanzar es el objetivo que pretenden las de este tipo. Es una lista que siempre te invita a mejorar en el juego.

La infinita Son leaderboards en las que una vez entras nunca sales. Si tu puntuación entra dentro de la lista y es superada por otros, retrocedes puestos pero sigues apareciendo en la lista. Por ejemplo hay muchos juegos árcades que tienen rankings de los cien mejores pero si eres el 101 nunca aparecerás, con este concepto de lista aparecerías el 101 ya que esta no expulsa a ningún jugador. Este tipo es ideal para mantener en activo a los usuarios más competitivos ya que pueden ver reflejadas sus mejoras de puntuación en escaladas de puestos. Sólo tienen sentido si el número de participantes es muy elevado.

Page 31: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

31 | P á g i n a

2.5.4. Badges

Son elementos que se usan para indicar status, fuera del mundo gamificado se usan desde antaño y un ejemplo claro sería el de las marcas. Según que marca uses es muy probable que se te asocie una clase social o nivel económico. Además estas marcas y sus series de un mismo producto, pueden indicar un subnivel dentro de una clase social asociada a la marca. Por ejemplo al comprar un ordenador de una marca X, si esta marca tiene varias gamas con exactamente el mismo producto: la Acces, la Medium y la Pro, es muy probable que otros te asocien a un nivel más alto solo por usar la Pro, aunque el producto en las tres gamas sea igual. Otro ejemplo claro de lo que es un badge son las insignias de cualquier tipo, ya sean militares de reconocimiento al mérito, de empleado del mes, etc. Son símbolos que indican que la persona que los posee ha alcanzado un rango que pocos consiguen, por lo que poseen una evidencia que los hace distintos al resto de la población. Este tipo de reconocimiento social a través de símbolos es el que se intenta exportar a los sistemas gamificados con el uso de badges. A la mayoría de las personas les gusta recibir badges por casi todo y por cualquier razón. A otros les gusta simplemente coleccionar todo lo que pueden y hay gente que les gustan las recompensen por cosas inesperadas. Estos elementos son los más clásicos de la gamificación y son de los que mejor funcionan para promocionar un producto o servicio. Además se pueden usar para indicar al jugador que esta completado los objetivos o que progresa adecuadamente en el sistema. Pros y contras de su uso En algunos sistemas se pueden usar como indicadores de nivel, como si condecoraciones del ejército se tratasen. Por otra parte un exceso de "condecoraciones” puede devaluar el valor de las mismas y provocar un efecto de rechazo a obtenerlas. FourSquare es el ejemplo más claro de uso de badges y ha conseguido que sus numerosas insignias no se devalúen, esto lo han conseguido al añadir incertidumbre a la forma de obtenerlas, es decir el patrón de obtención de muchas de ellas no queda claro y por tanto son una sorpresa para el usuario cuando las desbloquea, siendo este hecho un refuerzo positivo para que el usuario siga usando esta aplicación. Otra técnica muy frecuente es el hacer rangos en las condecoraciones, por ejemplo al realizar una serie de actividades se desbloquea el badge en su nivel más bajo y mientras se va mejorando en esas tareas se va subiendo de nivel esa condecoración hasta alcanzar su máximo. Tal y como se comentaba al inicio de este apartado, el uso de badge que no dejen claro cómo se desbloquean, añadiendo así incertidumbre al sistema, apelan a la curiosidad de cada uno para que sigan motivados a usar la plataforma.

Page 32: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

32 | P á g i n a

2.5.5. Onboarding o reclutamiento de usuarios

Es la acción de conseguir nuevo usuarios en el sistema. En un sistema web como es el nuestro, si quisiéramos que más gente se uniera, es crítico que el primer minuto que pasen en nuestra plataforma sea lo más atrayente posible ya que en ese minuto, es cuando más decisiones toman el nuevo usuario usuarios. En el "primer minuto", lo más recomendable es que el futuro usuario experimente el sistema en vez de bombardearle con dibujos, gráficos y explicaciones de cómo funciona. Después de esa primera experiencia es cuando se le pide el registro, ya que pedir de primeras el registro es algo que sigue provocando que mucha gente deje automáticamente la web. Si además se ofrece algo de valor en ese primer minuto, como badges o elementos virtuales, el registro en la plataforma es mucho más probable que ocurra. Por el momento esta mecánica no es de nuestro interés ya que los usuarios serán los alumnos de la asignatura, ni uno más y ni uno menos. Se podría tener en cuenta si se plantea en el futuro abrir una plataforma de enseñanza abierta.

2.5.6. Bucles de fidelización

Para un diseño óptimo del sistema, el diseñador del mismo debe tener muy claro como comprometer al usuario a utilizar el sistema, porque este puede dejar de usarlo y lo más importante, el por qué un usuario que abandonó el sistema vuelve a usarlo de nuevo. En un bucle de compromiso está basado en lo social, usa las emociones para motivar al usuario a seguir usando la plataforma gamificada. Además todos los progresos y recompensas del mismo giran en torno a esas emociones. Así se forma un bucle retroalimentado del uso del sistema por parte de los usuarios. Para crear bien este bucle lo debemos dividir en varias partes:

1. ¿Qué motiva al alumno a usarlo? 2. ¿Qué actividad es la que le "llama" a más personas a participar? 3. ¿Qué provoca que se re-enganche al sistema? 4. La visibilidad de su progreso/recompensas

Estos cuatro puntos puede que necesiten preguntarse más de una vez dependiendo del tipo de usuario de la plataforma. Un usuario ocasional dará un perfil distinto al de un usuario asiduo o experto del sistema, por lo que sus bucles pueden ser completamente distintos.

Page 33: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

33 | P á g i n a

2.5.7. Retos y “misiones”

Este tipo de actividades dan un objetivo y le dicen al usuario como debe continuar o que cosas debe enfrentar en el entorno gamificado para mejorar. En muchas ocasiones la gente se une a los juegos sin saber de qué van o cuáles son sus objetivos, por lo que eventos como estos, aunque no sean la actividad principal del juego, añaden profundidad y significado a lo que hace el jugador en el juego. Lo que se quiere conseguir con ellos además, es que haya siempre algo que hacer o completar y que el jugador tenga siempre algo que experimentar dentro del sistema. Misiones cooperativas: Son una serie de actividades que pretenden fomentar una experiencia entre un conjunto de personas y por lo general son actividades difíciles de diseñar. Al realizarse en grupo, se diferencian de los retos clásicos, los cuales se dedican a fomentar la superación personal y no grupal como estas misiones cooperativas. Por su difícil diseño, lo más práctico es crear un conjunto de retos pensados para un solo jugador y hacer que evolucionen a actividades cooperativas. Si el número de usuarios es grande no es nada descabellado el añadir actividades de este tipo para mejorar el factor social del sistema gamificado.

2.5.8. Feedback

Es la información que se devuelve al usuario y que les avisa de donde está en cada momento en el progreso total del sistema. Si los puntos del usuario crecen, el jugador tendrá claro que va por el buen camino. Junto con los niveles y otras mecánicas de progreso nos permiten dividir el objetivo básico del sistema en subtareas más fáciles de completar para los usuarios. La visibilidad de este feedback es parte importante de todo sistema gamificado. Si no hay un recordatorio de progreso cuando el objetivo es largo y complejo el jugador puede bloquearse y abandonar. En temas relacionados con la educación y la salud este feedback es de lo más importante del sistema ya que la puntuación queda completamente ligada al progreso en la actividad.

Page 34: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

34 | P á g i n a

¿Qué mecánicas/dinámicas se usan? Antes de hacer una lista "a lo loco" de posibles mecánicas y dinámicas hay que pensar cómo se van a usar de forma creativa y adaptada a nuestros objetivos. Además se pueden combinar entre ellas para obtener nuevos resultados o mecánicas diferentes y exclusivas de nuestro sistema. Las mecánicas/dinámicas que se suelen usar son:

Reconocimiento de patrones Es la dinámica asociada al hecho de descubrir un funcionamiento del sistema. Una vez se detecta un patrón, los jugadores tiendes a organizarse alrededor de ellos y se sienten recompensados por el simple hecho de haberlos descubierto.

Juegos de memoria Combinación de elementos Perfección del uso de una

economía virtual

Coleccionismo Es un instinto humano que tiene diferentes razones para manifestarse:

1. Conocimiento y aprendizaje 2. Relajación y reducción del stress 3. Placer personal 4. Integración con otros coleccionistas 5. Competitividad 6. Reconocimiento por parte de otros 7. Altruismo 8. Deseo de poder, posesión y sentirse superior 9. Nostalgia o apego histórico 10. Acumulación y diversificación de las riquezas

Colección de objetos

virtuales Número limitado de

"unidades" Premiar comportamientos

solo en un periodo temporal.

Mecanismos de intercambio

Sorpresa y placeres inesperados El mundo real está lleno de sorpresas inesperadas en el día a día por lo que reflejar algo similar en nuestro proyecto puede ser muy buena idea

Mecánicas de "máquinas

tragaperras" Objetos ocultos, Easter

Eggs, por localización. Dinámicas inesperadas

(semialeatorias).

Posesión y/o control del orden Muchas personas sienten la necesidad de organizar y ordenar sus cosas y entorno en lotes que puede controlar y modificar. Suelen ser mecánicas que reciben su premio al final de un nivel.

Retos de tiempo, trabajo o

de pensar Ordenar según

características similares Organizar a los distintos

grupos de personas existentes

Page 35: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

35 | P á g i n a

Regalos El acto de regalar está presente en cualquier cultura, es un acto complejo y con diferentes connotaciones según con qué punto de vista se mire. Es un mecanismo útil para el reclutamiento y la promoción, no tienen por qué ser caros pero si que deben ser sencillos y divertidos.

Objetos virtuales de fácil

intercambio Recomendar regalos y

recordatorios Puntos de karma

Reconocimiento de logros Ser reconocidos por nuestros actos es algo inherente a la mayoría de seres humanos. Estos reconocimientos se pueden expresar de muchas formas distintas y variadas.

Badges Trofeos Concursos y competiciones

Liderar a otros Muchas personas evitan las actividades de liderazgo pero aquellos a los que les interesa ser el cabecilla se ven recompensados de forma más plena por actividades que fomenten este carácter

Retos cooperativos o

basados en equipos Niveles asociados con el

liderazgo

Obtener atención, popularidad Como reconocimiento de los logros de cada uno, la popularidad y fama son incitadores de gran importancia. La fama requiere una serie de acciones para poder avanzar y obtenerla aunque a veces es posible que una sola acción de la fama que se busca.

Leaderboards basadas en el

feedback de los usuarios, puntuación y promoción

Entrega de premios, espectáculos y concursos

Grandes oportunidades y promociones

Adquisición de un status Muchas de nuestras acciones se guían por el status y forman parte esencial de nuestras relaciones con otros. Incluso los antisistema tienen rangos y escalafones por lo que nadie se libra de las jerarquías.

Privilegios Acceso prioritario Unidades limitadas

Cuidado y mantenimiento No es aplicable a todos pero muchos ven un gran interés en el cuidado y mantenimiento de elementos, seres o actividades que desaparecerían si no se protegen. Se puede aplicar esta tendencia a un sistema gamificado.

Puntos que caducan Estrategias piramidales Mecánicas a lo

"Tamagochi"

Page 36: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

36 | P á g i n a

2.6. Ejemplo de sistema educacional gamificado: Duolingo

Para ver un caso práctico y de éxito de un sistema gamificado/ludificado en el entorno de la

educación, la página que enseña idiomas de forma gratuita, Duolingo, es un claro ejemplo de

cómo se deben hacer este tipo de sistemas y hasta donde se pueden extender.

Al entrar en esta aplicación web como usuario accedes a tu perfil de estudiante, que será similar

a la siguiente imagen:

Ilustración 2 Imagen de lo que se encuentra un usuario de Duolingo nada más acceder a ella

En la parte superior de la imagen se puede una barra azul, que siempre es visible y que contiene

el nombre de la web y los menús con las diferentes acciones que pueden realizar los usuarios.

Esto es común a muchas web y aplicaciones web pero lo que no es tan común son los elementos

que se encuentran en la parte derecha los cuales dejan claro que estamos ante un sistema

gamificado. Los hexágonos rojos y las llamas naranjas que ahí se muestran son las monedas de

la web y con la que sus alumnos pueden comprar ventajas o accesorios por lo que ya podemos

ver que Duolingo cuenta con un sistema de puntos canjeables. Para terminar con los elementos

de esta barra podemos ver que hay una bandera y una campana, la primera le recuerda al

usuario el idioma que está aprendiendo y la segunda representa las notificaciones que tiene

pendientes (si hay un número al lado de la campaña es que tiene notificaciones pendientes),

Ambos iconos son recordatorios y sirven para mantener la atención del usuario.

Debajo de la barra comentada anteriormente podemos ver que la página se divide en dos

columnas. En la columna izquierda se muestran las tareas y lecciones que debe realizar el

usuario para aprender el idioma y ganar puntos y monedas. Estas tareas además tienen niveles

de masterización que caducan con el tiempo, por lo que tú estatus en estas tareas se pierde

con el tiempo, motivando al usuario a repetirlas si quiere mantener su nivel.

Page 37: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

37 | P á g i n a

Otra cosa que se ve clara es que estas tareas están agrupadas en secciones pequeñas y que

varias de estas secciones forman un nivel de dificultad. Una tarea puede centrarse en aprender

palabras sobre la comida y esta tarea sobre comida formar parte del nivel básico de dificultad.

Por lo que este sistema cuenta con diferentes rangos de complejidad y subdivide sus enseñanzas

para que los alumnos no tengan dificultades para aprenderlas.

En la columna de la derecha podemos ver un perfil del progreso del usuario. En él aparece su

experiencia (sistema de puntuación por experiencia, siempre de valor creciente) y su nivel. En

esta zona se recuerda siempre al usuario como está progresando y cuanto le queda para

alcanzar el próximo nivel o status dentro del aprendizaje del idioma que ha elegido. Además

cuenta con un elemento que le reta a mejorar, ese elemento es el botón que le dice siempre

que si quiere “reforzar sus unidades”, con este elemento se le esta insinuando siempre al

jugador que no es perfecto y que tiene que mejorar continuamente.

Debajo de este perfil está el bloque social, en él se compara al usuario con sus amigos y se

muestra un ranking con que amigos te superan en puntuación y a cuales has superado. Es el

leaderboard de esta página y además es el factor social que explota, la competición con otros

usuarios conocidos.

Page 38: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

38 | P á g i n a

3. Desarrollo

Page 39: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

39 | P á g i n a

3.1. ¿Qué se quiere desarrollar con este proyecto?

Con él se pretende actualizar la web de prácticas de ciertas asignaturas del departamento de

Ingeniería Electrónica, dicha web lleva en funcionamiento varios años y por ello se quiere añadir

nuevo contenido y funcionalidades. Con este proyecto se implementará en el sistema ciertas

técnicas de gamificación, para evitar ciertos comportamientos de los alumnos a la hora de

reservar prácticas y que estos usen dicha web para algo más que reservar su turno en prácticas.

Este proyecto es un primer paso para convertir las prácticas del departamento en un sistema

completamente gamificado. Se va a integrar con él unas pocas de las funcionalidades que se

pueden introducir con la gamificación, como por ejemplo un sistema de puntuaciones, una

economía virtual sencilla o recompensas en formas de logros, puntos y badges para

recompensar a los alumnos por terminar ciertas tareas.

3.2. Partes que forman el sistema y como se relacionan

entre ellas

El sistema que plantea el proyecto consta de dos bloques principales. El primero es la web

accesible para el alumno (que le muestra el entorno gamificado) junto a la zona de

administración que permite gestionar a los profesores, las funciones añadidas con la

gamificación. El segundo bloque es la base de datos que controla las tablas donde se guardan

los resultados de las distintas operaciones que realizan tanto alumnos, como profesores, en las

distintas partes de la web.

La web y la base de datos se comunican de la siguiente forma: todo cambio que quiera realizar

un usuario de la web se enviará mediante un formulario al servidor, si se comprueba que el

formulario es correcto, la base de datos actualizará sus valores con lo indicado en el formulario.

Por otro lado, cuando el sitio web necesita una serie de datos, este se los pide mediante

consultas mysql a la base de datos.

Se podría considerar un tercer bloque, el bloque de la gamificación. Lo que pasa es que este no

es un bloque que se pueda realizar a parte y luego relacionarlo con los dos anteriores mediante

formularios o consultas, sino que es una serie de funcionalidades y modificaciones que afectan

a los dos anteriormente descritos.

Por último el diseño de la plataforma se puede escindir como un bloque independiente. La teoría

de la gamificación antes comentada, deja claro que la forma con la que se presenta el entorno

gamificado a sus usuarios influye bastante a la hora de que estos quieran usarlo. En este

proyecto no se considera al diseño como objetivo principal ya que las habilidades artísticas de

cada uno son subjetivas y estas no son fundamentales para demostrar los fundamentos de

ingeniería que quiere mostrar el proyecto. Simplemente se ha actualizado un poco y por ello no

se convierte en un bloque a parte en este proyecto.

En futuras ampliaciones sería interesante contar con conocimiento y personal relacionado con

las artes gráficas que sepan diseñar una web con iconos, estilos y badges relacionados con la

ingeniería electrónica, para potenciar así el efecto producido por la gamificación del entorno.

Page 40: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

40 | P á g i n a

3.3. Cambios que se aplican a las partes que forman la web

Debido a que estos cambios afectan tanto a profesores como alumnos, en ambas secciones de

la web se van a introducir novedades. En la parte accesible por los alumnos se incluirá un perfil

donde pueden ver sus datos, puntuaciones y recompensas desbloqueadas, además desde este

perfil podrán poner a la venta los turnos que han reservados para que otros alumnos puedan

comprarlos.

Como se espera una actividad comercial con el intercambio de puntos, se implantará una página

donde el alumno puede ver los turnos que otros han puesto a la venta, controlar sus turnos en

venta y ver las contraofertas que le hagan otros alumnos. Es decir todo alumno tendrá acceso a

una especie de mercado donde puede comprar, vender y hacer ofertas con los turnos de la web

que tiene en su posesión.

Por el otro lado, los profesores desde la administración podrán crear las recompensas a los

comportamientos de los alumnos en la web de prácticas gamificada. Pueden elegir a que

práctica asociarlas, que puntuaciones van a dan, la cantidad de monedas virtuales que recibirá

el alumno y además serán editables por si se quiere cambiar alguna cosa de esa recompensa.

Todo ello para premiar y fomentar ciertos comportamientos del alumno dentro del entorno

gamificado y aumentar la participación de este en la web. Por el momento sólo serán puntuables

unas pocas acciones pero el sistema permite ampliaciones, en futuras versiones se pueden

integrar más comportamientos a recompensar.

Algunas de estas recompensas que el profesorado cree, podrán tener asociados algunos

contenidos extra. Estos contenidos también serán seleccionados por ellos y podrán modificarlos

más tarde si quieren. Al final de esta memoria se adjuntará un manual de usuario para que todas

estas ideas explicadas en este pequeño modelo del sistema gamificado, queden más claras,

sobre todo para los profesores que son los que van a usar las nuevas funciones de la zona de

administración.

Se requiere tanto de conocimientos técnicos relacionados con las aplicaciones web y bases de

datos, como de la psicología asociada a los juegos. Se necesita conocer como juega el ser

humano para poder desarrollar a continuación las técnicas y mecánicas de juego que se van a

aplicar con la gamificación.

En este proyecto, por ejemplo, uno de los objetivos es conseguir que los alumnos se repartan

mejor por los diferentes turnos de forma que el mayor número de alumnos estén contentos con

su reserva. Si el alumno tiene posibilidad de hacer compra-venta de estos turnos tiene más

posibilidades de conseguir hacerse con el turno deseado por lo que tiene así un motivo extra

para utilizar algo más la web de prácticas.

Después de evaluar este “mercado” de turnos como una mecánica de juego valida, se pensó en

crear una economía virtual sencilla donde los alumnos pueden apuntarse, borrarse, comprar,

vender y hacer contraofertas de los distintos turnos que estén en ese “mercado” mediante el

intercambio de una moneda virtual, la cual pueden obtenerla mediante la venta de sus turnos o

por desbloquear recompensas del sistema gamificado.

Page 41: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

41 | P á g i n a

Esta idea luego se traduce en la parte técnica en la creación de diferentes páginas web, funciones

en código de programación, en la gestión de una base de datos y de las relaciones entre las

tablas de dicha base.

Concluyendo esta pequeña descripción de los cambios que añade el proyecto, queda claro que

para poder ampliar la web de prácticas con la gamificación, se necesitará un entorno de

desarrollo que pueda llevar a código las mecánicas de juego que se concluyan más aptas para

los alumnos, basándose en su perfil mental y en la psicología asociada a los juegos. Además debe

permitirnos poder añadir un interfaz de usuario amigable con el alumno ya que este será lo que

va a ver el alumno cuando use la web. Por tanto, será necesario mezclar la psicología, la

ingeniería y algo de diseño web para desarrollar este proyecto.

Page 42: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

42 | P á g i n a

3.4. Herramientas utilizadas en el desarrollo del proyecto

Tal y como se ha explicado en apartados anteriores del desarrollo del proyecto, se necesitan

conocimientos técnicos y alguna que otra idea sobre la psicología humana. En cuanto a esto

último este trabajo se apoya en las ideas y técnicas expuestas en el estado del arte de los

sistemas gamificados por lo que en este apartado no se volverá a explicar de nuevo, más bien

en esta sección se explicará el entorno de desarrollo utilizado y como este se puede replicar en

otros equipos por si se quiere modificar el código o alguna funcionalidad en futuras versiones o

revisiones.

El entorno de desarrollo elegido es LAMP (Linux, Apache, Mysql, PHP) ya que nos permite

probar en él tareas de cliente-servidor con Apache, programar mediante PHP el

comportamiento del servidor a las acciones que reciba desde la web y manejar bases de datos

mysql.

El sistema operativo donde se ejecuta este entorno de desarrollo, es Linux (distribución Ubuntu).

Existe la posibilidad de ejecutar este entorno en Windows (WAMP) pero tiene mucho menos

soporte y recursos que el entorno disponible en Linux, por esta falta de soporte y recursos en

Windows, se ha optado por el entorno LAMP.

3.4.1. Instalación del entorno LAMP

Antes de nada será indispensable tener un terminal con Linux instalado, preferiblemente con

la distribución de Ubuntu más actual, para poder tener un entorno LAMP. Para instalar Ubuntu

simplemente hay que seguir los pasos que se indican en la propia página de Ubuntu. El único

problema conocido es que varias distribuciones de Linux no son compatibles con Windows 8

debido a que este es un sistema operativo firmado por lo que una vez instalado Windows 8 si se

instala en otra partición del disco duro un SO sin firmar, el bootloader lo ignorará y no se podrá

arrancar dicho SO sin firma. A causa de este problema si se va a usar Windows 8 y Linux, es

recomendable crear una imagen virtual de Linux en esta versión de Windows.

Una vez que tengamos Ubuntu u otra distribución de Linux, el resto de los componentes del

entorno se instalarán desde este sistema operativo a través de su terminal, ejecutando en él una

serie de comandos según lo que se quiera instalar.

Lo primero que hay que hacer es actualizar cualquier paquete ya instalado previamente en

nuestra distribución de Linux, para ello hay que ejecutar el siguiente comando en el terminal:

apt-get install update

Lo siguiente será instalar PHP y Apache para que nuestro equipo sea capaz de utilizar dicho

lenguaje a la hora de desarrollar el entorno y se pueda hacer en él las pruebas de servidor. A día

de hoy están disponibles tanto la versión 4 como la 5 de PHP. Según la versión de este lenguaje

que se vaya a instalar, se debe ejecutar uno de los siguientes comandos:

PHP 4:

apt-get install apache2 php4 libapache2-mod-php4

PHP 5:

apt-get install apache2 php5 libapache2-mod-php5

Page 43: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

43 | P á g i n a

Para comprobar que la instalación ha sido correcta y que php funciona sin complicaciones en el

equipo, basta con crear un fichero php con un editor de texto a elección del desarrollador, que

nos sirva de prueba. Por ejemplo crear el fichero test.php con el siguiente código:

# test.php

<?php phpinfo(); ?>

Una vez guardado este fichero, solo falta ejecutarlo en un navegador web (con arrastrar el

fichero sobre el navegador es suficiente). Si todo fue bien en la instalación el navegador web

debería mostrar la configuración PHP del equipo.

Como necesitamos manejar bases de datos en el proyecto, se ha decidido usar las de tipo mysql.

Para poder usar estas bases de datos ejecutamos las siguientes líneas de código por el terminal:

Si usas PHP 5:

apt-get install mysql-server mysql-client php5-mysql

Si usas PHP 4:

apt-get install mysql-server mysql-client php4-mysql

Por último necesitamos instalar un gestor de bases de datos y configurar mysql. Por su sencillez

de manejo, facilidad de instalación y sencilla configuración bajo apache se va a usar como gestor

de bases de datos a PhpMyAdmin, este se instala con el siguiente comando:

apt-get install phpMyAdmin

Mysql por defecto crea un usuario root sin contraseña. Por motivos de seguridad es necesario

es necesario configurarlo de una forma distinta a la que viene por defecto. Ejecutando los

siguientes comandos por el terminal de Linux cambiamos la contraseña por defecto del usuario

root, si durante la instalación de mysql no lo hemos podido hacer:

mysql -u root

mysql> USE mysql;

mysql> UPDATE user SET Password=PASSWORD('new-password') WHERE user='root';

mysql> FLUSH PRIVILEGES;

Los dos primeros comandos sirven para acceder a mysql como usuario root. El tercer comando

actualiza la contraseña del usuario root (‘new-password’ es donde escribimos la contraseña que

queremos). El último comando sirve para controlar los privilegios del usuario root.

Page 44: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

44 | P á g i n a

3.4.1.1. Problemáticas que pueden surgir después de realizar la

instalación:

Por tema de permisos de usuario a la hora de instalar nuevo software en la distribución

de Linux, es muy posible que tengas que usar los comandos anteriores precedidos por

la palabra sudo. Gracias a esta palabra indicamos que queremos que se ejecute el

comando con permisos de superusuario. Lo más común es que nos pida la contraseña

del usuario administrador del equipo antes de ejecutar nada.

Para activar apache, necesitamos ejecutar el siguiente comando:

sudo /etc/init.d/apache2 start

Si queremos parar el servidor apache

sudo /etc/init.d/apache2 stop

Sí solo queremos reiniciar

sudo /etc/init.d/apache2 restart

Por defecto apache realiza operaciones en el directorio /var/www, este directorio es

posible que tenga muchos permisos denegados por lo que la solución más simple para

evitar problemas de permisos es cambiar este directorio por defecto a uno donde

sabemos que se tienen todos los permisos. Para ello editamos DocumentRoot en la

configuración de apache. Para editar la configuración mediante el terminal de Linux:

sudo nano /etc/apache2/sites-enabled/000-default

Luego la ruta de DocumentRoot la cambiamos a la del directorio que nos interesa.

Después de guardar esta modificación hay que resetear el servidor apache.

3.4.2. Motor de plantillas Smarty

Smarty es un motor de plantillas para PHP que facilita la separación del código PHP del

HTML/CSS. Esta separación se traduce en que habrá dos ficheros relacionados donde antes sólo

había uno con el código PHP y HTML/CSS. Uno de estos ficheros guardará la lógica PHP (.php)

mientras que el otro será la presentación de esta lógica (.tpl).

Una de las ventajas de usar Smarty es que al separar los lenguajes de la lógica y de la

presentación el código resultante es más fácil de interpretar y no es tan caótico al programar

como pasa al mezclar código PHP y HTML en un mismo fichero.

Page 45: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

45 | P á g i n a

Ilustración 3 www.smarty.net

A la hora de desarrollar una plantilla con Smarty se puede ver que su programación es muy

similar a la que realizaríamos con HTML, sólo que con este motor existen unas etiquetas

representadas entre corchetes: etiqueta /etiqueta, con las que se llama a la funciones

específicas de Smarty. Estas etiquetas cumplen muchas funciones que se podrían hacer con php,

pero gracias a ellas, es mucho más difícil que un error php afecte a la vista o que la vista muestre

más de lo que debería ya que estas etiquetas separan la lógica php de la presentación.

3.4.2.1. Instalar Smarty en el equipo

Una vez descargada la versión de Smarty que interese, se descomprime y se copia todos los

archivos obtenidos en /usr/local/lib/php/Smarty/. Si hay problemas a la hora de copiar los

archivos, comprueba que tienes los permisos necesarios en las distintas carpetas y usa sudo

delante de todos tus comandos para obtener los permisos de superusuario.

Si todo fue bien, debe quedar la siguiente estructura dentro de la carpeta:

Ilustración 4 Archivos y carpetas que se crean si Smarty se copia correctamente

3.4.2.2. Configurando Smarty en el proyecto

A la hora de crear el proyecto o replicarlo en otro equipo hay que tener en cuenta que Smarty

tiene una serie de requisitos dentro de la carpeta donde está el código del proyecto.

Obligatoriamente exige la creación de cuatro carpetas dentro del directorio raíz del proyecto

donde se quiere usar Smarty. Estas carpetas son las siguientes:

templates: Aquí se guardarán las plantillas. Todas estas plantillas se guardan con el

formato .tpl, cuya estructura es similar a la de un documento HTML, la única diferencia

tal y como se comentaba antes es que el uso de las etiquetas está permitido en ellas.

Hay que recordar que absolutamente todos los archivos .tpl desarrollados deben estar

dentro de esta carpeta.

templates_c: Smarty guarda en ella las plantillas compiladas

cache: Aquí está la cache de las plantillas

configs: Contiene algún archivo de configuración de las plantillas si se necesita alguno

Page 46: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

46 | P á g i n a

Es muy importante que el servidor tenga los permisos suficientes para escribir y modificar el

contenido de estas carpetas, si esto no es así, Smarty no sirve de nada y más de un error

aparecerá como consecuencia de esta falta de permisos.

En el siguiente ejemplo se puede ver cómo es la creación de estas carpetas y como se le dan los

permisos necesarios a un servidor, de nombre “nobody”, para que este pueda realizar las

modificaciones necesarias dentro de las carpetas requeridas por Smarty.

Ilustración 5Ejemplo de configuración de Smarty en un proyecto php

3.4.3. Autenticación de usuarios mediante UVUS

La web de prácticas hasta ahora es un sitio web de acceso libre para toda persona que navegue

en ella. Los únicos datos disponibles para sus usuarios son los datos de las prácticas de la

asignatura y de los turnos disponibles en cada una de ellas. Como no hay ningún dato personal

visible sobre los alumnos, el único proceso de autentificación que se exige es la introducción del

DNI a la hora de apuntarse o borrarse de un turno de prácticas.

Con la implementación de la gamificación, esta situación cambia y la web de prácticas ve

aumentada la cantidad de datos personales de los alumnos que muestra en la web, por lo que

se necesita integrar algún sistema de seguridad que permita a cada alumno consultar

exclusivamente sus datos y que la página web de prácticas no muestre nada a nadie que no

tenga permiso.

La solución es usar el sistema de logado de la universidad de Sevilla conocido como UVUS. Este

sistema UVUS, es de tipo Single Sign-On (SSO), el cual permite al usuario darse de alta solo una

vez y mantenerse logado en todas las aplicaciones que usen SSO, además facilita que los

desarrolladores se desentiendan de todas las tareas asociadas a un login ya que de todas esas

tareas se hace responsable el UVUS.

Page 47: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

47 | P á g i n a

3.4.3.1. Funcionamiento

El sistema Single Sign-On de la Universidad de Sevilla soporta los siguientes protocolos:

SAML 2.0

CAS 1.0 y 2.0

PAPI

OpenSSO

El funcionamiento de cada protocolo es diferente pero todos llegan al mismo resultado por lo

que la elección depende del desarrollador. En este proyecto, por ejemplo, se va a usar el

protocolo OpenSSO en su versión legacy, el principal motivo por el que ha elegido es porque se

basa en php y además es compatible con la versión actual de php que hay en el servidor de la

web de prácticas. Si se necesita más información sobre este protocolo y el UVUS se puede

consultar el siguiente enlace:

https://sso.us.es/integracion/protocolos/opensso/

Los usuarios del UVUS reciben tokens, que son unos identificadores opacos que se asocian a la

identidad del usuario que usa el sistema SSO. Cuando el usuario accede a una aplicación, este le

manda el token. Luego es tarea de la aplicación ver que el token es válido y existe dentro del

sistema SSO mediante consultas a este.

Ilustración 6 Esquema general del funcionamiento del UVUS

3.4.3.2. Como incluir el sistema UVUS en el proyecto

Lo primero es descargar la librería desde el siguiente enlace:

https://sso.us.es/integracion/sw/libopensso-php-legacy/

Para usar libopensso-php únicamente hay que incluir el fichero OpenSSO.php en los fichero/s

que requieran el uso del UVUS. El archivo OpenSSO.php nos define una clase con el mismo

nombre y una serie de métodos que se pueden consultar en el enlace anterior.

Page 48: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

48 | P á g i n a

3.4.3.3. Configuración Se configura la biblioteca OpenSSO mediante paquetes de configuración, entregándose uno por

cada entorno de desarrollo existente. En el fichero config.php del proyecto será necesario

especificar el paquete de configuración que se desee utilizar. Cada paquete incluye un conjunto

de URLs definidas y los parámetros de validación de los certificados.

Por defecto la biblioteca usa el entorno de preproducción. Los paquetes que hay disponibles,

son los siguientes:

ssopre.us.es_001: entorno de preproducción (ssopre.us.es). Por defecto

sso.us.es_001: entorno de producción (sso.us.es)

pre_11: antiguo entorno de preproducción (opensso-pre.us.es)

prod_1013: antiguo entorno de producción (opensso.us.es)

Ilustración 7 Ejemplo de cómo se comprueba sesión

Page 49: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

49 | P á g i n a

3.5. Bases de datos relacionales

3.5.1. Introducción Una base de datos relacional está formada por varias tablas, todas ellas con distintos nombres y con estructuras formadas por diferentes entidades. Estas entidades son las “columnas” de las tablas, mientras que los valores se insertan por “filas”, así que cada par entidad-valor es un registro de la tabla. Las diferentes tablas relacionadas dentro de la base de datos siguen una relación padre-hijo, mediante el uso de claves primarias colocadas en la tabla padre. Por otra parte en las tablas hijas se usan las claves ajenas (foráneas), el valor del registro de la ajena debe coincidir con el valor del registro de la clave primaria, en la tabla padre, para poder llevar a cabo la relación.

Ilustración 8 Ejemplo de tablas en relación padre-hijo

En la creación de una base de datos, se puede dividir su desarrollo, en dos secciones muy diferenciadas: Esquema: Es la definición de la estructura de la base de datos, para conseguir este propósito contiene los siguientes elementos:

1. El nombre las tablas. 2. El nombre de las columnas (nombre de la entidad). 3. El tipo de dato que contiene cada columna (se configura al crear la entidad). 4. Tabla a la que pertenece cada columna.

Datos: Son los contenidos de los registros, en ese momento, que hay en la base de datos. Para hacer una base de datos relacional óptima es necesario un proceso de normalización de esta. Las bases de este proceso son: Evitar la redundancia de datos, proteger la integridad de la base de datos y disminuir los problemas a la hora de actualizar las tablas. Para conseguir que la normalización sea coherente a este tipo de bases de datos, sólo son necesarias una serie de restricciones que por lo general se resumen en que las tablas tengan nombres únicos y que dos filas nunca sean iguales, además de que todos los datos de una misma columna sean del mismo tipo.

Page 50: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

50 | P á g i n a

Según la teoría al usar este tipo de base de datos y al realizar la normalización, la integridad referencial debería estar asegurada y ningún registro estaría duplicado. Lo malo de usar las bases de datos referenciales es que si contienen tipos de datos gráficos y bloques de texto son complicadas de gestionar, por lo que pueden aparecer problemas si se hacen futuras versiones del proyecto.

3.5.2. Diseño A la hora de diseñar la base de datos relacional, tenemos que tener en cuenta que información se almacena. Hay que considerar tanto la información que esté disponible como la que necesitaremos más adelante. Otra parte importante del diseño es la planificación de la estructura de la base de datos, por lo general esto consiste en la descripción de los campos de los registros y en conocer qué tipo de datos se almacena en cada uno de ellos. Aunque la definición no sólo se centra en el tipo, es posible que haya que indicar alguna que otra configuración como la longitud del campo, el nombre de dicho campo y otras propiedades más del mismo. En este proyecto ya existe de ante mano una base de datos, por lo que hay que actualizarla. Para ello se irán añadiendo tablas y relaciones según las necesidades del sistema gamificado. En un principio, se necesita una tabla que almacenen las puntuaciones que consigan cada alumno, otra contenga los logros que hay, una que haga de registro de los intercambios entre alumnos, etc. El siguiente mapa de la base de datos se muestra las nuevas tablas que se usan en ella y como se relacionan unas con otras, por ejemplo, con el identificador del alumno:

Page 51: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

51 | P á g i n a

Page 52: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

52 | P á g i n a

3.6. Manejo de la base de datos con PhpMyAdmin

Lo más fácil y cómodo para gestionar bases de datos mysql es usar un interfaz gráfico como el

que ofrece PhpMyAdmin. Para ejecutarlo basta con poner en el navegador:

url(o la IP que da apache) _del_ proyecto/phpmyadmin

Cuando aparezca la vista de iniciar sesión de PhpMyAdmin, introducimos nombre y contraseña

del usuario mysql con el queremos administrar la base de datos. Hay que comprobar que el

usuario que se va a usar tiene los permisos suficientes, si no es así muchas de las funciones de

administración de PhpMyAdmin no podrán ser usadas con dicho usuario.

3.6.1. Crear un nuevo usuario con phpMyAdmin

Es recomendable no gestionar las bases de datos con el usuario root (por defecto o principal)

por lo que es recomendable crear otro usuario con los permisos necesarios para gestionar la BD.

Para añadir un nuevo usuario basta con entrar con el usuario root en phpMyAdmin ir a la vista

global de usuarios y pulsar en añadir nuevo usuario en la página de privilegios. Aparecerán

unos checkboxes y menús desplegables para indicar los privilegios de este nuevo usuario, una

vez configurados estos permisos solo hace falta guardar y ya tenemos listo el nuevo usuario.

3.6.2. Crear tablas e insertar campos

Para crear una tabla en una base de datos gestionada con phpMyAdmin simplemente basta con pulsar el botón de “Crear Tabla” que aparece el menú permanente de la izquierda. Aparecerán una serie de campos de datos a rellenar para la tabla y otros para definir la estructura (entidades) que forman dicha tabla. Los campos a rellenar más importantes son el nombre de la tabla y la configuración de los elementos que forman la estructura de esta.

Ilustración 9 Creación de una tabla y varios elementos de su estructura con phpMyAdmin

Page 53: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

53 | P á g i n a

Para agregar nueva entidad a la estructura de una tabla, lo primero es seleccionar la tabla donde queremos agregar la nueva entidad, justo debajo de la lista de los elementos que forman la estructura de la tabla, aparece una opción de agregar, en ella se elige el número de entidades que se quieren agregar a la tabla y la posición donde los queremos insertar.

Ilustración 10 Inserción de nuevos elementos a la estructura de una tabla

3.6.3. Enlazar tablas de la base de datos

Lo más sencillo es que las tablas que se quieran enlazar contengan un campo en su estructura con el mismo nombre, esta entidad común se usa como índice de asociación. Para hacer que este campo sea un índice hay que configurarlo en una de las tablas, añadiendo un índice INDEX a dicho campo común. Algo fundamental es que ambas tablas deben usar el mismo motor de búsqueda para que la relación se pueda llevar a cabo, en este caso se usará el motor innodb que permite configuración en CASCADE de las relaciones. Esta configuración permite que el campo común a ambas tablas, si se modifica en una de ellas, se propague dicha modificación a la otra. Para relacionar las tablas, hay que acceder a la Estructura de la tabla desde phpMyAdmin, debajo de esta hay un enlace que pone "Vista de relaciones", al pulsarlo nos lleva a un menú donde se pueden crear dichas relaciones. Una vez allí seleccionar, en el apartado Restricción de clave foránea (INNODB), a la otra tabla que contiene el campo común, los otros campos configurarlos en cascada y guardar. Con estos pasos se tiene creada la relación.

Page 54: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

54 | P á g i n a

Ilustración 11Menú de phpMyadmin que muestra la "vista de relaciones" de una tabla

Si los motores no coinciden no saldrá la opción "Restricción de clave foránea (INNODB)" y no se podrá configurar en CASCADE. Para cambiar los motores de búsqueda de la tabla hay que ir a la pestaña de Operaciones y desde allí cambiar dicho motor.

3.6.4. Insertar elementos en las tablas de una base de datos:

Tan sencillo como en el phpMyadmin seleccionar la base de datos que queremos rellenar y después elegir la tabla donde se quiere insertar dicha fila de datos. Una vez seleccionada la tabla debe aparecer en una barra superior con el comando INSERTAR, al pulsar aparecen los campos a rellenar de la tabla. Si todo va sin problemas debe aparecer un mensaje en verde que confirme la inserción de los datos en la tabla cuando se pulse en guardar.

Ilustración 12 Tabla en la que se va a insertar datos mediante phpMyAdmin

Page 55: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

55 | P á g i n a

3.7. Gestión de la base de datos con PHP A parte de usar phpMyAdmin para la gestión de la base de datos del proyecto, se necesita conocer las funciones php necesarias para poder gestionar dicha base de datos directamente desde código. Es decir, es necesario para el proyecto, saber manejar los comandos php con los que podemos acceder a los datos, modificarlos e insertar o eliminar otros datos en la base según las necesidades del entorno que se está desarrollando. Como usamos una base de datos relacional, también será necesario saber cómo se relacionan las tablas y como esto se puede llevar a cabo mediante php. El comando más básico y el que más se usa es el de realizar consultas. La función destinada a tal proceso en php es la siguiente:

mysql_query( )

Esta nos devuelve una serie de recursos según los argumentos que introducimos entre paréntesis, siendo estos argumentos parte vital para realizar correctamente las consultas. Para conservar los resultados obtenidos de la consulta y poder usarlos más adelante lo mejor es guardarlos en una variable.

En el entorno de prácticas ya existente se usa otra función con función similar: db_query(), esta función contiene a mysql_query() por lo que en varias de las consultas usaremos esta función. Volviendo a los argumentos de la consulta, según lo que introduzcamos el resultado variará bastante. Existen ciertas palabras reservadas que se usan como argumentos, las más esenciales son:

SELECT nombre_del_campo Selecciona uno o varios campos de la tabla. Si se quiere recuperar todos los elementos hay que poner un *, por ejemplo para seleccionar todos los campos de tabla sería: SELECT .*

FROM nombre_tabla Con esta palabra indicamos en que tabla se va a realizar la operación de base de datos.

JOIN nombre_tabla Esencial para relacionar la tabla indicada con otras. Más adelante se desarrolla este argumento ya que hay varias formas de usarlo.

SET nombre_del_campo = valor

Se usa para asignar un valor a un elemento concreto de la tabla.

UPDATE Palabra clave que se usa al principio de toda sentencia que tenga como objetivo actualizar alguna tabla de la base de datos.

WHERE Todo lo que viene detrás de esta palabra reservada son las condiciones que se necesitan cumplir para realizar la operación en base de datos.

Page 56: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

56 | P á g i n a

Ejemplo: $result = mysql_query("SELECT * FROM example")

Mysql_query() devolverá un recurso MySQL, dicho recurso contiene todos campos, tal y como pide select, de la tabla example. Se sabe que son todos los campos por el uso del * y que la tabla a tratar es example porque es la tabla a la que apunta el from. Por último el resultado de la consulta se guarda en la variable $result. Otro comando muy útil y que se va a usar bastante a lo largo del código, es:

mysql_fetch_array();

Cuya función es devolver una matriz asociativa del argumento que se le pasa. Por ejemplo cuando se le pasa el resultado de una consulta a base de datos, nos da una matriz formada por los campos del recurso obtenido en la consulta. Esta matriz ya nos permite operar con los datos de la base en otras operaciones distintas a las del tipo mysql.

3.7.1. Relación de tablas mediante el uso de JOIN

Para hacer consultas de datos en las tablas relacionales, es muy común el uso de JOIN para unir varias tablas o relacionar algunas entidades de una tabla con las entidades de otra. Gracias a estas uniones con JOIN se pueden hacer consultas muy complejas basadas en condiciones y obtener con ellas datos que de otra forma serían muy complicados de recuperar. Existen varias variantes de este comando y sus usos dependen de lo que queramos obtener con la consulta:

INNER JOIN Es el comando más usado en este tipo de consultas. Solo devuelve como resultados los elementos que cumplen todas las condiciones.

Ejemplo: SELECT user.name, course.name FROM `user` INNER JOIN `course` on user.course = course.id; En este ejemplo, los campos de la tabla course y user seleccionados, que cumplan la condición de igualdad serán los que se devuelvan como resultado.

Page 57: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

57 | P á g i n a

LEFT JOIN Produce un resultado en la que aparecen todos los elementos de la tabla izquierda, incluso si estos no tienen elemento relacionado con la de la derecha.

SELECT user.name, course.name FROM `user` LEFT JOIN `course` on user.course = course.id; Caso similar al de inner join solo que aquí aparecen como resultado todos los usuarios, incluso los que no tienen cursos relacionados (no cumplen igualdad).

RIGHT JOIN Es igual que el caso left join, solo que en este caso aparecen todos los elementos seleccionados de la tabla derecha tengan o no relacionado algún registro de la tabla izquierda.

SELECT user.name, course.name FROM `user` RIGHT JOIN `course` on user.course = course.id; En este caso aparecerán todos los nombres de los cursos aunque no tengan algún nombre de usuario asociado (no cumplen condición).

OUTER JOIN En MySQL no está implementado pero en otros tipos de base de datos es la unión del left join y right join. Se obtienes todos los campos seleccionados de ambas tablas haya o no relaciones entre ellos.

SELECT user.name, course.name FROM `user` LEFT JOIN `course` on user.course = course.id UNION SELECT user.name, course.name FROM `user` RIGHT JOIN `course` on user.course = course.id; Se muestra por completo la tabla de nombres y la de cursos. Es decir se muestran también los nombres sin cursos asociados y los cursos sin nombres de alumnos.

Page 58: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

58 | P á g i n a

3.8. Funcionalidades que aporta la gamificación de la web

de prácticas.

Resumiendo en pocas palabras, la gamificación consiste en añadir una serie de mecánicas

asociadas a los juegos, en entornos que no tienen relación alguna con ellos. Este proyecto

pretende integrar tales mecánicas en la web de prácticas de las asignaturas del departamento

de Ingeniería Electrónica de la universidad de Sevilla, para ello se necesita hacer una serie de

cambios que afectan a esta plataforma en diferentes niveles.

La web de prácticas está compuesta por dos bloque principales: la plataforma a la que tienen

acceso los alumnos y la zona de administración en la que los profesores pueden gestionar las

prácticas de la asignatura y a los alumnos de esta.

El bloque al que tienen acceso los alumnos es en el que sufre más cambios ya que es donde se

aplica directamente la gamificación del entorno. Siguiendo las pautas sobre la teoría de la

gamificación, descrita anteriormente en el estado del arte, los principales cambios a realizar son

en diseño y funcionalidad.

Por otro lado la zona de administración ve aumentadas sus funcionalidades, se añade una

nueva sección para el control de todos los aspectos relacionados con la gamificación, en

concreto todo lo relacionado con la administración de logros y contenidos adicionales que son

dos de las mecánicas clásicas de un sistema gamificado.

En los siguientes apartados de este punto se define más detalladamente los cambios que se

encontrarán los usuarios tanto de la web como los que administran la plataforma.

Page 59: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

59 | P á g i n a

3.8.1. Modificaciones en la web a la que tienen acceso los alumnos

A primera vista cuando un alumno entra en el portal de prácticas de su asignatura, se encuentra

con la misma vista que existía en años anteriores.

Ilustración 13 Página de inicio de la web de prácticas

Una vez que pulse en el enlace que le lleva a la reserva de turnos de prácticas es cuando

aparecen los primeros cambios: ahora la web requiere autenticación mediante UVUS (este

login también se accede desde el botón conectar). Se ha añadido esta nueva función para que

los alumnos puedan acceder a todos los contenidos de las prácticas de la asignatura y usar la

nueva versión de la web de forma privada y personalizada. Además con el UVUS nuestro sistema

pueda comprobar si el alumno que intenta entrar en la plataforma, es de la universidad de Sevilla

y si está o no, matriculado en la asignatura.

Ilustración 14 Ahora la plataforma requiere login por la US para usar la web de prácticas

Una vez el alumno se autentifica mediante UVUS, accede a su perfil web. Este perfil es uno de

los principales cambios de diseño y funcionalidad que se producen en esta parte de la web de

prácticas. Éste actúa como recordatorio al alumno de su progreso dentro del sistema gamificado

ya que le muestra su puntuación, las recompensas obtenidas y los turnos de prácticas

pendientes a los que esta apuntado. Otras funciones que le permite al alumno son la posibilidad

de vender los turnos que tiene reservados a otros compañeros y la posibilidad de borrarse de

un turno que tenga reservado.

Page 60: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

60 | P á g i n a

Ilustración 15 Vista del perfil al que tiene acceso el alumno cuando se autentica correctamente

En la imagen anterior además del perfil, se puede ver en el menú de la izquierda con las nuevas

opciones disponibles en él. En la parte superior se muestra el nombre del alumno/a que se ha

logado en la plataforma y justo debajo, en azul, hay tres enlaces que permiten acceder a las

distintas partes a las que tiene acceso el alumno y que también se han incluido con la realización

de este proyecto.

Cuando el alumno pulse en el enlace de Contenido Extra, podrá ver los contenidos asociados a

las prácticas. En dicha vista tendrá acceso sólo a los contenidos extra de las prácticas en las que

su asistencia está confirmada. Estos contenidos extra por ahora son sólo url a contenidos o

páginas que los profesores han considerado relevantes para la práctica, estos se abren en

pestañas nuevas para que el alumno no tenga que abandonar la web de práctica para

consultarlos.

Ilustración 16 Vista del contenido extra asociado a las prácticas

El último enlace es el Prácticas y cambios de turno, el cual da acceso al usuario a la lista de

prácticas disponibles en la asignatura y además le permite entrar en el mercado, que es donde

el alumno puede hacer transacciones con los turnos de las prácticas.

Page 61: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

61 | P á g i n a

Ilustración 17 Ejemplo de la lista de prácticas disponibles en una asignatura

Cuando el alumno pulse en una de las prácticas disponibles en la asignatura, accederá a otra

vista donde se le presentan los turnos que hay disponibles para dicha práctica:

Ilustración 18 Ejemplo de turnos disponibles en una práctica

A diferencia de la versión anterior de la plataforma ya no es necesario que el alumno inserte su

DNI para confirmar su inscripción en el turno que elija, ya que al darse de alta con el UVUS queda

confirmada su identidad. Tampoco está presente la función de borrarse de un turno mediante

la inserción del DNI, para salir de un turno ahora hay que hacerlo desde el perfil de alumno que

es donde se da esta opción y por el mismo motivo que se explicó antes para la inscripción, ya no

es necesario el DNI para abandonar un turno.

A la hora de apuntarse en un turno, el comportamiento final es el mismo que en la versión

antigua, pero tienen lugar una serie de procesos que antes no existían. Ahora los turnos de

prácticas tienen un precio en monedas, siendo las monedas uno de los sistemas de puntuación

que añade la gamificación y él cual se ha introducido como economía virtual de la plataforma.

Page 62: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

62 | P á g i n a

A parte de todas las comprobaciones que ya se hacían antes para ver si un alumno se podía

apuntar a un turno, ahora también se comprueba si tiene monedas suficientes para pagar el

turno. Si cumple todas las condiciones incluidas la capacidad de asumir el pago, el alumno queda

apuntado en el turno elegido. Si por el contrario no tiene monedas suficientes pero cumple el

resto de condiciones, el sistema apunta al alumno de forma automática al último turno de la

práctica con plazas libres.

El precio de estos turnos aumenta cuando menos plazas tengan disponibles, así que a más

demanda y menos huecos libres, más caros serán estos. Se espera que este comportamiento

junto a la inscripción automática cuando no se tienen monedas, fomente la compra venta de

turnos y que los alumnos como consecuencia se repartan mejor por todos los turnos disponibles

de la asignatura, evitando así turnos saturados y otros vacíos.

Si el alumno entra al mercado accede a casi todas las funciones que ofrece la economía virtual

del sistema gamificado y se encuentra de frente con la siguiente vista:

Ilustración 19 Ejemplo de la página del mercado a la que tiene acceso los alumnos

Esta página se divide en dos secciones, en la primera se muestra los turnos que otros alumnos

de la asignatura han puesto a la venta y la segunda es donde el alumno puede gestionar los

turnos que él tiene en venta. En ambas secciones se muestran los datos de cada turno en venta

como son el nombre del alumno vendedor, la práctica del turno en venta, la hora de comienzo

de dicho turno, la fecha del mismo y su precio de venta.

En la primera sección el alumno o alumna dado de alta, puede ver todos los turnos que hay

disponibles para comprar y si alguno le interesa puede tomar dos acciones diferentes: pagar

directamente el precio de venta del turno o hacerle una contraoferta al vendedor.

Si decide pagar el precio del turno, la transacción se realiza correctamente si el alumno tiene

monedas suficientes para pagar. Como consecuencias de esta compra el vendedor añade a su

total de monedas el precio de la compra y el comprador por otro lado las pierde. Además el

comprador actualiza sus turnos de forma automática, es decir, si estaba apuntado a otro turno

de la misma práctica a la que pertenece el turno que acaba de comprar, este turno anterior a la

compra se elimina de su perfil y el cual mostrará el turno recién comprado. Por último, el

Page 63: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

63 | P á g i n a

vendedor pierde dicho turno y deberá apuntarse a otro turno de la práctica, esto se le recordará

cada vez que inicie la venta de un turno mediante un mensaje en una ventana emergente.

Si por otra parte decide hacer una contraoferta, el alumno podrá indicarle al vendedor cuanto

está dispuesto a pagar por dicho turno. Si el vendedor acepta dicha oferta y se lo vende, las

consecuencias son las mismas que con la compra directa sólo que en este caso el precio pagado

es el que indica el alumno comprador.

En la segunda sección del mercado aparecen los turnos que el usuario actualmente logado tiene

en venta, este podrá desde aquí acceder a una vista donde puede consultar todas las

contraofertas que le han hecho otros alumnos a sus turnos en venta y decidir si acepta alguna

de esas contraofertas o no.

Ilustración 20 Ejemplo de la página donde un alumno puede consultar las contraofertas que otros le hacen a su turno en venta

Page 64: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

64 | P á g i n a

3.8.2. Modificaciones en la zona de administración

En esta parte de la plataforma web es donde los profesores y personal encargado de las prácticas

las gestionan, incluyendo los turnos y los alumnos de estas. Este proyecto añade nuevas

opciones en la zona de administración con la que los administradores de las prácticas pueden

controlar todo lo relacionado con la gamificación.

El primer añadido es una página donde se pueden crear, modificar y borrar los logros que

ofrece la asignatura. Estos logros son las recompensas que queremos ofrecer a los alumnos por

realizar una serie de tareas que se quiere que cumplan. El principal aliciente de estos logros es

que dan una serie de puntos, unos aumentan la reputación del alumno y los otros actúan de

monedas que pueden usar para comprar turnos de prácticas.

A la hora de crear un logro cada profesor puede usar su criterio para recompensar la tarea que

este lleva asociada. Las diferentes opciones que se ofrecen en los selectores están predefinidas

en el código, aun así la persona que se encargue del mantenimiento de la plataforma podrá

añadir nuevas opciones tocando unas pocas líneas de código en el archivo de configuración de

la zona de administración, ya que es en ese archivo donde están definidas estas opciones.

Ilustración 21 Pagina de creación de logros

En esta página se muestran además los logros creados anteriormente y se le ofrece a los que

usen esta página la posibilidad de editar los campos de los logros o borrarlos si ya no interesan.

Los logros que se borren aparecen en una lista al final de esta página por si se quieren incluir de

nuevo en la plataforma, se puedan reactivar. Si de verdad se quiere borrar completamente ese

logro, en esta tabla se da la opción de eliminarlo, si se elimina este logro ya no se podrá restaurar

de nuevo en el sistema. Eso sí, todos los alumnos que desbloquearon este logro lo seguirán

teniendo como recompensa desbloqueada aunque se elimine del sistema.

Los diferentes tipos de logros existentes pueden requerir algún tipo de configuración extra una

vez creados, por ejemplo un logro que se active con la asistencia a clase pedirá que se le asocie

una práctica, entonces la asistencia a esa práctica será el evento que desbloquea este logro en

los perfiles de los alumnos.

Page 65: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

65 | P á g i n a

Si se quiere ver cómo se maneja esta página y las nuevas zonas añadidas en administración en

uno de los apéndices se adjunta un manual de usuario que explica estas nuevas funciones.

Otra de las nuevas funciones añadidas a administración es una lista donde se puede marcar la

asistencia de los alumnos a cada una de las prácticas de la asignatura. Los estados de asistencias

a las practicas se usarán en ciertas funciones para calcular si un alumno ha desbloqueado o no

un logro por lo que será necesario que la lista que se pasa en clase actualice los datos de esta

página.

Ilustración 22 Ejemplo de la lista de asistencia a las prácticas de una asignatura

Por último con el desarrollo de este proyecto se ha añadido una página donde se pueden

asociar URLs, con contenidos extra, a las prácticas de la asignatura. Además se muestran todos

los contenidos ya existentes y se permite modificarlos.

Ilustración 23 Página de gestión del contenido extra

Page 66: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

66 | P á g i n a

4. Funciones

Page 67: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

67 | P á g i n a

4.1. Introducción

En este apartado se explican de forma general, los código de las funciones que se han añadido

a la plataforma de prácticas para integrar las mecánicas del sistema gamificado que se quiere

implementar con este proyecto.

En los próximos apartados de esta sección, el título indicará el fichero donde se encuentran las

funciones que contiene cada uno de estos apartados, además nos dirá a qué parte de la

plataforma web afecta, es decir si son funciones que se usan en la sección disponible para los

usuarios o son sólo de utilidad en la zona de administración.

Todas las funciones que aquí se exponen tienen el mismo formato: un título, su código y una

breve descripción con la función que cumplen.

Page 68: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

68 | P á g i n a

4.2. Zona Usuario: common.php

Las funciones que se encuentran en common.php son de uso común y generalizado por los

distintos ficheros php que componen esta parte de la web. Otros ficheros llaman a las funciones

que están contenidas en él, para poder realizar otras operaciones más específicas. Las funciones

que posee este common.php son:

4.2.1. Función filas_tabla:

A esta función se le pasa como argumento el nombre de una base de datos y devuelve el número

de filas que esta tiene.

4.2.2. Función consultalogros:

Esta función se usa para consultar que logros desbloqueó el alumno. Se le pasa como

argumento el id del alumno y el de la asignatura, siendo ambos argumentos números enteros.

Como resultado devuelve un array con la información de los logros que dicho alumno

desbloqueó en esa asignatura.

Si un alumno desbloqueo un logro antes de que este se marcase como borrado, esta función

sigue detectándolo como desbloqueado ya que el alumno lo desbloqueó cuando el logro aún

era válido.

function filas_tabla($tabla) $consulta = "SELECT * FROM $tabla"; $result_consulta = db_query($consulta); $num_filas = db_numrows($result_consulta); return $num_filas;

function consultalogros($idpunt,$asignatura) $consulta = "SELECT alumnos.idpunt, tabla_relacion_logros.estado, tabla_relacion_logros.sumado, tabla_logros.idlogro, tabla_logros.tipo, tabla_logros.logica, tabla_logros.descripcion, tabla_logros.moneda, tabla_logros.valor, tabla_logros.practica, tabla_logros.titulo FROM alumnos INNER JOIN tabla_relacion_logros on alumnos.idpunt = tabla_relacion_logros.idpunt and alumnos.idpunt = $idpunt INNER JOIN tabla_logros on tabla_relacion_logros.idlogro = tabla_logros.idlogro and ( ( tabla_relacion_logros.estado = 1 ) or (tabla_relacion_logros.sumado = 1) ) and tabla_logros.asignatura = $asignatura"; $result_consulta = mysql_query($consulta); $cont = 0; while($resultado_array = mysql_fetch_array($result_consulta)) $tabla[$cont] = $resultado_array; $cont++; return $tabla;

Page 69: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

69 | P á g i n a

4.2.3. Función actualizar_puntuaciones:

Esta función sirve para actualizar las distintas puntuaciones de los alumnos (sistemas de

puntuación y número de monedas) según el estado y el estado de la suma de los logros que el

alumno desbloqueó. Se le pasa como argumentos una tabla con toda la información de los logros

desbloqueados por el alumno. Esta función también detecta si se le anula un logro a un alumno

y actualiza sus puntuaciones al respecto.

function actualizar_puntuaciones($tabla_relacion_logros, $idpunt) $i = 0; while (isset($tabla_relacion_logros[$i])) if ( ($tabla_relacion_logros[$i]["estado"] == 1) and ($tabla_relacion_logros[$i]["sumado"] == 0) ) $id_logro = $tabla_relacion_logros[$i]["idlogro"]; $tipo = $tabla_relacion_logros[$i]["tipo"]; $tipo_logro = tipo_puntuacion($tipo); $puntuacion = db_query("SELECT * FROM alumnos INNER JOIN puntuaciones on alumnos.idpunt = puntuaciones.idpunt and alumnos.idpunt = $idpunt"); $resultado_puntuacion = mysql_fetch_array($puntuacion); $nueva_puntuacion = $resultado_puntuacion[$tipo_logro] + $tabla_relacion_logros[$i]["valor"]; $nueva_moneda = $resultado_puntuacion["moneda"] + $tabla_relacion_logros[$i]["moneda"]; mysql_query("UPDATE puntuaciones SET $tipo_logro = $nueva_puntuacion, moneda = $nueva_moneda where puntuaciones.idpunt = $idpunt"); mysql_query("UPDATE tabla_relacion_logros SET sumado = 1 where tabla_relacion_logros.idpunt = $idpunt and tabla_relacion_logros.idlogro = $id_logro"); elseif (($tabla_relacion_logros[$i]["estado"] == 0) and ($tabla_relacion_logros[$i]["sumado"] == 1)) $id_logro = $tabla_relacion_logros[$i]["idlogro"]; $tipo = $tabla_relacion_logros[$i]["tipo"]; $tipo_logro = tipo_puntuacion($tipo); $puntuacion = db_query("SELECT * FROM alumnos INNER JOIN puntuaciones on alumnos.idpunt = puntuaciones.idpunt and alumnos.idpunt = $idpunt"); $resultado_puntuacion = mysql_fetch_array($puntuacion); $nueva_puntuacion = $resultado_puntuacion[$tipo_logro] - $tabla_relacion_logros[$i]["valor"]; $nueva_moneda = $resultado_puntuacion["moneda"] - $tabla_relacion_logros[$i]["moneda"]; mysql_query("UPDATE puntuaciones SET $tipo_logro = $nueva_puntuacion, moneda = $nueva_moneda where puntuaciones.idpunt = $idpunt"); mysql_query("UPDATE tabla_relacion_logros SET sumado = 0 where tabla_relacion_logros.idpunt = $idpunt and tabla_relacion_logros.idlogro = $id_logro"); $i++;

Page 70: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

70 | P á g i n a

4.2.4. Función tipo_puntuación:

Nos devuelve el tipo de logro que es para poder sumarlo así al sistema de puntos

correspondiente: experiencia, habilidad o karma. Se le pasa como argumento un entero, el cual

representa al tipo del logro y se devuelve una cadena de caracteres distinta según el valor de la

entrada.

4.2.5. Función crear_array:

Devuelve un array con el resultado de la consulta que se pasa como parámetro. Esta función es

útil si se quiere trabajar con los resultados de una consulta mysql como si de una matriz se

tratase.

function tipo_puntuacion($tipo) if ($tipo == 1) $tipo_logro = "exp"; elseif ($tipo == 2) $tipo_logro = "hab"; else $tipo_logro = "kar"; return $tipo_logro;

function crear_array($query) $cont = 0; $result_consulta = mysql_query($query); if($result_consulta == FALSE) die(mysql_error()); // TODO: better error handling $array_creado =intro_en_array($result_consulta); return $array_creado;

Page 71: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

71 | P á g i n a

4.2.6. Función intro_en_array:

Introduce filas en una matriz, la cual se devuelve como resultado a su salida. Se le pasa como

argumento el resultado de una consulta mysql y por cada recurso obtenido con esta consulta se

crea una fila en dicha tabla.

4.2.7. Función consulta_ordenada:

Consulta la tabla de la asignatura que se le pasa como argumento y devuelve el resultado de

dicha consulta ordenado por el campo que se le indica. Devuelve un array con los resultados de

dicha consulta para poder trabajar con ellos en formato matriz.

function intro_en_array($result_consulta) $cont = 0; while($resultado_array = mysql_fetch_assoc($result_consulta)) $tabla[$cont] = $resultado_array; $cont++; return $tabla;

function consulta_ordenada($tabla, $campo, $asignatura) if ($tabla == "videos") $tabla = crear_array("SELECT * FROM $tabla WHERE $tabla.asignatura = $asignatura and $tabla.estadov = 0 ORDER BY $campo"); else $tabla = crear_array("SELECT * FROM $tabla WHERE $tabla.asignatura = $asignatura ORDER BY $campo"); return $tabla;

Page 72: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

72 | P á g i n a

4.2.8. Función consulta_turnos:

En esta función se pasa como argumentos el id del alumno y el de la asignatura y nos devuelve

como resultado, un array con los datos de los turnos a los que se ha apuntado el alumno en esa

asignatura.

4.2.9. Función validacion_enteros:

Esta función se usa para comprobar si un valor está dentro de un rango de opciones, devuelve

un TRUE o FALSE dependiendo de si está dentro del rango o no.

function consulta_turnos($idpunt, $asignatura) $reservas_alum = crear_array("SELECT reservas.sesion, reservas.coste, reservas.alumno FROM reservas WHERE alumno = $idpunt and sesion != 0 and asignatura = $asignatura"); $sesiones = crear_array("SELECT sesiones.id, sesiones.hora_ini, sesiones.hora_fin, sesiones.practica, sesiones.fecha FROM sesiones WHERE asignatura = $asignatura"); $practicas_alum = crear_array("SELECT practicas.id, practicas.titulo FROM practicas"); for ($i=0; $reservas_alum[$i] ; $i++) for ($j=0; $sesiones[$j] ; $j++) for ($k=0; $practicas_alum[$k] ; $k++) if ( ( $reservas_alum[$i]['sesion'] == $sesiones[$j]['id'] ) and ( $sesiones[$j]['practica'] == $practicas_alum[$k]['id'] ) ) $turno[$i] = array('sesion' => md5($reservas_alum[$i]['sesion']), 'hora_ini' => $sesiones[$j]['hora_ini'], 'hora_fin' => $sesiones[$j]['hora_fin'], 'titulo' => $practicas_alum[$k]['titulo'], 'fecha' => $sesiones[$j]['fecha'], 'id' => md5($reservas_alum[$i]['alumno'])); return $turno;

function validacion_enteros($valor, $opciones) if (filter_var($valor, FILTER_VALIDATE_INT, $opciones) !== FALSE) return TRUE; else return FALSE;

Page 73: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

73 | P á g i n a

4.2.10. Función valor_dec_md5:

Esta función devuelve el valor decodificado del argumento que se pasa como parámetro, para

sacar dicho valor decodificado se compara con todos los valores de un campo de la tabla

seleccionada, ambos también se pasan como parámetros. Sólo es capaz de decodificar, si el

argumento que se pasa a la función esta codificado en md5.

4.2.11. Función pasar_a_md5:

En esta función pasamos el nombre de una tabla (array) y uno de sus campos de esta para

codificar todos los valores asociados a ese campo a formato md5. Se devuelve un array similar

al que se pasa como parámetro de entrada sólo que este tiene todo los valores del campo

codificados en md5.

4.2.12. Función monedas_alumno:

Estas función devuelve el la cantidad de monedas que tiene un alumno, para ello es necesario

que se le pase el ID del alumno, que es un entero.

function valor_dec_md5($tabla, $campo, $argumento) $tabla_valores = crear_array("SELECT * FROM $tabla"); for ($i=0, $encontrado = 0; $tabla_valores[$i] and $encontrado == 0; $i++) $comparacion = md5($tabla_valores[$i][$campo]); if ( $comparacion == $argumento) $valor_decodificado = $tabla_valores[$i][$campo]; $encontrado = 1; return $valor_decodificado;

function pasar_a_md5($tabla, $campo) for ($i=0; $tabla[$i]; $i++) $tabla[$i][$campo] = md5($tabla[$i][$campo]); return $tabla;

function monedas_alumno($idpunt) $activos = mysql_fetch_assoc( mysql_query( ("SELECT moneda FROM puntuaciones WHERE idpunt=$idpunt") ) ); return $activos['moneda'];

Page 74: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

74 | P á g i n a

4.2.13. Función calcular_precio_turno:

Se usa esta función para calcular el precio de cada sesión según el número de alumnos

apuntados en ella, cuantos menos espacios libres queden más caro será el precio que devuelve.

Se le pasa como argumento el id de la sesión de la que queremos saber su precio, este id es un

entero.

4.2.14. Función actualizar_log:

Esta función actualiza el log de la web de prácticas con la acción que ha hecho un alumno en una

sesión, por ejemplo inscribirse, borrarla o intercambiarla. Se le tienen que pasar como

argumento el id de la sesión y del alumno, La acción que se pasa como argumento es la que

luego se reflejará en el log.

function calcular_precio_turno($sesion) global $preciosesion; global $incremento; $consulta = mysql_query("SELECT count(alumno) FROM reservas WHERE sesion = $sesion"); $alumnos = mysql_fetch_assoc($consulta); $total = ($incremento * $alumnos['count(alumno)'] ) + $preciosesion; return $total;

function actualizar_log($idpunt, $sesion, $accion) global $asignatura; $ahora=date("Y-m-d H:i:s"); $ip=$_SERVER["REMOTE_ADDR"]; $consulta_dni = mysql_fetch_assoc(mysql_query("SELECT dni FROM alumnos WHERE idpunt = $idpunt")); $dni = $consulta_dni['dni']; db_query("INSERT INTO log (asignatura,dni,sesion,accion,fecha,ip) values ('$asignatura','$dni',$sesion,'$accion','$ahora','$ip');");

Page 75: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

75 | P á g i n a

4.2.15. Funciones de Login por UVUS:

Para poder recuperar los datos del alumno desde el servicio UVUS que ofrece la universidad de

Sevilla y tal como se explicó anteriormente, se necesita instalar en el proyecto la librería que nos

permite interactuar con el UVUS. Las funciones de esta librería que vamos a usar son las

siguientes:

4.2.15.1. check_and_force_sso() Gracias a esta función podemos comprobar si el alumno que está entrando en una

sección de la web disponible para los usuarios, está logado o no, si no lo está lo mandará

a la página de login del UVUS que es común a todas las aplicaciones que usan este

servicio de autenticación de la universidad de Sevilla.

4.2.15.2. all_attributes($force_arrays = FALSE) Con esta función podemos recuperar del servicio UVUS todos los datos del alumno que

se ha logado correctamente en la web de prácticas. Con esto nos evitamos guardar datos

sensibles del usuario en nuestra base de datos y aun así podemos trabajar con dichos

datos gracias a que el UVUS nos los da.

Page 76: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

76 | P á g i n a

4.3. Zona Usuario: mercado.php

4.3.1. Función crear_intercambio:

Esta función crea una fila nueva en la tabla de intercambios de nuestra base de datos, para crear

correctamente esa entrada se le tienen que pasar como argumentos el alumno que quiere iniciar

el intercambio, la sesión, precio, practica, asignatura y fecha de creación de este intercambio.

4.4. Zona Usuario: perfil.php

4.4.1. Función consulta_perfil_alumnos

Esta función devuelve un array de una sola fila con el id del alumno que se le pasa como

argumento y todas las puntuaciones que tiene este en la plataforma.

function crear_intercambio($alumno_origen, $sesion, $precio, $practica, $asignatura, $ahora) mysql_query("INSERT INTO intercambios (`alorigen`,`sesion_original`, `precio`, `practica`,`asignatura`,`fecha`) values ($alumno_origen, $sesion, $precio, $practica, $asignatura, '$ahora')");

function consultar_perfil_alumno($idusr) $consulta_perfil = "SELECT * FROM alumnos INNER JOIN puntuaciones on alumnos.idpunt = puntuaciones.idpunt and alumnos.idpunt = $idusr"; $resultado_consulta_perfil = db_query($consulta_perfil); $fila=mysql_fetch_array($resultado_consulta_perfil); return $fila;

Page 77: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

77 | P á g i n a

4.5. Zona Usuario: logros.php

4.5.1. Función ver_videos:

Con esta función se desbloquean los logros por visionado de contenido extra. Si un logro de

este tipo aún no está desbloqueado se ejecuta una serie de acciones para comprobar si el

alumno ha visto todo el contenido extra asociado a la práctica relacionada con el logro, si

obtiene que ya se han visto todos los contenidos, lo desbloquea.

function ver_videos($idpunt, $logica) $logros_videos = crear_array("SELECT idlogro FROM tabla_logros WHERE logica = $logica and borrado = 0"); $total = 0; for ($i=0; $logros_videos[$i] ; $i++) $id_logro_video = $logros_videos[$i]['idlogro']; $logro_desbloqueado = crear_array("SELECT estado FROM tabla_relacion_logros WHERE idlogro = $id_logro_video and idpunt = $idpunt and estado = 1"); if ($logro_desbloqueado) else $videos_logro = crear_array("SELECT idvideo FROM videos_rel_logros WHERE idlogro = $id_logro_video and est_relacion = 1"); for ($i = 0; $videos_logro[$i] ; $i++) $numero_videos += 1 ; $videos_vistos_alumno = crear_array("SELECT * FROM videos_vistos WHERE visto = 1"); for ($j=0; $videos_logro[$j] ; $j++) for ($k=0; $videos_vistos_alumno[$k] ; $k++) if ($videos_logro[$j]['idvideo'] == $videos_vistos_alumno[$k]['idvideo']) $total += 1; if ($total == $numero_videos) $actualizacion = mysql_query("UPDATE tabla_relacion_logros SET estado = 1 WHERE idpunt = $idpunt and idlogro = $id_logro_video");

Page 78: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

78 | P á g i n a

4.6. Zona Usuario: practica.php

4.6.1. Función demanda_turno

function demanda_turno($id, $alumno, $dni, $asignatura) global $incremento; global $preciosesion, $pagos; $pago = $pagos['pagado']; $consulta_moneda = mysql_query("SELECT moneda FROM puntuaciones WHERE idpunt = $alumno"); $moneda_alumno = mysql_fetch_assoc($consulta_moneda); $consulta = mysql_query("SELECT sesion, COUNT(*) FROM reservas WHERE sesion = $id"); $alumnos_apuntados = mysql_fetch_assoc($consulta); $nuevo_precio_sesion = $preciosesion + ($alumnos_apuntados['COUNT(*)'] * $incremento); if ($moneda_alumno['moneda'] >= $nuevo_precio_sesion) $monedas_restantes = $moneda_alumno['moneda'] - $nuevo_precio_sesion; reservar($dni, $id); $actualizacion0 = mysql_query("UPDATE puntuaciones SET moneda = $monedas_restantes WHERE idpunt = $alumno"); $actualizacion1 = mysql_query("UPDATE reservas SET pagado = $pago WHERE alumno = $alumno and sesion = $id"); return $nuevo_precio_sesion; else $consulta_practica = mysql_fetch_assoc(mysql_query("SELECT practica FROM sesiones WHERE asignatura = $asignatura and id = $id")); $sesionTurno = $consulta_practica['practica']; $turnos = crear_array("SELECT id FROM sesiones WHERE asignatura = $asignatura and practica = $sesionTurno ORDER BY id DESC"); for ($i=0, $listo = 0; $turnos[$i]['id'] and $listo == 0; $i++) $ultimoTurno = $turnos[$i]['id']; $plazas_ocupadas = mysql_result(mysql_query("SELECT count(alumno) FROM reservas WHERE sesion=$ultimoTurno"), 0); $plazas_turno =mysql_fetch_assoc( mysql_query("SELECT capacidad FROM sesiones WHERE id = $ultimoTurno") ); $plazas = $plazas_turno['capacidad']; if ($plazas > $plazas_ocupadas ) $ahora=date("Y-m-d H:i:s"); $ip=$_SERVER["REMOTE_ADDR"]; $consulta =mysql_fetch_assoc(mysql_query("SELECT * FROM reservas WHERE practica = $sesionTurno and alumno = $alumno")); if(!$consulta) db_query("INSERT INTO reservas (asignatura,alumno,sesion,fecha, ip,coste,practica,pagado) values ('$asignatura','$alumno','$ultimoTurno','$ahora', '$ip',0,$sesionTurno,$pagos[pagado]);"); db_query("INSERT INTO log (asignatura,dni,sesion,accion,fecha,ip) values ('$asignatura','$dni','$ultimoTurno','I','$ahora','$ip');"); $error = "No tienes monedas para elegir este turno, se te asignó al turno más tardio que aún tenía plazas libres, consulta tu perfil para ver el día y hora"; else $error = "Ya estas inscrito en el último turno posible por no tener monedas"; $listo = 1; return $error;

Page 79: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

79 | P á g i n a

Con esta función podemos comprobar si un alumno tiene o no suficientes monedas para pagar

el turno en el que se quiere apuntar, dependiendo de si tiene o no fondos suficientes se ejecuta

una lógica u otra y se actualizan los turnos conforme a esta lógica (actualiza la base de datos).

4.7. Zona Administración: common.php

Al igual que pasaba con el common.php de la zona de usuario, este archivo contiene las

funciones más comunes y usadas a lo largo del código de esta sección. Algunas funciones pueden

ser comunes a ambas secciones por lo que sólo se desarrollaran las funciones que son

totalmente nuevas.

Al final se dirá también que funciones del common.php de la zona usuario son comunes en este

common.php de administración.

4.7.1. Función consultaasistencia :

Con ella obtenemos un array que contiene a todos los alumnos de la asignatura junto a los datos de las practicas a las que se han apuntad cada uno y la información de asistencia a cada una de ellas.

function consultaasistencia($asignatura) $cont = 0; $num_alum = filas_tabla("alumnos"); for ($i=1; $i <= $num_alum ; $i++) $consulta = "SELECT * FROM alumnos INNER JOIN asistencia_practicas on alumnos.idpunt = asistencia_practicas.idpunt and alumnos.idpunt = $i INNER JOIN practicas on asistencia_practicas.practica = practicas.id and practicas.asignatura = $asignatura"; $result_consulta = mysql_query($consulta); while( $resultado_array = mysql_fetch_array($result_consulta)) $tabla[$cont] = $resultado_array; $cont++; return $tabla;

Page 80: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

80 | P á g i n a

4.7.2. Función consulta_crea_array:

Devuelve un array con todos los registros de la tabla que se le pasa como argumento

(este argumento es un string con el nombre de la tabla).

4.7.3. Función edicion:

Se usa cuando se quiere editar un contenido extra (sea o no una url a un vídeo) o un logro en

la base de datos. Si se cumple la condición del WHERE se actualiza la tabla que se le pasa como

parámetro (logros o la de contenidos extra).

$campo_tabla_id es el campo de la tabla que cuando tenga un valor igual a $id cumplirá la

condición para actualizar la tabla. Por otro lado $id es el valor que debe tener el campo de la

tabla para que una fila de la tabla sea seleccionada para actualizarse. $campo es el campo de la

fila a actualizar y $valor indica el nuevo contenido del campo.

4.7.4. Función edicion_texto:

Casi idéntica a edicion() sólo que esta se usa para actualizar cuando los campos contienen

cadenas de texto como valores.

function consulta_crea_array($tabla) $cont = 0; $consulta = "SELECT * FROM $tabla"; $res_consulta = mysql_query($consulta); $tabla_res = intro_en_array($res_consulta); return $tabla_res;

function edicion($tabla, $campo_tabla_id, $id, $campo, $valor) $actualiza = mysql_query("UPDATE $tabla SET $campo = $valor WHERE $tabla.$campo_tabla_id = $id");

function edicion_texto($tabla, $campo_tabla_id, $id, $campo, $valor) $actualiza = mysql_query("UPDATE $tabla SET $campo = '$valor' WHERE $tabla.$campo_tabla_id = $id");

Page 81: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

81 | P á g i n a

4.8. Funciones comunes a las del common.php de la zona usuario:

consultalogros($idpunt,$asignatura)

filas_tabla($tabla)

consulta_ordenada($tabla, $campo, $asignatura)

crear_array($query

intro_en_array($result_consulta)

validacion_enteros($valor, $opciones)

actualizar_puntuaciones($tabla_relacion_logros, $idpunt)

tipo_puntuacion($tipo)

Page 82: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

82 | P á g i n a

4.9. Zona administración: logros.php

4.9.1. Función asistencia_practicas:

Consulta en la tabla de asistencias y en la tabla de relaciones entre logros y alumnos. Con ella

vemos que logros por asistencia a prácticas desbloqueó el alumno.

El logro asociado a la práctica si esta borrado no se tendrá en cuenta ("estado" == 2), por eso si

se cambia la asistencia pero el logro asociado esta borrado no se eliminará/añadirá del conjunto

de logros desbloqueados del alumno.

Si "estadop" es 1, es que el alumno asistió a esa práctica, si al mismo tiempo "estado" es 0, el

logro sigue bloqueado. Sin embargo si "estadop" == 1 hay que poner "estado" == 1 para

desbloquear dicho logro de asistencia.

Si hay error pasando lista, esta función es capaz de corregir la asistencia a dicha práctica.

function asistencia_practicas($idpunt) $consulta_pract = "SELECT alumnos.idpunt, asistencia_practicas.practica, asistencia_practicas.estadop, tabla_logros.descripcion, tabla_logros.idlogro, tabla_relacion_logros.estado FROM alumnos INNER JOIN asistencia_practicas on alumnos.idpunt = asistencia_practicas.idpunt and alumnos.idpunt = $idpunt INNER JOIN tabla_logros on asistencia_practicas.practica = tabla_logros.practica and tabla_logros.borrado = 0 INNER JOIN tabla_relacion_logros on tabla_logros.idlogro = tabla_relacion_logros.idlogro and tabla_relacion_logros.idpunt = alumnos.idpunt and asistencia_practicas.practica = tabla_logros.practica"; $res_pract = crear_array($consulta_pract); $cont = 0; while ( isset($res_pract[$cont]) ) if (($res_pract[$cont]['estadop'] == 1) and ($res_pract[$cont]['estado'] == 0)) $logro_desbloqueado = 1; $logro = $res_pract[$cont]['idlogro']; $act_est_logro = mysql_query("UPDATE tabla_relacion_logros SET estado = $logro_desbloqueado WHERE tabla_relacion_logros.idpunt = $idpunt and tabla_relacion_logros.idlogro = $logro "); elseif (($res_pract[$cont]['estadop'] == 0) and ($res_pract[$cont]['estado'] == 1)) $logro_desbloqueado = 0; $logro = $res_pract[$cont]['idlogro']; $act_est_logro = mysql_query("UPDATE tabla_relacion_logros SET estado = $logro_desbloqueado WHERE tabla_relacion_logros.idpunt = $idpunt and tabla_relacion_logros.idlogro = $logro "); $cont++;

Page 83: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

83 | P á g i n a

5. Pruebas del sistema

Page 84: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

84 | P á g i n a

5.1. Introducción a este apartado

En las siguientes páginas de esta sección, se muestra el resultado de realizar ciertas pruebas en

la web de prácticas ya ludificada. En total se muestran cuatro pruebas:

1. Apuntarse a un turno

2. Asistencia a prácticas

3. Crear un logro y editarlo

4. Realización de un intercambio

La primera y cuarta prueba se centran en situaciones a las nuevas mecánicas incluidas con la

gamificación, a las que se enfrentará el alumno cuando use esta nueva versión de la web. La

prueba número tres y cuatro se centran en dos funciones que se han añadido en la zona de

administración.

Por último comentar que todas estas pruebas incluyen imágenes de las modificaciones que

sufren las diferentes tablas de la base de datos a lo largo de la ejecución de estas.

5.2. Apuntarse a un turno

En este apartado se ilustra el proceso que tiene que seguir un alumno para apuntarse en un

turno específico de la práctica. Cuando un alumno entra por primera vez en la web, se encuentra

con su perfil y puede ver que en este no se muestra ningún turno asociado.

Ilustración 24 Perfil del alumno sin turnos asociados

Page 85: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

85 | P á g i n a

Para que el alumno pueda ver las prácticas disponibles de la asignatura tiene que pulsar en el

enlace de “Prácticas y cambios de turno” o desde el menú de la izquierda pinchar en “Lista de

prácticas”, cuando lo haga, se le mostrarán de una forma similar a la siguiente:

Ilustración 25 ejemplo lista de prácticas disponibles

Cuando seleccione una de las prácticas le aparecerán los turnos que hay disponibles para

realizarla.

Ilustración 26 vista de los turnos de una práctica

Page 86: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

86 | P á g i n a

Si todo va bien, se realiza la reserva del turno que elija y el sistema le devuelve un mensaje

como el siguiente:

Ilustración 27 Mensaje de inscripción correcta

Page 87: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

87 | P á g i n a

Si hay un problema con la inscripción, como puede aparecer por querer apuntarse a un segundo

turno de la misma práctica, el sistema devuelve mensajes parecidos al que se muestra a

continuación:

Ilustración 28 Mensaje de error al inscribirse

Si la inscripción es correcta, cuando el alumno vuelva a su perfil, podrá tener acceso al turno de

prácticas que acaba de reservar

Ilustración 29 Perfil del alumno con el turno recién reservado

Page 88: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

88 | P á g i n a

Por último se comprueba en la base de datos del sistema si esta reserva a modificado la

correspondiente tabla de reserva de turnos. Para ello se tiene que consultar la tabla “reservas”

de la base de datos:

Ilustración 30 El turno reservado queda reflejado en la tabla reservas de la base de datos

Page 89: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

89 | P á g i n a

5.3. Asistencia a prácticas

Una de las funciones que se añade en la zona de administración es una lista donde se puede

indicar si un alumno asistió o no a una práctica. Este estado de asistencia luego lo usa el sistema

para desbloquear o no, los logros por asistencia.

Los estados de esta lista se pueden consultar en la base de datos del sistema, concretamente en

la tabla ”asistencia_practicas”, si estadop es 1 el alumno asistió a clase, si es cero es que aún no

hizo esa práctica.

Ilustración 32 Tabla que almacena la asistencia a practicas

Ilustración 31 Lista con los estados de asistencia

Page 90: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

90 | P á g i n a

Si por ejemplo ahora cambiamos la asistencia para uno de los alumnos, por ejemplo para la

Práctica 1 ctos de la alumna María Tabla Mesa. Este cambio quedará registrado en la tabla que

almacena las asistencias a las prácticas.

Ilustración 33 Cambio de asistencia en una práctica

Este cambio de asistencia queda reflejado en la tabla que almacena los estados de las prácticas.

La alumna ahora tiene su estado a uno, lo que indica que asistió a dicha clase de práctica:

Ilustración 34 El cambio en la asistencia se ve en la base de datos

Page 91: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

91 | P á g i n a

Si se cambia el estado de asistencia de una práctica de forma que se confirma la asistencia de

ese alumno a esta y si además tiene un logro de asistencia asociado, cuando el alumno consulte

de nuevo su perfil le aparecerá dicho logro desbloqueado:

Ilustración 35 La asistencia a una práctica puede desbloquear logros

Page 92: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

92 | P á g i n a

5.4. Crear un logro y editarlo

Cuando un profesor quiera crear un logro se encontrará con la siguiente página:

Ilustración 36 Vista de creación y gestión de logros

Para crear un logro rellenamos los datos y pulsamos en crear:

Ilustración 37 Rellenar datos del logro

Page 93: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

93 | P á g i n a

Si el logro se crea, este aparecerá debajo del formulario para crear logros, en una sección que

se llama Logros Creados.

Ilustración 38 El logro recién creado aparece en esta vista

En la base de datos este logro que se acaba de crear debe quedar registrado en “tabla_logros”,

que es la tabla de la base de datos que se encarga de almacenar los logros que se vayan creando.

En la próxima imagen se puede ver como los datos del logro creado en esta prueba quedan

almacenados en dicha tabla.

Ilustración 39 Resultado en base de datos de la creación de un logro

Page 94: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

94 | P á g i n a

En la ilustración 14 se puede ver que en el lateral derecho del logro recién creado hay un botón

que dice editar, si se pulsa nos lleva a una nueva vista donde podemos editar los datos de dicho

logro. En esta vista se muestran los datos actuales del logro que se quiere editar y un formulario

para introducir nuevos valores.

Ilustración 40 Edición de un logro creado anteriormente

Si editamos uno de los campos y luego actualizamos, estos nuevos datos aparecen reflejados:

Ilustración 41Introdución de nuevos datos

Ilustración 42 Al actualizar se ven los nuevos datos

Page 95: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

95 | P á g i n a

Además se puede comprobar como estos cambios también quedan reflejados en la base de

datos del sistema:

Ilustración 43 La edición del logro también se muestra en la base de datos

En la vista de creación de logros también se puede ver el nuevo valor que se ha introducido con

la edición del logro

Ilustración 44 Los cambios del logro también se ven en la vista de gestión de logros

Page 96: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

96 | P á g i n a

En la ilustración anterior, se puede ver que al lado del logro creado además del botón de edición

hay un botón que sirve para borrar el logro, al pulsar en el este queda deshabilitado y no tendrá

efecto en el sistema gamificado. Esta deshabilitación queda reflejada en la base de datos tal ya

que el campo borrado pasa a valer 1, por lo que ese logro no esta operativo.

Ilustración 45 Un logro deshabilitado tiene su campo "borrado" a 1

Los logros borrados aparecen al final de la vista de creación de logros y luego se podrán reactivar

o eliminar completamente del sistema.

Page 97: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

97 | P á g i n a

5.5. Realización de un intercambio

Un alumno puede poner en venta los turnos que tiene reservados simplemente con pulsar en

“vender”, en el turno que elija de los mostrados en su perfil.

Ilustración 46 Al pulsar en "vender" puede poner su turno a la venta

Luego aparecerá una ventana que pide el precio por el que se quiere vender el turno

seleccionado

Ilustración 47 Ventana donde se introduce el precio de venta

Page 98: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

98 | P á g i n a

Si el proceso de poner a la venta es correcto, se envía al alumno a la vista del mercado de turnos

y se le muestra un mensaje en verde con el éxito de la operación.

Ilustración 48 Éxito en poner un turno a la venta

Cuando un turno se pone a la venta, se inserta una nueva fila en la tabla “intercambios” de la

base de datos, con los datos de este turno y de su vendedor

Ilustración 49 Ejemplo de intercambio en base de datos

Page 99: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

99 | P á g i n a

Luego otros alumnos que accedan al mercado podrán ver ese turno que la otra persona ha

puesto a la venta:

Ilustración 50 El turno que se puso a la venta aparece para su compra para el resto de alumnos

El alumno que puede comprar este turno tiene dos opciones, pagar el precio que pide el

alumno vendedor, para ello pulsa en comprar y le aparece el siguiente mensaje. Si da en

aceptar y puede pagar el precio, el turno pasa a ser suyo

Ilustración 51 Mensaje de compra de un turno

Page 100: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

100 | P á g i n a

Si por el contrario decide contraofertar, aparece el siguiente mensaje donde le indica al

vendedor lo que está dispuesto a pagar por el turno.

Ilustración 52 Ventana donde se realiza la contraoferta al vendedor

Cuando se cree la contraoferta se vuelve al mercado y se muestra un mensaje de confirmación

o de error dependiendo de si ha tenido éxito la creación de la contraoferta.

Ilustración 53 contraoferta creada correctamente

Page 101: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

101 | P á g i n a

Al comprobar si la contraoferta se creó en la base de datos se debe consultar la tabla

“contraofertas”. Si todo va bien se habrá introducido una fila en la tabla como la que se muestra

a continuación:

Ilustración 54 Un Intercambio en base de datos

Volviendo al usuario vendedor, si este entra en mercado y comprueba las contraofertas del

turno que tiene en venta

Ilustración 55 Pulsar el botón para ver las contraofertas

Page 102: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

102 | P á g i n a

Si hay contraofertas, se mostrarán todas las que le han hecho los demás usuarios

Ilustración 56 Vista con la lista de contraofertas realizadas al vendedor

Si hay alguna contraoferta que interese se puede vender al alumno que hace la contraoferta. Si

se pulsa en vender aparecerá un mensaje con las instrucciones para aceptar la contraoferta.

Ilustración 57 Instrucciones para aceptar la contraoferta

Page 103: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

103 | P á g i n a

Si se vende el turno al ofertante, se mostrará el siguiente recordatorio al alumno vendedor, ya

que tendrá que apuntarse a otro turno de la práctica que acaba de vender.

Ilustración 58 Recordatorio al vendedor

Una vez finalizada la compra se actualiza la contraoferta en la base de datos, tal y como queda

reflejado en la siguiente imagen:

Ilustración 59 Actualización de la contraoferta

Page 104: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

104 | P á g i n a

También se comprueban los cambios que se producen en la tabla de “intercambios” con el fin

de esta venta. Ahora el intercambio tiene asociado el id del alumno comprador en el campo

“aldestino”.

Ilustración 60 Cambios en "intermedios"

También en reservas habrá cambios ya que para el comprador se crea una reserva con la

compra que acaba de realizar o se actualiza su reserva si ya había hecho una reserva para esa

práctica antes, además el vendedor verá anulada su reserva por el hecho de venderla.

Ilustración 61 Cambios en reserva debidos al intercambio

Page 105: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

105 | P á g i n a

Por último si el alumno comprador va a su perfil, verá el turno que ha comprado o que ha ganado

con su contraoferta en dicho perfil.

Ilustración 62 perfil con el turno comprado/intercambiado

Page 106: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

106 | P á g i n a

6. Conclusiones y mejoras futuras

Page 107: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

107 | P á g i n a

6.1. Conclusiones

El resultado de este proyecto es una primera versión del código de una plataforma web para las

prácticas de las asignaturas del departamento de Ingeniería Electrónica. Esta plataforma web

tiene como principal diferencia, respecto a otras, la inclusión de gamificación para motivar a los

alumnos a cumplir una serie de objetivos en la web de prácticas.

En una primera lectura de este proyecto, este parece estar más relacionado con otras ciencias

más alejadas de la ingeniería, como es el caso de la psicología. Aun así se necesitan bastantes

conocimientos en ingeniería para poder transformar las ideas que expone la teoría de la

gamificación en entornos on-line que sean funcionales.

Una vez aplicada la teoría sobre gamificación dentro del código del sistema desarrollado para

este proyecto, queda comprobar en una prueba real su verdadera eficiencia. Mediante esta

prueba se podrá comprobar si es posible influenciar, mediante entornos webs gamificados, el

comportamiento de los alumnos. En nuestro caso sería un éxito si se consigue con las mecánicas

de juego aplicadas, que los alumnos usen más la web y que estos se repartan de una forma más

equilibrada por los turnos de prácticas gracias a la economía virtual implementada con la

gamificación.

Este proyecto es una rara ocasión donde dos ciencias tan distintas intentan alcanzar un objetivo

común. Esta rareza puede que sea uno de los motivos del “boom” de la gamificación estos

últimos años ya que no es raro ver como todo tipo de webs, aplicaciones y herramientas de

empresas se “gamifican”. Por otro lado este fervor por gamificarlo todo parece no tener la

misma repercusión cuando se habla de su aplicación en la enseñanza y aunque hay muy buenos

ejemplos en este campo como son Duolingo, Coursera o Udacity, aún es raro ver centros y

entidades educativas apostando por ello.

Este PFC es muy modesto comparado con los ejemplos expuestos en el párrafo anterior y tiene

un margen de mejora amplio, pero demuestra que tiene potencial para hacer más eficiente la

docencia y fomentar la implicación de los alumnos en superar los retos de las asignaturas que

cursan.

Page 108: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

108 | P á g i n a

6.2. Mejoras futuras

6.2.1. Sistema de puntuación

6.2.1.1. Leaderboard Tal y como se explicó en el estado del arte, un ranking o leaderboard es una de las mecánicas

que más se usan en entornos gamificados y por tanto sería algo interesante de incluir en futuras

versiones.

Este leaderboard permitirá al alumno ver su clasificación dentro del conjunto de alumnos de la

asignatura y a diferencia de los ranking convencionales, los cuales sólo muestran a los usuarios

con mejor puntuación, el de este proyecto debería mostrar la posición en todo el momento del

alumno que lo consulta.

Saber en todo momento donde se encuentra el alumno dentro del grupo puede ser un motivo

más que le incite a mejorar y cumplir más objetivos de los planteados en el sistema de

gamificación. Este efecto se puede acentuar si además le mostramos quienes son los alumnos

que está a punto de superar y que alumnos están a punto de alcanzarle.

Por último y para que no sean siempre los mismos en los primeros lugares, este leaderboard

deberá mostrar las clasificación de los alumnos según las distintas puntuaciones, monedas y

numero de logras desbloqueados.

6.2.1.2. Estadísticas de usuario Esta ampliación de la zona de administración consiste en hacer una serie de estadísticas de

forma automática según la actividad que generan los alumnos dentro de la plataforma, a lo largo

del curso. Luego los resultados podrían mostrarse mediante gráficas, diagramas de barras,

diagramas de sectores o por el método gráfico que elija el administrador y sea capaz de montar

el desarrollador.

Estas estadísticas se podrían mostrar como un apartado nuevo en el menú de la zona de

administración, cuando se acceda a él se ejecutarían una serie de funciones que nos devolverían

datos como: cuantos alumnos poseen un logro concreto, cuanta gente por día consigue

desbloquearlo, si son los alumnos que repiten la asignatura los primeros en obtenerlos, si son

los chicos o las chicas los que más desbloquean un tipo de logro, etc.

Todos estos datos nos sirven para estudiar el comportamiento de los alumnos y ver cómo

evolucionan. Después estos resultados nos sirven para adaptar y mejorar nuestro entorno de

prácticas a las exigencias de sus usuarios y a la de los objetivos indicados por los profesores.

Toda esta información es posible obtenerla nada más que consultando los contenidos de la base

de datos del sistema, mediante una serie de funciones que estén preparadas para analizar los

datos que se encuentran en ella.

Page 109: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

109 | P á g i n a

6.2.1.3. Logros con niveles Un logro con nivel sería el reconocimiento a una hazaña y a todos los eventos que se quieran

relacionar con esta, aumentando así el prestigio del logro cada vez que el alumno realice uno de

los eventos que el logro tiene asociados.

Un enfoque a la hora de premiar al usuario en los entornos gamificados, suele ser dar un logro

cuando se realiza una tarea por primera vez y otro cuando se completan todas las actividades

de ese mismo tipo. Sin embargo si se usase un logro con nivel, podríamos indicar al alumno cosas

como que ha obtenido un logro de “bronce” por hacer dicha tarea por primera vez, pero que si

quiere el logro de plata tiene que hacerla cinco veces más y por último, si quiere que su logro

sea de oro (máximo nivel), tiene que hacer esa tarea todas las veces que aparezca en la web.

Tener todos los logros de bronce no da el mismo estatus que tenerlos todos de oro, por lo que

se le da al alumno la posibilidad de sentirse “superior” si es capaz de subir sus logros a su máximo

nivel.

6.2.2. Optimización del código

6.2.2.1. Actualizar a php 5 Actualmente el código de la plataforma de prácticas y de la gamificación de esta, se ha

desarrollado para ser compatible con php 4, ya que es lo que se usa en los servidores de las

prácticas.

Por motivos, sobre todo de seguridad, sería recomendable actualizar tanto el código como el

servidor para que sean compatibles con php 5, así sería posible usar otros métodos de login más

robustos que el OpenSSO (legacy) o acceder a la base de datos y recuperar datos de esta, de

forma más robusta, con las funciones de la familia MySQLi o PDO_MySQL.

6.2.2.2. Mejoras en seguridad En esta primera versión del sistema muchos datos de los intercambios e interacciones entre los

alumnos están codificadas, para evitar así que las modificaciones indebidas tengan efecto en el

servidor, además existe una serie de condiciones de seguridad en el código para evitar que nada

de lo comentado se cuele en el servidor o en base de datos. El problema está que la codificación

esta en md5 que es un código que ya se puede descifrar si se busca lo suficiente por la red y las

condiciones de seguridad no contemplan los casi infinitos casos que se pueden dar de ataques

a la web de prácticas. Sería necesario revisar este apartado y aplicar las mejoras que se

consideren oportunas.

Page 110: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

110 | P á g i n a

6.2.3. Diseño web

6.2.3.1. Actualizar diseño a los tiempos actuales El diseño de la web es un factor crítico a la hora de que a la hora de que el usuario se sienta

cómodo con el entorno y se anime a usarlo de forma asidua. Un mal diseño puede provocar que

los alumnos decidan pasar aún menos tiempo del que actualmente pasan en él por lo que se

recomienda revisar el diseño actual.

En este proyecto el diseño es simplemente funcional y no destaca ni por bueno ni por malo ya

que no ha sido uno de los objetivos principales del proyecto. Pero si se quiere usar de forma

correcta un sistema gamificado en la web de prácticas, se debería aplicar en futuras

ampliaciones un nuevo diseño que no sea muy recargado, que esté relacionado con el contenido

de la asignatura tanto en las imágenes que muestra como en los colores que usa, y que en su

conjunto no resulte ni demasiado sobrio o alegre.

6.2.4. Contenido adicional docente

6.2.4.1. Creación de una plataforma de complemento al estudio Esta plataforma se podría usar para que los alumnos adquieran conocimientos extras sobre

temas relacionados con las prácticas o con el temario de la asignatura. Se podría usar las

mecánicas de logros, intercambios y puntuaciones para fomentar que los alumnos accediesen a

realizar estudios extra como lecciones, test y ejercicios on-line.

Por supuesto todas están actividades adicionales deben corregirse de forma autónoma y así no

sobrecargar a los profesores con correcciones adicionales. A la hora de desarrollarlas se debe

tener en cuenta esta autocorrección. Otra ventaja de esta autocorrección es que permite al

alumno ver si hace bien las actividades en el momento, pudiéndose así centrar en otras tareas

de la plataforma en vez de comprobar cada poco tiempo si le han corregido las tareas.

Con un par de añadidos sencillos de este tipo por práctica, se puede conseguir que el alumno

adquiera conocimientos que los profesores consideran de interés si el alumno decide usar los

contenidos que tiene disponibles en la plataforma.

6.2.4.2. Entorno que relacione lo que aprende el alumno con el mundo

real Al igual que el apartado anterior, se podría usar esta plataforma para mostrar aplicaciones reales

de los conocimientos que se adquieren en las prácticas.

Muchas veces los alumnos no entienden muy bien porque es importante realizar una u otra

práctica por lo que si se usase la plataforma para mostrar contenido que explicase para que sirve

lo que aprenden, en el mundo exterior al universitario, el interés de los alumnos por saber más

aumentaría. Este contenido se podría mostrar en forma de artículos, vídeos, webminars o

conferencias que estén disponibles en la red.

Page 111: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

111 | P á g i n a

Anexo A: Instrucciones para administrar y crear logros

Page 112: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

112 | P á g i n a

1. Manual de la nueva zona de administración

A la zona de administración ya existente, se le ha añadido una nueva sección llamada

Puntuaciones y Logros. Cuyas subsecciones se explican a lo largo de este manual ya que son las

que se encargan de la creación, modificación y gestión tanto de las recompensas que se van a

dar en este sistema como de los contenidos extras que van asociados a las prácticas de la

asignatura.

Este nuevo apartado se compone de tres secciones: Gestión de logros, Asistencia a prácticas y

Gestión de vídeos. Estos nuevos apartados son accesibles desde el menú, tal y como se puede

ver en las imágenes que ilustran este manual. Como nota, indicar que el apartado otros se deja

para futuras ampliaciones del proyecto.

1.1. Gestión de logros En esta nueva sección es donde podemos crear y editar los diferentes logros de la plataforma.

Un logro es una recompensa que se le concede al alumno una vez que este ha realizado una

serie de acciones en la web o en las prácticas de la asignatura.

Tal y como se puede apreciar en la vista siguiente, un logro en nuestro sistema gamificado

cuenta con varias partes: Un nombre, una pequeña descripción, un tipo, una lógica y un valor

en puntos y otro en monedas.

Ilustración 63 Ventana principal de la página de “Gestión de logros” en administración

Para crear un nuevo logro simplemente basta con rellenar el campo del nombre, descripción y

seleccionar un valor para el tipo, lógica, puntos y monedas. Una vez seleccionado y rellenado

Page 113: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

113 | P á g i n a

todo se pulsa en crear y el nuevo logro aparecerá en la tabla de “Logros Creados” con todos

los datos que lo definen.

Para crear el logro de acuerdo a nuestras ideas, es necesario elegir bien lo que queremos incluir

en él. Todas las opciones posibles a la hora de crear un logro es algo que no queda claro en el

párrafo anterior donde se describe como crearlos. Por ello, a continuación, se explica un poco

más detenidamente cada uno de los componentes de un logro:

Nombre: Palabra o frase corta que debe dar una idea general de lo que recompensa el

logro. Por ejemplo si un alumno asiste a la práctica I, una serie de nombres adecuados

para el logro que recompensa la asistencia a esa práctica serían: “Asististes a la Practica

I”, “Has completado la primera práctica” o “Has hecho la práctica I”.

Descripción del logro: Es una frase que explica un poco más detalladamente que es lo

que tienen que hacer los alumnos para obtener este logro. Siguiendo con el ejemplo

del logro de asistir a la práctica I, si su nombre fuese “Práctica I” su descripción podría

ser “Has asistido a la práctica I de la asignatura ¡ya te queda una menos!”

Combinando el nombre con la descripción del logro se pueden crear logros con un

lenguaje serio o distendido, según las preferencias de cada uno. Eso sí para que tengan

un impacto mayor en la gamificación se recomienda algo intermedio, ni algo

demasiado sobrio ni técnico, ni nada extrovertido o demasiado vulgar.

Tipo: En la plataforma existen tres tipos de puntuaciones: Experiencia, Habilidad y

Karma. Por lo que al elegir tipo, seleccionamos a que puntuación de estas tres, se le va

a sumar los puntos que da el logro. Cada uno es libre de elegir que tipo de puntuación

elegir para su logro, pero cada tipo esta pensado para una serie de comportamientos

por parte del alumno:

o Experiencia: Esta pensado para tareas rutinarias y que todos los alumnos

pueden conseguir si realizan las prácticas. Este tipo sería ideal para puntuar la

asistencia a las prácticas, entregas de memorias obligatorias, etc.

o Habilidad: Esta recomendado para tareas que requieren un trabajo extra

voluntario por parte del alumno, un ejemplo serían los logros que puntúan por

ver el contenido extra de una práctica.

o Karma: Esta puntuación indica el nivel de compromiso del alumno con tareas

que se llevan a largo plazo, un ejemplo de logro que puntuaría aquí sería el que

recompensa por asistir a todas las prácticas de un cuatrimestre.

Lógica: Este campo indica el tipo de comportamientos del alumno que debe detectar

el sistema para concederle el logro. Para esta primera versión, esta implementado

código para detectar los siguientes comportamiento:

o Asistencia: Se usa para logros que puntúen la asistencia del alumno a una

práctica. Cuando crees un logro de este tipo aparecerá un campo extra que te

pide que le asocies una práctica de la asignatura, una vez elegida, será la

asistencia a esa práctica por parte del alumno, la que desbloqueará el logro.

Page 114: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

114 | P á g i n a

o Visionado de contenido: Es la lógica que se debe escoger si se quiere dar un

logro al alumno por ver todo el contenido extra asociado a una práctica. En los

logros con esta lógica aparece una opción que sirve para asociarle los

contenidos extra a este logro, cuando se pulse en ella te lleva a una vista similar

a la siguiente, en la cual aparecen todos los contenidos que se pueden asociar y

todos los que tiene ya asociados este logro. Se puede asociar y deasociar

contenidos extras al logro como se desee.

Puntos: En este selector puedes elegir que cantidad de puntos da este logro al alumno

por desbloquearlo. Las tareas más sencillas y repetitivas son las que menor puntuación

deberían dar, mientras que las más complicadas son las que deberían dar las más altas

Monedas: Este es otro selector de puntuación, en este caso se debe elegir cuantas

monedas se deben dar al alumno por desbloquear este logro, al igual que los puntos

cuanto más difícil sea obtener el logro más monedas debería darse al alumno. Recuerda

que las monedas son el “dinero” que se usa en la plataforma por lo que hay que ser

consecuente con lo que se da con cada logro.

Ilustración 64 Página donde se asocian los contenidos extras a las distintas prácticas

Page 115: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

115 | P á g i n a

Al final de esta sección de Gestión de Logros también se muestran los logros que se han borrado.

Para borrar un logro solo hace falta pulsar “borrar” en el logro deseado en la tabla de Logros

Creados. Todos los logros borrados aparecerán en esta tabla de Logros Borrados, en esta tabla

cada logro tiene dos opciones, activar y eliminar, con la primera se devuelve el logro a la tabla

de Logros Creados y con la segunda se elimina completamente la existencia del logro en el

sistema.

Ilustración 65 En la parte final de la vista de logros, en administración, se muestran los logros en estado borrado

Si hay alguna opción en el logro que se quiere modificar por una u otra razón, basta con pulsar

en Editar en el logro objetivo que se encuentra en la tabla de Logros Creados. Esta acción nos

lleva a la siguiente página de edición donde aparecen los valores actuales del logro y los campos

para editar dichos valores. Para guardar los cambios hay que pulsar en Actualizar y una vez se

termine de editar pulsa Fin Edición para salir de esta vista.

Ilustración 66 Vista de la página de edición de un logro ya existente

Page 116: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

116 | P á g i n a

1.2. Asistencia a prácticas

En esta sección se puede ver a todos los alumnos de la asignatura y consultar si han asistido o

no a las prácticas de esta. Para modificar el estado de asistencia del alumno a una práctica,

solamente hay que elegirlo en el selector que aparece a la derecha de cada práctica del alumno.

Una vez seleccionado el valor del estado se actualiza automáticamente.

Ilustración 67 Vista de la lista de asistencia a prácticas

1.3. Gestión de videos

En esta subsección se puede añadir contenidos extras a la plataforma (vídeos u otro

contenido) y ver una lista con todos los que existen en la asignatura.

Ilustración 68 Página para la creación de contenido extra (videos u otra url)

Page 117: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

117 | P á g i n a

Para añadir un nuevo contenido es suficiente con escribir la url de este y asociarle una práctica.

Cuando el alumno asista a dicha práctica, este contenido extra le estará disponible en su página

personal de contenido extra.

Si se quiere modificar un contenido, hay que pulsar en Editar, una vez hecho esto aparecerá la

siguiente pestaña de edición con los valores actuales del contenido y los campos para

modificarlos. Si se pulsa en Actualizar se guardarán los cambios realizados y cuando se pulse en

Fin Edición, se sale de esta ventana y se vuelve a mostrar la vista de Gestión de vídeos.

Ilustración 69 Página para editar un contenido extra creado anteriormente

Page 118: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

118 | P á g i n a

Anexo B: Código fuente

Page 119: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

119 | P á g i n a

En este anexo se explica de forma breve la función que cumple cada uno de los ficheros creados

en este proyecto. Si se quiere consultar el código este está disponible en el siguiente enlace:

https://onedrive.live.com/redir?resid=21750F359FF4A6BE!22958&authkey=!AH0hmo2uH9wiu

_s&ithint=folder%2c

1. Ficheros de la zona usuario

1.1. ce2t.php y common.php Ambos ficheros contienen lo mismo, que es la mayoría de funciones de uso común en la zona

de usuario por parte de la web, las nuevas funciones que se han añadido a estos archivos están

detalladas en el apartado de funciones de esta memoria.

1.2. Config.php Aquí están las distintas configuraciones del sistema y de la base de datos. En él se han añadido

algunas cosas como la librería OpenSSO y creación de objetos OpenSSO. Además se añaden las

siguientes variables para la configuración de los logros e intercambios:

$valores_logica

Es un array que muestra los valores que puede tomar el campo “lógica del logro” a la

hora de crear un logro.

$preciosesion

Es la variable que indica el precio inicial de las sesiones, este precio es la referencia para

las funciones que calculan los precios de los turnos.

$incremento

Indica cuanto tiene que aumentar el precio del turno por cada plaza que se ocupe.

$pagos

Indica los distintos estados en los que puede estar el pago de una reserva

o 0 si no se pagó

o 1 si se pagó

o 2 si se anuló la reserva, por ejemplo, por comprarle el turno de esa práctica a

otro alumno, porque el alumno se dio de baja en ese turno, etc.

o 3 esta reserva perteneció antes a otro alumno.

$contraoferta

Son los estados en los que pueden estar las contraofertas:

o 0 si está a la espera de ser comprada

o 1 si el vendedor acepta la contraoferta

o 2 si se anuló la contraoferta ya sea porque el vendedor no la seleccionó o este

turno fue eliminado antes de venderse.

$estados_inter

Estados de los intercambios. 'espera' (0) indica que ese intercambio aún está disponible

para que otro alumno lo compre. 'cambio' (1) indica que ese intercambio encontró

nuevo dueño y si esta 'anulado' (2) es que el intercambio ya no existe.

$precio_venta

Rango de valores de precios permitidos para realizar las compras e intercambios.

Page 120: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

120 | P á g i n a

1.3. contenido.php En este archivo esta la funcionalidad que permite al sistema comprobar si un alumno ha visto o

no parte del contenido extra asociado a la práctica.

Primero verifica si el alumno esta logado y existe en la asignatura, si el alumno es parte de los

alumnos de la asignatura y pulsa en un contenido extra, se ejecuta una serie de consultas en

base de datos para ver si el alumno ya había visto o no este contenido. Si es la primera vez que

lo ve, se añade en base de datos el hecho de que este contenido ha sido consultado.

1.1. contraofertas.php En él está contenido el código de las operaciones que usa el sistema para gestionar las

contraofertas.

Lo primero que realiza es comprobar que el alumno pertenece a la asignatura y que esta logado.

Después de esto puede que las operaciones del documento se usen para consultar las

contraofertas que otros le han hecho o para aceptar una contraoferta, con las correspondientes

actualizaciones de la base de datos asociadas al hecho de aceptar la contraoferta.

1.2. loginusr.php Este documento es el encargado de todo el proceso de autenticación cuando el alumno pulsa

en el botón de login en la página de prácticas.

1.3. logros.php En este archivo se encuentran las funciones que comprueban si un logro está o no

desbloqueado, cuando esta comprobación se tiene que hacer desde la zona usuario. Para más

información sobre las funciones de este archivo, consultar el apartado de funciones.

1.4. mercado.php Aquí es donde está todo el código asociado con el mercado de turnos al que tienen acceso los

alumnos. Al igual que en otros ficheros lo primero que se comprueba con el código es que el

alumno que accede al mercado esta autenticado por el UVUS y existe en la lista de alumnos de

la práctica.

Este este archivo también se gestionan las operaciones asociadas a la puesta en venta de un

turno, a la compra directa de alguno de los turnos en venta, o las funciones a ejecutar cuando

el alumno manda una contraoferta a otro alumno. En este archivo también están las consultas

y actualizaciones de la base de datos asociadas a estas operaciones.

1.5. perfil.php Aquí se realizan las consultas a la base de datos sobre el alumno, para obtener toda la

información de puntuaciones, logros y turnos de este y poder mostrársela así en la vista de su

perfil.

Page 121: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

121 | P á g i n a

1.6. practica.php En este archivo se han realizado una serie de modificaciones con respecto a lo que ya existía,

ahora no es necesario usar el DNI si se comprueba que el alumno esta logado y pertenece a la

asignatura, además se comprueba con este código el precio de los turnos y se actualiza según

las plazas libres en cada turno.

Otra cosa de la que se encarga este código es la comprobación de que el alumno puede pagar o

no el turno, en caso negativo asigna un turno de forma automática y se inscribe al alumno en el

último turno con plazas libres. Así aunque el alumno no tenga monedas siempre podrá

inscribirse a un turno aunque no sea de su elección.

2. Vistas creadas para la zona de usuario

2.1. contenido.tpl Vista que se encarga de mostrar al alumno el contenido extra de las prácticas a las que ha

asistido.

2.2. contraofertas.tpl Es la página del mercado donde se le muestra al alumno todas las ofertas que le han hecho a

uno de los turnos que ha puesto en venta.

2.3. login.tpl Es el componente que muestra el botón de login o el nombre del alumno si este esta logado en

la web de prácticas.

2.4. mercado.tpl En esta vista se muestran todos los turnos que otros alumnos tienen a la venta, al final de la

página el alumno que accede al mercado, puede ver los turnos que puso a la venta.

2.5. perfil.tpl Es la vista principal donde se muestra al alumno sus puntuaciones, turnos y logros

desbloqueados.

2.6. pracscambios.tpl Es la plantilla donde se muestran las prácticas disponibles en la asignatura y el acceso al

mercado.

Page 122: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

122 | P á g i n a

3. Ficheros de la zona administración Para acceder a estos ficheros hay que entrar en la carpeta admin. Estos nuevos archivos son los

que añaden la gestión de los logros y de la asistencia a prácticas de los alumnos, en la zona de

administración.

3.1. asistencia.php Es el encargado de crear la lista de alumnos de la asignatura y actualizar el estado de asistencia

a cada una de las prácticas si el administrador cambia el estado de alguna de ellas.

3.2. asociarvideos.php El código de este fichero se encarga de asociar un link de contenido extra a un logro existente

que tenga algo que ver con la visualización de contenido extra. Se encarga de guardar las nuevas

relaciones logro-contenido que se creen y de borrar las relaciones que se seleccionen como no

necesarias.

3.3. ce2t.php y common.php Al igual que los de la zona usuario, ambos tienen el mismo contenido y en ellos están las

funciones de uso más común en la zona de administración. Para más información sobre las

funciones que se han introducido en ellos con este proyecto, consultar la sección de funciones.

3.4. config.php En este documento las principales modificaciones han sido las variables que se han añadido para

representar estados o valores iniciales:

$iniciales

Cantidad de monedas con las que empiezan todos los alumnos.

$valores_logros

Es un array que muestra los valores en puntos de experiencia que podemos asignar a un

logro en su creación. Cada fila que se añada a este array será una nueva puntuación

asignable a los logros.

$valores_tipo

Valores que puede tomar el tipo del logro a la hora de crearlo. La etiqueta inicio y fin

deben de estar siempre en la primera y última fila del array para que $opciones tipo

tome los valores correctos.

$valores_logica

Valores que puede tomar el campo lógica a la hora de crear un logro.

$valores_monedas

Un array similar a $valores_logros solo que en este caso las filas representan el número

de monedas que se asignan al logro.

$opciones_logica y $opciones_tipo

Diferentes opciones de validación, este tipo de opciones solo es válido para indicar si el

valor del campo está dentro de un rango de valores correctos que va desde min_range

a max_range.

$validacion

Estado inicial de una validación.

$precionsesion

Precio inicial de las sesiones, este precio variará según la demanda que exista de ese

turno.

Page 123: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

123 | P á g i n a

$estadoses

El campo 'pagado' indica el estado de una reserva

o si su valor es 0 es que aún no se pagó la reserva

o Si su valor es 1 el alumno pago ya por esa reserva

o si su valor es 2 el alumno canceló esa reserva, por ej. por comprar el turno de

otro alumno a esa práctica.

3.5. logrocrear.php Es el encargado de crear un logro según los datos que recibe del formulario de creación y de

comprobar que ese logro se puede crear con esos datos. Además es capaz de resolver

particularidades asociadas al tipo de lógica de un logro como es la asociación de una práctica al

mismo.

Las acciones de borrar, reactivar o eliminar un logro también se definen en este archivo.

3.6. logroeditar.php Si un logro se edita, todas las funcionalidades asociadas a esta edición se encuentran aquí. Por

lo general son todo funciones de actualización de los valores de campos de un logro, en la base

de datos.

3.7. logros.php Aquí se pueden ver las funciones que comprueban si un logro esta desbloqueado, cuando esta

comprobación se tiene que hacer desde la zona de administración. En la sección de funciones

vienen explicadas de forma más extensa las funciones de este archivo.

3.8. videos.php El código que aquí se representa es el que se encarga de añadir nuevos contenidos extras a una

práctica, también se encarga de borrar estas relaciones si así se le pide.

3.9. videoeditar.php En este se encuentran todas las funciones de actualización del valor de los campos de un

contenido extra que hay en la base de datos, si el administrador decide modificar dichos valores.

4. Vistas creadas para la zona de administración

4.1. asociarvideos.tpl Vista que muestra todos los contenidos extras que se pueden asociar a un logro y también nos

dice los contenidos que ya están asociados a dicho logro.

4.2. asistencia.tpl En esta vista se muestra la lista de alumnos de la asignatura y el estado de asistencia a las

prácticas de cada uno. En ella es donde el administrador puede cambiar el estado de asistencia

a las prácticas.

4.3. logrocrear.tpl Contiene el formulario de creación de logros. Aquí también se muestran los logros creados y los

logros que están borrados.

Page 124: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

124 | P á g i n a

4.4. logroeditar.tpl Aquí está el formulario para editar un logro ya existente.

4.5. videos.tpl En esta página se encuentra el formulario para crear relaciones entre las prácticas y los

contenidos extras, debajo de este formulario se muestran las relaciones ya existentes.

4.6. videoseditar.tpl Es la vista que contiene el formulario para editar las relaciones de un contenido extra con una

práctica, que se hayan decidido cambiar.

Page 125: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

125 | P á g i n a

Anexo C: Bibliografía

Page 126: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

126 | P á g i n a

1. Teoría sobre la gamificación

Fecha de consulta Información sobre la referencia bibliográfica

8/12/2013 Teoría sobre blogs y otros sistemas gamificados. http://www.yukaichou.com/gamification-examples/yukai-chou-gamified-gamification-blog/ Artículo sobre que es la gamificación: http://www.yukaichou.com/gamification-examples/what-is-gamification/

16/12/2013 Sistemas de puntuación en e-learning para motivar al usuario http://www.docebo.com/2013/06/14/elearning-gamification-point-management-engage-motivate-users/ Paper y otras informaciones sobre como Deloitte aplica la gamificación entre sus empleados y secciones. http://www.deloitte.com/view/en_US/us/Services/consulting/technology-consulting/e53b217fb162c310VgnVCM1000003256f70aRCRD.htm

27/12/2013 Conferencias on-line sobre las ventajas del mundo gamificado: 1. Seth Priebatsch: la capa de juego por encima del mundo |

Video on TED.com 2. Jane McGonigal: Gaming can make a better world | Video on

TED.com

Edición 2011 "Gamification by Desing" Gabe Zichermann Ed: O´Reilly

3/1/2014 Historia sobre la gamificación: 1. Entrada sobre Heródoto

https://es.wikipedia.org/wiki/Her%C3%B3dotohttps://es.wikipedia.org/wiki/Her%C3%B3dotohttps://es.wikipedia.org/wiki/Her%C3%B3dotohttps://es.wikipedia.org/wiki/Her%C3%B3doto

2. El reino de Lydia y viajes de Heródoto por dicho territorio http://www.ancient.eu.com/article/81/

3. Entrada sobre el reino de Lydia https://en.wikipedia.org/wiki/Lydia

4. Entrada sobre los Tyrsenios https://en.wikipedia.org/wiki/Tyrsenians

7/1/2014 Información sobre el pensamiento lateral, el cual se usa en el desarrollo de los sistemas ludificados/gamificados. https://es.wikipedia.org/wiki/Pensamiento_lateral

Page 127: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

127 | P á g i n a

2. Mecánicas y técnicas de juego

Fecha de la consulta Información sobre la referencia bibliográfica

8/12/2013 Múltiples sistemas de puntuación en un sistema gamificado http://www.dummies.com/how-to/content/multiple-point-systems-and-why-to-use-them-in-gami.html

9/12/2013 Ocho técnicas que han tenido éxito en las experiencias gamificadas http://www.yukaichou.com/gamification-study/8-core-drives-gamification-2-development-accomplishment/

11/12/2013 Como equilibrar las puntuaciones en un sistema gamificado http://www.dummies.com/how-to/content/how-to-weigh-points-in-a-business-gamification-sys.html

16/12/2013 Paper con técnicas de juego para influenciar el comportamiento http://www.bunchball.com/sites/default/files/downloads/gamification101.pdf

3. Entorno de desarrollo LAMP

Fecha de la consulta Información sobre la referencia bibliográfica

2/12/2013 ¿Qué es LAMP? https://en.wikipedia.org/wiki/LAMP_%28software_bundle%29 Habilitar un entorno LAMP en un equipo con Ubuntu http://www.howtoforge.com/ubuntu_debian_lamp_server http://www.wikihow.com/Build-a-LAMP-Server

4. Apache

Fecha de la consulta Información sobre la referencia bibliográfica

7/12/2013 Comandos básicos del manejo de un servidor Apache http://httpd.apache.org/docs/2.2/es/stopping.html Problemas de direccionamiento y permisos típicos con Apache http://stackoverflow.com/questions/10842004/setting-up-apache-the-var-folder-cannot-be-written-to

Page 128: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

128 | P á g i n a

5. PHP

Fecha de la consulta Información sobre la referencia bibliográfica

2/12/2013

Conceptos básicos de php http://www.php.net/manual/es/getting-started.php

5/2/2013 Formularios en PHP http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=580:procesar-datos-de-un-formulario-html-en-php-con-post-ejercicios-resueltos-y-ejemplos-cu00831b-&catid=70:tutorial-basico-programador-web-php-desde-cero&Itemid=193 Select en PHP http://www.desarrolloweb.com/articulos/1576.php Bases de datos y tablas en php http://www.comocrearmiweb.com/2013/02/crear-base-de-datos-y-tablas-desde-php.html Crear base de datos e insertar tablas en php http://phpbasico.freevar.com/temas/php14_2.php

11/2/2014 Función isset() de php http://www.elcodigofuente.com/uso-funcion-isset-php-700/

12/2/2014 Uso del WHERE http://www.w3schools.com/php/php_mysql_where.asp Seleccionar una columna de una tabla de la base de datos http://stackoverflow.com/questions/7380161/mysql-fetch-column-value-of-particular-row Bucles y tablas de bases de datos http://stackoverflow.com/questions/7821203/mysql-select-specific-value-from-a-fetched-array

20/2/2014 Ejemplo de Login en PHP http://php.about.com/od/finishedphp1/ss/php_login_code.htm Uso de cookies en PHP http://www.php.net/manual/es/reserved.variables.cookies.php

7/3/2014 Ejemplos de validaciones en php http://www.php.net/manual/es/filter.examples.validation.php Funciones de filtrado en php http://www.php.net/manual/es/function.filter-input-array.php

Page 129: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

129 | P á g i n a

24/3/2014 Mysql_result() http://www.php.net/manual/es/function.mysql-result.php Division de strings http://www.php.net/manual/es/function.preg-split.php

12/4/2014 date() http://php.net/manual/en/function.date.php

6. Base de datos y phpMyAdmin

Fecha de la consulta Información sobre la referencia bibliográfica

19/12/2013 Documentación de phpMyAdmin https://phpmyadmin-spanish.readthedocs.org/en/latest/index.html

30/12/2013 Inserción de tablas http://www.aulaclic.es/dreamweavercs3/t_19_13.htm

21/1/2014 Relacionar tablas http://www.mailxmail.com/como-relacionar-tablas-phpmyadmin-mysql_h

27/1/2014 Entrada sobre bases de datos relacionales http://es.wikipedia.org/wiki/Base_de_datos_relacional Entrada sobre la normalización de una base de datos http://es.wikipedia.org/wiki/Normalizaci%C3%B3n_de_una_base_de_datos PDF sobre el modelado relacional http://elvex.ugr.es/idbis/db/docs/intro/D%20Modelo%20relacional.pdf

28/1/2014 Manejo de “Inner Join” http://www.blogdephp.com/consulta-mysql-inner-join-para-unir-tablas-relacionadas/ Diferentes tipos de tablas en la base de datos http://stackoverflow.com/questions/707874/differences-between-index-primary-unique-fulltext-in-mysql Mysql y gestiones de la base de datos http://idesweb.es/proyecto/proyecto-prac10-php-mysql-acceso-base-de-datos

Page 130: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

130 | P á g i n a

31/1/2014 Tutorial php y Mysql http://www.tizag.com/mysqlTutorial Artículo sobre los JOIN http://www.sitepoint.com/understanding-sql-joins-mysql-database/

1/2/2014 Manual sobre INNER JOIN http://www.w3schools.com/sql/sql_join_inner.asp Problemas al usar INNER JOIN y posible solución http://stackoverflow.com/questions/14082524/inner-join-more-than-2-tables-in-a-single-database

11/2/2014 Formularios y while loops http://www.webmasterworld.com/php/4269477.htm Como funciona $_POST y su relación con los formularios http://elpelucasapbe.foro-chile.net/t37-uso-de-_post-form-html-php Selección de campos en filas de las tablas de la base de datos http://foro.elhacker.net/desarrollo_web/como_se_selecciona_un_campo_de_la_ultima_fila_en_mysql-t130339.0.html

15/2/2014 Mysql y las subconsultas https://dev.mysql.com/doc/refman/5.0/es/subqueries.html Más información sobre las subconsultas http://www.aulaclic.es/sql/t_5_1.htm SELECT anidados http://www.desarrolloweb.com/faq/select-anidados-mysql.html

16/2/2014 Comandos mysql en php http://www.bufa.es/diferencias-mysql_fetch/

20/2/2014 $_cookie http://www.php.net/manual/es/reserved.variables.cookies.php

27/2/2014 msqli_query http://www.php.net/manual/es/mysqli.query.php msqli_fetch_array http://es1.php.net/mysqli_fetch_array

28/3/2014 Curso de mysql http://mysql.conclase.net/curso/?sqlfun=COUNT

Page 131: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

131 | P á g i n a

7. Mockup y bocetos

Fecha de la consulta Información sobre la referencia bibliográfica

16/01/2014 Código de colores de las resistencias http://www.digikey.com/web%20export/mkt/general/mkt/resistor-color-chart.jpg Web del programa para hacer el mockup http://basamiq.com/

8. Smarty, CSS y HTML

Fecha de la consulta Información sobre la referencia bibliográfica

6/12/2013 Ejemplos con Smarty http://www.smarty.net/sampleapp1 Web principal de Smarty http://www.smarty.net/ Como instalar Smarty http://wiki.pachogrande.com/howto/quick-smarty-install

15/12/2013 Tutorial de Smarty y PHP http://www.youtube.com/watch?v=5xLfvY8upsQ Instalar Smarty en Ubuntu http://www.rafshare.org/install-smarty-on-ubuntu/

24/1/2014 Ejemplos con Smarty http://www.tufuncion.com/smarty-templates-php Smarty Class http://www.smarty.net/docs/en/api.compile.all.templates.tpl

30/1/2014 La clase method() de Smarty http://www.smarty.net/docsv2/es/api.assign.tpl

11/2/2014 Funciones integradas de Smarty http://www.smarty.net/docsv2/es/language.function.section.tpl El atributo type de HTML input http://www.w3schools.com/tags/att_input_type.asp

Page 132: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

132 | P á g i n a

Dudas sobre los input text http://stackoverflow.com/questions/3676127/how-do-i-make-a-text-input-non-editable If, else y elseif en smarty http://www.smarty.net/docsv2/es/language.function.if.tpl

16/2/2014 Tutorial sobre formularios html http://www2.uca.es/serv/sc/manual-html/form.htm

18/2/2014 Establecer en un select un valor por defecto http://stackoverflow.com/questions/3518002/how-to-set-default-value-for-html-select-element Diseño de páginas con HTML http://www.monografias.com/trabajos91/lenguaje-html/lenguaje-html2.shtml Input control types http://www.w3.org/TR/html401/interact/forms.html#input-control-types

27/2/2014 Convertir un href en un botón mediante CSS http://stackoverflow.com/questions/8357058/how-to-make-a-href-link-look-like-a-button

6/3/2014 Incluir JS en un documento HTML http://librosweb.es/javascript/capitulo_1/como_incluir_javascript_en_documentos_xhtml.html Escaping Smarty Parsing http://www.smarty.net/docsv2/es/language.escaping.tpl

Manejo de JavaScript y PHP en plantillas de Smarty http://dev.wsnetcorp.com/2012/05/manejo-de-javscript-y-php-en-

plantillas-de-smarty/ links absolutos y relativos http://www.motive.co.nz/glossary/linking.php?ref La etiqueta <a> de html http://www.w3schools.com/tags/tag_a.asp

12/4/2014 Scrollbar en las divisiones html http://stackoverflow.com/questions/2566290/html-how-to-create-a-div-with-only-vertical-scroll-bars-for-long-paragraphs Crear ventanas modales mediante CSS y sin JS http://www.nosolocss.com/blog/css/crear-ventanas-modales-usando-solo-css-y-su-selector-target

Page 133: Ludificación del sistema web de reserva de turnos de prácticasbibing.us.es › proyectos › abreproy › 12208 › fichero › ...9 | P á g i n a 1.1. Introducción Un problema

133 | P á g i n a

Alineación vertical en HTML http://vagabundia.blogspot.com/2010/02/alinear-verticalmente.html

9. JavaScript

Fecha de la consulta Información sobre la referencia bibliográfica

22/03/2014 Formularios y JavaScript http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml Enviar formulario a través de JavaScript https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript