Como activé curl en ubuntu 9.10?

Ayer estaba actualizando una aplicación que hice hace un tiempo. La app está basada en php y necesita comunicarse con pay pal. Para lograr comunicación con pay pal uso curl, pero cuando quise correr la app en local me di cuenta que mi php no estaba usando curl. Para poder usar curl solo tuve que hacer dos cosas:

1)instalar curl para php. Para eso basta con correr la siguiente instrucción en terminal:

sudo apt-get install curl libcurl3 libcurl3-dev php5-curl

Tedarás cuenta que estamos instalando más que solo curl para php, pero está bien. Probablemente esos paquetes ya venían por default (como en muchas distribuciones de linux). No cheque antes de instalar.

Una vez tenemos curl, solo basta con recompilar php si lo compilaste manualmente. Solo baja la distribución que quieras compilar, puedes aprovechar para instalar una versión nueva si no has actualizado. Una vez estes listo para correr el ./configure, agrega la –with -curl a las opciones:

./configure –with-curl

Toma en cuenta que tienes que agregar todos los demás –with dependiendo de lo que quieras configurar en tu instalación. No explico mucho en este punto ya que si tienes que hacer esto quiere decir que ya has complilado php anteriormente y sabes de lo que hablo.

Por último, reincica apache o inicialo si no lo has hecho ya.

sudo /usr/local/apache2/bin/apachectl -k start

para iniciar o:

sudo /usr/local/apache2/bin/apachectl restart

Eso asumiendo que tu instalación de apache esta en /usr/local/

Espero que puedan seguir las instrucciones y poner a disponibilidad curl que puede ser muy útil.

Skype en Ubuntu 9.04

Ayer instale (por fin) skype en mi caja ubuntu. Todo estuvo super fácil, es cuestión de bajar el instalador, abrirlo y seguir instrucciones. Pero cuando quise usarlo me dí cuenta que no reconocía el micro (un logitec con conexión usb). Estuve dando vueltas al asunto por un buen rato. Sabia que el problema era que skype no estaba reconociendo el micro por que en las preferencias no me lo marcaba como una opción. Para no hacer largo el asunto, aqui lo que hice para solucionar el asunto:

Al parecer skype tiene problemas con pulseaudio, por lo que lo que tienes que hacer es simplemente remover el paquete. Para hacer eso basta con abrir el terminal y teclear lo siguiente:

killall pulseaudio
sudo aptitude remove pulseaudio

Lo que hacemos es primero detener todos los procesos de pulseaudio que se encuentren corriendo, después removemos el paquete.

Una vez hecho esto, vuelve a abrir skype, ve a las preferencias y luego a sound devices. Ahi selecciona tu mocro de la lista desplegable que dice Microphone.

Eso debe solucionar el problema.

UPDATE: 23/oct/2009

Después de desinstalar pulseaudio noté algo extraño. La máquina se saturaba después de un tiempo de uso viendo videos. Al parecer el no tener pulseaduio forza a la computadora a consumir más recursos de los que generalmente consume al procesar el audio. Eso lo noté mas de un par de veces. Llegaba a un punto en el que la computadora simplemente tomaba demasiado tiempo para hacer algo tan sencillo como cerrar una ventana. Para solucionar el problema instalé esound, y desde entonces no me ha dado problema. Si estás experimentando el mismo problema, prueba con lo siuiente:

en terminal escribe:

sudo aptitude install esound
sudo aptitude remove /etc/X11/Xsession.d/70pulseaudio

Eso debe solucionar el problema. De no ser así probablemente no tengas otra opción que volver a instalar pulseaduio. Si por el contrario encuentras otra solución, puedes compartirla en los comentarios.

Update Oct/31/09

Parece ser que con la nueva versión de ubuntu (9.10) ya no es necesario eliminar pulseaduio ni hacer ningún cambio.

DOM: intoducción

Aprovechando que todavía falta algunos días para que sea martes, el día que he escogido para liberar los artículos sobre ajax, y que nada me impide publicar algo que no sea ajax durante los demás días, me voy a tomar el tiempo para dar una breve introducción al DOM.

