Archivos de la categoría Programación

Primeros pasos con git

Como dije ya en su momento, git es un sistema de control de versiones. Ahora que ya tenemos git inicializado tenemos que aprender las posibilidades más básicas que nos ofrece.

Para empezar tendremos que crear un repositorio. Para esto usaremos:

git init

En caso de que algún colega ya tenga un repositorio lo que haremos será:

git clone username@host:/path/to/repository

 En el caso que esté alojado en github, este link lo encontraremos en el lado derecho debajo de “SSH clone URL”.

Ahora que tenemos los ficheros en nuestro ordenador, tocará trabajar con ellos. Una vez hayamos hecho el cambio que queríamos tenemos que proponer un cambio. Para esto usaremos:

git add nombreArchivo

o si simplemente queremos subirlo todo haremos

git add *

Pero para realmente remitir los cambios tendremos que usar:

git commit -m “mensaje que queramos”

 Cabe indicar que cuanto más descriptivos los mensajes mejor, ya que cuando haya conflictos nos servirá para entender mejor como debemos proceder.

Ahora después del commit, tenemos los cambios “guardados” en el fichero HEAD de nuestro ordenador. Ahora tocará enviar nuestros cambios al directorio remoto. Para esto usaremos el siguiente comando:

git push origin master

Espero que os haya servido ya que va a haber algunos más! :)

GitHub vs Bitbucket: Que control de versiones Git usar?

El otro día hablando sobre proyectos con mis compañeros descubrí, que a diferencia de lo que pensaba algunos de ellos no alojan sus proyectos en GitHub. Por lo que con toda mi curiosidad quise saber cual es la diferencia entre los dos.

Ambos pueden usar Git como sistema de control de versiones. Como “punto a favor” Bitbucket soporta Mercurial aunque ninguno de los dos Subversion. Por lo que Bitbucket ganaría este punto, aunque no es muy significativo.

Repositorios públicos vs privados. En GitHub no te permite tener repositorios privados a menos que pagues una mensualidad (o seas estudiante). Por el contrario Bitbucket si que ofrece la posibilidad de tener repositorios privados sin ningún coste añadido. Por lo que ambos tienen ventajas e inconvenientes.

El punto anterior está sub-editado a la forma que tienen de monetizar ambos servicios. GitHub factura en función de la cantidad de repositorios privados que quieras tener (max. 50 por 50$/mes), por el contrario Bitbucket monetiza el servicio basándose en el número de colaboradores (ilimitados por 200$/mes).

La comunidad de Github es 4 veces la de Bitbucket por lo que en este caso no hay discusión alguna, 4M usuarios a 1M. Además curiosamente encontré algunos proyectos alojados en ambos sitios, por ejemplo GitHub hospeda el Kernel de Linux, MongoDB y Neo4j y Bitbucket Aldrin y TortoiseHg entre otros. Por lo que va a ser bastante más fácil encontrar información sobre GitHub.

Para autenticarnos Githb solo ofrece GitHub mientras que Bitbucket a parte de ofrecer la autenticación de GitHub ofrece la de Facebook, Twitter, OpenID y Google. En este caso no hay discusión alguna.

En conclusión, creo que la decisión depende mucho del tipo de proyecto. Yo personalmente uso GitHub porque es el primero que me enseñaron. Uso repositorios privados usando el email de la facultad, pero si no los tuviera probablemente usaría Bitbucket por sus similitudes y la probabilidad de “ocultar” los proyectos de clase.

La información la he recopilado básicamente de las dos fuentes siguientes:

Inicializar git en Linux

Según wikipedia: Git es un software de control de versiones, pensando en la eficiencia y la fiabilidad del mantenimiento de versiones de aplicaciones cuando estas tienen un gran número de archivos de código fuente.”

1- Instalar Git

$ sudo apt-get install git-core

2- Asignar una identificación

$ git config --global user.name "Paco"
$ git config --global user.email paco@ejemplo.com

Ahora para enlazar nuestro pc con la cuenta en github.

3 – Comprobando los certificados

$ cd ~/.ssh
$ ls -al

Si con los comandos anteriores encontramos alguno de los siguientes ficheros id_rsa.pub o id_dsa.pub puedes saltarte la generación de una nueva clave SSH e ir directamente a añadir tu clave en Github, paso 5.

