Ejercicio práctico sobre el consumo de un archivo JSON desde una página PHP y de trabajo con el API de Panoramio

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

JSON es un formato utilizado para el intercambio de información entre sistemas. Utiliza Javascript como lenguaje y sintaxis para la definición de objetos, en archivos de texto que son transferidos fácilmente por Internet. Poco a poco se ha ido incorporando al uso habitual en el desarrollo web por su facilidad de uso y su integración en lenguajes de programación habituales, como PHP. En este artículo vamos a presentar una práctica con JSON en PHP basada en el uso del API de Panoramio.Panoramio es un popular servicio de Google, como probablemente sabremos, que permite subir imágenes localizadas geográficamente en los mapas de Google. Panoramio dispone de un API para la integración de las fotografías de su base de datos en otras aplicaciones web, de manera que cualquier persona puede presentar fotos de lugares del mundo subidas por los usuarios de Panoramio, en su propio sitio web.El API de Panoramio utiliza JSON como formato de intercambio de la información de las fotos. Por medio de este API podemos construir URL, que solicitadas al sitio de Panoramio, nos devuelven un JSON con los datos de las fotografías, es decir, su título, autor, URL del archivo gráfico, etc. Gracias a la integración de JSON en la mayoría de los lenguajes de programación de aplicaciones web, desde casi todas las plataformas de programación para el desarrollo, se pueden obtener fácilmente las fotos y presentarlas en un sitio web.

Como venimos explicando en el Manual de Trabajo con JSON en PHP, este lenguaje de programación dispone de varias funciones que sirven para consumir archivos JSON y convertirlos en objetos PHP con los que podemos trabajar. Podemos ver como es de práctico el JSON al utilizar el API de Panoramio y cómo en pocas líneas de código podemos acceder a Panoramio y consultar su base de datos de fotografías y mostrarlas en nuestra página web.

Referencia: En DesarrolloWeb.com hemos publicado anteriormente un artículo para aprender a consumir JSON del API de Panoramio con el lenguaje de programación del lado del cliente JSON: API Panoramio + ejemplo de JSON con Mootools .

Pasos del script PHP para consultar el API de Panoramio
Para crear un programa en PHP que consulte el API de Panoramio tenemos que realizar varios pasos:

  1. Conectar con una URL de Panoramio, enviando los datos sobre la localización desde donde queremos obtener fotos, para recibir un JSON con los datos de dichas fotos.
  2. Procesar el JSON, para obtener un objeto PHP con los datos de las fotografías.
  3. Hacer un bucle para recorrer las fotografías del objeto, para mostrar las fotografías obtenidas en nuestra página.

Todos estos pasos son sencillos, pero necesitaremos alguna idea sobre distintas partes de PHP, pero afortunadamente en Desarrollo web .com tenemos artículos para obtener la base de conocimientos necesaria para realizar cualquiera de estos pasos.
Conectar con una URL de Panoramio:
Esto lo tenemos que hacer con las funciones de trabajo con archivos de texto que dispone PHP, pues la lectura de ficheros se hace con las mismas funciones que la lectura de URLs, tal como explicamos en el artículo Leer ficheros con PHP.Primero tenemos que crear una URL para la consulta en el API de Panoramio, que tendrá una forma como esta:

http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium

Esto nos devolvería fotos:

  • por orden de popularidad,
  • desde la foto encontrada en posición 0 hasta la posición 5 de ese ranking por popularidad,
  • entre unas coordenadas (minx, miny) y (maxx, maxy), o lo que es lo mismo (mínima longitud y latitud) y (máxima longitud y latitud),
  • de tamaño medio

Las fotos están indicadas, como se decía, en texto con código Javascript en formato JSON. Así pues, si accedemos a esa URL obtendremos el JSON de respuesta.

Para obtener el texto que devuelve Panoramio al acceder a esa URL tenemos que leerlo con las funciones de archivos. Utilizaremos una función ya explicada en el artículo Leer ficheros con PHP

function leer_contenido_completo($url){
$fichero_url = fopen ($url, “r”);
$texto = “”;
while ($trozo = fgets($fichero_url, 1024)){
$texto .= $trozo;
}
return $texto;
}

Así pues, con una llamada a esta función, enviando la URL que deseamos consultar, podríamos obtener el JSON con las fotos.

$URL_API_PANORAMIO = “http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium”;

$contenido_url = leer_contenido_completo($URL_API_PANORAMIO);
Procesar el JSON:
Como ya vimos en el artículo Consumir un JSON desde PHP, PHP dispone de la función json_decode() que devuelve un objeto PHP resultante de procesar el JSON enviado como un string por parámetro. En nuestro ejemplo podríamos hacer lo siguiente:$JSON_PANORAMIO_PHP = json_decode($contenido_url);

En la variable $JSON_PANORAMIO_PHP tendremos el objeto PHP resultante de la decodificación del JSON recibido en el contenido de la URL.
Hacer un bucle para recorrer las fotografías del objeto
Ahora nos queda el paso más sencillo para los que ya tienen cierta experiencia con PHP, hacer un recorrido de todas las fotos que hayamos recibido. Ese recorrido deberá tener en cuenta el formato del objeto que se recibe en el JSON. Ese objeto tiene los siguientes atributos:

  • count (con el número de fotos encontradas en todo panoramio entre las coordenadas dadas, que no tiene por qué corresponder con el subconjunto de fotos recibidas.
  • photos (que es un array con todas las fotos recibidas. Cada foto es otro objeto, que tiene los datos de esa foto en particular)
  • has_more (con un boleano que indica si hay o no otras fotos disponibles para este punto)
Nota: En realidad podemos obtener la información completa sobre el formato de este objeto en la propiadocumentación del API de Panoramio.

Entonces nuestro bucle PHP tiene que hacer un recorrido al array de fotografías que hay en el atributo “photos” del objeto PHP. Podría tener esta forma:for ($i=0; $i<count($JSON_PANORAMIO_PHP->photos); $i++){
$foto_actual = $JSON_PANORAMIO_PHP->photos[$i];
echo “<p>”;
echo “<img src='” . $foto_actual->photo_file_url . “‘ width='” . $foto_actual->width . “‘ height='” . $foto_actual->height . “‘>”;
echo “<br>”;
echo “<small>” . $foto_actual->photo_title . “, por ” . $foto_actual->owner_name . “</small>”;
echo “</p>”;
}

Este recorrido se podría haber hecho de otra forma, pero nos sirve perfectamente un bucle for. Además, quizás vosotros colocaríais las fotos con otro estilo, para adaptarlas al diseño de vuestra página.

Si se desea, podemos ver las fotos de Panoramio que hay en esa localización, que corresponde con la Ciudad de las Ciencias y las Artes de Valencia.
Código PHP completo
A continuación para una referencia más completa, podemos ver el código completo de la página PHP que hemos creado para hacer este ejemplo de trabajo con JSON en PHP.<html>
<head>
<title>Consumir JSON del API de Panoramio desde PHP</title>
</head>

<body>

<?

function leer_contenido_completo($url){
$fichero_url = fopen ($url, “r”);
$texto = “”;
while ($trozo = fgets($fichero_url, 1024)){
$texto .= $trozo;
}
return $texto;
}
$URL_API_PANORAMIO = “http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=5&minx=-0.35&miny=39.44&maxx=-0.34&maxy=39.46&size=medium&#8221;;

$contenido_url = leer_contenido_completo($URL_API_PANORAMIO);

echo $contenido_url;

$JSON_PANORAMIO_PHP = json_decode($contenido_url);

echo “<hr>”;

//echo $JSON_PANORAMIO_PHP->count; //esto muestra el número de fotos totales que existen en Panoramio en esa localización
for ($i=0; $i<count($JSON_PANORAMIO_PHP->photos); $i++){
$foto_actual = $JSON_PANORAMIO_PHP->photos[$i];
echo “<p>”;
echo “<img src='” . $foto_actual->photo_file_url . “‘ width='” . $foto_actual->width . “‘ height='” . $foto_actual->height . “‘>”;
echo “<br>”;
echo “<small>” . $foto_actual->photo_title . “, por ” . $foto_actual->owner_name . “</small>”;
echo “</p>”;
}
?>
</body>
</html>

Podemos ver el script en marcha en una página aparte.

Crear scrollbar en flash/actionscript más efecto de easing by CristaLab

Fuente: CristaLab

Muchas veces al visitar otros sitios y al usar un scroll de estos sitios, uno ve el efecto de easing en el scroll y nos da una sensación a suavidad muy buena, es agradable que las cosas “scrolleen” con ese suavizado tan particular, bueno asi que me puse mano a la obra para poder tener el mio, pero quise hacerlo de tal manera de que lo pueda reutilizar SIEMPRE, que ejecute una función determinada en cualquier nivel de mi película.

Para lograrlo a esta función debemos de pasarle un par de parámetros, veamos…

Primero vamos a hacer un include de un ActionScript (este archivo es necesario para que funcione el scroll porque tiene todo el código necesario), se lo pueden bajar de aquí y ponen ese archivo en la misma carpeta del .FLA.
Hacemos por única vez un INCLUDE en nuestro fla en el _ROOT

#include “scroll_easyn.as”

Luego en nuestro fla cada vez que quisieramos generar éste scroll solo vamos a convocar a una función que se encuentra dentro del archivo que incluimos … de ésta manera:

_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado);

Bueno la función requiere un par de parámetros:

nivel: Es en donde vamos a generar el scroll por ejemplo: “_root.”, _root.mcCont, etc.

clip: Este parametro es la ruta del CLIP CONTENEDOR, o sea el nombre de instancia del clip en donde dentro del que tenemos nuestro contenido que queremos scrollar. (Es importante que en nivel, y clip quede algo como por ejemplo: Nivel: “_root.mc” Clip: “_root.mc.contenedor”)

anchoScroll: Es un valor numérico en el cual le seteamos el ancho que va a tener la barrita de scroll, si el valor es menor a 3, el valor va a ser por default 3.

Suavizado (Opcional) Valor numérico en donde seteamos la velocidad del suavizado cuando frenamos el scroll, si obviamos éste parámetro el valor por default es 10.

Bueno eso es todo pueden ver una prueba, acá de como funciona.
Los sources se los pueden descargar desde aquí.

Entonces cada vez que quisieramos usar el scroll solo escribimos ésto:

var nivel = _root.mc
var clip = _root.mc.contenedor
var anchoScroll= 8
var suavizado = 3
_root.generarScrollEasyn(nivel, clip, anchoScroll, suavizado );
O bien directamente:
_root.generarScrollEasyn(_root.mc, _root.mc.contenedor, 8, 3);

El scroll funciona tanto para texto, enmascarado con “SETMASK” o bien para texto e imágenes.

Saludos y espero que les sirva
dQ (Digital Designer)

Descargar Archivo desde CristaLab

www.coudlain.com web 2.0

CoudLain.com es el portfolio on-line de un programador web de Gijon, Asturias

Pagina web desarrollada en xhtml, css2, flash, actionscript, asp, php, mysql, access, xml, w3c

www.coudlain.com