From Desarrollo web

Vagrant: Inicio Rápido

El desarrollo web se realiza generalmente en lo que llamamos un entorno local, es decir en nuestro equipo instalamos todo lo necesario para trabajar y entre estas cosas montamos lo necesario para ejecutar las aplicaciones que estamos desarrollando, por ejemplo, apache, php, mysql, etc… dentro de este entorno local es que estamos desarrollando y probando nuestros proyectos. Esta forma de trabajar es común aunque tiene varios puntos en contra:

  • Las versiones de software son diferentes a las de nuestros servidores o incluso el sistema operativo puede ser diferente, y si no tienes cuidado es posible que uses alguna característica que no esta disponible en tus entornos de producción.
  • Cada vez que un nuevo integrante se une al equipo tendrá que instalar en su maquina todo lo que requiere, esto parecería que no es un problema, pero si lo piensas bien, este trabajo ya se realizo alguna vez y ahora se esta repitiendo.
  • En caso de que tengas algún problema con tu equipo, el formatear y volver a preparar una maquina te hará perder tiempo de nuevo.
  • Según tu Sistema Operativo es posible que algunas extensiones no estén disponibles de forma directa, y compilar manualmente las cosas normalmente es un contratiempo.
  • En caso de contribuir en varios proyectos desde la misma computadora, se pueden presentar conflictos al tener la necesidad de ejecutar aplicaciones que tienen dependencias de un mismo recurso, pero con diferentes versiones.

Pero no se preocupen, Vagrant viene al rescate, Vagrant es un proyecto que te permite levantar maquinas virtuales e instalar todo lo que necesitas para ejecutar tus aplicaciones web de una forma relativamente sencilla (este proceso normalmente se conoce como provisionamiento y así lo usaremos de aquí en adelante). Read more

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

Usar un “Ping” para actualizar tu Sitemap en Google, Yahoo y Bing

Los sitemaps te ayudan a informar a los motores de busqueda cuales son las paginas que deben rastrear en tu sitio web, los sitemaps mejoran la manera en la que los motores de busqueda indexan un sitio web al dar informaciòn explicita acerca de un sitio web, por ejemplo, si existen url’s nuevas o si algunas han sido actualizadas.

Sabemos que no hay forma de garantizar si un sitio web sera indexado, o en que tiempo sera indexado, sin embargo el uso de sitemaps incrementa la probabilidad de ser indexado y tambien la velocidad de indexaciòn de un sitio web.

Cuando publicamos contenido nuevo en nustro sitio web o blog, seria una excelente idea poder avisar a los motores de busqueda lo mas pronto posible que nuestro sitio web ha sido actualizado y les tengo una excelente noticia, esto es posible mediante un metodo llamado “ping” el cual esta implementado en la mayoria de los motores de busqueda.

En este post nos enfocaremos en los 3 motores de busqueda principales y como realizar un ping de sitemaps a ellos, en los 3 casos es posible simplemente escribir la url en un navegador y al dar enter el sitemap sera enviado, en caso de que tengas control de tu aplicacion web podrias automatizar esto con algun curl o algo asi, las url de pings son las siguientes:

Bing:

http://www.bing.com/webmaster/ping.aspx?siteMap=[your sitemap web address].
Ejemplo para este sitio web:
http://www.bing.com/webmaster/ping.aspx?siteMap=http://blog.hectorbenitez.com/sitemap.xml

Google

http://www.google.com/webmasters/sitemaps/ping?sitemap=http://www.example.com/sitemap-file.xml
Ejemplo para este sitio web:
http://www.google.com/webmasters/sitemaps/ping?sitemap=http://blog.hectorbenitez.com/sitemap.xml

Yahoo

http://search.yahooapis.com/SiteExplorerService/V1/updateNotification?appid=YahooDemo&url=http://www.domain.com/sitemap.xml
Ejemplo para este sitio web:
http://search.yahooapis.com/SiteExplorerService/V1/updateNotification?appid=YahooDemo&url=http://blog.hectorbenitez.com/sitemap.xml