El DOM, o Document Object Model, no es más que una interfaz independiente o neutral al lenguaje y la plataforma que nos da la oportunidad de acceder y modificar documentos, específicamente aquellos que han sido tratados con algún lenguaje de enmarcado como lo es (X)HTML.

Este famoso DOM nos permite acceder de forma estructural el contenido de nuestros documentos de forma dinámica. Algunos tienen la idea que el DOM es exclusivo de HTML o de Javascript. La verdad no podría ser más diferente. El DOM no es exclusivo de HTML y mucho menos de Javascript. Si bien es cierto que por un lado los documentos HTML, todos, contienen un DOM, por el otro lado, los documentos Javascript no. De hecho, la única relación entre Javascript y el DOM es la que se mantiene mediante la API de DOM de Javascript. Esta API nos permite el acceso al DOM y se conforma de métodos como getElementById() y getElementsByTagName().

Es el DOM un leguaje de programación?
No. El DOM es simplemente un modelo, un maqueta de la estructura de nuestro documento; de ahí su nombre. El DOM se representa generalmente como un árbol genealógico, con el elemento HTML a la cabeza, ya que este elemento es el antecesor de todos. No hay otro elemento más arriba de HTML (esto hablando aquí exclusivamente de documentos HTML). Analicemos un ejemplo:

<html>
   <head>
      <!-- Contenido de head -->
   </head>
   <body>
      <!-- Contenido de body -->
   </body>
</html>

Como puedes ver en ese código, el elemento html es que contiene a todos los demás (head y body junto con sus elemento internos no mostrados aquí). A cada uno de estos elementos dentro del DOM se les conoce como nodos. Todos los nodos, excepto por html, son hijos de otro nodo. En nuestro ejemplo, los nodos head y bodoy son hijos de html.

Interactuando con el DOM.
Dependiendo del lenguaje que escojas, la forma de interactuar con el DOM puede variar. Nosotros escogeremos Javascript, ya que este blog es principalmente sobre Javascript. Como ya mencioné anteriormente, Javascript nos ofrece una API (Application Programing Interface) para el uso del DOM. Una API no es más que una serie de métodos que se hacen disponibles para poder interactuar con una aplicación. De hecho, dependiendo de con quien hables, puede ser que algunos no consideren lo métodos que ofrece Javascript para interactuar con el DOM como una API ya que el DOM no es una aplicación, sino una representación del documento. Sin embargo, yo, por comodidad, he decidido llamar a este conjunto de funciones API.

Esta API se conforma de métodos como los ya mencionados getElementById() y getElementsByTagName(). Curiosamente javascript no contiene un método getElementsByClassName(), lo cual es curioso considerando que las clases son una buena forma de agrupar elementos que en determinado momento nos gustaría poder manejar todos de una sola vez. Sin embargo, Javascript si nos ofrece otra serie de métodos como appendChild() y removeChild() que sirven para agregar y remover nodos respectivamente. No voy a entrar en detalles ni a listar todos los métodos para el manejo de DOM ofrecidos por Javascript ya que solo pretendo dar una breve introducción al DOM y no al API de Javascript para el uso del DOM. En su momento ya habrá tiempo para tratar ese tema.

Los tipos de Nodos
Ya mencioné que cada elemento en HTML es representado por un nodo en el DOM. Veamos ahora los distintos tipos de nodos que hay. Específicamente tenemos:
El nodo document que es la representación de todo el documento.
Nodos de elemento, que representan un elemento como puede ser <p></p>
Nodos de texto, que representan texto como puede ser “mi texto”
Nodos de atributo, que representan un atributo como title=”hola mundo”
Nodos de comentario, que representan un comentario <!– comentario –>

Es necesario entender los diferentes tipos de nodo ya que cada uno tiene sus peculiaridades. Algo en lo que muchos novatos caen, es pensar en elementos como entidades globales, es decir que en:

<p>Mi parrafo</p>

Muchos ven a “Mi parrafo” como el valor de <p></p>. La verdad no puede estar más lejos. “Mi parrafo” no es el valor de <p></p>, más bien es un nodo completamente distinto y hasta cierto punto “independiente”. En un articulo futuro estaré hablando más sobre el DOM y explicando con código estas leves confusiones. Como dije hace un momento, mi único objetivo por ahora es poder explicar lo que el DOM es.

