mootes 2011 diseño
DESCRIPTION
TRANSCRIPT
Vamos a pelearnos
con el diseño en
Temas en Moodle 1.9 y en 2.0http://moodle.org/mod/data/view.php?id=6552http://moodle.org/plugins/browse.php?list=category&id=3
Temas 2.0http://newschoollearning.com/theme/submissions/
¿Diseño líquido o fijo?
Algunas ideas generales
- 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)
Moodle 2.0Configuración de temas... gestión de caché
Ajustes de temas (temas por curso, por categoría...)
Estructura y bloques en MoodleMoodle 2.0 (cambia el modelo, menos tabla, más DIV)
El diseño en web es cosa de cajas...
Moodle es cuadrado
Footer<div id="footer">
Cabecera<div class=" clearfix" id="header">
Columna derecha<div id="right-column">
Columna derecha<div id="left-column">
Columna central<div id="middle-column">
Habilitar o no Ajax (usabilidad)Bloque de Arrastrar y soltar ( http://moodle.org/plugins/view.php?plugin=block_dndupload )
Firebug: https://addons.mozilla.org/es-ES/firefox/addon/1843/
Jquery: http://jquery.com/
San Google: ...
Solo no puedes, con amigos si... (y sigue siendo válido)
Truco de CSS (aplicado en un contexto)
Añadir código embebido (o habilitarlo para estudiantes)Insertar código dentro del campus
Moodle 2.0Diferentes dispositivos
Moodle 2.0Habilitar para móviles
Moodle 2.0Objetos en layout
Moodle 2.0Ejemplo de config.php
IconosCombinar carpetasCambiar iconos, más grandes o por CSS
Moodle 2.0 - Layouts http://docs.moodle.org/dev/Themes_2.0
Moodle 2.0 - archivos convencionales http://docs.moodle.org/dev/Themes_2.0
Aardvark http://moodle.org/mod/data/
Carpetas en 2.0
Carpetas en 1.9(tema básico)
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;
- CSS: Centrar un objeto: width: 620px; margin: 10px auto;
- 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