Gulpjs o cómo librarnos de tareas repetitivas

Existe un cierto tópico de que los informáticos somo unos vagos, en cierto sentido no es mentira, pero no es algo exclusivo solo de los informáticos, todos al fin y al cabo somos un poco perezosos y vagos. Tu ponte que te acabas de comprar una estantería de ikea y tienes que montarla, para ello tienes un destornillador y un destornillador eléctrico, ¿me vas a decir que vas a montar todos los tornillos a mano sin utilizar la herramienta eléctrica? Já… tu eres gilipollas… y es que entre hacer una tarea repetitiva durante horas o poder automatizarla mediante herramientas, lo lógico parece ser el hacer uso de esas herramientas y con ese tiempo que has ganado tomarte unas cervecitas y una tapita de aceitunas, aunque claro, de todo hay en los senderos del señor…

Pues eso nos pasa a los informáticos, dentro de nuestra profesión existen tareas que son un auténtico coñazo, a ninguno nos gusta tener que hacer un deploy a mano, borrar caches o minificar hojas de estilo, por eso se han inventado herramientas que nos ayudan a automatizar tareas. Ya hablé en otro artículo de Phing un automatizador de tareas para PHP escrito en XML, pero tenemos herramientas para casi todos los lenguajes y tipo de proyectos, por ejemplo si vienes del mundo de Java tienes Ant, también escrito en XML y si eres demasiado hardcore siempre puedes automatizar tareas escribiendolas en bash.

Pero hoy voy a hablar de Gulpjs, el último hype del momento en el desarrollo front-end.

Gulpjs, ¿harás la colada por mi?

Pues no, de momento Gulpjs no sabe hacer ese tipo de cosas, pero para saber que tareas podemos automatizar lo primero que tenemos que tener presente es la documentación y saber qué es realmente.

Gulpjs es un build system(sistema de construcción) que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más.

Entrando en detalles técnicos, tienes que saber que a diferencia de Gruntjs, Gulpjs no genera archivos temporales a medida que va pasando por cada tarea ya que utiliza streams de Node.js haciendo que sea más rápido que la otra herramienta. Esto significa que, en resumen, Gulpjs solo lee y escribe en disco una sola vez, el resto de procesos los hace directamente en memoria.

Flujo de trabajo de Gulpjs
Flujo de trabajo de Gulpjs

Además otro punto a favor de Gulpjs es que puedes instalar y utilizar módulos de Node.js en tus scripts mientras que con Grunt.js no.

Manos a la obra, instalando Gulpjs

Lo primero que necesitas tener instalado es npm porque como hemos dicho ya, Gulpjs esta construido sobre Node.js. Si todavía no lo tienes tan solo tienes que escribir los siguientes comandos:

sudo apt-get install npm

Ea, ya lo tienes. Ahora lo que tienes que decidir es si quieres instalar Gulpjs de manera global o únicamente en las dependencias de desarrollo de tu proyecto. Si vas por el primer camino, escribe lo siguiente en la terminal.

 sudo npm install --global gulp 

Si por lo contrario, tan solo quieres hacer pruebas en desarrollo y olvidarte de automatizar tareas para volver a la prehistoria, craso error, escribe lo siguiente en tu terminal.

sudo npm install --save-dev gulp

Definiendo nuestro buildfile

En todo archivo de construcción se suelen definir las mismas tareas mas o menos. Estas tareas son el borrado del directorio en el servidor, el borrado de caché de nuestro proyecto, la compilación de less junto con la minificación de archivos javascript y css, el empaquetado del proyecto y el despliegue en el servidor. Esta claro que esto no es algo fijo, sino que cada proyecto tendrá definidas unas u otras.

Por ejemplo, la tarea de borrado del directorio luciría tal que así:

var clean = require('gulp-clean');
var _DESTINATION_DIRECTORY = '/var/www/tu-proyecto';

gulp.task('clean', function () {
 console.log('-----------------------');
 console.log('+      C L E A N      +');
 console.log('-----------------------');
 return gulp.src(_DESTINATION_DIRECTORY, {read: false} )
 .pipe(clean({force: true}));
});

En esta pieza de código de ejemplo podemos ver varias cosas interesantes. Lo primero que se hace es definir la dependencia del módulo gulp-clean en una variable para que podamos usarla en nuestro script.

Para instalar un módulo de Gulpjs tenemos que escribir los siguiente en la terminal.

npm install --save-dev gulp-clean

Para definir una tarea tenemos que hacer uso de la función task en la que le pasamos el nombre que queremos darle y la función que se ejecutará. Ya dentro de la función es cuando podemos empezar a jugar con nuestros ficheros.

Dentro de nuestra tarea, la función gulp.src lo que hace es proveer el origen de ficheros/directorios con los que queremos trabajar y para poder utilizarlos tenemos que utilizar la función pipe. Esto es de lo que hablaba más arriba, pipe es la función que utiliza los streams de Node.js pasando en memoria por cada modificación que se produzca en nuestros ficheros/directorios definidos.

Y para eliminar los directorios que queremos tan solo tenemos que pasarle a la función pipe la ejecución del módulo que hemos instalado junto con las opciones que necesitemos o no.

Por supuesto esto es una primera aproximación a los ficheros de deploy hechos con Gulpjs pero a poco que hayas trabajado con Javascript seguro que serás capaz de construir tareas mas complejas.

Voy a dejar el link a los módulos disponibles para que le eches un vistazo y un script completo con tareas básicas para hacer un despliegue en local pensado para proyectos Symfony para que puedas echarle un vistazo y utilizarlo como base para tus proyectos, pero a cambio te pido un Me gusta de Feisbúh, un +1 de Google o lo publiques en tu Twittah para que se distribuya más rápidamente por la comunidad.

[sociallocker id=446]
Gulpjs buildfile
[/sociallocker]

¡Hasta que volvamos a olernos!

descarga

Test funcionales con PHPUnit

Llevo ya un buen tiempo sin escribir, si no recuerdo mal mi última entrada fue del mes pasado y es verdad que los últimos posts se han centrado más en temas de SEO, poquito a poco he ido olvidándome del tema del que se iba a centrar el blog en un principio, desarrollo, que para eso soy desarrollador…

