From Javascript

AngularJS: Inicio Rápido

AngularJS es un framework para la creación de aplicaciones web en Javascript, es una excelente herramienta y en este articulo les hablare de como pueden comenzar a usarlo de una forma sencilla, realmente no soy un experto en AngularJS sin embargo voy a tratar de platicar acerca de mi experiencia y espero esto les pueda ayudar, por supuesto cualquier comentario es bienvenido .

Lo primero es comenzar, en este breve video de 5 minutos ustedes verán rápidamente un poco  de lo que se trata AngularJS:

Conceptos básicos.

Lo primero que tenemos que entender es que AngularJS trabaja muchísimo sobre HTML, extendiéndolo, y este es el primer punto clave a la hora de desarrollar con Angular:

AngularJS extiende HTML, lo mejora!!!

Normalmente esto seria una practica poco recomendada, sin embargo en este caso podemos hacerlo debido a que lo que vamos a hacer es precisamente extender HTML.

Read more

JQuery: Manejadores de eventos y callbacks en OOP

Dos cosas basicas al momento de programar con JQuery son el usar diversos manejadores de eventos (event handler) y llamar funciones en repuesta a algo, los llamados callback, muchos son los usos que tenemos para estas 2 cosas, desde controlar clicks hasta realizar acciones en respuesta a un llamado ajax, esto es algo muy comun en JQuery, sin embargo, cuando estamos programando con objetos, debemos tener en cuenta como funciona el contexto dentro de JQuery.

Por ejemplo aqui tenemos un manejador de eventos muy simple:

google.load("jquery", "1");

function OnLoad(){
$('#content').html('Click aqui');
$('#content').click(function() {
alert('Manejador del evento .click()');
});
}

google.setOnLoadCallback(OnLoad);

Muy bien, este ejemplo fue muy sencillo y funciona en caso de que queramos usar funciones para manejar eventos, ahora, si en lugar de funciones quisieramos usar metodos de un objeto, probablemente intentariamos usar algo como esto:

google.load("jquery", "1");

function OnLoad(){
$('#content').html('Hola mundo');
c = new Class1();
$('#content').click(c.hi);
}

Class1 = function(){
this.text = "Hola";
this.hi = function() {
alert(this.text);
};
}

google.setOnLoadCallback(OnLoad);

Desafortunadamente este codigo no dara el resultado esperado, simplemente al dar click arrojara un alert que dice “undefined” y no el valor “Hola” que esperabamos, esto sucede debido a que el manejador de evento esta ligado al metodo de la clase en si y no al metodo de la instancia que creamos para este proposito, es decir, al activar el manejador del evento, el contexto ya no es el esperado…

Afortunadamente JQuery 1.4 ya tiene una solucion para este problema y es el uso de la funcion jQuery.proxy (ó $.proxy) la cual nos permite corregir esta perdida de contexto, uno de los usos de esta funcion consiste en enviar en el primer parametro el metodo que queremos disparar y en el segundo el objeto que sera utilisado como “this” cuando el metodo manejador sea disparado.

Este ejemplo debe funcionar correctamente:

google.load("jquery", "1");

function OnLoad(){
$('#content').html('Hola mundo');
c = new Class1();
$('#content').click($.proxy(c.hi, c));
}

Class1 = function(){
this.text = "Hola";
this.hi = function() {
alert(this.text);
};
}

google.setOnLoadCallback(OnLoad);

Esto funciona tanto para manejadores de eventos, como para callbacks, los ejemplos que tenemos aqui pueden ser probados en Google Code Playground, espero sea de ayuda… saludos

EffectGames, plataforma Javascript para crear juegos

No queda duda de que Flash aun tiene su mercado, aunque ha ido bajando, y es cada vez más común ver sitios que sustituyen elementos Flash por Javascript, actualmente uno de los mercados que aun le pertenece a Flash es sin duda el de los juegos online, pocos juegos como Travian o Mafia Wars han logrado mantenerse en la red, sin embargo con la llegada de HTML5 y CSS3 además de proyectos como WebGL hacen que cada día Javascript esté más cerca de quitarle este reinado a Flash.

