Mootes 2011 Diseño

Post on 05-Dec-2014

1.910 views 1 download

description

 

Transcript of Mootes 2011 Diseño

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

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

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

y para cualquier otra pelea:miguel.angel@factorsim.com