moure.es – Alfonso Moure Ortega

Como Google nos apunta en su blog oficial, con el super atractivo título de A proposal for making ajax crawlable, pretenden que se reconozcan una serie de normas que permitirían, no solo a Google sino a otros muchos buscadores, rastrear e indexar contenido generado con AJAX.

La idea básica es sencilla: permitir que usuarios y buscadores puedan acceder diréctamente a un estado concreto de la página con contenido asíncrono desde una URL, que guardaría en ella misma un parámetro que indicará el estado actual de la página.

Su propuesta incluye, como bien indica Google:

1. Modificar la URL para mostrar el estadode la página AJAX mediante un marcador común, como por ejemplo, !. En lugar del tradicional http://www.moure.es/photos.php#verfotodemou, podremos usar http://www.moure.es/photos.php#!verfotodemou. De esta manera Google verá que lo que tratamos de mostrar es justamente eso: un estado de AJAX concreto.
2. Extensión de servidor que permita devolver el estado AJAX generado como HTML sin Javascript (headless browser… es algo más complicado que esto, pero no quiero extenderme en este sentido).
3. Añadir un token a los parámetros de nuestras URL para indicar al servidor que debe procesar la petición como headless browser, es decir, no devolver una página con Javascript para el cliente, sino que lo deje procesado y codificado en HTML para la devolución. Google propone usar _escaped_fragment_.
4. Mostrar en los portales de buscador, como Google u otros que acepten este nuevo formato, deberán mostrar la URL original y no escapada para headless, sino tokenizada para acceder al estado de AJAX concreto: http://www.moure.es/photos.php#!verfotodemou.

Básicamente, en resumen, como bien hacen en Google porque esta explicación para un profano puede ser bastante espesita…

• Desde una URL inicial http://www.moure.es/photos.php#verfotodemou…
• Pasamos a usar una URL http://www.moure.es/photos.php#!verfotodemou tanto para usuarios como buscadores…
• Que sería rastreada como http://www.moure.es/photos.php?_escaped_fragment_=verfotodemou
• Y sería mostrada a los usuarios como… http://www.moure.es/photos.php#!verfotodemou

Eso es todo… ¿qué os parece?

A mi personalmente me parece un avance de gigantes: poder comenzar a indexar y mostrar a los buscadores el contenido dinámicamente generado me resulta algo necesario hoy en dia, donde las aplicaciones RIA están cada vez más a la orden del día, y donde los usuarios son mucho más exigentes que antes.

Desde luego, muchas páginas que ahora han implantado AJAX lo han hecho como un acto de “mira que bonito” y poco más, pero otras fundamentan su trabajo exclusivamente en esta tecnología basada en Javascript, y se hace necesario que ese contenido vuelva al camino de la luz y sea mostrado al mundo y, sobretodo, a los rastreadores de los buscadores actuales.

Por mi parte, doy mi enhorabuena a Google por su propuesta. Olé. Ya era hora…

Bookmark

Es un tema archiconocido y muy usado hoy en día, y por si fuera poco, hipersimple: conseguir las coordenadas de una ubicación por su nombre o mediante una dirección postal. ¿Desde dónde? Pues bueno, hay muchos servicios que ofrecen este tipo de trabajo: desde Geonames (un proyecto increible que recoge coordenadas e información geográfica e incluso demográfica de prácticamente todo el planeta… muy recomendable) hasta los servicios de GData para Google Maps.

La ventaja de usar Google Data (AKA GData) es que el trabajo ya viene hecho, y de paso, está integrado diréctamente en el Google Maps API y por lo tanto el esfuerzo es minomo. Y encima, podemos hacer la consulta de manera asíncrona mediante AJAX. Si usaramos servicios como el de Geonames deberíamos currarnos nosotros mismos esta parte. Pero bueno, todo esto es texto redundante y a nadie le interesan mis verborreas absurdas sobre este tema. Vamos al grano.

function showAddress(address)
{
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,
function(point)
{
if (!point)
alert(address + ” –> no encontrado en Google Geo Services.”);
else
map.setCenter(point, 13);
}
);
}

Bien, ¿qué hace éste código? Pues es bien sencillo. Primero creamos la instancia de la clase GClientGeocoder, incluido con el Google Maps API desde su versión 2.55, y que contiene una serie de servicios de geocodificado que nos permiten consultar diferentes datos al mercadillo de Mountain View.

Concretamente nos interesa el método getLatLng, que recibe como parámetro la dirección o nombre de la ubicación que nos interesa, y al recibir la respuesta (callback) ejecutará la función creada, recibiendo como parámetro el punto concreto donde se encuentra el lugar, con un objeto de clase GLatLng. ¡Tachán! Ahí está nuestro resultado. Para centrar la vista en él, solo debemos llamar al método setCenter, pasandole como parámetros el punto en cuestión y el nivel de zoom.

Bueno, todo esto está tirado y todos sabemos hacerlo. Sobretodo porque viene en la documentación de la API, y aunque no es exáctamente esta la explicación que dan, es bastante aproximada.

Pero lo interesante aquí es rizar el rizo: recibir como respuesta lugares cercanos a una ubicación concreta.

Dentro del mundo GEO, y a un nivel fundamentalmente básico, hay tres maneras de representar una ubicación:

• Sus coordenadas geográficas (latitud, longitud)
• Su encuadre en un mapa (latitud noreste, longitud noreste, latitud suroeste, longitud suroeste)
• Dirección postal (como, por ejemplo, calle celestina 983)

Pues bien, en el mismo objeto GClientGeocoder tenemos un método que nos permite pedir a Google una colección de localizaciones cercanas a una ubicación concreta: getLocations, que puede recibir como parámetro de consulta o una dirección, o un punto GLatLng.

