Cultura libre – Página 10

Cinco pasos para empezar con Moodle

Muchos amigos míos tienen la necesidad de crear un pequeño espacio de e-learning o de apoyo a la presencialidad, lo cual no llega a justificar la contratación de un profesional que les arme el aula virtual.

Para ellos, y para quienes tienen curiosidad por empezar a usar Moodle, aquí va un paso a paso con una colección de tutoriales y enlaces muy útiles.

1.Crear una plataforma en un hosting gratuito

Entrar (por ejemplo) a www.milaulas.com
Escribir un nombre para la plataforma
Esperar el mail con el nombre de usuario y contraseña
Entrar al enlace y hacer clic en “Entrar” (arriba a la derecha o abajo de todo)

2.Crear un curso

Utilizar el botón de “Crear un nuevo curso”
Completar el nombre del curso (título largo)
Escribir un nombre corto
Elegir un formato (por ejemplo, formato de temas en pestaña)
Elegir la cantidad de clases o secciones que tendrá el curso

3.Añadir contenido

Usar el botón de “Activar edición”
Editar el nombre de la sección
Usar el enlace “Añadir actividad o recurso” para poner textos en el aula (“Etiqueta”) o subir contenido (“Página” o “Archivo”)

4.Crear los usuarios

Para crear un usuario en la plataforma debemos ir a Administración del sitio / Usuarios / Cuentas / Agregar usuario
Son necesarios un nombre de usuario, una contraseña y una dirección de mail.

5.Matricular los usuarios al curso

Además de tener el usuario creado en la plataforma, es necesario que el usuario sea matriculado en el curso, con el rol de alumno:

En el curso, ir a la opción Administración del curso / Usuarios / Usuarios matriculados

¡Listo! Ya está lista el aula para empezar a funcionar.

Dibujar flechas usando Gimp

No entiendo cómo, pero Gimp no tiene la posibilidad de dibujar flechas simplemente trazando un vector….

Sin embargo es posible instalar un script que lo hace. Una vez instalado es muy simple trazar una flecha, el problema es instalarlo.

Encontré este post que me ayudó muchísimo: Dibujar flechas en Gimp

Lo primero que debemos hacer es descargar Draw Arrow y descomprimirlo para obtener el programita que agregaremos a Gimp

Una vez que tenemos ese archivo, lo debemos copiar en la carpeta correspondiente a los scripts. En mi caso, como usuaria de Huayra, tuve que seguir estos pasos:

1) Abrir la carpeta correspondiente a mi usuario: Home / Alumno

2) En las preferencias de administración de archivos pedir que se muestren las carpetas ocultas (CTRL+H):

3) En /home/alumno/.gimp-2.8 buscar la carpeta scripts, y si no existe, crearla. En esa carpeta copiar el archivo arrow.scm

4) Iniciar Gimp (si ya estaba abierto, salir y volver a entrar). En el menú herramientas, la última opción será Arrow.

Estos pasos sirven para que únicamente el usuario Alumno pueda tener este agregado. Para que el script esté disponible para todos los usuarios se debe ejecutar el programa de administración de archivos (en Huayra con escritorio Mate se llama Caja, en Gnome se llama Nautilus) mediante una terminal, con el comando sudo:

sudo nautilus
o
sudo caja
De esa manera podremos acceder a la carpeta /usr/share/gimp/2.0/scripts y copiar allí el archivo:

Cuando ya tenemos instalado el script, se utiliza de la siguiente manera:

1) Trazamos una ruta

2) Vamos al menú Herramientas, opción Arrow:

¡Ya tenemos flechas!

Gracias a Pablo Medrano por el 80% de este post…

Krita: editor gráfico libre

A raíz de una publicación de mi amigo Claudio Segovia de hace unos días, me enteré de la existencia de Krita. La noticia decía: “La Universidad de París 8 sustituye Photoshop por Krita”

Lo primero que hice fue buscar Krita y cómo instalarlo. Lo logré gracias a estas instrucciones: Descargar e instalar Krita

¿Y qué es Krita? La respuesta, como siempre, está en Wikipedia:

Krita (cuyo significado es crayón en sueco) es el software de pintura digital e ilustración basado en las librerías de la plataforma KDE e incluido en Calligra Suite (antiguamente conocido como KOffice). Diseñado como una suite de pintura digital e ilustración, Krita es software libre distribuido bajo la licencia GNU GPL. Fue lanzado por primera vez como parte de la versión 1.4.0 de KOffice, el 21 de junio de 2005.