Por último, voy a decir que el DOM es una de las mejores cosas que le pudo pasar al mundo de la web. A través de DOM es posible modificar dinámicamente y en tiempo real muchos aspectos de una página web. En un futuro me gustaría hablar sobre DOM scripting y sobre uso responsable, amigable y degradable del DOM, pero por ahora esto es el fin de esta breve introducción.

Ajax: Introducción

Ajax es una tecnología que muchos consideran relativamente nueva. Para mí, ajax ya no tiene nada de nuevo. Su época de fama parece haber pasado, y gracias a Dios su época de abuso también, no así su tiempo de uso. Ajax sigue representando un tremendo potencial, aun que desgraciadamente son pocos los que le han sabido sacar provecho, la mayoría solo lo han abusado y jugado con él, como quien abusa de cualquier juguete. Desgraciadamente, el tremendo poder que ajax representa, se ha salido del control en las manos de unos cuantos script kiddies que no han sabido usarlo propiamente.

En esta serie voy a tratar de enseñar, no solo ajax, sino su uso correcto en base a mi experiencia como desarrollador y sobre todo como usuario consiente del verdadero potencial que la web puede alcanzar con un arma tan poderosa como ajax en nuestra bolsa de herramientas.

Empecemos por definir lo que es ajax. Para poder comprender ajax y usarlo propiamente, primero hay que entender que ajax es solo una combinación de diferentes tecnologías existentes, todas ellas unidas por un solo objeto. Ese objeto se llama XMLHttpRequest. Fue introducido por Microsoft como componente de Active X, posteriormente fue adoptado por mozilla y en la actualidad se encuentra en desarrollo una especificación por parte de la W3C. Las diferentes tecnologías que se mantiene unidas por este objeto varían dependiendo el proyecto y las preferencias del desarrollador, pero comúnmente se usan solo dos: Javascript y (X)HTML. Sin embargo, en esta ensalada de tecnologías pueden entrar en juego algunos otros componentes como puede ser PHP, XML, texto plano etc.

Mucha gente confunde ajax con DOM scripting o con el antiguo DHTML. Estos son totalmente diferentes, y por ningún motivo deben confundirse ya que eso puede traer problemas al momento de tratar de separar uno del otro para poder crear una metodología de trabajo mucho más eficiente. Por ejemplo, un buen programador querrá mantener sus mecanismos relacionados con ajax aparte de los relacionados con DOM scripting de modo que los problemas que pueda presentar puedan ser divididos a su vez en problemas más pequeños y más fáciles de solucionar. Si el programador no sabe distinguir entre ajax y DOM scripting, lo más probable es que termine mezclando ambos procesos haciendo imposible dividir el problema de la forma más eficiente y, por ende, causando que el desarrollo sea más difícil. La pregunta es, entonces, como distinguir entre uno y otro?

Ajax tiene solo un objetivo. Su principal funcionalidad está muy bien definida y teóricamente debe ser completamente sencillo poder identificar en donde empieza y termina su área de trabajo. Ajax tiene como objetivo la comunicación con el servidor de forma asíncrona. Uno de los típicos abuso de ajax es usarlo para acarrear datos del servidor al navegador por el simple hecho de no querer recargar la página, entonces terminamos con sitios que recargan todo, menos el menú, cada vez que se hace un click. El trabajo de ajax no es simplemente acarrear datos de un lado a otro, sino poder interactuar con el servidor en tiempo de ejecución y delegar tareas que han de ser ejecutadas, esperar por la respuesta y luengo entonces traer la respuesta de regreso al cliente. Solo cuando logramos entender lo que esto significa, hemos logrado entender ajax.

Para evitar su abuso, hay que considerar cada una de las tecnologías que están en juego, sus limitaciones, su desventajas y su grado de inaccesibilidad. Así también hay que poner en la balanza los beneficios que su uso puede traer y los problemas que puede causar, pero sobre todo, hay que proveer siempre de una alternativa para aquellos que por una u otra razón han de navegar si ajax.