En todos los casos, no es estrictamente necesario reenviar los sitemaps cada vez que cambie tu sitio web ya que los buscadores actualizan automaticamente los sitemaps, sin embargo, es una buena recomendacion para tratar de que tus paginas sean indexadas mas rapidamente.

En WordPress podemos automatizar el envio de los sitemaps usando los servicios de actualizacion agregando las url en la seccion Ajustes->Escritura->Servicios de Actualizacion, existen otros muchos servicios a los que puedes hacer ping para informar que tu sitio web a sido actualizado como pingomatic, feedburner o technorati, pero esto sera material para otro post, Saludos…

Old password authentication with MySQL

MySQL a partir de su version 4.1 cambio la manera en la que almacena sus contraseñas, esto lo hizo para mejorar la seguridad, sin embargo, para mantener compatibilidad aun es posible manejar contraseñas con el viejo estilo, esto en muchos casos es transparente para los usuarios y los desarrolladores sin embargo, con el paso del tiempo algunos clientes evolucionan y dejan de permitir el manejo de cuentas con “old passwords” , por ejemplo, si tu trabajas con PHP 5.3+ MYSQLND -enabled PDO MySQL Driver, recibiras un error que dice:
mysqlnd cannot connect to MySQL 4.1+ using the old insecure authentication.

SQLSTATE[HY000] [2000] mysqlnd cannot connect to MySQL 4.1+ using the old insecure authentication. Please use an administration tool to reset your password with the command SET PASSWORD = PASSWORD(‘your_existing_password’). This will store a new, and more secure, hash value in mysql.user. If this user is used in other scripts executed by PHP 5.2 or earlier you might need to remove the old-passwords flag from your my.cnf file

Ademas de algunos warnings mas, segun el mensaje lo unico que tenemos que hacer es cambiar el password del usuario usando la funcion PASSWORD, o en caso de que uses phpMyAdmin dando a la contraseña compatibilidad con MySQL 4.1+, que es una opción al momento de cambiar una contraseña.

En caso de que esto no funcione es posible que tengas algun otro problema con tu servidor MySQL, algunos puntos que debes checar son los siguientes:

  • En la tabla mysql.user el campo password debe tener una longitud de 41, en caso de que tenga una longitud de 16 debes cambiarla, esto pasa generalmente en servidores que actualizaron desde una version anterior a 4.1.
  • Existe una variable de sistema llamada old_passwords que cambia el comportamiento de tu servidor y lo obligaria a siempre generar old passwords, existen 2 formas de comprobar si esta variable esta activa, la primera seria revisar las variables de MySQL (por ejemplo phpMyAdmin tiene un link a Variables en la pagina principal) o podrias ejecutar esto:
SELECT PASSWORD("Algo")

El resultado esperado debe ser una cadena de 41 caracteres de largo que comienza con un *, en caso de que te regrese una cadena de 16 caracteres de longitud quiere decir que old_passwords esta activa, ahora, para solucionar esto existen 3 posibles acciones, quitar del comando con el que se inicia MySQL el parametro –old-passwords, poner en OFF la variable old_passwords de tu archivo de configuracion o usar el comando SET GLOBAL para poner en FALSE la variable de sistema.

Mas informacion en el sitio de MySQL

Algunos reportes en el sitio de PHP

Saludos…

NETTUTS.com: Una introducción a Patrones de Diseño

En NETTUTS.com han posteado un nuevo tutorial que les dara una introducción a uno de los conceptos avanzados mas importantes en el desarrollo de aplicaciones: Los patrones de diseño.

Design patterns are optimized, reusable solutions to the programming problems that we encounter every day. A design pattern is not a class or a library that we can simply plug into our system; it’s much more than that. It is a template that has to be implemented in the correct situation. It’s not language-specific either. A good design pattern should be implementable in most – if not all – languages, depending on the capabilities of the language.

Ellos dan una pequeña introducción a algunos de los patrones de diseño mas utilizados, por ejemplo strategy, adapter, factory, decorator y singleton, cada uno viene con un poco de codigo ejemplo y nos hablan un poco de ¿En que casos deberia usarlo?.