lunes, 15 de septiembre de 2014

De Nano a Emacs, cambiando una resortera por una piedra filosofal.




Hace un tiempo ya que publique un articulo para empezar a usar Vim, en esta entrada y gracias a Jonathan Sandoval puedo tomar un articulo de su blog y adaptarlo para así traer ante ustedes una nueva herramienta, Emacs.

¿Qué es Emacs?
La GNU define a emacs como el editor extensible y [altamente] personalizable. Esta descripción podría perfectamente aplicarse a muchos otros editores si es que no se conoce de emacs, o nunca se ha trabajado en él.
Comenzaré por mencionar que Emacs fue desarrollador por Richard Stallman, un desarrollador de C y de Lisp, que llegó a ser usuario de máquinas Lisp, y emacs, en esencia, es una máquina virtual de Lisp enfocada a la implementación de un potente editor. Emacs es, por tanto, extensible en Emacs Lisp. La naturaleza altamente dinámica de [Emacs] Lisp, le permite modificar (y por tanto, personalizar) virtualmente cualquier parte Lisp. Esto lo diferencia de otros editores que, a pesar de poderse extender a través de otros lenguajes de programación, lo permiten de una manera muy limitada a lo que puede llegar a permitir emacs.
Si en su tutorial de Vim, Oscar llama a este editor un “cañón de neutrones” (lo que sea que esto quiera decir), Emacs vendría a ser algo así como la “piedra filosofal” de los editores de texto (manteniendo la proporción de las metáforas ;)).

Funcionalidades
Veamos entonces, qué se puede realizar con GNU Emacs:


  • Corrector ortográfico (hace uso del que venga instalado en el sistema, aspell o hunspell por ejemplo).
  • Autocompletado de texto.
  • Múltiples archivos pueden ser visibles al tiempo, dividiendo el marco de trabajo.
  • Resaltado de sintaxis, dependiendo del lenguaje de programación que se utilice. 
  • Deshacer, “rehacer” (para emacs, rehacer es una forma de “deshacer”. Esto es bastante poderoso, aunque sea diferente a los demás editores).
  • Emacs soporta una cantidad impresionante de lenguajes de programación y modos de resaltado. 
  • En su administrador de paquetes (SI, emacs tiene un administrador de paquetes al más puro estilo de apt-get o yum) es posible encontrar sintaxis tan exóticas como las de los archivos de configuración de Asterisk.
  • Extensible en Emacs Lisp. (Hay proyectos como Pymacs que permiten que emacs pueda ser extensible en Python).
  • Completado de comandos, palabras y uris de archivos. (Es posible instalar complementes como Ido y Helm, los cuales pueden funcionar juntos, que a su vez expanden enormemente las capacidades de autocompletado y búsqueda de emacs).
  • Compresión y descompresión de ficheros a la hora de ser editados. Puede también trabajar con ficheros cifrados a través de gpg. Soporte para múltiples codificaciones de ficheros, y conversión entre los mismos.
  • Historial de comandos ejecutados recientemente. 
  • Igualmente, es posible instalar extensiones que facilitan que recuerdan los comandos más utilizados. Grabación y reproducción de macros. (Las ediciones de código más complejas se pueden realizar en emacs lisp). 
  • Guardado de la configuración entre sesiones. 
  • Plegado (folding) de bloques de código. 
  • Interfaz gráfica opcional (e innecesaria y poco recomendada). 
  • Probablemente es el editor más configurable y personalizable que hay (alguien me indica uno más personalizable?.
  • Es capaz de emular a Vim con Evil, pero con la potencia de seguir en Emacs :).
  • Compilación y depuración desde el mismo editor. 
