Twitter Bootstrap WordPress Theme

He decidido realizar un cambio en la web, unificando el blog y las páginas que tenía y para ello he utilizado WordPress como plataforma y como estaba intentando empezar a utilizar y conocer Twitter Bootstrap, se me ocurrió crear un tema de WordPress que usase la potencia de dicho Toolkit.

He creado una página propia en el que se describe las características del tema, que iré modificando según realice mejoras en el tema.

Posiblemente lo suba a mi github para que se pueda hacer un fork o colaborar en su desarrollo.

Espero que os guste el cambio en la web y el tema en sí.

AJAX Cross-Domain: JSONP + PHP

En ocasiciones nos encontramos con la necesidad de hacer uso de un servicio web o API externo a nuestro sitio a través de AJAX. Por defecto los navegadores tienen una politica que impide realizar peticiones a otro dominio por razones de seguridad.

Para solventar este problema Bob Ippolito en 2005 propuso el uso de una versión modificada de JSON denominada JSONP. A partir de entonces, muchos sitios y servicios han utilizado esta técnica para que se puedan consumir sus APIs desde una aplicación del lado del cliente.

Hasta hace un par de días, personalmente sólo había utilizado esta técnica desde el lado del consumidor, me parecía algo muy útil, pero nunca me había preocupado del lado del servidor, pero hace poco tuve que implementar un servicio web que debería poder ser accedido a través de una aplicación cliente alojado en otro servidor, por lo que tuve que ponerme a enterarme, y os traigo un tutorial con lo que he aprendido, pongo información tanto del lado del servidor (utilizando PHP), como del lado del cliente (utilizando jQuery).

Lado del servidor

Según la documentación de JSONP, se debe permitir que el cliente añada algo de contenido al JSON devuelto, siendo este englobado en paréntesis, básicamente para que lo que se devuelva sea la “ejecución de un función”, que será creada (de la forma que sea) en el cliente, para su ejecución al finalizar la llamada AJAX.

Por lo tanto, la idea básica es, teniendo un servicio web que devuelva un JSON válido, permitir dos nuevos parámetros: uno para representar el formato que diferenciará las llamadas remotas de las realizadas desde nuestra aplicación (si la hubiera) y otro, el nombre de la función a ejecutar en el cliente. Los nombres típicos de estos parámetros son format (con valor jsonp) y callback (o jsoncallback), aunque no es obligatorio.

El código (en PHP), podría ser algo como:


$format = $_REQUEST['format'];
if($format == "json") {
    if(isset($_REQUEST['callback'])) {
        $callback = $_REQUEST['callback'];
        echo "$callback(" . json_encode($json) . ")";
    } else {
        echo "callbackFunction(" . json_encode($json) . ")";
    }
}

De esta manera, si no se indica una función, indicamos una por defecto, otra opción es no permitirlo y devolver error.
el objecto $json sería la representación de lo que se devolvía desde un principio en el servicio web. Como veis, unicamente hay que concatenar el nombre de la función pasada y los paréntesis. Sencillo, no?

Lado del cliente

Posiblemente sea más conocido, además de que hay muchas formas diferentes de hacerlo, pero voy a poner dos ejemplos usando jQuery.

El primero es la versión más simplista utilizando la función getJSON y la segunda, utilizando la función AJAX completa, con una función aparte incluida.


jQuery.getJSON("http://url.com/directorio/fichero.php?param1=valor1&format=json&callback=?, function(data)
    console.log(data);
}");

 

Con lo que tendríamos una llamada a un JSON que ejecuta la función anónima indicada, en este caso tan simple como imprimir por consola, pero hay iría la lógica, tan complidada como lo que se quiera hacer.

La versión extendida, podría ser:


function logicaCliente(data){
    console.log(data);
}
jQuery.ajax({
    "url": "http://url.com/directorio/fichero.php?param1=valor1&format=json",
    "dataType": "jsonp",
    jsonpCallback: 'logicaCliente'
});

 

Existen multiples variantes de la forma de hacer esto, pero espero que aquellos que en algún momento se encontraran, como yo, perdidos, puedan encontrar ayuda en este pequeño tutorial.

Fuentes:

Blog de Bob Ippolito

Use Jquery

jQuery JSONP

Instalar y Configurar XDebug en entornos con Eclipse y Ubuntu

Para poder disponer de un entorno correctamente configurado con XDebug en un entorno de desarrollo basado Ubuntu[*] y Eclipse, se deben realizar una serie de pasos que se describen a continuación

[*]en principio las instrucciones han sido probadas con Ubuntu, pero deberían valer para cualquier distribución basada en Debian

Instalación de Xdebug

Requiere la instalación del paquete pear, para lo cual hay que instalar (en caso de no tenerlo instalado previamente) el paquete especifico:

sudo apt-get install php5-dev php-pear

 

Y a continuación se instala el paquete xdebug desde pear:

sudo pecl install xdebug

Con lo cual tendríamos instalado correctamente Xdebug en nuestra máquina

Configuración de Xdebug en Ubuntu

Una vez instalado, necesitamos configurar  Xdebug para poder trabajar correctamente con el.
Lo primero que hay que haces es buscar donde tenemos la instalación:

find / -name 'xdebug.so' 2> /dev/null

con lo que devuelva, modificamos el php.ini (/etc/php5/apache2), añadiendolo como extension

zend_extension=/ruta/directorio/xdebug.so

Reiniamos el apache

sudo /etc/init.d/apache2 restart

Configuración de Eclipse para trabajar con XDebug

Hay que realizar una serie de pasos para configurar el entorno para depurar correctamente con XDebug

  • Crear ejecutable:
  • Window > Preferences > PHP > PHP Executables > Add y definimos nombre, ruta al ejecutable de inicio (var/www/nombreProyecto/public/index.php) y nombre debugger (xdebug)

  • Definir Debugger:
  • Window > Preferences > PHP > Debug y definimos Xdebug, en como PHP Debugger, en Server dejamos el Default y como PHP Executable el anteriormente definido.

  • Elegir Navegador para ejecución:
  • Window > Preferences > General > Web Browser y buscamos y seleccionamos Firefox o cualquier navegador que tengamos por defecto.

  • Definir el server por defecto:
  • Window > Preferences > PHP > PHP Servers > New y añadimos la configuración del server para que apunte a nuestra aplicación tal y como la tengamos definida (cambiando la url por aquella a la que apunte nuestro server)

  • Crear configuración de lanzamiento:
  • Debug > Debug Configuration > PHP Web Page y le damos nombre, seleccionamos Xdebug como Debugger y seleccionamos la página a lanzar de inicio desde el apartado url de la configuración.

     

Una vez realizado todo el proceso, lanzando el depurador y poniendo puntos de ruptura en nuestro código deberiamos poder depurar sin problemas.

Usando Zend framework en Eclipse

Desde que cambié de trabajo he estado trabajando en un proyecto realizado en PHP usando Zend Framework y aunque yo siempre he estado acostumbrado a Eclipse (tanto en Java como en PHP), en la empresa se trabajaba con NetBeans y he estado intentando adaptarme a este IDE, a su forma de uso.

Después de bastante tiempo usándolo, sigo sin cogerle el gusto a NetBeans, así que me propuse conseguir integrar Zend Framework en eclipse y aunque no he conseguido tener una utilidad como la de crear proyectos y componentes que tiene NetBeans, por lo menos he conseguido tener el autocompletado y para todo lo demás uso la linea de comandos.

Los pasos para conseguirlos son sencillos y se basan en importar la librería de Zend Framework en el eclipse y en el proyecto concreto, de la siguiente manera (suponiendo que ya tenemos Zend framerwork descargado):

  • Incluir el directorio de Zend como librería en el eclipse: para ello, pulsamos sobre Window > Preferences > PHP > PHP Libraries y ahí pulsamos en New… nombramos la librería como queramos y Ok, a continuación nos colocamos sobre el nuevo elemento creado y pulsamos sobre Add External folder… y ahí seleccionamos el directorio en el que tengamos Zend Framework descargado y descomprimido.
  • Incluir la librería de Zend en el proyecto: para ello, nos colocamos sobre el proyecto concreto en la vista de Navigator o Package Explorer y ahí botón derecho > properties > PHP Include Path y ahí pulsamos sobre Add Library > User Library y elegimos la anteriormente incluida en el eclipse y Ok.

