Cambiando la apariencia de Moodle

Gabriela Pérez Caviglia

Documentación del trabajo realizado para el entorno virtual de aprendizaje de la Universidad de la República - URUGUAY

Configuración de idioma   Para configurar el idioma se siguieron los siguientes

pasos:

Vamos a las opciones de idioma, ajustamos “Español” como idioma por defecto.

Cambio de apariencia

  Para cambiar la apariencia, creamos un tema basándonos en uno ya existente.

  Para esto, fuimos a la sección de temas en la web de moodle y descargamos el tema LIIP

  Ponemos el tema en la carpeta y procedemos a modificarlo, mediante la edición de el header, footer y las hojas de estilo en cascada.

Cambio de apariencia

En el sitio de http://moodle.org/themes bajamos el tema Liip en el cual nos basaremos

Copiamos la carpeta liip en la carpeta themes del moodle en nuestro servidor

Modificaremos información de todos estos archivos.

Activando el tema base

En el sitio de http://moodle.org/themes bajamos el tema Liip en el cual nos basaremos

Así es como luce Liip cuando lo instalamos, fue elegido por su simpleza, su juego de tipografías y la libertad para agregarle diseño

Diseñando la interfase

Este fue el boceto original de la interfase, en el proceso de codificación fue sufriendo variaciones y algunas cosas se simplificaron debido a incompatibilidades entre navegadores y otros detalles que fueron surgiendo

Diseñando la interfase

Para poder codificar esta imagen, la misma se va cortando el “secciones”, se van registrando “patrones de repetición” para luego modificar y agregar información en los archivos css y los html

secciones

Background que se repiten

Modificando los archivos del tema

  Describiremos este proceso de forma acotada, ya que es un proceso mas complejo y largo, donde hay que contar con conocimientos html y css sólidos

  Se crearon nuevas clases css, y se modificaron las exitentes para ir llevando la estructura de liip a el diseño de interfase que se deseaba.

  Se cambió el juego de iconos principales por defecto, editando las imágenes. Los iconos pequeños, fueron sustituidos por un set (Nuvola IconSet) que se descargo de http://www.moodlezengarden.com/

  Se cambio también el favicon por una imagen del logo de la Universidad de la república.

Nueva apariencia luego de un mes de trabajo aproximadamente   Luego de un mes de trabajo e investigación se logro un

resultado bastante aproximado al planteado.

  Si bien, contaba con experiencia en el diseño de interfases web, era la primera vez que realizaba un template de moodle.

  La primera idea que tuve fue hacer un template de cero, pero no encontré información detallada de este proceso, luego comprendí que es más fácil empezar a introducirse en el proceso modificando temas de otros

  Existen temas abiertos y comentados que ayudan mucho a los que realizamos esta tarea.

Nueva apariencia luego de un mes de trabajo aproximadamente

Así luce la plataforma cuando instalamos el tema, algo muy importante es como presentamos la portada, ya que es lo primero que ve el usuario y puede resultar un espacio útil también para comunicar novedades

Portada En un editor html se procede al diseño de la portada, luego se copia el código generado en la pantalla principal de la plataforma.

Como la UR es una universidad grande con mas de 100 carreras de grado y mas de 150 opciones de posgrados, mas otras actividades de enseñanza se organizó en la lógica de áreas de conocimiento, y también un acceso mas institucional para otras actividades

Copiando código a portada moodle

Le doy en la portada “Activar edición” y en resumen del sitio pego el código html que generé

Como luce hoy

navegación

Bloque de acceso a myMoodle

Novedades

Debajo de la navegación se publican novedades de interés