En esta lista traté de listar lo mismo que en el artículo de Vim fue listado. Ahora haré un breve repaso de características de Emacs que son únicamente fáciles gracias a su diseño altamente extensible: 
  • Cliente de correo electrónico (rmail, gnus).
  • Lector de noticias. Cliente de IRC (ERC). 
  • Organizador personal (org-mode). Esta es probablemente una de las extensiones más impresionantes que tiene emacs, y por las que muchos usuarios deciden iniciar la carrera de aprendizaje de este editor. Yo lo uso como mi agenda personal, administrador de proyectos, y ofrece, por ahí derecho, la posibilidad de editar textos complejos que pueden ser exportados a formatos como HTML, LaTeX (y por tanto, a PDF), texto, plano, entre otros. Con org-mode es posible realizar programación literata e investigación reproducible. 
  • Interfaces a las aplicaciones de control de revisiones con VC (subversion, git, bazaar, mercurial, etc.). 
  • Administrador de procesos (Proced). 
  • Administrador de archivos (Dired). Este modo es especialmente interesante para realizar ciertas operaciones con archivos. 
  • Administrador de paquetes (package.el).


Utilizando emacs

Dado que esta es una [no tan] corta introducción, solo indicaré el uso básico de emacs. A diferencia de Vim, que hace uso de distintos modos para trabajar, emacs utiliza complejas combinaciones de teclas con Control, Alt, y otras (yo por ejemplo tengo configurada la tecla Win). La convención es que C-x quiere decir control junto con x, y C-x a quiere decir, primero Control-x, y posteriormente solo la tecla a. Igualmente, Alt se denota con M- por lo que M-x quiere decir, Alt junto con la tecla x (M quiere decir Meta, y se refiere a una tecla que tenían viejos teclados). Para abrir emacs basta con ejecutar lo siguiente en la linea de comandos:
emacs
Una vez en el editor, pueden presionar C-x C-f para abrir o crear un nuevo archivo. Una vez realicen cambios, pueden presionar C-x C-s para guardar los cambios. Ahora, para salirse de emacs basta con que presionen C-x C-c .

Otros comandos

  • C-SPC (Control + la barra espaciadora). Inicia la selección de texto.
  • C-w : Cortar.
  • M-w : Copiar.
  • C-y : Pegar.
  • C-a : Va al principio de la linea.
  • C-k : Corta desde la ubicación del cursor hasta el final de la linea.
  • M-7 C-k : Corta siete veces la linea.
  • C-u 5 0 C-y : Pega cincuenta veces lo recientemente copiado.
  • TAB: Tabula la linea actual.
  • C-_ : Deshacer.
  • C-x o : Cambia a la siguiente ventana.
Espero que aprendan mucho de este articulo y si quieren profundizar en Emacs pueden ir directamente a el articulo de donde se extrajo la información.


Si te gusto el post
compartelo... :D

miércoles, 13 de agosto de 2014

Tutorial de Backbone.js (III)

En las entradas anteriores hablamos sobre las Vistas en Backbone.js y la interacción con el usuario, y en el primer post de esta serie hablamos sobre la capa de datos de Backbone.js, en esta oportunidad veremos como usar los enrutadores de Backbone.js en una aplicación para hacer el proceso de navegación.

Navegando en el portal
Una de las cosas que hacen de la web de hoy en día algo tan especial es la facilidad de encontrar mucha información agolpada en un solo lugar pero organizada de una manera jerárquica y lógica, justamente este es el caso en que los enrutadores de backbone brillan, pero para entenderlo veamos primero que es un enrutador.
Un enrutador (Router) es una herramienta que permite manejar los hashtags (#) de las URLs de la aplicación como disparadores de eventos. A continuación veamos un ejemplo:
<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "posts/:id": "getPost",
            "search/*search": "searchBook"
        }
    });
    var app_router = new AppRouter;
    app_router.on('route:getPost', function (id) {
        alert( "Obtener el número de post " + id );
    });
    app_router.on('route:searchBook', function (search) {
        alert( search );
    });
    Backbone.history.start();
</script>



Como vemos en el ejemplo se define la clase AppRouter, que hereda de la clase Router de Backbone y luego ésta se instancia, despues se utiliza el método on de la variable creada para definir que acciones ejecuta en que momento. El proceso de ruteo dinamico que realiza Backbone.js inicia cuando se invoca la accion start del objeto history de backbone en la linea 15.

