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.

Eran las 3 a.m. más o menos y hacía zapping en el cable cuando me topé con un documental en el i-Sat que se llamaba “RiP! : A remix manifesto“. Comencé a verlo porque había un dj haciendo remixes muy buenos (su nombre es “Girl Talk“) y hablaban de algo que está muy de moda hoy en nuestro Chilito: “Los derechos de autor“.

Este documental está tan bien hecho que a medida que lo vas viendo te vas dando cuenta que el problema global está centralizado en unas pocas personas y empresas, (Spoiler alert…) por ejemplo sale Lars el batero de Metallica despotricando en contra de Napster y quienes descargamos música de Internet, hay una mención a Walt Disney donde lo muestran como un copión (remixer), entre otras cosas bien interesantes.

Si quieren ver  la realidad del sistema en que nos encontramos les recomiendo sin dudas este documental, y si sienten las ganas de hacer remix del documental pueden hacerlo sin sentirse criminales.

Links relacionados

• Documental en youtube (parte 1) (son 9 partes y van apareciendo en el player)
• MySpace de Girl Talk

Pinche aquí para ver el vídeo

Se han dado cuenta que en algún momento de la vida han tenido que probar algo antes de comprarlo? Por alguna razón en especial necesitan saber si ese pantalón de pitillo les viene bien y optan por darle una prueba antes de pagarlo. En ese momento, sin saberlo, experimentaron una prueba de concepto con ese pantalón.

Las pruebas de concepto como tal son una demostración a menor escala de una idea cualquiera (independiente de como se concrete la idea o como les quede el pantalón), son como una fotografía en miniatura de la idea.

En el desarrollo de software, y en general en la Ingeniería de Software, las pruebas de concepto son uno de los métodos más efectivos, para saber cuando la idea se está llevando por buen camino.

Y, ¿Por qué son tan efectivas? les cuento…

Ocurre que cuando necesitas crear un producto de software no sólo debes tener la idea, las herramientas, y las habilidades, sino que también debes tener un método que te de la seguridad que vas a poder llegar a desarrollar un buen producto sin perder la cabeza en el intento.

El método usado en la creación de un producto se basa en cuatro pasos secuenciales (Análisis, Diseño, Implementación y Pruebas), y ustedes ya podrán imaginarse donde es que hacemos la prueba de concepto.

Vuelvo al ejemplo, antes de probarme ese pantalón lo primero que hice fue pensar en todas las ocasiones en que lo podría usar, digo, es eso en lo que se piensa cuando se compra algo no? Y es así que sin tener que probarme nada ya tenía realizado todo un análisis en torno a algo que eventualmente podría comprar.

Algo similar pasa cuando se necesita crear un producto de software, se debe pasar por el mismo análisis antes de diseñarlo contemplando las distintas variables externas que van a afectar al producto desde el ambiente que lo rodea.

Las pruebas de concepto en este campo son clave para adelantar el paisaje que nos espera en el futuro, por lo general son desarrollos de corto alcance y que describen la idea de una forma resumida, donde sólo se incluyen las piezas más importantes del producto.

Es muy probable que en este tipo de pruebas se pierda el rumbo y que el desarrollo se alargue más allá de lo planificado, es por eso que debemos ser cautelosos y definir claramente los los objetivos de la PoC, definiendo cada uno de los puntos a experimentar, ya que acotando los objetivos es la única forma de obtener información relevante de una prueba de concepto.

En resumen, lo importante es lograr definir claramente el “por qué” de nuestra prueba de concepto, luego implementarla en un corto plazo y finalmente obtener toda la información relevante que de ésta se espere.

Hace mucho tiempo que circulo por foros de internet, el que más visito es Tarreo y como usa Invision Power Board, no puedo poner una firma con imágenes dinámicas. Es por esto que tuve que acudir a una solución, hacer una imágen dinámica que pudiera ser vista en cualquier foro invision protegido.

