Mootes 2011 Diseño

1,777 views

Published on

  • Be the first to comment

  • Be the first to like this

Mootes 2011 Diseño

  1. 1. Vamos a pelearnoscon el diseño en
  2. 2. 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
  3. 3. Temas 2.0http://newschoollearning.com/theme/submissions/
  4. 4. ¿Diseño líquido o fijo?
  5. 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. 6. Moodle 2.0Configuración de temas... gestión de caché
  7. 7. Ajustes de temas (temas por curso, por categoría...)
  8. 8. Estructura y bloques en MoodleMoodle 2.0 (cambia el modelo, menos tabla, más DIV)
  9. 9. El diseño en web es cosa de cajas...
  10. 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. 11. Habilitar o no Ajax (usabilidad)Bloque de Arrastrar y soltar ( http://moodle.org/plugins/view.php?plugin=block_dndupload )
  12. 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. 13. Truco de CSS (aplicado en un contexto)
  14. 14. Añadir código embebido (o habilitarlo para estudiantes)Insertar código dentro del campus
  15. 15. Moodle 2.0Diferentes dispositivos
  16. 16. Moodle 2.0Habilitar para móviles
  17. 17. Moodle 2.0Objetos en layout
  18. 18. Moodle 2.0Ejemplo de config.php
  19. 19. IconosCombinar carpetasCambiar iconos, más grandes o por CSS
  20. 20. Moodle 2.0 - Layoutshttp://docs.moodle.org/dev/Themes_2.0
  21. 21. Moodle 2.0 - archivos convencionaleshttp://docs.moodle.org/dev/Themes_2.0
  22. 22. Carpetas en 1.9(tema básico) Carpetas en 2.0 Aardvark http://moodle.org/mod/data/
  23. 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. 24. y para cualquier otra pelea:miguel.angel@factorsim.com

×