En los últimos 6 meses de mi vida me he visto centrado en un mega proyecto en el que se han pasado las buenas prácticas de programación por el beicon por eso en esta entrada quiero hablar de una metodología que me gusta especialmente y es el TDD o Test-Driven Development, para el que no lo sepa, tests a cascoporro.

¿En qué consiste el TDD?

El desarrollo guiado por pruebas se basa en que antes de ponernos a desarrollar un módulo de una aplicación, primero escribamos una serie de pruebas que por su propia naturaleza cuando las vayamos a correr por primera vez fallarán y a partir de estos primeros fallos, vayamos escribiendo y refactorizando el código necesario para hacer que los tests no fallen. Obviamente esta práctica hará que los plazos de entrega se retrasen pero esto le da una robustez al código y a la aplicación que no conseguiríamos sin tener que ir tirando del ya mítico prueba y error y arreglando los bugs que vayan saliendo hasta dejar estable la aplicación.

Dentro del TDD podemos y debemos hacer dos tipos de test diferentes, por un lado tenemos los tests unitarios y por otra parte los tests funcionales.

  • Test unitarios: se centran en probar una parte atómica de nuestra aplicación como puede ser el envío de emails del módulo mailer o la conexión con la base de datos. Normalmente suelo escribir este tipo de test en el CRUD de cada entidad. Para automatizar la ejecución de los test, podemos engancharlos con sistemas de Integración Continua como Jenkins o TravisCI
  • Test funcionales: este tipo de test añaden complejidad a las pruebas y consisten en probar módulos completos de una aplicación como el registro de un usuario o la compra a través de un ecommerce. Estos test los podemos enganchar con Selenium.

A día de hoy podemos realizar test con cualquier lenguaje de programación de los más utilizados y de hecho existen librerias como NUnit para .Net y Mono, JUnit para Java, QUnit para Javascript o de la que vamos a hablar hoy PHPUnit para PHP. Antes de entrar en el meollo tengo que aclarar que yo soy de los que si están desarrollando una webapp en la que, lógicamente, se utilizan varios lenguajes, me gusta realizar pruebas para todos los lenguajes…

Instalar PHPUnit

Tal y como nos explican en su página web.

PHPUnit is a programmer-oriented testing framework for PHP.
It is an instance of the xUnit architecture for unit testing frameworks.

Tenemos varias formas de instalar phpunit en nuestra máquina y todo dependerá del tipo de proyecto que tengamos y del alcance que queramos darle.

Descarga global

Con este método nos estamos asegurando que tendremos la librería instalada para poder utilizar en cualquier proyecto, es tan sencillo como descargárnosla y moverla a cualquier directorio de nuestro sistema.

$ wget https://phar.phpunit.de/phpunit.phar
$ chmod +x phpunit.phar
$ sudo mv phpunit.phar /usr/local/bin/phpunit
$ phpunit --version

Descarga en nuestro proyecto

Nos vamos a la raíz de nuestro proyecto y escribimos en una terminal lo siguiente.

$ wget https://phar.phpunit.de/phpunit.phar
$ php phpunit.phar --version

Descarga a través de Composer

Composer es una herramienta que la utilizamos en el desarrollo de aplicaciones web escritas con Symfony aunque no es algo exclusivo, algunos la consideran la versión hiper mejorada de PEAR. Composer es un instalador de dependencias, para el que venga del mundo Java es el Maven de PHP.

Mediante Composer podemos instalar PHPUnit de dos maneras. Si lo hacemos a través de la terminal tendremos que escribir lo siguiente:

$ composer global require "phpunit/phpunit=4.6.*"

También podemos hacerlos añadiendo la dependencia en nuestro fichero composer.json y actualizar, para ello…

{
    "require-dev": {
        "phpunit/phpunit": "4.6.*"
    }
}

Si eres un poco vaguete y no te gusta tirar de código (no sé que haces viendo este artículo sinceramente) tengo otro método que hará las delicias para el que configura sus programas de manera gráfica y es hacerlo a través de las opciones de configuración del PHPStorm.

Para ello nos tendremos que ir a Tools > Composer > Init Composer. Una vez que se haya inicializado hacemos click derecho en el proyecto y seleccionamos la opción de Composer | Add Dependency… y buscamos phpunit/phpunit.

Añadiendo la dependencia de PHPUnit a Composer
Añadiendo la dependencia de PHPUnit a Composer

Una vez que se haya instalado, podremos ver que el directorio vendor, es el que guarda las librerías que necesitará nuestro proyecto, se ha creado un directorio para PHPUnit.

Para que PHPStorm sepa que hemos instalado esta librería y podamos ejecutar los test tendremos que decírselo a través de la configuración global del proyecto, para ello nos dirigimos a Settings > PHP > PHPUnit. Hay varias formas de configurarlo pero lo más fácil es cargando el autoload de nuestras librerías.

¿Desde dónde voy a cargar phpunit?
¿Desde dónde voy a cargar phpunit?

Una vez configurado ya podemos empezar a escribir nuestros test. Esta librería tiene muchísimos métodos para probar cualquier funcionalidad que imaginemos por eso es recomendable que tengas la documentación a mano, pero para que os vaya sonando, un test sencillito se vería tal que así.

    class NotasTest extends PHPUnit_Framework_TestCase{
           public function testAssertTrue(){
                $this->assertTrue(1=1);
           }
           public function testAssertFalse(){
                $this->assertFalse(1=0);
           }
    }

Una vez que ejecutemos estos test, obtendremos algo parecido a lo siguiente.

Los tests han pasado
Los tests han pasado

Con Symfony hay un “problemilla” a la hora de probar el CRUD de nuestras entidades y es que cuando se van a ejecutar las pruebas, el framework todavía no ha cargado el Kernel de la aplicación y por ende el contenedor de servicios no contiene la referencia a Doctrine para poder operar con la base de datos, por ello, yo me he sacado de la manga una implementación de clases base e interfaces que resuelven el problema. Para que se vea con claridad pondré un ejemplo de un proyectillo mio…

Diagrama de mi solución
Diagrama de mi solución

