Amigos,

para este año 2012 haré un servicio de utilidad a ustedes mis lectores y amigos, ya que ésta es la forma que tengo para devolver los favores que la comunidad de Intenet me ha entregado.

Este servicio de utilidad se trata de una donación de dos sitios web durante el año 2012, uno por cada semestre. Mi intención es regalar y retribuir de la mejor forma que tengo.

Para ésto necesito que me comenten sus proyectos en este post, los ganadores o benificiados serán declarados el día 1 de Marzo de 2012 en el blog.
El criterio de elección será en base a las características del proyecto y de la importancia que tenga para ustedes, es bien subjetiva la elección así que no pierdan cuidado en detallar bien de que se tratará su sitio web y para que lo necesitan.

Las características de la “donación” son las siguientes:

• Sitio Web
• Hosting gratis por 1 año (con db y todo eso, es de dreamhost)
• Wireframes de recuerdo
• Tips básicos acordes a la creación y mantención del sitio web

El diseño va por parte mía pero claramente le pediré ayuda a mi amigo @carloselias para que me entregue mejores soluciones. El desarrollo puede ser desde un sitio web estático, theme de WordPress o algo autoadministrable (depende de lo que se necesite).

Lo único que necesito es la colaboración de ustedes y las ganas de mejorar la web.

Gracias a todos por sus comentarios y sus visitas.

Atte.

Alvaro Véliz

Chef de aplicaciones

Ha pasado mucho tiempo desde mi último artículo y hoy quiero partir bien el año presentando una nueva receta: “Perkins a la node“.

Ustedes recordarán a Perkins, el framework css basado en less que permite diseñar sitios web de una forma muy rápida. Este framework ha seguido con su desarrollo y la última característica incluye una integración con node.js el cual….epa! Les voy a mostrar paso a paso a que se refiere esta integración.

Antes de partir les voy a contar que node.js es un entorno de desarrollo en el servidor basado en V8, es decir, JavaScript! Con node.js solamente basta saber JavaScript para programar, cuenta con un gestor de paquetes que permite expandir sus funciones y una lista interminable de utilidades.

Sobre este entorno fue que el equipo de hamsters entrenados los programadores de Perkins desarrollo un package que agrega un servidor de pruebas y un asistente de creación de sitios web.

Ingredientes

• node.js
• npm

Preparación

Instalar node

Dirígete a la página de node.js y sigue los pasos de instalación para tu sistema operativo.

Instalar npm

Luego instala el gestor de paquetes de node desde su sitio web.

Instalar perkins

Luego de haber instalado npm vamos a instalar perkins con el siguiente comando:

 user@~:$ npm install -g perkins 

El modificador -g instala el paquete de forma global en el sistema, en caso de que no quieras hacerlo global solo basta con omitirlo.

Al instalar Perkins aparcerá el siguiente mensaje:

 perkins@2.0.1 ./node_modules/perkins
├── paperboy@0.0.3
└── commander@0.5.1

Este comando también instalará “Paperboy” y “Commander”. El primero es una utilidad de servidor de web que permitirá ver los resultados de perkins sin tener que instalar otro servidor web. El segundo paquete permite la interacción con comandos en línea.

Dejar a Perkins que sirva

Ahora que tenemos a perkins en nuestra mesa podemos pedirle con nos sirva lo mejor del menú, veamos un ejemplo de uso. Para ésto vamos a ver el modo de uso con el comando “–help”

perkins --help
Usage: perkins [command] --options <dir>

Commands:

preview [path]
This option create a Perkins Preview HTTP Server

setup <path>
Just relax let me take care of building a version of ... well me.

Options:

-h, --help         output usage information
-V, --version      output the version number
-p, --port <port>  specify the port [8000]

Vamos a crear un sitio utilizando el comando “setup”:

perkins setup receta

Esto nos entrega una estructura básica, archivos de perkins y luego nos pregunta si nos interesa subir un servidor para previsualizar el sitio web. Si respondemos “Yes” nos dirá lo siguiente:

Perkins: Now... did you want me to execute the Perkins Preview HTTP Server? Yes
Perkins: Your preview server for receta is ready, Sir. on port 8000

Vamos a revisar nuestro servidor en http://localhost:8000/

Y luego solo nos resta modificar los archivos que nos ha creado Perkins en el directorio “receta”.

Finalmente comenzamos a editar index.html y veremos automáticamente los cambios en nuestro servidor. Es perfecto para comenzar a hacer maquetas de sitios web sin tener que depender de descargas ni servidores.

