lunes, 28 de julio de 2008

Imágenes con trasparencias

A pedido de un amigo que quería saber como hacer transparente el fondo de unas imágenes para usar en una presentación electrónica, le escribí los pasos básicos para lograrlo con Photoshop.

Veamos si sale una entrada basada en ese mail y agregándole los pasos equivalentes en Gimp.

1)- Abrir el archivo

Archivo / Abrir...

2)- Duplicar la capa

Suponemos que la imagen abierta tiene sólo una capa (la capa Fondo).
En caso contrario, abrimos la paleta Capas ([F7] en Photoshop | [Ctrl + L] en Gimp) y en el menú lateral elegimos Acoplar imagen (PS) o Menú de Capas / Aplanar la imagen (G).

Luego, vamos a duplicar la capa: Capa / Dulicar capa... [OK] (PS) o Capa / Duplicar la capa (G).

3)- Seleccionar y borrar las áreas que se desean que queden transparentes

Eliminamos la capa Fondo arrastrándola en la paleta Capas hasta el ícono de papelera.

Si se está usando Gimp, conviene ir a Capa / Transparencia / Añadir canal alfa... para asegurarnos que la capa soporte áreas transparentes. En Photoshop esto no es necesario, ya que todas las capas que no son la Fondo soportan transparencias.

Como generalmente es más fácil seleccionar el fondo, con la varita mágica (o la herramienta de selección más apropiada según la imagen que esté usando) y ayudados con la tecla Mayúsculas para sumar áreas a la selección, seleccionamos toda el área que deseamos que quede transparente. Luego, presionamos la tecla [Supr].

4)- Guardar el archivo en un formato gráfico apropiado.

El formato elegido puede ser .GIF o .PNG.

Si deseamos generar un archivo en formato GIF, primero debemos cambiar el modo de color a color indexado. Para ello, vamos a Imagen / Modo / Color indexado... [OK] (PS) o Imagen / Modo / Indexado... [Convertir] (G).
Luego, vamos a Archivo / Guardar como... y elegimos el formato GIF y el lugar donde deseamos guardar el archivo. Luego de dar [Guardar], nos pregunta si queremos que el archivo se guarde entrelazado (para que cuando se esté descargando la imagen por un navegador desde una página web, vaya mostrando las filas de píxeles a medida que estén disponibles. En caso de no marcar Entrelazado o Entrelazar..., la imagen no se muestra en el navegador hasta que se haya descargado completamente).

Si deseamos generar un archivo en formato PNG, simplemente vamos a Archivo / Guardar como... y elegimos el formato PNG y el lugar donde deseamos guardar el archivo. Normalmente este archivo va a ser más pesado que el formato GIF, pero esto se debe a que el formato PNG soporta tener más colores (puede tener mayor profundidad de punto o profundidad de color). Para hacer una comparación más "justa", convierta su imagen primero a color indexado y luego guarde como PNG. En la prueba que hice yo, las imágenes resultantes en ambos formatos gráficos pesaron lo mismo.

miércoles, 23 de julio de 2008

"Out of memory at line 202"

En uno de los sitios web que mantengo, y sin razón aparente, empezó a aparecer un problema: al utilizar los botones del menú horizontal de la página principal, aparecía un mensaje de alerta con el texto "Out of memory at line 202". Al darle Aceptar a este mensaje, a veces, luego de varios segundos, continuaba con la carga normal de la página solicitada y a veces se colgaba la página. Además, este problema se daba en Internet Explorer, pero no en Firefox donde la página se mostraba sin inconvenientes.

Hice una búsqueda de esta alerta en Google y sólo encontré mensajes de gente preguntando por el problema, pero no encontré respuestas.

Así que empecé a buscar por mi cuenta (además de molestar por mail y teléfono a algunos amigos para ver si tenían alguna idea).

Borré todo el contenido de la sección principal de la página (o sea, dejé el cabezal, el pie y las columnas laterales) y, así, el menú funcionó normalmente. Así que empezé a "sitiar" el problema. Seguí probando, y borré solamente las 5 animaciones Flash que había en la página. El problema también se solucionó.

Así que en los .swf parecía estar el problema. Fui insertando nuevamente los Flash de a uno por vez, y, mientras fuera UNO SOLO la página funcionaba, sin importar cúal de los archivos Flash fuera. Cuando colocaba dos o más, volvía el problema.

Aquí está el código de cómo tengo incluidos los archivos .swf en la página:

<script type="text/javascript" src="swfobject.js"></script>
<div align="center">
<div id="intro5">Texto alternativo</div>
<script type="text/javascript">
var so = new SWFObject("nombre_del_archivo.swf", "arriba_izquierda", "360", "400", "6", "#ffffff");
so.write("intro5");
</script></div>

(Nota: esta forma de incluir un archivo Flash en un HTML surge como respuesta al "Caso Eolas").

