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