miércoles, 24 de junio de 2009

Soy Blogger y Soy Viejo

La historia del blog (bitácora) se remonta hace aproximadamente 15 años cuando Justin Hall, siendo estudiante de la Universidad de Swarthmore, escribió en lo que fue el primer blog personal.
A lo largo de la historia ha habido distintas generaciones web, desde la web 1.0 donde el usuario de internet era meramente observador, donde los sitios casi nunca se actualizaban, y si lo eran gracias al famoso webmaster. Los tiempos han cambiado, la manera de crear y compartir información también, tras la llegada de la web 2.0, el usuario se volvió más participativo y colaborativo, el boom de los blogs como herramienta de creación y difusión de contenido, que en base al sistema de gestion (CMS) puede ser actualizados por cualquier persona sin conocimientos de programación. Tras 5 años de estar conviviendo con la web 2.0, empiezan a despuntar otras herramientas / servicios que plenamente pueden llegar a convertirse iconos de una nueva generación web, por ejemplo con Google Wave o la revolución que se esta viviendo con Twitter y la búsquedas en tiempo real.

Desde que estoy en Twitter he disminuido notablemente mis actualizaciones en el blog, esto porque comparto información de forma más rápida y con mayor impacto por sus características de ser una plataforma de comunicación. Los blogs han sido usados para distintos fines como sitios web de corporaciones, organizaciones y personales, más sin embargo no han salido de lo mismo crear y compartir contenido en la red. Por otro lado, el microblogging esta siendo utilizado como herramienta para otros objetivos desde educativos (e-learning), empresariales, y hasta político (e-government).

Conclusión:
Las nuevas aplicaciones ya no están centradas en el creación de contenido, sino en la moderación/administración y la comunicación entre usuarios. Hay que tener muy claro esto, cuando se quiere emprender en la web.

Simple jQuery plugin: Enlaces con mensajes de 'Cargando'

LoadingMessage, es un pequeño plugin que hice en jQuery para brindar una retroalimentación al usuario que haya dado click sobre un enlace en la aplicación, este regresa un mensaje de cargando, el cual puede ser personalizado.
El objetivo de este plugin es evitar la repetición de código, naturalmente el plugin se puede extender aún más, ya que no funciona para formularios, solo para enlaces <a href=''> funciona con formularios agregando un id y title al botón (los datos no se envian de forma asíncrona, pero mostrará el mensaje de cargando).

jQuery Plugin:
$.fn.LoadingMessage = function (a){
var attr, loading,href;
$(this).click(function(event){
var href=$(this).attr('href');
if(a.attr=='text'){ if($(this).attr('title')!=''){ attr=$(this).attr('title'); } else { attr=$(this).text();}}
else if (a.attr=='url'){attr=href;}
loading = '<div id="'+a.css+'">'+a.text+' '+attr+'<\/div>';
$('body').prepend(loading);
if(a.type=='asyn'){
event.preventDefault();
$(a.loadhere).load(href, function() {
$('#'+a.css).remove();
});} });
return false; };

Cómo funciona:
$('#enlaces a').LoadingMessage({
text:'Cargando',
attr:'text',
css:'loading'
});
Aquí estoy diciendo que especificamente los enlaces dentro del #enlaces mostrarán el mensaje de cargando, claro puedo decir que todos los enlaces en mi aplicación muestren el mensaje con: $('a').

LoadingMessage
funciona con los parametros:
  1. text: es el mensaje que se enviará, en el caso del ejemplo dira Cargando.
  2. attr: significa el atributo de el enlace, puede enviarse 2: url o text. Text significa que mostrará el título del enlace. Nota: Si <a title="'enlace'"> se mostrará lo que contenga el atributo title, si no lo tiene, toma el texto del enlace.
  3. css: se envía el nombre del id del CSS, nuestro ejemplo se llamo a #loading. OJO no hay necesidad de escribir #.
Actualización (21/07/2009): se incluyó ejemplo con formulario.

Actualización (06/01/2011): agregue la función de cargas asíncronas / AJAX:

  1. type: utilizado para hacer llamadas asíncronas / AJAX. Si se incluye con type:asyn, el contenido cargará en el div indicado sin refrescar el sitio.
  2. loadhere: el div donde se cargará el contenido de manera asíncrona. Puede ser class o id.

Cómo funciona:
$('#enlaces a.asyn').LoadingMessage({
text:'Cargando',
attr:'text',
css:'loading',
type:'asyn',
loadhere:'#contenido'
});