Universitat Oberta de Catalunya

Creación de un LMS SaaS basado en Moodle

Asignatura: TFM Profesionalizador
Titulación: Máster en Aplicaciones Multimedia
Nombre del estudiante: Daniel J. Becerra Jiménez
Consultor y profesor: Mikel Zorrilla Berasategui y Laura Porta Simó

Introducción

La idea de este proyecto surge de la necesidad que tienen pequeños centros de formación de disponer de un entorno virtual de aprendizaje asequible, donde desarrollar la formación de sus estudiantes, evaluarles y calificarles de forma segura y privada. Consiste en un LMS SaaS (1), es decir, un gestor de aprendizaje ofrecido como servicio, mediante un sistema de suscripción. Para crear la planificación se ha utilizado metodología de desarrollo ágil, que divide el proyecto en seis sprints, combinando el gestor de tareas Asana con la herramienta de diagramas de Gantt Instagantt. Se ha utilizado software de código abierto siempre que ha sido posible, de modo que la comercialización del producto se realiza mediante un sitio web basado en WordPress y el LMS está basado en Moodle, aunque ambas plataformas están muy personalizadas y se conectan entre sí mediante servicios web para transferir la información de los clientes y gestionar sus suscripciones. Este proyecto es un estudio de prospección sobre la idea de un LMS SaaS basado en Moodle, que tiene el objetivo de determinar sus posibilidades y limitaciones.

Etapas y retos

Para definir la planificación del proyecto se hizo un desglose de todas las tareas formando una pila de producto. Las entregas de las PEC de la asignatura encajaban perfectamente con una metodología de desarrollo ágil, por lo que se repartieron las tareas en seis sprints, que comprendían todas las tareas, desde la propuesta formal hasta la defensa del proyecto.

Figura 1. Planificación del proyecto. Fuente: elaboración propia con Asana e Instagantt.
Figura 1. Planificación del proyecto. Fuente: elaboración propia con Asana e Instagantt.

Etapas del proyecto

Una vez definida la planificación, se analizaron las extensiones que existían para integrar gestores de contenidos con Moodle y así elegir el CMS más adecuado. Este análisis determinó que la más adecuada era EdwiserBridge (2), una extensión gratuita para WordPress que permite crear un web service para conectar ambos sistemas.

A continuación, se crearon los entornos de hosting en un servidor privado virtual y se instalaron las aplicaciones Iomad Multi-tenancy Moodle (3) y WordPress.

Figura 2. Diagrama de la arquitectura general del sistema eLearnia. Fuente: elaboración propia. Iconos: Eucalyp de flaticon.com

En la siguiente fase se creó la marca eLearnia, que serviría para establecer las bases para la personalización de los temas gráficos de ambas plataformas.

Figura 3. Guía de estilo de la marca eLearnia

Se personalizaron los temas gráficos con CSS utilizando el preprocesador SASS y creó la arquitectura de la información del CMS, siguiendo el siguiente esquema para la contratación del servicio.

Figura 4. Diagrama de contratación del servicio. Fuente: elaboración propia.

Se añadieron contenidos dummy en el CMS para completar la página de inicio, los apartados de Soluciones, Funciones, Precios, Contacto y el sistema de comercio electrónico que permitiría completar la contratación.

Figura 5. Interfaz de la plataforma WordPress. Fuente: elaboración propia.

Posteriormente, se personalizó el tema de Moodle con la identidad de la marca, se adaptaron las funcionalidades de Iomad Multi-tenancy a las necesidades del proyecto. Para esto, se ajustaron los permisos de los roles, se personalizó el aspecto de la interfaz y se ocultaron opciones innecesarias. Se crearon varios temas gráficos con CSS para organizaciones dummy y por último se integraron ambas plataformas configurando el web service.

Figura 6. Interfaces de la plataforma Moodle personalizadas para distintas organizaciones. Fuente: elaboración propia.

Retos del proyecto

Los principales retos fueron:

  • Crear una planificación realista y llevarla a cabo sin retrasos ni modificaciones.
  • Elegir las herramientas de código abierto más adecuadas investigando sus características y posibilidades, y buscar alternativas para sus limitaciones.
  • Crear el entorno necesario en el servidor (bases de datos, dominios y alojamientos).
  • Interconectar el CMS con el LMS mediante servicios web.
  • Crear la marca del servicio.
  • Personalizar los temas gráficos de ambas plataformas y crear temas personalizados para clientes de ejemplo.

