Peppermint 3

Después de un tiempo trabajando en mis proyectos de desarrollo web sobre Ubuntu 12.10 Remix, he decidido cambiarlo. La verdad es que me fastidié de los constantes anuncios de error, así que me hice un pequeño espacio en el disco, una partición de 8 Gb y me puse a instalar distros para probar el proceso de instalación y como se comportaban. Probé con Crunchbang, Manjaro y un par más.

La que más me gustó y con la que de hecho sustituí definitivamente Ubuntu 12.10 Remix (lo extraño :(, de verdad es muy bonito y cómodo, lástima que aún sea tan inestable) fue una llamada Peppermint 3.

Mi escritorio Peppermint 3, un tanto personalizado

Peppermint 3 es una distro basada en Ubuntu 12.04, con escritorio LXDE por defecto. Casi no trae aplicaciones preinstaladas de las que uno está acostumbrado, porque al parecer está pensada para trabajar con aplicaciones online.

Trae preinstaldo el Chromium y un acceso en el panel a Gmail Offline y a Google Drive. Trae el GWoffice que es una aplicación basada en Google Chrome que se conecta con tu cuenta Google y te permite editar documentos de texto, hojas de cálculo y presentaciones, todo online.

Además ofrece una aplicaciones llamada Pixlr, que es una especie de Photoshop simplificado, también online. Me gustó, no es la gran cosa pero funciona bastante cómodo para retoques simples.

Luego pude instalar las otras aplicaciones que uso normalmente sin el menor problema. LAMPP, Netbeans, Skype, Gimp, Mozzila Firefox.

Como hacer que alguna aplicaciones se ejecuten desde el inicio de sesión?

Es muy fácil en esta distro, no era como se explicaba en otros manuales para LXDE.

1. Colocas las aplicaciones que necesitas en el escritorio, ahí estarán más accesibles: en el menú, haces click con botón derecho (secundario) sobre el ícono de la aplicación y eliges la opción "Agregar al Escritorio".
2. Abres el gestor de Archivos "File Manager" y con botón derecho eliges la opción "Mostrar Ocultos"
3. Abre la carpeta llamada "Escritorio", selecciona y copia los accesos a los programas que te interesan. En mi caso escogí Skype y Pidgin, porque me gusta estar conectado con mi círculo de amigos y mi familia.
4. Busca y abre la carpeta ".config" y luego "autostart". La ubicación será entonces /home/USUARIO/.config/autostart
5. Pega los accesos que copiaste del escritorio.
6. Elimina los accesos del escritorio si no los quieres tener allí

LISTO!!! Ahora puedes reiniciar y estas aplicaciones estarán ejecutándose desde el inicio.

Cómo cambiar la ruta de mi base de datos MySQL

Ya hace algún tiempo que diseño web en Linux, no es más que por gusto porque la mayoría de las herramientas que acostumbro a usar están disponibles igual para Windows.

Yo uso NETBEANS como IDE (luego en otro post  les comento las ventajas que he visto en este IDE), además empleo como servidor local de pruebas XAMPP en Windows y LAMPP para Linux, ambas versiones del mismo pack.

El caso es que necesitaba hacer que las bases de datos de mis proyectos estuvieran igualmente disponibles para Windows como para Linux.

HOY LO LOGRÉ!!!!

De hecho, de esta forma también logre que la ubicación de mis bases de datos esté en un lugar independiente de las dos plataformas, de modo que a la hora de una reinstalación no pierdo nada ni tengo que estar exportando e importando nada.

PRIMERO EN WINDOWS
Tras la instalación de XAMPP, la ruta por defecto de las bases es c:\xampp\mysql\data, puede ser que si usas otra versión la ruta sea otra, pero en todos los casos la ruta estará indicada en el archivo my.ini.

PASO 1: Detener MySQL.
Normalmente se instalará junto con el XAMPP un panel de control, allí puedes detener el servicio MySQL. Otra forma de hacerlo es buscando el archivo xampp_stop que seguramente estará en la carpeta c:/xampp.

PASO 2: Crea una nueva carpeta para las bases de datos
Yo tengo mi disco particionado en tres, una partición para Windows y los programas, otra partición para Linux y otra, la más grande, para los archivos. Eso me permite tener independientes los datos.
Creas una carpeta en la partición de datos. En mi caso quedó en D:\mysql.

PASO 3: Cambiar la ruta de en my.ini
Este archivo se encuentra en c:\xampp\mysql\bin\my.ini, pero si no lo encuentras allí por ser tu versión distinta, simplemente usa el buscador de Windows.
En este archivo hay que modificar la línea que dice "datadir = c:\xampp\mysql\data" y sustituir la ruta por la de la carpeta recién creada. En mi caso quedó así: "datadir = d:\mysql".

PASO 4: Mudar los datos de lugar
Ahora se copian todos los archivos que instala por defecto el XAMPP de la carpeta c:\xampp\mysql\data a la nueva ubicación.

Listo! ya se pueden crear o importar las bases de datos. Verás que todo se guardará sin problema en la nueva ubicación. No olvides reiniciar el XAMPP ejecutando c:\xampp\xampp_start o desde el panel de control de XAMPP.

AHORA EN LINUX
Yo actualmente uso UBUNTU 12.10 Remix, pero hasta ahora en cualquiera de las versiones anteriores, al menos de Ubuntu, ha sido igual.

Toma en cuenta que debes procurar tener instalada la misma versión de XAMPP en Linux. Veamos como se hace en Linux:

PASO 1: Detener MySQL
En linux XAMPP se instala normalmente en /opt/lampp, así que para detener todo el servidor puede usar esta orden desde el terminal:
sudo /opt/lampp/lampp stop

PASO 2: Verificar que la partición se monte desde el arranque
En mi Ubuntu uso la herramienta de Discos para hacer que el disco D:\ (la partición NTFS donde tengo los archivos) se monte desde el inicio. Eso crea una carpeta en /mnt/ o en /media/ es importante que sea así, porque al iniciar el XAMPP en linux, los archivos de las bases de datos deben estar disponibles.


PASO 3: Crear enlaces simbólicos.
Es muy simple, lo primero es abrir el explorador de archivos como administrador, en el terminal:
sudo nautilus (si usas Nautilus, obviamente)



Luego simplemente entra en la carpeta donde están las bases de datos y arrastra la carpeta completa hasta /opt/var/mysql manteniendo pulsada la tecla ALT, esto te permitirá ver las opciones, de las cuales debes escoger "crear un link". Este mismo paso debe repetirse para todas las carpetas de tus bases de datos.

Importante: Hay carpetas y archivos en esa ubicación que NO nos interesan. Sólo hay que hacer enlaces simbólicos a las que corresponden a nuestras bases de datos.

Listo! reinicia el XAMPP desde el terminal:
sudo /opt/lampp/lampp start

Si todo está bien deberás poder acceder a tus bases de datos desde Linux y desde Windows de manera indiferente, y todos los cambios que hagas en un lado, los tendrás hechos en el otro.

Ahora a seguir con tus pruebas en ambos sistemas.

Espero que les sirva, espero también sus comentarios y contribuciones por si se me pasó algún detalle, así como las dudas relacionadas con el tema.

Menú desplegable con AJAX

Vamos a mostrar un interesante menú desplegable hecho con la técnica AJAX, y como construirlo paso a paso. Debo advertir que quizás se requiere de conocimientos básicos de programación y en especial, algo de programación en ambiente Web.
Necesitaremos los siguientes elementos:

1. Base de datos: Usaremos MySQL como SMBD y, para este ejemplo tendremos una tabla cargada con un listado de ciudades
2. Un script PHP que capture los datos de la base de datos según el parámetro enviado.
3. Una Página Receptora de los resultados, en la que colocaremos la zona para mostrarlos. Además esta misma enviará la solicitud de los datos que necesita mostrar.

Veamos como será el resultado esperado. Solo comience a escribir un nombre en el campo de texto indicado. Al escribir las 3 primeras letras aparecerá un listado de los nombre en los que se encuentren estas. Por favor, intente escribir "mar..."

Nombre

Id

Documento

Paso 1. Empezamos construyendo la página donde se desencadenan todos los eventos. En nuestro ejemplo usaremos lo siguiente:

<html>
  <head>
    <title>Menu desplegable con AJAX</title>
  </head>
  <body>
    <div style="float:left;width:80px;">Nombre</div>
      <div style="float:left; width:220px;">
        <input type="text" style="width:200px;" name="nom" id="nom" value="" />
      </div>
      <div style="float:left; width:130px;">
        Id <input type="text" style="width:90px;" name="id" id="id" value="" />
      </div>
      <div style="float:left; width:190px;">
         Documento <input type="text" style="width:90px;" name="cid" id="cid" value="" />
      </div>
  </body>
</html>

Paso 2. Desarrollamos los elementos básicos para que AJAX funcione. Primero la función para crear instancias del objeto XMLHTTPRequest. En el post AJAX para principiantes - 2 encontraremos mas detalles acerca de este tema.

function nuevoAjax(){
var ajax;
  if (window.XMLHttpRequest) { // codigo para IE7+, Firefox, Chrome, Opera, Safari
    ajax=new XMLHttpRequest();
  } else { // codigo para IE6, IE5
    ajax=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return ajax;
}

Paso 3. Crearemos el archivo php que se conectará a la base de datos para sacar de ella lo que necesitamos. A este archivo lo llamaremos array_listado.php, luego lo veremos mencionado en el proceso de captura de datos con Ajax en el paso 4.

<?php
$hostname = "localhost";
$database = "my_database";
$username = "my_username";
$password = "my_password";
$conexion = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(), E_USER_ERROR);

mysql_select_db($database, $conexion);
$sql_query = "SELECT * FROM clientes";
$cliData = mysql_query($sql_query, $conexion) or die(mysql_error());
$cliCount = mysql_num_rows($cliData);
  if ($cliCount>0) {
      $cli = mysql_fetch_assoc($cliData);
      $k = 0;
      do {
          echo $cli['id']."~".$cli['cli_nombre']."~".$cli['cli_cid']."--\n";
      } while ($cli = mysql_fetch_assoc($cliData));
  }
?>

Paso 4. Ahora crearemos una función con la que cargaremos en nuestra página un listado de nombre, id y documentos (para nuestro ejemplo).

var listado = new Array();
function cargar_array_listado() {
  var ajaxL = nuevoAjax();
  ajaxL.open("GET", "array_listado.php", true);
  ajaxL.onreadystatechange=function() {
    if (ajaxL.readyState==4) {
       var tabla = ajaxL.responseText;
       var registros = tabla.split("--");
       for (var u in registro) {
          datos = registro[u].split("~");
          listado[u]= new Object();
          listado[u]['id']=datos[0];
          listado[u]['nom']=datos[1];
          listado[u]['cid']=datos[2];
       }
     }
  }
  ajaxL.send(null);
}

Podemos darnos cuenta de que:

• A través de la función open del objeto Ajax, ejecutamos en el servidor el archivo array_listado.php. 
• Usando el método responseText del objeto Ajax, capturamos la respuesta del servidor como texto plano. Este contenido será una serie de registros separados por el doble guion "--", donde cada dato estará separado por el símbolo "~". Obviamente podemos usar el método responseXML, para lo cual deberíamos haber configurado nuestra respuesta del archivo array_listado.php como datos en formato XML.
• Considerando que tenemos una respuesta en formato de texto plano, hacemos uso de la función split de JavaScript para obtener cada dato y construir la matriz de datos que necesitamos.

Paso 5. Agregaremos algunas funciones que nos ayudarán a que nuestra escritura en el campo de texto de como resultado que se despliegue un listado con los nombres que coincidan en cualquier parte con nuestra escritura.

function teclear(evt,campo){
    if (campo.value.length == 0) {
      if ((evt.keyCode == 9)||(evt.keyCode == 13)) {
      clear();
      }
    } else if ((campo.value.length > 0)&&(campo.value.length < 3)) {
       document.getElementById('selector').innerHTML = "";
       if ((evt.keyCode == 9)||(evt.keyCode == 13)) { // tab o enter
          clear();
       }
    } else {
       if ((evt.keyCode > 47)&&(evt.keyCode < 91)){ // cualquier letra o numero
          autoCompletar(campo);
       }
       if ((evt.keyCode == 37)||(evt.keyCode == 38)) { // flecha hacia arriba o hacia atras
          if (document.getElementById('sel').selectedIndex > 0) {
             document.getElementById('sel').selectedIndex = (document.getElementById('sel').selectedIndex)-1;
             campo.value =     document.getElementById('sel').options[document.getElementById('sel').selectedIndex].text
          }
       }
       if ((evt.keyCode == 39)||(evt.keyCode == 40)) { // flecha hacia abajo o hacia delante
            if (document.getElementById('sel').selectedIndex < (document.getElementById('sel').length-1)) {
                document.getElementById('sel').selectedIndex = (document.getElementById('sel').selectedIndex)+1;
                campo.value = document.getElementById('sel').options[document.getElementById('sel').selectedIndex].text
            }
        }
        if ((evt.keyCode == 9)||(evt.keyCode == 13)) { // tab o enter
            if (document.getElementById('sel').selectedIndex != -1) {
                var idsel = document.getElementById('sel').options[document.getElementById('sel').selectedIndex].value;
                document.getElementById('id').value = idsel;
                look(idsel);
                document.getElementById('selector').innerHTML = "";
                document.getElementById('cid').focus();
            } else {
                 document.getElementById('selector').innerHTML = "";
                 clear();
            }
        }
    }
    return false;
}

function autoCompletar(field) {
// crear selector
    var lista = "";
    var cuent = 0;
    var ubica = 0;
    var selecto = "";
    for (var k=0; k < listado.length; k++) {
        ubica = listado[k].name.toUpperCase().indexOf(field.value.toUpperCase());
        if ((ubica == 0)||(listado[k].name.toUpperCase().charCodeAt(ubica-1)==32)) {
           selecto += "<option value='" + listado[k].code + "' >" + listado[k].name + "</option>\n";
           cuent++;
        }
     }
     lista = "<select style=\"width:200px;\" name=\"sel\" id=\"sel\" onfocus = \"document.getElementById('nom').focus()\" onclick = \"document.getElementById('nom').value = this.options[this.selectedIndex].text\">\n" + selecto + "</select>\n";

// mostrar selector
    if (cuent == 0) {
        document.getElementById('selector').innerHTML = "";
        document.getElementById('re_id').value = 0;
    } else {
        document.getElementById('selector').innerHTML = lista;
        document.getElementById('sel').setAttribute('size',cuent+1);
        document.getElementById('sel').selectedIndex = -1;
    }
}

function clear() {
  document.getElementById('id').value = 0;
  document.getElementById('cid').value = '';
  document.getElementById('nom').value = '';
  document.getElementById('nom').focus();
}

function look(id) {
    for (var k=0; k<listado.length; k++) {
        if (listado[k].code == id){
            document.getElementById('cid').value = listado[k].cid;
            document.getElementById('nom').value = listado[k].name;
        }
    }
}

Paso 6. Finalmente, agregamos un par de detalles al campo de texto nombre, para que se desencadenen las funciones programadas para los eventos onFocus y onKeyUp

<input id="nom" name="nom" onfocus="cargar_array_listado();" onkeyup="teclear(event,this);" style="width: 200px;" type="text" value="" />

onFocus: Al recibir el enfoque, la matriz de datos se recargará con la lista actualizada de clientes, por lo que en un entorno multiusuario se podrán tener siempre los datos actualizados.
onKeyUp: Al soltar la pulsación de una tecla, se desencadenará la función que despliega el listado de nombres coincidentes. Igualmente en esta misma función se encuentran inmersos los procesos de selección de la lista y carga de datos del nombre seleccionado.

Por favor, no olviden comentar sus ideas para mejorar este artilugio.