Wishten: Aplicación web para el acercamiento con el mundo laboral y el aprendizaje a través de vídeos
Abstract
El presente trabajo tiene como objetivo proporcionar a los estudiantes un complemento de estudio basado en la visualización de vídeos que podrán incluir cuestionarios. El uso de cuestionarios dentro de los vídeos tiene como finalidad ayudar a retener mejor la información aprendida durante la visualización del vídeo. Para este fin, se ha desarrollado una aplicación web llamada Wishten en la que los usuarios pueden subir vídeos y añadir cuestionarios dentro de los mismos. Wishten también tiene como objetivo ofrecer una alternativa a la hora de buscar prácticas y ofertas de empleo a todos aquellos estudiantes que las están buscando. Para ello, se les ofrecerá un portal de búsqueda de ofertas intuitivo y fácil de utilizar, integrado en la propia aplicación. Para poder desarrollar la aplicación, se ha utilizado el framework de Laravel y una arquitectura basada en el modelo cliente-servidor. Esta aplicación se ha implementado desde cero por no existir otras similares. La aplicación se ha desarrollado buscando ser lo más intuitiva y fácil de utilizar para los usuarios. Para comprobarlo, se han realizado diversas pruebas a varios usuarios de las cuales se han obtenido resultados positivos.
Full text
Wishten: Aplicación web para el acercamiento con el mundo laboral y el aprendizaje a través de vídeos Wishten: Web application for managing labor market and learning using videos Trabajo de Fin de Grado Curso 2022–2023 Autores Roberto Tejedor Moreno Enrique Martín Rodríguez Director Javier Bravo Agapito Grado en Ingeniería Informática Facultad de Informática Universidad Complutense de Madrid
Wishten: Aplicación web para el acercamiento con el mundo laboral y el aprendizaje a través de vídeos Wishten: Web application for managing labor market and learning using videos Trabajo de Fin de Grado en Ingeniería Informática Autores Roberto Tejedor Moreno Enrique Martín Rodríguez Director Javier Bravo Agapito Convocatoria: Septiembre 2023 Grado en Ingeniería Informática Facultad de Informática Universidad Complutense de Madrid 28 de septiembre de 2023
Agradecimientos Agradecimientos al profesor y director del presente Trabajo de Fin de Grado, D. Javier Bravo Agapito, por su disposición a ser el director del trabajo, por su disponibilidad total a la hora de concretar tutorías y por la ayuda y ejemplos proporcionados a lo largo de todo el desarrollo del proyecto. Agradecimientos también a todas aquellas personas que participaron y que invirtieron su tiempo para realizar las encuestas y pruebas llevadas a cabo durante el desarrollo del proyecto. v
Resumen Wishten: Aplicación web para el acercamiento con el mundo laboral y el aprendizaje a través de vídeos El presente trabajo tiene como objetivo proporcionar a los estudiantes un complemento de estudio basado en la visualización de vídeos que podrán incluir cuestionarios. El uso de cuestionarios dentro de los vídeos tiene como finalidad ayudar a retener mejor la información aprendida durante la visualización del vídeo. Para este fin, se ha desarrollado una aplicación web llamada Wishten en la que los usuarios pueden subir vídeos y añadir cuestionarios dentro de los mismos. Wishten también tiene como objetivo ofrecer una alternativa a la hora de buscar prácticas y ofertas de empleo a todos aquellos estudiantes que las están buscando. Para ello, se les ofrecerá un portal de búsqueda de ofertas intuitivo y fácil de utilizar, integrado en la propia aplicación. Para poder desarrollar la aplicación, se ha utilizado el framework de Laravel y una arquitectura basada en el modelo cliente-servidor. Esta aplicación se ha implementado desde cero por no existir otras similares. La aplicación se ha desarrollado buscando ser lo más intuitiva y fácil de utilizar para los usuarios. Para comprobarlo, se han realizado diversas pruebas a varios usuarios de las cuales se han obtenido resultados positivos. Palabras clave Aplicación web, aprendizaje basado en vídeos interactivos, portal de empleo y prácticas, Laravel vii
Abstract Wishten: Web application for managing labor market and learning using videos The present work aims to provide students with a study supplement based on the viewing of videos that may include quizzes. The use of quizzes within the videos is intended to help better retain the information learned during video viewing. To this end, a web application called Wishten has been developed where users can upload videos and add quizzes within the videos. Wishten also aims to offer an alternative when looking for internships and job offers to all those students who are looking for them. To this end, they will be offered an intuitive and easy-to-use job search portal, integrated into the application itself. In order to develop the application, the Laravel framework and an architecture based on the client-server model have been used. This application has been implemented from scratch because there are no other similar ones. The application has been developed looking to be as intuitive and easy to use for users. To prove it, several tests have been carried out to several users and positive results have been obtained. Keywords Web application, interactive video-based learning, job and internship portal, Laravel ix
4.23. Vista login ................................. 66 4.24. Vista registration ............................. 66 4.25. Vista profile ................................ 67 4.26. Vista follows ............................... 67 4.27. Vista adminUsers ............................. 68 4.28. Vista newVideo .............................. 69 4.29. Estructura de almacenamiento de los vídeos . . . . . . . . . . . . . . 70 4.30. Vista home ................................ 70 4.31. Vista videoWatch ............................. 71 4.32. Vista videoEdit .............................. 71 4.33. Vista adminVideos ............................ 72 4.34. Vista videoWatch de un vídeo bloqueado . . . . . . . . . . . . . . . . 72 4.35. Vista addQuiz ............................... 73 4.36. Vista videoWatch - Respondiendo una pregunta . . . . . . . . . . . . 74 4.37. Vista videoStats .............................. 74 4.38. Vista newOffer .............................. 75 4.39. Vista adminOffers ............................ 75 4.40. Vista offerEdit .............................. 76 4.41. Vista offerHome desde usuario con rol company oadmin ....... 76 4.42. Vista offerHome desde usuario con rol standard ............ 77 4.43. Estructura de almacenamiento de los documentos asociados a las ofertas 78 4.44. Vista offerHome cuando un usuario hace clic en View para ver la descripcióndelaoferta.......................... 79 4.45. Vista homeGuest ............................. 79 4.46. Vista chat - Conversación sin mensajes . . . . . . . . . . . . . . . . . 80 4.47. Vista chat - Conversación con mensajes . . . . . . . . . . . . . . . . . 80 4.48. Vista myChats .............................. 81 4.49. Vista chatList ............................... 82 4.50. Vista adminMessages ........................... 82 4.51. Diagrama de casos de uso - Estudiante . . . . . . . . . . . . . . . . . 83 4.52. Diagrama de casos de uso - Empresa . . . . . . . . . . . . . . . . . . 84 4.53. Diagrama de casos de uso - Administrador . . . . . . . . . . . . . . . 84 4.54. Diagrama de flujo - Login yregistro................... 85 4.55. Diagrama de flujo - Subir un vídeo . . . . . . . . . . . . . . . . . . . 85
4.56. Diagrama de flujo - Editar un vídeo . . . . . . . . . . . . . . . . . . . 86 4.57. Diagrama de flujo - Visualizar un vídeo . . . . . . . . . . . . . . . . . 86 4.58. Diagrama de flujo - Subir una oferta . . . . . . . . . . . . . . . . . . 87 4.59. Diagrama de flujo - Editar una oferta . . . . . . . . . . . . . . . . . . 87 4.60. Diagrama de flujo - Visualizar una oferta . . . . . . . . . . . . . . . . 87 A.1. Cuestionario sobre método de estudio - Edad de los encuestados . . . 109 A.2. Cuestionario sobre método de estudio - Sexo de los encuestados . . . 109 A.3. Cuestionario sobre método de estudio - Estudios de los encuestados . 110 A.4. Cuestionario sobre método de estudio - Horas de estudio de los encuestados .................................110 A.5. Cuestionario sobre método de estudio - Método de estudio de los encuestados ................................111 A.6. Cuestionario sobre método de estudio - Reflexión sobre el método utilizado..................................111 A.7. Cuestionario sobre método de estudio - Perjuicio del método utilizado 112 A.8. Cuestionario sobre método de estudio - Repetición del método utilizado112 A.9. Cuestionario sobre búsqueda de prácticas - Realización o búsqueda deprácticas ................................113 A.10.Cuestionario sobre búsqueda de prácticas - Pregunta sobre portal de búsqueda .................................113 A.11.Cuestionario sobre búsqueda de prácticas - Respuestas sobre portal debúsqueda................................113 A.12.Cuestionario sobre búsqueda de prácticas - Portal de búsqueda proporcionado por el centro de estudios . . . . . . . . . . . . . . . . . . . 114 A.13.Cuestionario sobre búsqueda de prácticas - Utilidad del portal proporcionado por el centro de estudios . . . . . . . . . . . . . . . . . . . 114
Índice de tablas 4.1. Tabla users ................................ 37 4.2. Tabla follows ............................... 38 4.3. Tabla videos ................................ 38 4.4. Tabla subjects ............................... 39 4.5. Tabla visualized_videos .......................... 39 4.6. Tabla questions .............................. 40 4.7. Tabla answers ............................... 40 4.8. Tabla user_answer ............................ 41 4.9. Tabla offers ................................ 41 4.10. Tabla conversations ............................ 42 4.11. Tabla messages .............................. 42 xix
Cap´ ıtulo 1 Introducción 1.1. Motivación Hoy en día hay numerosas carreras en las que los estudiantes se centran en resolver ejercicios similares a los que previamente han aparecido en los exámenes. Esto ha fomentado la no retención de los conocimientos a largo plazo, lo que en ocasiones supone una mayor dificultad en aquellas asignaturas que dan por sentado dichos conocimientos. Esto puede deberse a que en diversas carreras universitarias, como Ingeniería Informática, el temario es muy denso para la cantidad de horas dedicadas a la asignatura, provocando, en numerosas ocasiones, que se estudie solo lo estrictamente necesario, ya que la cantidad de ejercicios prácticos que se pueden evaluar son limitados. Diversos estudios (Rodríguez & Platas-García, 2022; Liao & Wu, 2023) muestran una mejora en el rendimiento académico de los estudiantes que han complementado su estudio con la visualización de vídeos. Sin embargo, para que los vídeos sean más eficaces, se ha comprobado que la utilización de elementos adicionales tales como anotaciones o preguntas mejoran aún más la retención de la información explicada en el vídeo (Moos & Bonde, 2016). A fin de intentar reducir el número de estudiantes que no priorizan la asimilación de conocimientos, el presente trabajo busca ofrecerles una plataforma de ayuda para poder retener los conceptos clave. Para ello, esta plataforma utilizará cuestionarios incluidos en los vídeos que ayudarán al estudiante a priorizar la asimilación de los conocimientos. Por otro lado, otra de las situaciones a la que están sometidos los estudiantes universitarios y que resulta interesante de estudiar es la de búsqueda de prácticas en empresas. Hoy en día muchos estudiantes universitarios no han sido capaces de encontrar un lugar adecuado para buscarlas o no se les ha proporcionado la ayuda suficiente cómo para encontrarlo a pesar de contar con numerosas plataformas o lugares adecuados para buscarlas. Algunos estudios, como el de Alsolais (2022), desarrollan portales web orientados 1
2Capítulo 1. Introducción a la búsqueda de prácticas de empresa, buscando facilitar la comunicación entre estudiantes, profesores y empresas y ayudando a que los estudiantes puedan contar con dichas experiencias previas a graduarse. Bajo dichas circunstancias y con el fin de intentar disminuir el número de estudiantes que no son capaces de encontrar un lugar adecuado para solicitar prácticas de empresa, el presente trabajo busca también proporcionarles un portal interactivo que sirva cómo puente entre las empresas y los estudiantes. 1.2. Objetivos El principal objetivo de este trabajo es proporcionar una ayuda a los estudiantes universitarios para priorizar la retención de conocimientos. Para ello se utilizarán vídeos creados por los propios usuarios. Este objetivo principal está dividido en los siguientes objetivos específicos: Crear una aplicación web que sirva para facilitar la retención de conocimientos en los estudiantes universitarios. Evaluar la utilidad del uso de cuestionarios dentro de los vídeos. Proponer una alternativa más enfocada al aprendizaje de temas concretos. A pesar de la existencia de diversas plataformas orientadas a la subida y visualización de vídeos (como puede ser YouTube), no resulta fácil en dichas plataformas encontrar diversos temas de estudio concretos. Por ello, este trabajo busca amenizar y facilitar las búsquedas, con la finalidad de que no se pierda tiempo buscando y visualizando vídeos que no sean acordes al tema buscado. Otro objetivo a destacar es facilitar la conexión empresa-estudiante a través de la publicación de ofertas, permitiendo al usuario contactar directamente con las empresas solicitantes. Para conseguir este objetivo, se propone integrar en la mencionada aplicación web un portal que tenga como finalidad facilitar la interacción empresa-estudiante. La idea principal es que los estudiantes reciban confirmaciones o denegaciones lo antes posible para así evitar que tengan que aplicar a un gran número de ofertas diferentes a la vez. Dicha comunicación se realizará a través del chat de dicho portal, siendo esta una conversación privada entre la empresa y el estudiante. También se busca, mediante este portal, que sea fácil e intuitivo encontrar prácticas acordes a lo que buscan los estudiantes. De esta manera, el portal estaría orientado sobre todo a aquellos estudiantes que desconocen o no se les ha facilitado un lugar donde poder buscar prácticas.
1.3. Planteamiento del problema 3 1.3. Planteamiento del problema Se ha observado que la forma de estudio principal de un gran número de estudiantes universitarios no es la más efectiva para retener los conocimientos. Esto se debe a que en numerosas ocasiones, dicha forma de estudio se centra en la resolución de ejercicios de examen y no en los conceptos que hay detrás. Existen estudios como el de Gargallo et al. (2012) que analizan los diferentes enfoques de aprendizaje, resaltando que la mayoría de los estudiantes realizan un aprendizaje superficial. Dicho aprendizaje superficial se basa en una motivación extrínseca del estudiante que busca únicamente aprobar. La finalidad de dicho método es aprobar el examen. Sin embargo, de esta manera, algunos de los conceptos clave no son asimilados correctamente, perjudicando a futuro al estudiante. En más de una ocasión se ha podido observar cómo existen a lo largo de la carrera y en el ámbito laboral, numerosos conceptos que requieren conocimientos previos. Los autores de este trabajo han realizado cuestionarios dirigidos a diversos estudiantes universitarios y han podido comprobar la existencia de dicho problema. Los resultados de este estudio se muestran en la sección 3.1. Para abordar el problema comentado, se realizó una investigación sobre diversos artículos reputados relacionados con dicho problema. Los artículos seleccionados son aquellos que deciden solucionar dicho problema mediante la utilización de vídeos educativos y, en ocasiones, interactivos. Por ejemplo, se ha estudiado el uso de videotutoriales para la mejora del aprendizaje en estudiantes universitarios (Rodríguez & Platas-García, 2022). Los resultados obtenidos por Rodríguez & Platas-García (2022) en este estudio apuntan a que la utilización de tecnologías y, en concreto, de videotutoriales contribuye significativamente a la motivación de los estudiantes para aprender. Rodríguez & Platas-García (2022) indican que esto se debe al formato del contenido, más atractivo para los estudiantes, además de que los videotutoriales cubren un tema concreto y son fácilmente accesibles. Por otra parte, se han analizado patrones de comportamiento durante la visualización de vídeos con el fin de comprobar su recepción entre los estudiantes. En este sentido, Liao & Wu (2023) analizaron la interacción de varios estudiantes universitarios con vídeos de aprendizaje, comprobando un aumento en su motivación, lo que a su vez incrementaba su rendimiento. En adición a esto, se ha estudiado el uso de elementos adicionales durante la visualización del vídeo. Por ejemplo, se examinó el proceso de aprendizaje de varios estudiantes en un modelo de clase invertida que utilizaba vídeos (Moos & Bonde, 2016). De este modo, a una parte de los estudiantes se les presentó un vídeo que integraba indicaciones para el aprendizaje autorregulado, mientras que el resto de estudiantes visualizó el vídeo sin componentes adicionales. Moos & Bonde (2016) observaron que los estudiantes que recibieron indicaciones integradas en el vídeo tuvieron un mejor desempeño en el test que realizaron posteriormente.
4Capítulo 1. Introducción Se ha detectado que los estudiantes universitarios suelen encontrar dificultad a la hora de comunicarse con empresas para la realización de prácticas durante su etapa de estudios. Esto ha sido comprobado por los autores de este trabajo a partir de cuestionarios realizados a varios estudiantes universitarios. Los resultados de dicho análisis se encuentran en la sección 3.2. La realización de prácticas en empresas tiene un papel muy importante en el aprendizaje de un estudiante universitario. Binder et al. (2015) realizan un estudio para dar a conocer la importancia y beneficios de la realización de prácticas en empresas y cómo estas ayudan al desarrollo y aprendizaje del estudiante. El presente trabajo tiene como objetivo solventar los problemas mencionados mediante el desarrollo de una aplicación web que permitirá a los usuarios crear y visualizar vídeos educativos, que podrán integrar cuestionarios para verificar el correcto aprendizaje del tema expuesto. Dichos vídeos estarán clasificados por temas concretos para facilitar su búsqueda y se mostrarán en primer lugar los que demuestren una mayor utilidad para los usuarios. Adicionalmente, se incluirá en la web un portal de ofertas que pondrá en contacto a empresas y estudiantes para negociar acuerdos de prácticas o trabajo. 1.4. Plan de trabajo A fin de alcanzar los objetivos descritos previamente, se ha seguido la siguiente planificación: Realización de un estudio previo con el fin de comprobar el método de estudio de los estudiantes universitarios y su experiencia en la búsqueda de prácticas. Este estudio se llevó a cabo durante las dos últimas semanas de enero, tras la realización de los exámenes de la convocatoria ordinaria. Investigación sobre las posibles soluciones para el problema planteado, así cómo de trabajos que planteen un problema similar. Dicha investigación se llevó a cabo durante las dos últimas semanas de enero y la primera de febrero, ya que era necesario tener claro qué temas abordar con el desarrollo posterior. Definición de la base de datos, componiendo las tablas junto con sus atributos y todas las relaciones entre ellas. Esta tarea se llevó a cabo durante las dos últimas semanas de febrero. Diseño del prototipo de la aplicación a través de bocetos de las vistas. Esta actividad fue realizada durante la tercera semana de febrero. Búsqueda de herramientas tecnológicas que puedan ser de utilidad. Para ello se empleó las dos últimas semanas de febrero y la primera de marzo, ya que había que tener claro que herramientas utilizar para empezar a desarrollar la aplicación.
1.5. Organización del documento 5 Desarrollo de la aplicación web. El desarrollo se inició a mediados de marzo y se mantuvo hasta mediados de agosto. En los meses de mayo y junio se redujo el tiempo dedicado al desarrollo de la aplicación debido a los exámenes. Realización de pruebas con usuarios y análisis de los resultados obtenidos. Esta tarea fue realizada durante las dos últimas semanas de agosto. Para realizar esta tarea se necesitaba que la aplicación web estuviera finalizada para poder ofrecerles a los usuarios una versión completa. En la figura 1.1 se muestra el diagrama de Gantt referente a las actividades realizadas durante el desarrollo del proyecto. Figura 1.1: Diagrama de Gantt 1.5. Organización del documento En el capítulo 2 se exponen los trabajos previos relacionados con los objetivos propuestos. En este sentido, se llevó a cabo una investigación con el fin de obtener una mejor comprensión de los problemas que se pretenden abordar. En el capítulo 3 se explica el estudio previo llevado a cabo mediante cuestionarios realizados a varios estudiantes, así como el análisis de sus resultados. Estos cuestionarios tenían como finalidad entender el método de estudio que siguen estos estudiantes y su impacto, así como su experiencia en la búsqueda de prácticas. El capítulo 4 está dedicado a explicar en detalle todas las fases de desarrollo de la aplicación web, desde la especificación de los requisitos hasta la implementación y las pruebas, pasando por la estructuración de la base de datos, la elaboración de bocetos previos y el análisis de las tecnologías para desarrollarla. En el capítulo 5 se muestran los resultados de las pruebas realizadas durante el desarrollo de la aplicación y se analizan dichos resultados para comprobar principalmente la usabilidad de la aplicación. En el capítulo 6 se encuentra el diseño de la evaluación que se pretende realizar en un futuro para comprobar la utilidad de añadir cuestionarios dentro de los vídeos y sus beneficios sobre el proceso de aprendizaje de los estudiantes.
Cap´ ıtulo 2 Trabajos relacionados Para la realización de este trabajo se ha realizado una investigación sobre diversos estudios y proyectos relacionados con los temas planteados previamente. Para comprender el método de estudio de los estudiantes, Gargallo et al. (2012) analizaron los diversos enfoques de aprendizaje que adoptan los estudiantes, llegando a la conclusión de que la mayoría adopta un enfoque muy superficial que prioriza los resultados sobre los conocimientos obtenidos. Por otro lado, se pudo observar que los estudiantes más destacados adoptaban un enfoque más profundo, entendiendo por profundo que la motivación se basa en el interés del estudiante y no en el resultado del examen. Dada la existencia de este problema, se decidió buscar un método de aprendizaje que pudiera ayudarlos a tomar ese enfoque más profundo comentado anteriormente. 2.1. Aprendizaje basado en vídeos En primer lugar se investigó sobre la utilidad de los vídeos en la enseñanza. Rodríguez & Platas-García (2022) realizaron un estudio con la finalidad de analizar la experiencia de estudiantes universitarios con el uso de videotutoriales. En dicho estudio se encuentra evidencia sobre la percepción positiva de los estudiantes debido a su facilidad en el manejo de las tecnologías, lo que hace bastante común este tipo de aprendizaje hoy en día. Siguiendo con el uso de vídeos en la enseñanza, Liao & Wu (2023) estudiaron la huella digital dejada por los estudiantes en entornos de aprendizaje basado en vídeos, entendiendo por huella digital acciones como pausar el vídeo o rebobinarlo. Tras obtener los resultados, observaron que se produjo una mejora tanto en la motivación como en el proceso de aprendizaje de los estudiantes. Sin embargo, otros estudios como el de Moos & Bonde (2016) apuntan a que la utilización de vídeos por sí solos no siempre asegura una mejora en el aprendizaje. Por tanto, Moos & Bonde usaron avisos incrustados en los vídeos con la finalidad de comprobar si estos producían una mejora en el aprendizaje. Tras realizar dicho 13
14 Capítulo 2. Trabajos relacionados estudio, se pudo observar que aquellos estudiantes que habían contado con dichos vídeos obtuvieron mejores resultados. Siguiendo esta línea de estudio Mirriahi et al. (2021) realizaron un estudio dividiendo a los estudiantes en tres grupos, un grupo que visualizaba un vídeo con preguntas emergentes, otro grupo que lo visualizaba sin dichas preguntas y un último grupo que utilizaba una herramienta para realizar anotaciones durante el vídeo. Al estudiar los resultados obtenidos sobre los tres grupos, se pudo observar que los que contaron con preguntas emergentes y los que realizaron anotaciones, obtuvieron mejores resultados que el otro grupo. Haagsman et al. (2020) realizaron un estudio similar que demostró que incluir preguntas emergentes en vídeos educativos mejora el rendimiento de los estudiantes con respecto a la retención de los conocimientos. Una vez estudiados los trabajos relacionados con el aprendizaje a través del uso de vídeos, se investigó sobre la importancia y necesidad de las prácticas de empresa, así cómo de las facilidades y dificultades que sus búsquedas pueden suponer en los estudiantes universitarios. 2.2. Prácticas de empresa Binder et al. (2015) realizaron un estudio sobre el valor académico y personal que tienen las prácticas en el desarrollo y aprendizaje de los estudiantes, así como de la importancia de que las instituciones animen a los estudiantes a tomarlas teniendo en cuenta siempre las capacidades académicas y sociales de cada uno. Alsolais (2022) desarrolló un portal web para facilitar la comunicación entre profesores, estudiantes y empresas relacionadas con el mundo de la medicina tomando cómo base la importancia de estas en el desarrollo de las habilidades y la experiencia aplicada al ámbito de la medicina. Tras realizar el estudio se pudo observar cómo el portal sirvió de puente entre los estudiantes y las empresas proporcionándoles oportunidades de cara al futuro y cómo los estudiantes se vieron beneficiados al adquirir los conocimientos aprendidos durante la realización de las prácticas. Tras lo comentado anteriormente y teniendo en cuenta los problemas de aprendizaje de los estudiantes comentados por Gargallo et al. (2012), el presente trabajo busca ofrecer a los estudiantes una alternativa para cambiar su enfoque de aprendizaje, tomando como base las conclusiones obtenidas por los estudios relacionados con la mejora en el aprendizaje mediante la utilización de vídeos interactivos para el desarrollo de una aplicación web basada en la visualización de vídeos interactivos creados por otros usuarios de dicha aplicación. Además de contar con dicha funcionalidad, también se incluirá un portal web que permita a los estudiantes comunicarse directamente con las empresas, siendo esta idea diferente a la propuesta por Alsolais (2022) en la que el estudiante, una vez seleccionado el lugar de prácticas que le interesa, debe comunicárselo al coordinador de la universidad y este ponerse en contacto con la empresa.
Cap´ ıtulo 3 Estudio previo El propósito del presente trabajo es mejorar el aprendizaje de los estudiantes y ayudarles en la búsqueda de prácticas en empresas, por lo que se ha realizado un estudio con el fin de comprobar estas cuestiones. Para ello, se han elaborado dos cuestionarios, que serán respondidos en su mayoría por estudiantes, ya que son el grupo de la población que tienen relación directa con el problema planteado por el presente proyecto. Con el fin de recopilar información relevante y comprobar si los estudiantes se centraban solo en la realización de ejercicios similares a los de examen, prescindiendo el resto del temario, se decidió realizar un cuestionario para conocer la opinión de diversos estudiantes. Por otro lado, también se decidió realizar otro cuestionario relacionado con la búsqueda de prácticas en empresas buscando que los estudiantes encuestados proporcionaran sus experiencias. A partir de los resultados de ambos cuestionarios, se pretende realizar un análisis adoptando un enfoque cuantitativo que pueda ayudar a esclarecer la existencia de dicho problema. En el apéndice A se muestran las preguntas que se hicieron en ambos cuestionarios, así como las respuestas proporcionadas a cada una. 3.1. Análisis de método de estudio Este primer cuestionario se centra en recopilar información sobre los métodos de estudio de los estudiantes encuestados. Mediante este cuestionario se trata verificar si estos, en el momento de preparar un examen, estudian todo el temario, o si, por el contrario, solo repiten ejercicios similares a los de años anteriores, excluyendo el resto del temario. 15
16 Capítulo 3. Estudio previo 3.1.1. Diseño del cuestionario Teniendo en cuenta lo explicado anteriormente, el cuestionario consta de un total de ocho preguntas. Sin embargo, los encuestados no responden a las ocho preguntas, ya que, en función de algunas respuestas, aparecerán unas u otras preguntas. Se debe tener en cuenta que el usuario debe responder a todas las preguntas que le aparezcan, es decir, no puede dejar ninguna de las preguntas que le aparezcan sin contestar. Las primeras cinco preguntas del cuestionario son comunes a todos los usuarios, independientemente de las respuestas que ofrezcan, ya que son preguntas que buscan conocer un poco a los encuestados. Todas ellas son preguntas cerradas, a excepción de la tercera, que busca conocer la carrera o el grado que estudia el encuestado. Esta pregunta es abierta debido a que lo interesante es comprobar si los resultados son muy variables dependiendo de lo que cursa cada encuestado. De estas cinco preguntas, las cuatro primeras son demográficas, ya que se considera interesante ver si la segmentación influye o no en los resultados, mientras que la última no lo es. La última pregunta, actúa como un screener, ya que, si bien todas las formas de estudio son interesantes para la investigación, el presente trabajo busca enfocarse en una en concreto para determinar si existe un problema o no con ella. Aun así, las preguntas que aparecen en función de las respuestas proporcionadas a dicha pregunta, buscan obtener información similar. Si el usuario afirma usar dicho método de estudio, se busca obtener información mediante preguntas cerradas con la finalidad de saber si les ha resultado útil dicho método de estudio y si lo volverían a realizar. Si por el contrario no ha usado dicho método de estudio, se buscará obtener información sobre si por lo menos se lo ha planteado o no. Una vez el usuario haya respondido a todas las preguntas, se almacenarán sus respuestas y se podrá realizar posteriormente un estudio cuantitativo sobre los datos obtenidos. 3.1.2. Análisis descriptivo de la muestra Para los dos cuestionarios realizados se llevó a cabo el mismo tipo de muestreo, por lo que lo que se explica a continuación es aplicable a ambos cuestionarios ya que es una explicación común a ambos. El proceso de muestreo realizado ha sido intencionado, lo que significa que se han seleccionado aquellos individuos que son afectados directamente por los problemas que se quieren abordar mediante la realización de este proyecto. En este caso, dicho grupo de individuos relevantes han sido estudiantes universitarios de diferentes facultades. Los estudiantes universitarios seleccionados para participar en el estudio han
3.1. Análisis de método de estudio 17 sido identificados en función de su relación previa con los encuestados y su afinidad con el tema en cuestión (método de estudio y búsqueda de prácticas en empresas). Además, a dichos estudiantes se les pidió que compartieran la encuesta con dos o tres estudiantes de su mismo grado para así poder lograr una comprensión más completa de la situación. Hay que tener en cuenta, que estas encuestas han sido realizadas usando la herramienta de Google Forms1, la cual es gratuita y ofrece la posibilidad de crear cuestionarios de cero y poder posteriormente ver las respuestas. Como se quería que las respuestas de los usuarios fueran anónimas, se decidió no registrar el correo. Tampoco se puede seguir las respuestas que una persona en específico ha dado a las preguntas, sino que solo se puede ver el resultado global. Esto no supone un problema ya que lo que se busca es obtener una visión general de una muestra intencionada pero variada. La muestra utilizada en ambos cuestionarios fue idéntica, ya que, durante el proceso de envío, se distribuyeron ambos cuestionarios conjuntamente y se solicitó a los participantes que completaran ambos. Debido a esto, las respuestas a las tres primeras preguntas de ambos cuestionarios coinciden, dado que estas preguntas corresponden a aspectos demográficos y se repiten en ambos cuestionarios. Aunque sean las mismas preguntas, con la finalidad de mantener la estructura del documento, dichas preguntas se volverán a colocar en el análisis descriptivo y de resultados del cuestionario relacionado con las prácticas en empresas. Antes de comenzar con el análisis descriptivo de la muestra hay que tener en cuenta que las encuestas han sido respondidas por 24 estudiantes universitarios. En el apéndice A.1 se pueden consultar los diagramas de barras y de sectores. De la primera pregunta demográfica relacionada con la edad se observa la siguiente distribución: 1. Distribución de respuestas: Menor de 18: 0 personas. Entre 18 y 24 años: 23 personas. Entre 25 y 34 años: 1 persona. Entre 35 y 44 años: 0 personas. Más de 45 años: 0 personas. 2. Porcentaje de respuestas: Menor de 18: 0 %. Entre 18 y 24 años: 95.8 %. Entre 25 y 34 años: 4.2 %. Entre 35 y 44 años: 0 %. 1https://www.google.com/forms/about
18 Capítulo 3. Estudio previo Más de 45 años: 0 % 3. Promedio de edad: Para calcular el promedio se utilizarán las marcas de clase y se asignarán valores numéricos a cada opción. Para la primera opción se tomará el 16 (Para emplear un número cercano a 18 y menor que sea representativo), para la segunda el 21, para la tercera el 29.5, para la cuarta 39.5 y para la quinta 50 (Para utilizar un número mayor que 45, pero cercano). Gracias a la asignación de estos valores numéricos se puede calcular el promedio obteniendo un valor de 21.354 años, es decir aproximadamente 21 años (El promedio se ha calculado como ((0*16) + (23*21) + (1*29.5) + (0*39.5) + (0*50)) / (0+23+1+0+0)). El valor promedio era el esperado, ya que la mayoría de las respuestas estaban entre 18 y 24 años. 4. Análisis de distribución: Se observa que la mayoría de los encuestados (95.8 %) tienen entre 18 y 24 años y el encuestado restante (4.2 %) entre 25 y 34 por lo que la encuesta está predominada por gente joven. De la segunda pregunta demográfica relacionada con el sexo se obtiene la siguiente distribución: 1. Distribución de respuestas: Hombre: 20 personas. Mujer: 4 personas. 2. Porcentaje de respuestas: Hombre: 83.3 %. Mujer: 16.7 %. 3. Análisis de la distribución: Respuesta “Hombre” (83.3 %): Aquí se refleja el número de estudiantes universitarios encuestados. Respuesta “Mujer” (16.7 %): Representa la cantidad de estudiantes universitarias encuestadas. La pregunta relacionada con la carrera que se estudia parece tener numerosas respuestas diferentes, sin embargo, si se observa detenidamente, se puede ver cómo en su mayoría son la misma carrera escrita de diferente forma, ya sea porque faltan tildes, porque unos la escriben con mayúsculas otros con minúscula o porque otros usan directamente la abreviatura (ADE de Administración y dirección de empresas). Una vez se tiene esto en cuenta, se puede observar la distribución de la muestra por áreas de estudio en la pregunta relacionada con la carrera que se estudia:
3.1. Análisis de método de estudio 19 1. Distribución de respuestas: Ingeniería informática: 11 personas. Administración y Dirección de empresas: 3 personas. Ingeniería Química: 3 personas. Doble Grado en ADE e Informática: 2 personas. Ingeniería de Computadores: 2 personas. Grado de Videojuegos: 1 persona. Ingeniería del Software: 1 persona. Fabricación de Productos Farmacéuticos: 1 persona. 2. Porcentaje de respuestas: Ingeniería informática: 45.83 %. Administración y Dirección de empresas: 12.50 %. Ingeniería Química: 12.50 %. Doble Grado en ADE e Informática: 8.34 %. Ingeniería de Computadores: 8.34 % Grado de Videojuegos: 4.17 %. Ingeniería del Software: 4.17 %. Fabricación de Productos Farmacéuticos: 4.17 %. 3. Análisis de la distribución: Al tratarse de una pregunta abierta, sacar valores como el promedio o la mediana no va a resultar útil de cara a realizar un análisis y, aun sacando la moda y observando que Ingeniería Informática es la carrera más cursada entre nuestros encuestados tampoco se obtiene un buen análisis de la muestra. Lo que sí se puede observar y que junto al valor de la moda es interesante que el 70.83% de los encuestados están cursando carreras relacionadas con la informática. A su vez que el 79.16% están cursando una ingeniería por lo que el porcentaje de estudiantes que a priori, pueden ser objetivo de nuestro proyecto es bastante elevado. En relación con la primera pregunta ya exclusiva de este cuestionario y relacionada con distribución de las horas de estudio se obtuvieron los siguientes resultados: 1. Distribución de respuestas: Entre 1 y 3 horas al día: 12 personas. Entre 3 y 5 horas al día: 7 personas. Más de 5 horas al día: 5 personas.
20 Capítulo 3. Estudio previo 2. Porcentaje de respuestas: Entre 1 y 3 horas al día: 50 %. Entre 3 y 5 horas al día: 29.2 %. Más de 5 horas al día: 20.8 %. 3. Promedio de horas estudiadas: Para calcular el promedio se van a asignar valores numéricos a cada opción. Para la primera opción se va a tomar el 2 (punto medio entre 1 y 3), para la segunda el 4 (punto medio entre 3 y 5) y para la tercera el 6 (Para no utilizar el propio 5). Gracias a la asignación de estos valores numéricos se puede calcular el promedio obteniendo un valor de 3.41 horas (El promedio se ha calculado como ((12*2) + (7*4) + (5*6)) / (12+7+5)). 4. Análisis de la distribución: Se observa que la mitad (50 %) de los encuestados estudian entre 1 y 3 horas al día. Un porcentaje significativo (29.2 %) dedica entre 3 y 5 horas al día al estudio. El porcentaje restante (20.8 %) invierte más de 5 horas al día. Este análisis muestra una variedad de enfoques de estudio, pero gracias al promedio se puede observar cómo el tiempo medio está entre el rango de 1 a 3 y de 3 a 5 ya que es donde están concentradas el mayor número de respuestas. La siguiente pregunta actúa como screener por lo que en función de la respuesta se mostraran unas preguntas u otras. De ella se ha obtenido la siguiente distribución: 1. Distribución de respuestas: Estudio ejercicios similares: 18 personas. Estudio el temario entero: 6 personas. 2. Porcentaje de respuestas: Estudio ejercicios similares: 75 %. Estudio el temario entero: 25 %. 3. Análisis de la distribución: Respuesta “Estudio ejercicios similares” (75 %): Aquí se refleja el número de estudiantes universitarios encuestados que se enfocan en la realización de ejercicios similares o parecidos a los que han salido en exámenes anteriores. Estos son los estudiantes objetivos de nuestra encuesta ya que representan a aquellos estudiantes que se busca ayudar mediante la realización de la aplicación de vídeos de nuestro proyecto.
3.1. Análisis de método de estudio 21 Respuesta “Estudio el temario entero” (25 %): Representa a los estudiantes universitarios encuestados que prefieren estudiar de manera general el temario. Si bien estos no son los estudiantes objetivo de nuestra encuesta, es interesante conocer si aun realizando este método de estudio, se han planteado alguna vez utilizar el otro, por ello se les realizará una pregunta más antes de finalizar con su cuestionario. Primero se va a analizar la pregunta realizada a los encuestados que estudian el temario entero. Hay que tener en cuenta que esta pregunta ha sido respondida solo por 6 personas (25 % de los encuestados), ya que son esas 6 personas que han dicho que estudian el temario entero en la pregunta anterior. Teniendo esto en cuenta se ha podido observar lo siguiente referente a si alguna vez se han planteado estudiar solo ejercicios similares a los que han caído en exámenes anteriores: 1. Distribución de respuestas: Sí: 5 personas. No: 1 personas. 2. Porcentaje de respuestas: Sí: 83.3 %. No: 16.7 %. 3. Análisis de la distribución: Respuesta “Sí” (83.3%): Aquí se refleja el número de estudiantes universitarios encuestados que se han planteado cambiar su método de estudio y adquirir el de estudiar solo preguntas relacionadas con las que caen en los exámenes. Es decir, la mayoría podría haber pertenecido al otro grupo de encuestados. Respuesta “No” (16.7 %): Representa a los estudiantes universitarios (en este caso 1) encuestados que no se han planteado dejar de estudiar el temario entero. Una vez concluido el estudio de las respuestas del primer grupo de encuestados, se procede a analizar el grupo objetivo. De este grupo lo que se busca saber a continuación es si en alguna ocasión se han visto perjudicados por haber aplicado dicho método de estudio. A partir de aquí se ha podido observar lo siguiente: 1. Distribución de respuestas: Sí: 12 personas. No: 6 personas. 2. Porcentaje de respuestas:
28 Capítulo 3. Estudio previo 3. Análisis de la distribución: Respuesta “Sí” (79.2%.): Aquí se refleja el número de estudiantes universitarios encuestados que sí han realizado o al menos buscado prácticas en empresas. Estos son los estudiantes que son objetivo de la encuesta, ya que lo que se quiere saber es su experiencia con dichas prácticas o búsqueda. Respuesta “No” (16.7%): Representa a los estudiantes universitarios encuestados que ni han realizado prácticas en empresas ni las han buscado. Dado que no han realizado ninguna de las dos no pueden proporcionar información relevante para el estudio relacionado con la accesibilidad y utilidad de los portales web de búsqueda de prácticas. Antes de seguir con las siguientes preguntas hay que tener en cuenta que ya no se cuenta con 24 estudiantes, si no que ahora solo con 19 ya que 5 no habían realizado o buscado prácticas en empresas. A continuación, se preguntó por la facilidad que han tenido los encuestados para encontrar un portal web para la búsqueda de prácticas se ha observado la siguiente distribución (La escala va de muy difícil a muy fácil siendo el 1 muy difícil y el 5 muy fácil): 1. Distribución de respuestas: 1 (Muy difícil): 0 personas. 2 (Difícil): 8 personas. 3 (Neutro): 6 personas. 4 (Fácil): 4 personas. 5 (Muy fácil): 1 persona. 2. Porcentaje de respuestas: 1 (Muy difícil): 0 %. 2 (Difícil): 42.1 %. 3(Neutro): 31.6 %. 4(Fácil): 21.1 %. 5(Muy fácil): 5.3 %. 3. Análisis de la distribución: Para este tipo de preguntas en las que los valores son categóricos, resulta más apropiado sacar valores como la mediana y la moda antes que un promedio. La mediana es la opción 3 (Neutro), ya que si se ordenan los datos de las 19 respuestas (0 + 8 + 6 + 4 + 1) el décimo valor pertenece al grupo 3. La moda es la opción 2 (Difícil), ya que es el valor que aparece con más frecuencia en esa colección de datos.
3.2. Análisis de búsqueda de prácticas 29 A continuación, se busca saber si la Universidad en la que estudias te ha proporcionado un portal para dicha búsqueda de prácticas o no. Hay que tener en cuenta que si no te han facilitado dicho portal el cuestionario finaliza. A partir de las respuestas proporcionadas, se obtiene la siguiente distribución: 1. Distribución de respuestas: Sí: 17 personas. No: 2 personas. 2. Porcentaje de respuestas: Sí: 89.5 %. No: 10.5 %. 3. Análisis de la distribución: Respuesta “Sí” (89.5%): Aquí se refleja el número de estudiantes universitarios encuestados a los que su universidad les ha proporcionado un portal para la búsqueda de prácticas. Estos son los estudiantes objetivo ya que van a poder proporcionar su experiencia con el uso de dichos portales (son los que tienen más a mano), lo cual va a poder ayudar a la creación de un nuevo portal que es otro de los motivos por los que surge el presente proyecto. Respuesta “No” (10.5%): Representa a los estudiantes universitarios encuestados a los que su universidad no les ha proporcionado un portal para la búsqueda de prácticas y por tanto han tenido ellos que buscar uno o tomar otra alternativa. Las preguntas que vienen a continuación buscan conocer la experiencia que han tenido dichos estudiantes utilizando los portales de búsqueda de prácticas que les han sido proporcionados. Llegados a este punto la cantidad de estudiantes que responden a las dos últimas preguntas planteadas en la encuesta es de 17, ya que mediante la pregunta anterior se han eliminado aquellos estudiantes que no eran objetivo de la encuesta. La primera pregunta tiene el fin de observar que tan útil les ha resultado dicho portal. Se ha obtenido la siguiente distribución: 1. Distribución de respuestas: 1 (Muy poco útil): 1 persona. 2 (Poco útil): 6 personas. 3 (Neutro): 6 personas. 4 (Útil): 1 persona.
30 Capítulo 3. Estudio previo 5 (Muy útil): 3 personas. 2. Porcentaje de respuestas: 1 (Muy poco útil): 5.9 %. 2 (Poco útil): 35.3%. 3 (Neutro): 35.3 %. 4 (Útil): 5.9 %. 5(Muy útil): 17.6 %. 3. Análisis de la distribución: Como se ha explicado anteriormente, para este tipo de preguntas en las que los valores son categóricos, resulta más apropiado sacar valores como la mediana y la moda antes que un promedio. La mediana es la opción 3 neutro ya que el valor que se encuentra en el medio cuando los datos se ordenan. Hay 17 respuestas (1 + 6 + 6 + 1 + 3) por lo que el valor que se va a tomar es el que se situará en la novena posición, lo que hace que la mediana en este caso corresponda a la opción 3 (Neutro). La moda es bimodal ya puede ser tanto la opción 2 (Poco útil) como la opción 3 (Neutro). De estos datos se puede observar que dicho portal ofrece opiniones divididas, aunque se observa una tendencia hacia la sensación de ser poco útil. La segunda y última pregunta busca saber lo fácil que les ha sido encontrar y utilizar a los estudiantes universitario dicho portal. De esta pregunta se ha obtenido la siguiente distribución: 1. Distribución de respuestas: 1 (Muy difícil): 4 personas. 2 (Difícil): 6 personas. 3 (Neutro): 4 personas. 4 (Fácil): 0 personas. 5 (Muy fácil): 3 personas. 2. Porcentaje de respuestas: 1 (Muy difícil): 23.5 %. 2 (Difícil): 35.3 %. 3 (Neutro): 23.5 %. 4 (Fácil): 0 %. 5(Muy fácil): 17.6 %.
3.2. Análisis de búsqueda de prácticas 31 3. Análisis de la distribución: Como ya se ha explicado anteriormente, para este tipo de preguntas en las que los valores son categóricos, resulta más apropiado sacar valores como la mediana y la moda antes que un promedio. La mediana es la opción 2 (Difícil), ya que si se ordenan los datos de las 17 respuestas (4 + 6 + 4 + 0 + 3) el noveno valor pertenece al grupo 2. La moda es la opción 2 (Difícil), ya que es el valor que aparece con más frecuencia en esa colección de datos. Se observa entonces que les ha resultado difícil tanto encontrar como utilizar el portal web que les proporciono su centro. 3.2.3. Análisis de resultados De las tres primeras preguntas se pueden obtener las mismas conclusiones que en el análisis de método de estudio, salvo en el caso de la carrera que se estudia ya que esta no es tan relevante con respecto a la opinión sobre el uso o la utilización de un portal web para buscar prácticas. Como se ha expuesto anteriormente, solo 19 de los 24 encuestados habían realizado o buscado prácticas en empresas. Observando las respuestas, el diagrama de barras asociado (véase apéndice A.2) y observando los valores de la mediana y la moda se puede observar cómo a la mayoría de gente le ha resultado difícil encontrar un lugar para buscar prácticas. Si bien también hay encuestados que les ha resultado fácil, si se analiza en conjunto, se puede concluir que no ha sido una tarea fácil. Esto no significa que haya tenido que ser difícil, pero sí que al menos dicha tarea se puede mejorar y hacer más fácil. Por esta razón, se propuso la idea de desarrollar un portal web para proporcionar una alternativa a los ya existentes. Si bien se busca una alternativa a los ya existentes y, por tanto, debería ser indiferente si a los estudiantes se les ha proporcionado o no un portal web, se considera que, de habérselo proporcionado, éste sería el más accesible para ellos. Por ello se considera a dichos estudiantes el objetivo de la encuesta. Tras esto los 19 encuestados se reducen a 17. Para poder analizar mejor los resultados obtenidos se observarán las dos últimas preguntas en conjunto. Tras analizar los diagramas de barras, así como las medianas y las modas de ambas preguntas, se puede observar cómo, efectivamente, si bien no es que los portales no sean útiles, o muy difíciles de encontrar o utilizar, sí tiene bastante margen de mejora por lo que si los estudiantes contaran con un portal que fuera más útil, accesible y fácil de utilizar podrían comenzar a utilizarlo. Por tanto, que el portal que se busca crear este proyecto deberá lo más simple posible, intentado ser lo más intuitivo posible y ofrecer una alternativa atractiva a los ya existentes. El objetivo principal es ayudar a aquellos estudiantes que hayan visto su experiencia de búsqueda de prácticas perjudicada por los aspectos mejorables que presentan
32 Capítulo 3. Estudio previo los portales web de búsqueda de prácticas ya existentes. Para ello se debía saber si dichos portales tenían fallos y asegurarse de si les eran o no accesibles.
Cap´ ıtulo 4 Desarrollo 4.1. Requisitos En esta sección se definen los requisitos funcionales y no funcionales que deberá tener la aplicación web para cumplir los objetivos definidos. 4.1.1. Requisitos funcionales Los requisitos funcionales definen cómo se debe comportar la aplicación y lo que hará para satisfacer las necesidades de los usuarios. Para la aplicación web desarrollada en el presente trabajo se establecieron los siguientes requisitos: Registro de usuarios. Los usuarios podrán crear una cuenta para acceder a la aplicación web. Inicio de sesión. Los usuarios accederán a la aplicación web utilizando sus credenciales. Modificación de perfil. Los usuarios tendrán la posibilidad de modificar su perfil en la aplicación, cambiando su nombre, foto de perfil, etc. Subida de vídeos. Los usuarios podrán subir vídeos de contenido educativo a la aplicación. Inserción de cuestionarios: Los usuarios podrán añadir cuestionarios a sus vídeos para hacer el contenido más útil para los espectadores. Edición de vídeos. Los usuarios podrán modificar aspectos de sus vídeos una vez subidos. Búsqueda de vídeos. Los usuarios tendrán herramientas para encontrar vídeos sobre los temas que les interesen. 33
34 Capítulo 4. Desarrollo Visualización de vídeos. Los usuarios podrán ver los vídeos creados por otros usuarios y responder a los cuestionarios que estos incluyan. Visualización de resultados. Los usuarios podrán comprobar los conocimientos adquiridos a partir de los resultados que obtengan en los cuestionarios respondidos. Estadísticas de vídeos. Los usuarios que creen vídeos en la aplicación podrán saber la recepción que éstos tienen y su utilidad en base al número de visualizaciones y las respuestas que proporcionen los usuarios en los cuestionarios. Subida de ofertas. Existirán usuarios que se registren como empresa y podrán subir ofertas de empleo indicando el perfil que buscan, el salario y las plazas disponibles. Búsqueda de ofertas. Los usuarios tendrán herramientas para encontrar ofertas que les interesen. Descarga de ofertas. Los usuarios podrán descargar los documentos asociados a la oferta de trabajo subida por las empresas. Edición de ofertas. Los usuarios registrados como empresa podrán editar la información de una oferta ya subida por ellos. Envío y recepción de mensajes. Los usuarios podrán iniciar un chat en la oferta que les interese, enviar mensajes a dicha empresa, así como recibirlos. Visualización de chat. Los usuarios podrán ver los mensajes enviados y recibidos con aquellas empresas que hayan hablado previamente. 4.1.2. Requisitos no funcionales Los requisitos no funcionales definen los atributos que deberá tener la aplicación para garantizar la calidad del servicio que ofrece. Los requisitos no funcionales definidos para la presente aplicación son: Seguridad. La aplicación debe garantizar la seguridad de los usuarios, restringiendo el acceso a ciertas acciones y permitiendo modificar la información únicamente a los usuarios autorizados para ello. Compatibilidad. La aplicación web debe ser compatible con todos los navegadores. Usabilidad. La interfaz de la aplicación debe ser fácil de utilizar e intuitiva para los usuarios nuevos y contará con indicaciones para ayudar al usuario a utilizarla. Mantenibilidad. La aplicación debe ser fácil de actualizar y reparar los errores que surjan.
4.2. Arquitectura 35 Escalabilidad. La aplicación debe ser capaz de crecer conforme aumente el número de usuarios y contenido. Rendimiento. La aplicación debe manejar las peticiones de los usuarios de manera rápida y proporcionará una rápida respuesta. Fiabilidad. Se debe minimizar las caídas del sistema para garantizar un funcionamiento estable de la aplicación. Cumplimiento legal. Se debe cumplir las leyes y regulaciones correspondientes para garantizar la protección de datos y los derechos de autor. 4.2. Arquitectura La aplicación que se pretende desarrollar utilizará la arquitectura Cliente-Servidor, que permite a los usuarios acceder al servicio a través de un navegador web y utilizando una interfaz de usuario. El servidor al que se conecten los clientes se compone de dos elementos: La aplicación. Contiene toda la lógica que gestiona las peticiones HTTP de los clientes y les muestra la interfaz con la que interactúan desde el navegador. La base de datos. Almacena los datos persistentes de la aplicación, como los contenidos y la información de los usuarios. Se ha elaborado un diagrama que muestra los tres elementos que compondrán la arquitectura de la aplicación y cómo se relacionan entre ellos. Este diagrama se muestra en la figura 4.1. Figura 4.1: Arquitectura de la aplicación
36 Capítulo 4. Desarrollo 4.3. Base de datos A continuación, se define el modelo de base de datos utilizado para almacenar los datos persistentes del sistema. Se ha utilizado un modelo relacional en el que las tablas que contienen la información se relacionan unas con otras a través de identificadores. 4.3.1. Diagrama entidad-relación En la figura 4.2 se muestra el diagrama entidad-relación sobre el que se estructurará la base de datos. En este diagrama se observan dos elementos: las entidades, que se representan con un rectángulo y las relaciones, representadas con un rombo. Las entidades se relacionan entre ellas con una cardinalidad, por ejemplo, un único usuario puede crear Nvídeos. Figura 4.2: Diagrama entidad-relación Cada entidad corresponde a una tabla en la base de datos, donde se almacenarán sus atributos, que se definirán en el siguiente apartado. Para implementar las relaciones 1-N se utilizarán identificadores con los que se relacionarán las tablas entre ellas. Por otro lado, las relaciones N-N requerirán de tablas adicionales que implementen dicha relación. Estas tablas intermedias utilizarán las claves primarias de las tablas que relacionan y algunos atributos adicionales que sean de utilidad. 4.3.2. Tablas Seguidamente, se muestran todas las tablas de la base de datos y se explican los campos que las componen. En las tablas, aparece el nombre del campo, el tipo de
4.3. Base de datos 37 dato que es y las restricciones que se han definido para dicho campo. 4.3.2.1. Users En la tabla 4.1 se muestran los campos de la tabla users, donde id es clave primaria. El id es un identificador único que se asigna a cada usuario cuando se crea una cuenta. Para relacionarse con otras tablas, resulta más sencillo que el campo id actúe como clave foránea a que actúe como tal un campo nombre con numerosos caracteres. Los campos name eemail son únicos debido a que se busca que no haya dos usuarios que se llamen igual, ni dos cuentas diferentes que tengan un mismo correo. El campo ban es un tinyint con valor por defecto a no baneado (valor por defecto es 0). Este campo se utiliza para saber si un usuario está o no baneado. El campo role es un enumerado que almacena el tipo de cuenta que tiene el usuario. Por tanto, un usuario con el rol de company, se diferencia de otro con rol standard en que el primero puede subir ofertas de trabajo. Por su parte, un usuario con rol admin, tendrá los permisos para administrar todo el contenido de la página. Nombre del campo Tipo Restricciones id BIGINT UNSIGNED PRIMARY KEY name VARCHAR(255) UNIQUE email VARCHAR(255) UNIQUE password VARCHAR(255) NOT NULL role ENUM(‘standard’, ‘admin’, ‘company’) DEFAULT(‘standard’) profile_pic VARCHAR(255) DEFAULT(‘None’) ban TINYINT(1) DEFAULT(0) created_at TIMESTAMP updated_at TIMESTAMP Tabla 4.1: Tabla users 4.3.2.2. Follows La tabla follows, tal como se muestra en la tabla 4.2, cuenta con una clave primaria compuesta, formada por los campos follower_id yfollowed_id. Ambos campos almacenan un id de usuario, el usuario con id almacenado en follower_id ha comenzado a seguir al usuario con id almacenado en followed_id. Es clave compuesta, ya que un usuario puede tener muchos seguidores diferentes y éstos a su vez, seguir a otros usuarios, al igual que se puede dar el caso de que un usuario siga a alguien y que ese alguien no lo siga. El campo followed_at almacena la última fecha en la que han comenzado a seguirse lo usuarios, ya que pueden haberse dejado de seguir y luego volverse a seguir.
44 Capítulo 4. Desarrollo 4.4. Prototipo Para la realización de los bocetos de este proyecto se ha decidido usar la herramienta Balsamiq Wireframes2, que es una herramienta de pago, pero ofrece la posibilidad de obtener una prueba en la nube durante un mes. Esta herramienta permite realizar mockups,wireframes y prototipos de aplicaciones, entre otras funcionalidades, ofreciendo una fidelidad media. Se decidió usar esta herramienta debido a que se tenían conocimientos previos sobre su funcionamiento y a que la forma en que permite representar las diferentes vistas de una aplicación web es suficiente para pasar a digital los bocetos a papel sin tener que realizar modificaciones a los prototipos. Existen numerosas herramientas de prototipado además de Balsamiq Wireframes, como por ejemplo Figma3, una de las más utilizadas a la hora de representar interfaces gráficas. Sin embargo, para representar los bocetos no era necesario plasmar el flujo de acciones, por lo que se consideró que sería mejor no utilizarla, ya que Balsamiq sería más adecuada para ello. Otro ejemplo podría ser Just in Mind4, pero es una herramienta que ofrece una gran fidelidad y está pensada para utilizarse en la representación de prototipos más avanzados. También existen algunas herramientas muy similares a Balsamiq Wireframes, como puede ser Pencil5, pero no se utilizaron debido a que se consideró que no aportaban ninguna mejora con respecto a Balsamiq. 4.4.1. Página principal El boceto de la página principal de la aplicación, que aparece en la figura 4.4, incluye listas de vídeos, ordenados según diferentes parámetros: el número de visitas, el número de usuarios que los han guardado en favoritos o la fecha en que se hayan subido dichos vídeos. Para cada vídeo se muestra la miniatura del mismo así como su título para que el usuario pueda entender el contenido que va a encontrar cuando acceda al vídeo. Al final de cada lista, se incluye un botón en forma de flecha para cargar más vídeos, ya que en un primer momento sólo se cargan los más relevantes en cada categoría. Además, a la derecha de los vídeos se incluye una barra de desplazamiento, que indica al usuario que puede desplazarse hacia abajo en la página y encontrará más contenido. Asimismo, se incorpora una barra de búsqueda para encontrar los vídeos que se deseen a partir de las palabras que introduzcan los usuarios. 2https://balsamiq.com/wireframes 3https://www.figma.com 4https://www.justinmind.com 5https://pencil.evolus.vn
4.4. Prototipo 45 Figura 4.4: Boceto de la vista home 4.4.2. Subir un vídeo En la figura 4.5 se muestra el boceto de la vista para subir un vídeo. En ésta se incluyen iconos sobre los que el usuario pulsará para subir el archivo del vídeo y de la miniatura. Por otro lado, añadirá la información del vídeo: título, descripción, tema y preguntas. Todo ello siguiendo un flujo descendente, que termina en el botón para confirmar la subida del vídeo. Figura 4.5: Boceto de la vista uploadVideo
46 Capítulo 4. Desarrollo 4.4.3. Añadir un cuestionario Tal como se observa en la figura 4.6, el usuario seleccionará en la barra de progreso del vídeo el minuto en el que desea añadir un cuestionario. A su vez, se le muestran los campos que debe rellenar, cerrando la acción con un botón para añadir el cuestionario. Figura 4.6: Boceto de la vista addQuestion 4.4.4. Vista de un vídeo Cuando el usuario acceda a un vídeo para visualizarlo, se le mostrará la vista que aparece en la figura 4.7. En esta vista, el usuario observará en la parte central de la vista el contenido del vídeo, donde además aparecerán los cuestionarios, en caso de haber sido añadidos. En la parte inferior, el usuario tiene los controles del vídeo para pausar, subir el volumen o ponerlo en pantalla completa. En la parte superior del vídeo se muestra el título y en la parte inferior, el resto de información relativa al vídeo: el autor, la descripción, el número de favoritos y los resultados del usuario en los cuestionarios de ese vídeo. A la derecha del vídeo, se observa una lista con los vídeos relacionados con el que se está visualizando, es decir, los vídeos que traten el mismo tema. En cada uno de ellos se muestra la miniatura, el título, el autor y el número de favoritos. La disposición de esta vista se ha basado en la que utilizan algunas plataformas importantes de visualización de vídeos, como YouTube6. 6https://www.youtube.com
4.4. Prototipo 47 Figura 4.7: Boceto de la vista video 4.4.5. Perfil de un usuario En la figura 4.8 se muestra el boceto para la vista que tendrá un usuario en su perfil. En esta vista se incluye a la izquierda el perfil público del usuario. En la parte central, se muestran los datos del usuario, con un botón en forma de lápiz que le indica que puede modificar dicha información. En la parte inferior, se muestra una lista con todos los vídeos que ha subido ese usuario. Figura 4.8: Boceto de la vista profile
48 Capítulo 4. Desarrollo 4.4.6. Vista de ofertas El usuario dispondrá de una vista con las ofertas publicadas, como se muestra en la figura 4.9. En esta vista, podrá observar una lista con la información general de cada oferta, y dos botones a la derecha: uno para descargar el documento asociado a la oferta y otro para acceder al chat y comunicarse con la empresa en cuestión. En la parte superior, también se incluye una barra de búsqueda con la que encontrar las ofertas que sean de interés para el usuario. En caso de ser una empresa, se mostrarán botones para añadir una nueva oferta, editar o para ver las ofertas publicadas por dicha empresa. Figura 4.9: Boceto de la vista offers 4.4.7. Añadir una oferta En la figura 4.10 se muestra la vista para añadir una nueva oferta. En esta vista, se le presentan al usuario los campos que debe rellenar para crear una oferta, siguiendo un flujo descendente para que resulte más intuitivo. En primer lugar, un icono sobre el que pulsará para añadir el documento con toda la información de la oferta. A continuación, un campo de formulario donde añadir el nombre de la empresa. Finalmente, un selector para indicar el número de plazas ofertadas y otro campo en el que se elige el salario que se ofrece. Toda la secuencia de acciones se cierra con el botón en la parte inferior de la vista que guardará toda la información cumplimentada.
4.4. Prototipo 49 Figura 4.10: Boceto de la vista uploadOffer 4.4.8. Ofertas de una empresa El boceto que se observa en la figura 4.11 le muestra al usuario registrado como empresa todas las ofertas que éste ha subido. En cada una, se muestra la información general y qué usuario se ha registrado en cada una de ellas, así como un botón para acceder al chat con cada uno de los usuarios. Figura 4.11: Boceto de la vista yourOffers
50 Capítulo 4. Desarrollo 4.4.9. Administración de usuarios En la figura 4.12 se muestra el boceto de la vista que tendrán los administradores de la página para gestionar los usuarios. En esta vista se observa una lista que contiene la información de cada usuario y a la derecha los botones de acción referente a dicho usuario. Figura 4.12: Boceto de la vista adminUsers 4.4.10. Administración de vídeos El boceto de la página de administración de vídeos, presente en la figura 4.13, sigue la misma estructura que la de administración de usuarios, lo que facilita la tarea a los administradores. Figura 4.13: Boceto de la vista adminVideos
4.4. Prototipo 51 4.4.11. Administración de ofertas En la figura 4.14 se muestra el boceto de la vista que tendrán los administradores de la página para gestionar las ofertas. Ésta tiene la misma estructura que las anteriores, es decir, una lista con las ofertas y botones de acción para cada una. Figura 4.14: Boceto de la vista adminOffers 4.4.12. Administración de mensajes El boceto de la página de administración de mensajes se observa en la figura 4.15 y sigue la misma estructura que el resto de páginas de administración. Figura 4.15: Boceto de la vista adminMessages
52 Capítulo 4. Desarrollo 4.5. Análisis de tecnologías En esta sección se analizan las distintas tecnologías que se pueden emplear en el desarrollo de la aplicación web y las que finalmente se decidió utilizar. 4.5.1. Framework Un framework es un conjunto de herramientas que proporciona una estructura base sobre la que desarrollar software. De esta manera se facilita la programación de aplicaciones evitando tener que desarrollarlas desde cero. Un framework puede ser general o específico para un tipo de software. En el presente trabajo, se analizaron los frameworks más utilizados en el desarrollo de aplicaciones web para determinar cuál sería el idóneo para implementar la aplicación que se pretende desarrollar. 4.5.1.1. Ruby on Rails Ruby on Rails7es un framework que utiliza Ruby como lenguaje de programación para desarrollar aplicaciones web. Para ello, utiliza el patrón modelo-vistacontrolador, el cual separa la lógica y los datos de su representación. A pesar de ser un framework bastante potente debido a su facilidad de uso y buen rendimiento, el lenguaje Ruby se tendría que aprender desde cero, por lo que se decidió optar por otras propuestas. 4.5.1.2. Django En cuanto a Django8, éste ofrece una gran cantidad de documentación, además de un tutorial detallado para aprender a desarrollar aplicaciones en dicho entorno (Django, 2023). Utiliza Python como lenguaje de programación y está muy centrado en los aspectos de seguridad. Éstas características lo convertían en una buena opción para el desarrollo de la presente aplicación, sin embargo se consideró que la curva de aprendizaje sería demasiado grande como para comenzar a desarrollar la aplicación cómodamente. 4.5.1.3. Node.js Por su parte, Node.js9utiliza el lenguaje JavaScript y es un framework muy utilizado en aplicaciones grandes, como Netflix o LinkedIn. Además realiza operaciones de entrada-salida asíncronas, lo que evita bloqueos y ofrece un mejor rendimiento. Sin embargo, no se consideró el framework más adecuado para el desarrollo de 7https://rubyonrails.org 8https://www.djangoproject.com 9https://nodejs.org/es
4.5. Análisis de tecnologías 53 la aplicación, debido a la falta de estándares de desarrollo, lo que dificultaría el desarrollo y el mantenimiento del código. 4.5.1.4. Laravel Laravel10 es un framework que utiliza PHP como lenguaje de programación, además del patrón modelo-vista-controlador para desarrollar aplicaciones web. Incluye una extensa página de documentación, que contiene estándares, recomendaciones y buenas prácticas que ayudan mucho a los desarrolladores y facilitan su aprendizaje (Laravel, 2023d). Por otra parte, el lenguaje PHP resultaba familiar ya que ha sido utilizado durante la carrera para la programación de aplicaciones web. Asimismo, la estructura de los proyectos es robusta y el código, legible y conciso, además de que cuenta con múltiples paquetes y complementos que ayudan a simplificar el desarrollo. Por todo ello, se decidió utilizar Laravel para el desarrollo de la aplicación web, ya que es un framework muy completo, versátil y con una estructura robusta en la que implementar las funcionalidades que se pretende. 4.5.2. Gestión de la base de datos Los datos persistentes de la aplicación deben ser gestionados a través de un sistema de gestión de bases de datos (SGDB o DBMS, en inglés, es el sistema que se encarga de manejar toda la información que se almacena en una base de datos). En esta sección se analizan los diferentes sistemas que pueden utilizarse para este propósito. 4.5.2.1. MongoDB MongoDB11 es un SGDB no relacional, lo que significa que no utiliza tablas que se relacionan entre sí para almacenar la información. Este sistema es útil cuando se tienen que almacenar datos no estructurados o semi estructurados, sin embargo en la base de datos previamente definida se pretende almacenar la información en tablas, de manera estructurada, ya que garantiza la integridad de los datos, lo cual es un aspecto muy importante en relación a la seguridad de la aplicación. Por tanto, los sistemas de gestión de bases de datos no relacionales no se contemplaron para la gestión de los datos persistentes. 4.5.2.2. SQLite SQLite12 es un sistema de gestión muy sencillo, orientado a bases de datos pequeñas para aplicaciones a pequeña escala. Por esta razón, SQLite no es una buena 10https://laravel.com 11https://www.mongodb.com 12https://www.sqlite.org/index.html
60 Capítulo 4. Desarrollo Figura 4.20: Código HTML proporcionado por Font Awesome para incrustar el icono en las vistas las opciones para react ovue.js. Sin embargo, como para el desarrollo de Wishten no se utilizan estas herramientas para representar las vistas, no se usaron dichas opciones. 4.6.1.5. Estilo Para realizar las vistas de la página web se decidió desde un principio utilizar HTML5 y CSS puros. En primera instancia, se valoró utilizar Bootstrap28 para agilizar el proceso de creación de las vistas y poder centrarse en las diversas funcionalidades, sin embargo al final no se utilizó por diversos motivos. Uno de los principales motivos por los que no se utilizó Boostrap es debido a una de sus mejores características: los componentes y estilos predefinidos. Bootstrap es una toolkit muy utilizada que ofrece una gran cantidad de componentes, y estilos listos para usar, los cuales hubieran agilizado el proceso de desarrollo de Wishten. No obstante, el hecho de que dichas plantillas estuvieran presentes en numerosas páginas web hizo que se optara por no utilizar Bootstrap y buscar un diseño diferenciador. Tras investigar el diseño de algunas aplicaciones como TikTok29, Instagram30 u otras redes sociales conocidas, se pudo observar cómo todas ellas usaban vistas muy simples con pocos botones que se encargan de mostrar, mediante ventanas modales, la diferente información asociada a ellos (acciones de editar, eliminar, crear, etc.). Todas las plantillas de Bootstrap que se examinaron estaban orientadas a mostrar toda la información al usuario y, si bien visualmente era muy atractivo, no era exactamente lo que mejor se adaptaba a este proyecto. 28https://getbootstrap.com 29https://www.tiktok.com 30https://www.instagram.com
4.6. Implementación 61 La aplicación que se pretende desarrollar, busca que los usuarios puedan encontrar vídeos que les sean útiles y ofertas de empleo o de prácticas en empresas. Por ello, lo que se busca es que la información que se le muestre al usuario sea mínima y lo más informativa posible. Con esto se pretende que la mayor parte del tiempo que los usuarios pasen en la aplicación sea viendo el vídeo o la oferta que les interese. Esta forma de mantener a los usuarios en la aplicación es muy utilizada en las redes sociales y por ello se han usado éstas como ejemplo a seguir de cara a estructurar y definir las vistas de la aplicación. Otro de los motivos por los que Bootstrap es tan utilizado es porque facilita mucho la adaptación de las vistas en diferentes tamaños de pantalla. Esto resulta muy útil ya que una aplicación web puede ser usada en un dispositivo móvil, ordenador, tablet, etc. Sin embargo, la presente aplicación no busca estar orientada a otro dispositivo que no sea un ordenador. Eso no quiere decir que no se hayan adaptado las vistas a los demás dispositivos, si no que, al no ser un motivo de tanto peso, no se consideró una ventaja dicha utilidad de Bootstrap para la representación de las vistas de este proyecto. Si bien es cierto que todo lo que te ofrece Bootstrap es modificable, éste no tenía las características que se buscaban, además ya se tenían conocimientos previos sobre el manejo de HTML5 y CSS. Por ello, al no utilizar plantillas predefinidas, se contaba con total libertad para crear las vistas. Por todo ello y por los motivos descritos anteriormente se decidió al final no utilizar Bootstrap ni ningún otro framework de frontend. La representación de las vistas usando HTML5 y CSS ha sido muy variada en Wishten, a pesar de que existen algunos componentes y estilos comunes a todas ellas y que son importantes de explicar para entender su estructura y representación. Para estructurar los elementos de la aplicación, se han creado ficheros CSS (en /public/css) desde los que se define el estilo de cada página. Como cada página muestra elementos diferentes y tiene una estructura diferenciada, se ha creado prácticamente un fichero CSS por cada vista. De esta manera se puede ajustar más el estilo al contenido específico de cada página. Dentro de cada vista, existen elementos que comparten estilo, como botones, inputs de formularios o selectores. Por tanto, para aplicarles el mismo estilo a todos, se han utilizado selectores de clase, en los que se establece el color, el tamaño y el resto de características. Por otro lado, para los elementos únicos, se utilizan identificadores (ID), que son únicos en todo el código HTML de la vista. Estos componentes se agrupan dentro de contenedores, para los que se utiliza la etiqueta <div> y se define su disposición en las hojas de estilo. Principalmente se ha utilizado el diseño flex (flexible), que dispone los elementos uno detrás de otro, de forma vertical u horizontal. Esto se ha utilizado tanto para alinear los campos de los formularios, como para mostrar las listas de vídeos y ofertas en las diferentes vistas. También se ha utilizado un diseño grid(cuadrícula) para las vistas en las que se muestra una gran cantidad de elementos, ya que este tipo de diseño dispone los
62 Capítulo 4. Desarrollo elementos en una cuadrícula, es decir, el grupo crece tanto vertical como horizontalmente. Dicha disposición se utiliza, por ejemplo, para mostrar los resultados de búsqueda de la sección de vídeos de la aplicación. Además, se han utilizado las hojas de estilo para lograr que la aplicación sea responsiva, es decir, que el contenido que se muestra se modifique en función del tamaño de la pantalla. Para ello, se ha usado la regla @media, en la que se definen condiciones, como el ancho o el alto de la pantalla, que modifican la disposición o el tamaño del contenido. Por ejemplo, tal como se ve en la figura 4.21, se establece la anchura mínima necesaria para pasar de una disposición flex vertical (column) a una horizontal (row). Figura 4.21: Ejemplo de uso de @media en el CSS de la aplicación 4.6.1.6. JavaScript Para implementar diversos aspectos visuales y generar código HTML de manera dinámica dentro de la aplicación, se ha hecho uso de ficheros JavaScript (en /public/js). A continuación se explican los principales scripts que se han desarrollado para este proyecto. En primer lugar, para implementar la lógica para mostrar los cuestionarios dentro de los vídeos, se crearon dos scripts: showQuiz.js yanswerQuiz.js. El primero hace visible las respuestas por encima del vídeo y lo pausa, además de reanudar el vídeo y esconder la pregunta cuando esta ya ha sido respondida. El segundo se encarga de crear inputs escondidos que contienen el id de las respuestas seleccionadas y que se enviarán cuando el usuario pulse en “guardar resultados” mediante una petición HTTP. Por otro lado, para mostrar al usuario las estadísticas de cada pregunta del vídeo se utilizó la librería Chart.js31, que permite crear gráficos en JavaScript de manera sencilla. 31https://www.chartjs.org
4.6. Implementación 63 También se ha empleado código JavaScript para algunos detalles más simples: un botón para mostrar la contraseña y que el usuario compruebe si la ha escrito correctamente, un filtro de tablas HTML, ventanas modales que se superponen y algunos efectos visuales. 4.6.1.7. Licencia utilizada El código de este proyecto ha sido desarrollado bajo la licencia GNU Affero General Public License v3.0 (AGPL), la cual permite su modificación y distribución por terceras personas, ajenas al desarrollo del presente proyecto. Todo ello con la condición de que se distribuya bajo la misma licencia. Se ha seleccionado la AGPL frente a la GPL, ya que ésta es más utilizada para desarrollos software que se van a ejecutar en un servidor web. 4.6.2. Lógica El framework que se usa en esta propuesta, Laravel, está basado en el patrón modelo-vista-controlador (MVC, un patrón de arquitectura software que separa los datos y la lógica de su visualización) para gestionar la aplicación web. En la figura 4.22 se puede observar un diagrama que se ha elaborado para explicar cómo se conectan estos elementos dentro de una aplicación desarrollada en Laravel. Figura 4.22: Arquitectura de una aplicación en Laravel 4.6.2.1. Gestión de la base de datos La base de datos se gestiona desde el propio framework, utilizando un objectrelational mapper (ORM, un tipo de herramienta que permite realizar consultas a la base de datos usando programación orientada a objetos) llamado Eloquent, que permite realizar todas las operaciones sobre la base de datos utilizando únicamente clases de PHP. Las tablas de la base de datos se crean a partir de migraciones
64 Capítulo 4. Desarrollo (/database/migrations), que son ficheros PHP que especifican los atributos de la tabla y el ORM se encarga de traducirlo a SQL (Laravel, 2023b). Las relaciones entre tablas se gestionan, por tanto, utilizando los modelos y creando funciones de diferentes clases según el tipo de relación. De esta manera, una vez se crean las migraciones y se establecen dichas relaciones entre los modelos, Eloquent se encarga de actualizar la base de datos a medida que se introducen cambios desde la aplicación. Además las tablas que relacionan los modelos principales (usuarios, vídeos, preguntas...) se gestionan en Laravel mediante relaciones entre los modelos. Por tanto no es necesario crear un modelo ni un controlador para gestionar dichas tablas intermedias (visualized_videos,follows,user_answer...), ya que estas se manejan a través de los modelos principales. 4.6.2.2. Modelo Vista Controlador En cuanto a la estructura de MVC, los modelos (/app/Http/Models) son clases de PHP que se corresponden con las tablas principales de la base de datos. Por tanto, utilizando estas clases, se consultan y modifican los datos de cada tabla. En segundo lugar están las vistas (/resources/views), que utilizan un sistema de plantillas llamado Blade (Laravel, 2023a). Este sistema permite crear secciones en el código HTML, dejar huecos que se rellenan con llamadas a funciones y añadir bucles y condicionales para gestionar lo que se muestra en una página. En tercer lugar, están los controladores (/app/Http/Controllers), que son los que gestionan todas las peticiones mediante funciones que actualizan la base de datos, haciendo uso de los modelos, y redireccionan a las vistas correspondientes. 4.6.2.3. Rutas Para que el cliente envíe peticiones al servidor, existen las rutas, que se gestionan desde el fichero /routes/web.php. En él se definen los nombres de las rutas a las que acceden los usuarios y las acciones que realizan (GET, POST, etc.). Las rutas se pueden agrupar en torno a un controlador que gestiona todas ellas y de esta manera se declara una ruta por cada función del controlador. Además, para restringir ciertas acciones, se utilizó un middleware (Laravel, 2023e), que es un mecanismo para filtrar las peticiones HTTP. Se utilizó el middleware Authenticate, proporcionado por Laravel para controlar las rutas que requieren la autenticación previa de los usuarios. Se creó también un middleware propio (UserRoles) para controlar el acceso a las rutas que requieren un rol específico. 4.6.2.4. Políticas de acceso Para restringir el acceso de los usuarios a la realización de determinadas acciones sobre los modelos, se utilizaron también las políticas de autorización de Laravel.
4.6. Implementación 65 Para ello se creó una clase para cada modelo donde se definen las acciones que puede realizar un usuario como funciones (create,update,delete...). En general, los usuarios con el rol de administrador son los únicos autorizados para crear, actualizar y eliminar cualquier modelo. Por su parte, al resto de usuarios se les permite únicamente realizar cambios sobre los modelos que les pertenezcan, por ejemplo, su propio perfil o los vídeos que hayan subido a la aplicación. Las clases que representan las políticas de cada modelo se almacenan en el directorio /app/Policies y dentro de los métodos de los controladores se comprueba si el usuario que realiza la petición puede o no realizar la acción solicitada. 4.6.2.5. Validación En cuanto a la validación de los campos que introducen los usuarios a través de los formularios, se utilizan clases personalizadas (en /app/Http/Requests), en las que se especifican los campos requeridos y lo que tienen que cumplir (tipo de campo, longitud, formato de ficheros...). Además, para proteger la aplicación de ataques de tipo Cross-Site Request Forgery (CSRF, un ataque que se produce cuando se ejecutan acciones no autorizadas desde un usuario en el que confía la aplicación), en todos los formularios de Laravel se incluye además un token especial (@csrf en el código Blade) que confirma que es el usuario el que ha hecho la petición en cuestión desde la aplicación. 4.6.2.6. Almacenamiento En relación a la gestión de los ficheros que se suben al servidor, éstos se almacenan en el directorio /storage/app, dentro del cual pueden ser públicos o privados, teniendo una carpeta public oprivate según el caso. Los ficheros que se quieran visualizar en la página deben estar en la carpeta /public, por tanto se debe crear un enlace simbólico desde esta carpeta a la carpeta /storage/app/public para poder crear una ruta a ese fichero dentro de la aplicación (Laravel, 2023c). 4.6.3. Funcionalidades Para cumplir con las necesidades de los usuarios, se han implementado diversas funcionalidades que gestionan cada aspecto de la aplicación web. 4.6.3.1. Gestión de usuarios El proceso de login y registro de usuarios se gestiona mediante el controlador AuthController, que contiene las funciones para validar los datos de entrada, reportar los errores correspondientes y crear y eliminar la sesión cuando se hace logout. Para estas acciones se utilizan de las clases Auth ySessions de Laravel, que implementan la autenticación y la gestión de sesiones, respectivamente. Las vistas utilizadas son
66 Capítulo 4. Desarrollo login (figura 4.23) y registration (figura 4.24), que muestran los formularios de inicio de sesión y registro. Figura 4.23: Vista login Figura 4.24: Vista registration Para gestionar la información de los usuarios se utiliza el controlador UserController, que contiene las funciones para actualizar los atributos del usuario. Los usuarios pueden acceder a la vista profile, tal como se ve en la figura 4.25, para modificar su
4.6. Implementación 67 nombre, dirección email y foto de perfil. Las fotos de perfil se almacenan en /storage/app/public/profile_pics con un nombre aleatorio asignado por la aplicación y la ruta se almacena en un campo de la tabla users. Figura 4.25: Vista profile Por otro lado, un usuario puede también ver los perfiles de otros usuarios desde la vista profile, accediendo a través de los vídeos que éstos hayan subido. En esta vista, además de la información del usuario consultado, aparece un botón para seguir al usuario. En la vista del perfil se muestran también el número de seguidores, seguidos y el número total de favoritos, sumando todos los vídeos del usuario. Adicionalmente, se puede consultar las listas de seguidores y seguidos, que se mostrarán en la vista follows, que se puede ver en la figura 4.26. Figura 4.26: Vista follows Los administradores gestionarán los usuarios de la aplicación desde la vista adminUsers, accesible a través de la página de administración. Desde ahí podrán añadir
68 Capítulo 4. Desarrollo nuevos usuarios, eliminar cuentas o modificar la información de éstos, como se ve en la figura 4.27. Los administradores no pueden modificarse a sí mismos desde la página de administración, puesto que para ello ya utilizarán la vista de perfil. Sin embargo sí aparecen en la tabla de usuarios, ya que en ésta deben figurar todos los usuarios de la aplicación, salvo que en este caso, los botones de acción están deshabilitados para su propia cuenta de usuario. Figura 4.27: Vista adminUsers 4.6.3.2. Gestión de vídeos Todas las funcionalidades para crear, editar y eliminar los vídeos se gestionan desde el controlador VideoController. Los vídeos pueden ser subidos por cualquier usuario registrado desde la vista newVideo, tal como se muestra en la figura 4.28. Para crear un nuevo vídeo, debe incluirse el propio archivo de vídeo, un título, una descripción, un tema y un archivo de imagen que sirve como miniatura. Por tanto, los usuarios no podrán incluir contenidos de otras plataformas, sino que tendrán que subir el archivo desde su equipo. Esto se debe a que se pretende que los contenidos subidos a esta aplicación web sean originales, además de evitar los problemas de propiedad intelectual que conlleva permitir a los usuarios incrustar vídeos de otras plataformas. En cuanto a los temas de los vídeos, aquellos que ya se hayan utilizado, se almacenan en la base de datos y aparecen como sugerencia, pero el usuario siempre podrá añadir el tema que quiera y éste se guardará de la misma manera. De esta forma, los propios usuarios propondrán los temas de los vídeos, siendo más útiles para los usuarios con los mismos intereses. Una vez subido el vídeo, el usuario puede decidir añadir preguntas interactivas, lo que mejorará la experiencia de aprendizaje de los usuarios.
4.6. Implementación 69 Figura 4.28: Vista newVideo La información de los vídeos se almacena en la base de datos, donde además se guardan las rutas a los ficheros de vídeo e imagen. Por su parte, el archivo de vídeo y la imagen para la miniatura se guardan en la carpeta /storage/app/public/videos. Se utiliza una estructura de directorios para almacenar ordenadamente los ficheros que consiste en agrupar los vídeos del mismo tema en la misma carpeta, de modo que se tiene subcarpetas con el nombre de cada vídeo más un identificador formado a partir de la fecha exacta de subida (para el caso de que hubiese varios vídeos con el mismo título). Dentro de cada subdirectorio habría dos archivos, uno de vídeo y otro de imagen, correspondiente a la miniatura. Los nombres de estos archivos se generan de la siguiente forma: vídeo: wishten-{identificador fecha}-{id del vídeo}.{extensión} miniatura: wishten-{identificador fecha}-{id del vídeo}-thumbnail.{extensión} Para generar el nombre de los ficheros se utiliza un identificador generado con la fecha para corroborar su correspondencia con el directorio en el que se encuentra, por lo que se puede saber si los archivos han sido modificados o reubicados donde no corresponde. También se utiliza el id del vídeo, que es único y que, al buscarlo en la base de datos, debe coincidir el título del vídeo con el que aparece en el nombre del directorio. De esta manera se puede verificar que el contenido almacenado se corresponde con la información almacenada en la base de datos. De esta manera, los ficheros se estructurarían automáticamente tal y como se muestra en la figura 4.29. Mediante esta forma de organizar los ficheros, éstos son más fáciles de acceder por parte de los administradores, en caso de existir algún problema con ellos que no se pudiera gestionar desde la página de administración de la propia aplicación. En cuanto a la búsqueda de vídeos, los usuarios registrados contarán con una vista general desde la página principal que se puede ver en la figura 4.30. En esta vista encontrarán los vídeos organizados en varias listas, ordenados según el número de visitas, el número de usuarios que lo guardaron en favoritos y la fecha de subida.
76 Capítulo 4. Desarrollo permite al propietario cambiar los campos de la oferta, pero no puede cambiar el documento asociado a ella. Esto se debe a que el fichero de la oferta es el elemento principal al que van asociados el resto de los campos, es decir sin documento, dichos campos no irían asociados a nada, por ello, si se desea cambiar el fichero de la oferta, esta debe crearse desde cero y subir una nueva oferta. La vista cuenta además con un botón para eliminar la oferta. Figura 4.40: Vista offerEdit Las diferencias en cuanto a la aparición o la no aparición de los botones para realizar las acciones comentados anteriormente se puede apreciar observando las figuras 4.41 y 4.42. Figura 4.41: Vista offerHome desde usuario con rol company oadmin Para poder crear y subir una oferta se debe incluir, un archivo que tenga alguna de las extensiones que se han especificado en el fichero OfferRequest. También debe
4.6. Implementación 77 Figura 4.42: Vista offerHome desde usuario con rol standard incluir un título para la oferta, una descripción, un número de plazas libres y un salario. El fichero que se suba debe ser propio ya que, al igual que con los vídeos, se pretende que todo aquello subido a la aplicación web sea original y evitar así los posibles problemas relacionados con la propiedad intelectual de los propietarios de dichos ficheros. Todos los campos mencionados son obligatorios a la hora de subir una oferta a la aplicación, ya que todos ellos contienen información de interés para los estudiantes. Las ofertas son almacenadas en la base de datos, el documento que decida subir la empresa a la hora de crear la oferta se guarda en una ruta en específico en la carpeta /storage/app/public/offers. Esto es importante debido a que los usuarios van a poder descargar dichos documentos con el fin de evaluar de mejor forma la oferta propuesta por la compañía, por ello es importante tener claro dónde van a estar estos documentos almacenados. Con el fin de intentar seguir manteniendo un orden en el almacenamiento de los documentos, estos se almacenan en la ruta comentada anteriormente utilizando el título que tenga la oferta que contiene dicho documento y la fecha en la que se ha subido, ya que si solo fuera el título habría problemas al existir más de dos ofertas que contaran con el mismo título. A la diferencia de lo que ocurre con los vídeos donde se guardan dos ficheros, aquí solo se guarda un fichero, por ello no hace falta crear subcarpetas para cada uno dentro de la carpeta offers. Para guardar el fichero se utiliza el siguiente formato dentro de la carpeta offers: wishten-{identificador de la fecha}-{título de la oferta}.{extensión} Se utiliza este formato ya que es el que resulta más cómodo a la hora de tener que buscar una oferta en concreto.El uso de la fecha se debe a que se pueden modificar las ofertas y por tanto cambiar la fecha de estas a la fecha en la que se modificó.
78 Capítulo 4. Desarrollo Esta forma de almacenar los documentos hace que la labor de los administradores a la hora de gestionar las ofertas sea más rápida en caso de no poder realizarse dicha labor desde la página de administración de ofertas de la propia aplicación. Gracias a lo comentado anteriormente los ficheros asociados a cada oferta se estructurarán automáticamente cómo se muestra en la figura 4.43. Figura 4.43: Estructura de almacenamiento de los documentos asociados a las ofertas Respecto a la búsqueda de ofertas, los usuarios tendrán una vista general desde la vista homeOffer, a la cual se accede utilizando el segundo icono de la cabecera de la propia aplicación. En esta vista encuentran todas las ofertas unas debajo de otras y se podrán realizar búsquedas por título gracias a la barra de búsqueda, la cual permite que los usuarios puedan centrarse solo en las que les interesan. También existe otra barra de búsqueda que permite buscar las ofertas según un valor mínimo de salario, es decir, todas aquellas ofertas que tengan ese valor o uno mayor para el campo salario serán mostradas al usuario. De esta forma, los usuarios podrán buscar las ofertas por su título o por su salario, siendo ambas búsquedas compatibles, ya que se pueden buscar ofertas de un determinado título y dentro de ese título filtrar para ver aquellas que ofrecen las condiciones de salario que decida buscar el usuario. Desde su vista el usuario podrá ver todos los campos de la oferta, es decir, el título, la descripción, la cantidad de plazas libres y el salario. Para el documento este deberá pulsar el botón llamado download y se le descargará el documento que haya subido la compañía a la oferta. También contará con un botón para previsualizar el documento antes de descargarlo. Hay que destacar que, dado que el campo descripción puede ser muy largo, se ha decidido usar una ventana modal para que este se muestre en cada oferta y no interfiera con la estructura de la vista. Esto puede verse en la figura 4.44. Finalmente, cabe destacar que se ha creado una página principal para los usuarios no registrados (figura 4.45) en la que se explican las funcionalidades que ofrece la aplicación. Asimismo, se muestran tres vídeos en los que se explican algunas de las funcionalidades básicas: subir un vídeo, subir una oferta y añadir preguntas a un vídeo. Además, los usuarios registrados que deseen consultar esta información podrán seguir accediendo a esta vista a través de la ruta tutorials.
4.6. Implementación 79 Figura 4.44: Vista offerHome cuando un usuario hace clic en View para ver la descripción de la oferta Figura 4.45: Vista homeGuest 4.6.3.5. Gestión de chat Todas las funcionalidades para crear un chat, enviar y recibir mensajes se gestionan desde el controlador ChatController. Para entender cómo se envían y reciben mensajes, primero hay que explicar cómo se crea un chat. Los usuarios que tengan el rol standard, en cada oferta tendrán un botón llamado chat y cuando éstos hagan clic sobre él, se creará una conversación entre el usuario que ha subido la oferta, es decir, la empresa, y el usuario que pulsó el botón. En el momento que se pulsa dicho botón se crea la conversación entre ambos usuarios y dicha conversación seguirá creada, aunque no se envíe ningún mensaje. Los usuarios con rol standard son los únicos que pueden iniciar una conversación, por lo que son ellos siempre los que la van a crear al pulsar el botón de chat. La vista chat es la encargada de mostrar la conversación entre dos usuarios. A la hora de crear un chat, éste estará vacío y, por tanto, la vista mostrará sólo un chat en blanco como se puede observar en la figura 4.46. Sin embargo, cuando el usuario
80 Capítulo 4. Desarrollo comience a enviar mensajes, éstos irán apareciendo en pantalla tal y cómo se puede ver en la figura 4.47. Figura 4.46: Vista chat - Conversación sin mensajes Figura 4.47: Vista chat - Conversación con mensajes Cada mensaje que se envía muestra el nombre del usuario que ha enviado dicho mensaje, en la parte superior, y la fecha en que dicho mensaje ha sido enviado, en la parte inferior derecha. Para enviar mensajes únicamente se debe escribir el cuerpo del mensaje que se quiera enviar en el input que aparece en la parte inferior y pulsar el botón send para enviarlo. Todos los mensajes enviados por ambas partes se mostrarán en orden cronológico para seguir el flujo de la conversación. Para que un usuario pueda ver todos los chats que tiene activos, es decir, todos aquellos chats en los que ha enviado algún mensaje, se ha creado la vista myChats. A esta vista pueden acceder los usuarios con rol standard desde la página principal de ofertas, a través de un botón situado en la parte superior, encima de la barra de búsqueda de ofertas.
4.6. Implementación 81 En la vista myChats aparecerán todos los chats en los que el usuario ha enviado algún mensaje, mostrando por cada uno el nombre de la empresa, el título de la oferta a la que va asociada la conversación y un botón para acceder al chat correspondiente, como se puede observar en la figura 4.48. Sólo se muestran los chats que tengan algún mensaje, ya que puede que el usuario tenga varias conversaciones abiertas con varias empresas, pero no haber enviado ningún mensaje en ellas. También puede darse el caso en el que no tenga ningún chat activo, por lo que, en dicho caso, no aparecerá ningún chat. Figura 4.48: Vista myChats Los usuarios con rol company oadmin no contarán con la vista comentada anteriormente, pero sí con otra llamada chatList. La función de esta vista es proporcionar a las empresas un listado de todos los chats que tienen activos por cada oferta. El hecho que estén activos significa que la conversación contiene algún mensaje. Para poder acceder a la vista chatList sólo hay que pulsar el botón llamado View Chats que se encuentra asociado a cada oferta en la vista myOffers. Gracias a esto, las empresas pueden ver cada cierto tiempo qué ofertas son las que tienen chats activos, ya que la vista chatList muestra todos ellos, como se puede ver en la figura 4.49. Puede darse el caso de que una oferta no tenga chats activos, por lo que en dicho caso no aparecerá ningún usuario. Por último, el administrador podrá acceder desde la vista adminMessages a todos los mensajes, pudiendo buscar todos aquellos mensajes de una determinada conversación, introduciendo su id correspondiente tal y cómo se ve en la figura 4.50. En esta vista el administrador podrá eliminar aquellos mensajes que crea necesario pulsando el botón de delete, al igual que en el resto de las vistas de administración. Como éste es el único usuario que puede eliminar un mensaje, no ha sido necesario en esta ocasión crear un fichero policy para restringir las acciones sobre los mensajes.
82 Capítulo 4. Desarrollo Figura 4.49: Vista chatList Figura 4.50: Vista adminMessages 4.7. Casos de uso A continuación, se definen los actores de la aplicación web, es decir, cada tipo de usuario que interactúa con el sistema, así como las propias interacciones que éstos realizan con la aplicación. Estas interacciones se denominan casos de uso y difieren según el tipo de usuario. 4.7.1. Actores de la aplicación Dentro de la aplicación se diferencian tres actores, que se corresponden con los tres roles de usuario definidos anteriormente: Estudiante: Son los usuarios con rol standard y se presupone que en su mayoría son estudiantes universitarios. Éstos usuarios pueden acceder a todo el contenido de la aplicación, tanto vídeos como ofertas. Además, tienen la capacidad de crear y publicar los vídeos que otros usuarios visualizan, así como introducir cuestionarios dentro de ellos. Empresa: Son los usuarios con rol company y únicamente pueden acceder al contenido relativo a las ofertas. Éstos usuarios pueden crear y gestionar las ofertas publicadas, así como comunicarse con los solicitantes.
4.7. Casos de uso 83 Administrador: Son los usuarios con rol admin y tienen acceso y control total sobre todo el contenido de la aplicación. Pueden crear, modificar y eliminar vídeos, ofertas y usuarios, así como alterar características de éstos, como la visibilidad de un vídeo o el rol de un usuario. 4.7.2. Diagramas de casos de uso Para comprender cómo interactúan los usuarios con la aplicación, se ha elaborado un diagrama por cada actor en el que se muestran los casos de uso, es decir, las funcionalidades del sistema con las que interactúa dicho actor. Los diagramas han sido creados siguiendo el Lenguaje Unificado de Modelado (UML, por sus siglas en inglés, es un lenguaje de modelado visual que se utiliza para diseñar sistemas software). En estos diagramas, los casos de uso se conectan entre ellos mediante dos tipos de relaciones: «include», que implica que un caso de uso utiliza siempre a otro, por lo que depende de él; y «extend», que implica que un caso de uso extiende la funcionalidad de otro, pero de manera opcional. 4.7.2.1. Estudiante En la figura 4.51 se muestra el diagrama de casos de uso de los estudiantes. Todas las acciones requieren haber iniciado sesión y, por tanto, haberse registrado en primer lugar en la aplicación. De esta forma, se pueden almacenar métricas, como las respuestas que den los usuarios a los cuestionarios, el número de usuarios que ve cada vídeo o el número de usuarios que utiliza la aplicación. Si los usuarios no se registraran previamente, se perdería esta información, que es valiosa para conocer el uso que se le da a la aplicación. Figura 4.51: Diagrama de casos de uso - Estudiante
84 Capítulo 4. Desarrollo 4.7.2.2. Empresa En el diagrama que se muestra en la figura 4.52 se observan los casos de uso específicos para los usuarios con rol empresa. Estos usuarios pueden realizar las mismas acciones que los estudiantes, más las funcionalidades mostradas en el diagrama, relativas a la gestión de ofertas. Figura 4.52: Diagrama de casos de uso - Empresa 4.7.2.3. Administrador El diagrama de casos de uso del usuario administrador se muestra en la figura 4.53. Los administradores tienen control sobre todo el contenido de la aplicación: cuentas de usuario, vídeos, ofertas y mensajes. Figura 4.53: Diagrama de casos de uso - Administrador
4.8. Diagramas de flujo 85 4.8. Diagramas de flujo Seguidamente se muestran los diagramas de flujo elaborados para explicar de manera gráfica la interacción de los usuarios con la aplicación. En ellos se muestra el flujo de acciones que se llevan a cabo en las principales funcionalidades. 4.8.1. Inicio de sesión y registro En la figura 4.54 se muestra el proceso que se sigue para iniciar sesión en la aplicación. Para ello, el usuario debe registrarse previamente en la aplicación e introducir correctamente su email y contraseña. Figura 4.54: Diagrama de flujo - Login y registro 4.8.2. Subir un vídeo Para subir un nuevo vídeo, el usuario debe introducir la información de éste y añadir los ficheros correspondientes al vídeo y la miniatura. En la figura 4.55 se muestra dicho proceso en un diagrama de flujo. Figura 4.55: Diagrama de flujo - Subir un vídeo
92 Capítulo 5. Resultados bilidad de cambiar el documento asociado a la oferta. A pesar de que se le explicaron los motivos asociados a la dicha circunstancia, el comentario aportado se tendrá en cuenta para realizar una mejora en el futuro. Por último, se van a examinar los comentarios proporcionados por los usuarios restantes que adoptaron el rol standard, es decir, el usuario promedio de la aplicación. El primer usuario no tuvo ningún problema a la hora de realizar las acciones que se le pidieron ni para acceder a las páginas dónde realizarlas. Sin embargo, el usuario expresó que hubiera preferido que los tutoriales estuvieran disponibles en español, lo cual ya se tenía planeado añadir en un futuro. El segundo usuario tuvo problemas para guardar los resultados de los cuestionarios, ya que pensó que se actualizaban automáticamente, a pesar de que para ello es necesario pulsar un botón para almacenar las respuestas proporcionadas en un vídeo. Este usuario indicó que le hubiera resultado más cómodo si dicho botón no existiera o, de existir, que éste se encontrara más visible. El tercer usuario no tuvo ningún problema en relación a la realización de las acciones pedidas ni realizó ningún comentario sobre aspectos que le resultaran incómodos o mejorables. El cuarto usuario tampoco tuvo problemas a la hora de realizar las acciones pero sí hizo varios comentarios. El primero fue relativo a la existencia de las dos barras de búsqueda en la vista de las ofertas. Preguntó si no se podría realizar la búsqueda únicamente con una barra ya que, a pesar de ser intuitivo y de entender el funcionamiento de ambas, indicó que no suele ser común contar con dos barras de búsqueda en otras aplicaciones. El segundo comentario que hizo fue relativo al idioma de los tutoriales, puesto que hubiera preferido que estuvieran en español. El quinto y último usuario expresó que no le resultaba muy cómodo el tener que crear un vídeo de cero en lugar de, simplemente, cambiar el archivo de vídeo. También realizó el mismo comentario referente a las ofertas. Sin embargo, al explicarle los motivos detrás de esta implementación, el usuario lo entendió perfectamente. No obstante, el comentario será tenido en cuenta de cara a una futura mejora. Todos los comentarios proporcionados por los usuarios de prueba serán tomados en cuenta para mejorar la aplicación en un futuro. En primer lugar se centrarán los esfuerzos en aquellas mejoras relacionadas con el idioma de los tutoriales y de la página, así como añadir la posibilidad de cambiar el fichero de vídeo en los vídeos y el de texto en las ofertas.
Cap´ ıtulo 6 Evaluación Puesto que se pretende realizar un estudio exhaustivo sobre la utilidad en el uso de cuestionarios dentro de los vídeos, se ha realizado un diseño de evaluación para el efecto. Esta evaluación no se ha podido llevar a cabo durante el desarrollo del presente trabajo, ya que se pretendía que ésta se realizara a lo largo de un curso académico completo. Para la realización de dicha evaluación se buscarán 20 estudiantes universitarios de Ingeniería Informática y se seleccionarán 4 asignaturas que vayan a cursar dichos estudiantes en ese año: 2 en el primer cuatrimestre y 2 en el segundo. En primer lugar, se creará una serie de vídeos aplicados a cada asignatura bajo la supervisión de los profesores que imparten dichas asignaturas, con el fin de garantizar que los vídeos abarquen todos los contenidos necesarios. De esta manera, los vídeos seleccionados serán utilizados por los estudiantes como complemento a su estudio habitual y se prepararán cuestionarios y anotaciones para incluir en los vídeos que se suban a Wishten. Una vez se hayan seleccionado a los 20 estudiantes, se les dividirá en dos grupos. Un primer grupo de 10 estudiantes que actuará como grupo de control durante la evaluación y un segundo grupo con los estudiantes restantes que actuará como grupo experimental. El grupo de experimentación utilizará exclusivamente la aplicación Wishten como complemento a su estudio, no permitiéndoles el uso de otras plataformas de vídeos cómo Youtube, Vimeo, etc. Por otra parte, al grupo de control se le pedirá que sí utilice dichas plataformas pero no se le concederá acceso a Wishten. Una vez organizados los grupos, al grupo de experimentación se le proporcionará acceso a través de Wishten a los vídeos comentados anteriormente junto a sus respectivos cuestionarios y anotaciones. Por su parte, al grupo de control se le proporcionará los vídeos a través de otros medios y sin los cuestionarios ni las anotaciones. Durante el periodo de evaluación se realizará periódicamente una serie de encuestas para comprobar la opinión que tienen sobre el método de estudio que están 93
94 Capítulo 6. Evaluación utilizando. Finalmente, al término de cada cuatrimestre y tras la realización de los exámenes y la obtención de las calificaciones finales se realizará una evaluación final. En dicha evaluación se consultará la opinión de los estudiantes sobre los respectivos métodos de estudio y se analizará el rendimiento académico obtenido en ambos grupos. Adicionalmente, se le pedirá al grupo de experimentación que realice una evaluación y una valoración de la aplicación. Una vez obtenidos todos los resultados, se procederá realizar un análisis de los mismos. Primeramente, se estudiarán los resultados de las encuestas periódicas relativas al método de estudio empleado por cada grupo, e individualmente por cada estudiante. Se relacionará el impacto de dicho método de estudio sobre los resultados académicos, así como la percepción de los estudiantes respecto al método empleado. Por último, se analizarán las opiniones finales de los estudiantes en relación a todo el proceso de aprendizaje seguido en cada cuatrimestre y se evaluará la percepción que tengan los estudiantes pertenecientes al grupo de experimentación sobre la aplicación utilizada. Con estos resultados se pretende evaluar la utilidad de incluir cuestionarios dentro de los vídeos, así como comprobar si su implementación dentro de la aplicación web les resulta útil a los estudiantes. Se espera que los resultados de esta evaluación vayan en consonancia con los obtenidos por los trabajos relacionados analizados en el capítulo 2. En relación a la evaluación del portal de ofertas, como no se tiene contacto con ninguna empresa, no se puede realizar una evaluación íntegra. Sin embargo, se propone publicar algunas ofertas de prueba y realizar una encuesta de satisfacción a los estudiantes del grupo de experimentación para que valoren también este aspecto de la aplicación.
Cap´ ıtulo 7 Conclusiones 7.1. Conclusiones En general, la mayor parte de los objetivos que se plantearon previamente al desarrollo de la aplicación web se han cumplido. Los dos objetivos principales que buscaba abordar la aplicación son, por un lado, proporcionar una ayuda a los estudiantes a través de la visualización de vídeos interactivos, y por otro, facilitar la conexión empresa-estudiante proporcionando un portal donde poder ver las ofertas y hablar con las empresas. Con el fin de poder cumplir los objetivos planteados inicialmente, se desarrolló con éxito una aplicación web que incorporara los elementos y las funcionalidades necesarias. En este sentido, el objetivo relacionado con la visualización de vídeos interactivos se ha conseguido cumplir de manera satisfactoria, puesto que en la aplicación desarrollada los usuarios pueden subir vídeos, añadir cuestionarios dentro de ellos y buscar aquellos vídeos que les interesen. Mediante la visualización de dichos vídeos, se pretende que los estudiantes logren alcanzar una mayor retención de la información gracias a los cuestionarios realizados durante los vídeos. Gracias a las pruebas realizadas y a los resultados obtenidos, se ha podido comprobar que la aplicación presenta una buena usabilidad en este aspecto, ya que los usuarios que la utilizaron la encontraron cómoda e intuitiva. Sin embargo, no se pudo realizar una evaluación exhaustiva y prolongada sobre la utilidad del uso de cuestionarios dentro de los vídeos. No obstante, dicha evaluación ha sido diseñada para realizarse en un futuro. El otro objetivo principal, relacionado con la conexión empresa-estudiante, también se ha podido alcanzar con éxito. La aplicación permite a las empresas subir ofertas, las cuales pueden ser vistas o descargadas por el resto de usuarios de la aplicación. Además de esto, el portal de ofertas permite a los usuarios comunicarse con las empresas a través de un chat asociado a cada una de las ofertas subidas por cada empresa. 95
96 Capítulo 7. Conclusiones Gracias a la existencia de los chats, que ofrecen una comunicación más directa, y a la utilización de los filtros existentes, los usuarios pueden agilizar el proceso de búsqueda de ofertas. Al igual que con los vídeos, las pruebas realizadas han generado resultados positivos en relación a la usabilidad y comodidad. Si bien al final se han podido cumplir los objetivos principales de manera satisfactoria, durante el desarrollo de estos se han presentado diversas dificultades que se han ido resolviendo de forma progresiva. Al principio, se tuvieron muchas dudas sobre las tecnologías que se iban a emplear para el desarrollo de la aplicación. Se dedicó mucho tiempo a investigar qué framework sería el más adecuado para alcanzar los objetivos previamente planteados. De esta manera, finalmente, se llegó a la conclusión de que Laravel sería el framework más indicado para la implementación del código de la aplicación. Una vez seleccionado el framework, a pesar de los conocimientos previos que se tenían sobre PHP, HTML, CSS y JavaScript, se tuvo que investigar en profundidad para comprender la estructura de ficheros de Laravel, así como los comandos y la sintaxis que éste utiliza. Cuando se empezó a desarrollar la aplicación, se planteó la idea de implementar una funcionalidad que permitiera a los usuarios grabar sus propios vídeos desde la propia aplicación, dándoles la posibilidad de grabar su pantalla y su audio. Para ello, se utilizaron dos scripts en Python: uno para grabar el audio y otro para grabar la pantalla. Sin embargo, si bien el de grabación de audio llegó a funcionar, el script encargado de grabar la pantalla no funcionaba como se esperaba. Como todavía quedaba el resto de funcionalidades por implementar, se decidió posponer esta funcionalidad para un trabajo futuro. Por ello, se conservaron estos scripts en el repositorio del proyecto, para continuar con su implementación posteriormente. En relación a la funcionalidad de gestión de vídeos, se tuvieron dificultades para implementar los cuestionarios dentro de los vídeos. Si bien se valoró la posibilidad de utilizar frameworks de JavaScript que ya implementan dicha funcionalidad, como H5P1, éstos no eran compatibles con la versión de Laravel en la que se estaba desarrollando la aplicación. Por tanto, al final, se decidió implementar esta funcionalidad desde cero utilizando JavaScript. Otra de las dificultades encontradas fue la creación del chat, ya que al principio se planteó una estructura de las tablas en la base de datos, pero como no se conseguía alcanzar lo que se pretendía, se tuvo que rediseñar esta estructura de nuevo. Se valoró la opción de utilizar Pusher2, el cual facilita el desarrollo de aplicaciones en tiempo real, sin embargo, para utilizarlo se requería realizar muchas modificaciones en la estructura del proyecto. Por esta razón se decidió seguir el camino que se planteó en un inicio pero realizando las modificaciones necesarias en la estructura de las tablas utilizadas para los chats. Una de las dificultades que requirió más tiempo para solventarse fue la forma 1https://h5p.org 2https://pusher.com
7.2. Trabajo futuro 97 de almacenar los ficheros correspondientes a los vídeos y las ofertas en Laravel. Al principio se desconocía qué carpetas de Laravel se encargaban de dicha funcionalidad, así cómo las instrucciones necesarias para implementarla. Sin embargo, tras investigar y realizar numerosas pruebas se pudo encontrar una manera sencilla de almacenar los ficheros, basada en una jerarquía de directorios. Si bien la utilización de Laravel en un principio supuso una serie de dificultades, una vez se entendió su funcionamiento, el uso de este framework agilizó mucho el proceso de desarrollo de la aplicación, gracias a su estructura de ficheros y a la sintaxis que éste utiliza. A pesar de todas las dificultades encontradas a lo largo del desarrollo del proyecto, el resultado obtenido se considera satisfactorio, ya que cumple con éxito los objetivos que se habían planteado inicialmente. 7.2. Trabajo futuro A pesar de que la mayoría de los objetivos iniciales planteados se han logrado cumplir de manera satisfactoria, hay algunos marcos y funcionalidades de la aplicación que se hubieran querido mejorar o ampliar. Sin embargo, debido a la planificación del tiempo en relación con el desarrollo, no se pudieron llevar a cabo. Una de las funcionalidades que se empezó a desarrollar, pero que al final se tuvo que posponer, es la ofrecer a los usuarios un espacio para poder crear sus propios vídeos. Lo que se pretendía hacer desde un principio era ofrecerles a los usuarios la posibilidad de grabar su pantalla y audio desde la propia aplicación. De esta manera, no tendrían que recurrir a aplicaciones externas para grabar el vídeo que deseen subir. A la hora de desarrollar dicha funcionalidad, se elaboraron dos scripts en Python que servían para grabar el audio y la pantalla del usuario. La grabación de audio no presentaba ningún inconveniente, pero a la hora de grabar la pantalla éste script no funcionaba como se esperaba. Como esta funcionalidad no formaba parte de los objetivos principales, se decidió pausar su desarrollo para continuarlo en un futuro. Otra funcionalidad que se hubiera querido añadir es la de permitir editar un fichero de vídeo, es decir, realizar cortes, editar las pistas de audio, etc. Esta funcionalidad, por el contrario, no se empezó a desarrollar, ya que abarcaría una gran cantidad de tiempo que se requería para desarrollar funcionalidades necesarias para cumplir los objetivos principales de la aplicación. Sin embargo, se considera que sería interesante poder realizar dichas acciones desde Wishten sin necesidad de tener que usar otras aplicaciones. Por otra parte, en base a las pruebas realizadas con los usuarios, se ha llegado a la conclusión de que hay dos funcionalidades que se deberían implementar en un futuro cercano. La primera de ellas está relacionada con la posibilidad de reemplazar los ficheros de vídeo en los vídeos y los de texto en las ofertas. Tal y como está actualmente
98 Capítulo 7. Conclusiones desarrollada la aplicación, si se desea cambiar dichos ficheros se tiene que crear el vídeo o la oferta de cero. Dado que han sido varios los usuarios que han destacado esta circunstancia, se estudiará la posibilidad de añadir dicho cambio y la forma de hacerlo. La segunda de ellas es la relativa al idioma de los tutoriales. El idioma, tanto de la aplicación como de los tutoriales, es el inglés, ya que se considera que, de esta forma, la aplicación podría ser utilizada por un gran número de personas. No obstante, sí que se quiere dar la posibilidad a los usuarios de seleccionar el idioma que deseen de tal forma que tanto la aplicación como los tutoriales estén en el idioma seleccionado. Dado que la cuestión del idioma ha sido bastante resaltada por parte de los usuarios, se le dará prioridad en futuras mejoras de la aplicación. Por último, se realizará la evaluación diseñada para comprobar la utilidad del uso de cuestionarios dentro de los vídeos en el proceso de aprendizaje de los estudiantes. También se evaluará la utilidad del portal de ofertas, para lo que se buscará contar con la ayuda de algunas empresas que puedan subir diversas ofertas al portal. Finalmente, se les realizará tanto a las empresas como a los usuarios una encuesta de satisfacción para poder ver los puntos a mejorar en el portal. Una vez realizada la evaluación y añadidas las mejoras mencionadas, se probará a poner la aplicación en producción en un servidor público para comprobar la recepción de los usuarios. No obstante, antes de publicar la aplicación, se realizará una revisión general aplicada al ámbito de la seguridad y del tráfico de usuarios. Para ello se investigarán las herramientas que se pueden utilizar para mejorar dichos aspectos de la aplicación.
Conclusions Conclusions Generally speaking, most of the goals that were posed before the web application’s development were accomplished. The two main goals to be approached by the application are, on the one hand, to provide support to the students through interactive videos visualization and, on the other hand, to facilitate the connection between companies and students by providing a portal to view offers and talk to companies. In order to achieve the goals set out initially, a web application was successfully developed to incorporate the necessary elements and functionalities. In this respect, the goal related with the interactive videos visualization was successfully achieved, as the application developed allows users to upload videos, include quizzes in them and search the ones that interest them. The purpose of these videos is that students can reach a better information retention, thanks to the quizzes included on them. The tests that were carried out and the results obtained have proven that the application has a great usability in this respect, as users found it comfortable and intuitive. However, it was not possible to carry out a thorough and extended assessment about the usefulness of using quizzes within videos. Nevertheless, this assessment has been designed in order to be carried out in the future. The other main goal, related with the connection between students and companies, was also successfully achieved. The application allows companies to upload offers which can be viewed or downloaded by the rest of the users. In addition, the offers portal allows users to communicate with companies through a chat linked to each of the offers uploaded by each company. Thanks to the existence of these chats, that provide more direct communication, and to the existing filters, users can speed up the process of searching offers. As well as with the videos, the testing carried out have generated positive results in relation to usability and comfort. 99
100 Capítulo 7. Conclusiones Although in the end the main goals were achieved satisfactorily, various difficulties have been encountered in the course of the development, which have been progressively solved. At first, there were a lot of doubts about the technologies that would be used in the application development. A lot of time was dedicated to investigate which framework best fitted to achieve the previously stated goals. In this way, finally, it was concluded that Laravel would be the most suitable framework to implement the code. Once the framework was selected, despite of the previous knowledge in PHP, HTML, CSS and JavaScript, in-depth research had to be carried out in order to understand the file structure of Laravel, as well as the commands and syntax used. When the development had already started, it was considered the idea of implementing a functionality to allow users to record their own videos from the application, giving them the possibility of recording their screen and audio. In order to do that, two Python scripts were used: one for recording audio and one to record the screen. However, despite the fact that the one that recorded audio worked correctly, the one used to record the screen did not work as expected. As the rest of the functionalities were still to be implemented, it was decided to put off this functionality for future work. Therefore, the scripts were kept in the repository for further development in the future. In relation to video management functionality, some difficulties were encountered when implementing quizzes within videos. Although it was considered to use a JavaScript framework, such as H5P3, to achieve this, these frameworks were not compatible with the Laravel version in which the application was being developed. Therefore, at the end, it was decided to implement this functionality from scratch on JavaScript. Another difficulty encountered was in the creation of the chat, since at the beginning a table structure was proposed in the database, but as it was not possible to achieve what was intended, the table structure had to be redesigned from scratch. It was considered to use Pusher4, which facilitates the development of real time applications, however, in order to use it, a lot of modifications on the project structure had to be carried out. For this reason, it was decided to continue with the initial path, but making the necessary modifications on the table structure used for the chats. One of the difficulties that took more time to resolve it was how to store the files corresponding to videos and offers in Laravel. At first it was not known which Laravel folders were responsible for this functionality, and the instructions needed to implement it. However, after some research and testing, a simple way of storing the files, based on a directory hierarchy, was found. Although the usage of Laravel did involve a number of difficulties at first, once it was understood how it works, the use of this framework speeded up the development 3https://h5p.org 4https://pusher.com
7.2. Trabajo futuro 101 process significantly, thanks to its file structure and its syntax. Despite all the difficulties encountered throughout the development of the project, the result obtained is considered to be satisfactory, as it successfully fulfils the objectives that were initially set. Future work Even though most of the goals that were set up initially have been satisfactorily achieved, there are some issues and functionalities with the application that would have liked to be improved or extended. However, due to the time planning for the development, they could not be carried out. One of the functionalities that was started to be developed, but had to be put off in the end, is the one that provided users a space to create their own videos. What was intended to do initially was to offer the users the possibility of recording their screen and audio right from the application itself. In this way, they would not have to depend on external application to record the video they want to upload. In order to develop such functionality, two Python scripts were made to record the audio and the user’s screen. The audio record did not involve any drawbacks, but the script that managed the screen recording did not work as expected. As this was not part of the main goals, it was decided to pause its development in order to continue it in the future. Another functionality that would have been desirable to add is the one that allows to edit a video file, i.e. to make cuts, edit audio tracks, etc. This functionality, by contrast, was not started to be developed, as it would have involved a large amount of time that was needed to develop the necessary functionalities in order to achieve the main goals of the application. However, it is considered to be interesting to be able to perform such actions from Wishten without having to use other applications. Moreover, based on user testing, it has been concluded that there are two more functionalities that should be implemented in the near future. The first of them is the possibility of replacing the video files attached to the videos and the text files attached to the offers. The way the application is developed currently, if a user wish to change such files they need to create the video or the offer from the beginning. Since several users have pointed out this circumstance, the possibility of adding this functionality and the way to do it will be studied. The second of them is the one related to the tutorials’ language. The language of both the application and tutorials is English, as it is considered that, in this way, the application could be used by a large amount of people. However, it is intended to give users the possibility to select the language of their choice so that both the application and the tutorials are in the selected language. Since the language issue has been highlighted by users, it will be prioritized in future improvements of the application. Finally, the designed evaluation will be carried out in order to verify the useful-
108 BIBLIOGRAFÍA Laravel (2023f). Release notes - Laravel - The PHP Framework For Web Artisans. Consultado el 30 de julio de 2023. https://laravel.com/docs/10.x/releases. Liao, C.-H. & Wu, J.-Y. (2023). Learning analytics on video-viewing engagement in a flipped statistics course: Relating external video-viewing patterns to internal motivational dynamics and performance. Computers & Education,197: 104754. https://doi.org/10.1016/j.compedu.2023.104754. Mirriahi, N., Jovanović, J., Lim, L.-A., & Lodge, J. M. (2021). Two sides of the same coin: video annotations and in-video questions for active learning. Education Tech Research Dev,69(5): 2571–2588. https://doi.org/10.1007/ s11423-021-10041-4. Moos, D. C. & Bonde, C. (2016). Flipping the classroom: Embedding self-regulated learning prompts in videos. Tech Know Learn,21(2): 225–242. https://doi. org/10.1007/s10758-015-9269-1. Rodríguez, M. S. & Platas-García, A. (2022). Uso de videos tutoriales en el proceso de aprendizaje de estudiantes universitarios. Revista Electrónica de Investigación Educativa,24.https://doi.org/10.24320/redie.2022.24.e21.4176.
Ap´ endice A Cuestionarios de estudio previo A.1. Cuestionario sobre método de estudio En primer lugar, en las figuras A.1 y A.2 se observan las preguntas referentes a la edad y el sexo de los encuestados. Se puede apreciar que en su mayoría son hombres de entre dieciocho y veinticuatro años. Figura A.1: Cuestionario sobre método de estudio - Edad de los encuestados Figura A.2: Cuestionario sobre método de estudio - Sexo de los encuestados 109
110 Apéndice A. Cuestionarios de estudio previo Seguidamente, en las figuras A.3 y A.4 se muestran las preguntas referentes a los estudios que realizan los encuestados y cuántas horas le dedican. Se puede observar que la mayoría cursan estudios relacionados con la informática, ya que muchos de los encuestados son estudiantes de la Facultad de Informática de la Universidad Complutense de Madrid. Figura A.3: Cuestionario sobre método de estudio - Estudios de los encuestados Figura A.4: Cuestionario sobre método de estudio - Horas de estudio de los encuestados En la figura A.5 se muestra la pregunta principal del cuestionario, relativa al método de estudio. En su mayoría, los participantes contestaron que estudian centrándose en los ejercicios de examen, en lugar de estudiar el temario completo. A los participantes que contestaron que estudian el temario completo, se les preguntó si habían pensado alguna vez en cambiar de método y estudiar únicamente los ejercicios de examen. Tal como se ve en la figura A.6, la mayor parte de ellos confirmaron dicho pensamiento.
A.1. Cuestionario sobre método de estudio 111 Figura A.5: Cuestionario sobre método de estudio - Método de estudio de los encuestados Figura A.6: Cuestionario sobre método de estudio - Reflexión sobre el método utilizado Por su parte, a los encuestados cuyo método de estudio se basaba en estudiar ejercicios similares a los de examen, se les preguntó si este método les había perjudicado en alguna ocasión. Como se muestra en la figura A.7, la mayoría coinciden en que sí les ha perjudicado estudiar de esta forma. Finalmente, a estos participantes también se les preguntó si volverían a estudiar únicamente los ejercicios de examen, a lo que la mayoría contestaron afirmativamente, tal como se refleja en la figura A.8.
112 Apéndice A. Cuestionarios de estudio previo Figura A.7: Cuestionario sobre método de estudio - Perjuicio del método utilizado Figura A.8: Cuestionario sobre método de estudio - Repetición del método utilizado A.2. Cuestionario sobre búsqueda de prácticas Las tres primeras preguntas referentes a la edad, sexo y estudios de los encuestados obtuvieron los mismos resultados, puesto que se realizó el estudio sobre los mismos estudiantes. A continuación, se les preguntó a los participantes si habían realizado o buscado prácticas en empresas, a lo que la mayoría contestó afirmativamente, tal como se ve en la figura A.9. Seguidamente, a los encuestados que sí habían realizado prácticas o las habían buscado se les preguntó por la facilidad para encontrar un portal de búsqueda de prácticas. Las respuestas a esta pregunta se midieron con una escala de valoración, de “Muy difícil” a “Muy fácil”, tal como se muestra en la figura A.10 Como se observa en la figura , la mayor parte de los encuestados respondieron a
A.2. Cuestionario sobre búsqueda de prácticas 113 Figura A.9: Cuestionario sobre búsqueda de prácticas - Realización o búsqueda de prácticas Figura A.10: Cuestionario sobre búsqueda de prácticas - Pregunta sobre portal de búsqueda esta pregunta con el valor 2, lo que se interpreta como “difícil” dentro de la escala de valoración. Figura A.11: Cuestionario sobre búsqueda de prácticas - Respuestas sobre portal de búsqueda
114 Apéndice A. Cuestionarios de estudio previo Finalmente, se le preguntó a los participantes si su centro les había proporcionado un portal para realizar la búsqueda de prácticas, tal como se ve en la figura A.12. La mayoría de ellos respondió afirmativamente y se les preguntó por la utilidad de dicho portal, utilizando la misma escala de valoración usada anteriormente. Tal como se muestra en la figura A.13, la mayoría de ellos se mostraron neutrales o descontentos con el portal proporcionado. Figura A.12: Cuestionario sobre búsqueda de prácticas - Portal de búsqueda proporcionado por el centro de estudios Figura A.13: Cuestionario sobre búsqueda de prácticas - Utilidad del portal proporcionado por el centro de estudios