Este documento presenta varias ideas y sugerencias para el diseño de temas en Moodle 1.9, 2.0 y posteriores. Incluye consejos sobre la estructura de bloques, la configuración de temas, el uso de CSS y JavaScript, y adaptaciones para diferentes dispositivos. También proporciona enlaces a recursos útiles como documentación, plugins y herramientas de desarrollo.

1. Vamos a pelearnos
con el diseño en

2. Temas en Moodle 1.9 y en 2.0
http://moodle.org/mod/data/view.php?id=6552
http://moodle.org/plugins/browse.php?list=category&id=3

3. Temas 2.0
http://newschoollearning.com/theme/submissions/

4. ¿Diseño líquido o fijo?

5. - Activar los filtros multimedia
- Añadir objetos visuales a un contenido (en la parte central, como bloque...)
- El espacio es diseño. Distribuir los objetos.
- Añadir librerías Javascript en la cabecera
- Modificar la apariencia por Javascript
- Modificar la apariencia según un atributo del usuario o del curso
- Ocultar aquello que sea prescindible (focalizar al usuario)
Algunas ideas generales

6. Moodle 2.0
Configuración de temas... gestión de caché

7. Ajustes de temas (temas por curso, por categoría...)

8. Estructura y bloques en Moodle
Moodle 2.0 (cambia el modelo, menos tabla, más DIV)

9. El diseño en web es cosa de cajas...

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

11. Habilitar o no Ajax (usabilidad)
Bloque de Arrastrar y soltar ( http://moodle.org/plugins/view.php?
plugin=block_dndupload )

12. Solo no puedes, con amigos si... (y sigue siendo válido)
Firebug: https://addons.mozilla.org/es-ES/firefox/addon/1843/
Jquery: http://jquery.com/
San Google: ...

13. Truco de CSS (aplicado en un contexto)

14. Añadir código embebido (o habilitarlo para estudiantes)
Insertar código dentro del campus

15. Moodle 2.0
Diferentes dispositivos

16. Moodle 2.0
Habilitar para móviles

17. Moodle 2.0
Objetos en layout

18. Moodle 2.0
Ejemplo de config.php

19. Iconos
Combinar carpetas
Cambiar iconos, más grandes o por CSS

20. Moodle 2.0 - Layouts
http://docs.moodle.org/dev/Themes_2.0

21. Moodle 2.0 - archivos convencionales
http://docs.moodle.org/dev/Themes_2.0

22. Carpetas en 1.9
(tema básico)
Carpetas en 2.0
Aardvark http://moodle.org/mod/data/

23. Algunos códigos rápidos para no programadores css:
display:none;
height:300px;
overflow: hidden;
float:left;
float:right; - CSS: Centrar un objeto:
width:300px; width: 620px;
background-color:black; margin: 10px auto;
font-size:33px;
border: 3px solid black; - Moodle 1.0 (añadir una imagen en los estilos)
background-image: url(pix_aux/arrow_left.gif);
- Moodle 2.0 (añadir una imagen - en una carpeta)
background: #fff url([[pix:theme|core/bground]]) repeat-x
fixed;
CSS fácil

24. y para cualquier otra pelea:
miguel.angel@factorsim.com