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)

  1. Podemos empezar por buscar el motivo de fondo: un paisaje en Wikimedia Commons, un arbolito de navidad, adornos, golosinas, etc.
  2. Una vez elegida esa imagen, agregamos una capa blanca o negra utilizando el menú Capa/Nueva capa.
  3. 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).
  4. Una vez que tenemos el texto, seleccionamos con la herramienta rectangular y lo copiamos en el porta papeles (Editar / Copiar) y lo ocultamos.

tarjeta con gimp copiar y ocultar capa

¡¡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:

  1. Elegimos la goma de borrar o borrador.
  2. 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)

Utilizar el portapapeles para borrar con formas diferentes

  1. Elegimos la capa blanca o negra como capa activa
  2. 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):

tarjeta gimp final1

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%.

Jarrita con opacidad 30%

 

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

¡Felices fiestas! Tarjeta de BETA Weblog

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

Felices fiestas, les desea BETA Weblog

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

La década posteada

Esta semana BETA Weblog cumplió nada menos que una década.

Más allá del orgullo que me da estar en un momento personal y profesional en que los logros se cuentan por lustros y décadas, puedo decir que gracias a este blog he tenido muchas satisfacciones.

Como regalito de cumpleaños, voy a hacer una selección de posts que significaron mucho para mí:

El más reconocido

Facebook, microbbloging, o sacar la silla a la vereda

A raíz de este post me hicieron un breve reportaje para La Nación On Line, vinculando mi post con una nota sobre la costumbre de sacar la silla a la vereda.

Nota en La Nación on line

 

Los que tienen más comentarios

1) Tren para todos – Obviamente, los comentarios son en su mayoría políticos y no exactamente coincidentes con mi enfoque del tema

2) Tener Moodle en una plataforma gratuita –  Esta entrada sí es específica del tema del blog, y muy útil para quienes quieren empezar a tener su plataforma sin invertir dinero inicialmente.

3) Cómo hacer que suene tu violín nuevo – Post que no tiene que ver con mi profesión pero sí con mi pasión por la música. Los comentarios son puros agradecimientos porque realmente es muy complicado hacer que suene el violín cuando uno lo acaba de comprar…

El más sentido

Después de la muerte de cientos de adolescentes en el incendio de “Cromagnon” y del accidente de tránsito que mató varios chicos del colegio “Ecos”, con mucho, mucho sufrimiento llegué a la conclusión de que hoy en día se mueren nuestros jóvenes porque la gente ahorra en medidas de seguridad. Es decir que aún existen sacrificios humanos, pero ahora para honrar a otra deidad: el dinero.

Sacrificio humano: alimentando a la deidad de la época

El primero

Y este es el primer post, el que inauguraba el blog colectivo BETA Weblog, en el que iban a participar cuatro personas más… evidentemente la idea de que fuera colectivo no prosperó porque rápidamente terminó siendo mi blog profesional.

primer_post

Hacer vanguardia

Hoy tengo el orgullo de haber alojado mi blog en el dominio semántico betaweblog.education

Y así, siento que llevo una década de innovaciones y de aportes a la cultura libre, a la educación y a mi propio diario personal.

¡Gracias a los lectores por estar ahí!

¡Ya diez años! (Gracias Ignacio Luppi)

El mensaje de Ignacio Luppi, de los primeros participantes de BETA Weblog, cuando era un blog colectivo:

Ya diez años !!! Y pensar que entrábamos en un mundo que venía de afuera “barriendo” todo lo conocido y algunos paradigmas de la educación y en especial el uso de tecnología en la escuela. Hoy la TIC forman parte de nuestra vida diaria, nos ayudan nos espían, y también nos hace mas burros y dependientes.
Un desafío para nuestra generación (los analógicos) es formar a los “nativos digitales” que creen que lo saben todo… Y si se rompe el mouse no saben cómo apagar una PC.
Felices 10 años de avances, aprendizajes, éxitos y fracasos de las nuevas tecnologías.

 

¡Gracias!

Lindos botones con CSS (II)

botones con fondo lindo
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…)

Rectángulo semi transparente

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

Botones lindos con CSSEn 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>

Utilizando el celular para controlar una presentación

Estuve probando algunas herramientas para manejar las presentaciones utilizando el celular*.

La que más me gustó fue Presentations Docs, que se utiliza de la siguiente manera:

  1. Se accede al enlace de Presentation Docs
  2. Se instala (allí mismo se indica cómo) la app para el celular

