Installing an FTP Server on Ubuntu

I had been postponing this task for some time now thinking that it would be time consuming. However, it is actually pretty simple.

Since I did not know of any FTP server, I did a quick search:

aptitude search ftp

I got a bunch of results but I decided to try vsftp after seeing somewhere that it was the default daemon for linux. So I just ran

sudo apt-get install vsftpd

And that is it. I’m done.

I tested using fireftp on my other machine and it connects via ftp to the server. Now, this setup is just for an in-house server. If you plan on opening your ftp server to the outside world, you should read more about the matter, and read the man pages for vsftpd.

Also take a look at the configuration file located on /etc/vsftpd.conf

Some links that might be useful:

http://blog.dhavalparikh.co.in/2009/11/setting-up-ftp-or-sftp-server-using-vsftpd-on-ubuntu/
http://ubuntuforums.org/showthread.php?t=91887
https://duckduckgo.com/?q=ftp+server+linux
This last link is just a search results list. One one of those result previews is where I read that vsftpd is the default ftp daemon on linux, but the link, which points to http://www.scribd.com/doc/26706992/FTP-Server-in-Linux is unreadable.

Advertisements

QuickTip: Opening Files from Remote Server over FTP with Vim Using FireFTP

I use FireFTP for my daily FTP needs. It’s really nice, works great, has lots of flexibility and it integrates right into firefox; What else could I ask for?

I also use vim for my editing needs. Vim is powerful, flexible, and in my experience, the best text editor out there. However, until today,I opened files from remote servers using gEdit. When I first set up FireFTP I was still a gEdit user. Even today, I occasionally use gEdit, especially when I need to scan through large files.

Today I finally decided it was time to start opening files from remote servers on vim after finding myself using a lot of the vim commands on gEdit while editing remote files. It turns out setting files to open on vim in FireFTP is quite simple:

Simply open FireFTP.
On one of the panels, right-click on a file and go to Open With, and click on Add Programs…
On the window that appears, fill in the Name, Path, and Arguments text fields like this:

Name -> Vim
Path -> /usr/bin/terminator
Arguments -> -x vim %file%

I use terminator instead of the gnome terminal, but if you use terminal, then your path will be /usr/bin/gnome-terminal

That’s it.

Animación en Javascript parte 2: Recursividad

Actualización: el buen amigo panino5001 me ha hecho notar un grave error en mi código. A mi favor solo puedo decir que esto lo escribí ya muy entrada la madrugada. El problema es que en lugar de usar setTimeout, he usado setInterval y eso es malo por que agota la memoria del navegador si se usa como lo he usado aquí.

Continuando con esta serie de animación en Javascript, pongamos en práctica la función setTimeout de la cual hablamos en la introducción a esta serie de animación en Javascript.

setTimeout toma dos parámetros los cuales especifican; primero) la función a ejecutar, y segundo) el ” tiempo de espera” antes de ejecutar dicha función. Por ejemplo,

function myAlert(){
     alert('Hello There!');
}
var tO = setTimeout(myAlert, 400);

El tiempo (400) se especifica en milisegundos. Notarás que he guardado el valor de retorno de setTimeout en una variable (tO). No voy a entrar en detalle por ahora del porque hago esto, pero por el momento piensa que cada que llamas setTimeout (o setInterval) es buena idea guardar una referencia a dicha llamada en una variable por si acaso tengas que cancelar antes de que se ejecute la función.

Hasta ahora todo bien, pero tenemos un problema; la función myAlert se ejecuta solo una vez y jamás vuelve a ser ejecutada. Para enteder por que esto es un problema, hay que entender primero el modelo fundamental de las animaciones en javascript.

¿Como funcionan las animaciones en javascript?

Javascript usa lo que llamamos frames para hacer una animación. En realidad, una animación no es más que un conjunto de varios escenarios estáticos mostrados uno tras otro en un orden específico de modo que el resultado final parezca estar en movimiento. Hasta cierto grado, estas animaciones son una ilución.

Ahora, para poder lograr esta cadena de escenarios, es necesario que nuestra función se ejecute más de una vez, y es ahí donde está el problema con nuestro ejemplo anterior. Para solucionar dicho problema, les presento funciones recursivas.

Recursion en Javascript

Una función recursiva no es más que una función que dentro de si misma se llama a si misma. Veamos un ejemplo:

function recursiva(){
     console.log('recursiva');
     recursiva();
}
recursiva();
//No intenten esto, estan advertidos.

