Blog

Refresco Automático de un Div Cada X Segundos con jQuery
Tanto si desarrollas una aplicación web en la que se muestra una colección de datos dinámica, que se actualiza cada poco tiempo, como si quieres que el contenido de una parte de tu web se actualice o refresque periódicamente, aquí tienes una solución a tu problema utilizando jQuery.

En las antiguas webs, sobre todo en la de noticias o periódicos, cada cierto tiempo se refrescaba todo su contenido, actualizando la página completa. Para eso utilizamos el tag Meta refresh de HTML. Lo que hace es refrescar la página o frame cada cierto tiempo. Para ello, entre los tags <HEAD></HEAD> de la página incluíamos el siguiente código:
```
<meta http-equiv="refresh" content="5">
```
Lo que hace es refrescar todo el contenido de la página cada 5 segundos. Este comportamiento está desaconsejado por el World Wide Web Consortium (W3C) ya que puede desorientar al usuario.

Durante el desarrollo de una aplicación web, necesitábamos que una tabla de datos (utilizábamos displaytag, de la que ya os he hablado anteriormente) se actualizara cada cierto tiempo, definido por el usuario), debido a que el estado de los datos mostrados en esta displaytag tenían un comportamiento bastante dinámico y cambiante.

Para ello me creé en la página un div con id salastatus y éste contenía otro div con id resulttable que contenía la displaytag y algún control más que deseaba actualizar, a continuación introduje el siguiente código que se ejecuta tras la carga de la página:
```
 $(document).ready(function(){
   var refreshId = setInterval(refrescarTablaEstadoSala, 30000);
   $.ajaxSetup({ cache: false });
 });
```
Lo que hace el código es, cada 30 segundos (el valor del parámetro va en milisegundos), se ejecuta la función javascript refrescarTablaEstadoSala. Comentaros que aquí para simplificar he indicado el número de milisegundos de forma directa, pero realmente lo enviaba el servidor, a partir de los datos de configuración del usuario.