Herramientas y técnicas utilizadas

Las herramientas digitales utilizadas son muchísimas, principalmente de código abierto:

WordPress

Para implementar WordPress como gestor de contenidos se ha empleado un servidor VPS (Servidor Virtual Privado) al que se le ha actualizado la versión de Plesk y mejorado la seguridad. Se han instalado certificados SSL de Let’s Encript para los dos dominios que se han utilizado, se ha instalado un firewall y se han programado copias de seguridad periódicas.

El sistema operativo del hosting (Plesk Obsidian 18) permitía la instalación directa de WordPress. Para instalarlo, se rellenaron todos los datos relativos a la cuenta de administrador del CMS y a la base de datos que se creó previamente, se seleccionó el directorio de destino y se desplegó la versión más reciente de WordPress, con JetPack, la extensión de seguridad, y el paquete de eCommerce.

Al finalizar la instalación, se añadió también el tema Hestia que sirvió de base para el tema gráfico del portal. También se instaló el plugin Edwiser Bridge, la extensión que permite conectar WordPress con Moodle.

Moodle

La versión de Moodle elegida no fue la distribución oficial del canal principal, sino una versión modificada por Iomad, una solución de código abierto para crear instancias personalizadas dentro de una misma instalación de Moodle. Para esto, se descargó el paquete desde el repositorio en GitHub, se subió comprimido por FTP utilizando FileZilla y se descomprimió en el servidor por SSH. A continuación, se inició el proceso de instalación, se introdujeron los datos relativos al idioma, el directorio de datos, la base de datos creada previamente, la cuenta de usuario administrador, la zona horaria y el tema gráfico –inicialmente se eligió el tema que venía por defecto. Seguidamente, fue necesario completar la configuración de Iomad, que requería introducir los datos de, al menos, una organización antes de comenzar, así que se creó la organización eLearnia.

También se han utilizado extensiones de seguridad para WordPress, y las herramientas de código abierto FileZilla, Firefox y Sublime Text3, además de otras de código propietario como Adobe Illustrator, Photoshop, Acrobat, la suite de Office 365, Keynote de Apple, Plesk Obsidian en el servidor, aunque basado en Linux, con Apache, PHP y MySQL, entre otras muchas.

Lenguajes y librerías utilizadas

Se han utilizado diversos lenguajes y librerías durante el desarrollo de este proyecto. Los más importantes son:

SASS

Syntactically Awesome Style Sheets (‘Hojas de Estilo Sintácticamente Impresionantes’) es un lenguaje de hoja de estilos que ofrece múltiples funcionalidades como mixins, variables, funciones, herencia o nesting, y requiere un proceso de compilación para ser interpretado.

Se ha utilizado el lenguaje SASS para la creación del preset que modifica el tema Iomad Boost de Moodle que se ha utilizado como base, porque es un requerimiento de Moodle para crear este tipo de presets.

Bootstrap

El tema Iomad Boost está basado en Bootstrap4, un framework de desarrollo web moderno, desarrollado con la filosofía mobile first, que facilita el diseño adaptable para los distintos tamaños de pantalla. Además, desde el preset se cargan las hojas de estilo de Bootstrap, lo que facilita la creación de los contenidos de los cursos con mucha flexibilidad y sencillez si se conoce el lenguaje del framework.

Fontawesome (4)

Se ha utilizado la librería de iconos Fontawesome, que también carga la dependencia desde el preset. Esta librería permite añadir iconos vectoriales a cualquier parte del diseño. Únicamente es necesario incluir la clase adecuada para que aparezca el elegido.

Figura 7. Ejemplo de aplicación de Fontawesome para incluir iconos en el contenido de un curso. Fuente: elaboración propia.

Google Fonts (5)

Se ha utilizado Google Fonts para obtener la tipografía Lato en su variante itálica y con peso 700. No ha sido posible importarla por CDN porque el compilador SCSS PHP no soporta la función “@import url”. Por esta razón, ha sido necesario descargar la tipografía y convertirla a los formatos web compatibles con todos los navegadores, instalarlas en el servidor y entonces, llamarlas desde la hoja de estilos. Era importante añadir esta tipografía para los títulos al preset de eLearnia porque es exactamente la misma variación de estilo que se utilizó para crear el logo.

Conclusiones

