Me mudo

Este blog no recibirá ya más actualizaciones. Ve al nuevo blog enricflorit.com o averigua por qué me mudo.

viernes, 31 de agosto de 2012

Porqué no usar jQuery?

Sí, es cierto. jQuery mola. Todos los frameworks para JavaScript molan. Permiten interactuar con el DOM. Permiten animaciones. Facilitan el uso de ajax. Algunos frameworks hacen esto y mucho más (véase Backbone y otros) incluyendo patrones MVC y modelos de objetos. Pero no siempre es recomendable usar una librería o framework.


Que conste que me gusta jQuery. En los desarrollos web que hago lo suelo usar, incluso hay momentos en los que por "pereza" lo uso. Pero como el resto de la web lo usa, no me importa (al fin y al cabo, somos libres de hacer lo que queramos.

Pero no siempre se debe usar jQuery. Hay gente que te pondría jQuery hasta en la sopa (a lo mejor se puede usar para hacer una ;)...). Por ejemplo, no usarás jQuery para sumar, a pesar de la imagen que aparece arriba.

Y porqué jQuery no es siempre LA opción? Preguntarán algunos. Pues porque...
  • Ocupa mucho. Si nuestro código es pequeño (no sobrepasa las 100, 150, o incluso 200 líneas sin comprimir), no vale la pena usar ayuda. Piensa que jQuery tiene unas 9.000 líneas de código. El usuario pasará más tiempo descargando la librería que nuestro código.
  • Animaciones con CSS. Aún no están extendidas, algunos navegadores no las soportan... pero si la animación es puramente estética, vale la pena limitarse al css y pasar de JavaScript.
  • Interacción con el DOM. Aunque tu script sea largo, considera lo siguiente. Muchos navegadores ya soportan los selectores CSS de forma nativa en JS. Usando document.querySelectorAll harás lo mismo que con jQuery en IE8+, FF3.5+, Chrome, Safari, Opera10+, Android, incluso en BlackBerry7+. Esto representa el 93% de los navegadores...
  • Validación de formularios: con HTML5, le pones un atributo required a un input y él solito se valida.
  • Añadir clases, quitar clases. Hay un script de unas 15 líneas que permite cambiar clases fácilmente:
 function hasClass(obj,cls){
   return obj.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
 }

 function addClass(obj,cls){
   if(!hasClase(obj,cls)) {
     obj.className+=" "+cls;
   }
 }

 function removeClass(obj,cls){
   if(hasClass(obj,cls)) {
     var exp =new RegExp('(\\s|^)'+cls+'(\\s|$)');
     obj.className=obj.className.replace(exp,"");
   }
 }

Estas son algunas de las razones por las que no usar jQuery. Y es que muchas veces es mejor usar JavaScript nativo, aunque no se vea tan "limpio" para algunos. Como se comenta en este tema: Javascript !== jQuery.

Hasta aquí mis argumentos... Para qué diríais que hay que usar/no usar librerías y/o frameworks como jQuery?

Captura de pantalla (parece ser que no existe el mensaje en StackOverflow).

También hay un lado bueno... Haz click para ver los pros de jQuery

miércoles, 29 de agosto de 2012

Las innovaciones de Internet Explorer

