Category Archives: Herramientas y Recursos

Un Plugin de Foursquare para CakePHP

Posted by Andrés on 05/28/2011 None comments

Foursquare LogoCakePHP es un framework enorme con un montón de cosas fantásticas, y como sabrás, la mejor manera de aprender los conceptos de la herramienta es sumergirse en ella.

Recientemente he estado aprendiendo sobre las APIs de las redes sociales y como manejan los sistemas de autenticación de usuarios. La mayoría de ellas utiliza el nuevo Estandar OAuth, el cual permite a los sitios publicar a través de sus APIs información de los usuarios con un alto nivel de seguridad y protección.

Por otro lado, he estado jugando un poco con los DataSources de CakePHP para obtener la información desde las APIs y hacer un montón de cosas divertidas. Es increíble lo que uno puede aprender cuando enfrenta un desafío en el cual no se conoce nada sobre una tecnología y debe investigarse desde el principio.

Si juntamos las APIs y los datasources, el desafío es crear un plugin que permita conectar a alguna red social e interactuar con ella. La red social elegida es Foursquare, debido a que cumple con todos los requisitos y no pude encontrar ningún buen plugin para ella (Hay algunos datasources que interactuan con la vieja API).

Como último punto, también estoy aprendiendo a usar GIT, así que alojé el plugin en Github. Tal vez quieras descargarlo y probarlo. Cualquier tipo de ayuda es bienvenida.

URL del Plugin: https://github.com/asmerkin/CakePHP-Foursquare-Plugin

Rebinding con JQuery – Arreglando nuestro javascript luego de llamadas en AJAX

Posted by Andrés on 05/06/2011 3 comments

El Problema

A veces puede surgirnos el problema de que luego de una llamada a AJAX con JQuery, mediante funciones como $.ajax o $.load, algunos de nuestros eventos dejen de funcionar. También puede suceder que a veces mediante Ajax o javascript generemos elementos del DOM a los que queremos asignarles un evento en particular. Pués posiblemente los eventos para estos elementos nuevos no funcionen.

¿Por qué ocurre esto?

Cuando realizamos la llamada a $(‘document’).ready(fn) esta se encarga de inicializar todos nuestros binds para que estén disponibles en nuestras páginas. Entiendase un bind como la funcion .bind(‘event’, fn), la cual tiene shortcuts como .click, .mouseover, etc.

Cuando realizamos una llamada a AJAX, nuestro DOM sufre modificaciones, haciendo que los binds anteriores queden obsoletos. Lo que tenemos que hacer es volver a ejecutar esos binds de los elementos para que vuelvan a estar disponibles después de la llamada AJAX.

Para ser un poco más claros, cuando JQuery carga su método ready(), a los elementos del DOM seleccionados les aplica algo similar a lo que muestra el siguiente ejemplo:

?Ver código HTML
<li onmouseenter="function()..." onmouseleave="...">...</li>

Cuando ocurren las llamadas AJAX esas modificaciones se pierden. Lo que nosotros tenemos que hacer es lograr que JQuery vuelva a cargar los eventos asignados a los elementos del DOM.

Solución

Vamos a ver un pequeño segmento de código:

?Ver código JAVASCRIPT
$('document').ready(function() {
    iniciarBinds();
 
    $.ajax({
          url: "test.html",
          context: document.body,
          success: function(){
               $(this).addClass("done");
               iniciarBinds();
          }
    });
 
    function iniciarBinds() {
        $('#target').click(function() {
               alert('Handler for .click() called.');
        });
 
    }
 
});

En el ejemplo anterior vemos como realizar el rebind mencionado. En la función iniciarBinds() colocamos todos aquellos binds que puedan llegar a sufrir debido a la llamada AJAX. Luego, al principio de la llamada a $(document).ready() llamamos a la funcion iniciarBinds(). El rebinding surge después de la llamada en AJAX, en el caso de “success”. Como podemos ver, nuevamente estamos llamando a la funcion iniciarBinds(). Si no hicieramos esto, los binds creados se perderían a causa de modificaciones de la estructura del DOM, pero con el rebinding los eventos se refrescan para todos los elementos, incluyendo las modificaciones.

Modernizr y Selectivizr – Dos librerías Javascript para potenciar nuestros desarrollos web

Posted by Andrés on 02/09/2011 None comments

Buscando algunas herramientas Javascript y leyendo algunos libros, como Hardboiled Web Design, de Andy Clarke, me he cruzado con estas dos excelentes herramientas para poder potenciar nuestros diseños y desarrollos web y utilizar las últimas tecnologías disponibles, pudiendo controlar mejor el renderizado de nuestros sitios web en navegadores que no soporten dichas tecnologías.

Modernizr

