Cambiando la apariencia de Moodle

Gabriela Prez Caviglia Documentacin del trabajo realizado para el entorno virtual de aprendizaje de la Universidad de la Repblica - URUGUAY

Configuracin de idioma
!! Para configurar el idioma se siguieron los siguientes pasos:
Vamos a las opciones de idioma, ajustamos Espaol como idioma por defecto.

Cambio de apariencia
!! Para cambiar la apariencia, creamos un tema basndonos en uno ya existente. !! Para esto, fuimos a la seccin de temas en la web de moodle y descargamos el tema LIIP !! Ponemos el tema en la carpeta y procedemos a modificarlo, mediante la edicin 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 informacin 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 tipografas y la libertad para agregarle diseo

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

Diseando la interfase
Para poder codificar esta imagen, la misma se va cortando el secciones, se van registrando patrones de repeticin para luego modificar y agregar informacin 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 slidos !! Se crearon nuevas clases css, y se modificaron las exitentes para ir llevando la estructura de liip a el diseo de interfase que se deseaba. !! Se cambi el juego de iconos principales por defecto, editando las imgenes. Los iconos pequeos, fueron sustituidos por un set (Nuvola IconSet) que se descargo de http://www.moodlezengarden.com/ !! Se cambio tambin el favicon por una imagen del logo de la Universidad de la repblica.

Nueva apariencia luego de un mes de trabajo aproximadamente

!! Luego de un mes de trabajo e investigacin se logro un resultado bastante aproximado al planteado. !! Si bien, contaba con experiencia en el diseo 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 informacin detallada de este proceso, luego comprend que es ms fcil 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 tambin para comunicar novedades

Portada
En un editor html se procede al diseo de la portada, luego se copia el cdigo 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 enseanza se organiz en la lgica de reas de conocimiento, y tambin un acceso mas institucional para otras actividades

Copiando cdigo a portada moodle

Le doy en la portada Activar edicin y en resumen del sitio pego el cdigo html que gener

Como luce hoy

Bloque de acceso a myMoodle

navegacin

Novedades

Debajo de la navegacin se publican novedades de inters