Cualquiera que haya hecho un diseño para una web se habrá encontrado con un enorme quebradero de cabeza: Internet Explorer. Casi parece increíble que un navegador pueda funcionar tan mal, hablando claro. Pero soportarlo, hasta hace poco, era imprescindible, porque todos los equipos con Windows lo tenían de serie. Ahora esto está cambiando con la fuerte campaña de Google Chrome, la popularización de Firefox y el avance en el mercado de OSX.
Pero lo más sorprendente son las funcionalidades que, a modo de experimento, Internet Explorer ha ido introduciendo en versiones anteriores. Estos cambios se están convirtiendo en estándares adoptados por HTML5 y las nuevas API de javascript:
  1. AJAX. En 1999 se introdució el objeto XMLHttp en IE5. Fue desarrollado por Alex Hopmann para el cliente web de Exchange 2000. En 2006 se creó un borrador para estandarizarlo.
  2. Drag and Drop. Fue añadido en IE5. Con la llegada de HTML5 se revisó y se le añadieron cambios importantes.
  3. innerHTML. La propiedad usada al manejar objetos DOM vino al mundo con Internet Explorer 4.
  4. Eventos. IE5-6 introducieron 7 eventos que hoy en día ya son estándares de la especificación DOM: contextmenu, beforeunload, mousewheel, mouseenter, mouseleave, focusin, focusout.
  5. Acceso al Portapapeles. Apareció en IE6, luego Safari lo implementó con algunos cambios, y finalmente ha sido adoptado por los grandes navegadores, excepto Opera.

  6. ContentEditable. Introducida con IE5.5 en Julio del 2000. Cinco años más tarde se empezó a introducir en la especificación de HTML5.
  7. Atributo defer para scripts. Esta característica es poco conocida, y no deberías usarla (aún). Se trata de un atributo que se escribe en las etiquetas <script>. Hace que el script no corra hasta que la página no esté cargada. Se introdució en IE4.
  8. iframe. Esta etiqueta se creó en IE3 para competir con el frameset de Netscape, y fue adoptada en la especificación de HTML4. Vale, puede que nadie la use ya... Pero qué hay de los vídeos de YouTube?

  9. Propiedades css. La mayoría están aún poco usadas, pero están soportadas por los navegadores más modernos. Son: text-overflow, overflow-x y overflow-y, word-break, word-wrap y overflow-wrap
Lo más sorprendente de todo es que casi todas estas innovaciones son parte de HTML5 y CSS3...
¿Conclusiones para este post? No es que debamos adorar a IE (hay bastantes motivos para despreciar a sus versiones antiguas), pero sí es importante tener presente que en un futuro no demasiado lejano (versiones 10, 10.x y/o 11), Internet Explorer estará a la altura de los navegadores modernos. Incluso Mozilla lo ha dicho...
Hasta pronto! ;-)

Fuentes

lunes, 27 de agosto de 2012

XMLHttpRequest2, el futuro de AJAX

AJAX funciona gracias al objeto XMLHTTP. Curiosamente, fue creado por el ingeniero de Microsoft Alex Hopmann para Internet Explorer 5. Desde entonces, miles de aplicaciones web y páginas dinámicas han sido creadas. Ejemplos de ello son Gmail, Google Maps, Facebook, Twitter podrían ser los más conocidos. Se han creado cientos de frameworks y librerías de JavaScript que lo implementan, hacen más fácil y rápido su uso. Parece que cada vez es más imprescindible conocer el uso de esta tecnología.
En Abril del 2006, el W3C empezó el primer borrador para un estándar del objeto XMLHTTP. Éste ha ido evolucionando, se han creado múltiples versiones de este borrador. En Febrero de 2008, se empezó a escribir un nuevo borrador. Estaba dedicado a la evolución de XMLHTTP, el objeto XMLHttpRequest 2.
Esta nueva especificación (todavía se está trabajando en el borrador) incluye nuevos eventos, añade la posibilidad de establecer límites de tiempo a la conexión y da información adicional sobre el progreso de la transferencia HTTP. También aporta una mejora muy interesante, la posibilidad de subir archivos al servidor. Y como estamos hablando de AJAX, lógicamente sin recargar la página.
Nuevos eventos
Parece ser que desde ahora ya no usaremos el evento onreadystatechange. Eso sí, se mantendrá por razones históricas, nada más.
  • loadstart. Producido al empezar la carga.
  • progress. Se produce después del loadstart. La función usada al producirse puede recibir un objeto con las propiedades lengthComputable, loaded y total.
  • abort. Salta al interrumpirse manualmente la conexión.
  • error. Si se produce un error.
  • timeout. Si se ha definido un tiempo límite, este evento saltará cuando se supere.
  • load. Cuando se complete el progreso.
  • loadend. Se lanza una vez parado el progreso (después de load, error, abort o timeout).
Nuevos atributos
Para poder usar la carga de archivos y facilitarla, se han añadido los siguientes atributos:
  • upload. Permite manejar los eventos de progreso y carga.
  • timeout. Tiempo límite en milisegundos para la conexión.