Bon apetit!

Una de las premisas de Perkins Framework es que es una herramienta que te ayudará a hacer Sitios Web de manera rápida.
Mi misión en este tutorial es cocinar demostrar lo anterior, y de paso ayudar al proyecto con una receta guía de uso.

Como estoy acostumbrado haré este tutorial como si fuese una receta, asi que tomen sus implementos y comencemos.

Ingredientes

• Explorador Web estándar  (FF3.6+, Chrome, Safari, Opera, Webkit gecko, IE9+)
• Tener conocimientos de HTML4/5, CSS y Javascript
• Estar relacionado con tipografías web (@font-face) y de alguna manera, saber como funciona LESS.js
• La última versión del framework, ubicable en Google Code (http://code.google.com/p/perkins-less/)

Preparación

Para comenzar debemos descargar la última versión de Perkins y descomprimir sus contenidos. Dentro del paquete nos encontramos con la siguiente estructura :

La lista de archivos que nos entrega Perkins es básicamente una estructura estándar para Sitios Web, divide sus contenidos según su tipo organizando las imágenes en images, librerías javascript en javascripts y los estilos css en  stylesheets.

Acá haremos nuestro primer apunte:

Como Perkins se apoya en LESS para gestionar los estilos, en la carpeta stylesheets encontraremos archivos de extensión “less”, que son equivalentes a los de extensión “css”. El objetivo es utilizar archivos “.less” para nuestros estilos nuevos, sin embargo, eso no quita la posibilidad de seguir utilizando los archivos “css”.

Nuestro siguiente paso es ver que nos entrega el archivo index.html, ¿No están intrigados? Veamos:

OMG! Es toda una referencia a los estilos, mixins y herramientas de Perkins

Siendo sincero, la primera vez que vi este archivo no entendí mucho que era Perkins, pero como soy precavido supe que en algún momento lo utilizaría. Así que lo que hice después fue renombrarlo a help.html para poder accederlo cuando quiera. (Aquí es cuando ustedes también renombran el archivo para que no pierdan la referencia como alguna vez lo hice, sí, en realidad la perdí)

Creando nuestro index

El siguiente paso es crear nuestro index.html para comenzar con el diseño. Acá haré otro alto ya que probablemente @carloselias me hubiese dicho que copiase el archivo index.html a help.html y borrara todos los contenidos de index.html, pero mi intención es explicarles como funciona desde cero la creación de un sitio incluyendo las configuraciones y cabeceras necesarias, sabiendo que posteriormente crearán otros sitio del mismo modo.

Para crear nuestro index haremos lo siguiente:

Crear la estructura básica

Se recomienda que utilicen una estructura básica HTML5, como la siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="utf-8">
 <title>Mi sitio web en perkins</title>
</head>
<body>

</body>
</html>

Incluir las librerías en la cabecera

Acá debemos incluir liberías básicas como : less.js y el archivo app.less.
Opcionalmente agregaré la cabecera de google chrome frame para el soporte en IE, y una librería para que IE9 reconozca los tags de HTML5.
Además debemos agregar las tipografías y la configuración de tipografías utilizando Google Web Font.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>Mi sitio web en perkins</title>
 <link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
 <link href="stylesheets/app.less" media="all" rel="stylesheet/less" type="text/css" />
 <script src="javascripts/less-1.0.41.js"></script>
 <script type="text/javascript" charset="utf-8">
 // Under development you should uncomment the following lines,
 // to make the browser refresh the changes that you are makeing in your app.less file.
 less.env = "development";
 less.watch();
 </script>
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>
<body>

</body>
</html>

Configurar Perkins

El siguiente y último paso es configurar perkins. Para esto abriremos el archivo “stylesheets/perkins.config.less” que contiene entre otras cosas la configuración de:

• Grillas (grids) : En las tres primeras configuraciones (@width, @columns, @margin)
• Tipografías (@font-face): En las cuatro siguientes configuraciones
• Colores (@color) : Donde se puede definir el color del sistema (@system), links y otros de rápido uso
• Iconos (mnml.icons) : Una tipografía que viene con perkins que funciona para convertir texto en iconos
• Core (p-core.less) : La librería core del sistema

Luego de haber pasado por nuestra simple instalación de perkins podemos crear el sitio web, teniendo en cuenta que los estilos del sitio que desarrollemos deben estar alojados en el archivo “stylesheets/app.less”, que por cierto, podemos borrarlo o renombrarlo.

Creando nuestro sitio

Aprovechando los nuevos tags que nos entrega HTML5 haremos un sitio rápidamente y mostraré algunas de las cosas que podemos hacer utilizando Perkins.

Header

<header>
 <div>
 <div>
 <h1>
 Mi primer sitio con Perkins
 </h1>
 </div>
 </div>
 </header>

ZenCoding: header>div.row>div.grid16.column>h1

Seccion de contenido

<section id="content">
 <div class="row">
   <div class="grid-10 column">Que locura de sitio web</div>
   <div class="grid-6 column">Acá podría existir un nav o algo así no?</div>
 </div>
 </section>

ZenCoding: section#content>div.row>div.grid-10.column+div.grid-6.column

Footer

<footer>
 <div class="row">
   <div class="grid-16 column">Served by Perkins</div>
 </div>
</footer>

Zencoding: footer>div.row>div.grid-16.column

Sal

Editamos el archivo app.less y agregamos sal:

body {
 background: @yellow;
}

header {
 background: @gray;
 height: 100px;
 color: @white;
}

#content {
 height: 300px;
}

