Open edX: Personalizar con Comprehensive Theming

Asumiendo que tenemos una instalación instalación limpia de Open edX Gingko 2.1 lista para producción y que además es accesible públicamente, estamos listos para hacerla ver única y peresonalizarla para que ésta represente a nuestra organización, universidad, marca o identidad en general.

Para ver una guía rápida de cómo instalar Open edX Ginkgo 2.1 desde Git, da click aquí.

Para ver una guía rápida de cómo instalar Open edX Ginkgo 2.1 de forma manual, tendrás que esperar jaja. Pero sí la tendré lista pronto.

Las prácticas siguientes no son las más recomendadas y es recomendable sólo utilizarlas en servidores de desarrollo y nunca en servidores en uso (production); pero asumiendo que la aplicación que acabamos de instalar está siendo configurada para experimentar, es decir, sin mucho riesgo de que algo se rompa o información importante se pueda perder, los siguientes pasos son la forma más efectiva y rápida que yo he encontrado (puede haber otras, claro), para poder personalizar Open Edx mientras está activo o en producción.

Lo ideal, si vas a realizar cambios en un servidor activo y no tienes acceso a una imagen o clon para realizar pruebas y desarrollo, sería hacer una copia local de los archivos, utilizar git para tener un control de cambios (version control) y algún editor de texto para modificar y visualizar el código que quieras alterar; todo esto de manera local para no afectar el estado del servidor que está corriendo.

Bien, una vez que la aplicación esté funcionando y visible al público en tu dirección estática o http://localhost en caso de haber realizado la instalación de manera local, podemos iniciar a personalizar nuestro sitio de Open Edx a través de Comprehesive Theming.

Las modificaciones las haremos con 'Comprehensive Theming', un método bastante práctico y 'sencillo' (entre comillas, literalmente) para crear temas a partir de una estructura definida.

Primero, nos dirigimos a

$  cd /opt/bitnami
$ ./use_edx
# cd apps/edx/var/themes
# cp -rf /opt/bitnami/apps/edx/themes/edx.org edx.org
# ls
  edx.org

Es importante que sepas en dónde tu ubicas en todo momento, particularmente en qué rama del sistema de archivos haces modificaciones, pues Sass es bastante picky a la hora de compilar. Si los archivos no son un reflejo exacto del tema que elijas, arrojará un error de compilación y comenzarán los errores, que pueden ser bastante complicados de identificar y/o corregir.

Asegurémonos que estamos en /opt/bitnami/apps/edx/var/themes" y que efectivamente copiamos el tema (en este caso edx.org) en este directorio.

 pwd 
 /opt/bitnami/apps/edx/var/themes
 ls
 edx.org

También puedes pegar cualquiera de los temas que están en /edx/bitnami/apps/edx/edx-platform/themes. Si te fijas, casi todo es igual a excepción del directorio debajo de edx, que es {{var}}.

Para ilustrar un poco mejor cómo funciona Comprehensive Theming tenemos que considerar el sistema de archivos y la ubicación y jerarquía de cada uno de ellos, así como de los archivos que contiene cada directorio. En el mapa de directorios que sigue, puedes ver cómo tulogo.png y logo, están en la misma carpeta pero uno en la rama var y el otro está en edx-platform.

     |----[var]
     |      |
     |      |---themes
     |      |       |
     |              |--edx.org
     |              |      |
     |              |      |---lms
     |              |      |     |---static
     |              |      |     |       |---images
     |              |      |     |             |--tulogo.png
     |              |      |     |---templates
     |              |      |             |---footer.html
     |              |      |---cms       |---header.html
     |              |                    |...
     |              |                    |---etcétera.html
     |              |--stanford
     |              |--x
     |
     |  
     |
     |---[edx-platform]
     |         |
     |         |---themes
     |              |
     .              |--edx.org
     .              |      |
     .              |      |---lms
     .              |      |     |---static
     .              |      |     |        |---images
     .              |      |     |               |--logo.png
     .              |      |     |---templates   
     .              |      |            |---footer.html
     .              |      |---cms      |---header.html
     .              |                   |--...
     .              |--stanford         |---etcétera.html
     |
     |----[dirs.]

Lo que haremos es suplantar todo archivo del tema edx.org con los que nosotros reflejemos en edx.org [o tu tema en particuar] que coincida con la ubicación del archivo original. Si cambiamos el nombre del archivo tulogo.png a logo.png, la próxima vez que compilemos los activos, Sass reconocerá logo.png y entonces se construirá el sitio estático utilizando tulogo.png, aunque ahora se llame logo.png.

