Este artículo cuenta mi experiencia luego de tres años, al desarrollar un proyecto de software libre (licencia GPL) y motivarlos a crear sus propios proyectos o colaborar en los existentes. Si no te gusta leer mucho, básicamente quiero compartir que al crear y mantener un proyecto de software libre logras: aprender a ser mejor programador al recibir correcciones de otras personas,  conoces gente de varias partes del mundo interesadas en tu programa, ves correr el programa en lugares no pensados, recibes código programado por otras personas, puedes recibir dinero sin previo aviso y sin nada a cambio, consigues futuros clientes y recibes felicitaciones por resolver un problema de otra persona.

Inicio

Como mi blog hecho con WordPress empezó a acumular años, el historial de artículos se hizo grande y ocupaba mucho espacio para mostrarlo. La solución por defecto es mostrar los años en una caja desplegable pero lucía muy feo y conseguí un sencillo plugin que los mostraba en un menú desplegable con animación hecha en Javascript. El plugin dejó de soportarse al poco tiempo y no siguió funcionando con WordPress, por ello, decidí hacer uno similar y como estaba aprendiendo jQuery (estaba de moda) lo utilicé para la implementación y nombre. Escribirlo fue fácil pues WordPress ofrece una excelente documentación, además, utilicé el plugin que usaba como base.

¿Ofrecerlo como software libre o usar una licencia cerrada y venderlo?

Una vez terminado, pense en 3 posibilidades: usarlo para mi mismo, venderlo por un precio muy barato y ganar algo de dinero por él, liberarlo como software libre porque le podría servir a alguien con la misma necesidad que yo. Decidí ésta última porque por primera vez tenía algo que surgía de una necesidad y estaba seguro de servirle a mucha gente en la misma situación que yo. Lo subí a WordPress y mi sorpresa es que tuvo bastantes descargas los primeros días (creo que como 300).

Por novatada, empecé a recibir peticiones (no quejas) de gente que deseaba mejor código porque no me entendían, soporte para otros días (me decían que si hablaba español por qué no había menús en este lenguaje), soporte para cambiar el formato del mes, etc. Aproveché un tiempo libre y lancé una segunda versión con el código mas sencillo y limpio, documentado, soporte para multi-idioma (en ese momento inglés y español) e implementé la funcionalidad del mes.

Primeras contribuciones

Luego de esos cambios pensé que el plugin estaba listo y no era necesario hacer mas cosas, para mi sorpresa empecé a recibir ideas de nuevas funcionalidades, código de personas para añadir compatibilidad de características de WordPress desconocidas para mi, por ejemplo, para ese entonces no conocida de WordPress MU, shortcodes, filtros, etc. Recibí parches para mejorar el código SQL porque había una persona con miles de posts, etc.

Mi sorpresa es ver como gente desconocida, se tomó el tiempo para estudiar el código elaborado por mí, modificarlo para soportar sus necesidades y compartirlo conmigo para incluirlo en la rama oficial, permitiendo al resto de usuarios disfrutar de estas funcionalidades. Además, las funcionalidades implementadas eran interesantes y muy variadas, yo sólo no hubiese podido hacerlas porque eran situaciones muy distintas en cada caso. Otra cosa interesante, fue que uno de los primeros programadores en enviarme código, tradujo el plugin a Checo y Esloveno, dos idiomas que jamás pensé contar en mi plugin.

Mantenimiento

Una vez con una base de funcionalidades generales, gente empieza a pedir características  mas complejas, a veces fuera de las funcionalidades o el objetivo del plugin, generalmente algunas se resolvían con otro plugin y otras tuve que agregarlas. Una de las mas solicitadas era la posibilidad de excluir tareas pero fallé, sin embargo, otro de los primeros programadores  en contribuir lo implementó sin que le pidiera ayuda y pude ofrecerlo al resto.

Al momento de estabilizarse el proyecto: buena base de usuarios, programadores voluntarios contribuyendo en el proyecto. Noté un incremento en el soporte, la gente al ver que el plugin funciona bien desean expandir sus posibilidades y empiezan a contactarte para ver como realizar ciertas cosas o dar nuevas idea.  Comencé a recibir donaciones simplemente por realizar el plugin, motivandome a realizar nuevas funcionalidades (como soportar muchas instancias que requería casi re-escritura total).