¿Qué nos va a devolver esta llamada? Un objeto estructurado con todos los datos precisos: por un lado, la información detallada de la ubicación pedida, y por otro, el resultado de Google para la ubicación, con todas las ubicaciones almacenadas en un array de Placemarks, tal que así (lo pego diréctamente desde la documentación de ejemplo de Google, es más claro así, para la geocodificación inversa):

[
  {
    name: "Washington, DC",
    Status: {
      code: 200,
      request: "geocode"
    },
    Placemark: [
      {
        address: "Washington, DC, USA",
        population: "0.563M",
        AddressDetails: {
          Country: {
            CountryNameCode: "US",
            AdministrativeArea: {
              AdministrativeAreaName: "DC",
              Locality: {
                LocalityName: "Washington"
              }
            }
          },
          Accuracy: 4          
        },
        Point: {
          coordinates: [-77.036667, 38.895000, 0]
        }
      }
    ]
  },
  ... // etc., and so on for other cities
]

Espero que os sea de utilidad… Aunque sea algo tan básico.

Bookmark

Bueno, como vistes en mi anterior post, ando jugueteando a ratos con Javascript y algunas de sus mejores funcionalidades (o metodologías, como prefiráis): AJAX y JSON. Como muchos sabéis, la gran utilidad que se nos presenta explotando estas tres tecnologías (este método, éste protocolo y este lenguaje de programación de scripting de lado de servidor, para ser exáctos) es la posibilidad de intercambiar datos entre cliente y servidor de manera asíncrona y sin tener que recargar todo el HTML de la página, y por lo tanto, de enviar comandos en uno u otro sentido y conocer el resultado de los mismos.

En PHP existen dos maneras de recoger información que venga del exterior: mediante GET o mediante POST. Cuando trabajamos con GET, podemos probar bien nuestras aplicaciones haciendo uso del ya bien conocido QueryString de la URL, pero cuando tratemos de trabajar diréctamente mediante POST (bastante más seguro y útil) la cosa se vuelve más complicada.

¿Quién no ha desperdiciado horas tratando de enviar parámetros por POST a una aplicación PHP para probar su funcionamiento?

Hoy he visto la luz. Que sí, que muchos ya conoceríais su existencia, pero… he encontrado este Addon de Firefox que nos permite controlar los parámetros que enviamos a la aplicación tanto mediante GET como POST y probar así diferentes juegos de prueba. Se llama Tamper Data, y os puede facilitar mucho la vida .

Mira que siempre he sido un buen amante de los addons para Firefox, pero por suerte o por desgracia soy un programador muy tradicional y siemre intento hacer todo a manita y pasando de herramientas externas siempre que me fuera posible. Porque, como bien me dicen mis amigos, siempre me gusta reinventar la rueda… ¡qué le vamos a hacer!

Y, como no, también nos permitirá ver la respuesta que recibimos del servidor de manera sencilla, aunque si trabajais con JSON, os recomiendo también instalar otra extensión: JSONView, que nos mostrará formateada y resaltada mediante diferentes colores y formas nuestras estructuras JSON sin necesidad de andar haciendo pirulas con nuestro Javascript (esos históricos alert(miobjeto.toString()); que tanto usamos para hacer pruebas de Javascript…

Bookmark

¿Alguna vez habéis querido llamar a métodos PHP desde el lado del cliente mediante AJAX? Pues bien, es bastante sencillo y voy a explicarlo de un modo rápido. Puntualizo que para la comunicación usaré el formato JSON (Javascript Object Notation) para la toma y devolución de datos.

Para facilitar las peticiones usaremos jQuery, que ya trae en sí todo lo necesario para poder realizar este tipo de petición. Primero vamos a crear una función en PHP que multiplique dos números, tal que así:

function Multiplicar(a,b) { return a*b; }

Hasta aquí supongo que todos hemos llegado. Ahora viene lo divertido… Creamos la parte de cliente, en Javascript, una vez hayamos incrustado la librería de jQuery en nuestra página:

function DoMultiplicar(p_a,p_b)
{
$.post(ruta_al_servicio, {a:p_a,b:p_b,cmd:”multiplica”},
function(data)
{
eval(“var obj = ” + data + “;”);
alert(data.result);
}
, “json”);
}

Y procesamos la petición en PHP:

if ($_POST["cmd"] == “multiplica”)
Multiplicar($_POST["a"],$_POST["b"]);

Vale, pero, ¿qué ha hecho todo esto? Pues muy sencillo… Por la parte de Javascript, hemos llamado al método $.post, al cuál le hemos pasado como parámetros, en el mismo orden:

• Ruta al servicio: ruta absoluta al fichero PHP que controla la petición por POST, y que se encarga de la llamada al método Multiplicar.
• Parámetros: mediante la notación de objetos de Javascript (JSON), introducimos los difentes parámetros que usará nuestro script de servidor. Para los que no estén familiarizados con JSON, es un protocolo de declaración de objetos de Javascript, que permite crear una estructura de objeto mediante una cadena sencilla, rodeada por llaves, donde cada miembro se separa por comas. Para más información, consultar la página oficial de JSON, donde apareden numerosos ejemplos con los que aprender.
• Método callback: función que recoge, en este caso, el resultado de la petición. Lo hemos llamado data, pero podéis llamarlo como mejor os venga para vuestro trabajo: el parámetro que recibe será siempre la respuesta del servidor.

Una vez recogido el resultado con el callback, ya lo tenemos: el resultado de la multiplicación. Si tenéis dudas, no tengáis problema en dejar comentarios… aunque sé que este pequeño tutorial es sencillo y básico para muchos , puede que para otros no tanto.

Bookmark