Tal y como se puede ver en el diagrama de la clase base, se hace uso de tres funciones públicas que son necesarias para hacer que esto funciones.

  • Función setUp(): esta función se ejecuta antes de que se ejecute nuestro test, en ella se definen temas de configuración como la carga del kernel y del entity manager. Su ejecución la hace de manera automática la librería liberándonos a nosotros de cualquiera tarea salvo de implementarla y escribir en ella lo que consideremos importante.
  • Función tearDown(): se ejecuta cuando ha terminado de correr nuestro test, normalmente se utiliza para terminar tareas con la base de datos como hacer un flush o un rollback en el caso en que no trabajemos en una base de datos de test.
  • Función getContainer(): como su nombre indica nos devuelve el contenedor de servicios, así de simple.

Voy a dejar el código de cada clase en Pastebin para que podáis pillarlo y utilizar mi implementación en vuestros test pero a cambio os pido que le deis un +1 en Google, un Me gusta en Feisbú o lo compartáis a través de twittah para que así llegue a más personas 😉

[sociallocker id=446]

Descarga clase base

Descarga Interface

Descarga Test

[/sociallocker]

¡Hasta que volvamos a olernos!

Validar un formulario con HTML5

¡Hola hamijos!

Estamos a Lunes y con pocas ganas de comenzar la semana, pero hay una buena Fnoticia relacionada con la programación web. El pasado día 28 de Octubre la W3C elevó todo el conjunto de tecnologías HTML5 a nivel de “recomendación”. Esto es muy importante ya que aunque todavía no sea un estandard como tal, acaba de recibir un apoyo enorme de esta comunidad internacional y que gracias a este gran paso forzará a que los navegadores se vayan actualizando y comiencen a dar soporte completo a estas tecnologías. Esta acción va a ser la leche porque así nos podremos ir olvidando poco a poco de utilizar en nuestros css las etiquetas -moz y -webkit que muchas veces nos complican nuestros desarrollos.

Y para celebrar que HTML5 por fin es una recomendación oficial hoy traigo un artículo sencillito, de fácil digestión sobre las buenas prácticas que deberíamos estar utilizando a la hora de validar nuestros formularios.

Keep Calm and Write HTML5
Keep Calm and Write HTML5

Es mejor morir por paranoico que por descuidado y con esto me refiero a que, en mi modesta opinión, a la hora de validar un formulario deberíamos hacerlo tres veces. Una validación en HTML5, una validación en JavaScript y una última validación ya en el servidor, me da igual el lenguaje.

Validar un formulario con HTML5

Para ilustrar lo que quiero enseñar hoy, he preparado un pequeño ejemplo del formulario que vamos a usar.

<form action="" method="post">
 <label for="nombre">Input con required </label>
 <input type="text" name="nombre" id="nombre" title="Debes escribir un nombre" required/>
 <br/>
 <label for="email">Input con pattern </label>
 <input type="text" name="email_cp" id="email_cp"
 title="Debes escribir un email válido"
 pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
 required/>
 <br/>
 <label for="email_sp">Input de tipo email </label>
 <input type="email" name="email_sp" id="email_sp" title="Debes escribir un email válido" required/>
 <br>
 <label for="textarea">Textarea con maxlength </label>
 <textarea name="textarea" id="textarea" maxlength="5"></textarea>
</form>

En el formulario podemos ver 4 campos que son 3 inputs y un textarea y cada uno de ellos lleva un atributo diferente.

[xyz-ips snippet=”FAQS-GORKAMU-TW-YELLOW”]

El atributo required

Cuando incluimos el atributo required en un input, le estamos indicando al navegador que este campo es obligatorio y que antes de enviar los datos ha de comprobar que no es nulo. Este atributo es de tipo booleano por lo que tan solo su presencia funcionará y no tendremos que declararle ningún valor.

<input type="text" name="nombre" id="nombre" title="Debes escribir un nombre" required/>

Si establecemos un titulo para el input tal y como se muestra en el ejemplo conseguiremos hacer aparezca un mensaje personalizado en el tootip de validación que genera el navegador. En la imagen que pongo debajo se puede ver, al menos en parte ya que la captura de pantalla pilla a media el desvanecimiento del tooltip…

Input con atributo required
Input con atributo required

El atributo pattern

Si, odio las expresiones regulares independientemente de su gran utilidad, que no la pongo en duda, pero no me gustan nada y en HTML5 no podían faltar. Si añadimos este atributo en un input podemos hacer que el texto que introduzcamos en el input case con la regexp que indiquemos. Esto viene muy bien cuando queremos validar que un campo de texto cumpla con un formato, una longitud o un tipo de dato específico.

 <input type="text" name="email_cp" id="email_cp"
 title="Debes escribir un email válido"
 pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
 required/>
Input con pattern
Input con pattern

 

 El atributo type

Para ponernos más puristas, podemos utilizar el atributo type en nuestros inputs. Con esto, le estaremos indicando al navegador el tipo de dato que esperamos recibir. Hay muchísimos tipos diferentes y gracias a HTML5 se han añadido nuevos e interesantes tipos, pero lo más utilizados son los siguientes:

  • type=”email”
  • type=”datetime”
  • type=”search”
  • type=”url”
  • type=”range”

Desde este enlace podéis consultar todos los tipos diferentes que existen.

 <input type="email" name="email_sp" id="email_sp" title="Debes escribir un email válido" required/>

Así pues, si utilizamos el tipo de dato email en un input no tendremos que estar tirando de expresiones regulares ni nada por el estilo. El navegador solito se encargará de validar por nosotros el tipo de datos. Todo un lujo hoygan!!

 

El atributo maxlength

¿Quieres poner un máximo de caracteres a escribir en un input? No hay problema, ya no tienes porque hacer funciones en jQuery que te devuelva el número de caracteres porque con el atributo maxlength podemos decirle al campo de texto que no supere la cifra de caracteres que especifiquemos.

<textarea name="textarea" id="textarea" maxlength="5"></textarea>

Por desgracia no todos los atributos son soportados por todos los navegadores, tal y como pasa con maxlength, pero esto irá cambiando poco a poco y más cuando se apruebe el estandard.

Soporte para MaxLength
Soporte para MaxLength