A continuación muestro el contenido de la función refrescarTablaEstadoSala:
```
function refrescarTablaEstadoSala() {
  $("#rolling").toggle();
  $("#salastatus").css('opacity', 0.4);
  $("#salastatus").load('estadoSala.do?randval='+ Math.random() + " #resulttable", function(){
      //aquí puedes meter más código si necesitas;
      $("#salastatus").css('opacity', 1);
      $("#rolling").toggle();
  });
}
```
Lo primero que hago es mostrar un icono de cargando cuyo id es «rolling» ( $(«#rolling»).toggle(); ) y pongo la capa que quiero actualizar transparente ( $(«salastatus»).css(‘opacity’, 0.4); ), totalmente operativa, pero el usuario ya detecta que ha comenzado una actualización. A continuación mediante el método load, de la que ya os hablé en esta publicación anterior, realizo una petición de la página con un número aleatorio como parámetro (para que el navegador no me devuelva la página de caché) seguido de un espacio y el div que quiero cargar en salastatus precedido de un #. Tras la carga, oculto el icono cargando y quito la transparecia a la capa. Antes de esto puedes completar la función con el código que necesites o el tratamiento de errores que desees.

No olvides incluir el enlace al fichero js de jquery o no te funcionará. Cómo ves una solución bastante elegante de resolver el problema ocasionado con el meta refresh y su manera, mucho más intrusiva de refrescar la página.
9 agosto, 2012
Cuándo Adquirir una Licencia Comercial de MySQL
A raíz de la publicación del post sobre la instalación de un servidor LAMP en Ubuntu, apareció un comentario en el mismo en el que el autor me solicitaba información acerca de si es obligatorio comprar una licencia comercial de MySQL al instalar en un cliente el sistema Ubuntu junto con este servidor.

MySQL tiene licencia dual. ¿Qué quiere decir esto? Por una parte es libre, y por otra es comercial. Puedes obtener el software de MySQL bajo licencia GPL (v.2) o puedes comprar una licencia. Está muy extendida la sensación de que si ganas dinero con MySQL hay que comprar una licencia comercial. Esto no es correcto del todo.

MySQL se distribuye bajo la licencia GPL, no es una licencia fácil de entender, por esto mismo MySQL confunde a muchos desarrolladores. ¿Hay que pagar para poder vender un producto que funciona con MySQL? Únicamente se requiere una licencia comercial en estos dos escenarios:
1. Si queremos modificar el código de MySQL y queremos redistribuir estas modificaciones cobrando por ellas.
2. Si queremos incluir MySQL dentro de nuestro software como uno solo. Hay que tener en cuenta que no significa que no podamos conectarnos con MySQL, si no que no podemos incluirlo en nuestro software. Por ejemplo, WordPress trabaja con PHP y se conecta a MySQL, pero no lo distribuye.
Muy importante. Si quieres incluir MySQL dentro de tu software y distribuirlo conjuntamente y no deseas comprar una licencia comercial, puedes hacerlo, pero tu software deberá estar licenciado de la misma forma, acogiéndote a la licencia GPL y liberar el código.

O sea, para cualquier otra cosa, no necesitamos una licencia comercial. Las siguientes cosas están permitidas bajo la licencia GPL:
- Gestionar un negocio que te reporte beneficios usando MySQL
- Modificar su código fuente como se desee.
- Vender y distribuir MySQL (hay que hacerlo bajo licencia GPL también).
- Redistribuir las modificaciones realizadas.
Otros puntos importantes que la licencia no obliga:
- No requiere redistribuir las modificaciones realizadas a MySQL
- No requiere de una licencia GPL del software que se conecta a MySQL
- No obliga a que todo el software en su empresa también sea GPL
Para aclarar las ideas acerca de la licencia GPL, puedes consultar las FAQ de la licencia. Cómo observaréis todo software libre puede no ser gratis, dependiendo de la licencia bajo la que se acoja. El motor de base de datos PostgreSQL, por ejemplo, es otra alternativa para entornos de producción que se distribuye bajo su propia licencia, muy similar a la licencia MIT y mucho menos restrictiva que la GPL.
18 julio, 2012
Placeholder en Internet Explorer
Placeholder es un atributo HTML5 utilizado como una pequeña pista o descripción corta del valor esperado en un campo de texto dentro de un formulario, como por ejemplo «Buscar», «Introduzca su e-mail», etc. Esta descripción se muestra dentro de la caja de texto cuando éste se encuentra vacío y desaparece cuando el elemento obtiene el foco.

Cómo hemos dicho se encuentra disponible desde la versión de HTML5 y su uso se encuentra bastante extendido en aplicaciones y páginas a lo largo y ancho de Internet. Funciona en los campos input de tipo: text, search, url, tel, email y password. Es soportado por todos los navegadores (Firefox, Opera, Chrome, Safari, etc.), pero existe un problema si quieres utilizarlo con Internet Explorer (de momento ninguna versión lo soporta).

Navegando por la web en busca de una solución para aplicar a uno de los proyectos en los que trabajo, cuya interfaz debe ser similar en todos los navegadores, encontré ésta que usa jQuery. jQuery es una librería javascript, que siempre es aplicable a multitud de problemas y usos, para alterar el comportamiento y visualización de los documentos web en navegadores, así como realizar peticiones asíncronas (ajax), y de la que ya os he hablado en otros artículos.

Podemos usar el siguiente código:
```
$(function() {
    if(!$.support.placeholder) {

            var active = document.activeElement;

            $(':text').focus(function () {
                    if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                            $(this).val('').removeClass('hasPlaceholder');
                    }

            }).blur(function () {
                    if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                    }
            });

            $(':text').blur();
            $(active).focus();

            $('form').submit(function () {
                    $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
            });

    }
});
```
Y este podría ser el css con el estilo, ya que el color de la letra del placeholder aparecería en un tono más grisáceo, como difuminado:
```
.hasPlaceholder { color: #777; } 
```
Lo que hace el código es sobreescribir el evento focus (posicionas el foco) y blur (el foco abandona el elemento) para elementos de tipo texto, en aquellos navegadores que no soportan el atributo placeholder, vamos en IE. Cuando se producen dichos eventos, leen el texto del atributo placeholder y lo muestran como valor del elemento (blur) aplicando la clase hasplaceholder, o bien borran el valor del campo (focus) y eliminan la clase hasplaceholder del campo de texto.

También se sobreescribe el evento submit, para borrar todos los valores de los campos de texto que muestran el texto placeholder, justo antes de enviar el formulario al servidor evitando que esos campos tengan valores incorrectos.

Se trata de una solución bastante elegante y nada intrusiva, porque sólo se aplica si el navegador no soporta el atributo. En caso de utilizar placeholder con Firefox, Safari, Chrome… el código jQuery no tiene efecto.
13 junio, 2012
Instalar un servidor LAMP en Ubuntu (y II)
En el anterior post vimos cómo instalar todos los módulos del servidor LAMP, así como la configuración y puesta en marcha del servidor Apache. En éste veremos cómo activar el módulo PHP y la configuración de la BBDD MySQL.

PHP

Para habilitar el módulo PHP teclearemos:
```
sudo a2enmod php5
```
En Linux nos pedirá introducir la contraseña de administrador. Una vez introducida se activará el módulo, y para que los cambios tengan efecto, debemos reiniciar Apache tecleando lo siguiente en línea de comandos:
```
sudo service apache2 restart
```
Al habilitar el módulo, internamente esto crea un enlace simbólico /etc/apache2/mods-enabled/php5 apuntando a /etc/apache2/mods-availble/php5.

Para comprobar la correcta instalación del módulo podemos hacer lo siguiente: En el directorio que habíamos habilitado como directorio de publicación (por defecto es /var/www y en la primera parte del artículo lo modificamos para que fuera /home/user/public_html el Document Root) creamos un fichero que llamaremos test.php con permisos de lectura, con esta única línea de código:
```
<?php phpinfo();?>
```
En un navegador tecleamos http://localhost/test.php en la barra de direcciones. Si puedes ver una descripción de la configuración de PHP5, el módulo está instalado correctamente.

MySQL

En el caso de que vayamos a acceder a la base de datos desde otros ordenadores de la red debemos especificar su dirección IP asociada. Debes observar que esto plantea un problema de seguridad, pues podrá ser accedida desde cualquier ordenador. Por lo tanto, si no necesitas acceder fuera de tu entorno local, pasa al paso siguiente.

Teclea:
```
nano /etc/mysql/my.cnf
```
y cambia la línea:
```
bind-address           = localhost
```
por la línea en la que especificas tu dirección IP (si es dinámica puedes comentar la línea):
```
bind-address           = 192.168.1.20
```
En el proceso de instalación se nos pidió una contraseña para el usuario ROOT de mySQL. Si no lo hicimos podemos hacerlo tecleando:
```
mysql -u root
```
y en la consola de mySQL tecleamos:
```
mysql> SET PASSWORD FOR 'root'@'localhost'
       = PASSWORD('yourpassword');
```
Debes tener en cuenta que todos los comandos mySQL pueden ocupar varias líneas en consola pero siempre deben acabar con punto y coma. Terminado este proceso o si ya habíamos especificado una contraseña podemos conectar de la manera:
```
mysql -u root -p
```
Si olvidaste la contraseña del usuario ROOT visita el siguiente enlace para recuperarla. Resetear contraseña ROOT mySQL.

Crear una base de datos
```
mysql> CREATE DATABASE database1;
```
Para comenzar a trabajar con la base de datos creada tecleamos:
```
mysql> USE database1;
```
A partir de aquí podemos crear tablas, insertar registros, etc. sobre la base de datos elegida.

Crear un usuario de mySQL

Para crear un usuario con todos los privilegios:
```
mysql> GRANT ALL PRIVILEGES ON *.* TO 'yourusername'@'localhost'
IDENTIFIED BY 'yourpassword' WITH GRANT OPTION;
```
Y para crear un usuario con privilegios limitados que sólo pueda acceder a la base de datos creada (por ejemplo database1):
```
mysql> GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX,
ALTER, CREATE TEMPORARY TABLES, LOCK TABLES ON database1.*
TO 'yourusername'@'localhost' IDENTIFIED BY 'yourpassword';
```
Para salir de la línea de comandos mySQL teclea:
```
mysql> \q
```
Todas estas tareas puedes realizarlas con una herramienta visual como MySQL Workbench para database architects, desarrolladores, y DBAs.

MySQL Workbench provee herramientas para diseñar el modelo de datos, desarrollo SQL, y herramientas de administración más amigables para la configuración del servidor, administrador de usuarios y mucho más. MySQL Workbench está disponible para Windows, Linux y Mac OS. Puedes descargarlo aquí.
23 abril, 2012
Instalar un servidor LAMP (Linux-Apache-MySQL-PHP) en Ubuntu (I)
Para instalar y configurar un servidor web y ejecutar un sitio o aplicación web en local, tienes que instalar un servidor LAMP o WAMP, sobre todo si tu sitio web es dinámico y utilizas o vas a utilizar una Base de Datos. Si eres usuario de Linux debes instalar un servidor LAMP, que es el acrónimo de Linux-Apache-MySQL-PHP. Si eres usuario Windows instalarás un servidor WAMP. A continuación veremos como instalarlo y configurarlo en Linux. En mi caso uso la distribución Ubuntu 11.10.

Primero instalamos tasksell y el servidor LAMP:
```
sudo apt-get install tasksel
```
```
sudo tasksel install lamp-server
```
Instalar Apache 2

Con los siguientes comandos arrancamos, paramos y reiniciamos el servidor Apache, respectivamente:
```
sudo /etc/init.d/apache2 start
```
```
sudo /etc/init.d/apache2 stop
```
```
sudo /etc/init.d/apache2 restart
```
Una vez arrancado podemos probar la instalación tecleando la URL http://localhost en un navegador. Si aparece el mensaje «It Works!» que es el contenido del fichero html /var/www/index.html, todo funciona correctamente.

Si obtenemos un error acerca de que no se puede obtener un nombre de dominio o algo relacionado con este tema, debemos crear un nuevo fichero con el nombre fqdn en la ruta /etc/apache2/conf.d/. En él debemos añadir «ServerName localhost«. Podemos editar el fichero con el siguiente comando:
```
sudo nano /etc/apache2/conf.d/fqdn
```
Virtual Hosts

En Apache2 existen los llamados sites, que son configuraciones de ficheros que Apache2 lee de forma separada. Están disponibles en /etc/apache2/sites-available. Por defecto únicamente existe un site llamado default que es el que visualizamos cuando tecleamos http://localhost o http://127.0.0.1. Puedes tener diferentes configuraciones disponibles de sites y activar sólo las que necesites.

Ahora vamos a crear un site nuevo y lo habilitaremos en Apache 2:
1. Primero copiamos el website por defecto como punto de partida: sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/mysite
2. Editamos el nuevo fichero de configuración en un editor de texto. Por ejemplo: gksudo gedit /etc/apache2/sites-available/mysite
3. Cambiamos en el mismo el Document Root para apuntar a la nueva ruta. Por ejemplo, /home/user/public_html/
4. Cambiamos la directiva Directory para que apunte al nuevo directorio. <Directory /home/user/public_html/>
5. Puedes establecer logs diferentes para cada site. Para ello, cambia las directivas ErrorLog y CustomLog. Si tienes varios sites, esto puede ser de bastante ayuda.
6. Guarda el fichero.
Una vez que hemos seguido los pasos anteriores debemos desactivar el site antiguo y activar el nuevo. Ubuntu provee dos pequeñas utilidades para esto: a2ensite para activar, y a2dissite para desactivar.
```
sudo a2dissite default && sudo a2ensite mysite
```
Para finalizar, debemos reiniciar Apache.
```
sudo /etc/init.d/apache2 restart
```
Si no existiera el directorio /home/user/public_html/ obtendríamos un mensaje de aviso.

Para probar que todo funciona correctamente creamos un fichero en /home/user/public_html llamado index.html con el siguiente código y tecleamos la URL http://localhost en un navegador:
```
<html><body><b>Hola! Esto funciona correctamente!</b></body></html>
```
En un próximo post veremos como configurar el módulo PHP de la instalación y la Base de Datos mySQL.

ACTUALIZACIÓN: Si te interesó el artículo puedes leer la segunda parte del mismo: Instalar un servidor LAMP en Ubuntu (y II).
19 marzo, 2012