Había un bug complejo y, como todos los bugs, inesperado. Claramente había sido introducido por el “gran cambio” (las pruebas automáticas en la rama principal pasaban sin problemas), pero el cambio se había dado en una serie larga y compleja de alteraciones a varios puntos del sistema. Si hubiera hecho pruebas automáticas en cada paso me hubiera dado cuenta, pero ahora la tarea se complicaba.

¿Acaso hay alguna manera sencilla y práctica de regresar a ver cada cambio y descubrir cuál causó el error?

En git la tenemos: el ...]]> Hace unos días tuve que hacer un cambio importante que requirió varias alteraciones al sistema en el que estoy trabajando. Uso git como sistema de control de versiones, así que abrí una rama específica para ello, completé la tarea en una larga serie de commits y finalmente corrí mis pruebas automáticas. No pasaron.

El problema

Había un bug complejo y, como todos los bugs, inesperado. Claramente había sido introducido por el “gran cambio” (las pruebas automáticas en la rama principal pasaban sin problemas), pero el cambio se había dado en una serie larga y compleja de alteraciones a varios puntos del sistema. Si hubiera hecho pruebas automáticas en cada paso me hubiera dado cuenta, pero ahora la tarea se complicaba.

¿Acaso hay alguna manera sencilla y práctica de regresar a ver cada cambio y descubrir cuál causó el error?

En git la tenemos: el comando git bisect.

La solución

git bisect es, según la propia documentación de git, un comando para “encontrar por búsqueda binaria el cambio que introdujo un bug“. Para usarlo, hay que localizar un commit con el bug (en mi caso, el más reciente) y uno sin el bug (para mí, el punto en el que me separé de la rama principal, digamos 495e8b). Para comenzar la bisección corrí:

$ git bisect start 

Marqué como malo mi commit más reciente con:

$ git bisect bad 

Y marqué como bueno el commit de la separación:

$ git bisect good 495e8b 

A lo que git me respondió con:

Bisecting: 16 revisions left to test after this. 

Y automáticamente hizo checkout de una versión intermedia entre HEAD y 495e8b.

En mi caso había un problema con mis pruebas (apuntaban a URL’s que se hicieron incorrectas con el cambio), así que lo corregí, las corrí y al ver que pasaban marqué la revisión como buena con:

$ git bisect good 

Y obtuve como respuesta:

Bisecting: 8 revisions left to test after this. 

Y git hizo checkout de una nueva versión intermedia. Tras repetir este proceso (corregir las pruebas, correrlas, determinar si el commit era bueno o malo y avisarle a git) varias veces finalmente quedó una sola revisión por probar, la marqué como buena y git me respondió:

b824cd36abed30de79e6765a684a4a22d5838bf3 is the first bad commit. 

¡Ajá! El culpable. Usé git show b824cd para ver el patch con los cambios, identifiqué el error y volví a mi commit más reciente:

$ git bisect reset 

Arreglé el problema y listo, a seguir trabajando.

¿Y si lo quiero automático?

Por diversas razones yo tuve que estar ajustando los tests a mano para hacerlos funcionar, pero si hubieran funcionado para todos los commits por revisar, habría podido escribir un pequeño script que regresara 0 si un commit es bueno o 1 si es malo:

#! /bin/bash
# Script para correr las pruebas automáticas.
python manage.py test miapp # O cualquier comando que corra tus pruebas.

Y le pediría a git que lo corriera para revisar los commits y determinar si son buenos o malos.

$ git bisect run script-de-pruebas 

Incluso pude haber automatizado los ajustes dentro del script, pero para este caso me pareció más sencillo hacerlo a mano.

En la siguiente dirección podemos encontrar esta herramienta, proporcionada por learningjquery.com :

http://goo.gl/RZDzC

Sólo hay que arrastrar el link a la barra de bookmarks o de favoritos, y una vez que necesitemos jQuery damos click al mismo y nos despliega una notificación indicando si se ha cargado correctamente, que versión se cargó o si ya estaba disponible en la página.