Desde el enlace que os dejado mas atrás podéis consultar toda la documentación de los tipos de datos y atributos que se pueden poner en los campos de texto para validar un formulario. Además si a esto le añadimos la potencia de las pseudoclases de CSS3 podemos conseguir dotar de un aspecto único a nuestras validaciones. Para ellos se utilizan las pseudoclases :invalid y :required.

input:required:invalid,
textarea:required:invalid{
 background-color:red;
 border: 1px solid red;
}

input:required:valid,
textarea:required:valid{
 background-color:green;
 border: 1px solid green;
}

Junto a este, el validar un formulario con HTML5 son ejemplos muy majos de las cosas que podemos hacer con esta tecnología. Esperemos que por fin lo aprueben pronto como un estandard y lo implementen ya todos lo navegadores, mientras tanto he creado un jsFiddle con el ejemplo del post. ¡Espero que lo disfrutéis!

¡Hasta que volvamos a olernos!

Amable Tumblr Theme

Entre proyectos y proyectos he tenido un poquito de tiempo para empezar a estudiar el sistema de plantillas de Tumblr. Para el que no conozca qué es Tumblr, cosa que dudo, es un sistema de microblogging que se caracteriza por su sencillez, en este blog ya he publicado algo sobre Tumblr, mas concretamente como usar un dominio propio con tu cuenta de este conocido CMS.

En Tumblr puedes publicar todo los tipos de post que podrías publicar con otros tipos de CMS como WordPress o Joomla, además te permite iniciarte en el desarrollo de plantillas ya que tiene un editor de código incrustado que salvo por algunos detalles mínimos, como por ejemplo que no hace uso de ZenCoding, me parece un editor online perfecto. Vale, ya se que existen alternativas online más potentes como CodePen o jsFiddle pero que el propio Tumblr incluya su editor sin que tengas que abandonar la página me gusta y mucho.

Después de trabajar mucho tiempo con un sistema de plantillas como Twig, incluido en Symfony, no me ha costado nada acostumbrarme al sistema de plantillas de Tumblr, además con la documentación a mano todo resulta mucho más fácil y para el siguiente nivel, me tocará empollarme la API de Tumblr para desarrollar plantillas mucho más potentes.

Bien, con todo esto y haciendo un ejercicio de estudio, he creado mi primera plantilla para Tumblr.

Amable Tumblr Theme
Amable Tumblr Theme

Amable Tumblr Theme

Actualmente esta en su primera versión y cómo se trata de un ejercicio práctico no sé si seguiré dandole soporte. Podéis echar un vistazo a la plantilla en funcionamiento desde aquí. Esta plantilla soporta todos los formatos de post que hay en Tumblr que son los siguientes:

  • Soporte para posts de vídeo
  • Soporte para posts fotográficos
  • Soporte para posts de tipo chat
  • Soporte para posts de tipo reblog
  • Soporte para posts de tipo photoset
  • Soporte para posts de tipo audio
  • Soporte para posts de tipo cita
  • Soporte para posts de tipo texto
  • Soporte para posts de tipo link

Además he incluido la posibilidad de añadir el código UA de Google Analytics para llevar un control analítico del sitio y lo he integrado con el sistema de comentarios de Disqus.

Por otro lado, Amable Tumblr Theme incluye integración con redes sociales y ha sido diseñado para que se pueda consumir desde cualquier dispositivo, usease, con diseño responsive. También le he metido un montón de opciones de configuración como cambio de color de textos, de background y ese tipo de cosas que ya os podéis imaginar…

En fin, que os dejo el zip con la plantilla para que podáis descargarla y utilizarla si queréis, pero a cambio os pido una acción social ya que no hay intención de rentabilizarla económicamente. Esta licenciada mediante Creative Commons, así que sentíos libres de borrar cosas, añadir nuevas cosas, estudiarla o trastear con ellas pero no olvidéis citar mi autoría.

Dentro del zip, he metido un pdf que explica como instalarla y cómo personalizar la plantilla pero aviso de que esta en inglés, ya que pienso moverla por foros anglosajones también, aún así se exige un nivel mínimo de “inglés porno” por lo que lo entenderéis bastante bien.

Creo que en mis ratos libres seguiré haciendo plantillas para Tumblr ya que me sirve para no oxidarme y aumentar mi visión creativa que como la gran mayoría de los programadores tengo más desarrollado el hemisferio izquierdo que el derecho…

Y para terminar os dejo con la mencionada Amable Tumblr Theme…

[sociallocker id=”446″]Descargar la plantilla Amable Tumblr Theme[/sociallocker]

Por cierto, estoy cambiando el diseño del blog y me lo estoy tomando con mucha calma, así que hasta que no este terminado no os asustéis si lo veis muy…rudo.

¡Hasta que volvamos a olernos!

descarga

Sobre los permisos en symfony y cuál es mi solución

Hola amiguetes!!

Hoy os traigo mi solución al problema de los permisos en Symfony. Todos los desarrolladores que hemos trabajado con este maravilloso framework conoceremos al dedillo que symfony no sabe gestionar muy bien sus propios permisos cuando se encuentra desplegado en el servidor y creo que todos nos hemos tirado bastante de los pelos cuando empezábamos en el mundo de este framework y no sabíamos porque pasaba. Tengo que aclarar que sobre lo que estoy hablando y cómo yo lo soluciono es bajo un Elementary OS, distribución que mama de Ubuntu, con esto quiero decir que no sé que tal se portarán los permisos en otros sistemas operativos (Windows ejem ejem….)

El origen del problema de los permisos en symfony

Todo esto comienza con dos directorios muy importantes para el framework. Estos directorios son app/cache y app/logs. Estas son las carpetas responsables tanto de guardar los logs de lo que va pasando en el framework, como de guardar una copia del proyecto en cache para así reducir tiempos de carga. Estos dos directorios se suelen subdividir en otros tres directorios diferentes, a saber, /dev , /prod y /test que es la estructura lógica para las tres etapas en el ciclo de vida de un proyecto symfony.

Pues bien, el problema del que hablo viene cuando desplegamos el proyecto, me da igual si es en /dev o /prod, en nuestro servidor. Al acceder a nuestra primera vista, symfony nos arroja un error de que no puede escribir bajo las carpetas de app/cache y app/log y eso esta causado por el usuario que ejecuta el proyecto en /var/www.