El diseño de Krita hace énfasis en la creación de imágenes desde cero en desmedro de la manipulación de imágenes existentes,¹ y como tal ha sido influenciado en gran medida por programas como Corel Painter. Sin embargo, soporta características no tan comunes en aplicaciones de dicho rubro, como por ejemplo la capacidad de trabajar con mapa de bits e ilustración vectorial, entre otras, a pesar de esto se centran en ofrecer características orientadas al dibujo digital en contraposición de las funciones de edición fotográfica.

Para mí, que utilizo Gimp mañana, tarde y noche, no es simple utilizar un editor gráfico diferente.

Pese a ello me puse a jugar un ratito con la grilla de perspectiva, las herramientas de dibujo y de relleno, y pude dibujar alguna cosita bastante sencilla:

Ahora espero poder tener tiempo de buscar algunos tutoriales; por lo que vi hasta ahora, a quien le guste dibujar, evidentemente esta herramienta le va a encantar. Hay mucho para explorar.

Bolsitas de papel con patrón y tarjetitas

En estas fiestas, para envolver los regalos (las velas perfumadas por ejemplo), hice un dibujito que utilicé como patrón en un papel y lo fotografié con el celular:

Después, abrí ese dibujo en Gimp, lo puse en el portapapeles (seleccionar todo / Copiar) y elegí en la herramienta de relleno (el baldecito) la opción Rellenar con patrón / Portapapeles:

Creé un archivo nuevo y simplemente hice clic con la herramienta de relleno:

Así obtuve una hoja con mis monitos, lista para fabricar una bolsita de regalo.

En Youtube hay muchas explicaciones de cómo hacer una bolsita, esta es la que seguí yo:

Las tarjetitas

No iba a hacer grandes cosas, pero me encontré en Pinterest con muchas propuestas de origami de las que finalmente tomé un papá noel (lo convertí en un duende) y una camisa doblada:

Aquí las instrucciones para hacer el papá noel / duende y aquí las instrucciones para las camisas.

Así me quedaron los regalitos:

Tarjetitas para estas fiestas usando Gimp

A pedido del público (Gracias, Gustavo Cucuzza), un nuevo post sobre Gimp en BETA Weblog.

Crear un fondo con letras cuya textura sean paisajes (o velas, o motivos varios)

Podemos empezar por buscar el motivo de fondo: un paisaje en Wikimedia Commons, un arbolito de navidad, adornos, golosinas, etc.
Una vez elegida esa imagen, agregamos una capa blanca o negra utilizando el menú Capa/Nueva capa.
Después, elegimos la herramienta de escritura y hacemos un lindo texto de cualquier color (ya que no lo vamos a usar de ese color).
Una vez que tenemos el texto, seleccionamos con la herramienta rectangular y lo copiamos en el porta papeles (Editar / Copiar) y lo ocultamos.

¡¡Y ahora viene la parte divertida!!

Ahora que tenemos copiado en el portapapeles el texto, lo vamos a usar como “Sacabocados”, o sea, vamos a “troquelar” la capa blanca de la siguiente manera:

Elegimos la goma de borrar o borrador.
En las opciones de la herramienta, le decimos que la forma de lo que borre sea lo que está en el portapapeles (es la primera opción)

Elegimos la capa blanca o negra como capa activa
Borramos y borramos, variando el tamaño de la goma

tarjeta con gimp variar opciones goma

Esta es la primera versión de mi tarjeta (cambiándole el paisaje de fondo):

Pero para que el texto de adelante fuera más legible, le inserté una capa transparente entre el texto y el fondo, y la pinté de blanco con la jarrita, con una opacidad del 30%.

¡Quedó precioso! Y se le puede cambiar el fondo a piaccere

Si la tarjeta se va a utilizar en línea, se puede agregar algún efecto de animación (del menú Filtros / Animaciones)

Ahora le cambié el fondo por uno navideño, creé una capa nueva a partir de visible (para unir todo en una misma capa), hice más alta la capa del fondo y creé un globo giratorio (Filtros / Animaciones)

Felices fiestas, les desea BETA Weblog

Lindos botones con CSS (II)

Al igual que en el post anterior, voy a compartir el código HTM y CSS para hacer unos botones lindos y accesibles, ya que el contenido está separado del formato.

En este caso usé una imagen transparente de frente y una imagen de unas flores como fondo*.
Imagen de frente:

Rectángulo semi transparente hecho en Gimp (lo pongo sobre una superficie gris para que se pueda ver…)

El código es prácticamente el mismo que en el post anterior, pero le modifiqué los márgenes y el padding para que se viera el botón transparente dentro del otro.

