Mootes 2011 Diseño

24
Vamos a pelearnos con el diseño en

description

 

Transcript of Mootes 2011 Diseño

Page 1: Mootes 2011 Diseño

Vamos a pelearnos

con el diseño en

Page 2: Mootes 2011 Diseño

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

Page 3: Mootes 2011 Diseño

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

Page 4: Mootes 2011 Diseño

¿Diseño líquido o fijo?

Page 5: Mootes 2011 Diseño

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)

Page 6: Mootes 2011 Diseño

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

Page 7: Mootes 2011 Diseño

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

Page 8: Mootes 2011 Diseño

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

Page 9: Mootes 2011 Diseño

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

Page 10: Mootes 2011 Diseño

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

Page 12: Mootes 2011 Diseño

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)

Page 13: Mootes 2011 Diseño

Truco de CSS (aplicado en un contexto)

Page 14: Mootes 2011 Diseño

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

Page 15: Mootes 2011 Diseño

Moodle 2.0Diferentes dispositivos

Page 16: Mootes 2011 Diseño

Moodle 2.0Habilitar para móviles

Page 17: Mootes 2011 Diseño

Moodle 2.0Objetos en layout

Page 18: Mootes 2011 Diseño

Moodle 2.0Ejemplo de config.php

Page 19: Mootes 2011 Diseño

IconosCombinar carpetasCambiar iconos, más grandes o por CSS

Page 20: Mootes 2011 Diseño

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

Page 21: Mootes 2011 Diseño

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

Page 23: Mootes 2011 Diseño

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