Para lograr este objetivo necesitaremos los siguientes ingredientes:

• Tener cuenta Twitter (publica, con protección de twitts no sirve)
• Saber PHP
• Conocer la librería GD (para PHP)
• SimplePie
• Servidor para hostear la imagen (con soporte curl)
• Conocer de .htaccess

La idea es utilizar SimplePie para que se lea el RSS de mi cuenta para que con PHP + GD se genere una imagen dinámica, luego con el .htaccess se redireccionan todos los archivos .jpg a.php (esta es la joda para tinelli)

Preparación:

1. Descargar el amigable SimplePie de su sitio web (vamos a utilizar el archivo simplepie.inc.php solamente)
2. Creamos el archivo twitter.php (con vim, gedit, eclipse, textmate o lo que se les ocurra) con el siguiente código:

   <?php
   require 'simplepie.inc.php';
   // Configuraciones
   $feed_url    = "http://twitter.com/statuses/user_timeline/MI_RSS_DEL_TIMELINE.rss";
   $feed        = new SimplePie($feed_url);
   // Configuraciones de la imagen
   $im          = imagecreatetruecolor(320, 60);
   $text_color  = imagecolorallocate($im, 0, 0, 0);
   $tw_color    = imagecolorallocate($im, 56, 204, 255);
   $bg_color    = imagecolorallocate($im, 255, 255, 255);
   // Despliegue
   imagefilledrectangle($im, 1, 1, 318, 58, $bg_color);
   imagestring($im, 2, 5, 5, 'Twitter', $tw_color);
   // Me traigo el ultimo tweet
   foreach ($feed->get_items(0, 1) as $item)
   {
      $twitt = $item->get_title();
   }
   // Lo corto y le hago wordwrap
   $twitt = wordwrap($twitt, 58, '\n');
   $twitt_texts = explode('\n', $twitt);
   foreach ($twitt_texts as $i =>; $t)
   {
      imagestring($im, 1, 55, 14*($i+1), $t, $text_color);
   }
   // Muestro la imagen
   header('Content-type: image/jpeg');
   imagejpeg($im, NULL, 100);
   imagedestroy($im);
   ?>

3. Luego, debemos redireccionar los request a archivos JPG a PHP utilizando un .htaccess

   RewriteEngine On
   RewriteRule ^(.*\.jpg(/.*)?)$ twitter.php [L,QSA]

4. Ahora lo subes a tu servidor y lo revisas, deberia ser algo como:
   

Deje cocinar a fuego lento.
Sirva acompañado con galletas de salvado.

Claramente podemos aplicarnos mucho más en el código, pero esto salio de improviso y fue relativamente rápido.

<?php
require 'simplepie.inc.php';
// Configuraciones
$feed_url    = "http://twitter.com/statuses/user_timeline/MI_RSS_DEL_TIMELINE.rss";
$feed        = new SimplePie($feed_url);
// Configuraciones de la imagen
$im          = imagecreatetruecolor(320, 60);
$text_color  = imagecolorallocate($im, 0, 0, 0);
$tw_color    = imagecolorallocate($im, 56, 204, 255);
$bg_color    = imagecolorallocate($im, 255, 255, 255);
// Despliegue
imagefilledrectangle($im, 1, 1, 318, 58, $bg_color);
imagestring($im, 2, 5, 5, 'Twitter', $tw_color);
// Me traigo el ultimo tweet
foreach ($feed->get_items(0, 1) as $item)
{
   $twitt = $item->get_title();
}
// Lo corto y le hago wordwrap
$twitt = wordwrap($twitt, 58, '\n');
$twitt_texts = explode('\n', $twitt);
foreach ($twitt_texts as $i =>; $t)
{
   imagestring($im, 1, 55, 14*($i+1), $t, $text_color);
}
// Muestro la imagen
header('Content-type: image/jpeg');
imagejpeg($im, NULL, 100);
imagedestroy($im);
?>