Un ejemplo de esto es EffectGames, una plataforma Javascript para crear juegos en línea, el resultado es muy interesante, juegos muy fluidos y con muy buen aspecto grafico, no cabe duda que aun falta desarrollo pero son grandes los avances que se están logrando, valdrá la pena seguir proyectos como este.

Via: GenBeta

Cross domain AJAX usando CSS

Una de las tecnicas mas importantes dentro del desarrollo web es AJAX, esta tecnica de programación es muy poderosa, sin embargo tiene ciertas restricciones por seguridad, la mas importante de ellas es la llamada “same-origin policy” la cual no permite generar llamados hacia otros dominios (Cross domain)…

Ahora me he encontrado con una libreria muy interesante la cual nos permite realizar llamados AJAX cross domain, pero usando CSS (Ellos lo llaman AJACSS), la razon de esto es que la politca “same-origin” solo afecta los llamados hechos con el XmlHttpRequest, por esta razon ellos nos presentan CSSHttpRequest.

Tiene como limitante el que solo se pueden realizar llamados tipo GET y que la respuesta vendra codificada dentro de CSS, sin embargo ellos ya nos brindan librerias para codificar en Python, Ruby y PHP y para descodificar en Javascript, aqui les dejo un ejemplo de como seria el uso y en la pagina de los autores pueden encontrar un ejemplos, saludos…

CSSHttpRequest.get(
        "http://www.nb.io/hacks/csshttprequest/hello-world/",
        function(response) { alert(response); }
    );

Respuesta:

#c0 { background: url(data:,Hola%20Mundo!); }
#c1 { background: url(data:,Este%20seria%20un%20ejemplo); }

Sitio oficial…

Sexy Lightbox: El Lightbox más sexy de la web

En esta ocación les traigo el Lightbox más sexy de la web, o al menos eso dicen en su pagina oficial, y la verdad aunque existen mucho scripts tipo lightbox este trae un estilo bastante fresco y ademas lo he venido siguiendo por algun tiempo y se nota que esta en desarrollo constante, cosa que es muy importante y habla muy bien del proyecto y de sus creadores.

15-10-2009-05-39-35-p_m_

Por supuesto es libre y acepta varios tipos de contenido, imagenes, videos, html…

Todos los flash que tengas en tu sitio deben tener la propiedad wmode en transparent u opaque para que el lightbox se muestre correctamente.

Ahora puedes usar SexyLightbox en español de la siguiente manera:

SexyLightbox = new SexyLightBox({color:'negro'});

Por cierto, cuentan con otros componentes bastante buenos tambien, asi como Sexy Tooltip o Sexy Forms, tambien podrian echarles un ojo…

Sitio oficial

jCart: Comercio electrónico en Ajax, PHP y jQuery

jCart es un pequeño script e-commerce hecho con PHP y jQuery.

Nos brinda la funcionalidad básica de una tienda en línea incluyendo el carrito de compras, utiliza jQuery para darle una funcionalidad más dinámica por medio de Ajax aunque es completamente funcional con javascript deshabilitado.

free-php-ajax-shop-cart

Muy sencillo de adaptar a tu sitio, un recurso bastante útil…

Sitio oficial…

Gritter: Notificaciones con JQuery estilo Growl

Gritter es un plugin de jQuery para crear notificaciones estilo Growl con facilidad, estas notificaciones pueden ser estilizadas con facilidad, es posible crear multiples notificaciones cada una de ellas con ID unico y un comportamiento independiente, puedes elegir si quieres que desaparescan las notificaciones tras unos segundos o hasta que el usuario las cierre manualmente,muy buen plugin para tenerlo en la mente…

jquery-growl-notifications

Sitio oficial…