Archivo de la etiqueta: manual

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 [email protected]:/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! 🙂

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 [email protected]

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 "[email protected]"
$ 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 [email protected]

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

Solución al error de WordPress que da al usar memoria

El otro día felizmente intenté entrar en el panel de control de WordPress para moderar comentarios y añadir un nuevo post y me encontré con este error:

Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 71 bytes) in /public_html/wp-includes/capabilities.php on line 1211>

No sé si es culpa mi hosting 000webhost, o que pero he estado buscando la solución y ha resultado ser que tenía que colocar la siguiente linea en wp-settings.php (dentro del directorio principal).

define(‘WP_MEMORY_LIMIT’, ’96M’);

Normalmente las definiciones se colocan al inicio del código, ya verás otros defines.

PD: Para “colocar” la línea tal y como indico arriba lo que se tiene que hacer es editar el fichero con un editor de texto como bloc de notas, wordpad, notepad+, gedit, vim… y guardarlo.

Bonus: No sé porqué pero la mayoría recomendaba poner el limite de memoria en 64 (el cual a mi no me funcionaba así que lo he colocado a 96.

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?

Como instalar Ubuntu 12.04 o cualquier versión sin usar un CD

Instalar la última versión de Ubuntu sin utilizar un CD es realmente muy simple. Para empezar nos descargaremos la última versión de Ubuntu (en mi caso es la versión 12.04, pero sirve para todos).

Ahora mientras se baja, busca tu memoria USB. Una vez encontrada nos bajaremos el adaptador de Ubuntu al USB, el programa que usaremos es Universal-USB-Installer.

Una vez descargado todo abriremos el Universal-USB-Installer, en éste rellenaremos los campos la versión, la unidad y el directorio dónde se encuentra el iso de Ubuntu.

Una vez hecho esto le damos a crear, este paso nos avisará que se va a borrar todos los datos de la memoria y se nos cambiará el nombre del USB.

Para finalizar tendremos que cambiar la secuencia de arranque del ordenador. Para esto cuando iniciamos el ordenador siempre nos dice algo parecido a: “Press TECLA to enter for Setup”. Una vez en el setup deberemos hacer y ponemos el USB antes del disco duro, o el USB como “fist boot device”. Guardamos los cambios y salimos.

Ahora cuando se nos inicie, si tenemos conectado el USB, nos saldrá ya la pantalla de instalación de Ubuntu como si fuera un CD.

Espero que os haya servido! 🙂 Yo al final descubrí que se puede instalar también en Windows, lo pone debajo dónde pulsas para descargar la iso.