Objeto FormData
Para poder manejar formularios fácilmente, se ha añadido el objeto FormData. También se puede usar para enviar datos fácilmente. Con el siguiente código:
var data = new FormData();
data.append('id','4');
data.append('nombre','Mi Nombre');
De esta manera, nos evitamos tener que codificar cadenas de petición de la forma id=4&nombre=Mi%20Nombre, etc.
Y aunque no todos los navegadores lo soporten, tenemos una solución cross browser...
En definitiva, que es cuestión de tiempo que se empiezen a generar códigos en la comunidad aprovechando estas nuevas características para el desarrollo de aplicaciones web, que seguro que serán el futuro de la web.
Hasta pronto! ;-)

domingo, 26 de agosto de 2012

Cómo subir archivos al servidor con PHP

Me he mudado! Este blog pasará a llamarse enricflorit.com. Puedes leer esta entrada aquí:

http://www.enricflorit.com/como-subir-archivos-al-servidor-con-php/

sábado, 25 de agosto de 2012

Primeros pasos con jQuery mobile: páginas básicas

Desde que salió la primera versión oficial de jQuery Mobile habrán pasado ya unos seis meses, y la verdad es que ha mejorado mucho: me acabo de pasar por las demos oficiales y he visto que han incluido muchas mejoras, y evidentemente, ahora debería ser más estable.

Creo que para poder apreciar las posibilidades de un framework o una librería lo mejor es verlo en acción, así que pasaos por aquí para ver los muchos usos que se le han dado a jQm - incluso grandes empresas como Disney, Verizon, Jeep... lo usan!

Así que si quieres meterte de lleno en esta librería, vamos a empezar creando algunas páginas básicas.


La plantilla base
Lo bueno que tiene jQuery es que tiene una gran comunidad detrás, así que la documentación es muy buena - lo mismo sucede con jQuery mobile. Para empezar a crear "algo", es tan sencillo como copiar este código:


<!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->

<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Con esto tendremos una página con una barra superior (toolbar) con un título de prueba. Y lo bueno es que la librería viene con 5 temas de prueba, de la a a la e. Para cambiar el tema de cualquier elemento, solo hay que añadirle:

data-theme="a"

(O cualquier otra letra), y ya está. Pero lo bueno es que esto casi no tiene límites. Por ejemplo, para cambiar el tema de la página:

<div data-role="page" data-theme="b">

El tema predeterminado para todos los elementos es el "c". Para entendernos mejor, el tema "a" es el más oscuro de todos, y el tema "e" es el más claro (con tonos amarillos).


Creando múltiples páginas
Evidentemente, con jQm podemos crear páginas como siempre, una página un archivo. Pero para hacer más rápida una página, se nos ofrece la opción de tener varias vistas en el mismo archivo. Así que dentro del <body> podríamos tener:


<!-- Inicio de la primera página -->
<div data-role="page" id="foo">

<div data-role="header">
<h1>Título de la primera página</h1>
</div><!-- /header -->

<div data-role="content">
<p>Primer párrafo. Como esta página está primero, es la que se verá por defecto, y no la #bar.</p>
<p>Ver la página interna <a href="#bar">bar</a></p>
</div><!-- /content -->

<div data-role="footer">
<h4>Pie de página</h4>
</div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">

<div data-role="header">
<h1>Título de la segunda página</h1>
</div><!-- /header -->

<div data-role="content">
<p>Esta página está segunda, así que no se verá a menos que se haga click en el link de la primera</p>
<p><a href="#foo">Volver a foo</a></p>
</div><!-- /content -->

<div data-role="footer">
<h4>Pie de página</h4>
</div><!-- /footer -->
</div><!-- /page -->


Evidentemente, esto es el ejemplo más básico, se podría poner mucho más: más páginas, contenido...

En la siguiente entrada de "Primeros pasos con jQm" explicaré las toolbars (barras de título y pie de página) a fondo. No dejéis de visitar el blog!

Un saludo ;-)

