Hace poco tuve que implementar una API en PHP que pretendía integrar funcionalidades de terceros en un sitio web. Uno de los métodos que se necesitaban debía devolver la URL a la que se redirige inicialmente al usuario para que nos dé permisos de acceso a su cuenta, en principio mediante OAuth.

No hubo problema para los dos primeros casos (Gmail y Facebook), pero al empezar con Hotmail, que utiliza una librería en Javascript, era preferible abrir el popup estándar que provee Windows Live antes que mandar al usuario a una página en la que el 95% del contenido está en blanco.

Las complicaciones empezaron al intentar abrir una ventana nueva de forma “indirecta”, es decir, sin especificar el código directamente en el HTML original, sino a través de una función asignada de forma dinámica:

function wlConsent(connect_url) {
  window.open(connect_url, 'wl', 'width=...');
}

Dicha ventana se abría correctamente en la mayoría de los navegadores, pero algunos, los más modernos, no lo permitían debido a su bloqueador de popups.

La solución parecía sencilla, recoger el valor devuelto por el método “open” del objeto “window” y comprobar si estaba vacío:

var popup = window.open(...)
if (!popup || popup.closed || typeof popup == 'undefined' || typeof popup.closed=='undefined') {
  // popup bloqueado
}

Pero Chrome no se comporta como el resto de sus competidores. El navegador de Google requiere de una comprobación “extra” realizada desde un popup a través de la función:

function chrome_popups_permitted() {
  if(window.innerHeight != 0) {
    return true;
  } else return false;
}

Basta pues con detectar si el navegador del usuario es Chrome y, en tal caso, abrir una ventana con el código Javascript indicado y realizar la llamada a dicha función. Si los popups están bloqueados, se redirige al usuario a la URL solicitada en vez de abrirla en una nueva ventana/pestaña.

El resultado final, encapsulado en una clase sencilla, es el siguiente:

var PopupTester = {
  popup : Object,
  url : "",
  name : "popup_tester",
  options : "width=1,height=1,left=0,top=0",
  open : function(url, name, options) {
    this.url = url
    if (name) this.name = name
    if (options) this.options = options
    if(this.popups_are_disabled() == true) {
      this.redirect_to_instruction_page();
    }
  },

  redirect_to_instruction_page : function() {
    document.location.href = this.url;
  },

  popups_are_disabled : function() {
    this.popup = window.open("/chrome_popup_test.html", this.name, this.options);

    if (!this.popup || this.popup.closed || typeof this.popup == 'undefined' || typeof this.popup.closed=='undefined') {
      return true;
    }

    //
    // Chrome popup detection requires that the popup validates itself
    // - so we need to give
    // the popup time to load, then call js on the popup itself
    //
    if (navigator && (navigator.userAgent.toLowerCase()).indexOf("chrome") > -1) {
      var on_load_test = function(){PopupTester.test_chrome_popups();};
      var timer = setTimeout(on_load_test, 200);
      return;
    }

    this.popup.location.href = this.url;
    return false;
  },

  test_chrome_popups : function() {
    if (this.popup && this.popup.chrome_popups_permitted && this.popup.chrome_popups_permitted() == true) {
      this.popup.location.href = this.url;
      return true;
    }

    this.popup.close();
    //
    // If the popup js fails - popups are blocked
    //
    this.redirect_to_instruction_page();
  }
};

Y un ejemplo de uso, idéntico al método original:

PopupTester.open(url, window_name, options)

Esta solución se basa en la propuesta de The Code Abode con algunas modificaciones, que permiten abrir el popup “de prueba” bajo demanda, es decir sólo en caso de necesitarlo.

A raíz de un par de artículos sobre el tema, os dejo unas cuantas extensiones de Chrome y Firefox para desarrolladores web.

Para Firefox:

• Firebug: no necesita presentación.
• FireQuery: compatibilidad entre jQuery y Firebug.
• FirePHP: añade soporte para PHP y Ajax.
• Web Developer: herramienta que permite activar/desactivar las hojas de estilos, los plugins, el código javascript, las tablas, las imágenes,…
• Html Validator: evidentemente, ayuda a comprobar si una página cumplen el estándar.

