Your SlideShare is downloading. ×
Mootes 2011 Diseño
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mootes 2011 Diseño

1,411
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,411
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Vamos a pelearnoscon el diseño en
  • 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. Temas 2.0http://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.0Configuración de temas... gestión de caché
  • 7. Ajustes de temas (temas por curso, por categoría...)
  • 8. Estructura y bloques en MoodleMoodle 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.0Diferentes dispositivos
  • 16. Moodle 2.0Habilitar para móviles
  • 17. Moodle 2.0Objetos en layout
  • 18. Moodle 2.0Ejemplo de config.php
  • 19. IconosCombinar carpetasCambiar iconos, más grandes o por CSS
  • 20. Moodle 2.0 - Layoutshttp://docs.moodle.org/dev/Themes_2.0
  • 21. Moodle 2.0 - archivos convencionaleshttp://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