viernes, 24 de agosto de 2012

10 plugins útiles de jQuery

jQuery está de moda, y quien lo niegue miente. Lo cierto es que cada vez más programadores de js deciden empezar a usar una librería que les solucione las funciones de selección de elementos en el DOM, pues está más que demostado que los selectores CSS3 son el futuro de la web.
Lo bueno de casi todas las librerías de js que existen son de código libre, y muchas permiten escribir plugins para facilitarnos la vida. Así que hoy os traigo una selección de plugins muy buenos desarrollados por la comunidad que seguro que os servirán ;). Ademas, todos son gratis, así que podréis probarlos fácilmente.
  • Color animation. Este curioso y pequeño script (comprimido ocupa solo 1.9Kb) hará que podamos cambiar los colores de cualquier elemento del DOM usando la función .animate() de jQuery.
  • Elastic. Este plugin hará que un textarea se haga más grande a medida que escribas en él, en lugar de crear una barra de scroll.
  • jPlayer. Un reproductor de audio y vídeo, compatible con HTML5. Ideal si no queremos complicarnos la vida con los tags
  • Nivo Slider. Un bonito formato de presentación de imágenes, ideal para la portada de nuestra web. Es de pago en su versión para WordPress, pero por suerte el plugin de jQuery es gratis.
  • jQuery Star Rating. Quería poner solo un valorador por estrellas, pero como los dos que encontré son muy buenos, os pongo los dos. Sencillamente geniales.
  • jRating. El segundo valorador por estrellas que he encontrado. Dos pequeñas joyas con un modo de trabajar distinto: lo difícil va a ser decidirse por cuál usar...
  • ScrollTo. Haz scroll de la ventana, de una capa, un iframe o lo que quieras.
  • IE6 Reject. Cuando un usuario de Internet Explorer 6 te visite, le saltará una advertencia diciéndole que su navegador no está soportado y que descargue uno nuevo.
  • Simple Email Validate. Valida los emails introducidos en inputs con solo $('input[type="email"].email_validate() .
  • Booklet. Añade un efecto de pasar página. Es ideal para simular una revista o un periódico.
Espero que hos hayan gustado estos plugins de jQuery. Recordad, hay muchos más, y también podéis desarrollar los vuestros... Un saludo!
¿Qué plugins usais vosotros en vuestras webs?

jueves, 23 de agosto de 2012

Intercambio de información entre servidor y cliente: JSON

Hace poco que empezó en la sección de Javascript de Foros del Web una discusión interesante: qué era mejor a nivel de rendimiento en AJAX al enviar datos del servidor al cliente: en JSON, XML o HTML. En realidad, todo el mundo tiene su método (el que le resulta más cómodo), así que en este post y alguno más intentaré explicar (con ejemplos) el uso de cada uno.

Hoy le toca al JSON. Son las siglas de JavaScript Object Notation, es decir, Notación de Objetos en JavaScript. Se está convirtiendo en un modo de transmitir información muy interesante por su fácil escritura y legibilidad. Y no solo en el ámbito web (ver sección de lenguajes).

Para empezar, crearemos un objeto xmlhttp:
if( window.XMLHttpRequest ){
  var xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject) {
  var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Abrimos la conexión con un archivo PHP que nos devolverá el JSON:
xmlhttp.open('GET', 'json.php', true);

Ahora pasamos al código PHP. Por suerte, este lenguaje incluye una librería básica de JSON a partir de su versión 5.2.0, así que en la mayoría de casos no tendremos problemas para implementar lo siguiente. Se trata de hacer un array que luego convertiremos a json usando json_encode.
<?php 
$array = array(
  'Hola mundo!',
  'Esta es una aplicación ajax',
  'Estoy usando json ;)'
);

echo json_encode( $array ); 
Sencillo, no? A partir de estos datos, vamos a crear una lista en el lado del cliente, usando js. Haremos uso del evento onreadystatechange:
xmlhttp.onreadystatechange = function(){
  if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
    var r = xmlhttp.responseText,
    //Convertimos la cadena a JSON
    json = eval('(' + r + ')'),
    ul = document.createElement( 'ul' );

    if( json.length ){
      for( var i in json ){
        var li = document.createElement('li');
        li.innerHTML = json[i];
        ul.appendChild(li);
      }
      document.getElementById('response').appendChild(ul);
    }
  }
}
Finalmente, no queda más que enviar la petición al servidor:
xmlhttp.send( null );


Montando todo el código

Aquí os pongo cómo ha quedado nuestro script al final, incluyendo un enlace para llamar a la función ajax y una capa que hará de receptora.
<!doctype html>
<html>
<head>
  <title>AJAX</title>
<script>
function cargarLista(){
  var xmlhttp;
  if( window.XMLHttpRequest ){
    xmlhttp = new XMLHttpRequest();
  }else if(window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }else{
    return false;
  }

  xmlhttp.open('GET', 'http://localhost/dev/json.php');

  xmlhttp.onreadystatechange = function(){
    if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
      var r = xmlhttp.responseText,
      //Convertimos la cadena a JSON
      json = eval('(' + r + ')'),
      ul = document.createElement( 'ul' );

      if( json.length ){
        for( var i in json ){
          var li = document.createElement('li');
          li.innerHTML = json[i];
          ul.appendChild(li);
        }
        document.getElementById('response').appendChild(ul);
      }
    }
  }

  xmlhttp.send( null );
}
</script>
</head>
<body>
<a href="javascript:;" onclick="cargarLista()">Cargar lista</a><br />