Para hacer esto, empezamos por ubicar la imagen la imagen que queremos utilizar como logo (o las imágenes en general que queramos remplazar). Tenemos que descargarlas desde algún sitio público que sea accesible desde en internet - preferentemente https - o bien cargándola por medio de SSH (secure shell), utilizando SFTP (YummyFTP Pro, CyberDuck) o herramientas como Google CloudShell o Dropshare.

wget https://direccion.public/hacia/tulogo.png

Iniciará la descarga de la imagen. La verificamos para asegurarnos que es la imagen que queremos y que de descargó correctamente.

 ls 
 tulogo.png logo.png footer-logo.png large-logo.png README  

Cambiamos el nombre de la imagen tulogo.png que recién descargamos para que se compile al actualizar la aplicación (asegurémonos de estar descargándola al directorio correcto). mv renombra, o reubica archivos, dependiendo cual sea el caso. En este caso lo utilizaremos para cambiar el nombre de tulogo.png a logo.png:

  rm logo.png
  mv tulogo.png logo.png

Verificamos que el archivo 'logo.png' sólo exista una vez en el directorio y que estén exactamente los mismos archivos que había antes de hacer cambios.

ls
footer-logo.png logo.png large-logo.png README

Puedes seguir los pasos anteriores para realizar más cambios de imágenes, como remplazar footer-logo.png por algún otro logo, imagen secundaria, asociados, afiliados, etc...

Del mismo modo, puedes actualizar los archivos que aparezcan dentro de templates

pwd
/opt/bitnami/apps/edx/var/themes/edx.org/lms/templates
ls

La lista será quizá demasiado grande para lo que podamos editar para una instalación rápida en las condiciones que lo estamos haciendo, pero fácilmente puedes hacer cambios rápidos a footer.html, header.html, o a las páginas estáticas que aparecen en la navegación del pie de página "About", "Blog", etc...

*seguimos siendo root@host#: desde que utilizamos ./use_edx -- si en algún punto cerraste tu conexión, cambiaste de usuario, o cambiaste la configuración del ambiente de desarrollo, puedes volver a activarla corriendo desde donde estés ubicado

sudo /opt/bitnami/use_edx

Asumiendo que estamos aún en edx.org/lms/templates/ , podemos realizar modificaciones a cualquier archivo estático como footer.html:

 nano footer.html

Si queremos ver qué hay dentro de cada archivo antes de abrirlo para verificar que efectivamente es lo que queremos abrir, usamos:

 more footer.html

Una vez que hayamos terminado de realizar los cambios, podemos construir nuevamente la aplicación, reiniciar el servidor y verificar que todo esté funcionando de la manera esperada. Para ello debemos reubicarnos al directorio donde existen los archivos instalados de Open Edx, que es edx-platform

  cd /opt/bitnami/apps/edx/edx-platform
  sudo /opt/bitnami/apps/edx/bin/paver.edxapp update_assets lms --settings=aws

Paver, un programa que automatiza procesos complejos por medio de librerías y scripts con código ejecutable por bin, construirá la aplicación y en el proceso se convertirá el SCSS a CSS, y claro, las imágenes se actualizarán siempre y cuando tengamos activada la opción de ENABLE_COMPREHENSIVE_THEMING como true en el archivo lms.env.json.

Para resumir los cambios (puedes hacer muchos más), elementales para una personalización rápida de Open Edx, hagamos un recuento de los cambios que hicimos a lms.env.json

{
SMTP_HOSTNAME: "smtp.gmail.com",
USE_TLS: "true",
COMPREHENSIVE_THEMING_DIRS: {
/ruta/personalizada/hacia/eltema/edx.org
/otra/ruta/a/otro/tema/mi-propio-tema
},
ENABLE_COMPREHENSIVE_THEMING: "true",
THEME_NAME: "edx.org",
SITE_THEME: "edx.org",
PLATFORM_NAME: "Humanizando"

 }

Ahora reiniciemos la aplicación, los programas de soporte y el servidor (Apache). Para esto, utilizamos el siguiente comando:

 sudo /opt/bitnami/ctlscript restart 

Esperamos un par de minutos. Visita tu dirección o dale actualizar al navegador. Tu sitio con Open Edx instalado y personalizado con tu identidad corporativa debería estar visible y lista para aceptar registro de nuevos usuarios.