¿Por qué decidiste usar CouchDB si nunca lo has usado y por qué no utilizar MySQL?

Lo primero que se me vino a la mente fue:
– Porque quiero aprender CouchDB – 

Esa fue la primera parte de mi respuesta y al parecer, no fue una respuesta muy satisfactoria.

Lo que sucede es que las personas que se quieren involucrar en los proyectos como mentores, inversionistas y/o cofundadores saben que todo es un riesgo, pero ellos saben y quieren trabajar con el riesgo de hacer crecer un proyecto, no con el hecho de que el proyecto no se complete por deficiencias técnicas o incluso, que ni siquiera arranque por las mismas razones.

“¿Cómo apoyarte, si es posible que ni arranques el proyecto porque nunca has usado tal tecnología?”

Y se entiende perfectamente, no van a apoyarte y a invertir su tiempo para que tú aprendas, así no funcionan los “negocios”.

Entonces tuve que dar más solidez a mi respuesta agregando algunos puntos (todos debatibles):

- La idea del desarrollo es que sea una aplicación o servicio escalable.

- No tienes tablas de relaciones ni esquemas como cuando usas RDBMS y por consiguiente, evitas hacer demasiados “Joins” entre las tablas.

- En teoría, si algo le pasa al sistema es fácil recuperar los datos.

- La replicación de los sistemas es bastante sencilla.

- Simplifica en cierta forma, nuestro diseño de base de datos.

Sobre los puntos anteriores, me gustaría agregar que solo expresan de manera sencilla unas de las virtudes (por llamarlas de alguna manera) de las bases de datos NoSQL como en este caso CouchDB, pero esto no las hacen ni mejores ni peores que las relacionales.

Obviamente, saber las ventajas no garantiza el éxito, pero creo que el punto a favor es que si todo sale bien al utilizar nuevas tecnologías, iremos un paso adelante y habremos superado uno de primeros obstáculos de muchos que nos enfrentaremos en nuestros futuros proyectos.

Más adelante espero hacer un análisis más detallado de todas las prestaciones que ofrecen las bases de datos no relacionales, como el manejo de los datos basados en JSON, cómo es el tipo de base de datos orientadas a documentos y sobre todo, lo que más problema le dará a los que venimos de bases de datos relaciones… como utilizar e implementar en código Map/Reduce.

It is not the strongest of the species that survives, nor the most intelligent. It is the one that is most adaptable to change.

La idea de crear esta nueva herramienta o sitio, sinceramente no me quitaba el sueño, era algo que quería hacer por aprender, por plasmar un poco de lo que me gusta hacer y contribuirle un poco al ecosistema digital donde habito.

La idea es algo que ya existe, no intento inventar ningún hilo negro ni de ningún otro color, de hecho existen varios sitios similares. Sin embargo, estos sitios existentes son para un mercado distinto y creo que en ese sentido, es donde esta herramienta podría tener un buen comienzo cuando salga a la luz.

Como comentaba, la idea NO me quitaba el sueño, pero siempre me estuvo dando vueltas en la cabeza, hablaba de cómo debería de funcionar, que contendría y hasta los colores. Hubo momentos en los que mi Novia me escuchaba y me compartía algunos puntos de vista, pero en una ocasión me dijo – son buenas ideas, ¡hazlo! ¿Cuándo empiezas?

Pensaba que me decía eso para que la dejara de atosigar con mis platicas, pero en realidad era lo que faltaba… empezar y ¡ya!.

Desde esa tarde le he dedicado bastante tiempo a la lectura de blogs y algunos libros y a la par he empezado a crear el sitio. Empecé con el diseño, un diseño sencillo y limpio. En estos momentos que escribo esto, ya tengo maquetado el index en HTML y CSS y ya he creado las principales tablas de mi base de datos. También ya estoy creando mi Modelo con mis consultas y ya estoy “imprimiendo” en la Vista algunos valores obtenidos de la base datos. Lo cual presiento que es un buen comienzo y por eso quise compartirlo en el blog.

Afortunadamente, tengo amigos que son desarrolladores o están en el área. Les he comentado lo que estoy haciendo, les he mostrado algunas pantallas y se les ha hecho interesante la manera en que el sitio pudiera contribuir. Esto me ha reafirmado que era preciso crearlo.

Mis lecturas