Si ejecutaras esa función y hecharas un vistazo a la consola de javascript, te darías cuenta que la palabra “recursiva” es imprimida indefinidamente una y otra vez. Esto es por que la función se está llamando a si misma y con cada llamada hace dos cosas. Primero imprime la palabra “recursiva” y luego vuelve a llamarse a si misma. Esto va a continuar por todo el tiempo que mantengamos la ventana del navegador abierta. Si esta función, en lugar de imprimir una palabra, cambiara la posición de un objeto, entonces el objeto jamás dejaría de moverse. Para lograr un efecto más real, necesitamos una manera de poder detenr la recursividad. Para esto podemos usar un contador que nos indique cuando tenemos que detener las llamadas a la función.

var contador = 0;
function recursiva(){
     console.log('recursiva');
     if(contador++ < 20){
          recursiva();
     }
}
recursiva();

De esta menera podemos controlar la cantidad de veces que se ejecuta la función. Podemos utilizar otro tipo de controlador para determinar si la función se llama nuevamente o no. Unos ejemplos que se me ocurren es determinar si la función se llamará nevamente en base a cuanto tiempo se ha estado ejecutando, en base a la pocisicón de cierto elemento, en base a las acciones del usuario, o en base a otras características de un elemento como tamaño u opacidad.

¿Y que hay de nuestro buen amigo setTimeout?

El papel de set timeout en todo esto es ayudarnos a mantener un balance apropiado en cuan seguido se llama la función responsable de la animación. Si tomaramos el ejemplo tal como lo hemos estado haciendo, y quicieramos aplicarlo a animación, pronto nos daríamos cuenta que el intervalo entre una llamada a la función y la siguiente es muy mínimo y no es lo apropiado por varias razones, de las cuales menciono dos importantes:

La primera es que las animaciones que se producen son exageradamente rápidas.

La segunda es que los recursos que se consumen son más altos ya que ni bien termina el navegador de renderizar un escenario cuando ya tiene que renderizar otro.

Para resolver este problema, ponemos un itervalo de tiempo entre las llamadas a la función:

var contador = 0;
 function recursiva(){
      console.log('recursiva');
      if(contador++ < 20){
          setTimeout( recursiva, 200);
      }
 }
 recursiva();

Por el momento esto es todo. Más adelante hablaremos de más problemas de desempeño como los dos que mencioné anteriormente y de como resolverlos. En nuestra siguiente entrega, ahora sí empezaremos a animar cosas.

Introducción a la animación con Javascript

Bueno, pues no recuerdo si he hablado de este tema anteriormente, pero por si las dudas, aquí va.

Voy a empezar esta serie sobre animación en javascript. Hay muchos lugares donde se puede aprender sobre el tema. El buen amigo Panino ha escrito unos tutoriales que valen la pena revisar. Y, aun que su material es excelente, aun siento la necesidad de tocar este tema, introducir nuevos conceptos y sobre todo explicarlo desde el principio para aquello que quieren aprender desde cero.

La base de todo.

Los navegadores no tienen un API para animaciones con javascript. No hay un método moveTo en la API del DOM, por el contrario, los desarrolladores debemos depender de temporizadores para lograr las animaciones.

Javascript, afortunadamente, cuenta con dos funciones que nos hacen la vida más fácil. Conoce a setTimeout y setInterval.

setTimeout toma dos parametros, uno es la función a ejecutar y el segundo es la cantidad de milisegundos que “esperaremos” antes de que la función sea ejecutada.

setTimeout(functiton(){alert('pasaron 200 ms');}, 200);

setInterval toma los mismos parametros, pero la función continuará ejecutandose indefinidamente cada x milisegundos donde x es la cantidad pasada como segundo parametro a la función.

setInterval(function(){alert('passaron 200 ms');}, 200); //No intenten esto en casa!

No vamos a tomar en cuenta setInterval ya que no es la mejor forma de hacer animaciones por razones de desempeño.

Una vez conocemos esto, podemos entrar de lleno. Pero por ahora esto es todo. Te invito a que juegues con setTimeout y setInterval para que en la proxima entrega de esta serie estés familiarizado con estas dos funciones que son la base fundamental de animaciones con javascript.

Lectura recomendada:

https://developer.mozilla.org/en/DOM/window.setTimeout

http://msdn.microsoft.com/en-us/library/ms536753%28v=VS.85%29.aspx

http://arguments.callee.info/2008/11/10/passing-arguments-to-settimeout-and-setinterval/

Activando mod_rewrite en apache. Ubuntu 11.4

Hace ya un tiempo escribí sobre como activar mod_rewrite en apache2. Esta vez lo voy a explicar nuevamente, pero con una diferencia crucial. El post anterior nos enseña como activar el módulo para apache2 compilado manualmente. Esta vez explico como activarlo para apache2 instalado desde repositorios, es decir usando apt-get, o algo similar, en contraste con compilar desde el código fuente.