4- Generar una nueva clave SSH

$ ssh-keygen -t rsa -C "paco@ejemplo.com"
$ ssh-add id_rsa

Te pedirán que entres una frase de contraseña (passphrase) dos veces (guardatela).

5- Añadir tu clave SSH a Github

Puedes printar por consola el texto usando el siguiente comando:

$ cat ~/.ssh/id_rsa.pub

Y luego desde pantalla copiar el texto.

Finalmente en Github iremos a Account settings en el apartado de SSH keys y una vez allí en el campo de la Key pegaremos el output de la consola anteriormente copiado.

Para comprobar que lo hemos hecho todo correctamente podemos usar el siguiente comando:

$ ssh -T git@github.com

Introducción a la implementación continua o Continuous Deployment

Hace poco di con el blog de Timothy Fitz principalmente porqué era citado en libro Lean Startup de Eric Ries  ya que explicaba en método de implementación continua de software. Considero y supongo que Eric Ries también que están ligados con los métodos Lean en las empresas.

La implementación continua consiste en que cada vez que se haga un commit el sistema ejecutará los tests anteriormente desarrollados sobre una copia real de los datos para comprobar que el trozo de código no contiene ningún error. Si es así luego se pasan a producción automáticamente.

Lo que menciona Timothy es que pasan el código a producción pero sólo para una porción de los usuarios durante X tiempo, si pasado ese tiempo no genera problemas el código se extenderá a todos los usuarios.

Los tests tienen que ser de tres tipos para asegurar la integridad de la aplicación. Los tests unitarios, son la base de la pirámide y de los que debería haber más. Luego están los tests de integración que pretenden encontrar problemas con otras partes del software o con otro software y los tests de interfaz (GUI) que son los minoritarios pero también son necesarios.

El objetivo de todo esto es tener un repositorio con todo el código y que los commits se hagan a diario evitando que los desarrolladores hagan piezas inmensas que luego no funcionen. También se pretende que se automatice la implementación desarrollando a más velocidad y comprobando siempre la fiabilidad en datos reales y obteniendo un feedback rápido de integraciones conflictivas, conflictos de integración y demás problemas habituales.

Todos los puntos anteriores juntos permiten ver los resultados de cualquier implementación además de tener siempre las últimas piezas de código funcionales “a mano”.

Como contrargumentos, o desventajas, se tiene que preparar el entorno antes de empezar, esto conlleva un “elevado” coste en tiempo de implementación y de desarrollo de tests.

Bonus: Os dejo los links en inglés todo, de dónde he sacado la información para si queréis leéroslo vosotros. Continuous integration , Getting Started with Continuous Deployment , Scaling Up Continuous Deployment  y Continuous Deployment at IMVU: Doing the impossible fifty times a day

Introducción a las expresiones regulares

Según la wikipedia una expresión regular, a menudo llamada también patrón, es una expresión que describe un conjunto de cadenas sin enumerar sus elementos.

Ayuda a encontrar elementos en un texto que coincidan con la descripción de la expresión de un modo más simple y rápido que de cualquier otra forma.

Las expresiones regulares tengo que reconocer que son algo complicadas pero cuando se entiende tiene un enorme potencial. Pero algún día hay que empezar no? Así que mejor que nos pongamos manos a la masa.