Y ya está, se tirará un rato hasta que funciona rápido y bien, pero al cabo de un rato tendremos Zend Framework como librería y podremos usar el autocompletado de clases y métodos, lo que nos será muy útil para realizar nuestros proyectos.

Me he tirado algo de tiempo para encontrar la solución, pero principalmente está sacado (como no) de una entrada en stackoverflow.

How To: Crear un repositorio SVN remoto

Llevaba tiempo queriendo escribir esta entrada sobre como crear un repositorio para el control de versiones usando subversion, principalmente porque es una tarea que hago unas cuantas veces al año y, como toda tarea que no hago constantemente, suelo olvidar como se realizar, teniendo que echar mano de antiguas búsquedas en Google.

En este caso voy a describir los pasos para crear un repositorio en un servidor remoto, que es lo que más habitualmente he tenido que realizar. El entorno de desarrollo es una distribución basada en Debian (Ubuntu en mi caso), aunque posiblemente no diste mucho de las instrucciones para otras distros.

Antes de poder seguir los pasos es necesario tener instalado subversion tanto en la maquina servidora como en local, para lo cual se debe ejecutar lo siguiente:

 sudo apt-get install subversion 

Una vez instalado correctamente subversion, los pasos que hay que seguir para poder ponerlo en marcha son:

  • Crear un directorio en remoto donde se encontrará el repositorio: mkdir repo (pe: en /home/cesar)
  • Crear el repositorio: svnadmin create repo (desde el mismo directorio)
  • Crear el esqueleto del proyecto:
    • Crear el directorio del proyecto: mkdir project
    • Crear los directorios internos habituales: cd projectmkdir trunk branches tags
  • Importar el proyecto por primera vez: svn import project ssh+svn://user@dominio.com/ruta/repos/ -m "Initial import"

Una vez realizados estos pasos, ya se tiene el repositorio inicial y con la estructura creada, ahora nos queda importar el proyecto a un directorio local, para ello se pueden optar por dos soluciones, linea de comandos o a través de un IDE:

A través de la linea de comandos:

 svn checkout svn+ssh://user@dominio.com/ruta/repos /ruta/local 

En el eclipse:
import > SVN > chekout projects from SVN > ssh+svn://cesar@hazmereir.net/ruta/repos/project > trunk > finish

Y con esto ya tendríamos preparado un entorno de desarrollo basado en un servidor de versiones a través del cual podríamos tener un control total sobre el código de la aplicación que estemos creando. Este tipo de entorno suele ser más útil cuando nos encontramos trabajando en equipo, pero me he encontrado muchas ocasiones en las que he utilizado un servidor de versiones para tener más organizado el código o para poder trabajar mejor desde mis diferentes máquinas.

CodeIgniter 2.0.2 Spanish Pack

Estoy empezando a usar CodeIgniter para un proyecto personal y como en principio tenía pensado realizarlo en Español he estado mirando como se podían cargar recursos según el idioma, lo que se puede leer en la documentación oficial.

Una vez estudiado el método de hacerlo, he tenido que ponerme manos a la obra, y una vez realizada una búsqueda en Google y un poco de investigación de las posibilidades, me he dado cuenta que no había una versión actual del paquete de idioma de recursos de CodeIgniter (la versión actual de CodeIgniter es la 2.0.2), así que me he puesto manos a la obra y entre lo que ya había en el paquete anterior (1.7.2), mis (escasos) conocimientos del Inglés y un poco de Google Translate he creado un paquete de idiomas en Español que incluye todos los recursos de este nueva versión.

Os dejo los enlaces a los archivos comprimidos en tar.gz y zip por si alguien quiere usarlos.

CodeIgniter Spanish Pack v2.0.2 [tar.gz]
CodeIgniter Spanish Pack v2.0.2 [zip]

Llevar tu cuenta de Hotmail a Gmail