footer {
 background: lighten(@gray, 20%);
 height: 100px;
}

Pimienta

Al header

header {
 background: @gray;
 height: 100px;
 color: @white;
 .bs();
 h1 {
 border: 1px solid lighten(@gray, 15%);
 background: @green;
 .radius();
 padding: 10px;
 }
}

Al Footer

footer {
 background: lighten(@gray, 20%);
 height: 100px;
 .bs();
 .ts();
 .tac();
}

Otras especias

Agregamos un menu nav en donde decía “Acá podría existir un nav o algo así no?” (Línea 36 del index.html)

<nav>
  <ul class="v-menu">
   <li><a href="">Inicio</a></li>
   <li><a href="">Noticias</a></li>
   <li><a href="">Contacto</a></li>
  </ul>
 </nav>

ZenCoding: nav>ul.v-menu>li*3>a

Y le damos un poco de paprica :

nav {
 ul {
 a {
 background: @green;
 color: @white;

 }
 }
}

Acompañe con algo light y sirva a punto

Encontraremos muchas más cosas si nos ponemos a revisar los archivos dentro de la carpeta perkins. Próntamente les tendré más tutoriales para que podamos adentrarnos en la herramienta, por ahora me despido y que tengan buen provecho!

By the way, if you need this tutorial in English use the Google Translator Toolbar or wait for the translation in Google Code.

Cuando tienes un blog de WordPress en tu dominio personal siempre tienes la posibilidad de cambiar los themes (como en mi caso, que dicho sea de paso fué actualizado), instalar plugins, entre otras cosas.

Pero el problema está en que por defecto WordPress no viene con la posibilidad de hacerlo automáticamente, por lo tanto, incurrimos a subirlos “a mano” al hosting, luego descomprimirlo y posteriormente activarlo y configurarlo.

Este problema puede ser solucionado con 3 simples pasos…

Primer paso

Dar permisos de escritura (777) a la carpeta “wp-content”

Segundo paso

Modificar el filtro “filesystem_method” editando el archivo “wp-config.php” y agregando las siguientes lineas al final del archivo:

 if(is_admin()) {
  add_filter('filesystem_method', create_function('$a', 'return "direct";' ));
  define( 'FS_CHMOD_DIR', 0751 );
} 

Tercer paso

Los engañé, no existe un tercer paso.

Con esto ya podremos instalar themes, actualizar e instalar plugins automáticamente.

Enjoy!

Luego de terminar la primera versión de setBio comenzamos a mejorar la aplicación, partiendo por el holder!
El holder (el home cuando no estás logeado en la aplicación) tiene dos listas de biografías en la parte inferior de la página, ahí quize innovar implementando un plugin de jQuery que hiciera el efecto “slide” para cada biografía.

El tema es que no encontré el plugin, es decir, lo encontré…pero eran demasiado para una función tan simple. Es por eso que tomé la decisión de hacerlo a mi modo, pero para hacerlo interesante me propuse aprender como es la creación de un plugin de jQuery.

Idea principal

Para crear el plugin de jQuery hice algunas pruebas “en duro” (hardcode) en el document ready.

La idea principal fué al siguiente:

• Sacar el último elemento de una lista (UL-LI) y luego dejarlo como primer elemento
• Realizar la función anterior cada cierto tiempo utilizando setInterval

El html es una lista simple como la siguiente:

<ul id="biographies">
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
  <li>Lorem ipsum dolor sit am...</li>
</ul>

y el código que hace el efecto slider es el siguiente:

$(document).ready(function(){
  // Agrego un overflow para ocultar algunos resultados
  $('#biographies').css('height', 470).css('overflow', 'hidden');
  setInterval("sliderText()", 5000);
});

function sliderText() {
  $('#biographies').prepend('<li>' + $('li:last', $('#biographies')).html() + '</li>');
  $('li:first-child', $('#biographies')).hide().fadeIn('slow');
  $('li:last', $('#biographies')).remove();
}

Creando el plugin

Ahora, para convertir esto en plugin no hubo demasiada ciencia. jQuery nos dice cómo es que se debe crear un plugin en su sitio web y al final nos da la clave de cómo debemos comenzar

Utilizando esta información nos resulta algo como lo siguiente:

(function($){
 	$.fn.extend({
 		aSliderText: function(options) {
			var defaults = {
				updateTime: 6000,
				height: 0,
				element: 'li'
			}
			var options = $.extend(defaults, options);

    	return this.each(function() {
				var o = options;
				var obj = $(this);

				if (o.height > 0) {
					obj.css('height', o.height).css('overflow', 'hidden');
				}

	 			var updateSlider = function() {
					obj.prepend('<'+o.element+'>' + $(o.element+':last', obj).html() + '</'+o.element+'>');
					$(o.element + ':first-child', obj).hide().fadeIn('slow');
					$(o.element + ':last', obj).remove();
	 			};

				window.setInterval(updateSlider, options.updateTime);
    	});

    }
	});
})(jQuery);

Acá utilicé un truco para crear el setInterval e utilizar la función de jQuery. Se entrega como parametro una función como tal, es por eso que creamos la variable updateSlider como función.

Luego, se utiliza el plugin del siguiente modo:

$('#biographies').aSliderText({updateTime:7000, height: 560});

Descarga y Demo

El plugin está bajo la Licencia MIT que puede ser descargado acá: jQuery aSliderText v0.1 y si quieren ver el DEMO, revisen aquí: jQuery aSliderText DEMO

También pueden visitar la página de plugin en jQuery Plugins

Aún estoy haciendo pruebas con este plugin con el objetivo de publicar una versión más estable, así que si lo descargan deben saber que aún puede tener bugs o no funcionar con versiones antiguas de jQuery.

Saludos y suerte con esos plugins!

setBio es una aplicación que permite que tus amigos te escriban una biografía que defina tu perfil en Twitter.

Cómo nace la idea?

La idea nace de la necesidad de aquellas personas que no tienen la capacidad de definirse a sí mismos o que simplemente no están interesados en escribir alguna información que los describa. Junto a Carlos Elías desarrollamos el concepto, lo comenzamos hace 3 meses y se terminó en 3 días. Yo desarrollé la aplicación y él creo el diseño.

Cómo se ocupa?

Es bien simple, debes ingresar a la aplicación con tu cuenta Twitter, luego presionar el boton “Escribir una Bio” y rellenar el formulario para enviar biografías a tus amigos. El formulario te permitirá seleccionar el amigo al cual quieres escribirle la biografía y definir un mensaje para que le avises a través de Twitter.

Cuando tu amigo reciba el mensaje e ingrese, podrá ver las biografías que le hayan enviado y también podrá compartir biografías con sus propios amigos.

Por qué es útil?

Sabes por qué es útil? Pues porque Twitter utiliza la Biografía del usuario como descripción del perfil (a nivel de página) y eso permite la indexación de tu perfil de Twitter en los buscadores en base a lo que dice tu descripción.

Por ejemplo, veamos el perfil de Twitter de @edoApp

El código que encontramos es el siguiente:

<meta content="Un pequeño muy bien educado, te ayudará a editar tus sitios web de forma muy rápida. — @alvaroveliz" name="description" />

Y ESTO QUE SIGNIFICA?.
Significa que mientras mejor esté descrito el meta description de la página del perfil, mejor será indexada. Es como hacer SEO con la ayuda de tus amigos….se entiende?

Cómo ayudar?

No se preocupen, no les voy a pedir donaciones, solamente necesito que me ayuden utilizando la aplicación, enviando sus comentarios, sugerencias y errores a @setBio…AH! y claro, envíando todas las biografías que quieran!

Muchas gracias por utilizar la aplicación, sinceramente.

Una forma muy simple de usar Twitter en Firefox sin instalar extensiones es sacando el provecho de su versión mobile:

Ingresa con tu cuenta a http://m.twitter.com

Arrastra la pestañana a tus favoritos