Carácteres básicos:

  • \ para mi probablemente sea uno de los caracteres más importantes. Sirve para hacer que el carácter que precede pierda su significado y pase a ser un carácter normal. Por ejemplo \* pasaría a buscar un * o \\ (doble barra invertida) pasaría a ser una sola.

  • . indica que le falta un carácter es decir ‘.asa’ puede devolver ‘casa’, ‘basa’… pero nunca ‘asa’.
  • ? indica que el elemento predecesor puede estar o no, por ejemplo ‘casa?’ Puede devolver ‘casa’ o ‘cas’.
  • * este elemento permite que el elemento anterior pueda estar desde 0 veces a infinitas, por ejemplo, ‘casa*’ puede ser ‘cas’, ‘casa’ o ‘casaaaaaaaaa’
  • + implica que el carácter al que está asociado pueda por lo menos una o más veces. Sigamos con el ejemplo ‘casa+’ puede ser ‘casa’, ‘casaaaa’ pero en ningún caso ‘cas’.
  • ^ indica que está en el principio de la cadena.

  • $ este por el contrario indica que se encuentra en el fin.

  • () sirve para agrupar un conjunto de elementos, por lo que ‘(casa)‘ pararía a ser un solo elemento ocasionando que ‘(casa)+’ pudiera devolver ‘casacasacasa‘ o simplemente ‘casa’.
  • | (barra vertical) sirve para marcar una ‘o’ (para los programadores seria el equivalente a una or). Por ejemplo ‘(casa|hogar)’ puede devolver ‘casa’ o ‘hogar’, en ningún caso ‘casahogar’.
  • [] los corchetes brindan la posibilidad de escoger entre uno de los elementos que están en su interior. Se pueden marcar rangos usando el guión medio. ‘[a-z]‘ nos puede devolver cualquier letra minúscula de la ‘a‘ a la ‘z‘.
  • {} puede contener uno o dos números separados por una coma. Vendría a ser el elemento propio equivalente y de uso idéntico a ?, +, * pero personalizado. Por ejemplo ‘{2, 7}‘ quiere decir que el elemento se puede repetir mínimo dos veces pero con un máximo de 7. Con ‘{7,}‘ indicas que de 7 hasta infinito.

Mi primera expresión regular pensada íntegramente por mi y que funciona, sirve para encontrar las url de un texto.