Yo se que les ha pasado. Necesitan entregar los avances de un proyecto, o es mas, el proyecto terminado pero no tienen un diseño para poder finalizarlo. Una solución buena, rápida y bonita es Bootstrap, de la gente que esta detras de twitter.  Bootstrap es un conjunto de herramientas (HTML + CSS + jQuery) para facilitar y apoyar en el desarrollo de aplicaciones web.

Algunas características padres de Bootstrap son:

Para nuestro framework favorito de desarrollo, existen plugins que reemplazan el scaffolding por default. Aquí pueden ver un ejemplo rápido de Grails + Bootstrap.

Realizar una notificación con Toast es muy sencillo , solo necesitamos seguir los siguientes pasos.

Crear el objecto Toast

La clase Toast tiene el método de clase makeText() que construye un objecto Toast a partir de los siguientes parámetros:

Así por ejemplo si deseamos crear una notificación con el mensaje ...]]> Las notificaciones son una parte importante en las aplicaciones, pues estan le pueden garantizar al usuario que algo ha cambiado o esta cambiando de estado en la aplicación,  Android cuenta con la clase Toast que permite mostrar notificaciones sencillas que serán visibles solo por algunos segundos y desaparecerán sin necesidad de la interacción del usuario.

Realizar una notificación con Toast es muy sencillo , solo necesitamos seguir los siguientes pasos.

1. Crear el objeto Toast
2. Posicionar el mensaje en pantalla (opcional)
3. Mostrar el mensaje

Crear el objecto Toast

La clase Toast tiene el método de clase makeText() que construye un objecto Toast a partir de los siguientes parámetros:

1. El contexto de la actividad.
2. El mensaje que desea mostrarse.
3. La duración del mensaje. Este parámetros puede tomar los valores LENGTH_LONG o LENGTH_SHORT, dependiendo de la duración que deseemos tenga el mensaje.

Así por ejemplo si deseamos crear una notificación con el mensaje HOLA MUNDO el código seria el siguiente:

Toast toast = Toast.makeText(getApplicationContext(), “HOLA MUNDO”, Toast.LENGTH_SHORT);

Posicionar el mensaje en pantalla

El método que permite posicionar el mensaje en la pantalla es setGravity que funciona con los siguientes parámetros

1. La zona donde se mostrará el mensaje, las opciones están contenidas en la clase Gravity: CENTER, RIGHT, LEFT, BOTTOM e inclusive se pueden hacer combinaciones utilizando “|”. (Por default el mensaje se muestra con la opción BOTTOM).
2. Desplazamiento en X.
3. Desplazamiento en Y.

Los desplazamientos X y Y se realizan a partir de la zona en que se posiciono el mensaje en el primer parámetro.

Ahora supongamos que deseamos que el mensaje se muestre en la parte derecha del centro:

toast.setGravity(Gravity.RIGHT | Gravity.CENTER, 0, 0);

Mostrar el mensaje

Por ultimo tenemos el método show que será el que mostrara el mensaje en la pantalla.

Toast.show()

Código del ejemplo

button.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast toast = Toast.makeText(getApplicationContext(), “HOLA MUNDO”, Toast.LENGTH_LONG);
toast.setGravity(Gravity.RIGHT | Gravity.CENTER, 0, 0);
toast.show();
}
});

Pero trabajar en casa también exige tal vez mas compromiso que una labor normal de oficina. Sobre todo por estar rodeado del ambiente mas cómodo que existe, tu propio hogar.

Trabajar en casa necesita:

Es muy fácil satanizar al cliente y verlo como el malo de la película. Lo verdaderamente difícil ...]]> Un cliente es más que su dinero, es más que el proyecto que desarrolla con nosotros, es parte del gran ecosistema de empresas que existen en este país. Nuestra filosofía de trabajo nos permite percibir al cliente como lo que en realidad es: una organización que requiere ser auxiliada en la resolución de una problemática para poder brindar un servicio que mejora la calidad de vida de cientos, miles o incluso de millones de personas. De esta forma, VincoOrbis se percibe a sí misma como una empresa cuyo rango de acción no se reduce a las personas que utilizarán los sistemas o sitios web que desarrollamos, sino que es capaz de intervenir de una forma positiva en el diario acontecer de la sociedad mexicana.