Para cada una de las 5 animaciones, este código lo repetía cambiando el texto alternativo, el nombre del id y el nombre del archivo (lo que se muestra en negrita en el código de arriba).

La solución definitiva llegó cuando borré la línea
<script type="text/javascript" src="swfobject.js"></script>
de todas las animaciones, excepto la primera.

La página sigue funcionando bien en Firefox y ahora funciona bien en IE7.
Supongo que el cambio de comportamiento (ya que hasta la semana pasada, con las 5 reiteraciones de esa línea de código, en el IE7 funcionaba bien) debe estar causado por algún parche o actualización del IE.
Aún no sé si en versiones anteriores de IE se verá bien (yo tengo una versión de IE6 para Linux, y en ella también se ve bien la página).

martes, 22 de julio de 2008

¿Qué puedo instalar en mi Linux?

Vi en Linux para todos una entrada que vinculaba con una lista de 100 aplicaciones GNU/Linux recomendadas.

Al primer golpe de vista, parece que tengo unas 25 de estas aplicaciones instaladas en mi sistema, así que me quedan varias por probar.

domingo, 20 de julio de 2008

Convertir videos alojados en internet a mpeg

Un amigo necesitaba bajar un video de YouTube y pasarlo a formato mpeg, y me solicitó ayuda para hacerlo.

Para este tipo de tareas, tengo instalado el PyTube Multimedia Converter, pero para el video en particular que quería bajar, me dio el mensaje de "Incompatible Link" y no lo procesó.

Así que me puse a buscar otro método y dí con una página que explicaba otro camino.
Básicamente los pasos son:

  1. Abrir en Firefox (debe tener activado el plugin de Flash) la página en la que esté alojado el video que desea descargar.
  2. Sin cerrar la pestaña de la página y luego de que se haya cargado todo el video, dirigirse al directorio /tmp y buscar los archivos *.flv o que comiencen con Flash. (Desde una terminal, se puede hacer escribiendo find /tmp -name "Flash*" para encontrar los archivos que empiecen con "Flash" o, si esto no devuelve ningún resultado, con find /tmp -name "*.flv" para encontrar achivos con la extensión .flv).
    Luego se copia el archivo encontrado al directorio deseado, por ejemplo para el escritorio, escribiendo: cp /tmp/nombre_del_archivo /home/tu_usuario/Desktop/nombre_del_archivo.
  3. Finalmente, para convertirlo a otro formato se puede utilizar el programa ffmpeg, escribiendo:
    cd /home/tu_usuario/Desktop
    ffmpeg -i nombre_del_archivo nombre_del_archivo.mpeg

Probé con estos pasos y funcionó.

sábado, 19 de julio de 2008

Con Gimp se puede...



...aunque, me parece que en este caso no es un tema de herramientas.

En el video vemos, desde cero, cómo hizo el artista utilizando Gimp para crear la ilustración que se ve a la derecha.

Más allá de que la interfaz del programa esté en japonés o algo así, da una buena idea de los pasos seguidos.

¿Será cuestión de probar?

Este video lo vi en Linuxine, recomendado por Ubuntu Life.

domingo, 13 de julio de 2008

Se me van las horas con las comillas...

¡Cuánto tiempo me hace perder esto de ser autodidacta de la programación web!.

Estaba necesitando un sistema de autentificación de usuarios para un sitio. Es cierto que en la web hay montones para bajar, adaptar y utilizar (por ejemplo, éste), pero quería hacerlo desde cero, para entender bien cómo funcionan.

Básicamente la idea era armar una base de datos con cuatro columnas: nombre, contraseña, correo y ayuda memoria. De forma que el usuario pudiera cambiar su contraseña cuando quisiera y que en ese momento se le solicitara una dirección de correo electrónico y un ayuda-memoria. En caso de que el usuario olvidara su cotraseña, podría solicitar que el sistema le enviara el ayuda-memoria a la dirección de correo guardados en la base de datos.

Hice la primera parte: el acceso al área restringida, y funcionó. Incluso le agregué la verificación de usuario por medio de una imagen (el conocido captcha).

Los problemas empezaron cuando comencé a armar la sección de cambio de contraseña.
Tuve varios problemas (no me reconocía la contraseña que estaba guardada en la BD, no guardaba la nueva contraseña, etc.), que, luego de muchos intentos, solucioné primero siguiendo las recomendaciones que encontré en un foro, que como está en inglés, a continuación traduzco libremente:

Hay algunos pasos simples que todo el mundo debería seguir cuando utiliza MySQL dentro de PHP:
  1. $connection = mysql_connect('host', 'user', 'pass') or die("Error with connect:".mysql_error()."");
  2. mysql_select_db('db_name', $connection) or die("Error with select: ".mysql_error()."");
  3. $query = "";(dentro de estas comillas es que va la consulta específica que se quiere hacer en lenguaje SQL).
  4. $result = mysql_query($query, $connection) or die("Error with query:".mysql_error()."");
