Andrés SmerkinDesarrollo Web » Andrés Smerkin

Un Plugin de Foursquare para CakePHP

Andrés — Sat, 28 May 2011 04:10:34 +0000

CakePHP 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

Andrés — Fri, 06 May 2011 03:19:11 +0000

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

...

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

Andrés — Thu, 10 Feb 2011 02:07:20 +0000

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 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 queda de la siguiente forma:

^?Ver código HTML

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/

Hardboiled Web Design – Por Andy Clarke

Andrés — Tue, 01 Feb 2011 01:50:50 +0000

Si sos desarrollador o diseñador web, este es un libro que no podés dejar de leer. Hardboiled Web Design explica como traer las últimas tecnologías de la W3c (HTML5 y CSS3) a tus sitios web sin tener que preocuparte por los navegadores anteriores.

Generalmente se aplica el concepto de “lograr que se vea igual en todos los navegadores”. Por otro lado, Andy Clarke presenta la idea de “dar más beneficios a aquella gente que tenga navegadores que puedan soportarlos”. Dichos beneficios se refieren tanto al aspecto visual como a la usabilidad y a la accesibilidad. Esto significa que aquellas personas que utilicen navegadores como Google Chrome, Opera 11, Safari 5, Firefox 3.+ o IE9 podrán gozar de las últimas tecnologías en lo que se refiere al desarrollo de interfaces web, mientras que los que utilicen navegadores más antiguos podrán seguir disfrutando de un sitio funcional, que muestre correctamente (pero no igual) el contenido.

Esto permite que apliquemos todo el poder de las nuevas tecnologías a partir de este momento, que es cuando son novedad, en vez de esperar a que se estandaricen, lo que puede suceder dentro de varios años.

El autor ha explicado perfectamente la utilización de HTML5 y CSS3, mediante ejemplos prácticos de fácil entendimiento. Además, nos provee de enlaces a herramientas de código abierto que nos facilitan la aplicación de los últimos borradores de la W3C y aún así mantener sitios usables y accesibles para navegadores que no los soportan.

El libro está en inglés y no se si pueda haber una traducción al español, pero si tenés la posibilidad, te recomiendo que lo leas de principio a fin.

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

Andrés — Tue, 10 Aug 2010 15:00:55 +0000

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

¿Por qué utilizar estándares en el desarrollo de sitios y aplicaciones web?

Andrés — Sat, 07 Aug 2010 21:48:10 +0000

A pesar de que los años pasan y la tecnología avanza a pasos agigantados, todavía se ven muchos sitios web y aplicaciones que desarrollan sus interfaces para que “se vean bonitas” en vez de pensar en cosas como la usabilidad y la accesibilidad.

Un desarrollo de una aplicación no solo debe hacerse de forma que cumpla con los requisitos solicitados, sino que además debe brindar una experiencia agradable al usuario. Una aplicación puede triunfar o fracasar totalmente gracias a esto.

Para el caso particular de las aplicaciones con interfaces web, podemos dividirlas en dos partes muy marcadas: el lado del servidor, donde se realiza la programación dura (en lenguajes como PHP, Java, Python, etc) y el lado del cliente, en donde se utilizan (X)HTML, CSS Javascript para brindar los contenidos a los usuarios. Este último lado es el que se interpreta en los navegadores web y se muestra a los usuarios. También es este último lado el que parsean los motores de búsqueda para indexar nuevos contenidos y mostrarlos en los resultados de las búsquedas. Aquí es donde entran en juego los estándares web de la W3C.

Podemos desarrollar páginas web con tablas y se van a ver realmente bien, o podemos llenar de código sucio una página que los visitantes en su mayoría no se van a dar cuenta. Pero no solo debemos desarrollar para obtener algo bonito, sino además algo funcional, accesible, fácil de mantener, rápido de cargar y profesional.

Estructura

