Archivos mensuales: Febrero 2015

SuperSefile

En el último proyecto que he realizado por encargo, he tenido que utilizar una serie de herramientas que me han parecido interesantes y que comparto aquí por si alguien las necesita para otros proyectos.

Es una app de fotografía, en la cual sacas una foto, la puedes firmar, y después puedes componer la firma con la foto e incluso añadir algún que otro texto incluyendo emojis.

Para empezar decidí no usar ningún framework de javascript, ya que quería que la app fuera lo más ligera posible, si que es cierto que he tenido que sacrificar un poco la legibilidad del código de la misma, pero siendo estricto en la nomenclatura de las funciones he conseguido estructurar bien el código y que no fuera muy difícil su depuración.

El único sacrificio que he tenido que hacer ha sido meter jQuery, ya que la librería que he usado para la firma era un plugin de jQuery, si bien es cierto que lo usa para un par de accesos y eventos, desvilcularla de jQuery o usar una librería más liviana, tipo Zepto.js, no era mi prioridad y podría meterme en jardines que realmente no quería pisar.

Para la firma entonces usé el plugin de jQuery, jSignature. Básicamente lo que hace es crear un canvas en el cual se puede realizar la firma, el algoritmo que usa es bastante bueno y tienen un rendimiento aceptable incluso en Android 4.0.4.

Para la composición de la firma y la foto use una librería con muchas más funcionalidades de las que necesitaba pero con vistas a una posible evolución de la app. La librería es Fabric.js. Como pone en su web es un modelo de datos intercativo que proporciona una API para realizar operaciones sobre un objeto de tipo canvas. La verdad es que es muy completa y tiene un montón de ejemplos a parir de los que empezar a trabajar.

Para finalizar me hacía falta un colorPicker y ya que tenía que usar jQuery busqué uno que se amoldara a mis necesidades y que fuera un plugin de jQuery: Spectrum. Al igual que Fabric.js, este plugin tiene más funcionalidades de las que necesito, pero lo elegí por poder implementar las mismas en una futura evolución de la app.

Por lo demás el resultado lo podéis ver aquí:

https://play.google.com/store/apps/details?id=com.javray.SuperSelfie
https://itunes.apple.com/es/app/superselfie/id957281514