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

<svg width="300" height="250" id="svg2">
  <clipPath id="clip">
    <use xlink:href="#borde"/>
  </clipPath>
  <g id="player" >
    <path
       style="fill:none;stroke:#014700;stroke-width:10;stroke-opacity:0.7;"
       d="m 40,20 S 20,20,20,40 C 20,50,30,220,60,230 C 90,250,270,190,280,180 C 310,160,260,70,250,60 C 200,0,40,20,40,20 z"
       id="borde" />
    <g id="pause" style="fill:#000000;fill-opacity:0.3;display: none">
      <rect y="100" x="125" height="50"
         width="20" id="rect3590"
         style="color:#000000;fill:#000000;fill-opacity:0.3" />
      <rect y="100" x="150" height="50"
         width="20" id="rect3590"
         style="color:#000000;fill:#000000;fill-opacity:0.5" />
    </g>
    <path
       style="color:#000000;fill:#000000;fill-opacity:0.5"
       id="play" d="m 125,100 L 125,150 L 175,125 z" />
  </g>
</svg>

Vídeo

<video style="clip-path: url(#clip);" preload="auto" autobuffer="" src="http://videos.mozilla.org/serv/mozhacks/demos/resources/londonproject/fight.ogv" tabindex="0" id="video" ></video>

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

Share Button

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)));
  }
}
Share Button

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:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0">
<meta name="viewport" content="target-densitydpi=device-dpi">

Improving the Performance of your HTML5 App

Typographic effects in canvas

“Mobifying” Your HTML5 Site

Share Button

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.

Share Button

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

Share Button

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.
Share Button

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;
  }
}
Share Button

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' );
Share Button

Librería PHP para Google Buzz

La verdad es que no tengo ni idea del éxito/uso de Google Buzz, dicen que es un fracaso, pero claro, a saber lo que es un fracaso comparado con otras redes sociales (no Twitter o Facebook, claro), por lo que no está mal saber que existe una librería y que te permite trabajar con Google Buzz.

 
// Include the library files
require_once "google-api-php-client/src/apiClient.php";
require_once "google-api-php-client/src/contrib/apiBuzzService.php";
 
// Create the apiClient and Buzz service classes:
$apiClient = new apiClient();
$buzz = new apiBuzzService($apiClient);
 
// Add the OAuth authentication flow to your app:
// If a oauth token was stored in the session, use that- and otherwise go through the oauth dance
session_start();
if (isset($_SESSION['auth_token'])) {
  $apiClient->setAccessToken($_SESSION['auth_token']);
} else {
  // In a real application this would be stored in a database, and not in the session!
  $_SESSION['auth_token'] = $apiClient->authenticate();
}
 
// Make an API call
$activities = $buzz->listActivities('@consumption', '@me');
 
// And echo the returned activities
echo "<pre>Activities:\n" . print_r($activities, true) . "</pre>";

buzz-php-client

Share Button

Acortar URLs mediante goo.gl y PHP

La API de Google para acortar URLs permite acortar URLs, recuperar info del link original y las URLs acortadas de un usuario, aunque para usarlo se necesita crear una clave y dar de alta proyecto.

El resto es fácil, acceso mediante CURL y listo:

    define('GOOGLE_API_KEY', '[insert your key here]');
    define('GOOGLE_ENDPOINT', 'https://www.googleapis.com/urlshortener/v1');
 
    function shortenUrl($longUrl)
    {
        // initialize the cURL connection
        $ch = curl_init(
            sprintf('%s/url?key=%s', GOOGLE_ENDPOINT, GOOGLE_API_KEY)
        );
 
        // tell cURL to return the data rather than outputting it
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 
        // create the data to be encoded into JSON
        $requestData = array(
            'longUrl' => $longUrl
        );
 
        // change the request type to POST
        curl_setopt($ch, CURLOPT_POST, true);
 
        // set the form content type for JSON data
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
 
        // set the post body to encoded JSON data
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($requestData));
 
        // perform the request
        $result = curl_exec($ch);
        curl_close($ch);
 
        // decode and return the JSON response
        return json_decode($result, true);
    }
 
    $response = shortenUrl('http://phpriot.com');
 
    echo sprintf(
        '%s was shortened to %s',
        $response['longUrl'],
        $response['id']
    );

Shortening URLs for goo.gl with Google’s URL Shortener API

Vía / PHPDeveloper.org

Share Button