Aprendiendo a diseñar en Moodle

lunes, 18 de noviembre de 2013

Consejos: Mejorando Accesibilidad en formularios

Con todo el boom HTML5 que se nos vino, veo prudente aconsejar sobre utilizar el nuevo atributo/propiedad para los <input> en los formularios.

Con la opción placeholder="Este texto aparecera por defecto"

EJ:

De esta manera facilitamos una indicación que muchas veces puede variar, en mi caso particular, el usuario es el código de matricula del alumno, pero en otras puede ser el mail institucional o un usuario particular. Por lo que nos ahorramos espacio de forma muy simple.

Nota: Este texto, desaparece no cuando cliqueamos sobre él sino cuando empezamos a colocar los datos.

La fuente: la W3C misma (y miles de resultados googleanos/otros-buscadores), sin embargo el sitio que me recordó hacer un post sobre esto es: csslab.cl/ que hizo un post donde demuestra que podemos además aplicarle estilos a la propiedad, algo muy "corporative" cuando a marca nos referimos.

miércoles, 20 de febrero de 2013

Colocando responsive las aula de proyecto en Moodle

Aquí estoy nuevamente, colocando lo que puedo compartirles de la nueva estrategia 2013 en mi trabajo para motivar a los docentes a usar las aulas virtuales. El cambio de imagen que yo hice, fue un paso en adelante pero aunque sea comunicador visual y tengo muchas razones para defender una buena estética, como yo lo veo, más importante en la educación usando las TIC, no es lo impactante visualmente o lo super animado de un contenido, es la calidad del mismo y la estrategia pedagógica con la que se realizan estos.

Teniendo esto en mente, surgió la estrategia:

"Vamos a facilitarle a los docentes no iniciados, un aula ya creada y con contenido editable"

Entreguemosle su Aula Estándar. Y encarretemoslo en las TIC.

Así es como luce el encabezado en el modo edición del encabezado del tema. Esa parte esta sombreada

muestra que puede ser editada por el docente, borrar el contenido y escribir el suyo.

El titulo también es editable.

Además quería poner a prueba el hacer imágenes sensibles al redimencionamiento de la ventana, la ultima vez me quedo todo muy cuadrado y como moodle tiene por defecto unas características de padding un poco extrañas, me resultaba imposible crear un diseño como este, hasta hoy.

Imagen con monitor a resolución a 800x600px

Algunas personas consideraron un poco extraña la propuesta, pero nunca se plantearon el problema de los docentes al mostrar actividades en el aula fisica de la plataforma virtual y que los videobeams o proyectores la mayoría solo usan una resolución de 800x600px y no se veía bien.

Anteriormente pasaba esto: A la imagen le salia un scroll en las versiones de Moodle más modernas

Y si el monitor era de resolución más alta, quedaba un espacio en blanco, que yo solucionaba ajustando la alineación al centro. Pero ahora el mismo se adapta, no de la mejor forma pero es un comienzo no?

La misma imagen escalada en un monitor de 1200x1024px

Ahora en las tablets, se puede visualizar un poco mejor, pero solo un poco.

Aquí un vídeo de como se redimenciona en el navegador.

http://youtu.be/L8hvaCikJ6E

Pareciese que cuando esta en un tamaño pequeño el titulo se monta encima del otro mucho, pero es porque use un line-height muy pequeño, ya que moodle coloca un light-height muy amplio en los titulos y solo se ve así en el modo edición..

Otro punto a favor de mi propuesta (y que convenció más a mi jefe) es que las imágenes se pueden editar directamente en la misma plataforma sin necesidad de softwares externos o programa de edición de gráficos, como photoshop, fireworks o gimp. Un punto más para incentivar a aquellos docentes que no han adquirido esas competencias y habilidades, lo que quiere decir (aunque no lo recomiendo) que sí eres un docente y ya sabes usar estos software no tienes porque usar el formato estándar, esto es solo para aquellos que quieren usar el aula pero disponen de menor tiempo para crear los recursos o hacerla más estética. Además le perimitira concentrarse más en mejorar los contenidos educativos.

Las imágenes que se necesitaron para este proyecto no pesan en total más de 200 kb. Son todas en jpg, menos una en .png que pesa 143kb.

Se usaron muchos estilos de CSS3 directamente en el codigo html (no hay nada de stylesheets linkeados) todo para ser compatible con Moodle 2.4 y lo mejor con Internet Explorer (en la institución usan la versión 9)

Y aclaro esta es solo la parte estética de la estrategia en las aulas estándar hay mucho más que solo imágenes editables. Pero esto fue lo que yo propuse, desarrolle y me siento a gusto con el resultado.

Por cuestiones de privacidad laboral, no puedo revelar mucho más que esto. Pero con esta idea, espero incentivar a docentes y desarrolladores a explorar más ideas.

Los creditos no me los llevo solo yo, el Ing. Felipe Buendia jefe del centro de innovación en eduicación virtual, quien fue el creador de la estrategia, los ingenieros Gastón Trujillo y Jose Noriega en la asesoría tecnológica y en el desarrollo y diseño gráfico, mi persona Edgar Gutiérrez.

Con asesoría del coordinador pedagogico: Ramiro Barragan y producido para la institución: Fundación Universitaria Tecnologico Comfenalco.

Con este proyecto conseguimos más fondos para el centro, interés del rector y de la junta administrativa, impulsamos el plan lector en la virtualidad y abrir 2 nuevos puestos para el desarrollador de contenidos (por fin!!) y un asesor pedagógico tiempo completo.

Esto se lo dedico a mi ex-compañero Gaston que aunque se nos va del equipo por una mejor oportunidad laboral, sin su apoyo al inicio, no hubiera comprendido ni realizado nada de lo que hecho hasta ahora. Muchas Gracias viejo.

Estas son las imagenes utilizadas para el Aula estandar, proyectos de AULA

esta es la imagen más pesada de todas 143kb

Despues del salto el código para las tablas de proyecto de aula

jueves, 14 de febrero de 2013

Eliminar el espacio a la izquierda en las listas

Para eliminar el espacio por defecto en las listas

<ul>
<li>
<li/>
</ul>

Solo debemos colocar en el css un selector a la etiqueta "uL" de esas listas, con un padding de 0.

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.