Este es el HTML. En el bloque de la izquierda abro y cierro el “marco” por cada botón, y en el de la derecha el “marco” contiene los otros tres divs:

<div style=”width: 15%; float: left;”>
<div class=”marco”>
<div class=”boton”><p>Opción 1</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 2</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 3</p>
</div></div>
<div class=”marco”>
<div class=”boton”><p>Opción 4</p>
</div></div>
</div>

<div style=”width: 15%; float: left; margin-left: 20px;”>
<div class=”marco” style=”margin: 10px;”>
<div class=”boton”><p>Opción 1</p>
</div>
<div class=”boton”><p>Opción 2</p>
</div>
<div class=”boton”><p>Opción 3</p>
</div>
</div>
</div>

Y acá está el CSS:

.marco {

width: 99%;
background-image: url(‘http://irisfernandez.com.ar/imagenes/flores.jpg’);
background-repeat: repeat-none;
padding-top: 10px;
padding-bottom: 10px;
}

.boton {
width: 80%;
line-height: 40px;
background-image: url(‘http://irisfernandez.com.ar/imagenes/transparente.png’);
color: #000;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.boton a:link {
color: #000;
text-decoration: none;
}
.boton a:hover {

color: #000;
text-decoration: none;
}
.boton a:visited {

color: #000; text-decoration: none;
}

*Imagen de fondo descargada de Wikimedia Commons:

Douglasia laevigata 2453CC BY-SA 3.0

Walter Siegmund – Own work

Lindos botones con CSS

En uno de mis trabajos tenía que hacer unos botones más o menos acordes con el resto del sitio y se me ocurrió hacerlos en un rectángulo con sombra, sobre una franja de otro color.

¿Por qué no hacerlos directamente como imagen?

Porque la regla número uno de la accesibilidad es separar el contenido del formato. Un invidente puede escuchar el nombre de las opciones únicamente si estas están insertadas como texto.

Un dispositivo muy lento mostrará los textos y tardará mucho en cargar las imágenes.

¿Cómo se hacen?

1) En el archivo CSS se definen los tipos de DIV que se usarán:

Un div contiene la franja que está debajo del rectángulo.

Es un div que mide 50px de altura, y que tiene como fondo una imagen (porque esa franja anaranjada tiene un degradado). La imagen de fondo se repite horizontalmente cuanto sea necesario, adaptándose al ancho del DIV.

Este es el código CSS del marco:

.marco {

width: 99%;

height: 50px;

 background-color: #fff;

background: url('https://blabla/pix/fondoopciones.png');

background-repeat: repeat-x;

}

Y este es el CSS del botón en sí

.boton {

 width: 80%;
 line-height: 40px;
 background-color: #773156;
 color: #fff;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 box-shadow: 5px 5px 2px #999; 
}

.boton a:link {

 color: #fff;
 text-decoration: none;
 }

.boton a:hover {

 color: #fff;
 text-decoration: none;
 }

.boton a:visited {

 color: #fff; text-decoration: none;

}

Luego, en el HTML utilizo un DIV dentro de otro:

<div class="marco">

<div class="boton">

<a href="enlacedelboton">Preguntas frecuentes</a>

</div>
</div>

Imprimí tu agenda minimalista

Mi hijo no quiere agenda con imágenes, formatos, tapas así o asá…. sólo renglones y fechas.

Así que me descargué una plantilla para agenda realizada para OpenOffice, la edité, y aquí la comparto, modificado como agenda minimalista para el que tenga gustos superiores como mi hijo 🙂

Aquí una muestra de lo que se obtiene al cambiar la fecha justo donde dice “Cambiar aquí”.

Archivo editable de la agenda: (sólo cambiar la fecha donde dice “cambiar aquí”) agenda para OpenOffice o LibreOffice

Chispas sobre Moodle: reutilización de archivos subidos a otros cursos

Para subir archivos, actualizarlos y eliminarlos, lo que más me gusta es utilizar un FTP. Si uno no tiene acceso a una carpeta mediante FTP (porque no es quien administra el hosting), Moodle permite crear repositorios externos.

Esto es muy útil para ese tipo de recursos que se utilizan en más de un curso: alguna imagen, algún PDF, etc.

Más allá de eso, en las últimas versiones también tenemos (con usuario administrador) la posibilidad de acceder a las carpetas de los demás cursos. De esta manera, no es necesario utilizar un FTP sino simplemente tener claro en qué curso se subió el archivo y buscarlo en el repositorio local, abriendo la carpeta del curso correspondiente.