El resultado del proyecto ha sido muy positivo, he tenido la oportunidad de aprender mucho sobre las posibilidades y las limitaciones del software libre y este era uno de los objetivos del trabajo. La idea inicial parecía más sencilla de lo que finalmente ha supuesto su desarrollo, pero estoy muy satisfecho por haber conseguido llevarla a cabo. Durante investigación de los servicios similares descubrí que, si bien no existían opciones tan potentes con código abierto como la que este trabajo pretendía crear, sí que existen varias opciones de código propietario que buscan el mismo objetivo y tienen unos precios muy competitivos. Teniendo en cuenta la flexibilidad que aportan los desarrollos a medida y la ventaja con la que ya cuentan otras empresas en el mercado, sería complicado competir con ellas.

Se han logrado todos los objetivos del proyecto, aunque la funcionalidad de alguno de ellos es mejorable.

Creo que la planificación ha estado bien planteada desde el principio gracias a un correcto desglose de la pila de producto. Se han detectado correctamente los riesgos de incumplimiento de la planificación en períodos de baja disponibilidad, y las medidas tomadas al respecto han permitido finalizar con éxito las tareas planificadas, aunque ha supuesto una sobrecarga de trabajo en el último sprint. Se puede afirmar que se ha cumplido la planificación inicial completamente.

La metodología ágil ha facilitado el planteamiento de la planificación, porque las entregas parciales de la asignatura encajaban perfectamente con ella. Se han empleado técnicas de desarrollo ágil para desglosar tareas complejas en otras más pequeñas y abordarlas de una en una cada vez, en lugar de realizar un desarrollo simultáneo de todo el producto. Creo que esta metodología ha permitido cumplir los objetivos en el plazo disponible, aunque también ha dificultado al profesor colaborador el seguimiento del estado del desarrollo porque no ha podido ver el producto funcionando hasta las últimas estapas.

Enlaces relacionados

El producto final está disponible online y es accesible mediante las siguientes direcciones:

Presentaciones en O2 UOC: http://hdl.handle.net/10609/106328 

Documentación

  1. Santos M. SaaS, IaaS y PaaS: ¿qué son, cómo usarlos y para qué? [Internet]. Enter.co. 2015 [citado 12 de octubre de 2019]. Disponible en: https://www.enter.co/guias/tecnoguias-para-empresas/saas-iaas-y-paas-que-son-como-usarlos-y-para-que/
  2. WordPress Plugins. Edwiser Bridge – WordPress Moodle LMS Integration – Plugin WordPress | WordPress.org Español [Internet]. [citado 23 de octubre de 2019]. Disponible en: https://es.WordPress.org/plugins/edwiser-bridge/#description
  3. iomad | Iomad Multi-Tenancy Solution | Open Source Software [Internet]. [citado 23 de octubre de 2019]. Disponible en: https://www.iomad.org/
  4. Font Awesome [Internet]. [citado 6 de diciembre de 2019]. Disponible en: https://fontawesome.com/
  5. Lato – Google Fonts [Internet]. [citado 7 de diciembre de 2019]. Disponible en: https://fonts.google.com/specimen/Lato

Cita recomendada: BECERRA, Daniel. Creación de un LMS SaaS basado en Moodle. Mosaic [en línea], junio 2020, no. 183. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n183.2023.

Acerca del autor

Daniel Becerra es Máster en Aplicaciones Multimedia por la UOC (2020), licenciado en Publicidad y Relaciones Públicas por la Universidad Rey Juan Carlos (2011), técnico superior en Fotografía Artística, Artes Plásticas y Diseño por la Escuela de Arte Fernando Estévez (2005) y ha realizado el curso de experto en Joomla!. Ha desempeñado labores profesionales de diseño web, publicidad, fotografía e identidad visual corporativa para diversas empresas e instituciones como Asociación Científica Icono14, Universidad Rey Juan Carlos, Universidad Carlos III, Universidad de Castilla-La Mancha y muchas otras. Posee experiencia en administración, implantación, diseño y mantenimiento de diversas aplicaciones y sistemas de gestión de contenidos de código abierto como Moodle, Open Journal System, Open Conference System, WordPress o Prestashop. Actualmente coordina el equipo de desarrollo y producción de contenidos multimedia del Centro de Innovación en Educación Digital, de la Universidad Rey Juan Carlos.

Deja un comentario