Es muy fácil satanizar al cliente y verlo como el malo de la película. Lo verdaderamente difícil es comprender la esencia de las necesidades que presenta, buscar la forma más óptima de resolverla y entregarle un producto que le cambie la vida. Esto sólo puede lograrse con una definición de requerimientos completa y precisa, con un proceso de desarrollo integral y de calidad, y manteniendo la comunicación y realimentación en todo momento.

La plantilla en word

Primero necesitamos crear una plantilla en formato word, para este ejemplo usaré el formato de una carta de recomendación donde los recuadros amarillos son los que serán, rellenados con ayuda de php.

Al asignar las etiquetas al documento, es importante que las estas sean únicas en el documento y que estas no sean sub palabras de otra etiqueta ó palabra del documento, esto es importante dado que el ...]]> En ocaciones los sistemas informáticos necesitan crear algun tipo de documentos basados en la información que se maneja en el sistema. Y aunque el navegador siempre tiene la opción de imprimir lo que mostramos en pantalla, aquí propongo una solución elegante y que permite a los usuarios llenar una plantilla en el navegador y poder exportarla a un documento en formato word que resultará más practico y familiar para los usuarios.

La plantilla en word

Primero necesitamos crear una plantilla en formato word, para este ejemplo usaré el formato de una carta de recomendación donde los recuadros amarillos son los que serán, rellenados con ayuda de php.

Al asignar las etiquetas al documento, es importante que las estas sean únicas en el documento y que estas no sean sub palabras de otra etiqueta ó palabra del documento, esto es importante dado que el algoritmo de PHPWord al reemplazar los valores a las etiquetas, revisa secuencialmente el documento en busca de la etiqueta y si el texto que encuentra en el documento coincide con alguno de los casos señalados anteriormente estos serán sustituidos.

Una vez que tenemos lista nuestra plantilla debemos guardarla en un directorio que sea accesible desde nuestro programa php.

El formulario de la plantilla

Hay que crear un formulario que de preferencia debe ser los más similar a la plantilla para que pueda ser rellenada por el usuario, tal como se muestra en la siguiente imagen

En ocaciones algunos de los campos podran ser rellenados de forma automatica con php, como por ejemplo en este caso la fecha que es rellenada con el siguiente código.

$date = getDate();

$months = array(1 => “Enero” , 2 => “Febrero” , 3 => “Marzo” , 4 => “Abril” , 5 => “Mayo” , 6 => “Junio” , 7 => “Julio”, 8 => “Agosto” , 9 => “Septiembre” , 10 => “Octubre” , 11=>”Noviembre”,12=>”Diciembre”);

echo $date['mday'] . ” de ” . $months[(int)$date["mon"]] . ” de ” . $date["year"];

También es conveniento añadir etiquestas o tooltips en las casillas para que el usuario pueda saber que debe escribir en cada uno de los recuadros.

Suponiendo que contamos con una base de datos con un directorio de personas a recomendar podriamos rellenar todos los demás campos con la información que contamos, o simplemente dejar los campos limpios para que el usuario pueda capturar sus datos.

El documento

Ahora la parte interesante que es implimentar el código necesario para rellenar la plantilla con los datos que que obtenemos del formulario anterior.

Primero necesitamos descargar la librería PHPWord que encontraras  http://phpword.codeplex.com/releases/view/49543, PHPWord es una librería programada con php que permite crear y manipular documentos creados en Word.

Basicamente debemos realizar los siguientes pasos para crear el documento:

1. Leer la plantilla.
2. Asignar los valores a las etiquetas.
3. Guardar el archivo.
4. Descargar el archivo.