Presiona el botón derecho en el favorito arrastrado y seleciona la opción “Propiedades”, ahí seleciona “Cargar este marcador en el panel lateral”

Ahora cierra la pestaña de twitter mobile y presiona el marcador

Fácil no?

Ayer, fué un día de revelación y motivación. Me disponía a irme a la Universidad cuándo de la nada se me ocurrió mezclar Twitter con un TTS, es decir, crear una aplicación leyera los tweets. Lo encontré entretenido, así que en el camino modelé y diseñe la solución a mi problema.

Ya estando en clases, el profesor nos hablaba sobre “recursos, requerimientos y bloqueos” mientras yo programaba usando Kohana lo que iba a ser mi aplicación. Cuando terminaron las clases ya tenía el 50% de la aplicación, podía hacer un registro y login con Twitter usando oAuth. Llamé a mi amigo Carlos Elías para que pensara en una “UI” para la aplicación.

A las 12 de la noche estaba lista la interfaz y solo faltaba coordinar el TTS de Google Translate con el player de Google Reader.

Hoy, 16 de Abril de 2010, he lanzado TOL: Tweet out Loud en versión beta.

Los invito a usarla!

Una vez estaba en la cocina preparándome un café cuando de repente me bajó la inspiración y decidí hacer una aplicación Facebook. La investigación fue ardua, hice las pruebas de concepto respectivas y logré mi cometido. Sin embargo, por cosas de tiempo no  terminé la aplicación para variar y quedó stand by hasta el próximo semestre.

Hace unos días, me pidieron ayuda para hacer lo mismo usando lenguaje FBML y recordé lo que ya había realizado. Pero como la memoria es frágil decidí utilizar a nuestro amigo Google para resolver algunas dudas que tenía. Para mi sorpresa, no encontré lo que necesitaba, así que por lo tanto decidí hacer un Tutorial en lenguaje humano para que todos los desarrolladores entendamos como es que debemos hacer una aplicación para Facebook compatible con la versión actual. Así que, manos a la obra!

Como funciona una aplicacion Facebook?

Facebook soporta dos formatos de aplicaciones externas, aplicaciones creadas usando FBML y las que usan el no estandar iframe. Para este tutorial nos enfocaremos en la creación de aplicaciones usando FBML, ya que es una opción importante cuando se necesita usar las gráficas y herramientas de Facebook nativas.

Antes de seguir les recomiendo leer el Tutorial que Facebook dispone como introducción para que entiendan con mayor claridad, luego de eso, sigan con la este tutorial.

Ingredientes

• Tener conocimientos de HTML, CSS y de PHP
• Contar con un hosting y dominio para subir la aplicación
• Librerias cliente PHP de Facebook – Que puedes descargar aquí
• Ser parte de Facebook Developers – Si no eres parte, debes ingresar en App Developers
• Un objetivo de aplicación, por ejemplo: “Una aplicación para mostrar mi último mensaje de twitter!”

Creando la aplicacion

Como ya contamos con todos estos nuestros ingredientes podemos comenzar con la creación de la aplicación.

Lo primero en el menú es Configurar una nueva aplicación, esto lo podemos hacer en la App de Developers de Facebook  haciendo click en el botón “+ Configurar una nueva aplicación” o, si estás más atento, haciendo click en el link anterior.
Acá entraré en detalle para guiarlos mejor:

• Escribimos el nombre de nuestra aplicación y aceptamos los términos y condiciones.
  
• La siguiente pantalla nos entrega información relacionada con nuestra aplicación y que ocuparemos para el desarrollo: Application ID, API Key, Secret. Estos valores son los que nos identifican con Facebook como aplicación y que nos permite interactuar con Facebook y los usuarios. Estos datos son sumamente importantes y nunca deben ser revelados, bueno, el nombre sí.
  
• A la izquierda tenemos un menú de configuración donde nos enfocaremos en los siguientes puntos: “Auth (Autencación)”, “Profiles (Perfiles)“, “Advanced (Avanzado)” y “Canvas (Lienzo)“.
• En “Auth (Autencación)” seleccionamos “Disponible para usuarios” y en Post-Authorize Callback URL escribimos la URL de retorno, es decir, “http://apps.facebook.com/ultimotwitterupdate/“
• En “Profiles (Perfiles)” debemos escribir el Tab Name y el Tab URL.
  En el Tab Name debemos escribir un nombre de no más de 16 caracteres (“Ultimo Update“) y en el Tab URL debemos definir la URL donde se encuentra la vista de nuestra aplicación para los perfiles (“tab“).
  El Profile Box es la forma en que se mostrara en las cajas del perfil por defecto, por ejemplo “Narrow“.