Modernizr es una librería Javascript que nos permite tener un mayor control sobre la aplicación de CSS3 y HTML5. Esta librería detecta las capacidades el navegador web del usuario y en base a eso añade clases al tag <html> de nuestros documentos web. De esta forma, podemos referenciar cualquier elemento interno del documento y alterarlo mediante estilos para que se muestre correctamente en navegadores que no tengan soporte para dichas nuevas tecnologías

Por ejemplo, al momento de escribir este artículo, el navegador que estoy utilizando es Firefox 3.6.13. Gracias a Modernizr, la etiqueta <html> queda de la siguiente forma:

?Ver código HTML
 
<html lang="en" dir="ltr" id="modernizr-com" class=" js flexbox canvas canvastext 
no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb 
hashchange no-history draganddrop no-websockets rgba hsla multiplebgs 
backgroundsize borderimage borderradius boxshadow textshadow opacity 
no-cssanimations csscolumns cssgradients no-cssreflections csstransforms 
no-csstransforms3d no-csstransitions fontface video audio localstorage 
sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths">

De esta forma, podremos referenciar mediante estilos CSS, cualquier elemento del documento que no soporte alguna tecnología específica. En mi caso particular, podemos ver que Firefox 3.6.13 soporta columnas CSS3 (csscolums), pero no soporta reflexiones (no-cssreflections).

Entonces, supongamos que diseñamos un sitio con gradientes CSS, pero queremos que para el caso en que el navegador no soporte gradientes CSS3 se muestre un color específico, podríamos utilizar el siguiente código:

?Ver código CSS
 
.no-cssgradients #elemento {
     background-color: color;
}

De esta forma, si el navegador no soporta gradientes CSS, Modernizr añadirá la clase .no-cssgradients al tag y el selector se validará, aplicando el color de fondo definido.

Sitio oficial: http://www.modernizr.org

Selectivizr

Algunos navegadores, como Internet Explorer, en sus versiones 6 – 8, no tienen un soporte completo de selectores CSS, pero gracias a esta librería podremos aplicar dichos selectores sin problemas.

De esta forma podemos dar estilos a nuestros sitios web aprovechando toda la potencia que nos brindan todos los selectores y pseudoselectores disponibles.

Selectivizr aprovecha los frameworks de Javascript disponibles, como Jquery, Mootools o Prototype para brindar el soporte extendido de selectores. Dependiendo del framework del que dispongamos será la cantidad de selectores admitidos por Selectivizr. En su sitio web podemos encontrar una tabla comparativa al respecto.

Sitio oficial: http://selectivizr.com/

Assembla y PBworks – Recursos gratuitos y de calidad para proyectos de desarrollo en equipo.

Posted by Andrés on 08/10/2010 3 comments

Cuando nos embarcamos en un proyecto de código abierto, existen muchas empresas que brindan soluciones de manera gratuita (como Google Code), pero cuando deseamos desarrollar algún pequeño proyecto privado la calidad de las soluciones sin costo disminuye considerablemente.

Después de una búsqueda sobre recursos útiles para desarrollo de proyectos privados me encontré con dos soluciones que realmente me parecieron interesantes y muy cómodas. Hablo de un servicio para creación de repositorios de control de versiones y un servicio de  wikis muy sencillas de editar y muy poderosas.

Assembla.com

Este sitio nos brinda repositorios gratuitos de SVN y GIT para que utilicemos en nuestros proyectos. La capacidad de los mismos en su versión no paga es de 2gb de espacio en disco, proyectos y usuarios ilimitados. Es una excelentisima opción de calidad para ser un servicio no pago. Obviamente existen restricciones, como la imposibilidad de utilizar un sistema de tickets y algunas otras herramientas, pero podemos suplir dichas falencias gracias a otros servicios.

URL: http://www.assembla.com

PBworks


Este servicio nos provee de Wikis para nuestros proyectos. Las wikis gratuitas tienen licencia de uso no comercial y cuentan con algunas restricciones de personalización y de exportación de contenidos, pero si lo que buscamos es un conjunto de herramientas para resolver problemas de índole privada esto no debería ser impedimento de nada. Además nuestra wiki se encuentra alojada en los servidores de PBWorks, pudiendo ser esta accedida de forma pública o privada desde cualquier lugar.

La interfaz de edición de las páginas de la wiki es excelente. Brinda un editor de textos WYSIWYG con la posibilidad de usar atajos del teclado para casi todo. Esto es un punto muy a favor, sobre todo si hay que introducir a personas no habituadas a la edición de wikis.

Las wikis gratuitas soportan múltiples usuarios y diferentes permisos para cada uno de ellos. Lo único que necesita un usuario para utilizar una wiki es tener una cuenta en el sitio.

URL: http://pbworks.com