Los estándares web nos permiten crear documentos con una estructura válida, coherente y significativa. No es lo mismo crear un texto en negrita y grande, que un encabezado h1, aunque sean iguales visualmente. Un ser humano puede interpretarlos de la misma manera, pero no así los motores de búsqueda o los lectores de pantalla que utilizan los no videntes. Además, al estructurar los documentos correctamente, estamos creando un modelado de objetos de documento (DOM) correcto, que luego nos permitirá mejorar la presentación mediante hojas de estilo y el comportamiento con Javascript.

Crear buenas estructuras genera un marcado mucho más limpio que luego facilita la implementación de lenguajes de servidor, generando un código final mucho más prolijo y liviano del que podría generarse con un marcado sucio (por ejemplo, el uso de tablas para crear layouts).

Compatiblidad

Los navegadores web son creados en base a los estándares web. Estos le brindan al navegador un conjunto de etiquetas conocidas y la forma de que estas son utilizadas. Si utilizamos estándares logramos que los navegadores digieran correctamente los documentos generados y muestren lo que realmente queremos que muestren. La falta de uso de estándares hace que los navegadores interpreten los documentos web de modo “no estricto“, generando en la mayoría de los casos comportamientos indeseados.

Además, los motores de búsqueda se encuentran preparados para digerir correctamente código bien marcado, por lo que un buen uso de estándares permite una mejor recepción del contenido por parte de los buscadores y esto genera una mejor interpretación. En definitiva, esto hace que Google o Yahoo interpreten mejor nuestro sitio y luego obtendremos mejor posicionamiento en las búsquedas y más visitas.

Documentos más livianos

El buen uso de estándares fomenta en mayor medida la reutilización y el código limpio y simple. Esto permite obtener documentos más livianos, lo cual singifica que consumirán menos ancho de banda y transferencia desde el servidor. Si pagamos algún servicio de alojamiento, estos generalmente nos limitan estos recursos, por lo cual un buen uso de estándares sería muy beneficioso para nosotros.

Un documento más liviano, es más facil de descargar y se carga más rápido en los navegadores web. Este es un punto muy importante a favor del uso de estándares para el desarrollo y diseño web.

Accesibilidad

La web hoy en día es un medio de comunicación de libre acceso y todos deberíamos ser capaces de obtener la información que brinda. Si utilizamos estándares, estamos permitiendo que personas con alguna incapacidad puedan recibir el contenido que brindamos de manera aceptable. Esto significa que el software para dichas personas puede interpretar correctamente los documentos web que desarrollamos.

En algunos paises, la falta de accesibilidad en un sitio web es considerada como un caso de discriminación y es totalmente punible.

Facilidad de mantenimiento

Hemos dicho que al usar estándares se crea un código más limpio. Esto permite una mayor facilidad para localizar problemas y repararlos, así como extender nuestras aplicaciones con pequeñas modificaciones en puntos localizados. Un buen uso de estándares conjuntamente con buenas prácticas puede permitirnos mantener grandes aplicaciones con unos pocos retoques.

Visión de futuro

Los estándares nos aseguran que nuestros desarrollos actuales seguirán funcionando correctamente en un futuro. Esto se dá gracias a que los navegadores se verán obligados en algún punto a interpretar correctamente las marcas generadas por los estándares y van a tener que responder correctamente ante estas.

Profesionalismo

Personalmente, lo primero que hago para convencerme si un desarrollo es bueno o malo es dar click derecho de mouse en el navegador y mirar el código fuente de la página que estoy visualizando. De esta forma puedo reconocer fácilmente un buen o un mal diseño.

Cuando desarrollamos para la web, tenemos que hacerlo teniendo en cuenta nuestro prestigio y calidad como profesionales. Si hacemos que las cosas simplemente se vean bonitas no vamos a llegar muy lejos. El uso de estándares nos da prestigio porque al utilizarlos estamos generando código con una máxima calidad y de nivel internacional.

Un desarrollador o diseñador web que utiliza estándares da la impresión de que está al tanto de las últimas tendencias y conoce sobre las últimas tecnologías en uso. Es importante dar esta imágen para conseguir mejores trabajos.