A continuación explico el código

1. Leer la plantilla.

Primero debemos crear un objeto de PHPWord que será el que nos permitira manipular los documentos de Word:

$phpWord = new PHPWord();

Luego con el método loadTemplate del objeto creado anteriormente leemos la plantilla y la almacenamos en el objecto $document de la clase PHPWord_Template.

$document_path = “plantillas/carta1.docx”;

$document = $phpWord->loadTemplate($document_path);

2. Asignar los valores a las etiquetas.

La clase PHPWord_Template posee un método llamado setValue el cual admite dos parametros:

• $search, que es el nombre de la etiqueta en la plantilla a ser remplazada
• $replace, Texto que será colcado en el lugar de la etiqueta

De esta forma si deseamos que en la etiqueta fechacarta desemos porner el texto que obtenemos del formulario que se encuentra en el input fechacarta, escribiremos lo siguiente:

$document->setValue(‘fechacarta’,$_POST["fechacarta"]);

y de forma similar para todos los demás valores:

$document->setValue(‘nombredirigido’,$_POST["nombredirigido"]);

$document->setValue(‘personarecomendada’,$_POST["personarecomendada"]);

$document->setValue(‘fechalaboracion’,$_POST["fechalaboracion"]);

$document->setValue(‘puestopersona’,$_POST["puestopersona"]);

$document->setValue(‘nombreotorgante’,$_POST["nombreotorgante"]);

$document->setValue(‘direccionotorgante’,$_POST["direccionotorgante"]);

$document->setValue(‘telefonootorgante’,$_POST["telefonootorgante"]);

$document->setValue(‘faxotorgante’,$_POST["faxotorgante"]);

$document->setValue(‘correootorgante’,$_POST["correootorgante"]);

3. Guardar el archivo.

Al momento de guardar los cambios aplicados a la plantilla es importante realizarlo en otra dirección para no sobrescribir nuestra plantilla y dejarla inutilizable para la creación de otro documento.

$filename  = “recomendacion.docx”;

$document->save($filename);

4. Descargar el archivo.

Ahora debemos indicar al navegador que se realizará una descarga y el archivo que será descargado, eso lo hacemos con el siguiente código:

header(‘Content-Description: File Transfer’);

header(‘Content-type: application/force-download’);

header(‘Content-Disposition: attachment; filename=’.basename($filename));

header(‘Content-Transfer-Encoding: binary’);

header(‘Content-Length: ‘.filesize($filename));

Despues abrimos el archivo que será descargado, para que este sea enviado.

readfile( $filename);

Finalizamos Eliminado el archivo creado pues no deseamos almacenarlo en el servidor

unlink($filename);

La verdad es que llevamos la preocupación al extremo y a veces nuestra vanidad gana, olvidamos que el verdadero objetivo de la validación es indicarnos los errores o las advertencias que puedan afectar la funcionalidad del sitio y darnos una pista para ayudarnos a corregirlo, sin embargo, no siempre estamos en un error.

Uno de los ejemplos más claros de problemas que en realidad no lo son, son las meta etiquetas de Facebook en nuestras páginas con html5, desde que decides incluirlas en tus sitios, sabes que algo no va a salir bien: <meta property="og:type" content="website" />

El validador de la WC3 ...]]> Uno de los problemas de la obsesión con la validación de html es que muchas veces tomamos algunos “warnings” del resultado de nuestra validación como problemas de vida  o muerte y no nos detenemos hasta corregir lo necesario para eliminar las advertencias.

La verdad es que llevamos la preocupación al extremo y a veces nuestra vanidad gana, olvidamos que el verdadero objetivo de la validación es indicarnos los errores o las advertencias que puedan afectar la funcionalidad del sitio y darnos una pista para ayudarnos a corregirlo, sin embargo, no siempre estamos en un error.

Uno de los ejemplos más claros de problemas que en realidad no lo son, son las meta etiquetas de Facebook en nuestras páginas con html5, desde que decides incluirlas en tus sitios, sabes que algo no va a salir bien:

<meta property="og:type" content="website" />

El validador de la WC3 nos comenzará a marcar cosas como:

Attribute property not allowed on element meta at this point

Así que, queremos incluir los opengraph meta tags de Facebook en nuestro sitio, pero si lo hacemos, el código no valida. Nos comenzamos a volver locos y no encontramos una solución, queremos que el código valide, pero no queremos perdernos el hype de Facebook, ¿qué hacer?

Pues la respuesta es muy simple, básicamente los opengraph meta tags de Facebook únicamente necesitan ser leidos por Facebook mismo, cuando “escanea” nuestra página. Así que lo único que necesitamos hacer es identificar de donde viene la petición y así poder devolver los meta tags únicamente cuando Facebook los solicita.

Si trabajamos con Java/JSP , podemos resolverlo:
<%
String ua=request.getHeader("user-agent").toLowerCase();
if(ua.matches(".*facebookexternalhit.*")){
}
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
}
%>

También con tags:
<c:set var="ua" value="${header['User-Agent']}" scope="page"/>
<c:if test="${ua.matches('.*facebookexternalhit.*')}">
<meta property="og:image" content="images/facebook.jpg" />
...
</c:if>

Si trabajamos con php:
<?
if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){
echo '<meta property="og:type" content=xxxxxxxxxxxxx';
// continue with the other open graph tags
}
?> 

Con esto, los meta tags sólo estarán disponibles cuando Facebook los busque y nuestro código validará sin problema.

Hacer “deploys manuales” en ambientes productivos no es lo más recomendado,  para desplegar aplicaciones en ambientes productivos lo mejor es hacerlo a través de algún software que te permita hacer Integraciones Continuas, Bamboo y CloudBees son buenos ejemplos, sin embargo, no es objeto de este post ahondar en este tema.

En el caso más común, normalmente generamos un archivo WAR con nuestra aplicación y lo subimos vía ftp o http para después desplegarlo en nuestro contenedor, sin embargo, si ...]]> Cuando generamos un archivo WAR de una aplicación Grails nos damos cuenta de que este puede ser muy grande. Si estamos utilizando Grails 2.0, por ejemplo, el archivo generado con los plugins instalados por defecto pesa más de 30MB, lo cual no es un problema real de almacenaje con los estándares actuales, pero si lo es a la hora de subirlo vía ftp a un servidor productivo, por ejemplo.

Hacer “deploys manuales” en ambientes productivos no es lo más recomendado,  para desplegar aplicaciones en ambientes productivos lo mejor es hacerlo a través de algún software que te permita hacer Integraciones Continuas, Bamboo y CloudBees son buenos ejemplos, sin embargo, no es objeto de este post ahondar en este tema.

En el caso más común, normalmente generamos un archivo WAR con nuestra aplicación y lo subimos vía ftp o http para después desplegarlo en nuestro contenedor, sin embargo, si usamos la opción -nojars durante la construcción del WAR Grails nos construirá un archivo mucho, mucho más ligero:

$grails war -nojars

Para un WAR con ambiente productivo:

$grails prod war -nojars

¿Cuál es el truco?

Ninguno, simplemente Grails construye un WAR sin las librerías que normalmente estarían en la carpeta WEB-INF/lib dentro del WAR, dejándonos la tarea a nosotros de subir estas librerías directamente en nuestro contenedor de aplicaciones (en la carpeta tomcat/lib por ejemplo). Cabe mencionar que no solo tendremos que subir manualmente estas librerías al contenedor, también tendremos que mantenerlas actualizadas.

¿Y la primera vez?

Existen varias formas de generar las librerías la primera vez, sin embargo, la más simple es crear el WAR completo una sola vez, desplegarlo y copiar las librerías necesarias.

Esperamos que esto les ayude y reduzca su consumo de ancho de banda.

En Vinco Orbis tenemos la gran fortuna de tener un equipo conformado con gente sumamente talentosa y debo decir que es una de las satisfacciones laborales más grandes que he tenido la oportunidad de vivir.

