martes, 31 de agosto de 2010

Feliz día del blog!


Sí, hoy es el día internacional del blog. Es un día especial, en el que no hablaré de cuestiones técnicas, es día de celebración.

El día del blog se celebra cada 31 de agosto, desde el año 2005, y se debe a la similitud de la fecha "3108" y la palabra blog. La ocurrencia se la debemos al blogger israelí Nir Ofir, que por supuesto hoy tiene twitter, y lo pueden seguir por: @nirofir.

Existe un sitio oficial para la celebración de este día: www.blogday.org. En español, podemos visitar www.diadelblog.com.

¿Qué se supone que hagamos los blogueros el día de hoy? Compartir, difundir. La idea es hacer llegar a quienes los leen, los blogs que nosotros leemos y que creemos que todo el mundo debe leer. Pues bien, es lo que haré ahora. Voy a recomendar algunos de los blogs que sigo con mayor atención.



El primer blog que voy a recomendar es uno muy muy famoso, de la gente de hipertextual, se trata de alt1040. Como ellos mismos se definen, son "la guía del geek". Seguro que alguna vez hemos visto alguna de sus entradas. Una redacción simple e impecable, muy agradable de leer.



Mi segunda recomendación va para kirai, otro de los infaltables en mis feeds. Un blog obligado para los amantes de la cultura japonesa. Excelente redacción y grandiosas imágenes.



Recomiendo también a la gran bloggera Yoani Sánchez y su Generación Y. Quienes la leemos (también por twitter: @YoaniSanchez) sabemos todo el esfuerzo que signifca para ella publicar una simple entrada, en un país donde la libertad de expresión básicamente no existe. Valiente mujer que narra día a día su vida en la verdadera Cuba.



Otro imperdible es el blog Google Operating System. Simplemente genial. En un solo blog tenemos todo lo que tenga que ver con la gente de Google. Como ellos mismos lo aclaran, es un blog no oficial, pero siempre actualizado con el mejor contenido.



Por último, recomiendo seguir a Blog de Series. Para los amantes de las series (como yo) es una excelente fuente de información, nos mantienen al día con todo lo que acontece con nuestras series favoritas. Un excelente blog, con información de calidad.


No me queda más que desearles a todos FELIZ DÍA DEL BLOG


martes, 24 de agosto de 2010

Botón oficial de Twitter


Bueno, hoy voy a apartarme un poco de lo que hemos venido haciendo con twitter y kumbia, para hablar acerca de los recientemente lanzados botones oficiales de twitter. Seguramente si estás en esto de twitter y desarrollar aplicaciones para twitter al menos te habrás enterado de su existencia (si no, es momento de que revises tus feeds).

Para qué sirven?

Sirven para compartir enlaces a través de twitter. Digamos que tenemos un blog interesante, con entradas interesantes, que presumimos que nuestros lectores les gustaría compartir con el mundo a través de twitter. Bien, el lector interesado podría copiar la URL, pasarla por un acortador de direcciones, copiar la dirección corta, pegarla en twitter, copiar el título de la página web, pegarlo en twitter, eventualmente añadir algún comentario y finalmente twittear.

Twitter ahora le ahorra a esos lectores todo este proceso, al permitirnos a nosotros colocar un botón, que con sólo presionarlo, twitteará el enlace por el lector. Simple.

Cómo lo coloco en mis páginas web?

Es muy muy simple. Twitter habilitó esta url donde podemos personalizar como queremos que se vea nuestro botón y nos da el código HTML para que lo insertemos en donde queramos. El sitio nos permite personalizar el botón y (opcionalmente) especificar uno o dos usuarios de twitter que recomendamos para seguir (básicamente, en nuestro tweet se verán como un mention 'via').

Es así de sencillo. Una vez colocado el código HTML en nuestra página, cuando un lector lo oprima, se levantará un pop-up donde nos saldrá el texto que se va a twittear (el cual podremos editar) y el botón para enviarlo.


JavaScript?

Sí, el botón trabaja sobre JavaScript, por lo que si lo que queremos es insertarlo en un foro o cualquier plataforma que bloquee scripts, simplemente NO servirá. Qué podemos hacer entonces?

Bueno, fijándonos un poco en como funciona esto, veremos que a la final lo que el pop-up hace una vez presionado el botón de tweet, es redireccionar a una página web. No hace falta ser un genio para darse cuenta esa url a la que redirecciona el pop-up la podemos colocar en un enlace común y silvestre en HTML. El enlace se ve así:

<a href="http://twitter.com/share?url=URL&text=TEXTO&via=BLOG&related=AUTOR">Twittear</a>

En donde:
  • URL es la url que queremos recomendar en el tweet.
  • TEXTO es el texto que queremos que aparezca en el tweet.
  • BLOG es el nombre de usuario del primer twittero que queremos que aparezca recomendado.
  • AUTOR es el nombre de usuario del segundo twittero que queremos que aparezca recomendado.

Sólo hay que tener en cuenta que el TEXTO debe estar codificado, pues es parte de una URL. L gente de alt4040 sugiere este sitio para codificar nuestro texto.

Blogger/Wordpress

Si queremos que el botón aparezca en todas las entradas de nuestro blog, podremos copiar y pegar el código html en todas las entradas. Una forma más inteligente es agregar el código a nuestra plantilla.

Para Blogger, en nuestra plantilla debemos ubicar la clase post-footer y colocar allí el siguiente código (reemplazando BLOG y AUTOR por los correspondientes):

<a expr:href='"http://twitter.com/share?text=" + data:post.title + "&url=" + data:post.url + "&via=BLOG&related=AUTOR"'>Twittear</a>

Para wordpress, debemos ubicar el archivo single.php y allí colocar el siguiente código:

<a href="http://twitter.com/share?url=<?php echo urlencode(the_permalink()); ?>&text=<?php echo urlencode(the_title()); ?>&via=BLOG&related=AUTOR">Twittear</a>

Es todo. Nuestro enlace se verá así:


De más estás decir que si no queremos que se vea un texto, sino un botón, o que se vea con cierta apariencia, podemos hacerlo utilizando HTML como siempre lo hemos usado.


Leído en: alt1040


jueves, 19 de agosto de 2010

Construyendo un sitio con KumbiaPHP (4)


En esta entrada voy a hacer uso de la API de twitter para mostrar en una vista mi Timeline, a manera de práctica y a la vez introducir un par de aspectos de kumbia no tratados hasta el momento.

Voy a seguir utilizando el twitter_controller de la entrada anterior, lo que voy a hacer es agregarle una nueva función que llamaré timeline, y por supuesto, una vista para dicha función.

public function timeline()
{
if (empty(
$_SESSION['oauth_token']) || empty($_SESSION['oauth_token_secret']))
{
return
$this->route_to('controller: oauth', 'action: index');
}
else
{
Load::lib("twitter");
Load::lib("config");
$twitter = new Twitter(CONSUMER_KEY, CONSUMER_SECRET);
$twitter->setOAuthToken($_SESSION['oauth_token']);
$twitter->setOAuthTokenSecret($_SESSION['oauth_token_secret']);

$this->tweets = $twitter->statusesHomeTimeline();
}

}

El código es básicamente el mismo que el de la función update, hasta el punto en el que asignamos los Tokens de Acceso. La diferencia está en que aquí utilizamos la función statusesHomeTimeLine() y su resultado se lo asignamos a una variable denominada tweets. Esta función devolverá un arreglo con los datos de 20 tweets más recientes de nuestro TL. Por tanto, tweets será un arreglo de tamaño 20, en el que cada celda almacena un conjunto de variables con información del respectivo tweet.

¿Cómo saber qué información tengo en cada celda del arreglo? Consultando la API de twitter, en la cual encontramos abundante información sobre cada una de las funciones. En este ejemplo utilizaré algunos de los (muchos) datos que la API nos provee por cada tweet.

No hay más nada que hacer en nuestro controlador, el resto es cuestión de vistas. Creamos el respectivo timeline.phtml dentro del subdirectorio app/views/twitter y comenzamos a trabajar en nuestra vista. En nuestro controlador hemos creado una variable denominada tweets, con el arreglo de los últimos 20 tweets de nuestro TL, pues desde la vista tenemos pleno acceso a esta variable, es así de sencillo como pasamos información desde la capa de controlador hacia la capa de vista.

El resto es cuestión de decidir qué vamos a mostrar y cómo lo vamos a mostrar. En este caso, voy a introducir otro concepto de kumbia: los helpers, que son métodos de ayuda para la capa de Vista, por ejemplo para formatear fechas, insertar widgets, etc. Los helpers se almacen dentro del directorio app/extensions/helpers y tienen extensión .php.