Además, al usar estándares web combinados con buenas prácticas de usabilidad y accesibilidad podemos hacer quedar realmente bien a nuestros clientes, permitiendoles brindar aplicaciones sencillas de usar y poderosas. Como dije anteriormente: una aplicación puede triunfar o fracasar por sus interfaces (en este caso son via web).

Firefox potenciado para desarrollo web

Andrés — Thu, 05 Aug 2010 01:51:28 +0000

Como todos sabemos, Mozilla Firefox incorpora la excelente característica de poder ser extendido mediante complementos. Esto hace que el navegador pueda ser personalizado y adaptado a las necesidades de diferentes usuarios. En este caso quiero comentar algunos complementos que hacen que el zorrito de fuego sea una excelente herramienta para desarrolladores web.

1 – Firebug

Herramienta imprescindible para cualquier desarrollador web que esté trabajando del lado del cliente. Esta fantástica herramienta nos permite modificar el código fuente de la página renderizada, modificando estructura, estilos y comportamientos de la misma (obviamente estas modificaciones no son permanentes). Además, nos permite seleccionar los distintos elementos del DOM y de esta forma ver por qué reglas de CSS se encuentran afectados.

Una excelente funcionalidad que también nos provee Firebug es la posibilidad de medir el tiempo de carga de una página web y poder analizar los tiempos de carga de los diferentes elementos, como el código html, las hojas de estilo, las imágenes y los scripts. Una utilidad realmente necesaria si buscamos optimizar nuestro sitio.

https://addons.mozilla.org/es-ES/firefox/addon/1843/

2 – FirePHP

Un complemento que trabaja conjuntamente con Firebug (se necesita de este instalado) que nos permite hacer debugging de aplicaciones web construidas con PHP como lenguaje de servidor. Simplemente añadiendo una clase a nuestra programación y haciendo una llamada a un método podemos utilizar esta completa herramienta para analizar valores de variables y todas aquellas cosas que hagan a la depuración de código. Este complemento resulta muy útil cuando no se cuenta con algún sistema de depuración como el provisto por Netbeans u otros.

https://addons.mozilla.org/es-ES/firefox/addon/6149/

3 – Web Developer

Imprescindible herramienta que nos permite modificar y analizar nuestro sitio. Esta herramienta permite hacer validaciones de las páginas contra los estándares de la W3C, ver el sitio en diferentes resoluciones, ver el sitio con o sin CSS o javascript, etc. La utilidad nos permite analizar comportamientos bajo diferentes situaciones. Herramienta que no puede faltar.

https://addons.mozilla.org/es-ES/firefox/addon/60/

4 – Measure It

Una simple utilidad que nos permite medir el tamaño en píxeles de cualquier elemento de una página web. Es una simple herramienta que nos genera una capa sobre el sitio que estamos visitando y en base a esta nos permite establecer un recuadro sobre un elemento que posteriormente nos indicará las dimensiones de este. No es escencial pero si muy cómodo.

https://addons.mozilla.org/es-ES/firefox/addon/539/

5 – Google Analytics?

Si trabajamos con el popular sistema de métricas web de Google, esta herramienta puede sernos muy útil. Simplemente nos indica con un ícono en la barra de estado si la página que estamos visitando tiene el Google Analytics Tracking Code instalado. Ideal para realizar una correcta implementación de las estadísticas.

https://addons.mozilla.org/es-ES/firefox/addon/5631/

6 – No Do Follow

Esta pequeña utilidad nos permite conocer si los enlaces de una página contienen o no el atributo nofollow. Una buena idea si estamos linkeando a sitios cuyo contenido no podemos controlar o no podemos hacernos responsables. Además es útil si deseamos evitar la fuga de pagerank.

https://addons.mozilla.org/es-ES/firefox/addon/5687/

Conclusión

Con estas herramientas podemos hacer que nuestro navegador favorito se convierta en un verdadero centro de depuración, optimización y análisis de nuestro sitio o aplicación web. Estas son las cosas que hacen de Firefox el monstruo que es hoy en día.

Parseando feeds RSS con PHP y Simplepie

Andrés — Wed, 04 Aug 2010 02:01:50 +0000