Otra de las cosas que hacen interesantes los procesos de ruteo en Backbone.js es que cuando se definen las rutas se pueden extraer datos de las mismas que son pasados al callback como parametros, un ejemplo de esto es la ruta "posts/:id", la cual llama la funcion getPost con un parametro que sera extraido de la URL.

Otra de las herramientas es el uso de splats, que son expresiones que permiten tomar de un segmento de la URL y enviarlo como parametro al callback, un ejemplo de esto es la ruta "search/*search", que puede ser aplicado a la ruta "http://www.miserver.co/search/el-nombre-de-la-rosa", el cual invocara la función searchBook y enviara el parametro "el-nombre-de-la-rosa".

Teniendo en cuenta lo anterior podemos concluir que con la herramienta Router de Backbone.js es posible traer mucha información del servidor y mostrarla solo cuando sea necesario sintener que realizar más peticiones al servidor o haciendolas unicamente cuando se ejecuta un evento especifico, además de poder interactuar con datos extraidos de la URL.

Espero que les haya gustado el post.

Por favor
Comparte este post. 
:D

lunes, 4 de agosto de 2014

Tutorial de NodeJS I, llevando la potencia de V8 al servidor


Es verdad que hace algún tiempo Brendan Eich tuvo como labor crear un lenguaje que enriqueciera los navegadores y éste uso una poca de sus poderes magicos y entrego al mundo Javascript, tiempo después Google entrego al mundo de la mano de Lars Bak V8, una de las mejores maquinas virtuales que interpretan Javascript, y luego Ryan Dahl , un muchacho inquieto decidió portar V8 para que funcionara independientemente, y esto fue llamado Node.js.


Node.js es un entorno de programación para servidor basado en el lenguaje de programación Javascript, con I/O de datos en una arquitectura orientada a eventos y basado en el motor Javascript V8. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web.

Instalando NodeJS

El la pagina oficial del proyecto pueden descargar el instalador, para Windows y Mac es muy sencillo, solo basta bajar el instalador y ejecutarlo como se hace comúnmente en cada plataforma, para sistemas linux por otro lado es necesario descargar el código fuente, para instalarlo en distribuciones debian o basadas en debian debemos:

1. Descargar los fuentes
wget -c http://nodejs.org/dist/v0.10.30/node-v0.10.30.tar.gz
2. Instalar dependencias
apt-get install GCC make libssl-dev
3. descomprimir el paquete
tar -zxf node-v0.10.30.tar.gz
4. Entrar a la carpeta
cd node-v0.10.30
5. configurar
./configure
6. compilar (y tomar una buena tasa de café por que se toma su tiempo)
make
7. Instalar
sudo make install
Muy bien, esto deberia instalar nodejs y otra herramienta fabulosa llamada npm, la cual permite gestionar paquetes de nodejs y manejar dependencias, entonces para probar que se instalo correctamente ejecutamos:
node --version
npm --version
de esta manera tendremos las versiones de nodejs y npm respectiva mente.
Espero que esta primera parte sea util para ustedes.


Por favor
Comparte este post. 
:D

jueves, 3 de abril de 2014

SQLiteDbManager, una herramienta para SQLite3 en IOS


Desde hace un tiempo he estado trabajando en una librería para manejo de SQLite3 en IOS, ésta herramienta permite hacer operaciones con bases de datos de manera secuencial y no bloqueante para poder hacer consultas de la manera más simple, esta se llama SQLiteDBManager, pueden encontrarla en Github y esta disponible para la comunidad, está abierta a sugerencias y cambios pueden hacer un fork y mejorarla.

Espero que les sea de utilidad.

Por favor
Comparte este post.
:D

viernes, 21 de marzo de 2014

Tutorial de Backbone.js (II)


Backbone.js es una herramienta que permite separar el trabajo con datos, el trabajo de la capa visual y las acciones de navegación, lo cual hace de ésta una herramienta muy versátil a la hora de trabajar proyectos muy grandes. En la entrada anterior escribí acerca de la potencia de esta herramienta con respecto al manejo que le da a la capa de datos, en esta oportunidad veremos la manera en que se gestiona la interacción con el usuario mediante sus vistas.