Como les comentaba hace un momento, me he dedicado a leer algunos libros y bastantes blogs. Un libro que la verdad recomiendo bastante para los que empezamos con esto de las WebApps o WebServices es el de “Getting Real” que por cierto, aquí lo pueden encontrar en línea..

Este libro, que aparte es una guía, la verdad es muy digerible, las páginas no están atiborradas de texto, solo tienen lo justamente necesario. Lo acabo de terminar y desde las primeras páginas me sentí reflejado y aunque algunas ideas llegan a ser muy poco ortodoxas e ir en contra de lo que uno normalmente piensa o lo que uno comúnmente hace, como decir que no inicies tu Startup con inversionistas, sino con tu propio capital para no perder la pasión…

Ya que la pasión no viene con etiqueta de precio

O decir que todas las peticiones para mejorar sus aplicaciones, las leen, las tiran y se olvidan de ellas, estas ideas tienen una razón de ser y los de 37 Signals lo explican muy bien.

Respecto a los blogs, pues en realidad hay muchísima información relacionada con las nuevas Startups o desarrollos.

Por ejemplo, hace días encontré que muchos sitios como Twitter, Facebook y Digg entre otros están migrando a NoSQL, lo cual cambia todo el concepto de las base de datos relacionales y que FriendFeed sigue usando MySQL pero sin ningún esquema de base de datos ni relaciones inherentes entre las tablas.

Otro artículo, que en lo personal me llamó muchísimo la atención (lo imprimí para leerlo con calma) por la manera que expone las tecnologías y como integraron todo en una de las últimas Startups llamada Quora.

Como pueden ver, estos artículos no son nada extensos y aportan demasiado a la causa.

Si estás por iniciar un desarrollo web o negocio, haz que la lectura sea tu mejor socio.

Entre mis bookmarks tengo otros artículos pendientes y otros que sigo digiriendo y que con calma iré leyendo.

La motivación sigue siendo el cliché más importante

Hasta este momento, quiero pensar que voy bien. Le he dedicado tiempo al proyecto en mis ratos libres y otros no tan libres en la casa, he aprovechado para leer en el trabajo (si el tiempo lo permite) y he avanzado poco a poco.

Desde el inicio, la idea era materializar el concepto y creo que inicie bien, como decimos, lento pero seguro. En lo que llevo, no hay día que no aprenda algo nuevo y eso me tiene motivado, creo que “La motivación” sigue siendo uno de los recursos más importantes cuando estamos en esto de crear o materializar nuestras ideas. Pero, obviamente todos empezamos así o ¿no?

Todos los proyectos, incluyendo hasta por los que nos pagan, deben tener un factor común que es la motivación. Sin este catalizador, las situaciones se pueden hacer más pesadas de lo que ya son, los retos del principio se hacen obstáculos imposibles, la intensidad y entrega se ve mermada por cualquier desavenencia y se puede llegar a estropear todo el proyecto. Conozco en experiencia propia de muchos proyectos que comenzaron de la misma forma y al final solo quedaron en eso, en un comienzo.

Entonces, lo que llevo hecho y lo que he empezado es “¿Un inicio como cualquier otro?”

Los wireframes, son básicamente ilustraciones que nos muestran el esqueleto de una página web.

La siguiente imagen es un wireframe de la estructura general de wordpress (click en imagen, para ver en tamaño real).

El wireframe anterior, lo creé (como una prueba de un posible diseño) con una herramienta llamada Balsamiq. La herramienta cuenta con una aplicación instalable (creada con Adobe Air) y una aplicación que funciona desde el mismo navegador de Internet (Ir a aplicación Web). Esta última opción me parece bastante interesante, ya que no tenemos que instalar nada extra ni registrarnos.


Obviamente, podemos encontrar infinidad de herramientas que nos permiten crear Wireframes a partir de sketches, pero esta me pareció excelente.

En lo personal, esa función no debió ser lanzada sin tener los filtros necesarios, dado que muchas de las recomendaciones, son personas a las que había dejado de seguir e incluso, a personas que tenias bloqueadas.

Como todo desarrollador (y geek), quise crear mi propia extensión para Chrome, dado que es mi navegador por excelencia y también por que ya tengo algo de experiencia con extensiones para Chrome.

La extensión la puedes descargar desde aquí:

Descarga la extensión [CRX]

La diferencia que vas a encontrar con esta extensión, es que no necesitas configurar nada y no necesitas otra extensión aparte.

Ahora, ese mismo libro lo encontré nuevamente, pero esta vez junto otros 8 libros electrónicos (en Inglés) relacionados con el diseño web.