Directorios del infierno
Directorios del infierno

Cuando tenemos el proyecto en nuestra carpeta de usuario o en cualquier otro directorio que cuelgue de nuestro $HOME no hay problema porque se ejecutará a través de nuestro usuario que pertenece a un grupo de usuarios que tiene los permisos de lectura y escritura para $HOME y subdirectorios, pero lo que pasa bajo el directorio /var/www es que nuestro usuario actual intenta acceder a zonas en las que no tiene permisos ya que el directorio /var/www unicamente esta gestionado por el usuario www-data y entonces es cuando el proyecto peta y nos avisa que no puede escribir bajo el directorio cache y log.

En la documentación oficial te explican muy bien como solucionar el problemas de los permisos en symfony que pasa por borrar lo que hay en estos directorios en nuestro servidor y volver a darle permisos de escritura al usuario mediante el siguientes comando.

$ sudo chmod +a "www-data allow delete,write,append,file_inherit,directory_inherit" app/cache app/logs

Pero según mi experiencia, se tiene que estar ejecutando este comando de cuando en cuando porque en cada despliegue limpio al servidor que se hace, el sistema decide olvidarse de quien tiene permiso y quien no, así que yo utilizo una técnica totalmente diferente para olvidarme de los permisos y centrarme en seguir programando.

Cómo soluciono yo los errores de permisos en symfony

Ojo, que no digo que mi técnica sea la definitiva ni la mejor de todas, de hecho puede que hasta vaya en contra de las buenas practicas del saber hacer informático pero repito que como a mi me funciona y me siento muy a gusto y cómodo con ella pues sigo adelante y creo que así es cómo debería ser. La cosa es que jamás monto un proyecto symfony, por muy pequeño que sea, sin hacer uso de phing.

Para el que no conozca phing, es una herramienta automatizadora de tareas que se escribe en XML. Con phing puedes hacer cualquier cosa ya que permite ejecutar comandos del sistema y así olvidarte de tareas como mover directorios, borrar ficheros o hacer transferencias entre servidores FTP por ejemplo. El primer artículo que escribí en el blog hablaba de phing y os dejaba la configuración que utilizaba yo por aquel entonces para desplegar un proyecto symfony con tan solo darle a un botón. Os recomiendo que le echéis un vistazo antes para ver de lo que es capaz esta herramienta y la de cosas que podeis hacer teniendo un poquito de imaginación.

Así pues, con phing he conseguido automatizar la tarea de borrar los subdirectorios de app/cache y app/logs y darles permisos 777 en cada despliegue. ¿Que no será la mejor solución? Puede. ¿Que es más fácil darle permisos al usuario y olvidarnos? Posiblemente. ¿Que estos directorios únicamente deberían tener permisos 777 en desarrollo? Pues si.

¿Entonces porque lo hago así? Pues no sé xD es mi manera de trabajar y os la quería enseñar. Pero tal vez es mejor que vosotros acudáis a la documentación oficial y seguir los senderos de la rectitud de lo que nos dice symfony. Y con este chorrazo, os dejo con mi solución.

<target name="dar_permisos_chmod">
<echo msg="Borrando directorios en /var/www/proyecto"/>
<exec command="rm -rf /var/www/proyecto/app/cache/ /var/www/proyecto/app/logs/"/>
<echo msg="Dando permisos chmod de escritura a /var/www/proyecto/app/cache y /var/www/proyecto/app/log"/>
<exec command="chmod -R 777 /var/www/proyecto/app/cache /var/www/proyecto/app/logs"/>
</target>

¡Hasta que volvamos a olernos!

Cómo instalar Android Studio en Linux

¡Hey!
¿Cómo están? Aquí estoy yo otra vez con un artículo sencillito y de utilidad. El programa del que voy a hablar hoy ya tiene unos meses de antigüedad pero no había tenido necesidad de utilizarlo hasta ahora.
Por temas relacionados con un proyecto, me ha tocado instalar Android Studio en Linux, mas concretamente en Elementary OS, la distro que yo utilizo y como bien sabéis esta basada en Ubuntu. Es algo bastante sencillito pero no esta de más que lo repasemos y lo dejemos en el limbo del Internet como una guía rápida.

¿Qué es Android Studio?

Android Studio es el IDE especializado para desarrollos de Android que presentó Google en su conferencia I/O 2013. ¿Y qué se puede hacer con este IDE? Bueno, como su nombre sugiere, programar aplicaciones para Android. Android Studio esta basado en InterlliJ IDEA de JetBrains. Los que me conocéis sabéis que siento predilección por todos los IDEs desarrollados por JetBrains, ya sea para java o php. Mucha gente opina que Eclipse es el mejor IDE en el mercado pero eso es porque no han probado un IDEA, ya que estos programas de desarrollo están a años luz de Eclipse.

Con Android Studio se pueden ver en directo los cambios que estamos haciendo en el diseño de la aplicación y además viene con diferentes resoluciones para que podamos testear como queda la aplicación en cada dispositivo, vamos un responsinator para Android, ¡genial!

Instalar Android Studio en Linux

Lo primero que tendremos que hacer será descargarnos el IDE y el JDK para poder desarrollar. El programa lo podemos descargar desde la página oficial de Developers de Android.

Para el JDK tiraremos de consola y vamos a instalar la versión la versión libre de Java.

sudo apt-get install openjdk-7-jdk openjdk-7-jre

Para estar seguros que se ha instalado bien podemos comprobarlo con el siguiente comando.

java -version

Cuando hayamos terminado este proceso, nos tocará descomprimir el archivo que nos hemos descargado, en este caso un .tar. Esto lo tenemos que hacer bajo el directorio /opt así que de nuevas tiraremos de consola.

sudo tar xzvf android-studio-bundle-130.737825-linux.tgz -C /opt

Por último y no es que sea indispensable sino más bien recomendado, vamos a crear un lanzados para Android Studio. Con esto conseguimos poder anclar el programa en el dock de Elementary o que aparezca en el Unity Dash de Ubuntu. Esto es muy fácil, tan solo se trata de copiar y pegar lo que aparece a continuación.