• La seccion de “Advanced (Avanzado)” nos sirve para dejar nuestra aplicación en “Sandbox Mode” y así solo los desarrolladores podrán verla. Debemos activar esta opción antes de seguir.
• En la sección “Canvas (Lienzo)” se define la URL que contiene el despliegue (layout) de la aplicación y de donde Facebook debe obtenerlo para mostrarlo. Para configurarlo vamos a escribir “ultimotwitterupdate” en la URL de la página y http://www.midominio.com/ultimotwitterupdate/ en Canvas Callback URL. Para ver los cambios realizados debemos desarrollar en forma local y subir mediante FTP.
  Luego, en la sección donde dice “Render Method (Método de renderización)” debemos seleccionar FBML, los otros datos quedan por defecto.
• Guardamos los cambios.

A ensuciarse las manos

Ahora es cuando viene la parte mas entretenida de la historia, el desarrollo de la aplicación.

Pero, un momento…no tengo idea de que debe hacer la aplicación! Mejor investigo todo lo necesario en base al objetivo planteado y luego, defino la conclusión.

El proceso anteriormente nombrado dio como resultado dos objetivos más específicos:

• “Debo usar la API de Twitter para traer el último mensaje de un usuario en formato JSON”
  Pero, y cómo? Del siguiente modo, usamos la API de Twitter para llegar a la información de algún usuario:
  http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USUARIO_TWITTER&count=1
• “El usuario Facebook elige el nombre de usuario y se almacena en una base de datos (SQLite)”.
  Listo! Ahora que tengo claro lo que debo hacer voy a dedicarme al layout en Facebook, porque si quiero realizar la aplicación primero debo saber verla funcionando.

Para esto, tenemos que conocer un poco más de FBML, así que les dejo la misión de leer sobre este lenguaje en el Wiki de Facebook.

Preparar bien la mesa

Antes de partir con el sitio debemos configurar un archivo que permita la comunicación entre Facebook y la aplicación. Dicho archivo se llama “xd_receiver.htm” y es un archivo que va en la raiz del sitio. Su contenido es el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript"></script>
</body>
</html>

Si quieren leer más sobre esto pueden hacerlo en el Wiki de Facebook: Cross-Domain Communication Channel

“Aunque no venia preparado”

Ahora viene lo importante. Yo sé que ustedes esperan que explique todo el código de conexión y de configuración para la App Facebook, pero les quiero contar que me adelanté y les traje una especie de framework que les facilitará muchas de las tareas. Este framework se creó en base a otras aplicaciones que tenía desarrolladas y que me hicieron pensar en la real ayuda de este tutorial, su nombre es “Fracework” y lo pueden revisar en: http://code.google.com/p/fracework/

Esta suerte de framework, permite configurar la aplicación y crear las vistas. Probablemente cuando lo vean no va a ser lo que esperan a nivel de código, pero estoy seguro que les va a ser muy útil.

El contenido de Fracework tiene la siguiente estructura de archivos:

• client/ : Libreria cliente PHP de Facebook
• config/ : Archivo de configuraciones de la aplicación
• includes/ : Conexión con facebook, instancia de clase clientes
• modules/ : Modulos de la aplicación
• views/ : Vistas de la aplicación
• index.php : Archivo que muestra las distintas vistas
• xd_receiver.htm : Cross-Domain Communication Channel

Para utilizarlo solo deben descomprimir el archivo en la carpeta de la aplicación y comenzar a desarrollar.

Configuracion

En la carpeta “config“, de nuestra aplicación, nos encontramos con el archivo de configuraciones de la aplicación “facebook.php“, acá editamos los datos de nuestra aplicación y guardamos:

<?php
/**
* Facebook App client
* @author @alvaroveliz
**/

$fb_apikey        = '...'; // Configurar API KEY
$fb_secret        = '...'; // Secret Key
$app_callbackurl  = 'http://www.midominio.com/ultimotwitterupdate/'; // APP Canvas URL
$canvas_url       = 'http://apps.facebook.com/ultimotwitterupdate/'; // Canvas URL

?>

Recuerdan que les comente en la creación de la aplicación sobre los datos “importantes”, bueno, acá es donde se deben configurar.

Hello World

En la carpeta “views” encontramos 3 archivos:

• default.php: Vista general de la aplicación
• profile.php: Vista de caja caja en el perfil
• global.php: Vista de tab  (cuadro) en el perfil (narrow y wide)
• Las vistas personalizadas se agregan en la carpeta “views” y se ven usando el parámetro “section”. Por ejemplo “index.php?section=help” mostrará la vista help.php

Ahora, para hacer la prueba de “Hello world”, editamos el archivo default.php y agregamos “<h1>Hello facebook app</h1>” como dice el código:

<fb:fbml version="1.0">
<h1>Hello facebook app</h1>
</fb:fbml>

Subimos al servidor nuestra aplicación y vamos a la dirección http://apps.facebook.com/ultimotwitterupdate/, en esta dirección vamos a ver nuestra aplicación creada, pero antes debemos agregarla a nuestro perfil.

Luego de agregarla, la aplicación nos mostrará el siguiente resultado:

Agregando el boton para perfil

Como ya tenemos nuestra aplicación andando, podemos agregar un código FBML que nos permitirá llegar más lejos aún. Por ejemplo, con la siguiente linea podremos agregar un botón que permitirá agregar nuestra aplicación como caja en el perfil.

Editamos el archivo de vistas “default.php” y agregamos:

<fb:add-section-button section="profile" />

Esto nos da el siguiente resultado:

“Guayerfreims”

Ahora que tenemos andando la aplicación, nos vamos a enfocar en nuestro ejemplo.

El layout de nuestro ejemplo debe preguntar cual es el nick del usuario en twitter, para que traiga dinámicamente el último update, luego deberá mostrarlo. (Como consideración, el usuario no debe tener sus updates protegidos)

Está sería la disposición del despliegue:

El modelo de datos

Luego que hicimos nuestros layouts en papel, nos debemos enfocar en el modelo de datos. En nuestra base de datos debemos guardar la información que nos permita relacionar usuario de facebook y usuario twitter, esta podría ser la mejor opción: “id de usuario de facebook”, “nombre usuario de twitter”, “mensaje ultimo update”, “fecha y hora de ultima consulta”.

La única tabla que necesito la nombraremos como “last_updates“:

• id:integer(11), PK
• facebook_user:integer(11)
• twitter_username:varchar(30)
• last_update:varchar(140)
• last_query:datetime

La instrucción SQL sería del siguiente modo:

CREATE  TABLE "last_updates" ("id" INTEGER PRIMARY KEY  NOT NULL , "facebook_user" INTEGER NOT NULL , "twitter_username" VARCHAR(30) NOT NULL , "last_update" VARCHAR(140) NOT NULL , "last_query" DATETIME NOT NULL )

El código da App

De acuerdo a los “wireframes” el código de la vista por defecto será del siguiente modo:

Vista default.php

<fb:fbml version="1.0">

	<fb:dashboard>
		<fb:help href="index.php?section=help">Ayuda</fb:help>
	</fb:dashboard>

	Ingrese el nick del usuario (el usuario no debe tener los updates protegidos)
	<br />
	<form name="save_user" method="post" action="">
		<input type="text" id="twitter_user" name="twitter_user" size="20" /> <input type="submit" value="Definir usuario" />
	</form>

	<div id="update-quote">
	</div>

	<br />
	<fb:add-section-button section="profile" />

</fb:fbml>

Vista global.php

<fb:narrow>

	<div id="update-quote">
		Narrow View
	</div>

</fb:narrow>

<fb:wide>

	<div id="update-quote">
		Wide View
	</div>

<fb:wide>

Vista profile.php

<div id="update-quote">
</div>

Con un poco de estilos podríamos llegar a nuestro objetivo con mayor efectividad, pero por el momento solo haré el ejemplo con una aplicación casi por defecto.

El módulo “app.php”

Para habilitar los módulos que vamos creando, se debe editar el archivo “config/app.php” y agregar al arreglo el nombre de la app, por ejemplo:

$modules = array(
'app', // Modulo de Aplicacion
);

Este módulo se encarga de realizar todas las conexiones con Twitter y la base de datos para almacenar la información.A grandes rasgos se compone de funciones como:

• get_twitter_data : Que obtiene la información de Twitter usando cURL
• set_user_data : Que guarda la información del usuario que agrego la aplicación
• get_user_data : Que obtiene la información de un usuario
• update_user_data  : Que actualiza la información del usuario utilizando la información de Twitter.

A probar la aplicación

Luego, que está todo listo, subo a producción y hago las pruebas necesarias para evitar errores. No está demás decir que a medida que realizo el diseño y el desarrollo siempre se deben hacer updates, porque es como estar trabajando a ciegas.