<div id="response">
</div>
</body>
</html>

El código PHP queda como lo habíamos puesto arriba.

A partir de aquí, se podría desarrollar mucho más, comprobar si ya se había cargado la lista, modificar el script PHP para que se muestren los datos guardados en una base de datos... Pero la esencia es esto.

En una entrada de la semana que viene escribiré sobre pasar información del servidor al cliente usando XML. Hasta otra!

Un saludo a todos ;-)

miércoles, 22 de agosto de 2012

Cómo empezar a colaborar con un proyecto de software libre

Hoy os presento algunos consejos que podéis poner en práctica si queréis colaborar en un proyecto de software libre y no sabéis por donde empezar:


  • Elige un proyecto que conozcas. Es más, elige uno que uses, pues ya estarás familiarizado con él. Si usas Linux, freeBSD o cualquier otro Unix libre, el 98% de las aplicaciones serán open source, por lo que no tendrás problemas. Si usas Windows o OSX, también tienes opciones: piensa que no todos los proyectos open source son programas de escritorio; y si no se te da bien la programacion web, también existen programas libres para estos sistemas operativos.
  • Localiza el grupo de correo del proyecto y suscríbete. Así te mantendrás informado de las últimas novedades en el desarrollo, y podrás enviar mensajes al grupo. Eso sí, piensa que en la mayoría de casos el idioma de trabajo será el inglés.
  • Envía tus comentarios, sugerencias... Si usas frecuentemente el programa, seguro que tienes algo que decir. No tengas demasiado miedo y envía tus sugerencias al grupo de desarrollo: serán bien recibidas.
  • Reporta bugs. Para reportar errores, primero hay que encontrarlos, así que si no te atreves con el código, haz lo siguiente: usa el programa de diferentes formas, probando todas las opciones y comprobando los resultados... seguro que consigues algo!
  • Intenta leer y comprender partes del código. Esto suele ser costoso, pero si comprendes el lenguaje en el que está escrito el proyecto, tarde o temprano lo conseguirás. A partir de aquí, puede que incluso tú mismo puedas aportar código al proyecto... ;-)
Así que, lo dicho: suerte en vuestros proyectos open-source!

Saludos ;-)

martes, 21 de agosto de 2012

Consejos para usar HTML5 y que todos vean bien tu pagina

