03-02-2009

Moogre: Moodle y su sistema de “skins”

Llevo trabajando en Moodle desde hace aproximadamente 18 meses y gran parte de su implementación ha sido uno de los trabajos más complejos (léase enredado) que he hecho.

Inicialmente la idea del proyecto era producir un sitio de enseñanza a distancia, el fuerte de Moodle, y hacer todo el trabajo gráfico necesario para dejarlo accesible, usable y con una arquitectura clara.

La tarea de arquitectura de información corrió a cargo de Marcelo Mannarelli y la gráfica a cargo mio. El desarrollo inicial fue un poco lento a causa de la poca documentación de Moodle en lo que respecta a la comprensión de cómo funciona y de qué forma se puede manipular (y hasta qué punto). Sin embargo, el resultado fue bastante bueno, dando paso al inicio de la etapa de diseño.

“…Moodle y sus plantillas son un inescrutable enredo de contenedores y código que deja como moderno el <marque>.”

Hicimos un par de propuestas de diseño para ver hacia dónde apuntaba la visión gráfica de nuestra contraparte de marketing y tomaron una de las opciones como la ideal. Hasta aquí todo ok.

El desarrollo de la maqueta en html, paso previo a la adaptación al sistema de plantillas de Moodle, fue sin contratiempos y en unas semanas ya estabamos listos para iniciar el traspaso, confiando en que mi experiencia podría salvar cualquier percance. En ese momento fue cuando comencé a recolectar la información y me di cuenta que Moodle y sus plantillas son un inescrutable enredo de contenedores y código que deja como moderno el <marque>.

Ciertamente mi visión ha cambiado a medida que se ha desarrollado el proyecto, pero sigo pensando que Moodle tiene serios problemas de lógica en la forma en que arma sus plantillas y más aún, en el tipo de código que decide usar para establecer como base de su infraestructura a nivel del html.

Cargando…

Para partir tenemos las plantillas. El sistema se sustenta en código que hay que rastrear por kilómetros de módulos si lo que queremos es modificar el código con que Moodle construye los elementos de la página. Si queremos evitarnos este problema, al menos podemos echar mano de los CSS y de esta forma manipular la forma en que se ve casi todo en Moodle.

Empecemos por el principio. Moodle posee una carpeta llamada THEME. Dentro de ella se encuentran los “temas” que darán forma y color al sitio. Todo muy fácil si lo que queremos es ponerle un tema ya hecho. Si queremos hacer uno, lo mejor es tomar uno ya armado y modificarlo de acuerdo a nuestras necesidades, pues la cantidad de trabajo a dedicar para hacer un tema propio es demasiada y lo más seguro es que algo malo termine sucediendo en algún lado.

La documentación para modificar los estilos o generar un tema propio sin ser un maestro del php es nula. Por ello trataré de ser lo más claro para ayudar a quienes buscan darle al menos un estilo propio al sitio.

Primero que nada debemos saber dónde vamos a trabajar. Como dije antes, Moodle posee una carpeta llamada THEME en la cual ubica las plantillas para el sitio (aparte de imágenes y otros cachureos en los que pondremos atención después). La plantilla base de Moodle se llama: STANDARD. Dicha plantilla tiene lo básico para mostrarnos el sitio. Podemos trabajar sobre ella copiándola y haciendo los arreglos que necesitemos. Sin embargo, y para hacer las cosas menos complejas aún, podemos aprovechar el poder de los CSS y dejar la plantilla donde está y buscar un archivo: llamado config.php, que se encuentra donde mismo está la plantilla, es decir, THEMES/STANDARD/config.php .

En el archivo abierto, aparece en la primera línea de código después de los comentarios, algo como esto:

$THEME->sheets = array('standard');


Esta línea es de primera importancia pues le indica la hoja de estilo (CSS) que debe leer Moodle para construir la página. En este caso la hoja se llama standard.css.



Lo bueno de que sea un array, es que pueden asignarse más hojas de estilo a un sólo tema. Para ello agregamos el nombre de la hoja de estilo que queremos usar para desarrollar nuestro tema:



$THEME->sheets = array('standard', 'mi_tema');


Con esto, acabamos de decirle al tema Standard, que use la hoja de estilo standard.css y que luego, cargue la hoja llamada mi_tema.css. ¿Cuál es la importancia de ello? Que de ahora en adelante, todo lo que nosotros hagamos en mi_tema.css, va a superceder lo que indica standard.css, por lo que podemos ir tranquilamente modificando la plantilla base sin temor a que en algún minuto se nos olvide agregar un estilo mañoso que nos pueda desarmar la visual del sitio.



El siguiente paso es hacer una hoja de estilos llamada mi_tema.css en el editor que uno desee y luego grabarla en la carpeta THEME/STANDARD en la instalación local de Moodle (o en la online de prueba, como les apetezca). De aquí en adelante, manos a la obra.



Continua…

1 comentario: