Subir y exportar documentos usando Google Docs y PHP

Uno de los problemas con los que nos podemos encontrar es tener un documento en un formato y tener que exportarlo en otro formato. La exportación se puede realizar utilizando Google Docs, quizás un tanto rebuscada la solución, aunque quizás no tanto.

Os paso un script que sube el fichero a Google Docs dentro de una carpeta y acto seguido lo exporta a otro formato, en este caso subo un PPT y lo convierto en PDF (me hubiese encantado que fuera a HTML pero no acepta esa opción).

// Datos de login a la API de Google
$clientlogin_url = "https://www.google.com/accounts/ClientLogin";
$clientlogin_post = array(
    "accountType" => "GOOGLE",
    "Email" => "miemail@gmail.com",
    "Passwd" => "mipassword",
    "service" => "writely",
    "source" => "WPDOCS"
);

// Inicializamos el CURL
$curl = curl_init($clientlogin_url);

// Obtenemos el string de autenticación
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $clientlogin_post);
curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($curl);
preg_match("/Auth=([a-z0-9_\-]+)/i", $response, $matches);
$auth = $matches[1];

// Cabeceras de autenticación
$headers = array(
    "Authorization: GoogleLogin auth=" . $auth,
    "GData-Version: 3.0",
);

// Recuperamos los ficheros y carpetas que tenemos en Google Docs para no crear dos veces la misma carpeta
curl_setopt($curl, CURLOPT_URL, "http://docs.google.com/feeds/default/private/full?showfolders=true");
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_POST, false);
$listado = curl_exec($curl);
$nombre_carpeta = 'WPDOCS';

// Si no se ha creado la carpeta, la creamos
if (strpos($listado, ''.$nombre_carpeta.'') === FALSE) {
  // Make the request
  $h = array_merge($headers,array('Content-Type: application/atom+xml'));
  $xml = ''.$nombre_carpeta.'';
  curl_setopt($curl, CURLOPT_URL, "http://docs.google.com/feeds/default/private/full");
  curl_setopt($curl, CURLOPT_HTTPHEADER, $h);
  curl_setopt($curl, CURLOPT_POSTFIELDS, $xml);
  curl_setopt($curl, CURLOPT_POST, true);

  $response = curl_exec($curl);
  $response = simplexml_load_string($response);
  $id_folder = $response->id;
} else {
  // Recuperamos la ID de la carpeta creada anteriormente
  preg_match("#$nombre_carpetaid;

// Limpiamos los IDs de los ficheros devueltos por Google, solo nos interesa del %3A para adelante
preg_match('/%3A(.+)/', $id_doc, $m);
$id_doc = $m[1];
preg_match('/%3A(.+)/', $id_folder, $m);
$id_folder = $m[1];

// Lo movemos a la carpeta
$h = array_merge($headers,array('Content-Type: application/atom+xml'));
$data = 'https://docs.google.com/feeds/default/private/full/document%3A'.$id_doc.'';
curl_setopt($curl, CURLOPT_URL, "http://docs.google.com/feeds/default/private/full/folder%3A".$id_folder);
curl_setopt($curl, CURLOPT_HTTPHEADER, $h);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
curl_setopt($curl, CURLOPT_POST, true);
$response = curl_exec($curl);

//header('Content-type: text/xml');
//echo $response;
// Parse the response

// Exportamos a HTML
curl_setopt($curl, CURLOPT_URL, "http://docs.google.com/feeds/download/presentations/Export?docID=$id_doc&exportFormat=pdf");
curl_setopt($curl, CURLOPT_HTTPHEADER, $h);
curl_setopt($curl, CURLOPT_POST, false);
header('Content-type: application/pdf');
echo curl_exec($curl);

curl_close($curl);

Vía / Google Docs API: Client Login with PHP and Curl

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG


  
    
  
  
    
    
    
  

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

Crear usuarios de prueba en Facebook con CodeIgniter

Si el otro día hablaba sobre la posibilidad que ofrece Facebook de crear usuarios de prueba para tus aplicaciones, ahora voy a pasar un pequeño script para CodeIgniter que permite crear esos usuarios.

El script necesita de la librería curl para PHP para facilitar la tarea:

$app_id = 'xxxxxx';
$canvas_page = 'http://apps.facebook.com/xxxx/';
$client_secret = 'xxx';
$app_token = 'access_token_de_la_aplicacion';
$this->load->library('curl');
// Creo 100 usuarios
for ($i=0; $i<100; $i++) {
  $usuario = $this->curl->simple_post('https://graph.facebook.com/'.$app_id.'/accounts/test-users?installed=true&permissions=read_stream', array('access_token' => $app_token));
}
// Los recupero
$usuarios = $this->curl->simple_get('https://graph.facebook.com/'.$app_id.'/accounts/test-users?installed=true&permissions=read_stream&access_token='.$app_token);
$usuarios = json_decode($usuarios);
foreach($usuarios->data as $i=>$u) {
  // Hago que el primer usuario (que sera el que use) sea amigo de todos
  if ($i==0) {
    $ppal = $u;
  } else {
    // Hago un dump para saber si se ha creado bien la amistad
    var_dump($this->curl->simple_post('https://graph.facebook.com/'.$ppal->id.'/friends/'.$u->id, array('access_token' => $ppal->access_token)));
    var_dump($this->curl->simple_post('https://graph.facebook.com/'.$u->id.'/friends/'.$ppal->id, array('access_token' => $u->access_token)));
  }
}
|

Tres grandes tutoriales sobre HTML5

HTML5 Rocks ha publicado 3 tutoriales muy interesantes sobre desarrollo de HTML5.

El primero de ellos trata sobre cómo mejorar el rendimiento de las aplicaciones en HTML5, a parte de alguna que es puramente Javascript y no HTML5 (como guardar en una variable un elemento DOM y no buscarlo cada vez que vayamos usarlo), la mayoría de ellas trata sobre el uso de transiciones CSS3 por parte del navegador y no mediante el uso de Javascript, ya que así sería el navegador el que se encargue de ello y pueda optimizar su ejecución, por ejemplo:

  var elem = evt.target;
  // Modernizr es una librería que nos indica que elementos CSS3 y HTML5 dispone el navegador
  if (Modernizr.csstransforms && Modernizr.csstransitions) {
    // Mediante CSS3
    elem.style.transition = 'all 3s ease-out';
    elem.style.transform = 'translateX(600px)';
  } else {
    // Mediante jQuery
    jQuery(elem).animate({ 'left': '600px'}, 3000);
  }

El siguiente tutorial nos indica cómo meterle efectos CSS3 a nuestros textos, y la verdad es que alguno está muy currado. Claro que yo no soy muy partidario de usarlos según que tipo de publicación (se puede abusar mucho de ello), pero la verdad es que nos puede venir muy bien.

Y por último consejos HTML5 y CSS para convertir nuestra web a formato adaptado para móviles. Algunos trucos de rencimiento como el uso del almacenamiento local y algo bastante interesante cómo indicar la orientación o el viewport de la página:



Improving the Performance of your HTML5 App

Typographic effects in canvas

“Mobifying” Your HTML5 Site