Espero que alguno de ellos les sea de utilidad.

Designing for the Web
Taking Your Talent to the Web
Dive Into HTML 5
jQuery Fundamentals
Data Structures and Algorithms
Design Your Imagination
Building Android Apps with HTML, CSS, and JavaScript
The Web Book
Building Accessible Websites

La liga original la puedes encontrar aquí: 9 More Useful and Free Downloadable Web Design Books

Al principio, pretendía solo mostrar el famoso “Hola Mundo”, pero opté por ahondar un poco en la API que nos ofrece Google.

Descarga el código [ZIP]

Descarga la extensión [CRX]

El artículo será explicado de una manera detallada y asume que tienes un conocimiento previo de HTML, CSS y Javascript. Usaremos también algunas funciones de DOM para la manipulación de las páginas.

¿Que vamos a hacer?

Vamos a crear una extensión, la cual despliegue un popup con los nombres de las pestañas que tenemos abiertas. Aparte del nombre, tambien nos va a desplegar el favicon de la página y resaltará la que tengamos abierta.

Para hacerlo un poco más completo, también vamos a imprimir la cantidad de pestañas que tenemos abiertas.

Una vez terminada, se verá así:

Generalidades básicas de las extensiones en Chrome.

-Las extensiones son básicamente páginas web. A estas les puedes agregar hojas de estilo, imágenes y sobre todo Javascript. Javascript es lo que le dará la funcionalidad a la extensión.

-La API de Google nos permite tener una interacción con las páginas, los favoritos, las tabs, el historial y otros componentes más.

-Todas las extensiones requieren de un archivo llamado “manifest.json”, el cual define las características mas importantes de la extensión.

Agrega tus propias extensiones con el modo desarrollador de Chrome.

Google se ha caracterizado por brindar herramientas muy potentes a los desarrolladores. Su proyecto Chrome es un ejemplo de esa afirmación.

Si alguna vez has usado las herramientas de Chrome para analizar tus páginas, sabrás que no estoy lejos de la realidad. Basta con hacer click derecho sobre algún componente y seleccionar Inspect element.

Ahora, para agregar tus propias extensiones, abre el Menú de Herramientas o Tools y selecciona Extensions. Te mostrará las extensiones que tienes instaladas y del lado superior derecho encontrarás la opción para ampliar el modo Desarrollador.

Hacemos click sobre el botón que dice “Load unpacked extension” y seleccionamos nuestra carpeta que incluye los archivos. Una vez con esto y si todo está bien, veremos algo como así:

Esto quiere decir que ya tenemos agregada la extensión a Chrome.

Creando lo más básico.

Lo primero que tenemos que hacer, es crear el archivo que llamaremos “manifest.json”. En él, vamos a definir lo siguiente:

-El nombre de nuestra extensión, en nuestro caso lo llamaremos “Tabs Manager”.
-La versión de nuestra extensión.
-La descripción de la misma.
-La manera en la que desplegaremos nuestra extensión y también que página html vamos a desplegar. (Ver aquí para más detalles.)
-El icono que queremos que tenga nuestra extensión.
-Por último también le diremos con que elementos vamos a interactuar. En nuestro caso usaremos las “Tabs”.

Nuestro archivo “manifest.json” nos quedaría así:

1
2
3
4
5
6
7
8
9
10

{
"name": "Tabs Manager",
 "version": "1.0",
 "description": "Primera extensión en Chrome creado por www.arathvelazquez.com",
 "browser_action": {
		     "default_icon": "icon.png",
		     "popup": "tabs.html"
		   },
 "permissions": ["tabs"]
}

Con esto, ya podriamos agregar nuestra extensión a Chrome, aunque nos marcaría que no encuentra la página por que hace falta nuestro archivo “tabs.html”.

El XHTML

Crearemos nuestro archivo XHTML que llamaremos “tabs.html”, el cual es simplemente una página web que definimos como XHTML y donde incluimos el archivo de JavaScript, así como la hoja de estilo.

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>Tabs</title>
<style type="text/css"> @import 'style.css'; </style>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

Nuestro archivo JavaScript.

Lo siguiente, es lo más importante de la extensión, ya que en este archivo tendremos toda la funcionalidad. El archivo lo llamaremos “script.js”

Todos los bloques de código están comentados, y se explican por si solos. Aún así, voy a hacer algunas observaciones.

