PHP Thumbnailer: librería para crear thumbs de imágenes

Si hay algo que odio a la hora de desarrollar una aplicación es tener que hacer thumbs de las imágenes, sobre todo para los perfiles: que si el thumb es cuadrado y la imagen rectangular, que si se debe recortar o meter bordes, … PHP Thumbnailer nos facilita enormemente esta tarea:

Hacer resize:

try {
     $thumb = PhpThumbFactory::create('/path/to/image.jpg');
} catch (Exception $e) {
     // error
}
$thumb->resize(100, 100);
$thumb->show();

Hacer resize y crop si es rectangular:

$thumb->adaptiveResize(175, 175);
$thumb->save('/path/to/new_image.jpg');

PHP Thumbnailer

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

Traducir contenido en Contact Form 7 de WordPress

Si queremos que el contenido de nuestros formularios de contacto generados con el plugin Contact Form 7 sean traducidos, tan sólo deberemos añadir a nuestro functions.php lo siguiente:

function translate_shortcode($tag) {
  if (isset($tag['values']) && count($tag['values']) > 1) return __($tag['values'][1], $tag['values'][0]);
  return "";
}
wpcf7_add_shortcode('translate', 'translate_shortcode', true);

Una vez añadido esto, podremos incluir en nuestro formulario lo siguiente:

[translate null "diccionario" "Texto que quiero traducir"]

El valor null es porque el plugin busca en el primer parámetro el ID del campo, el segundo campo es el nombre de diccionario que hayamos incluido con la función load_theme_textdomain, y por último el texto que vayamos a traducir.

Traducir el theme de WordPress según el idioma del navegador (no el contenido)

WordPress se puede utilizar para muchas cosas y no sólo para crear un blog. En el caso de que quieras realizar un blog multi-idioma y necesites traducir el blog según el idioma del navegador del usuario, no el contenido, que para eso hay algún plugin, tan sólo deberemos añadir lo siguiente a nuestro functions.php:

function set_language($locale) {
  if (isset($_SERVER ["HTTP_ACCEPT_LANGUAGE"])) {
    $langs = $_SERVER ["HTTP_ACCEPT_LANGUAGE"];
    $langs = explode(',', $langs);
    $langs = $langs[0];
    $langs = explode('-', $langs);
    return $langs[0].'_'.strtoupper($langs[1]);
  } else {
    return $locale;
  }
}
add_filter( 'theme_locale', 'set_language');

Con esto conseguimos que si el lenguaje de nuestro navegador sea es-es, pase a es_ES y con ese locale, pues podemos usarlo en la traducción del theme junto a la función load_theme_textdomain

Usuarios de prueba para tus aplicaciones en Facebook

De lo que se entera uno, Facebook te ofrece la posibilidad de crearte usuarios de prueba para realizar tus aplicaciones en Facebook.

Mediante la API de Graph podemos entre otras cosas:

Crear usuarios

POST /app_id/accounts/test-users?installed=true&permissions=read_stream

Añadir usuarios a tu app:

POST /app_id/accounts/test-users?installed=true&permissions=read_stream
&uid=[test_user_id]&owner_access_token=[app_access_token_of_current_owner_app]

Acceder a ellos:

GET  /app_id/accounts/test-users

Eso sí, tiene ciertas limitaciones:

  • Número limitado de usuarios que puedes crear
  • Los usuarios de prueba pueden interactuar con otros usuarios de prueba pero no con usuarios reales.
  • Los usuarios de prueba no pueden hacerse fan de páginas públicas o crear contenido público como escribir en el muro de una página.
  • Pueden ser usados por los desarrolladores de la aplicación.
  • Un usuario de prueba jamás se puede convertir en usuario real.

Realizar búsquedas en WordPress únicamente por el título

Si por un casual necesitas que tu WordPress realice las búsquedas por el título del post y que ignore el contenido, tan sólo hay que añadir un filtro a tu functions.php, lo cual también sirve para editar las condiciones de búsquedas y añadirle o quitarle condiciones:

add_filter('posts_search', 'mi_search_title');
function mi_search_title($search) {
  preg_match('/%([^%]+)%/', $search, $m);
  if (isset($m[1])) {
    // Original
    // " AND (((wp_posts.post_title LIKE '%termino%') OR (wp_posts.post_content LIKE '%termino%')))  AND (wp_posts.post_password = '') "
    return " AND wp_posts.post_title LIKE '%$m[1]%' AND (wp_posts.post_password = '') ";
  } else {
    return $search;
  }
}

Quitar styles y scripts sobrantes en WordPress

Uno de los problemas con los que nos podemos encontrar en WordPress con mayor frecuencia es que los plugins son tal y como el desarrollador quiere y no como a ti te gustaría, y uno de los fallos más frecuentes es el añadir scripts y styles con wp_enqueue_script o wp_enqueue_style sin tener en cuenta en qué páginas se usan sus plugins (por ejemplo Contact Form 7).

Para quitar esos .js o .css molestos y sobrantes tan sólo hay que añadir lo siguiente en nuestro functions.php (caso particular para Contact Form 7):

function mi_remove_styles() {
  if (!is_page('contactar')) {
    wp_deregister_style("contact-form-7");
  }
}

function mi_remove_scripts() {
  if (!is_page('contactar')) {
    wp_deregister_script("contact-form-7");
  }
}
add_action( 'wp_print_styles', 'mi_remove_styles' );
add_action( 'wp_print_scripts', 'mi_remove_scripts' );