En otras palabras, una vez que el proyecto se mantiene, el mantenimiento consiste en arreglar bugs, dar soporte a las personas y dependiendo de la frecuencia de solicitudes, agregar funcionalidades nuevas. En este punto es bien porque ya vez el fruto del esfuerzo realizado anteriormente, sin embargo, me parece delicado descuidarlo porque se puede ir todo para atrás. Pues aquí la gente confía mas en tí y espera respuestas rápidas, tal vez algunas sean incómodas al exigir como si estuviesen pagando altas sumas por ello, pero otras son buenas al agradecerte por el esfuerzo realizado.

Conclusiones

Después de este tiempo, puedo decir que es uno de los proyectos mas satisfactorios a nivel profesional y pesonal, en el primer ámbito porque me permite mejorar mis capacidades de programación, conseguir nuevos clientes (mi mayor cliente lo conseguí al solucionarle un problema con este plugin), mejora el currículo (puedo demostrar capacidad de liderar un proyecto, experiencia con PHP y WordPress, Javascript, etc) y mas. Respecto a la parte personal, cada vez que recibo un correo de una persona agradeciendome por el trabajo, por el tiempo ahorrado al utilizar este programa, al ver ejecútandose en sitios conocidos o muy extraños. Me alegra saber que he ayudado a otra persona sin nada a cambio, además cuando recibo donaciones pues también es bien saber que se recibe una recompensa monetaria extra por un trabajo que muchas veces es para mí (para mi blog).

Si alguno tiene una idea o programa en mente, es sencillo y sienten que pueden ayudar a otro, liberelenlo bajo una licencia de código abierto, publiquen el repositorio y con el tiempo verás como crece con la ayuda de otros programadores. Realmente es una buena experiencia.

Si alguno desea conocer o probar mis 2 plugins, pueden hacerlo en las siguientes direcciones:

Happy Hacking!

El título de esta entrada es un poco largo, pero intentaré de explicarles de una manera sencilla como podemos hacer pruebas funcionales en nuestras aplicaciones hechas con el framework de PHP Yii, usando Selenium y Netbeans. Para quienes no conocen las pruebas funcionales, son aquellas para comprobar la correcta ejecución de cada una de las funcionalidades del sistema, muchas veces hacemos este proceso manualmente: entrando al sitio, escribiendo a mano (o usando un plugin del navegador) cada campo, haciendo clic en los botones y así sucesivamente. Pero cuando el sistema se hace muy grande o estamos en agregando funcionalidades, se puede perder mucho tiempo en realizar este proceso, si se deja para el final (como en las metodologías antiguas) puede ser muy tarde y si se omite tendremos un software con potenciales fallas.
La idea es automatizar este proceso, para que con un solo clic se ejecuten muchas pruebas y asegurarnos el correcto funcionamiento del programa a lo largo del desarrollo y mantenimiento del mismo.

Configuración en Netbeans

Para esta guía deben tener ya instalado y configurado los siguientes programas: Netbeans, PHP Unit, un programa hecho con Yii framework, Selenium Server, Firefox (Debe ser igual para otro navegador pero no lo probé), Linux (No sé si este proceso es igual para Windows).

Primero lo que vamos a hacer es instalar un plugin de Netbeans para manipular el servidor de Selenium desde el IDE, este paso es opcional pero me parece mas fácil iniciarlo / detenerlo con un clic que a través de comandos. Para ello vamos a:

  1. Entrar en Netbeans.
  2. Luego en el menú «Tools -> Plugins -> Available Plugins«.
  3. Allí buscamos el que tenga el nombre de «Selenium Module for PHP» le damos clic en Install.
  4. Una vez finalizada la instalación, en la pestaña de Servicios en la parte de Servidores tendremos el de Selenium.
Servidor Selenium

Servidor Selenium

Antes de iniciar las pruebas, debemos arrancar el servidor de Selenium con clic derecho y luego en «Start». Luego procedemos a configurar el proyecto actual (el realizado en Yii) para indicar a Netbeans donde se encuentran las pruebas y PHP Unit:

  1. Hacemos click derecho en el proyecto y luego en «Properties».
  2. En la sección «Sources» existe una caja llamada «Test Folder», en ella vamos a colocar la ruta absoluta a la carpeta /protected/tests del proyecto (en caso de no funcionar, entonces a /protected/tests/unit).
  3. Luego en la misma ventana, cambiamos la sección «PHPUnit» y activamos donde dice «Use Bootstrap» donde rellenamos la caja de texto a la ruta absoluta de /protected/tests/bootstrap.php
  4. Luego activamos la opción «Use XML Configuration» y rellenamos en la caja la ruta absoluta de /protected/tests/phpunit.xml.