Empezamos por crear dos funciones. Estas las usaremos más adelante para crear nuevos elementos de manera dinámica en nuestro HTML.

Lo que hacen estas funciones es crear el div contenedor y la lista desordenada. Para eso, usamos las utilidades de DOM.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//Variables generales.
var popup;
var ul;
var li;
 
//Esta función crea la div principal y la agregamos a la página.
function creaContent() {
  	popup = document.createElement("div"); //Creamos el elemento div.
  	popup.id = "content";		       //Le damos nombre al id <div id="content">.
  	popup.style.cssText = "width: 100%;";  //Que abarque todo el ancho de la página.
  	document.body.appendChild(popup);      //Lo agregamos al body -DOM-.
}
 
//Con esta función vamos a crear una lista y la agregamos a nuestro div anterior.
function creaUls() {					 	
  	if (ul) popup.removeChild(ul);	       //Si ya existe ul, lo removemos.
  	ul = document.createElement("ul");     //Creamos el elemento ul.
  	popup.appendChild(ul);		       //Lo agregamos a div llamado popup. -DOM-
}

Vamos a necesitar también, una función que acorte los títulos de las pestañas.

21
22
23
24
25
26
27

//Truncamos el titulo de la página para obtener solo 30 caracteres.
function truncate(cad) {
	var length = 30;
	var cad2Truncate = cad;
	var truncatedCad = cad2Truncate.substring(0,length);
	return truncatedCad;
}

Creamos una función para llenar los elementos de la lista. En esta función lo que hacemos, es recibir el numero de pestañas que tenemos abiertas en nuestro navegador y también recibimos la variable que tendrá la información de las pestañas.

Con esta información, podemos empezar a crear los elementos li de nuestra lista.

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

//Creamos los elementos de la lista con el nombre y el favicon.
function creaElementos(numTabs, tabName)
{
	var i;					//Contador para las tabs.	
	var favicon;				//Para almacenar el favicon.
	var title;				//Para almacenar el titulo.
 
	creaUls();				//Creamos el elemento de lista desordenada.
 
	for (i=0;i<=numTabs;i++)		//Recorremos todas las tabs de la ventana.
	{
		li = document.createElement("li");  //Creamos los items para la lista.
		li.id = tabName[i].id;		    //Le asignamos como id, el mismo id de la tab.
 
		if (tabName[i].selected) 	    //Si la tab es la seleccionada, le damos otro estilo.
		{
			li.className = "selected";
		}
 
		favicon = document.createElement("img");  //Creamos un elemento de imagen.
		favicon.style.cssText = "width:16px; height:16px;";//Le damos las dimensiones con CSS.
		favicon.src = tabName[i].favIconUrl || "vacio.png";//El src será el favicon o en su caso una imagen en blanco.
 
		title = document.createElement("span");	//Creamos un span para darle formato al titulo
		title.className = "titulo";			//La clase para el CSS
		title.textContent = truncate(tabName[i].title);	//Agregamos el titulo de 30 caracteres a nuestro elemento span.
 
		//Aquí vamos a agregar los elementos creados dinamicamente a nuestra página usando -DOM-
		//En la "impresión" de HTML, lo que veremos será algo así:
		//<li style="width:16px; heigth: 16px;" src="la_ruta_del_favicon">
		//<span class="titulo">El_titulo_del_tab(Truncado a 30 caracteres)</span></li>
 
		li.appendChild(favicon);	//Agregamos el favicon a nuestro item de la lista.								
		li.appendChild(title);	        //Agregamos el titulo a nuestro item de la lista.
		ul.appendChild(li);		//Ahora, agregamos el item y su formato a la lista completa.
	}
}

Lo siguiente es hacer uso de la API que nos brinda Google para las extensiones. Lo que vamos a hacer con ello, es utilizar un EventListener que está a la espera de algún evento, y en este caso, hará que la función entre en juego al momento de cargar la extensión.

Utilizamos la API para las tabs o pestañas de la siguiente manera:

chrome.tabs.getAllInWindow(null, function( tabs) {...});
//Donde function(tabs), le dará a tabs la información como un vector.
//Google lo expone así:
//El parametro para el callback, debe de especificar una función similar a esta:
//function(array of Tab tabs) {...});

También les habia comentado al principio, que vamos a imprimir el número de tabs en el ícono de la extensión. Para eso usamos lo siguiente:

chrome.browserAction.setBadgeText({text: num_tabs});
//Donde el num_tabs es una cadena con el numero de tabs.

El código de la implementación sería así:

70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

 
//Esta parte es la mas importante.
//Creamos un evento para que al momento de cargar la página se ejecuten nuestras funciones.
//Si no tuvieras este Event Listener, tendrias que mandar llamar la función directamente desde tu HTML.
window.addEventListener("load", function() { 	 //Se ejecuta al momento de cargar la página ('load').
  //En esta parte, es necesario aclarar que al parámetro llamado "tabs", le daremos toda la informacion de las pestañas.
  //Observa que la parte de function(tabs) es el callback del método y en este se realizan las operaciones.
  chrome.tabs.getAllInWindow(null, function(tabs) { //Obtenemos información de todas las tabs abiertas...
	var num_tabs = tabs.length;	    //Aquí obtenemos el numero de tabs.
	num_tabs = num_tabs.toString();	    //Convertimos el numero a string.
 
	//Este método, nos permite modificar algunas partes del icono de la extensión.
	chrome.browserAction.setBadgeText({text: num_tabs});//Imprimimos en el icono, el numero de tabs abiertas.
 
	//Ya con toda la información necesaria, solo nos queda crear los elementos principales.
	creaContent();			//Creamos dinámicamente el div llamado content.
	creaElementos(num_tabs,tabs);	//Creamos los elementos como ul, li y los valores finales.
  });
}, false);

Estiliza la extensión.

Por último, le daremos el estilo a nuestra extensión de la siguiente forma:

1
2
3
4
5
6
7

