Este documento discute cómo personalizar la apariencia de Moodle mediante el uso de temas, modificación de código CSS y PHP, y cambios en elementos como la cabecera, pie de página, bloques laterales y contenido central. Explica que se pueden descargar temas gratuitos o contratar un servicio profesional para crear un tema personalizado, y proporciona algunos ejemplos básicos de código CSS para modificar el diseño.

1. | Creamos e-learning
Moodle no tiene que ser feo
no tiene que ser feo

2. | Creamos e-learning
Moodle no tiene que ser feo Sólo no puedes, con amigos si...
Firebug: https://addons.mozilla.org/es-ES/firefox/addon/1843/
Jquery: http://jquery.com/
San Google: ...

3. | Creamos e-learning
Moodle no tiene que ser feo ¿De dónde saco un tema gráfico?
Contacto con un servicio profesional
Busco un tema gráfico que me guste y lo adapto
Me hago un tema gráfico con estas manitas, desde cero

4. | Creamos e-learning
Moodle no tiene que ser feo De la idea a la realización...
Si tienes una idea
alguien podrá llevarla a cabo

5. | Creamos e-learning
Moodle no tiene que ser feo
Desarrollado para IL3-UB

6. | Creamos e-learning
Moodle no tiene que ser feo

7. | Creamos e-learning
Moodle no tiene que ser feo

8. | Creamos e-learning
Moodle no tiene que ser feo

9. | Creamos e-learning
Moodle no tiene que ser feo

10. | Creamos e-learning
Moodle no tiene que ser feo

11. | Creamos e-learning
Moodle no tiene que ser feo Los temas en Moodle

12. | Creamos e-learning
Moodle no tiene que ser feo Los temas en Moodle
Directorio de temas de Moodle
http://moodle.org/mod/data/view.php?id=6552

13. | Creamos e-learning
Moodle no tiene que ser feo Los temas en Moodle
Aardvark
http://moodle.org/mod/data/view.php?

14. | Creamos e-learning
Moodle no tiene que ser feo Los temas en Moodle
Una vez descargado y copiado en la carpeta temas,
lo tenemos disponible para activarlo.

15. | Creamos e-learning
Moodle no tiene que ser feo Moodle es cuadrado
Cabecera
<div class=" clearfix" id="header">
Columna derecha
<div id="left-column">
Columna central
<div id="middle-column">
Columna derecha
<div id="right-column">
Footer
<div id="footer">

16. | Creamos e-learning
Moodle no tiene que ser feo Moodle es cuadrado
y sigue siendo cuadrado... (rectangular mejor dicho)

17. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... diseño líquido o no
BODY
PAGE
Algunos códigos rápidos para no programadores css:
display:none;
height:300px;
overflow: hidden;
float:left;
float:right;
width:300px;
background-color:black;
font-size:33px;
border: 3px solid black;
(aunque los programadores web digan lo contrario esto es lo que
usan el 92,65% de las veces, el resto buscan en San Google)

18. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... la cabecera
HEADER
Aprovechamos a cargar librerías de código nuevas, a hacer
llamadas a otros códigos de PHP y a realizar cambios en la
estructura de la cabecera).
¿Y si añadimos un código PHP que nos diga si el usuario actual
es de Barcelona o Madrid?
¿Y si eso lo utilizamos para cambiar la vista del contenido?

19. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... el footer
Como en el header, podemos intercambiar contenido...

20. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... los bloques laterales
Distribución
Espacio
Colores de fondo
Tamaños

21. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... El contenido central
Fondos
Distribución de las celdas
Objeto Separator...

22. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... iconos
Cambiar o intercambiar los iconos que
encontramos en la carpeta pix de cada
tema.
Jugar con tamaños más grandes para
ciertos iconos...

23. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... bloques laterales
Para añadir contenido visual, vídeos,
gráficos, código embebido, contenido
dinámico...
http://moodle.org/mod/data/view.php?d=13&rid=1836&filter=1

24. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... editar contenido
Editar la cabecera de curso o la descripción
de los cursos.
Crear tablas

25. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... configuración

26. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... activar filtros
Activar los filtros multimedia

27. | Creamos e-learning
Moodle no tiene que ser feo Tocando Moodle... Explorer es malo
EXPLORER 6 ES MALO... MUY MALO... DAÑA LA
CREATIVIDAD Y MUERE UN GATITO CADA VEZ QUE LO
EJECUTAS.
POR EL BIEN DE LOS GATITOS, BóRRALO.

28. | Creamos e-learning
Moodle no tiene que ser feo
Gracias...
Consultas o sugerencias:
miguel.angel@factorsim.com