Para probar la aplicación ingresen a: http://apps.facebook.com/ultimotwitterupdate/

Deje reposar 5 minutos y sirva

Luego de todo este desarrollo podemos sacar como conclusión que Facebook es una de las Redes Sociales más potentes por la facilidad en que se pueden desarrollar aplicaciones y la capacidad de integración que se puede obtener.

Si bien el desarrollo no es muy cómodo, es muy simple la forma en que se pueden agregar elementos propios de Facebook, esto lo hace una herramienta ágil.

Finalmente, les dejo la misión de leer mucho sobre lo nuevo que se viene para el desarrollo de aplicaciones en Facebook y además de que le pierdan el miedo a crear aplicaciones nuevas.

Muchas gracias por su tiempo, espero que este plato haya sido de su agrado.

Una de las cosas más cómodas que tiene Apache 2.+ es el módulo de host virtuales (VirtualHost), puesto que con éste módulo podemos simular con mejor calidad un servidor de producción.

Por ejemplo, digamos que quiero subir un Blog de WordPress a una dirección http://www.miblogdewordpress.com pero aún no cuento con el Hosting ni el dominio. En este caso es cuando podemos utilizar nuestro módulo de VirtualHost y personalizar la dirección que aún no existe.

Configurar Apache

Lo primero es configurar Apache 2.+ habilitando este módulo (por lo general viene habilitado por defecto):

sudo a2enmod vhost_alias

Luego se debe crear nuestro nuevo “sitio” creando el archivo de configuración necesario, pero como somos inteligentes vamos a copiar el sitio por defecto y configurarlo. Todo esto ocurre en la carpeta de apache2 que para nuestro ejemplo será “/etc/apache2/sites-available/”:

sudo cp default miblogdewordpress
sudo vim miblogdewordpress

Al editar este archivo nos encontramos con lo siguiente:

<VirtualHost *:80>
ServerAdmin webmaster@localhost

DocumentRoot /var/www
<Directory />
Options FollowSymLinks
AllowOverride None
</Directory>
<Directory /var/www/>
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order allow,deny
allow from all
</Directory>

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
<Directory "/usr/lib/cgi-bin">
AllowOverride None
Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
Order allow,deny
Allow from all
</Directory>

ErrorLog /var/log/apache2/error.log

# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn

CustomLog /var/log/apache2/access.log combined

Alias /doc/ "/usr/share/doc/"
<Directory "/usr/share/doc/">
Options Indexes MultiViews FollowSymLinks
AllowOverride None
Order deny,allow
Deny from all
Allow from 127.0.0.0/255.0.0.0 ::1/128
</Directory>

</VirtualHost>

Lo que debemos hacer es agregar una línea que defina el nombre del servidor, y luego recortar la configuración con lo necesario:

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName www.miblogdewordpress.com

  DocumentRoot /var/www/miblogdewordpress/
  <Directory />
    Options FollowSymLinks
    AllowOverride None
  </Directory>
  <Directory /var/www/miblogdewordpress/>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
  </Directory>

  ErrorLog /var/log/apache2/miblogdewordpress-error.log
  LogLevel warn
  CustomLog /var/log/apache2/miblogdewordpress-access.log combined

Si se dan cuenta, lo que hice fue agregar “ServerName” y especificar donde tengo mis documentos “/var/www/miblogdewordpress/” en el DocumentRoot y además en el “Directory”. Finalmente, especifiqué un archivo de logs y acceso para el dominio en anteponiendo “miblogdewordpress-” en los archivos de “ErrorLog” y “CustomLog”.

Lo siguiente es ahora, activar nuestro sitio y recargar las configuraciones de Apache:

sudo a2ensite miblogdewordpress
sudo /etc/init.d/apache2 reload

El comando a2ensite utiliza como parámetro el nombre del archivo que acabamos de crear, es decir, “miblogdeworpress”.

Luego de que tenemos nuestro Apache configurado, terminamos el trabajo configurando el host local.

Configurar tabla de Hosts

La tabla de host es muy simple de configurar, solo debemos agregar nuestro dominio creado apuntado a “localhost”. Para esto, editamos “/etc/hosts” y agregamos la siguiente linea:

127.0.0.1    www.miblogdewordpress.com

Para probarlo entramos por nuestro explorador a http://www.miblogdewordpress.com y estará listo para utilizar.

Cabe mencionar que cuando se suba a producción debemos eliminar esta linea de la tabla de host para no resolver el sitio que tenemos en nuestro servidor.