VIM – Personalización y Adiciones

Vim Cheat Sheet.
Estándar

VIM Logo

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

VIM - Navigation

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 - Referecia rápida

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.

VIm - Referencia rápida

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. <a href="http://technotales.wordpress.com/2010/04/29/vim-splits-a-guide-to-doing-exactly-what-you-want/“>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 <a href="http://vim-taglist.sourceforge.net/manual.html“>Tag List Manual seguramente encontraran muchas opciones para personalizarlo a su gusto.

NERDTree and tabs: <a href="https://github.com/scrooloose/nerdtree/blob/master/doc/NERD_tree.txt“>NERD tree 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. <a href="https://github.com/jistr/vim-nerdtree-tabs“>NERD Tree 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.

VIM as IDE

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

<a href="http://www.vim.org/scripts/script_search_results.php?&amp;script_type=color%20scheme&amp;order_by=rating&amp;show_me=20&amp;result_ptr=0“>vim.org

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

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”.

Proceso estructurado para desarrollo de aplicaciones web

web development tools
Estándar

Hace un tiempo ya encontré un artículo muy bueno que trata de un proceso estructurado para el desarrollo de aplicaciones web, como ya lo dice el título de este artículo. De modo que acá reproduzco ese contenido en español, espero que no le moleste a Antonio Lupetti, pero debo confesar que es un artículo excelente. A continuación el artículo.

Desarrollar aplicaciones web es un trabajo duro que requiere mucho tiempo que tienes que gastar haciendo miles de cosas. Si no utilizas un enfoque metódico, en especial un proyecto complejo, corres el riesgo de perder la perspectiva del proyecto y perder tu tiempo por nada.

Este artículo ilustra un proceso estructurado que puede ayudarte a simplificar el enfoque para desarrollar tus aplicaciones web, ahorrando tiempo y haciéndolo de forma eficiente.

Descarguen el documento N1 | Structured process you must know to develop a web application

Fases principales del proceso

En un proceso genérico para el desarrollo de aplicaciones web pudes identificar cinco fases principales:

Definición de Requisitos

Diseño

Ejecución

Prueba

Liberación

Planificación y revisión es una “fase permanente” que siguen los procesos de desarrollo definiendo un plan de proyecto compuesto por una lista de actividades las cuales tienes que revisar durante la ejecución del proyecto. Para cada actividad se debe definir un conjunto de información que servirá para su revisión, por ejemplo:

  • responsable

  • duración

  • costos

….

Denle un vistazo a estos artículos que escribí hace algún tiempo acerca de como implementar un plan de proyecto con un diagrama de Gantt usando Excel o Google Spreadsheets.

Como organizar tu plan de proyecto

Plantilla de diagrama de Gantt en Excel

Implementando un plan de proyecto y gestionando actividades con Google Spreadsheets.

1. Definición de Requisitos

In esta primera fase debes definir el alcance y necesidades de tu aplicación web en términos de lo tu aplicación debe hacer, las principales funcionalidades y requisitos técnicos:

Alcance

Para definir el alcance de tu aplicación web es suficiente con recopilar una lista detallada de las funcionalidades con una descripción clara. En este punto no es importante “cómo” se realizara esto pero si el “qué” es lo que se debe realizar.

Necesidades

Analizar las necesidades es una parte crucial del proceso de desarrollo. En este paso debes estimar tu tráfico potencial, escoger un lenguaje de lado del servidor (PHP, ASP, Coldfusion…), bases de datos, seleccionar un proveedor de servicio de hospedaje… No debes sobrestimar/subestimar tus estimaciones. Evalúa cada cosa con un balance adecuado entre tiempos, costos y objetivos.

2. Diseño

Después de la fase de definición de requisitos, debes “diseñar” tu aplicación con un proyecto bien claro. En esta fase puedes identificar los siguientes pasos:

Diseño: Mapa de la Aplicación

Un mapa de la aplicación contiene solamente información significativa y esencial acerca de la estructura de tu aplicación: paginas (representadas como bloques) y principales relaciones entre ellas. Tu mapa de aplicación debería ser algo así:

De esta forma tienes un mapa con algunas “ubicaciones” (páginas) y una “ruta” (relaciones entre páginas) las que sencillamente debes seguir en orden para proceder, página por página, para implementar tu aplicación en la siguiente fase. De esta forma ahorraras mucho tiempo, teniendo claro e la mente que es lo que debes implementar.

