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?

Tras intentar una aventura en compañía durante poco más de un año, vuelvo a dar un giro a mi vida profesional y me lanzo en solitario.

Loneliness de Bert K

Hay decisiones que son difíciles de tomar. Sin embargo, una vez que las tienes claras lo mejor es dar el paso lo antes posible. A nadie le apetece pasar por un divorcio (aunque sea profesional) pero más vale separarse antes de que haya “chiquillos” y el daño sea irreparable.

Nuevas ideas, nuevos proyectos, nuevas puertas que se abren. Seguiré con el desarrollo web, con los viajes, escribiendo en los blogs e intentando ser un emprendedor.

Quizás parezca que estoy dando vueltas en círculo o perdido en medio del bosque, pero sigo buscando mi camino.

X4VR2BEWVKKR

En los últimos meses se han sucedido las noticias y los lanzamientos de herramientas en torno a Google y la velocidad de carga de las páginas web. ¿Cuál es el verdadero objetivo del gigante de Internet?

Lo cierto es que últimamente Google está haciendo bastante hincapié en la optimización de los sitios web, ya sea a través de herramientas como el complemento para Firefox Page Speed o la ya comentada Speed Tracer, o bien mediante la publicación de artículos relacionados con el tema.

Matt  Cutts, ingeniero de Google, comentó en una entrevista que la velocidad de carga podría empezar a ser un factor de posicionamiento. A partir de esta especie de anuncio oficial, surgieron multitud de comentarios como este, este o este.

Como bien se apunta en alguno de ellos, detrás de este interés por mejorar la web y la experiencia del usuario seguramente hay algo más, como un ahorro sustancial en tiempos de procesamiento y, por lo tanto, recursos.

Y por supuesto, también suelen aprovechar el tirón para meter su cuña sobre la rapidez de Chrome a la hora de cargar las páginas. ¿Tiene algo que ver el buen rendimiento del navegador de Google? Quizás es parte de una estrategia conjunta para promocionar el uso de Google Chrome.

Foto de Telegraph.co.uk

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.

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';

El blog de marcis nace con la intención de recoger las novedades relativas a mi vida profesional, algunos consejos sobre tecnología, las últimas noticias relacionadas con Internet,…

Tras varios años en diversas empresas del sector, decidí dar el salto y empezar a trabajar por mi cuenta. Gracias a la experiencia acumulada en desarrollo web (principalmente en entorno LAMP), mis conocimientos sobre Internet y también mi afición por los viajes, emprendí esta nueva aventura.

Después de una parada para tomar aire, el 2009 empezó con el firme propósito de retomar viejas ideas y proyectos pendientes para hacerlos realidad. Pero no solo por cumplir un sueño sino también para hacer de ellos mi forma de vida.

Por supuesto, estoy abierto a colaboraciones profesionales y deseando escuchar tus comentarios y sugerencias. Si quieres ponerte en contacto conmigo, visita la página Acerca de.