VIM - Personalización y Adiciones

Después de cierto tiempo usando VIM como mi editor de texto me ha parecido conveniente crear un artículo para aquellos que estén dispuestos a experimentar un poco con este editor. Y para otros con recursos limitados en una máquina en que el usar nuestro IDE favorito puede resultar tedioso o bien solo les interesa aprender al usar VIM, este artículo puede resultarles de interés.

El gran potencial de vim reside en la posibilidad de extender su funcionalidad o bien el uso correcto de las funcionalidades que ya integra. Para cada tipo de necesidad existe una funcionalidad o un complemento que puede satisfacerla. Así pues, podemos pasar de nuestro aburrido y simple editor a un IDE bastante completo que trabaja en la linea de comandos.

Veremos como pasar de un uso simple del este potente editor, a uno que integra características de un IDE, como explorador de archivos, explorador de código, listado de archivos recientes, múltiples pestañas, resultados de búsqueda, linea de comandos integrada, temas de colores, reconocimiento de sintaxis, auto-completado, división de espacio de la ventana y más.

Funcionalidad Integrada

Aunque en las versiones que he conocido VIM cuenta con opciones para integración con el ratón, este es un editor en que suele usarse el teclado como principal o único medio de entrada. Así que la mayoría de la información que encuentren estará orientada al uso del teclado, esto lo hace que si pretendemos usarlo como IDE veremos que tendremos que deberemos acostumbrarnos un poco más al uso del teclado.