Diseño: Base de Datos

Ahora es el momento de diseñar la base de datos para tu aplicación. Una forma simple de hacerlo es usando modelos Entidad-Relación. En general puedes seguir este orden: define primero tablas, luego atributos y relaciones entre tablas. Tu modelo ER debería parecerse a este:

1:1 expresa la cardinalidad de una relación (en este caso por ejemplo 1 usuario es asignado solamente a 1 tarea, 1 usuario vive solamente en una ciudad). Para más información acerca de este tema revisar en mis artículos más viejos:

Definiendo el modelo de entidades y relaciones

Un enfoque correcto para definir relaciones entre tablas de base de datos

10 artículos útiles acerca de diseño de bases de datos

Diseño: Estructura de la Página

El siguiente paso es hacer una maqueta de tu página, identificando todas las secciones principales usando un nombre (por ejemplo #header, #navbar, #mainContent, #sidebar).

Diseño: Lenguaje del lado del servidor

Teniendo en mente la orientación a objetos para el desarrollo de tu aplicación, puedes definir clases, funciones y toda la funcionalidad el lado del servidor que necesites. Recuerda … esto no es la “ejecución” pero si una forma de tener una “guía” para o que deberás implementar en la siguiente fase.

Diseño: JS Framework

En este paso seleccionamos un JavaScript Framework (jQuery, Scriptaculous, MooTools…), que proveería las funcionalidades que quieres implementar (arrastrar y soltar, animación, efectos …) recopilando una lista de que fucnionalidades específicas están relacionadas con una o más páginas en tu aplicación.

En este punto la fase de diseño esta completa. Puedes iniciar con tu ejecución.

3. Ejecución

Ahora el verdadero reto porque “ejecución” es la realización de tu aplicación. Puedes dividir esta fase en los siguientes pasos:

Ejecución: Base de Datos

Crea una nueva base de datos y escribe el código SQL para definir tus tablas, atributos y relaciones. En el pasado dedique algunos artículos a este tema. Revisen los siguientes enlaces para mayor información:

Como usar PHP y SQL para crear tablas de base de datos y relaciones.

Creación de tablas y relaciones con SQL.

Ejecución: HTML

Usa la maqueta de la página para implementarla en código HTML.

 


Este es el momento para adicionar al HTML todos los elementos que necesites en las secciones identificadas durante la fase de Diseño. Por ejemplo si las secciones de contenido principal tiene un artículo con un título, un texto en el cuerpo y algunas etiquetas, agrega estos elementos:

 

 

 

Ejecución: CSSUna vez lista la estructura principal, inicias a escribir código CSS para adicionar estilos a tu aplicación. Si necesitas algunas sugerencias de como escribir mejor el código CSS revisa alguno de estos artículos:

CSS: enfoque semántico en convención de nombrado.

Guías útiles para mejorar tu CSS y su mantenibilidad.

Ejecución: Lenguaje del lado del servidor

Implementa las clases de la aplicación, funciones, interacciones con la Base de Datos, consultas, y cualquier cosa que requiera interacción del lado del servidor.

Ejecución: JavaScript

Implementa las fucnionalidades AJAX usando el framework que escojiste en la fase de diseño.

4. Prueba

Durante esta fase debes someter el código de tu aplicación a varias condiciones de ejecución (por ejemplo diferentes navegadores). Tu objetivo es detectar todos los errores en tu aplicación antes del lanzamiento final.

Recuerda, este proceso debe ser meticuloso y requiere mucha paciencia. Probar cada página y cada funcionalidad (también en este caso puede ayudarte tu mapa de aplicación para proceder con cierto orden). Si encuentras un error durante la pruebas de ejecución, corrigelo modificando el código y entonces realizas la validación final (una prueba posterior) del código.

5. Liberación o lanzamiento

 

¡Finalmente estas listo para lanzar tu aplicación! Publícala en un directorio de prueba y realiza una prueba final. Si todo funciona correctamente entonces procede al lanzamiento final.

  • El contenido de este artículo, incluyendo imágenes y referencias, es una traducción de original que puede encontrarse en la siguiente dirección:

http://woork.blogspot.com/2009/01/structured-process-you-must-know-to.html