Para Chrome:

• Resolution Test: permite redimensionar el navegador para visualizar la página en distintas resoluciones y comprobar que “todo funciona”.
• Speed Tracer: ya hablamos de él en este blog.
• Pendule: permite hacer probatinas con los colorer, hojas de estilo, javascript,…

¿Cuáles son vuestras preferidas?

Tal y como se rumoreaba no hace mucho, la velocidad de carga de una página ha empezado a ser uno de los factores que utiliza Google en su algoritmo de búsqueda.

Leemos en Chica Seo que Matt Cutts confirmó el otro día una noticia que se veía venir. Para quitarle importancia al asunto, o quizás para evitarse polémicas, el ingeniero jefe de Google aseguró que el cambio afectará a menos del 1% de las posiciones en los resultados.

También aprovecharon para comentar que próximamente se podría tener en cuenta la reputación o la frecuencia de actualización. Este último factor resultaría bastante interesante ya que, desde mi humilde opinión, los buscadores suelen dar demasiado peso a páginas antiguas (y que pueden estar desfasadas) por el mero hecho de ser más viejas.

Hasta ahora, aumentar la velocidad de carga de nuestra web “sólo” mejoraba la experiencia del usuario. A partir de este anuncio, las optimizaciones están justificadas también desde el punto de vista del SEO.

A la hora de implementar Safari blog me planteé la opción de utilizar algún plugin para WordPress que me permitiera publicar en dos idiomas (español e inglés) con una sola instalación y, a ser posible, en un solo dominio (el mismo post en cada idioma tendría un título diferente y, por tanto, una URL distinta).

Comencé a investigar/buscar en Google y al final seleccioné estas 3 opciones:

• Multilingual wordpress: propone un plugin llamado polyglot, no demasiado potente y que se debe configurar a mano.
• Plugin para cambiar de idioma en WordPress: Juan Mediavilla nos explica cómo instalar y configurar Language Switcher, para cambiar de idioma. Es más potente que el anterior, pero además del largo proceso inicial requiere que toquemos el código fuente.
• WPML Plugin For WordPress: sencillo de instalar y configurar, realiza los cambios necesarios en la base de datos y modifica el código para, por ejemplo, poder publicar el mismo post en dos idiomas, enlazando entre las distintas versiones.

Esta última opción parecía adecuada a mis necesidades, pero descubrí un par de características que no me terminaron de convencer:

1. Obliga a elegir una de las siguientes opciones para distinguir los idiomas: distintos directorios, diferentes dominios o subdominios o un parámetro adicional.
2. Problemas a la hora de traducir el resto de contenidos, por ejemplo los enlaces.

Así que finalmente opté por implementar mi propia solución, consistente en:

• Dos (sub)dominios distintos para las versiones en inglés y español. No era del todo de mi agrado, pero simplificaba el código y evitaba problemas con la indexación de contenidos.
• Una sola copia del código que, en función del dominio, ataca a una u otra base de datos, configura el idioma adecuado y establece el formato de fecha. Se puede implementar con una simple comprobación de la variable $_SERVER['SERVER_NAME'] en el archivo “wp-config.php”.
• En algunos ficheros, se modifican los contenidos en función del idioma de la aplicación. Por ejemplo, el botón para cambiar de idioma o los enlaces a twitter y Facebook en la cabecera.

La mejor solución depende de los requerimientos de cada caso, espero que las distintas opciones comentadas os puedan servir de inspiración.

Speed Tracer es una herramienta, lanzada por Google recientemente, que sirve para “identificar y solucionar problemas de rendimiento en las aplicaciones web“.

Fundamentalmente, su funcionamiento se basa en el tiempo de carga de la página desde que realizas la petición hasta que ésta termina por completo.