presentation2

  1. Escribimos el link de una presentación de Google Drive -por ejemplo- en Presentation Docs
  2. Vinculamos nuestro dispositivo leyendo el código QR utilizando el celular

Entrar a una presentación y vincular el celular

 

¡Listo! Tenemos nuestro control remoto en el celular:

El celular como control remoto

*Gracias a una publicación de Carlos Rodríguez en G+

Vivir en la nube (¡Otra vez lo hicieron!)

Las primeras páginas web eran textos con enlaces; vivíamos la popularización del hipertexto. Era sorprendente cómo un contenido te llevaba a otro según los antojos de la curiosidad (y después no te acordás desde dónde empezaste, claro…). Los usuarios comunes éramos lectores de hipertexto.

Hace unos años nos maravillábamos con la web 2.0. “¡Ahora todos podemos publicar contenido en la web sin necesidad de ser programadores o de saber HTML!”, “¡Ahora todos tenemos un espacio gratuito para subir nuestros videos, audios, páginas web!”. Todos comenzamos a ser comentadores, publicadores, autores de la web.

Sin embargo, la web 2.0 ya es pasado. A pasos cada vez más veloces y sorprendiéndonos cotidianamente, caímos (¡sí, caímos porque nos empujaron! ¡Otra vez nos cambiaron de paradigma sin que nos diéramos cuenta!) al paradigma “en la nube”.

¿Y cuál es la diferencia? 

La diferencia es la ubicuidad. Ya no dependemos de un solo dispositivo o de estar sentados frente a la PC de la oficina; miramos nuestros mails en el celular, la tablet, la netbook, o en una computadora prestada o alquilada.

Ya no escribimos un texto en un procesador de textos y después lo subimos. Podemos escribir en línea directamente utilizando Google DrivePero si necesitamos trabajar en nuestro paquete ofimático, no es necesario trabajar siempre en la misma computadora gracias a Dropbox. Estas herramientas se usan en la nube, y además están pensadas para el trabajo colaborativo. Podemos invitar a quienes decidamos a usarla, a ver, a escribir, a comentar, a chatear.

Google Keep nos permite tener lista de compras o de recordatorios varios, con alarmas que incluyen la posibilidad de avisarnos cuando estemos en determinada ubicación. Escribimos recordatorios en la PC o en el celular, y cuando vamos viajando en el colectivo de pronto el celular detecta que estamos en el barrio de Boedo y ¡Plimp! Alarma de ubicación: Comprar el regalo de cumpleaños de la sobrina.

Google Keep en la PC Pantalla del celular con Google Keep

Con los clásicos WordPress, Blogger o Google Sites publicamos contenido en línea sin necesidad de editarlo previamente en una computadora fija.

Para el aula, líneas de tiempo en línea, mapas conceptuales colaborativos, generadores de cómics, carteleras de corcho, presentaciones en línea y toda una lista infinita de herramientas que se utilizan on line y en forma colaborativa.

 

Por suerte, ya aprendimos a aprender. Aprendimos a cambiar de paradigma y me arriesgaría a decir… le tomamos el gustito a la innovación.

 

Proteger rangos para cada usuario en Google Drive

Google Drive nos ofrece un excelente conjunto de herramientas para trabajo colaborativo.

Crear una hoja de cálculo que puedan modificar un conjunto de personas que invitemos, es una solución maravillosa para el problema de las versiones de archivos y superposición de tareas.

Sin embargo, no todos los usuarios comprenden los límites de su trabajo en un documento compartido y a veces invaden lo que no deben tocar (adrede o no).

Por suerte en las hojas de cálculo de Google Drive se puede proteger un conjunto de celdas para que sólo determinados usuarios puedan modificarlo.

Voy a dar el siguiente ejemplo: en un equipo de trabajo se crea esta hoja de cálculo para que cada persona anote sus propios gastos. Pero para impedir que las otras personas modifiquen los gastos de Pepe, se protege ese rango utilizando el menú Datos, opción Hojas y rangos protegidos. Se le pone nombre al rango, se elige “Establecer permisos” y se indica qué usuario puede editar esa zona y cuál no.

Proteger un rango

 

El usuario verá las celdas que no puede editar con unas líneas diagonales, y se le mostrará un mensaje de error cuando intente escribir allí.

Celdas protegidas para ese usuario

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í”.

Agenda

 

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

Cómo elaborar un presupuesto

Muchas veces la gente me pregunta ¿”cuánto cobrarías para tal cosa”?