Llevaba tiempo queriendo escribir esta entrada, y es que hace bastante tiempo que tengo mi vieja cuenta de Hotmail configurada en mi cuenta de Gmail, por lo que puedo usar toda la potencia de Gmail en mi vieja cuenta y no volviendo a abrir el webmail de Microsoft, que en las últimas versiones que recuerdo era realmenet malo comparado con Gmail.

Para poder realizar la configuración de la cuenta se necesitan tres cosas básicamente:

  • Configurar el correo de entrada de tu cuenta de hotmail en la de Gmail
  • Configurar el correo de salida de tu cuenta de Gmail para enviar desde la de hotmail
  • OPCIONAL: Instalar y configurar Multiple Inboxes, una extensión para Gmail

Vayamos paso por paso:

Configurar el correo de entrada de tu cuenta de hotmail en la de Gmail

Para ello, hay que ir a Configuracion (Settings) > Cuentas (Accounts and Import) > Recibir mensajes de otras cuenta > Añadir una cuenta de correo tuya y se selecciona la cuenta de correo de hotmail, luego pide los datos de la conexión, pero suelen estar medio rellenos.
Se mete la contraseña, el servidor, que tiene que ser algo como pop3.live.com y como puerto 995 sobre seguro si no viene ya marcado.
Creo que manda un email de confirmación a la cuenta, así que hay que abrirlo, que estará en la cuenta de hotmail y hay que seguir lo que pongan las instrucciones.

Configurar el correo de salida de tu cuenta de Gmail para enviar desde la de hotmail

Para ello, se va a Configuracion (Settings) > Cuentas (Accounts and Import) > Enviar mensaje como > Añadir otra direccion de correo tuya y seleccionar la cuenta de correo de hotmail, se da a “Enviar verificación” y manda un email para confirmar, si se ha hecho todo bien en el paso anterior, debería llegar ya a la cuenta de gmail, al cabo de un rato.
Una vez hecho eso, se configuran los datos de la cuenta con los datos de tu cuenta, el servidor smtp.live.com sobre el puerto 25.
En algún punto, pedirá si se quiere enviar los emails desde el servidor de gmail o desde el original (hotmail), hay que poner para que los gestores de correo no lo manden a spam.

Instalar y configurar Multiple Inboxes, una extensión para Gmail

Se va al icono de la probeta de laboratorio verde que se encuentra en la parte superior derecha.
Se busca la extensión multiple inboxes, se activa y se pulsa sobre guardar.
Después se va a configuracion > Multiple Inboxes y ahí se crea un filtro y un nuevo inbox y se configura a gusto como se quiera que se muestre.
Recomiendo que se mezcle el multiple inboxes con filtros y etiquetas, para que sea más fácil de usar y saber que email es cada uno.

Y nada más, con eso deberías poder configurar tu correo de Hotmail en Gmail.

HowTo: Configurar SVN+SSH con Subclipse en Windows

Para todos aquellos que como yo hayan tenido problemas con la utilización de subclipse (plugin de subversion para eclipse) en Windows para el protocolo svn+ssh y que les apareciera el mensaje:

“svn: Can’t create tunnel”

La solución no pasa por generar las claves pública/privada, almacenarlas y hacer mil configuraciones en el servidor, si no que es tan simple que asusta.

Simplemente hay que modificar la configuración SVN de eclipse y modificar SVN interface de JavaHL a SVNKit. Para ello seguimos los siguientes pasos:

  1. En eclipse nos desplazamos al menú Window->Preferences->SVN.
  2. Buscamos donde ponga svn interface y seleccionamos SVNKit (Pure Java).

Lo dicho tan simple, que hasta un niño podría hacerlo, pero me tiré ayer 3 horas siguiendo manuales para almacenar las claves para ssh, bajando programas y mil historias, así que espero que esto sirva para alguien que se encuentre en la misma situación que yo.

Solución encontrada en: JavoAxian (normal que no lo encontrara ayer, es una entrada para linux en la que pone un mensaje al final).

Google Chrome OS

Una vez más con una noticia sobre Google, la verdad es que quería haber intercalado alguna noticia sobre diseño o sobre programación, pero me ha sido imposible resistirme a escribir una entrada sobre Google Chrome OS.