Speed Tracer te muestra una gráfica de los tiempos invertidos en el transporte por la red, la recepción de la página, su carga y renderizado, así como la petición y carga de otros archivos dependientes de la página (imágenes, javascript, códigos externos,…).

Captura de un ejemplo de uso de Speed Tracer

De esa forma puedes detectar cuáles son los puntos críticos de tu aplicación web, es decir aquellos que merece la pena optimizar. La información, que se muestra de una manera muy visual, es bastante completa y te permite ampliar los detalles de cada una de las fases y sus componentes.

Speed Tracer está diponible como una extensión de Chrome para desarrolladores web en sus versiones para Windows y Linux.

Más detalles en Speed Tracer – Google Web Toolkit – Google Code y en la página del proyecto.

Seguro que alguna vez, navegando en Internet, has visto una miniatura con la captura de pantalla de un sitio web. Esta imagen puede ser útil para tus usuarios, puesto que les permite previsualizar la web antes de visitarla. Incluir esta funcionalidad en tu aplicación es muy sencillo.

Existen librerías gráficas (al menos en PHP) que te permiten generar esas capturas desde tu propio servidor. Pero si no quieres sobrecargarlo es mejor utilizar un servicio de captura de pantallas (preview, thumbshot o snap, en inglés).

Investigando, para utilizarlo en un proyecto, descubrí un par de opciones interesantes: thumbshots.com y websnapr.com.

Thumbshots te permite mostrar una captura de pantalla en miniatura insertando un sencillo código HTML que consiste en una imagen (qué menos!?) en la que tan solo debes incluir la URL del sitio que deseas capturar:

<img src=”http://open.thumbshots.org/image.aspx?url=[LINK]” border=”1″ />

Su versión gratuita sólo incluye URLs de primer nivel (es decir, nombres de dominio), un tamaño de 120×90 pixels y requiere un enlace recíproco.

En cambio websnapr 2.0 te ofrece hasta 100.000 impresiones gratuitas al mes, con un tamaño algo mayor (202×152) y está disponible en español.

Otra de las ventajas de este sistema son los plugins que han desarrollado alrededor de la herramienta principal y que te permiten, por ejemplo, mostrar la imagen previa del sitio web cuando el ratón pasa por encima de un enlace.

Para usar ambas opciones necesitas registrarte previamente. En el caso de websnapr recibes una “clave de desarrollador” que debes incluir en todas tus peticiones:

http://images.websnapr.com/?size=size&key=key&url=url

El resultado final sería este:

Empezar a utilizar el framework de Zend puede ser como un dolor de muelas. La documentación del portal es buena, pero se echa de menos una mejor explicación del entorno, cómo funciona, su instalación y cómo empezar a desarrollar una aplicación de verdad.

Surviving The Deep End es un libro online gratuito sobre el framework Zend, que sirve de introducción a este entorno de desarrollo basado en PHP y la arquitectura MVC.

Comienza explicando qué es Zend Framework, su filosofía y sus principales ventajas. Continúa con la arquitectura y cómo ha implementado las 3 capas: Modelo, Vista y Controlador.

Después de un capítulo dedicado a su instalación, encontramos el típico ejemplo de “Hello World”.

A partir de ahí entra en temas más “interesantes” si queremos desarrollar una aplicación real, como las clases más importantes, el manejo de errores, el diseño o la optimización.

Una lectura recomendable para quienes estén dando sus primeros pasos con Zend.

Nota: el manual, por supuesto, está implementado con Zend.

Dentro del proyecto en el que trabajo surgió la necesidad de crear una serie de herramientas externas de apoyo al usuario. La primera, y seguramente la más importante, era un plugin para WordPress que integrara nuestra aplicación con una de las plataformas de blogs más usadas.

Sólo conocía WP como usuario y administrador, sin tener apenas idea de su implementación. Empecé a buscar recursos y a leer.

He de reconocer que me gustó la estructura interna de WordPress y que resultó bastante sencillo implementar un plugin básico, tarea que seguramente habría sido más complicada sin conocimientos previos de PHP y MySQL.