Abrimos la consola y tecleamos lo siguiente.

sudo gedit /usr/share/applications/android-studio.desktop

Cuando se nos abra el programa escribimos las siguientes líneas:

[Desktop Entry]
Version=1.0
Type=Application
Name=Android Studio
Icon=/opt/android-studio/bin/idea.png
Exec=&quot;/opt/android-studio/bin/studio.sh&quot; %f
Comment=Develop with pleasure!
Categories=Development;IDE;
Terminal=false
StartupWMClass=android-studio

Si no quieres tirar tanto de código ni estar escribiendo, hay una segunda opción y es crear el lanzador directamente desde el mismo programa. Esta opción la tenemos en la ventana principal, la que te da las opciones para crear un proyecto, pues en Configure > Create Desktop Entry.

Con esta opción se estará creando lo mismo que hemos hecho más arriba de manera manual.

 Configurar Android Studio

La primera configuración obligatoria pasa por establecer las variables de entorno y creando la ya tan famosa JAVA_HOME. Esto lo hacemos editando el fichero /etc/environment y añadiendo la siguiente línea.

JAVA_HOME=/usr/lib/jvm/java-1.7.0-openjdk-i386

Como vamos a desplegar nuestros desarrollos sobre Android, parece lógico que necesitemos el kit de desarrollo para Android. Es bastante frecuente que cuando te dispones a descargar el SDK de Android, también conocido como ADT (Android Development Toolkit) te lo ofrezcan con un Eclipse ya configurado para desarrollar, pero como en este ejemplo utilizamos el propio IDE de Android tan solo bajaremos el kit de desarrollo, para ello lo descargamos desde aquí y lo descomprimimos en la carpeta que queramos.

Tenemos que volver a repetir el proceso de establecer las variables de entorno, pero en este caso necesitamos añadir los directorios tools y platform_tools a la variable $PATH. Esto lo volvemos a hacer desde el fichero /etc/environment/

Vale, ya estamos casi. Algunas utilidades del SDK nos van a correr bajo 32 bits. Si nuestro sistema operativo es de 64 bits vamos a necesitar instalar la siguiente librería.

sudo apt-get install ia32-libs

La última instalación que necesitaremos será ANT. No me quiero explayar mucho en esto, pero tan solo diré que ANT, es el phing para Java.

sudo apt-get install ant
Indicando a Android Studio dónde esta el ADT
Indicando a Android Studio dónde esta el ADT

Por útlimo le tenemos que decir a Android Studio donde se encuentra el kit de desarrollo para Android. Esto lo hacemos abriendo sus opciones de configuración desde la pantalla inicial, Configure > Project Defaults > Project Structure y en la primera caja de texto introducimos la ruta de donde hemos dejado el ADT de Android.

Y eso es todo, ya tenemos la instalación y configuración básica de Android Studio en nuestro sistema operativo. Esta claro que aún se puede poner muchas más cosas pero para comenzar no esta nada mal.

¡Hasta que volvamos a olernos!

Datalist: Autocompletar en HTML5 sin Ajax y sus ventajas

Estamos a sábado, hoy no quiero hablar de algo muy espeso ni complicadito ya que como es de entender, los fines de semana la maquinaría se relaja. Este es otro de esos post de relleno que lejos de aportar paja, intenta enseñar algo, por muy poquito que sea, pero que os da las claves para que a partir de esto se puedan desarrollar cosas mas complejas.

En este artículo quiero hablar de una de las nuevas características que nos ofrece HTML5. Y no es otra que de las datalist, que pueden ser fácilmente utilizadas en cuadros de texto para arrojar resultados a medida que vamos escribiendo.

Chuleta con lo nuevo en html5
Chuleta con lo nuevo en html5

Tengo que reconocer que esta funcionalidad es una de esas a las que le tengo manía y no porque no sea útil sino porque cuando he tenido que implementarla en algún proyecto me ha dado mucha pereza programarla y mira que es una tonteria peeeeero…

Vale que existen plugins para jQuery que te permiten hacerlo de una manera muy cómoda, pero la manera tradicional de hacer esto era con eventos de teclado, llamadas ajax y consultas a la base de datos.
Así pues, el programador tenía que capturar el evento keyup del teclado y sacar el valor de la caja de texto para así enviarlo por ajax a un php que con la cadena de texto obtenida hiciera una consulta a la base de datos para ver si nos devolvía algún resultado y con suerte devolver un json con los datos serializados para montar la vista.

Dependiendo de que es lo que queremos hacer con los datos devueltos tendríamos que añadir mas o menos complejidad al asunto, pero la idea básica es la siguiente.

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo buscador de animales</title>
		<script src="jquery-2.1.1.min.js"></script>
	</head>
	<body>
		Buscar un animal: <input type="text" id="caja"/>
	</body>
</html>
<script type="text/javascript">
	$(document).ready(function(){
		var consulta = null;
		$("#caja").on("keyup",function(){
			$.ajax({
                type: 'post',
                cache: "true",
                dataType: 'html',
                beforeSend: function(){
                    consulta = $('#caja').val();
                },
                data: JSON.stringify(consulta),
                url: "resultados.php",
                success: function(data){
                    /* TODO */
                }
            })
		});
	});
</script>

Como veis, esto produce una cantidad innecesaria de llamadas a la base datos. Con los datalist de html5 podemos optimizar el rendimiento mejorando la experiencia del usuario.
Estos datalist nos permiten definir el contenido de los cuadros de texto tal y como lo haríamos con los select mediante los elementos de tipo option.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-2.1.1.min.js"></script>
</head>
	<body>
	Buscar un animal: <input type="text" list="animales" id="caja"/>
	<datalist id="animales">
	    <option label="Carnivoro" value="Perro" data-id="1"/>
	    <option label="Herbivoro" value="Caballo" data-id="2"/>
	    <option label="Carnivoro" value="Oso" data-id="3"/>
	    <option label="Carnivoro" value="Mapache" data-id="4"/>
	    <option label="Herbivoro" value="Reno" data-id="5"/>
	</datalist>
	</body>
</html>

La idea básica de esto sería hacer que el servidor nos devolviera el contenido de este input en json y montarlo todo en la vista.