Estos pasos nos proverán con información si algo marcha mal y, lo que es más importante, dónde marcha mal.

Al seguir estos pasos, como queda dicho, empecé a tener más pistas de qué estaba haciendo mal.

Luego, terminé de solucionar el problema inspirado en este otro foro, que en al final dice (traducción libre): Solucioné el problema: todo lo que tuve que hacer fue colocar comillas simples encerrando la variable.

¡Qué fácil que parece después que todo funciona! y ¡cuántas horas se pierden por culpa de unas mal colocadas o ausentes comillas!

Lo bueno es que para la próxima vez que necesite algo similar voy a adaptar el mismo código que ya escribí (aunque, sin duda, nuevos problemas aparecerán).

jueves, 10 de julio de 2008

Gestor de contraseñas

Además de los sitios que mantengo por mi trabajo, se juntaron otros de familiares y amigos, así que se me empezaron a sumar más y más usuarios y contraseñas.

Visitando, como siempre, Ubuntu Life, encontré una recomendación interesante (que a su vez lo había encontrado en Getdeb): KeePassX.

Bajé el paquete del sitio oficial y me dispuse a instalarlo. Cuando hice doble-clic en el archivo, Ubuntu me avisó que en los repositorios había una versión anterior. Así que cancelé la instalación (generalmente recomiendan la instalación desde los repositorios, para asegurarse las actualizaciones automáticas), abrí el Synaptic, busqué KeePass y apareció. Le di botón secundario y elegí Marcar para instalar y luego di Aplicar y listo.
Después de un rato probando para ver como funcionaba el nuevo programa, ya tengo guardadas algunas contraseñas.

miércoles, 9 de julio de 2008

¿Estás buscando íconos?

Necesitaba algunos íconos para un sitio web y encontré un sitio interesante: iconfinder.net ("icon search made easy", algo así como "la búsqueda de íconos se hace sencilla").
Lo más interesante del sitio, además de la calidad gráfica de los íconos, es que están disponibles bajo licencias Creative Commons, GPL o LGPL.

sábado, 5 de julio de 2008

IE4Linux (Internet Explorer para Linux)


Si diseñas páginas web desde Ubuntu (o cualquier otro linux), seguramente te vendría bien revisar cómo se va a ver tu diseño en el [no muy estándar] Microsoft Internet Explorer (ya que el 54% de los navegantes aún lo usa, según una estadística de junio de 2008 publicada en w3schools).

Para eso, primero necesitaremos tener instalado Wine (que se puede instalar fácilmente desde los repositorios de Ubuntu utilizando el Synaptic).

Luego, en una terminal, se escribe:
wget http://www.tatanka.com.br/ies4linux/downloads/ies4linux-latest.tar.gz
para descargar el programa comprimido.

Luego, para descomprimir el archivo descargado,se escribe:
tar zxvf ies4linux-latest.tar.gz
Seguidamente, hay que moverse a la nueva carpeta que se creó luego de la descompresión, escribiendo:
cd ies4linux-*
Y, finalmente, se ejecuta el archivo de instalación, escribiendo:
./ies4linux

Se abrirá la ventana que se ve a la derecha.
En ella se define que versión del IE se quiere instalar (5, 5.5 o 6), el idioma, si se desea instalar el plugin de Flash y si se desean instalar íconos en el escritorio y/o en el menú.

Accediendo al botón Advanced, se puede solicitar la instalación de la versión 7 del IE, pero, allí se muestra una advertencia que dice algo así: “Todas estas opciones están en estado beta. Úselas con cuidado. Visite la página tatanka.com.br/ies4linux/page/Beta para más información”.

Al dar Aceptar se empieza la descarga de varios archivos y demora algunos minutos. Inclusive, en caso de que se interrumpa la descarga, se puede retomar el proceso escribiendo nuevamente ./ies4linux en la terminal.
Luego de terminado el proceso, solo falta hacer doble clic en el nuevo ícono que aparece en el escritorio para tener Internet Explorer funcionando en el sistema.

Para más información, visite la página del proyecto IEs 4 Linux.

Rediseño para la apariencia de Gmail



Si quieres cambiar la apariencia de tu Gmail a algo similar a lo que se ve en la imagen, primero debes instalarte la extensión Stylish de Firefox, luego escribes en la barra de direcciones:
http://www.naverniouk.com/design/gmail/gmail.css
y finalmente vas al ícono de Stylish (a la derecha en la barra de estado de Firefox) y con clic secundario eliges Añadir archivo a Stylish... y en el campo Descripción escribes “Rediseño para Gmail” o algo por el estilo, y ¡listo!.

Esta sugerencia forma parte de una entrada publicada en Ubuntu Life.

[ ACTUALIZACIÓN del 21 de julio de 2008]

Ubuntu Life hace referencia a un sitio en el que comentan que está disponible la versión 2.0 de este rediseño.