Tengo varias semanas estudiando cómo cambiar la apariencia de los contenidos educativos creados con XERTE y Xerte Online Toolkits.
Antes de comenzar el desarrollo de este tema, quiero agradecer a Tom Reijnders por su incodicional aporte desde la lista de correo, así como a todos los demás miembros que me orientaron para lograr esta tarea.
Así mismo, voy a iniciar con una brevísima descripción de lo que son XERTE y XERTE ONLINE TOOLKITS.
XERTE es un proyecto creado por la Nottingham University que permite la creación de contenidos educativos para que sean publicados en formato WEB. Esta aplicación fué creada para ser instalada en una computadora y está catalogada como una "aplicación de escritorio". Este software es muy poderoso y flexible, pero el tipo de usuario que puede aprovecharse de sus ventajas debe tener un conocimiento "medio" de programación.
Entonces, para facilitar las cosas y permitir a usuario que no tengan NINGÚN conocimiento de programación puedan también aprovechar la herramienta, la Universidad de Nottingham creó XERTE ONLINE TOOLKITS y que caroñosamente lo llaman XOT. Por lo general, este programa lo instala alguna unidad de servicios de tecnología de nuestra organización en un servidor web. Esto quiere decir que nosotros lo único que tenemos que hacer es acceder a una página web y listo! ... podremos crear contenidos educativos altamente enriquecidos.
Todo esto quiere decir que XERTE y XOT pueden trabajar de manera independiente para crear contenidos educativos. Pero también, pueden utilizarse de manera combinada para modificar algunos aspectos de los contenidos educativos.
En este orden de ideas, en esta publicación voy a explicar cómo cambiar la apariencia de los objetos para el aprendizaje o también llamados OA (creados con XOT) en términos de:
- Colores de la presentación de los OA.
- Logo de la plantilla.
- Imagen del banner superior.
- Posición de menú de control de páginas.
ANTES
DESPUÉS
Comenzamos!
0. REQUERIMIENTOS INICIALES
En primer lugar, debemos contar con los siguientes condiciones:
- XERTE instalado en nuestra PC.
- XOT instalado y con acceso a su directorio de instalación en el servidor WEB.
Solamente hay que tener en cuenta que este archivo se llama "Nottinghman.rlt" en el directorio de XOT y en el programa XERTE se llama "template.rlt". No obstante, se trata de la misma información dentro del archivo. Esto quiere decir que lo que haremos será cambiar el nombre de los archivos en esta secuencia:
- Copiar archivo "Nottinghman.rlt" desde el directorio en XOT al directorio del proyecto en XERTE y renombrarlo como "template.rlt".
- Realizar los cambios de apariencia en XERTE y guardar el proyecto.
- Copiar el archivo "template.rlt" desde el directorio del proyecto XERTE al directorio en XOT y renombrarlo como "Nottingham.rlt".
Cabe destacar que con XERTE y con XOT se pueden crear OA de manera independiente y con los mismos resultados.
1. CREAR UN PROYECTO EN XERTE
El primer paso consiste en crear un proyecto desde el programa XERTE.
Esto permite crear la estructura inicial para modificar la apariencia de los OA.
Las siguientes dos imágenes, muestran los pasos a seguir:
XERTE preguntará en qué directorio se desea crear el nuevo proyecto, entonces seleccionamos un directorio nuevo y guardamos.
Luego, se pregunta si se desea abrir el nuevo proyecto a lo que responderemos que "Si".
Después, cerramos el asistente de visualización de OA haciendo clic en la "X" de la esquina superior derecha de la ventana y entraremos directamente en el ambiente de trabajo de XERTE desde donde aplicaremos los cambios a la plantilla de XOT.
Finalmenete, guardamos el proyecto y cerramos XERTE.
Haciendo todos estos pasos, hemos creado la estructura básica de un proyecto en el directorio que escogimos, a partir de la aplicación XERTE. Esto quiere decir que se ha creado el archivo "template.rlt"que será el archivo que usaremos para sustituir el archivo "Nottingham.rlt" en XOT.
2. Cambiando Colores en la Plantilla
Ya que tenemos el proyecto creado, para abrirlo nuevamente ubicamos el archivo "template.rlt" en el directorio del proyecto y hacemos dobleclic sobre éste.
Se abrirá el asistente de visualización de XERTE y lo cerraremos haciendo un clic sobre la "X" de la esquina superior derecha. De esta manera, estaremos nuevamente en la pantalla de edición de XERTE:
A continuación, se muestra cómo luce la pantalla de edición de XERTE:
XERTE permite modificar varios aspectos de la plantilla a partir de parámetros.
Estos parámetros se puede acceder haciendo un clic sobre el primer ícono ubicado en el árbol jerárquico de elementos del proyecto, ubicado en la parte izquierda de la pantalla.
Para cambiar el color en el fondo del banner superior, basta con agregar una "propiedad" llamada "titleBarColour" a partir de la lista desplegable ubicada en la parte superior central de la pantalla. Luego presionamos el botón "Add" para agregar la propiedad a la lista inferior de propiedades y finalmente cambiamos al color deseado.
A continuación, se muestra una imagen de cómo se ve la pantalla luego de haber agregado la propiedad:
Para visualizar los cambios en la plantilla, seleccionamos del menú superior "View --> Preview".
Se mostrará una ventana mostrando los cambios aplicados:
Para regresar a la pantalla de edición, cerramos la ventana haciendo clic en la "X" ubicada en la esquina superior derecha.
3. Cambiando el Logo y la Posición de los Botones
El cambio del Logo y la posición de la botonera es uno de los ajustes más buscados en XOT.
Para lograrlos, es necesario agregar una líneas de código.
Debemos desplegar en el árbol jerárquico el elemento "Setup", ubicado en:
"Xerte Online Toolkit --> Interface --> Background --> Setup"
Luego de hacer clic sobre el elemento "Setup", entonces damos un clic sobre la pestaña "Script" ubicada en la parte inferior de la pantalla.
A continuación, se muestra una imagen de cómo luce el final de este proceso:
Como se puede apreciar, aparecen algunas líneas de código sobre las que realizaremos algunos cambios.
Es importante destacar que estos cambios en el código del proyecto generalmente NO SON REALIZADOS POR LOS PRODUCTORES DE OA. Usualmente, el personal de servicios tecnológicos los aplican y sus resultados se aprecian en la apariencia de los OA generados desde XOT.
Entonces, hacemos algunos espacios justo antes de la instrucción "entryFrame.swapDepths(999);" en donde agregaremos algunas líneas de código:
rootIcon.loadIcon(FileLocation + 'media/BannerConLogo.png');
_level0.engine.IFC.themes._visible = false;
_level0.engine.IFC.fonts._visible = false;
_level0.engine.IFC.access._visible = false;
_level0.engine.IFC.sizes._x = 10;
_level0.engine.IFC.txtSize._x = 120;
rootIcon.tocBtn._y = 550;
rootIcon.nextBtn._y = 550;
rootIcon.backBtn._y = 550;
rootIcon.progress._y = 550;
rootIcon.contButton._visible = false;
Básicamente, estas líneas lo que hacen es:
- Agregar una imagen llamada "BannerConLogo.png" en la parte superior del OA.
- Ocultar las listas desplegables ubicadas en la parte inferior de la plantilla a través de las cuales los usuarios pueden cambiar la apariencia del OA.
- Reubicar el botón de la tabla de contenidos, botón "siguiente", botón "regresar", etc., casi en el borde inferior del OA.
A continuación, se muestra cómo lucen estos cambios:
En esta imagen, no hay un "logo" como tal. Pero con algunos retoques de la imagen "BannerConLogo.png", podemos agregar del lado derecho el logo de nuestra organización.
Es importante destacar que la imagen "BannerConLogo.png" se encuentra dentro del directorio "media" del proyecto XERTE. En consecuencia, cualquier imagen o recurso que forme parte de la plantilla deberá estar dentro de este directorio y ser copiado en el directorio equivalente en XOT al momento de ser trasnportada la plantilla al servidor.
Hay muchas propiedades que pueden ser modificadas. Basta con hacer unas cuantas pruebas para lograr el resultados deseado.
4. Instalando la nueva plantilla en XOT
La instalación de esta nueva plantilla en XOT es algo realmente sencillo.
Como mencioné al principio, en el directorio del proyecto XERTE se creó el archivo "template.rlt". En este archivo están todos los cambios que hemos aplicado en nuestra plantilla.
Entonces, la instalación de la nueva plantilla consiste en sustituir el archivo "template.rlt" en XOT sobre el archivo "<webroot>/modules/xerte/parent_templates/Nottingham/Nottingham.rlt". Otro camino puede ser: renombrar el archivo "Nottingham.rlt" por "Nottingham-original.rlt", copiar el archivo "template.rlt" en el directorio donde está "Nottingham-original.rlt" y renombrar el archivo "template.rlt" por "Nottingham.rlt".
Aprovecho para aclarar que "<webroot>" es una referencia general que indica la ruta de acceso a los archivos de XOT y varía según el sistema operativo utilizado en el servidor. Para el caso de GNU/Linux Debian y derivados sería "/var/www/".
Desde este momento, cuando cualquier persona cree un OA desde XOT, tendrán la apariencia definida en la nueva plantilla.
Es importante señalar que en ocasiones, los exploradores de páginas web hacen "caching" de contenidos flash. En este sentido, es recomendable que si el navegador web que se usa ya había accedido a XOT con la vieja plantilla, este borre el contenido del caché de navegación del explorador.
Espero sea de utilidad!
José Gregorio.
Fuentes consultadas:
- http://www.nottingham.ac.uk/xerte/toolkits.htm
- http://lists.nottingham.ac.uk/mailman/listinfo/xerte
- http://wiki.xerte.net/index.php5?title=Main_Page
- http://code.google.com/p/xerte/