Con esto ya esta configurado Netbeans, sin embargo, en mi caso no funcionó de una vez hasta hacer unos pequeños ajustes:

  1. En mi caso no quería detectar al navegador Firefox, para hacerlo funcionar en el archivo de configuración (phpunit.xml) tuve que eliminar todo el contenido dentro de las etiquetas <selenium></selenium> dejándolas como las acabo de escribir.
  2. En el archivo WebTestCase.php,en la función setUp() necesité colocar $this->setBrowser(‘*firefox’); para indicar el navegador por defecto.
  3. Como estaba usando Bootstrap para el frontend, Selenium debe esperar un poco hasta que algunos eventos de Javascript terminen de mejorar la apariencia visual, para ello en el archivo /protected/config/main.php se agrega enla sección de preload lo siguiente (asumiendo la carga de log como se encuentra por defecto):
    'preload' => array('log',
        php_sapi_name() !== 'cli' ? 'bootstrap' : '',
    ),
  4. Listo, ya con presionar Alt + F6 empezará a ejecutar todas las pruebas, si solo quieren para la clase actual deben presionar Shift + F6.

Consejos para las pruebas

A continuación les doy unos consejos y extractos de código, pues al principio me costó encontrar como realizar las siguientes tareas en Selenium.

  • Iniciar sesión en cada prueba: para ello deben crear en WebTestCase.php (la clase principal para las pruebas) un método para el login que comience con _ (piso), pues éstos no se ejecutarán en las pruebas, aquí mi les dejo código y luego en cada prueba hacen un $this->_login() donde requieran identificarse.
    protected function _login() {
     $this->windowMaximize();
     $this->open("site/login");
     $this->type("LoginForm_username", "skatox"); //Donde LoginForm_username es el id del usuario
     $this->type("LoginForm_password", "contrasena");
     $this->click("LoginForm_rememberMe"); //Permite recordar y no estar autenticando cada rato
     $this->click("name=yt0");
     $this->waitForPageToLoad(self::PAGE_LOAD_WAIT_TIME); //constante que declaré para esperar un tiempo
    }
  • Interactuar con la ventana de confirmación al eliminar un elemento del grid: En este caso se me complicó porque se debe interactuar con una ventana de javascript, el siguiente código también está en WebTestCase.php porque lo utilizo a lo largo de todas las pruebas, los parámetros son: $confirmMsg que es el mensaje de confirmación que aparece en la ventana y $nonFoundMsg, mensaje de cuando se ha borrado el elemento.
    protected function _testDelete($confirmMsg, $nonFoundMsg){
     sleep(self::WAIT_JS_TIME); //tiempo para esperar la ventana de javascript
     $this->chooseCancelOnNextConfirmation(); //Selecciona el boton cancelar para probar este paso
     $this->click($this->firstDeleteXpath); //Hace clic en el boton de eliminar del grid (Xpath)
     $this->assertConfirmationPresent($confirmMsg); //Se asegura que esta bien el mensaje
     $this->getConfirmation();
     sleep(self::WAIT_JS_TIME);
     $this->chooseOkOnNextConfirmation(); //Escoge aceptar
     $this->click($this->firstDeleteXpath);
     $this->assertConfirmationPresent($confirmMsg);
     $this->getConfirmation();
     $this->waitForTextPresent($nonFoundMsg); //Espera que no hayan resultados porque los borró
    }

Ya con estos pasos pueden empezar a realizar las pruebas funcionales de forma automática, si quieren conocer como se vé, les dejo un vídeo de unas pruebas de un módulo de una aplicación que estoy realizando:

 

Crudgen fue mi proyecto de tesis de grado que culminé a medidados del 2009, el mismo consiste en un generador de páginas para realizar operaciones CRUD (Create, Report, Update y Delete) en una base de datos Postgres a través de phppgadmin, el mejor gestor web para administrar este tipo de base de datos. Para ese entonces modifiqué el código fuente de varias partes de la aplicación, dificultando su integración en el programa, al año siguiente (2010) decidí reescribirlo y modificar su uso siguiendo las sugerencias del equipo, sin embargo, por falta de tiempo lo abandoné. En agosto de 2011, se agregó soporte para complementos por parte de Leonardo Sápiras al participar en el Google Summer of Code, permitiendo escribir un plugin con esta funcionalidad sin modificar el código fuente del programa.En el último año, cuando tenía tiempo libre me puse a rescribir (por tercera vez) el programa y hasta hace poco logré finalizarlo.

