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.

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]

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

Google Closure: Mejora tu código JavaScript

La gente de Google no deja de sacar aplicaciones o herramientas útiles, todas las semanas nos encontramos con varias entradas en los blogs de Google sobre nuevas ideas que han surgido de la empresa, ya sea por iniciativa propia o como parte del tiempo que los Googlers pueden usar para proyectos propios.

En este caso, se trata de un proyecto que ha surgido del tiempo de varios de los trabajadores de Google para proyectos propios y se trata de una herramienta para optimizar y depurar el JavaScript de las páginas de los desarrolladores.

En concreto se trata de un compilador (Closure Compiler) que se encarga de traducir entre el javascript que se le pasa a una versión mejorada, en el que se elimina el “código muerto” y reescribe y minimiza el código para poder optimizar la carga del mismo por parte de los navegadores. Además, incluye una herramienta de inspección (Closure Inspector) como extensión de Firebug y que permite el mapeo del código, tracearlo e integrar pruebas unitarias al código.

Además, incluye una librería (Closure library) y unas plantillas (Closure Templates) para el uso eficiente de JavaScript en las páginas web.

Esta herramienta puede ser muy útil para los desarrolladores que tenemos grandes archivos JavaScript y que queremos mejorar y optimizar el resultado de nuestras páginas, con lo que se permitiría realizar aplicaciones ricas usando JavaScript al más puro estilo de Google Maps o Gmail.

Vía: Google Code Blog

Guía completa para conocer Google Wave

Ayer recibí mi invitación para usar la ultima aplicación estrella de Google: Google Wave, el servicio que según Google va a revolucionar la forma de comunicarse y dejar el correo electrónico desfasado.
Allá por Junio había visto la conferencia de Google en el Google IO en la que presentaron Google Wave y me impresionó y gustó mucho, parecía una de esas aplicaciones que saca Google que revolucionan el mundo de internet.

Pues bien, después de un uso bastante corto, me he quedado con ganas de saber qué incorpora de utilidad, no es que no crea que lo tiene, si no que al no tener con quién utilizarlo, la herramienta parece un poco inútil.

Por eso mismo me ha encantado cuando me he encontrado una entrada en mi lector de Feeds sobre un libro que explica los entresijos de Google Wave, y es que entre que los vídeos propios de Google muestran errores y el poco uso que he tenido de la aplicación, necesitaba un empujón dar una oportunidad a Google Wave y parece que este manual incorpora toda la información requerida para hacerse un experto en el uso de Google Wave y para que acabe de convencerme de su utilidad.

Como los autores del libro dicen: la guía completa de Google Wave.