Soporte en navegadores

Este control podemos utilizarlo de una manera fiable en casi todos los navegadores excepto en Safari. En concreto, esta soportado por los siguientes navegadores:

Compatibilidad datalist
Compatibilidad datalist

De todas maneras hay una opción para los navegadores que no soportan los datalist y es mediante el control select. La opción habitual es sustituirlo para que los usuarios puedan elegir simplemente desde una lista. Para ello bastaría con anidarlo dentro con las opciones completas, su value y el texto a mostrar.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-2.1.1.min.js"></script>
</head>
	<body>
	Buscar un animal: <input type="text" list="animales" id="caja"/>
	<select id="animales">
	    <option value="Perro" data-id="1">Perro</option>
            <option value="Caballo" data-id="2">Caballo</option>
            <option value="Oso" data-id="3">Oso</option>
            <option value="Mapache" data-id="4">Mapache</option>
            <option value="Reno" data-id="5">Reno</option>
	</select>
	</body>
</html>

El problema de esta solución es que se mostrarán los dos controles, el cuadro de texto y la lista desplegable, cosa que queda bastante fea de cara al usuario y puede hacer incluso que se malinterpreten los datos.

Los dos controles bien juntitos
Los dos controles bien juntitos

De todas maneras, no nos vamos a librar en cualquier caso de tener que validar los datos recibidos en el servidor ya que los datalist no aportan nada a la seguridad, tan solo es una ayuda visual que mejora la usabilidad y experiencia de la web, tened eso siempre presente.

Y con esto termina el artículo sobre el datalist, elemento que ayuda mucho pero que por desgracia no podemos estirar mas en la explicación de su uso ya que donde no hay mata…

 

¡Hasta que volvamos a olernos!

Hablando de BD, como instalar MariaDB en Linux

Estamos a últimos de Agosto, hace calor, los más afortunados aún siguen de vacaciones y otros estamos con el síndrome postvacacional pero tarde o temprano hay que volver a la rutina y otra vez a coger ritmo de trabajo.

Llevo varios meses sin pasar por el blog, se que esta mal, que hay que sacar contenido de manera regular pero no puedo justificarlo, a mi me cuesta mucho escribir un blog, es lo que hay, pero para recompensar esta carencia le estoy dando un nuevo aspecto al blog y además en cada post que escribo intento contar algo que sea útil, por lo que de vez en cuando aporto una perlita a este desierto llamado blog.

En este artículo quiero enseñar cómo se instala MariaDB en un sistema Linux, pero antes de entrar en harina hay que explicar que es MariaDB sobre todo, no ya para los que trabajamos a diario con estas tecnologías que ya hemos oído hablar de ella, este artículo esta orientado a aquellos neófitos de las tecnologías web.

Para que se entienda, MariaDB es un proyecto derivado (fork) de MySQL. MySQL es una base de datos enormemente popular usada por páginas web y aplicaciones web. Si usáis o habéis usado un CMS como podría ser WordPress o Drupal tenéis que saber que sois o habéis sido usuarios de MySQL y posiblemente sin que lo supierais.
Pues MariaDB es lo mismo, es una base de datos orientada a páginas web y aplicaciones pero que a diferencia de su hermana MySQL, MariaDB posee una licencia GPL.

Existe mucha historia entre MySQL, MariaDB, Oracle… pero el tema del artículo no es ese, sino la instalación así que os dejo un enlace por si queréis documentaros más.

 

Principales SGBD
Principales SGBD

Como instalar MariaDB en Linux

El primer paso para tener este sistema gestor de base de datos corriendo en nuestro equipo es importar la llave con el comando apt-get key desde la terminal.


sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com 0xcbcb082a1bb943db

Después tendremos que editar el archivo de repositorios con el comando
sudo nano /etc/apt/sources.list

Y añadir las siguientes líneas

# MariaDB 5.5 repository list - created 2012-10-27 21:11 UTC
# http://downloads.mariadb.org/mariadb/repositories/
deb http://mirror.aarnet.edu.au/pub/MariaDB/repo/5.5/ubuntu precise main
deb-src http://mirror.aarnet.edu.au/pub/MariaDB/repo/5.5/ubuntu precise main

Con esto ya podemos actualizar los paquetes de nuestro repositorio

sudo apt-get update

Y procedemos a la instalación de MariaDB

sudo apt-get install libdbi-perl libdbd-mysql-perl psmisc
sudo dpkg --install mysql-common_5.1.42-mariadb73_all.deb
sudo dpkg --install libmariadbclient16_5.1.42-mariadb73_amd64.deb libmysqlclient16_5.1.42-mariadb73_amd64.deb 
mariadb-client_5.1.42-mariadb73_all.deb mariadb-client-5.1_5.1.42-mariadb73_amd64.deb mariadb-server_5.1.42-mariadb73_all.deb 
mariadb-server-5.1_5.1.42-mariadb73_amd64.deb

Con estos comandos ya tendremos instalado MariaDB en nuestro pc, hay que decir que la instalación la he hecho en mi ordenador bajo la arquitectura que ofrece ElementaryOS, es decir, Ubuntu.

Para los vaguetes a los que no les apetezca leer toda esta parrafada, he subido un vídeo de un tipo en el que explica cómo instalar MariaDB en ElementaryOS pero a cambio os pido tweet, un +1 o un me gusta para poder desbloquear el video, los dioses de la programación os lo agradecerán.

[sociallocker]


[/sociallocker]

Esta información la he sacado de su documentación oficial y espero que os haya servido 😉

¡¡Hasta que volvamos a olernos!!

descarga

Cómo usar Wordpress junto a Symfony mediante configuración de htaccess