Lo primero que vamos a hacer es abrir la consola (Terminal) y ponemos lo siguiente

sudo a2enmod rewrite

Esto nos va a crear un archivo en /etc/apache2/mods-enabled con una sola linea, la cual indica a apache que cargue el modulo rewrite. No se si sea posible simplemente crear este archivo a mano, pero por si las dudas, usen a2enmod.

La linea de comandos les dirá que reinicien apache para que los cambios surtan efecto, pero no lo hagan aun. Por el contrario, corran este comando:

sudo vim /etc/apache2/sites-available/default

Esto va a iniciar vim lilsto para editar el archivo defaul que se encuentra en la carpeta /etc/apache2/sites-available/ Si no se sienten agusto editando con vim, pueden usar su editor favorito como gedit.

Para gedit usen el comenado

gksudo gedit /etc/apache2/sites-available/default

Es importante correrlo con gksudo ya que el archivo no nos pertenece y necesitamos privilegios especiales para poder editarlo.

Una vez estemos listos para editar el archivo default, ya sea con vim, gedit o su editor preferido, buscamos la liena que dice

AllowOverride None

Hay varias, en mi caso con cambiar la primera bastó.

Cambiamos None por All de modo que nos quede
AllowOverride All

Guardamos el archivo y lo cerramos. Ahora si ya estamos listos para reiniciar apache. Para esto corremos el comando

sudo /etc/init.d/apache2 restart

Eso es todo, ahora deberías poder hacer redirecciones sin ningún problema.

 

Actualizando php y resolviendo errores con mysql.

Otra vez se llegó la hora de actualizar php. No tanto por que me preocupara que estuviera un poco atrasado, sino por que vanilla forms requiere que el driver pdo de mysql esté funcionando y en mi caso no lo estaba. Ya que para habilitado dicho driver era necesario volver a compilar php, pensé que sería buena idea actualizar php de una buena vez.

Lo primero que hice fue ir al sitio de php y descargar la versión mas nueva (5.3.6), descomprimir el archivo en mi Escritorio y proseguir con la configuración. Para ello hay que cambiar al directorio de php. En mi caso:

cd ~/Desktop/php-5.3.6
./configure [opciones de configuración]

Todo estaba bien hasta que la configuración fallo debido a un error:

Cannot find MySQL header files under yes. Note that the MySQL client library is not bundlCannot find MySQL header files under yes. Note that the MySQL client library is not bundled anymore!ed anymore!

Una búsqueda rápida rebeló que la solución era:

sudo apt-get install libmysqlclient-dev

fuente: http://ubuntuforums.org/showthread.php?t=637973

Una vez hecho eso, todo funcionó de maravilla. Justo ahora make está corriendo y parece que todo está bien.

Si estás pensando en actualizar php, asegúrate de correr phpinfo() primero para que puedas ver tu configuración anterior.Una vez corres la función phpinfo(), en la tabla que se genera, una de las primeras entradas es la configuración con la que la instalación de php que está corriendo fue compilada. Si quieres agregar nuevos módulos, como en mi caso, solo agrégalos junto con tu configuración anterior y de ese modo tu instalación estará como antes, más los nuevos módulos.

Mandando mails desde localhost (Apache Server + Ubuntu)

Hoy por fin me decidí arreglar el local server para poder mandar mails con php. Tenía ya un tiempo posponiendo ese arreglo, pero estoy trabajando en un proyecto que requiere que se envíen correos mediante php. El problema no es php, ya que nos ofrece una función para hacer esto. El problema es que el server generalmente no está configurado para hacer esto. Los pasos a continuación son para ubuntu 10.10, aun que podrían funcionar en otras versiones, y el servidor Apache y php, en mi caso compilados manualmente.

Lo primero que vamos a hacer es instalar postfix. Para esto hay que abrir el terminal y poner:

apt-get install postfix postfix-doc

Quizá tengas que correr el comando con sudo. En mi caso lo he hecho con sudo:

sudo apt-get install postfix postfix-doc

Al moomento de instalar postfix te va a pedir que lo configures. En mi caso yo escogí la opción internet site y de ahí solo le dí OK a todo hasta que terminó la configuración.

Una vez terminada la configuración, hay que decirle a php que use sendmail para enviar los correos.

Hay que abrir php.ini, en mi caso está en /usr/local/lib/php.ini

Este archivo lo podemos modificar de varias manera, pero a mi me gusta gedit:

gksudo gedit /usr/local/lib/php.ini

Ahí hay que localizar la linea que dice

;sendmail_path =

y hay que cambiarla por esto:

sendmail_path = /usr/sbin/sendmail -t -i

después de estoy hay que reiniciar postfix y apache:

sudo /etc/init.d/postfix restart
sudo /usr/local/apache2/bin/apachectl restart

la segunda linea puede que sea diferente en tu caso, todo depende de como instalaste apache.

Listo, ahora debes poder mandar correos desde tu local server. Inicialmente quise mandar correos a hotmail, pero no funcionó. Viendo el log de posfix me encuentro con esto:

Oct 24 14:58:56 imbuzu-laptop postfix/smtp[29662]: 10BF82AA07B: to=<mymailhere@hotmail.com>, relay=mx1.hotmail.com[65.55.37.88]:25, delay=12, delays=0.1/0.03/11/0.91, dsn=5.0.0, status=bounced (host mx1.hotmail.com[65.55.37.88] said: 550 DY-001 Unfortunately, messages from my.IP.here.oo weren’t sent. Please contact your Internet service provider. You can tell them that Hotmail does not relay dynamically-assigned IP ranges. You can also refer your provider to http://mail.live.com/mail/troubleshooting.aspx#errors. (in reply to MAIL FROM command))

 

Eso solo quiere decir que hotmail no acepta correos desde IPs dinámicas, si eres suertudo, tu ISP te ha asignado una IP estática, de otro modo, como yo, tienes una IP dinámica y correos a hotmail no van a llegar. En mi caso estoy usando Gmail que no pone peros.

Espero les sirva.

Para esto me fueron de ayuda los siguientes sitios:

http://serverfault.com/questions/142098/how-to-configure-my-local-server-to-send-email

https://help.ubuntu.com/8.04/serverguide/C/postfix.html (solo la parte del reconfigure. Inicialmente no configuré postfix)

Explicando <col />

Creo que poca gente sabe de la existencia de un elemento muy útil en HTML. Ese elemento es <col />, el cual sirve para asignar estilos a toda una columna en las tablas. Esto nos ahorra un montón de trabajo cuando queremos asignar estilos similares a una sola columna.

Consideremos el siguiente markup:

<table>
      <tr>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
     </tr>
     <tr>
           <td>Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
     <tr>
           <td>Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
</table>

Esto nos hace una tabla así:

Col 1 Col 2 Col 3
Col 1 Col 2 Col 3
Col 1 Col 2 Col 3

Ahora supongamos que queremos que toda la primer columna apareciera con un fondo de color diferente. Si somos como la mayoría de la gente, seguramente empezaríamos a poner una clase al primer elemento de cada tr:

<table>
      <tr>
          <td class="primerCol">Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
     </tr>
     <tr>
           <td class="primerCol">Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
     <tr>
           <td class="primerCol">Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
</table>

y luego en CSS haríamos lo siguiente:

.primerCol{
     background-color: olive;
}

Eso está bien, pero no es la forma más inteligente de hacerlo, ya que puede traer problemas cuando estemos editando nuestras tablas, además de que en una tabla gigante, con un montón de columnas,  donde cada columna tiene que tener sus propios estilos, hacer esto sería una pesadilla.  Es aquí donde el elemento <col /> entra en acción. Primero veamos el resultado que obtenemos con el código de arriba.

Col 1 Col 2 Col 3
Col 1 Col 2 Col 3
Col 1 Col 2 Col 3

Una mejor forma de hacerlo es usando <col />. Para usar col, tienes que tener un elemento col por cada columna en tu tabla, en este caso necesitamos tres elementos col:

<table>
      <col class="primerCol" />
      <col class="segCol" />
      <col class="terCol" />
      <tr>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
     </tr>
     <tr>
           <td>Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
     <tr>
           <td>Col 1</td>
           <td>Col 2</td>
           <td>Col 3</td>
      </tr>
</table>

Y aplicamos estilos diferentes para cada columna:

.primerCol{
     background-color: olive;
}

Y no tenemos que hacer nada más.

De esta manera es mucho más fácil controlar los estilos de las columnas. Hay algunas cosas interesantes acerca de los elementos col. Por ejemplo, si usas firebug, fíjate en la pestaña de HTML y pon tu mouse sobre alguno de los elementos col y verás que se ilumina la columna a la que dicho elemento hace referencia. Esto resulta muy útil en ocasiones. Otra cosa a tomar en cuenta es que no es necesario poner todos los elementos col. En nuestro caso, por ejemplo, solo necesitamos el primero ya que los otros dos no nos estás siendo útiles para nada.

Espero que les sea de utilidad la información. Conoces algún elemento que crees poca gente sabe de su existencia?

Com activar mod_rewrite en apache2 -ubuntu.

Si compilaste manualmente apache2, probablemente no configuraste el modulo rewrite, que es el que permite usar htaccess en tu servidor.Al menos esto me pasó a mi. Aclaro que las siguientes instrucciones son para aquellos que compilaron apache manualmente.

Haz una instalación cono comúnmente lo harías, pero al inicio, cuando haces el ./config agrega lo siguiente:
--enable-rewrite=share.
En mi caso solo estaba instalando ese modulo, por lo que la instalación se veía de este modo:

./configure --prefix=/usr/local/apache2 \
--enable-rewrite=share

Para ser sincero no se si es necesario poner las instrucciones en lineas separadas, pero a mi no me funcionó poniéndolas en la misma linea.
Después puedes proseguir con tu instlación normal.

Una vez tengas todo instalado, revisa que en /usr/local/apache2/modules/ tengas un archivo llamado mod_rewrite.so Si lo tienes, entonces todo ha salido bien. Ahora edita tu archivo de configuración, debe estar en /usr/local/apache2/conf/httpd.conf, agrega la siguiente linea:

LoadModule rewrite_module /usr/local/apache2/modules/mod_rewrite.so

y localiza la parte donde dice:

<Directory “/path/a/tus/archivos/”>
#
# Possible values for the Options directive are “None”, “All”,
# or any combination of:
# Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
#
# Note that “MultiViews” must be named *explicitly* — “Options All”
# doesn’t give it to you.
#
# The Options directive is both complicated and important. Please see
# http://httpd.apache.org/docs/2.2/mod/core.html#options
# for more information.
#
Options Indexes FollowSymLinks

#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be “All”, “None”, or any combination of the keywords:
# Options FileInfo AuthConfig Limit
#
#El valor original era None, lo cambio para usar .htaccess
AllowOverride None

#
# Controls who can get stuff from this server.
#
Order allow,deny
Allow from all

</Directory>

Fíjate la linea que dice AllowOverride None, cambia el None por All de modo que diga AllowOverride All
Inicia tu servidor y debería estar funcionando con soporte para htaccess.

Creando circulos con CSS.

Esto es solo una curiosidad que se me ocurrió ayer antes de dormir. Posiblemente ya se haya hecho antes, pero yo nunca he escuchado de ello. Se trata simplemente de crear círculos con CSS. No es nada del otro mundo, simplemente aprovechar un poco las características de CSS3, o en este caso mejor dicho, el ‘moz-border-radius que imita una característica de CSS3.

Creando un simple circulo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Buzu">
<meta name="date" content="2009-12-11T11:04:26-0800">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<style type="text/css">
 .circulo{
 border: 50px solid #ccc;
 -moz-border-radius: 60px;
 width: 15px;
 background-color: #CCC;
 height: 12px;
 }
</style>
</head>
<body>
 <p class="circulo"></p>
</body>

Como puedes ver, simplemente estamos aprovechando CSS y obtenemos un círculo. Naturalmente, esto solo funciona en firefox, pero puede ser adaptado de modo que funcione en la mayoría de los navegadores más populares. Ahora veamos si podemos hacer algo más con esos círculos:

Un mono de nieve:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Buzu">
<meta name="date" content="2009-12-11T11:29:47-0800">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<style type="text/css">
 .cabeza{
 border: 50px solid #ccc;
 position: absolute;
 -moz-border-radius: 60px;
 top: 20px;
 left: 300px;
 background-color: #CCC;
 }
 .cuerpo{
 border: 70px solid #ccc;
 position: absolute;
 top: 110px;
 left: 280px;
 -moz-border-radius: 80px;
 background-color: #CCC;
 }
 .ojo{
 border: 5px solid #000;
 position: absolute;
 top: 50px;
 background-color: #000;
 -moz-border-radius: 6px;
 }
 .izquierdo{
 left: 330px;
 }
 .derecho{
 left: 360px;
 }
 .voca{
 border-bottom: 10px solid #F00;
 position: absolute;
 top: 80px;
 -moz-border-radius: 20px;
 width: 10px;
 left: 345px;
 }
</style>
</head>
<body>
 <p class="cabeza"></p>
 <p class="cuerpo"></p>
 <p class="ojo derecho"></p>
 <p class="ojo izquierdo"></p>
 <p class="voca"></p>
</body>
</html>

Podríamos incluso agregar un poco de javascript y hacer transiciones de cuadro a circulo o a otras formas, las posibilidades son muchas. A ti que se te ocurre?