(https?\:\/\/)*[0-9a-zA-z\-\_\.]+\.(com|es|net|org|info)\/*[a-zA-z\-\_\.\/]*

 Pero vamos a verla por partes:

 (https?\:\/\/)* => Este trozo indica que tiene que usar el protocolo ‘http’ o ‘https’ (de aquí el interrogante después de la ‘s’ juntamente con \: para indicar que van los dos puntos y \/ dos veces esto para señalar que quiero una barra normal.

[0-9a-zA-z\-\_\.]+ => esto sería el cuerpo de la url antes de la extensión. Puede constar de uno o más elementos en minúsculas, mayúsculas, números guiones o puntos (subdominios).

\.(com|es|net|org|info) => indica que ahora consta de un punto seguido de una de las extensiones com, es, net, org o info.

\/*[a-zA-z\-\_\.\/]* => y finalmente brinda la posibilidad de que sea un subdirectorio

Manual sobre “Open Graph Protocol”

Hasta hace poco Facebook “escaneaba” la página y con ella extraía los elementos que consideraba más interesantes, como el título, un breve resumen del sitio, un vídeo o una imagen si existían, etc. Con “Open Graph Protocol” puedes definir en cualquier página web el valor los elementos del objeto que se muestra en Facebook. Lo que resumiendo sería que si pones esto el usuario al compartir (o darle like) a tu página posiblemente mostrará más información que antes.

En este link podéis encontrar un vídeo (en inglés) sobre Open Graph Protocol, explicado por uno de los ingenieros de Facebook (tiene mucho acento indio, espero que no os cueste entenderle).

Estas “metas” se ponen dentro del head de la página. En los ejemplos lo ponen justo debajo del tag <title> yo lo pondría después de las meta “normales”, aunque cada cual que lo ponga dónde más le guste.

Probablemente las que vayas a necesitar estén dentro de este listado:

<meta property=”og:title” content=”Manual Open Graph Protocol”/>
<meta property=”og:url” content=”http://rocreguant.com/Manual-sobre-Open-Graph-Protocol”/>
<meta property=”og:description”content=”Brebe introducción sobre Open Graph protocol (impulsado Facebook), para implementarlo de forma simple en cualquier sitio web.”/>

Luego también se puede añadir metas como imágenes o vídeos (estos ejemplos han sido sacados de la web oficial)

<meta property=”og:image” content=”http://ia.media-imdb.com/rock.jpg”/>
<meta property=”og:video” content=”http://example.com/bond/trailer.swf” />

Pero esto no termina aquí! Utiliza Open Graph Protocol para que Facebook trate tu URL como una Fanpage! ([EN] fuente)

Esto lo puedes conseguir añadiendo una de las siguientes lineas de código.

<meta property=”fb:admins” value=”USER_ID1,USER_ID2″ /> (dónde USER_ID2 y USER_ID2 serian los administradores)

O bien usando:

<meta property=”fb:app_id” value=”1234567″ /> (dónde value sería el ID de vuestra app en facebook)

Con esto podrás acceder a tu panel de analytics como el de las Fanpages, en el que te muestra los usuarios activos diarios, los likes, los nuevos usuarios…

Para más información podéis consultar la web oficial de Open Graph Protocol.

Bonus: Lo que se comenta en las altas esferas es que puedes usarlo para “engañar” a Facebook. Por ejemplo, tu haces un vídeo relacionado sobre el post que has escrito pero sin ponerlo como embedded. Lo pones como meta, y la gente al darle al like a la página sin vídeo comparte el vídeo. (link black)

Generar frases aleatorias en el header de nuestro WordPress

Hace tiempo vi algunas webs que tenían frases aleatorias en el header del blog. Y la idea me gustó, así que me la anoté. Ahora por fin he tenido algo de ganas y tiempo para llevarla a cabo y escribir su post correspondiente 😛 Empecemos!

Primero por la programación, añadiremos la función al archivo functions.php de nuestro theme de WordPress y luego ejecutaremos la función en el header de nuestro blog. Vamos a ver lo más detallado.

El código que va a functions.php:

function frases() {

$frase[0] = “Hola a todos”;

$frase[1] = “Adios a todos”;

$frase[2] = “me gustan los árboles”;

$cantidad = count($frase)-1;

echo $frase[rand(0,$cantidad)];

}

Como veis es de lo más sencillo. Simplemente tenéis que cambiar las frases ya existentes y si queréis poner más teneis que añadir $frase[3] = “nueva frase”; cambiando el 3 por los números adecuados.

Vamos a cambiar el header ahora. Dentro del hgroup y debajo del <h2> he puesto esto:

<div align = “right”> <?php frases()?> </div>

El frasesm es la clase que he creado para el CSS (explicado más adelante) y el frases() es la función que se ejecuta para obtener las nuevas frases.

La nueva clase CSS, tengo que decir que ha sido lo que me ha costado más ya que no estoy habituado a ello. El código:

.provarara { position: absolute; top: 80%; left: 0; width: 100%; color: white; font: bold 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding: 0px; padding: 0 2px; background: none; }

Decir que todo es cambiable y no lo voy a explicar todo, básicamente he ido probando cosas para adaptarlo. Aun estoy probando así que puede ser que cuando leas esto el código sea otro.

Creo que con esta modificación y algunos plugins que le añadiré doy mi blog por tuneado durante una temporadilla.

Fuentes: http://forobeta.com/wordpress/28315-poner-frases-rotatorias-header.html y http://www.cssblog.es/ejemplos/bloques-texto-imagen/ejemplo_bloque_texto_imagen.html

PD: Finalmente no he modificado demasiado. Aunque espero que os sirva 😉

Manual para la instalación de un emulador de Android en Eclipse

Este manual nos va a servir para crear un emulador de Android en nuestro entorno de desarrollo Eclipse para no tener que estar comprobando todo el rato en el dispositivo. Ese se podría decir que es la continuación de la preparación de nuestro entorno de desarrollo eclipse para Android.

  1. Iniciamos Eclipse, y vamos a Window > AVD Manager
    Si no te muestra esta opción puedes ir a window > costumize prespective. Luego ya dentro podrás encontrar en la pestaña “Command groups availability” la opción para marcar un check box de Android SDK and AVD Manager, marcas el check box guardas y ya te saldrá la opción anterior en el menú.

  1. Le damos al botón de New y se nos va a abrir otra ventana de diálogo.

  2. En la nueva ventana de diálogo al nombre le ponemos el que queramos, como por ejemplo emulador y en target escogemos la versión del SO de Android que queramos usar.

  3. Le damos a Create AVD

  4. Cerramos el manager de Android Virtual Device

  5. Y ya tenemos el emulador listo! 😀

Bonus: Cada vez que iniciéis el emulador os va a tardar mucho rato (minutos) en cargar, por lo que lo podéis dejar abierto y para testear pulsáis solo al “play” (al botón de run).

Bonus Linuxero: Como el emulador abierto consume más recursos de lo que nos gustaría, pero cerrarlo y abrirlo cada vez es un tostón podemos pausarlo. Nos aseguraremos que lo tenemos abierto y buscaremos el PID. Para saber el PID, haremos ps -e en la consola. Dentro del listado buscaremos dónde ponga “emulador” (o el nombre que le hayas puesto) y nos aprenderemos el número de al lado. Una vez hecho esto desde la consola pondremos “kill -STOP numero-pid-encontrado” y cuando queramos volver a testear la aplicación pondremos “kill -CONT numero-pid-encontrado”.

Configurar eclipse para programar para Android

Como ya lo he hecho un par de veces (una primera con la que hice esta aplicación y esta vez) y nunca me acuerdo como se hace lo voy a dejar escrito para la próxima vez. Es más fácil de lo que parece, así que no tienes excusa para no aprender a programar para Android.

  1. Instalar el Java Development Kit (JDK)

  2. Instalar eclipse. Este paso y el anterior son conmutables, aunque lo he puesto así porque me parece un orden más lógico no pasa nada si se hacen a la inversa.

  3. Instalar el SDK de Android. Lo que se tiene que ejecutar es el archivo Android que está en tools (en Linux por lo menos).

  4. Instalar ADT para eclipse. Para esto podemos seguir el siguiente minitutorial dentro de este tutorial:
  • A abriremos el eclipse y en el desplegable de Help seleccionaremos Install New Software.
  • Pulsaremos sobre Add (arriba a la derecha).
  • Añadiremos un nombre (para tu bien más o menos descriptivo) y en Location pondremos este enlace: https://dl-ssl.google.com/android/eclipse/ (si tienes problemas prueba pon http en vez de https) y dale next
  • Ahora marca Development tools y dale a next, te muestra los ficheros dale next.
  • Finalmente “lee” las condiciones y dale a Finish, si te da un error de la autenticidad del Software dale a Ok.
  • Para terminar reinicia eclipse y empieza a programar el próximo Angry Birds

Si programáis algo espero que lo colguéis en Google Play y me paséis el link! 😉

Mostrar las entradas relacionadas de un post sin plugins

Como ya sabréis los plugins relentece el rendimiento de WordPress, por eso cuantos más evitemos instalar mejor. Para esto voy a intentar realizar una saga para insertar algunos plugins en el mismo código de WordPress. Así que este primero se trata de mostrar las entradas relacionadas de un post sin la necesidad de plugins.

Para empezaremos accederemos al fichero functions.php y añadiremos este código:

 

function getRelatedPosts ($post_id){

$taxs = wp_get_post_tags( $post_id );

if ( $taxs ) {

$tax_ids = array();

foreach( $taxs as $individual_tax ) $tax_ids[] = $individual_tax->term_id;

 

$args = array(

‘tag__in’ => $tax_ids,

‘post__not_in’ => array( $post->ID ),

‘showposts’ => 5,

‘ignore_sticky_posts’ => 1

);

 

$my_query = new wp_query( $args );

 

if( $my_query->have_posts() ) {

while ($my_query->have_posts()) : $my_query->the_post();

?><h3><a href=” <?php the_permalink();?> ” rel=”bookmark” title=” <?php the_title(); ?> “> <?php the_title() ?></a></h3> <?php

endwhile;

} else {

echo “<h2>No related posts found!</h2>”;

}

}

$post = $backup;

wp_reset_query();

}

Éste código lo que hace es relacionar tags y mostrar los 5 posts que tengan tags similares. Los escribe por pantalla.

Ahora abriremos el fichero single.php (dentro de tu theme) y allí escribiremos el siguiente código dónde queramos que aparezcan las entradas relacionadas.

<div class=”related_posts”>

<?php

getRelatedPosts ( get_the_ID() );

?>

</div>

y para terminar al fichero style.css (dentro de tu tema) añadiremos el siguiente código para darle formato a los posts relacionados.

.content .related_posts {width: 580px; font-size:10pt;font-family: Arial; font-size: 11px; color: #333;}
.content .related_posts a {color: #2f99c9;}

Espero que os haya gustado! Alguna propuesta para el próximo no plugin?