eXeLearning, resumiendo…
Es un programa escrito en python que crea un sistema de ficheros virtual y lo pública mediante un servidor web propio. El programa usa ese servidor web como interfaz de usuario donde el usuario puede ver y editar el contenido de un recurso educativo mediante el uso de HTML+CSS y JavaScript. Ese recurso educativo esta organizado en páginas en diferentes niveles y cada página puede contener iDevices. Estos iDevices puedes ser de varios tipos (textos, interactivos, juegos, soporte, etc.). El contenido deberá estar contenido en algún iDevice.
Comenzó a desarrollarse en la Universidad de Auckland (Nueva Zelanda) con licencia GPLv2, del cual aún se mantienen partes del código como el archivo «common.js», obtuvo algún premio y se detuvo el desarrollo por parte de la misma en 2005. En 2007 CORE Education contrato a dos de los desarrolladores para seguir con el desarrollo centrándose en la enseñanza obligatoria. A raíz de ahí, se ha seguido desarrollando por otras partes. En 2011 el www.ite.educacion.es y cedec.ite.educacion.es a través de la empresa open-phoenix.com continúan con el desarrollo. En la actualidad varias comunidades dan soporte al proyecto como son Andalucía, Extremadura, Galicia, Murcia, Madrid y País Vasco. Y el desarrollo está centralizado en exelearning.net.
El usuario puede crear recursos educativos de forma local (de momento) y puede guardarlo como un archivo ELP (extensión propia de la aplicación). Además puede exportarlo a varios formatos (página web, SCORM para Moodle por ejemplo, EPUB, etc.)
En cuanto al diseño CSS de la exportación como web, el código generado por eXeLearning con el estilo Educaand está pensado para dos tamaños de pantalla. Una normal en la que se muestra un menú a la izquierda y otra pequeña en la que se oculta el menú. Además eXeLearning, a parte de que esta pensado para que el contenido se adapte al ancho de la ventana, usa un espacio con un ancho máximo de 1230 pixeles (descontando márgenes y menú quedan 900 pixeles para contenido y en el caso de ocultar el menú colapsándolo quedan 1180 pixeles para contenido).
Trabajar cooperativa y simultaneamente páginas eXeLearning (script en bash)
Pues se trata de trocear un elp para poder trabajar a la vez cada página. Se exporta cada página en un archivo ELP distinto sobre el que se podrá trabajar mientras otras personas están trabajando en otras páginas (ELPs). Después, cuando se ha terminado el REA, se vuelven a juntar para formar un solo ELP con todas las páginas.
Es muy interesante sobre todo cuando hay varios elaboradores y algún o algunos coordinadores por encima que deben supervisar el trabajo. Por que además de la posibilidad de cooperar los elaboradores con las distintas páginas permite al coordinador supervisar desde que se esta realizando el trabajo. Y no como trabajábamos antes con un documento plantilla donde introducían contenido los elaboradores, luego el Informático pasaba esa plantilla a eXeLearning y entonces era cuando el coordinador podía corregir aspectos del contenido que hacían volver a los elaboradores con la perdida de trabajo y frustración que ello conllevaba. Esta claro que para adoptar esta solución es necesario que todos los miembros se manejen al menos con un nivel básico el eXeLearning (lo que no es mucho más complejo que cualquier editor de documentos). Y por supuesto, para aprovechar toda la eficicencia que ofrece este sistema está claro que todos los elaboradores deben llevar un ritmo bastante parecido. Ya que con este sistema o con documentos plantillas, si algún miembro se retrasa retrasa a todo el equipo dando igual que el sistema sea más o menos eficiente.
De esta manera se podría hacer que tomase los archivos directamente desde una carpeta de la nube de almacenamiento y comprobando si habían cambiado regeneraría el ELP juntando las páginas para formar un solo ELP. Al que añadiría la presentación para los pdf (imagen primera página y leyenda) y crearía los créditos de forma automática a partir de otro archivo en la nube con los datos mínimos. Luego se exportaría mediante página web para subirlo al FTP de trabajo y avisara a los miembros del equipo. Para que todos supieran cuando se había cambiado algo.
A continuación os dejo el script en bash (inicial) para realizar dicha tarea de forma automatizada:
Scripts para la creación la página de los créditos a partir del ELP y un archivo conlas URL de los recursos externos v1.1
Buenas, después de ver que la versión anterior era poco útil ya que los recursos no están definidos desde el principio del REA y se van concretando sobre la marcha. He creado un script solo para los créditos (cosa que se sería interesante que añadiese eXeLearning, ya que es un trabajo muy tedioso licenciar todos los recursos usados). El script analiza el archivo ELP y busca todos los recursos usados (esta hecho a la ligera, no mira el xml como tal sino como texto plano) y si los encuentra en el archivo de las URL va a esa página y descarga información de la autoría y de la licencia. Sino esta en el archivo entiende que es un recurso propio. Y crea el código para insertarlo en la página de créditos. He dejado el script antiguo por que todavía lo uso para el trabajo realizado por la maestra de pedagogía terapéutica, crear diccionarios, bocadillos de los términos y contenido de apoyo, ya que en este caso si sigue siendo útil.
Además he añadido la creación de un código Html para la tabla (hubiera sido mejor una lista anidada por página e iDevice pero no gustó) para la guía docente con los recursos pdf+odt usados en el REA extraída directamente de la información del ELP.
Scripts para la inserción de recursos de forma automática v1.0
Buenas, os pongo el enlace para descargar unos scripts escritos en bash para generar el código e insertar de forma automática recursos medias en eXeLearning. Esta pensado para trabajar en Linux y con la versión 2.6 para snap (que es la única que va de momento en Debian 11). La forma de trabajar es las siguiente:
Crear un archivo (texto plano, con cada campo en un linea) de los recursos que se usarán en el REA. Si es local el path relativo hasta el recurso y si es remoto la URL. Al pasarle el script «creaInfRecu.bash» esto buscará información de cada recursos (si son imágenes remotas de las páginas permitidas, irá a la página y se descargará la información de dicha imagen) creando otro archivo con la información que se le ha pasado y la nueva información. Este último archivo se le pasará a «creaRecu.bash» (debe ser ejecutado como root, almenos con la versión snap) que para los recursos remotos descargará el recurso y lo almacenará en la carpeta «preview» de la ejecución snap del eXeLearning. Y generará los códigos para meterlos como HTML en el iDevice que debe estar abierto al ejecutar el script. De esta forma cuando insertemos el contenido HTML generado cargará en el iDevice el nuevo recurso.
Mejoras al estilo Educaand
Después de trabajar con eXeLearning y viendo algunas cosillas que cambiaría me gustaría dejarlas indicadas a aquí. Esto se aplica a la última versión del estilo a fecha de 10 del Octubre de 2021. Me gustaría comentar que tanto para este estilo como para «udl» se opta por dos maneras de configurar la página (menú lateral o encima…). Y estas varían con la anchura (del documento html representado en pantalla, que viene dado, en vista maximiza por la anchura de la pantalla) y con la altura (del documento html incluyendo los posibles desplazamientos del scroll, ya no depenerá de la pantalla). Lo que a mi parecer es un error, depender en definitiva de la altura del contenido.
La mejor forma encontrada para aplicar dichas modificaciones ha sido, siempre que sea posible, usar opción de propiedades del proyecto eXeLearning, desplegar opciones avanzadas y en el apartado para la cabecera. El código sería el siguiente:
<style>
.udl-btn {border-radius: 5px; font-size: 18pt;}
article.iDevice_wrapper > p.toggle-idevice {display: none;}
section.exe-udlContent-block img.contenido { max-width: 97% !important;margin: 5px;box-sizing: border-box;border-radius: 5px;border: 2px solid black;}
div.iDevice > div.iDevice_content img.contenido { max-width: 95% !important;border-radius: 0.3em; box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 5px; margin: 5px;}
@media (max-width: 500px) { .imagenFloat300 { width: 100%; margin: 5px 0px 10px 0px; } }
div.exe-udlContent-content-block ul { overflow: hidden; }
div.exe-udlContent-content-block ol { overflow: hidden; }
article.exe-udlContent-content-simplified p { margin-bottom: 1em; line-height: 24pt; font-size: 14pt;}
article.exe-udlContent-content-simplified span { margin-bottom: 1em; line-height: 24pt; font-size: 14pt;}
article.exe-udlContent-content-simplified li,ol,ul { margin-bottom: 1em; line-height: 24pt; font-size: 14pt;}
article.exe-udlContent-content-simplified img { margin: 10px;}
.definition-tt {font-weight: bold;}
.dImgTxtCen {display: flex; align-items: center;margin: 5px;}
.imgTxtCen {flex-shrink: 0;}
.iDeviceTitle {top: auto;}
img[style*="float: left"] { margin-right: 10px;margin-bottom: 5px;}
img[style*="float:left"] { margin-right: 10px;margin-bottom: 5px;}
img[style*="float: right"] { margin-left: 10px;margin-bottom: 5px;}
img[style*="float:right"] { margin-left: 10px;margin-bottom: 5px;}
div.tabla-centro {overflow-x: auto; justify-content: center;}
div.tabla {display: table; margin: 0 auto; padding: 0;table-layout: fixed;align-self: center;}
div.tabla-fila {display: table-row; margin: 0; padding: 0;}
div.tabla-celda {display: table-cell; margin: 0; padding: 1px; border: 1px solid #000; text-align: center; vertical-align: middle;}
div.tabla-celdaSinBorde {display: table-cell; margin: 0; padding: 3px; text-align: center; vertical-align: middle;}
div.superindice {display: inline-block; vertical-align: top; position: relative; text-align: center;}
div.creditos {display: flex;align-items: center;justify-content: center;flex-wrap: wrap; font-size: 10pt;}
div.creditos figure {text-align: center;margin: 2px;}
div.creditos img {max-width: 200px !important;max-height: 200px !important;border: 2px solid black;border-radius: 4px;background-color: white;}
div.creditos figcaption {width: 200px;text-align: left;margin: 0 auto;white-space: pre-line; word-wrap: break-word;}
img.diccionario {box-sizing: content-box;border: 1px solid #cc6715;border-radius: 5px;margin-bottom: 10px;background-color: white;}
img.bocadillo {box-sizing: content-box;border: 1px solid #f1d031;border-radius: 5px;background-color: white;}
div.inputResponsive input {width:65% !important;}
div.variasFiguras {text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
</style>>
Aclaraciones:
- udl-btn: es el botón cuadrado de los idevices, hacerlo con las esquinas redondas y que pase la auditoria de accesibilidad.
- p.toggle-idevice: es el icono del más que aparece arriba a la derecha del idevice para poder colapsarlo. Lo quito en aquellos idevices que no lleven título.
- img.contenido: clase para las imágenes del contenido las que irán con marco en un iDevice con Título (marco) y; con marco y sombra en uno sin título.
- imagenFloat300: es una clase usada para imágenes flotantes (izquierda o derecha) dentro de los idevices. Pensada para imágenes de un ancho hasta 300px que llevan texto alrededor y cuando se ven en pantallas verticales puede afear el aspecto poniendo el texto discontinuo al no caber. Hará que estas ocupen el 100% del ancho. Que el menú se pueda ocultar o visualizar hace poco útil tener en cuenta la anchura disponible al ver el menú lateral.
- Las etiquetas html «ul» o «ol» se les añade overflow a hidden para que las viñetas no se coman la imagen flotante que haya a la izquierda.
- exe-udlContent-content-simplified: configura la lectura facilitada. Letra mayor, mayor interlineado y margen de las imágenes.
- definition-tt: para poner negrita el texto con bocadillo
- dImgTxtCen: para emparejar una imagen a la izquierda con un texto a la izquierda. Hay que crear un «div» clase «dImgTxtCen» y luego poner imagen clase «imgTxtCen» y el texto como «p»
- iDeviceTitle: para evitar que el texto pise el marco del idevice.
- img[style*=»float: left»] y img[style*=»float: left»] : para fijar el margen derecho e izquierdo de las imágenes flotantes a la izquierda y derecha.
- div.tabla…: para poder crear tabla con div de forma fácil y homogénea.
- div.superindice: para poder trabajar con las llevadas (superindices).
- div.creditos: para visualizar correctamente los recursos usados en cajas de 200x200px de manera fluida según el ancho de la ventana del navegador.
- img.diccionario y img.bocadillo: para modificar el margen de estas imágenes y ponerle borde redondeado.
- div.inputResponsive: caja para hacer responsive los input de las actividades rellena los huecos.
Además hay que señalar que para los vídeos es extremadamente importante a la hora de verlos en pantalla verticales quitar la clase «mediaelement» de la etiqueta video. O desactivar la pestaña de «Use JavaScript player». Para que este sea lo más responsive posible.
Y para los geogebra se ha puesto a true obligatoriamente en el estilo. Así que la opción del editor de actividad geogebra de deshabilitar el autoescalado esa inutilizada. Esto se hace para evitar problemas con los iDevice colapsados. Si no fuera así una opción sería en la cabecera del elp poner:
article.GeoGebraIdevice div.iDevice_inner {padding: 5px 5px;}
article.GeoGebraIdevice div.block {display: inline-block;}
article.GeoGebraIdevice div.iDevice_content {overflow: hidden;}Diseño Universal para el Aprendizaje
Presentar los conceptos partiendo desde varios puntos para permitir que una mayor parte de los estudiantes se pueda enganchar a nuestro itinerario de aprendizaje. Ya que no todos tendrán el mismo bagaje cerebral de partida, habrá que tener múltiples formas para motivar al estudiante, representar la información y asimilar lo aprendido mediante la expresión (artículo). Esto en eXeLearning se apoya con la creación del iDevice DUA (UDL), que permite crear contenido que puede permanecer colapsado (oculto) hasta que el estudiante crea oportuno desplegarlo y mostrar su contenido. Por aquello de no distraer y mantener un contenido limpio (sin mostrar las múltiples formas todas a la vez) y fácilmente accesible adaptable a contexto en el que se encuentra el estudiante en cada momento.
Esto técnicamente tiene un gran inconveniente y es que al ocultar código de la página, este no será accesible desde DOM y a la hora de incrustar código externo hay problemas para detectar el espacio disponible y es necesario recargar el contenido con el código visible.
GeoGebra embebido en eXeLearning
La idea es poder usar GeoGebra dentro de eXeLearning de forma que no se realicen consultas a internet hacia el servidor de GeoGebra y de esta manera poder usarlo sin conexión a internet.
Para ello, es muy útil la página del propio GeoGebra sobre como embeber todo lo necesario en una página HTML.
https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding
En ella se explica como es necesario cargar el archivo deployggb.js como script de nuestra página y además, las librerías de las que hará uso para visualizar los archivos de los ejercicios de GeoGebra. Estos archivos se pueden descargar, como nos dice en la misma página, desde:
https://download.geogebra.org/package/geogebra-math-apps-bundle
Copia local: geogebra-math-apps-bundle-5-0-637-0
En este archivo tenemos la licencia para uso no comercial y una carpeta «GeoGebra» (para el ejemplo, esta carpeta la renombraremos como «ggb») que contiene el archivo «deployggb.js» y una carpeta «HTML5» con las librerías necesarias.
Esto es lo que necesitamos para poder usar GeoGebra en nuestras páginas web sin conexión a internet.
Ahora veremos como se incorporan estos archivos a un ELP de eXeLearning.
En principio eXeLearning no contempla la función de incorporar archivos a sus ELP. Así que deberíamos incorporarlos de manera manual. A no ser que se encuentre la manera de «pegar» esos archivos al ELP de forma que eXeLearning los siga manteniendo cuando se guarde el ELP, se exporte como página web, etc. Y en este caso se ha encontrado la siguiente forma. El archivo ELP es en realidad un archivo ZIP con los demás archivos necesarios para el ELP. Así que en principio solo haría falta añadirlos a dicho ZIP que es el ELP. Pero eso no basta para que eXeLearning los mantenga a la hora de guardarlo o exportarlo como página web. Además de eso hay que hacer referencia a esos archivos dentro del ELP. La forma que se ha encontrado es hacer referencia al archivo «deployggb.js» dentro de la cabecera. La aplicación eXeLearning permite añadir un código en la cabecera de nuestro ELP en propiedades, con el modo avanzado activo, dentro de opciones avanzadas. Ahí se pondrá el código:
<script src="ggb/deployggb.js"></script>
Como se dice anteriormente se renombrará la carpeta «GeoGebra», que encontramos al descomprimir el archivo descargado, con el nombre «ggb». Dentro de esta, estará el «deployggb.js» al que hacemos referencia en el código.
A continuación se irá a pie del ELP, para ello entramos en propiedades del ELP, y se añadiría el código para hacer referencia al archivo del ejercicio de GeoGebra, se indica donde estarán las librerías de GeoGebra localmente y por último se indica donde se quiere representar dicho ejercicio dentro del HTML:
<script>
var params1 = {"id":"app1","width":800,"height":400,"filename":"ggb/prueba.ggb"};
var ggbApplet1 = new GGBApplet(params1, '5.0');
ggbApplet1.setHTML5Codebase('ggb/HTML5/5.0/web/');
window.addEventListener("load", function() { ggbApplet1.inject('div-ggb-element1'); });
</script>
Es importante, como podemos ver, al indicar el archivo con el GeoGebra, que se encuentra en la misma carpeta donde esta «deployggb.js». De esta forma la carpeta con los ejercicios y los archivos de GeoGebra llamada «ggb» se «pegará» al ELP y será mantenida por eXeLearning a la hora de guardar o exportar a página web.
Además, es necesario añadir el elemento DIV de HTML en el que se inyectará el código para representar el ejercicio de GeoGebra. En nuestro caso, como podemos ver en el código anterior será «div-ggb-element1». Para ello se insertará en algún iDevice como código HTML el siguiente código:
<div id="div-ggb-element1" style="display: inline-block; width: 800px; height: 500px;"></div>
Si se quiere tener más de un ejercicio solo habría que repetir el código del pie para el nuevo ejercicio de GeoGebra y poner su DIV correspondiente.
Por último una vez configurado el ELP, se guarda y se le añade, con cualquier herramienta que maneje ZIP, la carpeta «ggb» con los ejercicios de GeoGebra, el archivo «deployggb.js» y la carpeta «HTML5».
De esta forma, a partir de ese momento al guardar o exportar como web el ELP se mantendrán los archivos necesarios.
Los ejercicios de GeoGebra añadidos de esta manera no serán visibles en modo edición. Para poder ver dichos ejercicios de GeoGebra en nuestro ELP es necesario abir «Visualización previa» en «Utilidades» o directamente exportar como carpeta web.
Como ejemplo tenéis a continuación un ELP donde se puede ver lo explicado:
Nota: este ELP ha sido creado con el estilo EducAnd de la junta de Andalcuía y con el iDevice «Contenido DUA». Se ha comprimido con zip, así que antes de usarlo descomprímelo para obtener el ELP.