En este caso, parece útil utilizar un helper para formatear un arreglo de tweets, de manera que si luego queremos imprimir un arreglo de tweets en otra vista, mantengamos el mismo formato y además no tengamos que volver a escribir el código. Voy a crear entonces un helper twitterHelper.php, en el cual de momento sólo tendrá una función, la que formatea el arreglo de tweets:

<?php
class twitterHelper
{

public static function
buildTL($tweets)
{
Load::lib("util");

$tabla = "<table>";

foreach(
$tweets as $tweet)
{
$tabla .= "<tr>";

$tabla .= "<td><img src=".$tweet['user']['profile_image_url']." height=48 width=48></td>";

$tweet_formateado = url_to_anchor($tweet['text']);
$tweet_formateado = tag_twitter_accounts($tweet_formateado);

$tabla .= "<td>".$tweet_formateado."</td>";

$tabla .= "</tr>";
}

$tabla .= '</table>';

echo
$tabla;
}
}

?>

Es código php planito, no hay mucho que explicar. Nuestra función recibe el arreglo de tweets, y devuelve la cadena html para insertar el TL formateado. Por cada tweet lo que voy a mostrar es el avatar del usuario y el texto. Repito que la respuesta de la API de twitter trae mucha información, sólo es cuestión de revisarla para ver que vamos a necesitar dependiendo de lo que queramos hacer.

Noten que para darle un poco de vistosidad a los tweets, estoy utilizando un par de funciones que transforman los @user en @user y que transforman las url que se encuentren en el texto en hiperlinks. Estas funciones están definidas en una biblioteca llamada util.php que invoco al principio, y que como ya hemos visto, debemos almacenar en el directorio app/libs. Muestro el contenido de este archivo a continuación:

<?php

// Transforma una url en el codigo HTML del anchor
function url_to_anchor($inputString)
{
$outputString = preg_replace('/(www\.)(\S+)/', 'http://\\1\\2', $inputString);
$outputString = preg_replace('/(\w+:\/\/)(\S+)/', '<a href="\\1\\2" target="_blank">\\1\\2</a>', $outputString);

return
$outputString;
}


// Anchoriza cuentas twitter
function tag_twitter_accounts($inputString)
{
return
preg_replace("/(\@)([a-zA-Z0-9\_]+)/", "@<a href=\"http://twitter.com/\\2\">\\2</a>", $inputString);
}

?>

Ya tenemos nuestro helper listo, ahora lo podremos utilizar en cualquier vista con cualquier arreglo de tweets. Vamos a crear la vista para timeline, para ver cómo se invoca:

<div class="textboxright">
<h2>Mi TL</h2>
<br>
<?php
View
::helpers('twitterHelper');

twitterHelper::buildTL($tweets);
?>

</div>

Como vemos, nuestra vista se simplifica enormemente. La forma de utilizar el helper es simple. Creo que ya ha quedado claro, pero recuerdo que en nuestra vista estamos utilizando la variable $tweets (es el argumento con el que invocamos a nuestro método buildTL()), la cual creamos en la capa de controlador.

Es todo por el momento. Espero que todo haya quedado claro.




miércoles, 18 de agosto de 2010

Construyendo un sitio con KumbiaPHP (3)


En la entrada anterior vimos un ejemplo sencillo en kumbiaPHP donde trabajamos con vistas, partials, algunos helpers (por ejemplo link_to()). En fin, un ejemplo sencillo para ir poniéndonos en contexto con kumbia.

Tal como prometí, en esta entrada vamos a comenzar a trabajar con controladores, además retomando nuestro objetivo que no es otro que el hacer aplicaciones para twitter. Vamos a realizar una aplicación en kumbia que se conecte a twitter y permita realizar actualizaciones de estado (similar a lo que hicimos en la entrada Un nuevo comienzo, pero ahora con kumbia y mejorando algunas cosillas).


¿Qué asumo?

Asumo que has ido leyendo las entradas y que por tanto tienes:
1) Una aplicación registrada en twitter
2) El ejemplo de la entrada anterior corriendo en tu servidor web

En lo que resta de entrada, voy a asumir que hemos llamado a nuestro directorio web 'tutuitero', tal como en la entrada anterior.


Manos a la obra

Lo primero que debemos hacer es copiar nuestra Twitter Class (el archivo twitter.php) dentro del directorio app/libs, pues éste es el directorio para almacenar todas las librerías externas a kumbia.

La versión actual de twitter.php tiene un bug, ya conocido por Tijs Verkoyen, que debemos reparar. No es nada del otro mundo, vamos a la línea 231 de twitter.php y sustituimos:

private function calculateHeader(array $parameters, $url)

por:

private function calculateHeader(array $parameters, $url=self::API_URL)

Por comodidad, también he guardado en el directorio app/libs el archivo config.php, que recordemos contiene el consumerKey/consumerSecret de nuestra aplicación y la url de Callback. Ya veremos como vamos a utilizar estos datos.


Creando nuestros controladores

Ahora procedemos a crear nuestros controladores. Lo que vamos a hacer es crear un controlador para manejar todo el asunto de la conexión a twitter con Oauth, que luego podamos invocar desde cualquier otro lugar. Para que queden claros los conceptos, voy a crear otro controlador desde donde vamos a hacer 2 cosas en principio: enviar actualizaciones de estado y ver nuestro timeline.

Comencemos entonces creando nuestro controlador oauth_controller.php, dentro de app/controllers. ¿Qué va a hacer nuestro controlador? Si recordamos lo publicado en la entrada Nuevo comienzo, para realizar una actualización de estado, teníamos una variable de la clase twitter, a la cual por decirlo de alguna forma, autorizábamos (con un Access Token) y luego sobre esa variable invocábamos una función que se utilizaba la API de twitter para realizar la actualización de estado.

Ahora vamos a tener posiblemente varias páginas que van a realizar diferentes tareas (en cada una tendremos al menos una instancia de la clase twitter), queremos tener almacenados en sesión los datos de conexión para utilizarlos en todo nuestro sitio, y no tener que autorizar cada vez que vayamos a hacer algo. Bien, nuestro oauth_controller será el encargado de esta tarea.

oauth_controller se encargará de verificar si están en sesión los datos de acceso, en caso de no estarlos, se conectará a twitter, pedirá autorización al usuario y una vez otorgada, almacenará los datos correspondientes en la sesión del navegador. Voy a colocar el código y luego explicaré los aspectos relevantes:

<?php
Load
::lib("twitter");
Load::lib("config");

class
OauthController extends ApplicationController {

protected
$consumerKey;
protected
$consumerSecret;
protected
$callBack;

public function
initialize()
{
$this->callBack = OAUTH_CALLBACK;
$this->consumerKey = CONSUMER_KEY;
$this->consumerSecret = CONSUMER_SECRET;
}

public function
index()
{

// crear instancia
$twitter = new Twitter($this->consumerKey, $this->consumerSecret);

// Si no tengo tokens de acceso
if (empty($_SESSION['oauth_token']) || empty($_SESSION['oauth_token_secret']))
{
// get a request token
$twitter->oAuthRequestToken($this->callBack);

// authorize
if((!isset($_GET['oauth_token'])))
$twitter->oAuthAuthorize();

// get tokens
$token = $twitter->oAuthAccessToken($_GET['oauth_token'], $_GET['oauth_verifier']);

$_SESSION['oauth_token'] = $token['oauth_token'];
$_SESSION['oauth_token_secret'] = $token['oauth_token_secret'];

}
else
{
$token['oauth_token'] = $_SESSION['oauth_token'];
$token['oauth_token_secret'] = $_SESSION['oauth_token_secret'];
}

// set tokens
$twitter->setOAuthToken($token['oauth_token']);
$twitter->setOAuthTokenSecret($token['oauth_token_secret']);

}

}

Como vemos, el código se parece mucho a lo que hemos trabajado antes. Entre las cosas nuevas, tenemos la invocación de nuestras librerías, la cual se realiza mediante la función Load::lib(nombre_de_nuestra_biblioteca);

Luego nos conseguimos con la función initialize(), la cual es una función especial, que se ejecuta antes de invocarse el controlador. En este caso, la hemos utilizado para asignar los valores definidos en config.php.

Luego viene la función index(), en la cual tenemos nuestro algoritmo de verificación de credenciales, conexión a twitter y almacenamiento de credenciales.

Eso es básicamente nuestro controlador. Ahora veamos como sería la vista. Yo simplemente voy a colocar un mensaje que diga que la conexión ha sido exitosa y que muestre un enlace a nuestra página de actualización. Asumo que ya sabemos manejar vistas, pero para recapitular recordamos lo que hay que hacer: crear un subdirectorio oauth dentro de app/views, y dentro de este directorio creamos un archivo index.phtml (pues nuestro controlador sólo tiene una acción, y se llama index). El contenido de este archivo será el siguiente:

<div class="textboxright">
<h2>Conexi&oacute;n exitosa</h2>
<br>
<p>Se ha establecido una conexi&oacute;n exitosa con twitter, utilizando Oauth.</p>
<p><?php echo link_to('twitter/update/', 'Actualizar Estado') ?></p>
</div>

Acá estamos redireccionando hacia una vista que aún no hemos creado, nuestra vista de update. Si queremos probar nuestro oauth, podemos ir a la dirección:
http://localhost/tutuitero/oauth/

Lo que ocurrirá es que al cargar la página, el controlador se dará cuenta que no tenemos autorización, automáticamente redireccionará el navegador al sitio de twitter, y una vez obtenida la autorización nos redireccionará a la dirección del callback (yo en mi config.php he puesto la misma dirección, http://localhost/tutuitero/oauth/). Finalmente veremos el texto que colocamos en la vista, incluyendo el enlace al sitio que aún no hemos creado. Vamos a por él.


Nuestro segundo controlador

Ahora vamos a hacer nuestro segundo controlador. Dijimos que este controlador en un principio va a tener 2 funciones (y por tanto 2 vistas): una para enviar actualizaciones de estado a twitter y otra para ver nuestro timeline. Empecemos por la primera.

<?php
class TwitterController extends ApplicationController {

public function
update() {

if (empty(
$_SESSION['oauth_token']) || empty($_SESSION['oauth_token_secret']))
{
return
$this->route_to('controller: oauth', 'action: index');
}
else
{
Load::lib("twitter");
Load::lib("config");
$twitter = new Twitter(CONSUMER_KEY, CONSUMER_SECRET);
$twitter->setOAuthToken($_SESSION['oauth_token']);
$twitter->setOAuthTokenSecret($_SESSION['oauth_token_secret']);

if(
$this->request('twitter-msg'))
{
$twitter->statusesUpdate($this->request('twitter-msg'));
}

}

}

}
?>

El código se explica solo. Lo primero que verificamos es si en sesión tenemos nuestro Access Token, y de no ser así, utilizamos el helper router_to(), para redireccionar a oauth que se encargará del proceso de conexión a twitter. En caso de existir los tokens en sesión, invocamos nuestras librerías, creamos una instancia de la clase twitter y asignamos los tokens. Finalmente, utilizamos el método request(), para verificar si por get/post el controlador está recibiendo la variable 'twitter-msg', y en caso afirmativo, realizar la actualización a twitter, utilizando la función statusesUpdate().

Veamos ahora la vista:

<div class="textboxright">
<h2>Actualizar Status</h2>

<?= form_tag('twitter/update') ?>

<br>
<?= textarea_tag('twitter-msg', 'size: 80', 'rows: 2', 'cols: 60') ?>
<?= submit_tag('Update!') ?>

<?= end_form_tag() ?>

</div>

Aquí estamos creando un formulario con un textArea y un botón de submit. Importante que el nombre (primer parámetro) de nuestro textArea sea 'twitter-msg', pues este es el nombre que espera nuestro controlador.


Pequeña recapitulación

La entrada se ha vuelto un poco larga, por lo que voy a dejar la segunda parte de lo prometido (mostrar nuestro TL) para la próxima. Lo importante de esta entrada es que:
  1. Por primera vez hemos utilizado nuestros controladores para hacer algo.
  2. En nuestro controlador oauth_controller.php tenemos el algoritmo de conexión que probablemente utilizaremos sin necesidad de cambiar de ahora en adelante.
  3. Con nuestro 'update', por primera vez enviamos información desde la capa de Vista hacia la capa de Controlador, utilizando un formulario.
Más tarde, cuando mostremos nuestro timeline en una vista haremos lo contrario a lo que hicimos con 'update', pues, pasaremos información desde nuestro controlador hacia la vista.


Nota sobre los controladores y modelos

Desde que comencé a hablar de Kumbia, traté el tema de la flexibilidad y sencillez del framework. Hasta el momento no hemos hecho uso de la capa de Modelo, lo cual básicamente está mal, si estamos basándonos en una filosofía MVC. Sin embargo, hemos hecho cosas muy sencillas, y que luego podremos corregir si queremos apegarnos estrictamente a la teoría.

En breve espero estar haciendo pruebas con conexiones a bases de datos, y seguramente tocaré el tema de los modelos, y de por qué un modelo no es necesariamente una base de datos (también revisaré algunas de las cosas que hemos hecho violando las 'leyes' de la arquitectura MVC).

Espero que haya sido útil la entrada, y agradecido con cualquier comentario, duda o sugerencia.