Aunque opino que los desarrollos web nunca se terminan, disponemos de una versión bastante avanzada del plugin con las siguientes funcionalidades:

• Instalación/desinstalación, incluyendo la interacción con la base de datos.
• Actualización de una tabla en función de los resultados de una llamada remota.
• Gestión, por parte del usuario, de las opciones de configuración.
• Modificación parcial de los contenidos del blog, a partir de la información de la base de datos.

Como comentaba, el desarrollo no tuvo grandes complicaciones ya que WP facilita enormemente la tarea con los hooks (¿puntos de enganche?): métodos de instalación/desinstalación, gestión de menús, configuración, comunicación con la base de datos,…

Si hubiera que ponerle alguna pega, diría que la creación de páginas de opciones podría ser más ligera.

Había pensado publicar un breve manual sobre cómo crear un plugin para WordPress desde cero, pero hay un par de motivos que me han desanimado. Primero, hay bastante documentación disponible y de buena calidad. Segundo, dependiendo de lo que quieras hacer el número de posibilidades que ofrece WP es incontable y, lamentablemente, no tengo tiempo suficiente para abarcarlas todas. Así que me limitaré a compartir con vosotros los enlaces que más me ayudaron durante el proceso:

• Plugin Resources: introducción “oficial” a los plugins de WordPress y recursos relacionados (en inglés).
• Writing a Plugin: otra página oficial sobre cómo crear un plugin, convenciones de nombres, archivos, opciones, sugerencias,… (en inglés).
• Crear un plugin para wordpress: tutorial muy básico pero sencillo de comprender.
• Estandarización de los plugins para WordPress: sugerencias para estandarizar tanto el código como el contenido de los plugins.

Estoy trabajando en un proyecto en el que hemos decidido mostrarle al usuario, para facilitarle la tarea, un botón o enlace que le permita copiar un texto al portapapeles. De esa forma puede realizar dos acciones con un solo click: seleccionar y copiar.

Empecé la investigación (léase búsqueda en Google) y obtuve resultados demasiado buenos para ser verdad. Gracias al método “setData” del objeto “clipboardData” era sencillo cumplir mi objetivo:

clipboardData.setData("Text", s)
// siendo "s" una variable que contiene el texto a copiar

Pero no podía ser tan fácil. El código anterior sólo funciona en Internet Explorer, así que seguí buscando una solución cross-browser o, como mínimo, compatible con Firefox.

Después de algún intento infructuoso, encontré este ejemplo que funcionaba… con ciertas restricciones.

Por lo visto, las políticas de seguridad de Mozilla impiden la ejecución de dicho código. Y puede que con motivo, ya que de lo contrario cualquier página podría tener acceso a tu portapapeles y, por lo tanto, a información potencialmente delicada (direcciones de e-mail, teléfonos, números de tarjeta de crédito,… o cualquier otro dato que hayas copiado).

Llegados a este punto, existían dos opciones para poder copiar el texto en Firefox:

• Firmar el script, demasiado costoso para lo que queremos hacer
• Confiar en que el usuario tenga activada la opción “signed.applets.codebase_principal_support” en su configuración (about:config), o bien esté dispuesto a habilitarla

Si estamos pensando en hacer la aplicación más fácil de usar, no podemos pedirle al usuario que configure su navegador de una forma especial, que además conlleva cierto riesgo.

A todo esto hay que unir por un lado un código fuente bastante “farragoso”, lleno de capturas de excepciones y avisos al usuario. Y por otro, las alertas de seguridad que tanto IE como FF muestran antes de permitir la copia de contenidos al portapapeles. Seguro, pero poco práctico.

Me estaba replanteando la decisión de incluir esta funcionalidad cuando encontré una solución algo más limpia. Inicialmente había descartado la opción de implementarla usando Flash, pero al ver la alternativa de AddThis volví a cambiar de opinión.

La propuesta se basa en 4 elementos:

1. La librería jQuery, versión 1.3.2 reducida, como apoyo.
2. Un archivo de Flash, ZeroClipboard.swf, que fundamentalmente consiste en una imagen transparente que “captura” los eventos del ratón y copia un texto predefinido al portapapeles. Si teneis curiosidad por saber cómo está implementado, os recomiendo Sothink SWF Decompiler.
3. Una clase, ZeroClipboard, que sirve de enlace entre el Flash y el Javascript de la página.
4. El código Javascript que se ejecuta en la página y que analizaremos a continuación:

// Inicializamos el objeto ZeroClipboard con la ruta del fichero Flash
ZeroClipboard.setMoviePath('/lib/zeroclipboard/ZeroClipboard.swf');
// Usaremos como "disparadores" los elementos con class="copybtn"
$('.copybtn').each(function(){
    // Para diferenciarlos deben llamarse copybtn[X], siendo [X] un entero
    c = this.id.substr(7);
    // Se crea un "cliente" para cada disparador
    clips[c] = new ZeroClipboard.Client();
    // El texto se tomará del elemento con id="txt[X]"
    clips[c].setText($('#txt'+c).val());
    // Al terminar de copiar, ejecutar la función "cplt" (más abajo)
    clips[c].addEventListener('onComplete', cplt);
    // Si no está oculto, "pegar" el Flash al elemento actual
    // (es decir, colocarlo justo encima ocupando toda su extensión)
    if (!$(this).hasClass('hidebtn')) clips[c].glue(this);
}).bind('toggle',function(e){
    // Comportamiento cuando se cambie de un elemento a otro
    ...
});

// Al terminar, selecciona el texto copiado
// y muestra un mensaje de confirmación durante unos segundos
var cplt = function(client, text)
{
    c = client.domElement.id.substr(7);
    // Selecciona el contenido del "textarea"
    // (si usamos otro elemento, habrá que modificar esta línea)
    $('#txt'+c).get(0).select();
    $('#copyfdbk'+c).html('&nbsp;<em>Copied</em>').show();
    setTimeout("$('#copyfdbk"+c+"').fadeOut()", 2500);
}

En cuanto al HTML, destacar sólo un par de detalles:

<!-- El contenedor del texto es un textarea con el id adecuado -->
<textarea rows="5" id="txt0" wrap="off"...
<!-- El disparador es un botón con el id y la clase indicados -->
<input id="copybtn0" type="button" value="Copy Code" class="copybtn lgbtn" />
<!-- El elemento donde se mostrará el "feedback" -->
<span id="copyfdbk0"></span>

Lo único que falta es ejecutar el código Javascript al terminar de cargar la página.

Más información sobre Zero Clipboard en Google Code.

Seleccionar el contenido de un span

Como comentaba más arriba, si queremos seleccionar el texto de un elemento que no sea un textarea tendremos que modificar la llamada:

// $('#txt'+c).get(0).select();
selectElement($('#text_to_copy_'+c).get(0))

// Siendo la función:
function selectElement (element)
{
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNodeContents(element);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

Os dejo un enlace a la fuente original con su correspondiente explicación.

¿Y si el usuario no tiene instalado el plugin de Flash?

Por último, si no queremos confiar el funcionamiento del script en la carga del Flash podemos hacer una pequeña modificación:

• Retomamos la función Javascript que copia un texto al portapapeles. Llamémosla “copyToClipboard”.
• En el bucle que recorre los disparadores, le asignamos a cada uno de ellos un gestor del evento “click” que llame a “copyToClipboard”.
• Hacemos un cambio en el método “glue” de la clase “ZeroClipboard.Client” para que coloque el Flash fuera de lugar:

// style.left = '' + box.left + 'px';
style.left = '0px';
// style.top = '' + box.top + 'px';
style.top = '0px';

• Y añadimos otro gestor de eventos al objeto cliente, para comprobar que se carga correctamente:

clips[c].addEventListener('onLoad', loaded);

// Colocar en su sitio si todo va bien
var loaded = function(client) {
    c = client.domElement.id.substr(12);
    clips[c].reposition();
}

style.top = '' + box.top + 'px';