Claro que existen retos asociados a tener un gran equipo. Como líder de grupo te obliga a mantenerte constantemente alerta de varias cosas, por ejemplo, tienes que estar pendiente de no crear una muerte de la creatividad por aburrimiento ni dejar pasar que por tener talento y que las cosas salgan fácil esto provoque un freno a su crecimiento.

Basado en mi experiencia personal de los últimos dos años, estas son las 7 maravillas de trabajar con un equipo así:

1. Ideas. Grandes ideas.  

De la definición del proyecto original a la versión final entregada hay muchos ...]]> En una empresa eres tan fuerte como la suma de tu equipo.

En Vinco Orbis tenemos la gran fortuna de tener un equipo conformado con gente sumamente talentosa y debo decir que es una de las satisfacciones laborales más grandes que he tenido la oportunidad de vivir.

Claro que existen retos asociados a tener un gran equipo. Como líder de grupo te obliga a mantenerte constantemente alerta de varias cosas, por ejemplo, tienes que estar pendiente de no crear una muerte de la creatividad por aburrimiento ni dejar pasar que por tener talento y que las cosas salgan fácil esto provoque un freno a su crecimiento.

Basado en mi experiencia personal de los últimos dos años, estas son las 7 maravillas de trabajar con un equipo así:

1. Ideas. Grandes ideas.  

De la definición del proyecto original a la versión final entregada hay muchos cambios. Nosotros siempre buscamos incluir las mejores ideas y sugerencias que en la gran mayoría de las ocasiones vienen directamente del equipo encargado de desarrollar el proyecto. Y tenemos la gran ventaja de contar con un equipo que cuando detecta una oportunidad de optimización o mejora no se queda callado sino que lo expresa y lo justifica.

Mi única misión en esos casos es asegurarme de que una idea brillante no se quede en el tintero, que tenga siempre la oportunidad de ser presentada al cliente e incorporada al producto final.

2. Tienen afición por encontrar la respuesta. 

Muchas veces no tenemos la respuesta, pero nos encanta ir a encontrarla. Si no conocen la solución saben que hay muchas herramientas para investigarla, incluyendo involucrar a alguien más del equipo y encontrar en conjunto cómo resolver cualquier obstáculo que encuentren.

3. Evitan problemas futuros haciendo las cosas bien desde el principio. 

No es fácil navegar la línea entre la prisa por cumplir las fechas de entrega y dedicarle tiempo a hacer algo bien desde la primera vez. La preferencia siempre es hacia evitar el retrabajo, incluyendo dedicar un poco de tiempo a lo que podría ser una fase dos del proyecto y dejar de una vez las bases para que el proyecto desde el inicio soporte crecimiento aunque en este momento no exista la certeza de que se vaya a continuar.

4. Su foco es hacia los resultados. 

Consideran que los resultados son más importantes que el tiempo que toma llevarlos a cabo y los presentan con orgullo.

5. Son necios pero flexibles. 

De vez en cuando encuentra una mejor manera de hacer las cosas, y las adoptan. En ocasiones esto significa empezar de nuevo desde cero, en ese momento se evalúa y si vale la pena, adelante, la prioridad es no permanecer en un proceso ineficiente simplemente porque siempre se ha hecho así.

6. Suben la barra.

El concepto de “hasta aquí es suficiente” es móvil. No podemos perdernos en llevar todo a la perfección, pero si se esfuerzan en hacer pequeñas cosas que suben la calidad de lo que entregan. Que un botón funcione está bien. Pero que ese mismo botón tenga un ícono, un tooltip de ayuda y una etiqueta que indique claramente lo que hace ese botón es aún mejor.

7. No se estancan.

El talento te gana algunos pasos, pero no te lleva por si solo al final del camino en la mejor versión posible. Para ello necesitas, estudiar, investigar, proponer, intentar, probar, verificar, adoptar, compartir, continuar.