miércoles, 23 de enero de 2013

Usando el Css en el editor de texto

En moodle podemos usar en las opciones avanzadas del editor de imagen unos estilos texto como:

line-height: 16px; Controla el interlineado.
background-image: url(imagen1), url(imagen2), url(imagen3); Interpone diferentes imágenes de fondo. Orden: La primera en colocarse es la que se encuentras más adelante. *Actualmente no funciona, requiere más pruebas*
background-size: 100%(ancho) 100%(alto); Controla el tamaño de la imagen.
overflow:hidden; Permite esconder el contenido del texto si este excede el tamaño del div o de la caja.
resize:vertical; Permite poder cambiar el tamaño de un div por el usuario, opcione: horizontal, both;
-webkit-resize: both; chrome
-ms-resize: horizontal; internet:
-oz-resize; none; mozzila
-o-resize:none; opera
position: center; Centrar elementos *probar más*

Para cambiar formato de fuentes: font.squirrel.
Para hacer degradados en css3: colorzilla.com/gradient-editor/


-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; Bordes redondeados *probar*

Sombras



box-shadow: 5px 10px 7px rgba(0,0,0,0.5);


box-shadow: distanciaX distanciaY difuminado color;

text-shadow: distanciaX distanciaY difuminado color;


text-shadow: 
0px 0px 20px rgba(0,255,0,1), 
0px 0px 20px rgba(0,255,0,1), 
0px 0px 20px rgba(0,255,0,1);


text-shadow:  
1px 1px 0px rgba(230,230,230,1),  
2px 2px 0px rgba(200,200,200,1),  
3px 3px 0px rgba(180,180,180,1),  
4px 4px 0px rgba(160,160,160,1);


text-shadow: 
1px 1px 0px rgba(230,230,230,1), 
2px 2px 0px rgba(200,200,200,1), 
3px 3px 0px rgba(180,180,180,1), 
4px 4px 0px rgba(160,160,160,1), 
/*Añadimos*/ 
5px 5px 0px rgba(0,0,0,1), 
8px 8px 20px rgba(0,0,0,0.5);

http://www.cristalab.com/css3/sombras-efectos-css/
http://www.cristalab.com/css3/fondos-css-3/





viernes, 18 de enero de 2013

CREAR CONTENIDOS IMS PARA MOODLE

1) Lo primero que hay que hacer es buscar un programa que se llama "RELOAD-EDITOR".

2) Luego se depura la carpeta donde están los archivos a convertir en un paquete IMS y lo copiamos en una nueva carpeta que se transformara en el nuevo IMS.

3) Estando en el programa "reload" abierto, vamos a escoger crear un nuevo paquete IMS y seleccionamos la carpeta que creamos recientemente.

4) Cuando este creada, seleccionamos el icono "organization" y con el click derecho le decimos que agregue una nueva organización, o "add organization" en este caso se nos desplegara otro icono a donde deberemos arrastrar el "index" de nuestro contenido html, en este caso en "(...)wellcome.html"

5) Y guardamos en Zip.

Diseñando cursos estandar en Moodle 2

18 - 01- 2013

Empresa: Comfenalco

Curso: Permanencia







Después del salto viene el código


jueves, 17 de enero de 2013

Colores usados en Moodle de Comfenalco

17-01-2013 

Empresa: Comfenalco 

 #015ea4 Azul Claro
#2977b2 Segundo Azul Claro
#16347f Azul Estandar
#0F2167 Azul Oscuro

    #E63F3F Rojo Claro
 #94201A Rojo Oscuro
#BF201A Rojo Estandar


Diseñando cursos estándar en Moodle


17-01-2013 Moodle Cabezotes de Cursos

Empresa: Comfenalco

Este es el primer código que use para los encabezados de las aulas estándar que se van a entregar a todos los docentes de primeros semestres. 

Los estoy creando de forma editable, para que puedan escribir sin tener que pensar en el diseño. Sacrifique un poco el diseño este semestre para darle una solución según la filosofía del "responsive disign" aunque uso tablas  y que estos tengan la posibilidad de adaptarse a cualquier pantalla.

Los anchos están en 100% y fabrique el logo de las aulas con el fin de que no queden tan planas.

Todos los fondos son degrades tileables a un ancho de 1px para que se puedan repetir sin problemas a lo largo del fondo de los elementos editables.

La Imagen del sello es separada al resto: 


 Icono de Actividades


 Icono de Recursos


 Icono de Contenidos


 Imagen de fondo para las etiquetas de temas editables.

Ej:

 Imagen de fondo de títulos en los cabezotes


Ej:


Imagen de fondo para los cabezotes de los cursos

Ejemplo de como luce aplicado.

 Este es el gif usado



Después del salto veras código usado hasta ahora.