A lo largo de esta serie vamos a hablar de formas para resolver distintos problemas. Vamos a analizar diferentes situaciones en la que podemos usar ajax y sobre todo, vamos a desarrollar una metodología de trabajo que nos permita desarrollar pensando siempre en accesibilidad para todos. Esta ha sido solo la introducción, espero poder verlos y sobre todo leer sus comentarios a lo largo de esta serie.

Next time:
La siguiente vez empezaremos con el uso de ajax y veremos algunos ejemplos prácticos de su potencial.

Slide Show en Javascript

Actualización: ejemplo en funcionamiento.

Hace ya algunos días @vochomaster me sugirió explicar como hacer un slideshow y me puso como ejemplo uno hecho en flash. A el no le gusta flash, por lo que me pidió que explicara como hacerlo pero en Javascript.

Hace un rato terminé el slide show, aun que la verdad no me convence ya que he usado OLN (Object Literal Notation) para construir el objeto que le da vida al slideshow. @jseros me sugiere que use constructores en lugar de OLN lo cual es una idea genial, y que ya había probado. De hecho el primer prototipo que hice del slideshow estaba basado en constructores y una mezcla entre métodos privados, privilegiados y públicos, pero no me gusto el rumbo que estaba tomando ni la complejidad que estava agarrando. Además, la razón por la que usar constructores es una buena idea, es por que eso nos agrega un punto en reusabilidad, pero al final eh decidido que rehusabilidad no es algo que quiero lograr en este caso debido al consumo de recursos que el efecto genera.

El efecto usa “fuerza bruta” para funcionar y si se abusa puede terminar colgando el navegador. Por supuesto que esto puede mejorarse e implementar mejores métodos para animación en lugar de un simple (y flojo) temporizador, pero este efecto, junto con el de alertas tipo twitter son simplemente propuestas aventadas al aire para servir como inspiración o modelo base de otros proyectos, o simplemente como ejercicios para intermedios en el uso de Js.

Bueno, sin más este es el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>..::**SlideShow**::..</title>
 <script type="text/javascript">
 var ss = {
 body : null,
 trueStop: false,
 intervalo : null,
 velocidad : 1,
 playing : true,
 init: function(){
 ss.body = document.getElementsByTagName('body')[0];
 if(ss.compatible()){
 ss.crearMarco();
 }else{
 alert('Tu navegador sucks!');
 }
 },
 compatible : function(){
 if(document.getElementById && document.getElementsByTagName && document.createElement && document.appendChild && document.removeChild){
 if(ss.body.setAttribute){
 return true;
 }else{
 return false;
 }
 }else{
 return false;
 }
 },
 crearMarco : function(){
 var marco = document.createElement('img');
 marco.setAttribute('src', 'FrameFotografico.gif');
 marco.style.position = 'absolute';
 marco.style.top = document.getElementById('ss').offsetTop + 'px';
 marco.style.left = document.getElementById('ss').offsetLeft + 'px';
 marco.onmouseover = ss.stopSS;
 marco.onmouseout = function(){if(!ss.trueStop){ss.playSS()} };
 ss.body.appendChild(marco);
 ss.crearControles();
 },
 crearControles : function(){
 var controles = document.createElement('div');
 var menos = document.createElement('img');
 var stop = document.createElement('img');
 var mas = document.createElement('img');
 menos.setAttribute('src', 'icon-menos-silver.gif');
 stop.setAttribute('src', 'icon-stop-silver.gif');
 mas.setAttribute('src', 'icon-mas-silver.gif');
 menos.onclick = ss.desacelera;
 stop.onclick = ss.playPause;
 mas.onclick = ss.acelera;

 controles.appendChild(menos);
 controles.appendChild(stop);
 controles.appendChild(mas);
 ss.body.appendChild(controles);

 ss.prepararSS();
 },
 playPause : function(){
 if(ss.playing){
 ss.stopSS();
 this.src = 'icon-play-silver.gif';
 ss.trueStop = true;
 }else{
 ss.playSS();
 this.src = 'icon-stop-silver.gif';
 ss.trueStop = false;
 }
 },
 desacelera : function(){
 if(ss.velocidad > 1){
 ss.velocidad --;
 }
 },
 acelera : function(){
 ss.velocidad++;
 },
 prepararSS : function(){
 document.getElementById('ss').style.overflow = 'hidden';
 document.getElementById('ss').style.position = 'relative';
 ss.lis = document.getElementById('ss').getElementsByTagName('li');
 for(i=0; ss.lis[i]; i++){
 ss.lis[i].style.position = 'absolute';
 ss.lis[i].style.left = i*400 + 'px';
 }
 ss.playSS();
 },
 playSS : function(){
 ss.intervalo = setInterval(function(){
 ss.lis[0].style.left = parseInt(ss.lis[0].style.left) - ss.velocidad +'px';
 for(i=1; ss.lis[i]; i++){
 ss.lis[i].style.left = i*400 + (parseInt(ss.lis[0].style.left)) + 'px';
 }
 if(parseInt(ss.lis[0].style.left) <= -405){
 lisActual = ss.lis[0];
 document.getElementById('ss').removeChild(ss.lis[0]);
 document.getElementById('ss').appendChild(lisActual);
 }
 }, 100);
 ss.playing = true;
 },
 stopSS : function(){
 clearInterval(ss.intervalo);
 ss.playing = false;
 }
 }

 window.onload = function(){
 ss.init();
 }

 </script>
 <style type="text/css">
 ul
 {
 height: 250px;
 width: 400px;
 overflow: scroll;
 padding: 0;
 }
 ul li{
 width: 400px;
 height: 250px;
 float: left;
 border:1px #000 solid;
 list-style-type: none;
 }
 </style>
