1. 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

2. 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.

3. 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.

4. 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.

5. 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

6. 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

7. 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

8. 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.

9. 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.

10. 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

11. 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

12. 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é

13. Como luce hoy
navegación
Bloque de acceso a
myMoodle

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