Llevas varios meses desarrollando una aplicación web con Symfony, has entendido todos los conceptos, MVC, Routing, Symfony Rewrite… ahora toca tener un blog que hable de las maravillas de tu aplicación y a través de ella puedas atraer a tu público objetivo. Tu primera opción es delegar a los sabios e instalar un CMS, tal vez tus primeras opciones sean WordPress o Joomla. Cuando estas en plena faena te das cuenta que no es tan fácil como te habías imaginado, empiezas a buscar por todos los rincones de StackOverflow que línea concreta hará que tu htaccess no se queje. Tras mucho buscar sigues sin encontrar nada y cada vez te desesperas más porque no consigues hacer funcionar tu WordPress o Joomla y una idea nueva te viene a la cabeza, desarrollar tu propio CMS, intentas alejarla de tu cabeza porque no quieres pasar por ello cuando ya existen soluciones mejor programadas de lo que podrías hacer tu. Con esta línea temporal he intentado resumir lo que me ha pasado a mi durante la semana pasada y por fin he encontrado la solución.

 

Cómo hacer que WordPress y Symfony cohabiten juntos

En mi semana de investigación y desespero he visto muchas soluciones de todo tipo pero desgraciadamente no funcionaban, o por lo menos, yo al ser un manco no conseguía hacer funcionar en mi proyecto. He visto un par de Bundles interesantes como este para hacer un merge de las funcionalidades de WordPress y Symfony y utilizar ambas dos herramientas dentro del mismo proyecto. También he visto miles de configuraciones del fichero htaccess diferentes, creo que me salen las Regexp por las orejas y es que nunca se me han dado muy bien, siempre las he tenido atragantadísimas.

Dentro de un proyecto Symfony, la parte pública en la que están los controladores frontales es la carpeta /web, pues bien, dentro de la carpeta /web he creado el directorio /blog en el que se alojará toda la instalación de WordPress.

La configuración del fichero htaccess de la carpeta web es la siguiente

DirectoryIndex app.php
DirectoryIndex app.php
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ app.php [QSA,L]
</IfModule>
<IfModule !mod_rewrite.c>
    <IfModule mod_alias.c>
        RedirectMatch 302 ^/$ app.php/
    </IfModule>
</IfModule>

Y la configuración del fichero .htaccess del directorio blog es la siguiente:

DirectoryIndex index.php
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ /blog/index.php [QSA,L]
</IfModule>

Con esta configuración lo que estamos haciendo es que cada petición que hagamos a nuestra aplicación, sean los controladores frontales y el sistema de re escritura de symfony los que se encarguen de procesarla y servirla y que cuando queramos acceder a nuestro blog o a algún recurso contenido en el directorio /blog, que sean los controladores de WordPress los encargados de procesar la solicitud. Con estas configuraciones estamos delegando en dos actores diferentes.

Puede que no sea la mejor opción si nos ponemos muy puristas pero es la solución que a mi me ha funcionado.

Si estabais con el mismo problema que yo y habéis caído por casualidad en este blog, espero que os funcione a la perfección como a mi, en cualquier caso podéis utilizar los comentarios para sugerir otras opciones. Y por lo que a mi me respecta…

¡Hasta que volvamos a olernos!

Cómo usar un dominio propio en Tumblr

Hoy vengo a hablar de algo un poquito más diferente a los típicos artículos sobre programación o nuevos frameworks. Hoy quiero contaros que hay que hacer para poner un dominio personalizado a un blog de Tumblr.

Cómo usar un dominio propio en Tumblr

Actualmente he abierto un blog de tumblr para propósitos puramente comerciales, si vaya lo típico, rebloguear chistes e imágenes graciosas para así poder posicionar alto y atraer tráfico de un público que por lo general no se pasará por blogs como éste. Tumblr esta genial para estos propósitos ya que es tan sencillo que no te tienes que preocupar demasiado en temas relacionados con la configuración como podría ser con un blog montado bajo WordPress. Tumblr te lo da todo montado para que tu únicamente te dediques a poner un tema y empieces a generar contenido, ademas su sistema de cuentas te permite tener un blog gratuito bajo su propio dominio, pero bueno realmente ¿quien no conoce Tumblr y su funcionamiento?

Al ser un blog gratuito la url de tu blog queda algo así

http://nombreDeBlog.tumblr.com

Con este artículo aprenderéis a configurar vuestro sitio para que quede un dominio tal que así.

http://www.nombreDeBlog.com

 

Comprar un dominio

Una vez hayáis abierto una cuenta en tumblr y lo hayáis personalizado lo que tendréis que hacer es comprar un dominio en cualquier servicio.  Dominio solo, sin hosting. Yo para el ejemplo he elegido registrar el nombre a través de Don Dominio. Después de haber realizado la compra, para configurarlo tendréis que dirigiros a la zona DNS de vuestro panel y ahí editar las zonas de tipo A y el CNAME, es decir, de todos los valores que os aparecerán tenéis que editar el dominio que aparece sin las www y el que aparece con www tal y como aparece en la siguiente imagen.

Ejemplo de Zona DNS
Ejemplo de Zona DNS

En el valor de la Zona A hay que poner la dirección IP de los servidores de tumblr (66.6.44.4) y en la zona de tipo CNAME hay que poner domains.tumblr.es

Con esto ya estará configurado el dominio para que redirija a vuestro tumblr.

[xyz-ips snippet=”FAQS-GORKAMU-TW-YELLOW”]

Configurar Tumblr

El siguiente paso es entrar en la configuración de vuestra cuenta de tumblr, en el menú superior al lado del logotipo de tumblr hay que pinchar en el icono de una rueda de engranaje.

Icono de configuración de tumbrl
Icono de configuración de tumbrl

Y ahí hay que pinchar en la parte que dice Nombre de Usuario para después activar la opción de Utilizar un dominio personalizado. Una vez hayáis pinchado esta opción se os activará una caja de texto en la que tendréis que poner vuestro nombre de dominio tal y como aparece en la siguiente imagen.

Nombre de usuario y dominio personalizado en tumblr
Nombre de usuario y dominio personalizado en tumblr

Si habéis seguido el articulo al pie de letra ya habréis terminado todo el proceso de configuración. Hay que decir que no lo podéis hacer una vez que se haya comprado el dominio ya que se tarda un par de días en que todo el proceso de propagación del dominio se realice satisfactoriamente así que eso, esperaos unas 48 horas para configurar tumblr.

 

Si tenéis alguna duda de como hacer este proceso porque no os sale u os pueda surgir cualquier problema no dudeis en utilizar los comentarios y os echare una mano sin ningún tipo de problema.

 

¡Hasta que volvamos a olernos!