El plugin permite a través de pocos pasos, generar páginas web para realizar operaciones sobre las tablas seleccionadas de una base de datos. El código generadoson funciones PHP para realizar las acciones, las cuales son llamadas desde una plantilla HTML, esta plantilla, puede ser programada fácilmente o fácil de adaptar desde un diseño un existente, permitiendo obtener resultados con diseños personalizados (a diferencia de las otras soluciones donde todos los resultados tienen la misma apariencia).

Respecto al código del lado del servidor, soporta las bibliotecas PGSQL o PDO_PGSL brindando posibilidad al usuario de elegir la que mas le convezca (debería usarse siemper PDO para mayor seguridad), posee seguridad respecto a ataques de inyección SQL, usa PHP5 de fácil lectura y con flexibilidad para adaptarla a los requisitos del programador. Centraliza funciones comunes entre las páginas y mucho mas.

Si les interesa, les invito a ver este vídeo en inglés (me di cuenta que necesito prácticar) donde explico todo el funcionamiento del programa, sino entienden el idioma, no importa, pueden ver todo el proceso y ver lo que genera el plugin.

Espero que lo utilicen, compartan esta información, reporten bugs, se unan al proyecto y aporten código al mismo.

Para utilizarlo pueden descargarlo desde la página de Crudgen en Github.

Esta tecnología la descubrí leyendo el blog de Paul Irish, al principio no la entendí y pensaba que era un framework para desarrollar páginas web pero luego de ver varios tutoriales comprendí que realmente es una plantilla en HTML5 que incluye (en mi opinión) las mejores herramientas de detección de características del navegador, compresión de código HTML, CSS y Javascript; métodos para acelerar la carga de librerías de Javascript, entre otros.

¿Por qué usar Boilerplate?

Si eres desarrollador web (frontend) especializado en la parte visual debes usar esta herramienta para tus proyectos, la idea es ofrecer una plantilla o página web usando HTML5 sin perder compatibilidad con navegadores antiguos que no lo soportan (o solo parcialmente). Además utiliza las mejores prácticas e incluye las mejores herramientas para tener una buena página como: utiliza Modernizr para detectar las funcionalidades soportadas por los navegadores y aplicar solo ha ellos ciertos efectos CSS3 por dar un ejemplo, no reinicia los estilos de los navegadores sino que los normaliza, incluye compatibilidad con la mayoría de servidores web para aplicar técnicas de compresión de datos y pequeñas reglas de seguridad, compatibilidad con dispositivos móviles, herramientas para comprimir el código Javascript entre otros.

Con esto te ahorras mucho tiempo en implementar todas estas cosas, ademas garantiza tener una páginas que usa lo mejor de la tecnología actual sin romper compatibilidad con los navegadores antiguos. Cabe destacar que es solo para crear la plantilla inicial, es una base para ir agregando tu markup, librerías, reglas CSS, etc. Si utilizas un CMS puedes hacer tu propia plantilla o buscar en Internet plantillas ya optimizadas con Boilerplate.

Mi experiencia

Utilicé Boilerplate para MiguelUseche.com (mi sitio profesional) y me ayudó a realizar una página que carga en poco tiempo, funciona en casi todos los navegadores, me ahorro tiempo al dar soporte a Internet Explorer 6 y 7, y la adaptación a dispositivos móviles requirió poco trabajo. Obviamente no todo se hizo automático, sino su base de código me permitió ahorrar mucho tiempo al dar soporte a distintos navegadores.

Boilerplate funciona con una plantilla base, la cual vamos agregando nuestro markup y vamos creando nuestra página/aplicación web. Luego a través de unos scripts «construimos» el sitio optimizado el cual se guarda en la carpeta build, durante este proceso, se comprimen las reglas CSS, el código HTML, los archivos de Javascript, los une si están separados en varios archivos, optimiza las imágenes para ser vistas en la web, actualiza las rutas para incluir estos scripts y mas. Todo lo que debemos hacer es configurar un archivo donde le indicamos todo lo que queremos hacer.

Conclusión

