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.

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.

Sombras en CSS3

Como ya he dicho en alguna ocasión anterior, CSS3 va a traer muchos cambios, entre ellos algunas propiedades muy interesantes que van a facilitar ciertas labores que antes eran difíciles de hacer.

En este caso hablo de las sombras, que aunque no sea una de las cosas más usadas, si puede llegar a ser interesante en determinados diseños, como por ejemplo la sombra de la cabecera o de un objeto concreto para darle sensación de volumen.

Todo este se conseguirá en CSS3 con las propiedades text-shadow y box-shadow, para dar sombra a texto y cajas respectivamente.

Algunos navegadores ya tienen implementada cierta funcionalidad de CSS3 y por tanto se puede ver ejemplos en funcionamiento.

En general las dos propiedades tienen un comportamiento parecido, en ambas hay que indicar en el valor de la sombra su desplazamiento lateral, el vertical, así como el valor de lo “borroso” de la sombra (blur) y el color de la misma (que puede ir al principio o al final). Además se permite la inclusión de varias sombras por cada elemento.

El código para las sombras de dos elementos (texto y caja) podrían ser:

.texto {
   //Sombra hacia derecha, arriba,  color negro, poco difuminada
   text-shadow: 10px -10px 2px rgb(0,0,0)
}

.caja {
   //Sombra hacia izquierda, abajo,  color negro, algo difuminada
   box-shadow: -10px 10px 10px rgb(0,0,0)
}

Donde se podría modificar cualquiera de los parámetros al gusto hasta encontrar algo que se asemeje a lo que se busca

Nueva infraestructura del motor de búsqueda de Google

Acaban de anunciar desde Google que se ha puesto a disposición de los desarrolladores la nueva versión en desarrollo de la infraestructura del motor de búsqueda de Google para que se pueda ir probando e ir aportando “feedback”. Pretenden que se les informe de los posibles problemas y sobre todo los posibles cambios de posicionamiento entre la versión actual y la de prueba.

Según indican, la nueva versión pretende mejorar en tamaño, velocidad y precisión a la versión actual.

Si eres desarrollador y/o técnico SEO, sería conveniente ir probando esta nueva versión para mejorar el posicionamiento en la misma de tus páginas.

Aporta seguridad a tus aplicaciones PHP con PHPIDS

Si eres desarrollador PHP o has realizado algún proyecto web utilizando éste lenguaje de programación y deseas darle la máxima seguridad a tu aplicación, sería bueno que echaras un vistazo a la herramienta PHPIDS.

Esta herramienta permite detectar y controlar los ataques más clásicos sobre aplicaciones escritas en PHP, se trata básicamente de una capa extra que se añade al código escrito y que permite detectar y solucionar dichos problemas se seguridad.

Los ataques que indica que detecta son: XSS, SQL Injection, header injection, directory traversal, RFE/LFI, DoS y LDAP attacks.

Requiere al menos la versión 5.1.6 de PHP para que se puedan utilizar todas las características de la herramienta.
Es bastante fácil de instalar y se puede configurar al gusto para controlar y realizar acciones específicas, guardar los datos en formatos concretos y demás.

Se puede incluso ver una demo de como trabaja la herramienta, y ya sabes si te gusta descárgala y empieza usarla para dar más seguridad a tus aplicaciones PHP.

Selects con vida gracias a jQuery

En esta nueva andadura del blog voy a escribir mucho sobre diseño/desarrollo web, sin lugar a duda una de mis mayores pasiones en el mundo de la informática y como no tengo tiempo ni posibilidad de escribir sobre todo lo que leo y muchas veces es mejor un buen enlace que un mal post, iré poniendo breves post con enlaces de páginas de donde leo información en la que vengan tutoriales/consejos/ayudas interesantes.

Es el caso de éste, en el que he descubierto un nuevo plugin para jQuery (llamado Javascript Image Combobox ) con el que es posible añadir más funcionalidad a los, en general sosos, selects de html, pudiendo añadir imágenes en ellos, se puede leer el artículo en anieto2k.

Colocaré en breves una prueba del mismo en la zona de pruebas.