body 		{width:230px; font-family:Verdana;font-size:11px; margin:0px; padding:0px; color:black;}
#content 	{margin:0px;padding:0px;}
ul 		{margin:0px; padding:0px; list-style: none;}
li 		{margin:0px; padding:4px 2px 0px 4px; height:20px; -webkit-border-radius:5px;}
img 		{vertical-align:middle;}
.titulo 	{margin:5px 0px 0px 6px; vertical-align:middle;}
.selected 	{background-color:#FF9933;}

Listo! Ya has creado tu primera extensión para Google Chrome.

¿Que faltaría hacer?

Después de desarrollar esta extensión, podrás utilizar la API y hacer, por ejemplo:
-Que al momento de presionar sobre el título, abra la pestaña seleccionada.
-Agregar un botón para cerrar cualquier pestaña desde la extensión.
-Realizar una búsqueda entre los titulos de las pestañas abiertas.

Espero que les sirva esta guía/artículo para conocer un poco más las extensiones de Chrome, así como el uso básico de las API’s que ofrece Google.

Si tienes algún comentario, no dudes en hacérnoslo saber.

Esto ha permitido un crecimiento importante en todos los aspectos y por eso mismo, en la actualidad WordPress cuenta con una de las mas importantes colecciones de plugins o complementos para utilizar.

Un plugin como tal, es una aplicación que aporta una nueva funcionalidad al sistema y que por lo general es muy específica.

En WordPress, la verdad es muy sencillo encontrar un plugin que cumpla una determinada función, y para entender su funcionamiento, en este artículo veremos como crear uno desde cero.

En esta primera parte, el plugin permitirá enviar a nuestro usuario de twitter, un pequeño texto, el nombre del post y el link del post. Algo interesante, es que el link o URI (muchos les llamamos URL también), será “acortada” usando una sencilla API de un acortador de URLs creada por Rodrigo Polo.

Generalidades de los plugins en WordPress.

Todos los plugins para WordPress son creados con PHP y pueden agregar funcionalidad y diseño con JavaScript, CSS entre otras herramientas.

Los plugins deben de ser creados dentro de la carpeta “wp-content/plugins”.

Si el plugin, solo requiere un archivo, lo puedes dejar en el directorio de plugins, pero por lo general y por buenas prácticas, se debe optar por crear una carpeta independiente con el nombre del plugin. Aparte de buenas prácticas, esto nos dará oportunidad de organizar los archivos de una manera sencilla.

El archivo PHP principal, deberá tener el mismo nombre del plugin.

WordPress tiene la funcionalidad de leer los archivos y reconocer cabeceras que determinan qué tipo de elementos son. Esto aplica para las hojas de estilo, las páginas, los plugins y otros elementos más.

Por lo tanto, los plugins deben de contar con una cabecera que identifica el nombre del plugin, descripción e información adicional.

Plantilla general para el plugin.

Lo más básico es crear la cabecera con la información principal dentro de nuestra carpeta, en este caso la llamaremos updatter:

1
2
3
4
5
6
7
8
9
10

<?php
/*
Plugin Name: Updatter
Plugin URI: http://arathvelazquez.com/updatter
Description: Actualiza tu estado en twitter con el ultimo post que publiques.
Version: 0.1
Author: Arath Velázquez
Author URI: http://www.arathvelazquez.com
*/
?>

Guarda el archivo con el nombre updatter.php en la carpeta del plugin:

Una vez realizado estos sencillos pasos, ya tienes un plugin que ya puede ser activado desde la consola de administración:

Funcionalidad básica del plugin.

Como les comentaba anteriormente, el plugin nos permitirá crear y enviar un post a nuestra cuenta de twitter.
Para eso, crearemos una función en el mismo archivo antes guardado.

La función la llamaremos updatter:

1
2
3
4
5
6
7
8
9
10
11
12
13

function updatter(){
	global $wp_query;
	$nombreDelPost = $wp_query->post->post_title;
	$urlDelPost = get_permalink($post->ID);
	$preTexto = "Desde el blog: ";
	$urlCompleta = "http://rod.gs/?longurl=".$urlDelPost;
	$urlAcortada = curling($urlCompleta);
	$comentario = $preTexto.$nombreDelPost. " " .$urlAcortada;
 
	//=======
	//Mas adelante, en este espacio escribiremos algo extra.	
	//=======
}

En la función, simplemente obtenemos el título del post, el link o URI y un texto que los precede. También incluí de una vez una función que implementaremos en los siguientes párrafos, para no repetir código más adelante.

Si se fijan, $urlDelPost tiene la dirección completa del post, que por lo regular es bastante extensa y para fines prácticos, entre menos letras usemos para comentar en twitter, mucho mejor.

Lo que vamos a hacer, es simplemente utilizar una función muy sencilla y la llamaremos curling. Esta función lo que hace es recibir una URL y devolvernos el contenido en una cadena.

1
2
3
4
5
6
7
8

function curling($url) {
        $ch = curl_init(); 				                  
        curl_setopt($ch, CURLOPT_URL, $url); // Pasamos la dirección y la "seteamos".
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //La transferencia en una cadena
        $output = curl_exec($ch); // Y ahora le asignamos  a $output, el valor como cadena
        curl_close($ch); // Cerramos y liberamos los recursos
	return $output; // Y finalmente, la función nos regresa el resultado. 
}

Ya con esto y con ayuda del API de Rodrigo Polo, tenemos un link bastante corto y que no pasará de 20 caracteres. El resultado lo tenemos en $urlAcortada y ahora, simplemente creamos el comentario completo que vamos a postear.

A continuación, vamos a crear un div para agregarlo a nuestro blog, la idea de este plugin, es que vaya al final del listado de posts y al final de cada post. Para eso escribimos al final de la función updatter lo siguiente (esto lo puse en imagen, porque el browser lo interpreta):

1
2
3
4
5
6

if (is_single() || is_home()){
return $content . $divTweet;
}
else {
return $content;
}

Con esto creamos el DIV que vamos a mostrar y además le decimos, que solo se va a imprimir en los posts y en el listado de los posts. Si la página en la que nos encontramos, es alguna de las dos opciones, imprimimos el contenido y concatenamos el divTweet, y si no, solo imprimimos el contenido.

Es importante que la impresion de cadenas se realice con “return” en lugar de “echo”

Ya con esto, tenemos la funcionalidad completa del plugin.

Colocando el plugin en su lugar.

Hasta ahorita, el plugin por si solo ya tiene lo necesario para funcionar, solo resta decirle en donde lo vamos a colocar.

A lo que me refiero con esto, es que en WordPress, podemos agregar filtros o acciones a determinadas secciones. Por ejemplo, podríamos agregar una acción al momento en que publicamos un nuevo post o al momento de comentar. Se puede agregar una acción o filtro a casi cualquier sección de WordPress.

Entonces, lo que nos resta a nosotros para terminar, es decirle que vamos a agregar las operaciones del plugin al contenido de la siguiente manera (debe estar colocado dentro del plugin y afuera de todas las funciones):

1
2

add_filter('the_content','updatter');
add_filter('the_excerpt','updatter');

Con esto, le decimos que el plugin tenga efecto en el contenido y en los extractos de los post.

Espero que encuentren práctico este artículo para estudiar y crear sus propios plugins en WordPress.

Actualización

(30 de Junio de 2010):
Hice unas pequeñas mejoras y correcciones en algunas partes del código.

En este artículo trataré de explicar con un ejemplo, que factores consideré mas importantes, al momento de diseñar y desarrollar la página donde te encuentras en este momento.

Como te podrás dar cuenta, todo tiene un mismo formato y el sitio trata de seguir una misma idea.

Básicamente esto se debe a que en los sitios web como en los productos en general, el éxito será determinado por la calidad en la experiencia del usuario final y la calidad del diseño, y no solamente me refiero al diseño con la combinación de colores, sino a la estructura general del sitio, el posicionamiento de los elementos, la facilidad de interacción y sobre todo que en unos solos minutos se entienda de que se trata.

Si buscamos una definición concreta a lo que significa la experiencia del usuario, posiblemente encuentres infinidad de resultados, pero como mencioné hace unos momentos, voy a centrarme en mi ejemplo.

Hay 4 factores que podrán definir la experiencia del usuario y es muy importante que se complementen, por que individualmente no brindarán la experiencia positiva que estamos buscando.

Estos son los factores:
Imagen
Usabilidad
Funcionalidad
Contenido

Empecemos por partes:

La imagen

Es en general todo lo relacionado con el diseño, la creatividad, lo estético, la proyección del sitio, la consistencia, así como la creación de una identidad visual y corporativa del sitio.

Como podrán ver alrededor, el sitio trata de conservar una imagen similar desde cualquier punto que se observe, al menos eso pretendí al hacer el diseño. Las sombras, algunos degradados, los colores e incluso los brillos y los cortes, crean una imagen que puede ser diferente a las comunes e incluso memorable.

La usabilidad

Es prácticamente la facilidad de que el usuario o el visitante puedan utilizar el sitio de una manera sencilla, sin complicaciones y llegar a un objetivo concreto, como puede ser mandar un correo para contactarme o comprender la sencilla navegación del sitio.

Algo que me gustaría destacar, es la manera en la que el usuario puede mandar un correo usando el formulario de contacto.
Podrás notar que la manera de usarlo no es para nada como se acostumbra, esta vez es diferente¹.

La funcionalidad

Incluye todo lo técnico del sitio, los procesos, las aplicaciones y es en esencia lo que hace trabajar al sitio y claramente no lo vemos como usuarios. Un sitio funcional, será robusto, esto quiere decir que tendrá que trabajar correctamente ante diferentes situaciones, también tendrá que evitar errores o al menos saberlos manejar.

Como un claro ejemplo, en la página principal existe un SlideShow (como una presentación de diapositivas) que muestra los artículos de cierta categoría² y donde puedes navegar por los diferentes artículos con las flechas laterales.

También, en el formulario de contacto, existe una funcionalidad que no permite mandar correos sin tu nombre, sin tu correo, o que tu correo no esté bien escrito y por supuesto, que el correo incluya el mensaje.

Estas dos funcionalidades por nombrar algunas, son algo interno del sitio. Sin la implementación correcta de estas, podrías mandarme un correo vacío, o con tu cuenta de correo incorrecta o inválida, y así no podría contestarte.

El contenido

Es todo lo que incluye el sitio, desde el texto, las imágenes y la relación de los elementos. Para sitios donde se publican artículos, el contenido es vital y tiene que estar activo todo el tiempo, y nunca se podrá prescindir de el.

En este factor, solo me queda comprometerme a mantener actualizado el sitio y publicar de una manera constante.

¹Si intentaste desde un dispositivo móvil, notaras que es complicado. Te pido una disculpa ya que estoy haciendo un diseño especial para todos los que vivimos unidos a nuestros “gadgets”.

²Más adelante incluiré los proyectos en los que he participado.

Fe de erratas:

Los sitios web, al igual que las aplicaciones, sufren de algo inevitable:
“Nunca puedes decir que están terminados”
Esto aplica para todo el software en general. Es por eso que puedo afirmar que este sitio aún no está terminado y agradecería tu critica u observación sobre él.

Como parte de su campaña, Acciona realizó un video que se me hizo interesante por varias razones.

Una de esas razones, es que no te esperas lo que acontece con la página de Youtube, hicieron un excelente uso del espacio del video, así como de los controles y el resultado lo puedes ver aquí.