Supongo que la gran mayoría habrá oído hablar de Chrome OS, el sistema operativo en el que ha estado trabajando Google los últimos meses y que fue presentado ayer por los chicos de Google. Desde entonces miles de noticias han llenado mi reader, en principio sobre la presentación y ahora lo más importante: cómo instalarlo.

Y es que ya se han generado imágenes del sistema operativo para poder ser ejecutadas en máquinas virtuales y así poder probar la potencia y rapidez con la que trabaja Chrome Os. Recordad que se trata de una sistema operativo diferente al resto, basado en navegador, lo que permite entre otras cosas reducir el tiempo de inicio al mínimo posible, eliminando muchas de las tareas que los SO habituales hacen de forma secuencial al arrancar.

Podéis seguir las instrucciones del enlace de arriba para instalar crome sobre una máquina virtual.

Actualización: he probado la instalación desde una máquina virtual tal y como se indica en las instrucciones del enlace que he puesto y la verdad es que de momento es difícil dar una opinión, tiene pinta de cargar rápido y está claro que se va a adaptar muy bien a los servicios de Google y al uso para la navegación por internet, pero es necesario un paseo en profundidad y probar más a fondo y en un entorno real para poder dar una valoración real.

Además, os dejo los vídeos de presentación de Google Chrome para que echéis un vistazo a cómo va a ser:

Presentación Oficial Google Chrome Os

¿Qué es Google Chrome OS?

Interfaz de Google Chrome

Explicación de la forma en la que se acelera la carga del SO

Espero que os guste, noticias vía: Genbeta, Google Dirson y Blog oficial de Google.

Go: el lenguaje de programación de Google

Como ya dije en la entrada sobre closure, Google está sacando herramientas y servicios interesantes cada día y si a eso le sumamos que parece que han decidido que no debe haber rama de la informática en la que no hayan desarrollado una aplicación y/o herramienta, está claro que ésto tenía que pasar.

Y es que en Google han desarrollado una lenguaje de programación, que se llama Go y que según cuentan tiene las bondades de Python sumadas a las de los lenguajes compilados como C o C++. Está claro que esto es puro marketing made in Google, pero está claro que en esta última semana, pocos son los que no han oído hablar o han empezado a probar dicho lenguaje.

Go, open source (como mucho de lo que últimamente se está realizando en Google), se encuentra disponible para sistemas basados en Unix (Linux y MacOs) pero no para windows, aunque tiempo al tiempo.

Para instalarlo en un equipo, hay que seguir una serie de pasos:

  • Añadir una variables de entorno al sistema ($GOROOT, $GOOS, $GOARCH y $GOBIN (opcional)). con el comando export.
  • Instalar Mercurial (sudo easy_install mercurial).
  • Realizar un check out al repositorio (hg clone -r release https://go.googlecode.com/hg/ $GOROOT)
  • Instalar las librerias básicas de C (sudo apt-get install bison gcc libc6-dev ed make)
  • Ejecutar all.bash ($GOROOT/src/all.bash)

Y si no se muestra ninguna error, tenemos la máquina lista para compilar y ejecutar código Go.

Para compilar el código Go existen dos posibilidades, usar el compilador propio de Go o usar el back end de GCC. En caso de usar el compilador propio, hay que tener en cuenta la arquitectura de la máquina, con lo que si está en una máquina de 64 bits se compilaría con 6g, mientras que si es de 32, con 8g. Lo mismo sucede a la hora de generar el ejecutable, siendo 6l y 8l respectivamente.

En caso de optar por el back end de GCC, se usará el comando gccgo, que generá el código ejecutable.

Un ejemplo de Código en Go (el clásico Hola Mundo) sería:

package main
import “fmt” // se importa el paquete de entrada/salida
func main() {
fmt.Printf(“Hola mundo\n”);
}

Que sería compilado con:

$ 8g HolaMundo.go

Creado el ejecutable con:

$ 8l HolaMundo.8

Y ejecutado con:

$ ./8.out

En la página principal del lenguaje de programación Go se puede encontrar amplia información sobre el lenguaje, la especificación y muchos ejemplos con los que poder ir cogiéndole el pulso a un lenguaje que está destinado a ser de los más usados dentro de relativamente poco tiempo.
Vía: Blog Open Source de Google