Vim es un editor modal, lo que significa que se puede trabajar en diferentes modos para realizar una tarea determinada. Para ver en qué modo se encuentra Vim se debe de tener activada la opción showmode. Pueden obtener más información acerca de los modos y algunas características leyendo la Wiki - Vim (http://es.wikipedia.org/wiki/Vim).

La verdad es que no hay mejor manera de iniciar que experimentar nosotros mismos con el editor así que les dejare algunos enlaces donde podrán encontrar información para su iniciación con vim.

Vim, el editor de texto (http://tuxfiles.wordpress.com/2012/01/17/vim-el-editor-de-texto/) es un post para que inicien con el manejo elemental del editor. Acá se muestran algunos de las operaciones elementales, como navegar (h,j,k,l), insertar (i), reemplazar (r), borrar (d,dd), copiar (y,yy), agregar nuevas linea antes (o, O) y después de la posición actual, búsqueda y reemplazo dentro de un archivo.

Notaran que algunos de los comandos tienen versiones cortas que pueden usarse con una linea mediante la repetició del comando (yy, dd, cc) por ejemplo copiar borrar y cortar.

Graphical vi-vim Cheat Sheet and Tutorial (http://www.viemu.com/a_vi_vim_graphical_cheat_sheet_tutorial.html) acá encontraran una guía visual de iniciación con vim las imágenes suelen ayudar mucho.

Finalmente esta guía de referencia rápida que pueden imprimir les sera de mucha utilidad mientras memorizan los comandos básicos. Todo está bien explicado, es una guía de referencia muy clara. Una vez dominado lo elemental pueden tener la sensación de que ya están quedando algo limitados pero verán que este editor tiene aun mucho que ofrecerles.

Yo siento cada vez más que este editor tiene una o varias soluciones a las necesidades que se me presentan en el camino, algunas de las cosas que verán adelante las he descubierto por mi cuenta, otras por lo que me preguntan algunos compañeros que quieren iniciar con vim, cosas que luego termino usando. Lejos de pretender ser una extensa guía quiero que se animen a continuar descubriendo su potencial por cuenta propia.

Es molesto tener que abrir múltiples ventanas de la terminal para editar múltiples archivos a la vez, pueden hacer esto con vim usando tabs. Con el siguiente comando pueden abrir múltiples archivos en pestañas separadas.

vim -p file1 file2 file3

Una ves dentro del editor, descubrirán la forma de listar, navegar, mover y buscar una pestaña en particular.

tabs, tabedit, tabnew, tabm, tablist

moverse entre pestañas puede parecerles un misterio pero pueden usar tabfirst, tablast, tabnext, tabprevious en modo comandos para ir a la primer, ultima, siguiente y anteriores pestañas. También pueden usar las combinaciones gt, gT, gt + tab_number  para ir a la siguiente y anterior o bien una pestaña especifica.

Luego de las pestañas podemos aprender a dividir la ventana actual en múltiples partes de forma vertical u horizontal, esto puede resultar de utilidad si contamos con espacio suficiente y queremos inspeccionar múltiples archivos o el mismo archivo en diferentes puntos. Por acá les dejo un enlace a un artículo muy bueno que trata de ello. [Vim Splits: A Guide to Doing Exactly What You Want](http://technotales.wordpress.com/2010/04/29/vim-splits-a-guide-to-doing-exactly-what-you-want/)

La búsqueda a través de múltiples archivos es algo que es frecuente realizar en proyectos con un numero considerable de archivos fuente. Podemos hacer esto con los comandos vimgrep y cw combinados.

:vimgrep /busqueda/j ./directorio/**/*.tipoarchivo | cw

esto realiza una búsqueda en todos los archivos de un tipo dado dentro de un directorio específico y muestra los resultados en un split en la parte inferior pueden obtener mas información sobre estos comandos usado la ayuda del VIM seguramente encontraran muchas opciones útiles.

Extensiones útiles

Ademas de la funcionalidad integrada VIM dispone de una gran cantidad de extensiones útiles de las que podemos hacer uso para facilitar nuestro trabajo. Hablaremos de algunas cosas que todos debemos tener a mano un explorador de archivos, explorador de etiquetas, lista de tareas historial de archivos recientes, entre otros.

Most Recently Used (MRU) files: esta extensión permite llevar un historial de los archivos accedidos que se despliega en una ventana temporal y nos permite desplegar el archivo seleccionado en la ventana actual, una pestaña o división nueva. Es posible personalizar la longitud de la lista, el tipo de archivos a incluir o excluir, el cierre automático del la ventana auxiliar y otras.

Tag List: este complemento permite explorar de forma eficiente el código fuente de archivos de diferentes lenguajes de programación. En el manual de este complemento [Tag List Manual](http://vim-taglist.sourceforge.net/manual.html) seguramente encontraran muchas opciones para personalizarlo a su gusto.

NERDTree and tabs: [NERD tree](https://github.com/scrooloose/nerdtree/blob/master/doc/NERD_tree.txt) permite explorar el sistema de archivos, el cual se muestra en forma de un árbol, y abrir archivos o directorios por medio del teclado o ratón, además permitir realizar acciones básicas sobre el sistema de archivos. [NERD Tree Tabs](https://github.com/jistr/vim-nerdtree-tabs) permite convertir el explorador de archivos en un verdadero panel independiente de la pestaña y mantener sincronizado el árbol a través de las pestañas.

Existen muchos otros complementos para completado, GIT, terminal, libro de notas, gestión de sesiones, comentarios. Con algo de curiosidad y un archivo .vimrc pueden ir "enchulando" su VIM y convertirlo en un verdadero IDE con una ligereza sin igual.

Un toque personal

Ahora nos falta darle un toque personal a nuestro editor con algunos temas de colores, es posible crear sus propios esquemas de colores. Pero para aquellos que nos hemos aventurado en ello no tendremos que crear uno, podemos elegir entre los muchos esquemas disponibles.

 

 

Ya sea de la pagina oficial de VIM ORG

[vim.org](http://www.vim.org/scripts/script_search_results.php?&script_type=color%20scheme&order_by=rating&show_me=20&result_ptr=0)

O bien desde este repositorio en que pueden encontrar muchos esquemas de colores.

[Vim colorschemes](https://github.com/flazz/vim-colorschemes)

Espero que este post les sea de utilidad y los insto a utilizar VIM como su editor e IDE, y que "sean uno con su código".

Código PHP usando ArgoUML

ArgoUML es una aplicación de diagramado de UML escrita en Java y publicada bajo la Licencia BSD. Dado que es una aplicación Java, está disponible en cualquier plataforma soportada por Java. ArgoUML no es solo una herramienta de modelado de uso libre; sino también un proyecto de desarrollo de código abierto en que estamos invitados a participar.

PHP es uno de los lenguajes más usado y extendidos para la programación web. En las versiones más recientes del lenguajes y desde la versión 4 se vienen agregando y mejorado en el lenguaje, un conjunto de características que lo convierten ya en en un lenguaje orientado a objetos. De modo que ya es posible modelar nuestras aplicaciones y programas en PHP usando UML como lenguaje de modelado.


Tenemos varias razones para modelar nuestro software entre ellas:

• Proveer una representación consistente en todo el ciclo de vida.
• Mejor interacción entre el usuario/analista/diseñador.
• Poder evaluar el impacto de cambios conceptuales y estructurales en nuestro software.
• Agilizar el las labores de programación en etapas iniciales dado que permite abordar problemas complejos y simples mediante una representación universal.

Interfaz de usuario

Interfaz de ArgoUML

La interfaz se encuentra distribuida de la forma en que varios modeladores e IDE's  se encuentran organizados.

1. Barra de menús y herramientas en la parte superior.
2. Un explorador del proyecto y los modelos a la izquierda, que permite organizar los elementos en distintas perspectivas.
3. En el centro el área de diseño e inmediatamente sobre esta un barra de herramientas con los objetos permitidos en el diagrama.
4. La sección inferior corresponde  a las propiedades del objeto seleccionado.

Dado que uds. mismos pueden explorar la interfaz de esta herramienta podemos centrarnos en su uso y en su aplicación al desarrollo con PHP mediante un ejemplo practico.

El caso de estudio

La aplicación deberá manejar clientes (se guarda su nombre, dirección, teléfono y e-mail), que pueden realizar pedidos p de productos, de los cuales se anota la cantidad en stock. Un cliente puede tener una o varias cuentas para el pago de los pedidos. Cada cuenta está asociada a una tarjeta de crédito, y tiene una cierta cantidad disponible de dinero, que el cliente debe aumentar periódicamente para poder realizar nuevos pedidos.

Un cliente puede empezar a realizar un pedido sólo si tiene alguna cuenta con dinero disponible. Al realizar un pedido, un cliente puede agruparlos en pedidos simples o compuestos. Los pedidos simples están asociados a una sola cuenta de pago y (por restricciones en la distribución) contienen un máximo de 20 unidades del mismo o distinto tipo de producto. A su vez, un pedido compuesto contiene dos o más pedidos, que pueden ser simples o compuestos. Como es de esperar, el sistema debe garantizar que todos los pedidos simples que componen un pedido compuesto se paguen con cuentas del mismo cliente. Además, sólo es posible realizar peticiones de productos en stock.

Existe una clase (de la cual debe haber una única instancia en la aplicación) responsable del cobro, orden de distribución y confirmación de los pedidos. El cobro de los pedidos se hace una vez al día, y el proceso consiste en comprobar todos los pedidos pendientes de cobro, y cobrarlos de la cuenta de pago correspondiente. Si una cuenta no tiene suficiente dinero, el pedido se rechaza (si es parte de un pedido compuesto, se rechaza el pedido entero). Una vez que el pedido está listo para servirse, se ordena su distribución, y una vez entregado, pasa a estar confirmado.

Solución

(Los colores usados se basan en la definición de arquetipos)


Explorando algunas características

ArgoUML tiene varios conjuntos de criticas de diseño que pueden ayudarnos a mejorar nuestros modelos y software. en el menú contextual de los elementos podemos ver las criticas que son aplicables así como la gravedad de las mismas.
También es posible ver la cantidad total de criticas por grado de prioridad.

Podemos documentar cualquier elemento, además de ser muy útil nos permitirá mantener un código bien documentado y que pueda ser entendido por otros, y utilizar estos comentarios para generar documentación de referencia con programas como phpDocumentor.

Es posible explorar el código de un elemento en diferentes lenguajes soportados

Generando el código y actualizando nuestro modelo

La generación de código es unas de las características que más me agrada de este modelador. Me permite crear rápidamente
crear las definiciones básicas de las clases y otros elementos, que luego puedo especificar con mayor detalle de acuerdo a las necesidades. Todo sin perdida de código al actualizar mi modelo.

Simplemente debemos seleccionar las clases y los lenguajes para los que generaremos el código así como la ruta de destino y estamos listos para continuar programado en cuanto generamos el código. Entre los lenguajes soportados están PHP 4 y 5, Java y C++.

En el código generado tendremos un archivo por cada elemento, también se generaran los paquetes o directorios en caso que hayamos agrupado en paquetes los elementos de nuestro modelo.

Se siguen las buenas prácticas de nombrado para los archivos. Esto resulta conveniente sobre todo cuando tenemos una gran cantidad de elementos (clases, paquetes, interfaces y otros) que nos resultaría difícil recordar lo que contienen labor que resultaría aun más engorrosa para otros que necesiten revisar nuestro código.

El código generado integra los comentarios y demás elementos informativos que hayamos incluido algunos de estos pueden configurarse a nivel global, de proyecto o del elemento de diseño.

Algunas herramientas útiles para programar y modelar

En mi labor como analista y programador he tenido la oportunidad de trabajar con algunas herramientas que pueden resultarles de utilidad a alguno de ustedes. Cada herramienta tiene lo suyo y regularmente tiendo a utilizar varias de ellas en aspectos diferentes desde modelado, pasando por bases de datos, hasta codificación.

Entornos de desarrollo integrados 

  

Eclipse: Es un entono integrado de desarrollo, basado en java y con versiones en la mayoría de los sistemas operativos usado actualmente, se han desarrollado una gran cantidad de herramientas para este entorno. Entre los recursos de que dispone y que he utilizado se encuentran:

• PHP Development Tools - excelente para desarrollo de aplicaciones usando php, tiene asistencia para creación y chequeo del código, un excelente explorado de proyectos, facilita documentar tu código y mucho mas.
• Modelador de base de datos Clay - la versión gratuita de esta herramienta es increíble, hace ingeniería inversa, permite tener una vista logica yla física, genera script con varias opciones útiles como comentarios, forma de declaración de llaves e indices, para casi cualquier gestor de base de datos que tenga un driver jdbc.
• ERMaster - es una excelente para el diseño de bases de datos, soporta varias notaciones, permite generar documentación de nuestro modelo. Permite crear vistas o regiones en el modelo y visualizar solamente esa perspectiva, además navegar por la demas perspectivas mediante pestañas.
• Data Tools - esta herramienta es excelente para el desarrollo y depuración de base de datos. Puedes complementar o utilizar alternativamente SQLExplorer o Quantum.
• Editores XML - facilita muchísimo explorar y construir documentos xml, dtd y estilos xsl.
  

Lo mejor de eclipse es que es un entorno integrado, y tienes todo al alcance de la mano en un solo entorno. El soporte que tiene para java lo lo hace el mas grande rival de NetBeans.

NetBeans: Entorno de desarrollo integrado muy bueno, el único inconveniente es el uso excesivo de memoria es lo que me consta, para desarrollo java y de interfaz gráfica en java.


Modelado de software

ArgoUML: Para modelar sistemas y aplicaciones ArgoUML es una de esas herramientas que no debe faltar en tu colección. Soporta la especificación 1.4 de UML (el soporte para UML 2 es experimental aun). Permite generar código para varios lenguajes de programación entre ellos java, C++, php4, php5. Cuenta con varias extensiones útiles como la extensión para base de datos, la cual también te permite hacer ingeniería inversa de base de datos.

DBDesigner: Aunque se ha pretendido que WorkBench de MySQL reemplaze a esta herramienta le falta mucho para alcanzar la versatilidad que tenia esta herramienta. Permite realizar diseños de base de datos y conectarte a diferentes gestores de bases de datos. los diseños ademas de útiles son muy bonitos excelentes para presentarlos. Cuenta con dos complementos para crear reportes a modo de diccionario de datos de tu modelo y crear un sitio web para tu pagina de forma rápida con varias opciones para configurar y agrupar tus paginas.

MagicDraw Community Edition: La uso para crear modelos de sistemas web basados en UWE, cuenta con complemento y los diagramas son estéticamente atractivos. Puedes crear desde cero tu modelo o bien trabajar la base lógica con ArgoUML y luego exportar tu modelo como un XMI e importarlo con esta herramienta. Existe una versión de ArgoUML que cuenta con complementos para modelado con UWE la cual no me gusta mucho y solo es compatible con una versión mas antigua de ArgoUML.


Planeación de proyectos

Planner: Herramienta para planeación de proyectos corre en múltiples plataformas y genera reportes útiles para presentar e imprimir.

GanttProyect: Para planeación de proyectos desarrollado en java, es muy buena herramienta, genera un gráfico pert de la ruta critica de tu proyecto, es muy intuitivo.

XMaind: Crea mapas conceptuales fácilmente, incluye plantillas de diagramas de pescado, organigramas, de árbol , tablas y otros, para los que conozcan el Mainjet déjeme decir que esta herramienta tiene casi toda su funcionalidad y es de uso libre.


Diseño web

DreamWeaver: A pesar de lo que muchos tienen en contra de las tecnologías de paga, no he encontrado un editor de paginas web comparable a este, en la cantidad de funciones y su editor visual.

Mozilla Web Developer ToolBar: agrega varias herramientas de diseño al navegador, esta extensión esta disponible para Firefox y Chrome, y corre en todas las plataformas donde estos navegadores estén soportados. Provee muchas opciones útiles para formularios, estilos, imágenes, tamaño de la ventana, elementos de bloque y posicionamiento, entre otras.

Firebug: es una de las herramientas más populares entre los desarrolladores web. Este complemento para firefox esta ahora también disponible en chrome, tiene una interfaz amigable con pestañas que facilitan la inspección y depuración de cada aspecto de la web. Permite editar y ver los cambio de forma inmediata, analizar la velocidad de carga, los requisitos realizados y los parámetros y cabeceras enviados.


Validación, Formato de código y miscelaneos


CSS Formatter and Optimiser: permite dar formato al css y ademas tiene varias opciones de compresión y reducción de código.

JavaScript Formatter: permite dar formato el código js.

Validación

• Validación HTML de W3C -  http://validator.w3.org
• Validación CSS de W3C -  http://jigsaw.w3.org/css-validator/
• Validación XML - http://www.xmlvalidation.com/
• CSS Test de Selectores -  http://www.css3.info/selectors-test/

Generadores de contenido

• Generador de texto - http://www.procato.com/lipsum/
• Generador de Imágenes -  http://dummyimage.com/
• Generador de MetaTags - http://www.aemilius.net/soporte/utilidades/generador-meta-tags.php

Transferencia de archivos

FileZila: Cliente ftp, aunque no es tan bueno si se trata de archivos muy grandes pero la naturaleza del protocolo tampoco le ayuda con eso.

FireFTP:  es un complemento de Mozilla Firefox para transferencia de  archivos por FTP.

UWE el camino a la orientación a objetos en la web

UML-Based Web Engineering (UWE) es una conjunto de herramientas para modelar aplicaciones web. UWE incluye una expansión del lenguaje UML y nuevos diagramas para modelar algunos aspectos específicos del las aplicaciones web. Integra conceptos de UML y la metodología OOHDM (Modelo de Diseño Hipermedia Orientado a Objetos). Me ha parecido interesante abordar este modelo como una herramienta de gran utilidad dado que esta basada en UML y además cuenta con todo el poder expresivo necesario para el desarrollo de aplicaciones web.

La mayoría de los que nos dedicamos a desarrollo web hemos sentido que las herramientas y el uml convencional quedaba cortos de expresividad ante conceptos que necesitábamos representar y debíamos recurrir a otras herramientas para modelar el comportamiento de nuestras aplicaciones web, si es que realizábamos algún tipo de modelado.

Para los que hayan trabajado anteriormente con la metodología OOHDM trabajar con UWE les resultara alga muy familiar porque muchos de los conceptos son análogos. En la página que tiene el enlace a UWE (http://uwe.pst.ifi.lmu.de/teachingTutorialSpanish.html), encontraran mucho material para estudiar, varios tutoriales, la especificación del modelo que es una extensión del UML y muchos artículos y publicaciones de expertos que ayudan ha entender como se relacionan los modelos de UWE y sus diagramas con los diagramas ya conocidos de UML.


En el ambito del desarrollo web no es usual modelar mucho las aplicaciones. Quizá es una de las razones por las que que los desarrollos se tornan mas complejos de lo pensado. La mayoría de los proyectos complejos ya sean estos basados en web o de otro tipo, el cliente espera ver resultados rápidamente, de modo que se suele desestimar la importancia del buen análisis y modelado. Esta es una muy mala práctica, tomando en cuenta que muchas de la aplicaciones que se desarrollan hoy día y que interactuan en la red son sistemas de complejidad media o alta con la salvedad que opera sobre una plataforma web.

La utilización de UWE en nuestros proyectos, no solo forma parte de las buenas practicas de desarrollo. También provee la documentación necesaria para dar soporte a las aplicaciones desarrolladas y facilita la implementación de las soluciones desarrolladas. UWE nos permite crear un modelo conceptual con todo el poder expresivo de UML, un modelo de navegación claro y un modelo abstracto de la interfaz de usuario.

Se podrían señalar muchas razones para que el uso de herramientas de representación adecuadas dos de ellas sin embargo pueden ser significativas a mediano plazo. 1) Los lenguajes de programación web estan evolucionando hacia la orientación a objetos, los lenguajes más utilizados PHP y ASP ya estan en ese camino, otros como Java, Python y C# son ya orientados a objetos. 2) Las aplicaciones, programas y servicios están cada ves mas integradas o encaminadas a la web. Pese a esto muchos programadores, desarrolladores y analistas aun no actualizan sus "cajas de herramientas". Esta tendencia ponte frente a nosotros la necesidad de utilizar las herramientas de que disponemos para construir aplicaciones web con calidad.