Saber cuánto cobrar es tan difícil que yo cobraría por responder esa pregunta. Todavía no encontré quien me pague por responderla, así que decidí compartir la respuesta en este post y responder con un link (¡Gratis!)

Entonces, voy a develar aquí mi secreto: ¿Cómo hago para calcular cuánto cobrar un trabajo? La fórmula está cuidadosamente trabajada durante años de trabajo freelance.

El primer paso es tener un “precio base”, que sería, cuánto ganaría por mes si yo trabajara haciendo lo mío en una empresa, 8 hs. por día, en blanco. Suponiendo que la respuesta sea (para facilitar las cuentas) $10.000, entonces, para hacer un trabajo freelance (no me pagan aguinaldo, no me pagan aportes, no me pagan rápido, no me garantizan estabilidad laboral, no me pagan si me enfermo), el precio base debe ser del doble. Mi precio base, para esta suposición, es de $20.000. Y eso implica un cálculo de $5000 para un trabajo que me lleve una semana completa de 8 hs por día, o $1000 para un trabajo que me lleva un día de 8 hs. o $500 para algo de medio día.

Y ahora viene el verdadero lío: sumar o restar costo al valor, de acuerdo al trabajo y a mi necesidad. Aquí algunos de los elementos fundamentales:

¿Tengo trabajo o necesito urgentemente un dinero? Si tengo trabajo (no necesito estrictamente este trabajo) puedo subir un 20% el precio base. Si necesito urgentemente generar algo de dinero, puedo bajar hasta un 20% el precio base, para asegurarme que el trabajo salga.

¿Conozco a la persona que me está convocando o apareció de la nada preguntando un presupuesto? (o sea, no sé si me va a pagar, ni siquiera sé si sabe de qué está hablando o si en realidad quiere algo diferente a lo que yo hago…) Si la conozco y sé que me va a pagar, mi precio no varía. Pero si no sé quién es, le cobraré más caro porque es altamente probable que tengamos una serie de idas y vueltas antes de empezar a entender de qué hablamos. Y le cobro un 30% por adelantado para no arriesgarme a no recibir nada.

¿El trabajo es muy grande y me va a impedir hacer otros trabajitos que habitualmente suelo hacer? Esto es fundamental, porque si el trabajo es muy grande y me llama un cliente habitual y le tengo que decir que no, mi cliente se va a buscar a otra persona para reemplazarme. Así que sólo lo tomaría si me pagaran una fortuna. Le sumo un 20% o más para que sea una fortuna lo que me paguen.

¿Entiendo claramente el trabajo o hay demasiadas cosas libradas al azar? Si lo entiendo y puedo calcular el tiempo, empiezo calculando el precio base. Pero si me dicen “quiero que me hagas esto” y me dibujan con lápiz un garabato en un papel, voy a presumir que “eso” es un trabajo de seis meses y ultra complejo. Porque no puedo arriesgarme a cobrar poco por algo que me cueste muchísimo.

¿Me gusta el trabajo? ¿Me muero de ganas de hacerlo porque es para una institución que me encantaría que figure en mi curriculum? ¿O es un trabajo odioso, tedioso, para un completo desconocido o alguien que al figurar en mi curriculum va a arruinarlo? Allí, otra variación de +/-20%.

-En el mail donde me piden el presupuesto: ¿Usan la palabra “urgente”? ¿Usan la frase “no encontramos a nadie que haga esto” o “pedimos varios presupuestos”? Otra vez. Si es urgente, es más caro (porque tendré que trabajar de noche, y de noche o fines de semana se cobra un 50% más). Si no hay otro, bueno, entonces pido muuuucha plata porque mis exclusivos saberes son inencontrables en otra persona. Si pidieron varios presupuestos, si en serio los pidieron, tendré que pensar en cuidar un poco el precio si quiero que me salga.

Y aquí volvemos a la primera pregunta: ¿Necesito este trabajo? ¿Sí? Bueno, le hago un descuento (explicitándolo en el presupuesto) de un 20 o un 30% si el presupuesto se aprueba en menos de 72 hs (¡Llame ya!). Es importante explicitarlo por si hay que negociar “si quieren tal cosa extra entonces ya no les hago el descuento”, o cosas similares. O si me van a recomendar, que no crean que mi precio es ese tan bajo. Ese es mi precio “trabajo esclavo”, exclusivo para Ud. sr cliente. Y aquí, para terminar, un aforismo de mi autoría:

“El valor exacto del presupuesto es ese que te haga trabajar sonriendo.” Iris Fernández