Por cuestiones de trabajo me tuve que embarcar en la misión de obtener información de cientos de feeds RSS en un proyecto desarrollado con PHP (más precisamente con el framework CakePHP). Evidentemente parsear todo un feed RSS o atom no es tarea facil y requiere de varias horas/días de programación con expresiones regulares y algunas que otras mañas para solucionarlo.

Afortunadamente existe Simplepie, un elegante framework orientado a objetos que nos ayuda a obtener información de los feeds RSS y atom que necesitemos, con una api muy sencilla de utilizar y resultados asombrosos. En el sitio web oficial pueden acceder a la wiki que contiene muchisima documentación.

El único problema que me surgió después de esto es que desgraciadamente algunos feeds están mal hechos y el framework no parsea bien los resultados, pero con cualquier feed de plataformas populares no deberían existir problemas.

Una excelente opción para ahorrar mucho tiempo y obtener soluciones elegantes.

Introduciendome en las métricas web

Andrés — Mon, 26 Jul 2010 01:44:10 +0000

Mucho código, mucha optimización. XHTML, CSS, estandares web, buenas prácticas, patrones, etc. Todas estas cosas aplicadas correctamente resultan en algo maravilloso, pero uno puede desarrollar una aplicación web espectacular y quedarse sentado esperando meses a que los usuarios de la red la utilicen. Podemos publicitarla por todos lados pero aún así necesitamos feedback para saber como lo estamos haciendo y en donde tenemos que corregir.

Existen muchas herramientas para de alguna forma poder ver que hacen los visitantes con nuestra web, pero debido a cuestiones laborales es que me tuve que acercar a Google Analytics. Debo decir que realmente me ha sorprendido porque además de ser gratuita (a no ser que nuestro sitio sea un pequeño monstruito) brinda muchisimas perspectivas para poder analizar nuestro sitio.

El tema es que es tan grande que no resulta tan intuitiva para usarla. Podemos toquetear un poco y llegar a conseguir algo de información útil al respecto, pero la herramienta brinda demasiada información como para perdersela toda por no ir a la ayuda que brinda. Google pone a nuestra disposición un conjunto de presentaciones (en inglés) que nos enseñan todos y cada uno de los rincones de Google Analytics. Dicho material se encuentra en la Convension University de Google. Además proveen de certificaciones oficiales para probar el conocimiento adquirido (por un precio de 50 u$s al momento de escribir este artículo).

Personalmente, debo decir que a partir de esto he encontrado una rama del desarrollo web que me ha interesado mucho y que realmente me gusta la idea de perfeccionarme en esto, así que no va a ser nada raro que encuentren más artículos sobre métricas web y SEO en este blog.

Para los que tengan un interés adicional en sumergirse un poco en este asunto, además del enlace a la documentación provista por Google pueden ir aquí a buscar un librito en pdf.

PHP – Separando las vistas de la lógica con Savant 3

Andrés — Tue, 06 Jul 2010 21:51:00 +0000

Recientemente he estado haciendo reparaciones a un sitio web heredado de otro desarrollador. La empresa parece haberse enfocado principalmente en el diseño, pero el desarrollo de la lógica en PHP es simplemente desastrozo porque acoplaron demasiado la codificación del negocio con las vistas, lo cual complica mucho la edición del sitio (sumado a que todo el layout está desarrollado con tablas, pero este ya es otro tema).

Desgraciadamente no tengo todo el tiempo que quisiera como para pasar todo el desarrollo a alguna solución orientada a objetos utilizando algún framework como CakePHP, pero buscando un poco en internet encontré una elegante solución para separar la vista de la lógica: Savant 3.

Este framework tiene por objetivo separar las vistas de la lógica, mediante el uso de plantillas (templates). Lo bueno es que es muy simple y no se necesita aprender marcas especiales como Smarty por ejemplo , sino que las etiquetas son prácticamente “echoes” de PHP, lo que disminuye la curva de aprendizaje a prácticamente 0.

No es una solución “a fondo” pero es el principio para algo mejor.