</head>
<body>
 <ul id="ss">
 <li><br /><br />texto1</li>
 <li><br /><br />texto2</li>
 <li><br /><br />texto3</li>
 <li><br /><br />texto4</li>
 <li><br /><br />texto5</li>
 </ul>
</body>
</html>

Para usar el efecto solo basta con crear una lista desordenada (<ul>) y darle como id el valor “ss”. Después llamar ss.init() al cargar la página.

No me tomo el tiempo para explicar lo que el javascript hace por que creo que es totalmente lineal y entendible, pero si alguien tiene dudas solo pregunteme, o si considera que es necesaria una explicación de código, diganme.

Notar que si el navegador no soporta los métodos necesarios para que el slideshow funcione, el efecto se degradará mostrando un feo pero accesible recuadro con scrolls para ver el contenido de la lista desordenada.

Espero sus comentarios.

Get to Know Your Visitors

One of the key points to success in business is the study of the market, and in the bloggers world the case is not much different from it. If you really want to increase the number of visitors in your blog, it is necessary that you take some time to analyze and realize what they are looking for, what they read when in your blog, where you go from your blog, and more. Luckily, wordpress offers a very easy way to do it. You just need to go to the Blog Stats section to find a complete analysis on what your visitors do on your blog and where they go from your blog.

The Mouse Watcher -Flash Tutorial

Just a flash tutorial. As always, Red is English, Orange is Spanish.

End Result / Resultado Final

Si me preguntas en todoexpertos…

Soy uno de los top expertos en todo expertos en lo que a mis categorías de experto concierne y la verdad es que me siento muy orgulloso acerca de eso, no solo por que eso implica que soy popular, sino tambien por que eso implica que eh ayudado mucha gente, y que a la gente le gusta la ayuda que les brindo. Sin embargo, el trabajo que realizo en todo expertos lo hago solo en mis ratos libres y algunas veces me saturo de preguntas que me es imposible responder a todas ellas. Por tal motivo eh decidido escribir este post en el que daré unos cuantos consejos a seguir cuando me preguntes en todo expertos.

Inner HTML al desnudo.

este post fue primero publicado en forosdel web despues de haver notado la duda en muchos usuarios hacerca de innerHTML. Sin mas, aqui el post.

Preguntando en todoexpertos.com (II)

Este post es la segunda parte de Preguntando en TodoExpertos.com (I).

En el post anteriorEn l mencione prácticamente todo lo necesario, o por lo menos lo que hasta ahora eh encontrado necesario para realizar preguntas eficaces, fáciles de leer y que se puedan responder en la menor cantidad de mensajes posibles, que al final de cuentas es lo que tanto expertos como usuarios buscan; una respuesta rápida a un problema.

Sin mas, aquí las recomendaciones.