Últimamente se esta hablando bastante del HTML5, CSS3 y las nuevas funciones de javascript. Pero lo cierto es que sigue habiendo algo de miedo para dar el salto. El desconocimiento y pensar que los usuarios de Internet Explorer no veran bien tu sitio pueden ser razones para no querer empezar. Si sigues estos consejos, no te sera dificil iniciarte en la nueva generacion de paginas web:


  • No empieces tus proyectos desde cero. Tienes herramientas muy buenas como html5boilerplate, que ya estan listas para ser usadas con facilidad. Y además la web está en español.
  • Ten a mano una chuleta. Nunca se sabe cuando te olvidaras de alguna etiqueta nueva, que hay muchas.
  • Dales la propiedad display="block" a las nuevas etiquetas semánticas. Eso si no usas html5bp, claro. La plantilla lo incluye por defecto.
  • Comprueba la compatibilidad. Si vas a usar caracteristicas poco frecuentes, mira antes en caniuse para ver que opciones tienes. Recuerda también que visitar html5please puede ser una buena idea ;).
  • Exprime al maximo las soluciones de compatibilidad creadas por otros. Html5shiv, Modernizr, Selectivizr y curvy corners son solo algunos ejemplos de la gran comunidad de gente que dona su codigo para el bien de todos. 
  • Crea un enlace hacia browsehappy. Si aún no estás convencido de que todos los usuarios van a ver bien tu web, puedes crear un enlace a la web Browse Happy para que tus visitantes puedan actualizar su navegador web. Seguro que funciona.
  • Hazte con un conversor de vídeo y audio. Si quieres incluir elementos multimedia en tu web, necesitarás varios formatos para que todos los navegadores los puedan reproducir. Para audio los formatos son MP3 y Ogg Theora. Para vídeo son MP4 y WebM.
Espero que estos consejos os ayuden a comenzar con HTML5.

Y vosotros, qué consejos daríais a alguien que todavía no ha empezado? Hasta pronto!

lunes, 20 de agosto de 2012

5 características de CSS3 que ya deberías estar usando


Si tienes una web o quieres diseñar una, lo que ahora está de moda es HTML5. Porque ofrece muchas nuevas opciones, un diseño "fácil", todo el potencial de CSS3... Así que manos al código, y empieza ya a escribir webs con estos consejos:


  • Border-radius. Excepto IE 8 e inferior, todos tus visitantes veran unos bonitos bordes redondeados. No olvides usar los prefijos -moz- y -wekit-. Y además, tienes esto y esto que hará que los usuarios de Internet Explorer vean estos bordes.
  • Gradients. Los degradados son muy versátiles: botones, fondos... (en un futuro también bordes y texto). Pero no te compliques, existen herramientas muy buenas como colorzilla que te harán la vida muy fácil.
  • Box shadow. Añadir algo de sombreado a cualquier capa la hace más atractiva visualmente, tus diseños se verán más profesionales. Es tan simple como esto:
#div-id {
  background: #FFF;
  border: 1px black solid;
  -moz-box-shadow: 5px 5px 5px #888;
  -webkit-box-shadow: 5px 5px 5px #888;
}

Y también existe una solución (aunque algo compleja) para mostrar sombras en Internet Explorer: http://dev.opera.com/articles/view/cross-browser-box-shadows/


  • Fuentes (@font-face). Es muy curioso que esto esté soportado por el 92% de los usuarios, es decir, casi todos lo verán bien. Se trata de usar cualquier fuente de letra en tu página web. Aquí tienes un repositorio bastante grande de fuentes libres donde, además, te explican cómo usarlas.
  • Opacidad. La propiedad css opacity hará que cualquier elemento sea un tanto por ciento transparente, el que tu le indiques. Y además tienes soporte para IE! Aquí tienes el código:

.mi-estilo {
  filter: alpha(opacity=60);/* IE */
  -khtml-opacity: 0.6;/* KHTML, Safari antiguo */
  -moz-opacity: 0.6;/* Firefox antiguos */
  opacity: 0.6;/* Navegadores modernos */
}

Espero que podáis aprovechar al máximo estas nuevas funciones de css3 ;-).

Saludos!

sábado, 18 de agosto de 2012

Enviar formularios con AJAX y FormData

Me he mudado! Para leer este post haz click en el siguiente enlace:

http://www.enricflorit.com/como-enviar-formularios-con-ajax-y-formdata/

Related Posts Plugin for WordPress, Blogger...