Interacción con el usuario
Cuando hablamos de interacción con el usuario hacemos referencia explícita a a las vistas (Views) y a los Enrutadores (routers), en esta ocasión sólo hablaremos de las vistas. Las vistas en Backbone.js son elementos muy importantes puesto que son los encargados de presentar la información que llega del backend del servidor y permitir que los usuarios interactúen con ésta. Para esta labor se extiende la clase Backbone.View, veamos un ejemplo.

var ViewLibro = Backbone.View.extend({
    events:{
        "click a#delete" : "eliminar",
    },
    initialize : function () {
        this.template = _.template(
                 $('#templatelibro').html()
                 );
    },
    render : function() {
        var data = this.model.toJSON();
        var html = this.template(data);
        this.$el.append( html );
    },
    eliminar: function(e) {
        this.model.url = this.model.url+this.model.id;
        this.model.destroy();
        var libro = $(e.currentTarget).parent().parent();
        libro.remove();
        e.stopPropagation();
    }
});

Además hacemos unos pequeños cambios a la función listarLibros
function listarLibros () {
    $(".datos").html("")
    var coleccion_libros = new Libros();
    coleccion_libros.on("add", function(model){
        console.log("Agregado", model.toJSON());
        var vl = new ViewLibro({el:$("ul.datos"),model:model});
        vl.render();
    });
    var xhr = coleccion_libros.fetch()
    xhr.done(function () {
        console.log('Libros descargados...');
        var llibros = coleccion_libros.filter(function (model) {
            var libro = model.toJSON();
            return libro.nombre === "El Principito";
        });
        if(llibros.length==0){
            var libroNuevo = new Libro({
                "nombre":"El Principito",
                "editorial":"Panamericana",
                "genero":"Infantil",
                "autor":"1"
            });
            libroNuevo.save();
            libroNuevo.attributes.id = 1;
            coleccion_libros.add(libroNuevo);
        }
        console.log("0k");
    });

}

Y finalmente agregamos el template respectivo
<script type="text/template" id="templatelibro">
    <div id="libro-<%= id %>" class="libro">
        <strong>Nombre:</strong> <%= nombre %> <br/>
        <strong>Editorial:</strong> <%= editorial %><br/>
        <strong>Genero:</strong> <%= genero %><br/><br/>
        <div class="actions">
            <a href="#" id="delete">Eliminar Libro</a>
        </div>
    </div>
</script>
Muy bien, pero ¿Qué hace todo esto? Primero construimos la vista, para esto hacemos una clase que hereda de Backbone.View, esta tiene una serie de elementos que hacen posible toda la "magia" que hace internamente, el primero es el objeto events, el cual almacena el tipo de evento (por ejemplo click) y sobre que elemento del DOM se aplica, para esto usamos "." (punto) para especificar clases y y "#" para especificar los identificadores. Asociado a esto se encuentra el nombre del método que se ejecutará cuando el evento sea llevado a cabo.
Luego encontramos el método initialize, que inicializa la vista, adentro de este creamos el template de la vista, debemos tener en cuenta que el carácter "_" hace referencia a la librería Underscore.js, también creada por Jeremy Ashkenas, creador de Backbone.js, la cual tiene una serie de herramientas muy útiles y una de estas es un sistema de templates. Cabe aclarar que no es obligatorio usar el sistema de templates de underscore, su puede usar el que se desee (swig, mustache, etc).
Después encontramos el método render, que toma los datos del modelo y los renderiza con el template creado en el método initialize para finalmente mostrarlo al usuario en el lugar de destino, referido por la variable de clase $el.
Como último elemento de la vista encontramos el método eliminar, que actualiza la url del modelo, llama el método eliminar y retira el HTML asociado al modelo del DOM.

Dentro de la función listar libros encontramos que ya no creamos el código HTML necesario para incrustar en el DOM, en cambio creamos una instancia de la vista y la renderizamos y al crear en nuevo libro especificamos como atributo el id de ese nuevo objeto.

Finalmente esta el código del template asociado a la vista, notese que éste se guarda en un tag script de tipo text/template y tiene un identificador para poder recuperarlo con Javascript.