Si quieres hacer un sitio con HTML5 y realizar ciertas acciones con los navegadores que no lo soporten, utiliza Boilerplate. Con todas la base ya optimizada que trae permite crear buenos sitios en menos tiempo, y si son como yo: desarrolladores web especializados en la programación del sitio y no en la parte visual; les ayudará mucho esta tecnología al realizar cosas que no comprendemos mucho. Sin embargo, si eres desarrollador front-end supongo que te ayudará a ahorrar tiempo y te ofrece configuración para adaptarse a tus requisitos o forma de trabajar.

Si quieres comenzar a utilizar esta tecnología pueden ver el siguiente video que está en inglés:

Para descargarlo, entren a la página oficial: https://html5boilerplate.com/

En algunos casos, necesitamos subir por medio de la interfaz de WordPress archivos de gran tamaño pero nos encontramos que no podemos hacelro porque existe un límite de tamaño, sin embargo, si tenemos los permisos necesarios en el servidor podemos hacerlo fácilmente.

Primero debemos modificar unas opciones globales de PHP, para ello debemos crear un archivo llamado php.ini en la carpeta /wp-admin con el siguiente contenido:

upload_max_filesize=280M ;tamaño máximo del archivo
max_execution_time=600 ;tiempo de ejecución del script, si es muy corto no da tiempo de subir el archivo
memory_limit=1024M ;limite de memoria, en mi caso esta alto porque se ejecutan unos scripts al subir el archivo
post_max_size=280M ;tamaño de la llamada POST, debe ser un tamaño igual o ligeramente superior al tamaño máximo del archivo

Y agregar la siguiente línea en el archivo /wp-config:

define(’WP_MEMORY_LIMIT’, ’64M’);

¡Listo! Ya puedes subir archivos de mayor tamaño. Si tienes una instalación multisitio, entonces debes cambiar en las opciones de la red (Network options) el tamaño máximo permitido para los archivos.

Netbeans es mi IDE favorito desde hace años y últimamente me ha tocado realizar varios proyectos usando el framework Yii. Para todo desarrollador / programador es una realidad que no conocemos en totalidad un lenguaje o framework y por ello siempre estamos acudiendo a la documentación  para repasar sintaxis y nombre de métodos, sobre todo de las variables u objetos manipulados en cierto momento. Por eso, es bueno configurar el IDE para que autocomplete el código y muestre la documentación de funciones para leer conocer el funcionamiento sin tener que cambiar de ventana.

Hace unos días descubrí en la documentación oficial como configurar Netbeans para trabajar con Yii. Y les explico aquí como realizarlo:

  • Entra al menu File (Archivo), luego a Project properties (Propiedades del proyecto) y finalmente a PHP Include Path (Ruta de cabeceras de PHP) e incluimos la ruta donde se guarda el framework de yii, de hecho la carpeta se llama «framework».
  • Luego entramos a Tools (Herramientas), luego a Options (Opciones), hacemos clic en la pestaña superior de Miscellaneous (Misceláneas) y hacemos clic en Files (Archivos), luego del paréntesis agregamos «yiilite\.php» para que quede algo como «^(yiilite\.php|CVS|SCCS|….»
  • Reiniciamos Netbeans y veremos como ahora se autocompleta el código, al momento de instaciar clases accederemos a sus métodos y documentación.

Para el caso de algunas vistas parciales donde recibimos objetos que no están declarados en el archivo, podemos decirle al IDE que tipo es cada variable usando la siguiente sintaxis:

/* @var $this MyController */
/* @var $model MyObject */
$this->metodo() // se puede escribir usando auto completación
$model->id; // se puede escribir usando auto completación

Con estos sencillos pasos se hará mas fácil la escritura de código php usando Yii en Netbeans.

Completado de código PHP con Yii en Netbeans

Completado de código PHP con Yii en Netbeans

El pasado jueves liberé la nueva versión de mi plugin para mostrar los archivos de un blog wordpress de manera compacta, con efectos de animación jQuery al momento de expandirlos y navegar sobre ellos. Si tienen un blog wordpress por muchos años y les molesta el tamaño del widget de archivos, les recomiendo utilizar este plugin.

En esta versión 1.2, ahora los archivos se expanden automáticamente dependiendo de la página que estemos visitando. Esta funcionalidad fué agregada en gran parte a un parche enviado por Michel Westergaard que me ayudó mucho a programar esta funcionalidad.

Para mas información pueden ver la página del plugin en WordPress.org o aquí en mi blog. Si les gusta, por favor le dan 5 estrellas o hacen una donación para contribuir con el desarrollo del mismo.