July 05 2008

Mozilla Weave, mantén tus preferencias de Firefox a donde vayas

Mozilla Weave

Mozilla Weave es una potente extensión que pretende mantener todas las configuraciones y preferencias del usuario siempre disponibles sin importar a donde vayas. Por supuesto, la idea no es nada nueva, pero vieniendo de los chicos de Mozilla, es todo un suceso. Por el momento, Weave aún está en fase experimental (incluso es posible descargarlo). La idea nació a finales del 2007, pero al ritmo en que trabaja está gente, podríamos esperar un RC en cualquier momento. Por cierto, solo funciona para Firefox 3.

April 29 2008

Emulando listas de correo con php de forma rápida y sencilla

Aclaración: Enviar correo de forma masiva e indsicriminda es SPAM, no importa como lo quieras justificar, es SPAM, por favor asegurate de que las personas a las que les envíes este tipo de información, esten plenamente conscientes de lo que están recibiendo. Licencia Creativa, ni su autor, ni su administrador se hacen responsables por el mal uso que se haga de esta información

Si tenemos un servidor de correo plenamente instalado, a veces es algo tedioso y fastidioso estar configurando software de listas de correos, aunque existe software muy bueno para ello, hoy vamos a ver una forma sencilla en como podemos ahorrarnos ese paso y utilizar una cuenta de correo común y corriente para esos fines.

¿Qué necesitamos?

  1. PHP a nivel muy básico
  2. Un archivo de texto simple en el que escribiremos los datos de nuestros usuarios en la forma nombre, correo
  3. Por supuesto, la lista de nuestros usuarios
  4. Una cuenta de correo real

Preparando el archivo de texto

Hagamos un archivo de texto simple (.txt) y lo nombramos como lista.txt, en ella escribiremos los nombres de nuestra lista en la siguiente manera:

Nombre real de la persona, correo electrónico

Debemos asegurarnos de escribir un usuario por línea de texto

Tecleemos algo de código

Inicie su editor de código favorito, generamos un documento html nuevo y empecemos a escribir código. Lo primero, será abrir el archivo de texto (recuerde tener privilegios adecuados para esto) y pasarlo a una matriz, lo haremos con la función file de php

PHP:
  1. $lines = file('lista.txt');

Vamos a agregrar una linda tabla con los datos que vayamos extrayendo de la lista, de esa manera podremos ver un output al momento que los datos se van enviando. Y mostraremos todo esto dentro de un foreach

PHP:
  1. <table>
  2. <tr>
  3. <td>Nombre</td><td>Correo</td><td>Enviado</td></tr>
  4. <?php
  5.         foreach ($lines as $line_num=>$line) {
  6.             $datos = explode(",", $line);
  7.     ?>     
  8.     <tr>
  9.     <td> <?php echo $datos[0] ?></td>
  10.     <td> <?php echo $datos[1] ?></td>
  11.         <td>Ok</td>

Notemos que la variable datos contiene ahora los datos de cada usuario en forma de array, de manera que la opsición 0 contiene el nombre, y la posición 1 el correo electrónico, la función explode nos permite hacer dicha separación. Ahora, enviaremos los datos por correo, vuelvo a hacer incapie en la necesidad de usar una cuenta de correo valida para que funcione mejor, esto por supuesto, no garantiza que cada cliente de correo interprete nuestro mensaje como spam o no.

PHP:
  1. <?php
  2.         $sendTo = $datos[1]; // El correo del usuario
  3.         $correo_de = "lista@aullamas.com"; // nuestro correo
  4.         $de = "Aoyama"; // Nuestro nombre
  5.         $subject = "Bienvenida a la lista de correo de Licencia Creativa";
  6.         $headers = "MIME-Version: 1.0\n";
  7.         // Importante que el mime sea text/html para que el cliente lo entienda como tal
  8.         $headers .= "Content-type: text/html; charset=iso-8859-1\n";
  9.         $headers .= "From: $de  <$correo_de> \r\n";
  10.         $headers .= "Reply-To: " . $correo_de;
  11.         $message = "<p><img src='http://www.dominio.com/images/imagen.jpg' /></p><p>Como vez, puedes incluir im&aacute;genes tanbi&eacute;n. Y no olvides enviar esta informaci&oacute;n a todos tus amigos y conocidos.</p><p><small>Este es un correo automatizado. No es necesario que respondas al mismo, si deseas mayor informaci&oacute;n escribe a: aoyama@auyamas.com</small></p>";
  12.     mail ($sendTo, $subject, $message, $headers); //la famosa función mail de php hace el envio
  13.     ?>
  14.     </tr>
  15.     <?php     
  16.     } //fin foreach
  17.     ?>
  18.     </table>

Una vez terminado el código, guardemos este documento en una carpeta dentro de nuestra raíz de publicación y lo ejecutamos cuando sea necesario. Finalmente quiero decir que esto es algo muy simple y que hay software que hace ese trabajo de manera más eficiente, también reitero de nuevo la necesidad de no abusar de este tipo de prácticas.

March 07 2008

Internet Explorer 8 Beta 1

Internet Explorer 8

Justo cuando pensabamos que IE7 se quedaría por un buen rato más, la gente del buen billy, nos trae está noticia (que ya de por si andaba circulando por la red), ahora nos llega la primera beta pública de Internet Explorer 8, según palabras del sitio web de Internet Explorer

Internet Explorer 8 will take the web experience beyond the page. Internet Explorer 8 introduces a new way to seamlessly experience the best of the web whether you are a web developer writing to standards or a user discovering a new online service

Si, bueno. Yo no me la creo en realidad. Según el sitio web, las mejoras más "innovadoras" son dos:

  1. Activities: Servicios contextuales que ofreceran alternativas externas, pero relacionadas al sitio que estemos visitando
  2. WebSlices: Una especie de mini-thumbnail (¡oh, sorpresa, Opera ya lo hace!) del sitio que se ofrecerá al visitante para que pueda subscribirse o visitar de forma entera la página

IE8 Beta está disponible para Windows XP, Vista, 2003 Server, Windows Server 2008 y las versiones de 64 bits.

November 07 2007

NextGEN Gallery, una galería integral para Wordpress

Pocos plugins me causan tanta emoción como este que acabo de encontrar (Ok, el plugin tiene mucho tiempo de existir, pero apenas yo lo he descubierto). NextGEN es una galería de fotos muy completa, capaz de manejar sets de galerías y albumnes, todo esto con la comodidad de ajustarse a tu Wordpress de manera nativa, usando AJAX, LightBox y Flash, produce resultados realmente muy satisfactorios, teniendo además un panel de administración tan completo que te dejará una grata sensación de amor hacía el autor del plugin (por supuesto figurativo, so pervertidos).

Instalación

  • Descarga el plugin
  • Descomprime todo en la carpeta wp-content/plugins, te debería crear una carpeta llamada nextgen-gallery
  • Baja el JW Image Rotator, descomprime el archivo, y copia el archivo imagerotator.swf a la carpeta nextgen-gallery
  • Crea en wp-content una carpeta llamada gallery con permisos de escritura
  • Tendrás dos plugins nuevos, NextGEN Gallery y NextGEN Gallery widget, activa el primero y el segundo solo si deseas usarlo en la sidebar

Utilización

Ahora que has activado el Plugin, notarás una nueva sección junto a Options (Opciones)

Opciones

Echemos un vistazo en ella

vistazo

Procedamos ahora a explicar de forma básica su funcionamiento

Creación de Álbumnes

  1. Damos clic en la opción Album dentro de Gallery
  2. Buscamos Add New Album, escribimos el nombre del álbum y presionamos Update

Crear albúm

Nuestro álbum ha sido creado y esta disponible para más adelante

Álbum listo

Creación de Galerías

Veamos ahora como se hacen las galerías, el siguiente paso en nuestro proceso

  • Vayamos a Add Gallery dentro de Gallery
  • En New Gallery, escribamos el nombre de nuestra galería y presionemos Update

New Gallery

Una vez creada, NextGEN nos arroja información importante que usaremos después

galería creada

Administración de Galerías

Ahora que hemos creados una galería, vamos a ver las funciones básicas para su administración, como la edición de la galería, su eliminación y el añadido de fotos a la misma.

Eliminar

  • Nos movemos a Manage Gallery, encontraremos una lista de las galerías que llevamos hasta ahora
  • Presionamos el botón Delete a un lado de la galería correspondiente y le damos clic al botón Ok, de la ventana javascript que nos pide confirmación

eliminar galería

Editar

  • En la misma sección de Manage Gallery, presionamos el botón Edit junto a la galería que vamos a editar
  • Nos lleva a una nueva ventana con las siguientes opciones:
    1. Title: Título de la galería
    2. Description: Descripción de la galería
    3. Path: Ruta relativa de la galería
    4. Page Link To: Podemos ligar la galería a una página creada por Wordpress, el valor por defecto es Not Linked (no ligada)
    5. Preview Image: Imagen que servirá de Thumbnail a toda la galería, el valor por defecto es No Picture (Sin imagen)
    6. Create New Page: Se usa, si queremos que se genera una página Wordpress nueva por cada galería, el valor por defecto es Main Page(no parent) (Página principal sin página padre)
    7. Save Changes: Guarda los cambios
    8. Scan Folder For New Images: Revisa la carpeta por si hemos puesto fotos ahí sin hacer uso de NextGEN y las agrega

Editar galería

Agregar Fotos

  • Vamos a Add Gallery, luego a Upload Images (Este paso lo podemos repetir según la cantidad de fotos que queramos)
  • Por cada foto que se agrega, se genera un botón Remove, por si queremos eliminar alguna foto antes de subirlas a la galería
    Remove Photos
  • En Upload Image, seleccionamos la foto que queremos subir a nuestra galería
  • Luego en In to, escogemos la galería destino
  • Presionamos Upload Images

upload images

Administrar las fotos

¡Hemos subido fotos, es hora de ver que podemos hacer con ellas antes de visualizarlas en nuestro blog.

  • Nos vamos a Manage Gallery, luego pulsamos en Edit sobre la galería en la que hemos añadido las fotos. Si nos fijamos ahora, en la parte inferior de la ventana tenemos una sección que antes existía, pero estaba desierta, analicemos lo que podemos hacer en ella:
    1. ID: El Id de la foto
    2. File Name: El nombre de la foto
    3. Thumbnail: La miniatura de la foto, se puede ocultar, seleccionando el checkbox de la foto y presionando el botón Hide Thumbnails (y similar para mostrarla de nuevo, solo que ahora el botón se llama Show Thumbnails)
    4. Description: Escribe una breve descripción de la imagen
    5. Alt & Title: Para rellenar los atributos Alt y title de la etiqueta img
    6. Exclude: Evita que se vea en la galería
    7. View: Hace una vista previa de la foto
    8. Delete: Elimina la foto

Fotos

Agregar Tags a las fotos

Las Tags son importantes porque ayudan a los navegadores a encontrar nuestras fotos, sirven para categorizar y ordenar también entre otras funciones, para colocar las tags a nuestras fotos, primero hay que usar el checkbox correspondiente a la foto que queremos editar, luego presionar el botón Show Tags (para ocultar las tags, presionamos de nuevo el botón que ahora dice Hide Tags)

taggear fotos

Terminado todo, presionamos Save Changes

Usando NextGen en nuestro blog

Ha llegado la hora de la verdad, veamos como usar NextGEN en nuestro blog. Para mostrar una foto, debemos colocar el siguiente código en un post o una página:

PHP:
  1. [singlepic=id,width,height,mode,float]

Donde:

  • id: Id de la foto
  • width: Ancho de la imagen
  • height: Alto de la imagen
  • mode: Es opcional y se usa uno de dos posibles valoes: web20 - agrega un efecto de reflejo, watermark - agrega una sencilla marca de agua, definida en el mismo panel de administración
  • float: left (izquierda) o right (derecha)

Ejemplos:

web2.0

watermark

Para mostrar una galería:

PHP:
  1. [gallery=id]

Siendo id el ID de la galería. Cabe decir que esto, vierte el contenido de la galería en directo donde sea colocado, con un lindo enlace para cambiar a modo de diapositivas.

Galería

Finalmente, para colocar un álbum se usa:

PHP:
  1. [album=id]

Siendo id, el ID del álbum. Esto te entrega el álbum completo, como usa ajax, desde ahí puedes navegar en las galerías que están dentro del álbum y sus fotos.

album

Hasta aquí llega este extenso artículo sobre el plugin NextGEN Gallery, por supuesto quedaron algunos detalles en el tintero, pero será mejor que explores el plugin y descubras la enorme riqueza que te ofrece, como una idea de lo que faltó, puedes ir a Gallery, Options y configurar muchas cosas del plugin como la marca de agua, los efectos para mostrar las fotos, los thumbnail, etc. ¡Explora y diviertete!

November 01 2007

Gráficas con LibChart en PHP

NOTA: AL momento de re-escribir este artículo, me entere de la nueva versión de la librería con soporte total para PHP5 y nuevos tipos de gráficas, aún así, no ha cambiado en sus funciones básicas que son las que se explican aquí.

LibChart es es una líbrería orientada a objetos de libre distribución y facilidad de uso que te ahorrara la difícil tarea de crear gráficas en tus aplicaciones Web. Todo lo que tienes que hacer, es bajarte la librería, instalarla en tu aplicación y empezar a usarla. Entremos en detalle.

Instalar la librería

Después de descargar la librería, es necesario que está se descomprima y se coloque en un subdirectorio de nuestra aplicación, en mi caso, le he dejado el nombre de la librería a la carpeta, solo para recordar que estoy haciendo.

Libchart

Una vez subidos los archivos, deberás hacer lo siguiente:

  • Otorga el permiso 555 a la carpeta que acabas de subir
  • crea dentro de esa carpeta una subcarpeta donde se van a guardar las gráficas (se generan en formato .PNG) y ponle los atributos 777 (siempre puedes jugar con los permisos), en mi caso, le puesto demo como nombre a la carpeta

Creando gráficos

Al momento, LibChart, soporta gráficas de barras horizontales y verticales, circulares y gráficas de líneas, así que tendremos que elegir cual vamos a crear, pero primero, en nuestras aplicaciones, incluyamos la librería correspondiente (ver la nota el inicio de este artículo).

PHP:
  1. include "libchart/libchart.php";

Recordemos que debemos apuntar al nombre que le hayamos puesto a la carpeta de nuestra librería. Con eso ya tenemos incluida la librería, ahora vemos como crear una gráfico de barras horizontal

PHP:
  1. $chart = new HorizontalChart(500, 250);

Con barra verticales

PHP:
  1. $chart = new VerticalChart(500, 250);

Circular o de pastel

PHP:
  1. $chart = new PieChart(500, 250);

Líneal

PHP:
  1. $chart = new LineChart(500, 250);

Se ve bastante fácil, por cierto, los parametros numéricos representan ancho y alto respectivamente, $ chart es el nombre que le hemos dado a nuestra variable la cual se deriva de las clases LineChart, VerticalChart, HorizontalChart y PieChart; lo siguiente, es añadir por supuesto el contenido de la gráfica.

PHP:
  1. $chart->;addPoint(new Point("Jan 2005", 273));

addPoint es un método que consiste en agregar un punto a nuestra gráfica, se instancia de la Clase Point, e incluye, el título entre comillas y el valor necesario para poder representarlo, lo que quiere decir que podemos agregar tantos puntos como datos necesitemos representar. Ahora, como ya tenemos los datos, es importante colocarle un título a nuestra gráfica, de otra forma ¿cómo sabremos que estamos ilustrando? setTitle se encarga de ello

PHP:
  1. $chart->setTitle("Este es el título global de la gráfica");

Ahora que ya tenemos todo completo, hay que renderizar el gráfico y que se genere el archivo .png con nuestra gráfica

PHP:
  1. $chart->render("demo/demo2.png");

El método render le dice a donde vamos a depositar la gráfica, es importante como mencione al inicio que el directorio donde vamos a poner las gráficas generadas tenga el permiso 777 o 775, se que para los paranoicos de la seguridad esto es inaudito, pero vamos, hay mecanismos para ello, una recomendación es que no pongan sus gráficas sobre la raíz de su servidor sino quieren llevarse sorpresas desagradables (por aquello de los hackers, crakers, lammers, script kiddies, etc). Lo último que queda por hacer, es simplemente mostrar la gráfica en nuestra aplicación, lo haré de la forma más sencilla posible

PHP:
  1. echo "<img src='demo/demo2.png' />";

Nada del otro mundo, ¿eh? si todo salió bien, ya tienen un perfecto sistema de generación de gráficas. Veamos el código completo de una gráfica y su visualización.

PHP:
  1. include "libchart/libchart.php";
  2. $chart = new HorizontalChart(500, 170);
  3. $chart->addPoint(new Point("Azul", 50));
  4. $chart->addPoint(new Point("Rojo", 83));
  5. $chart->addPoint(new Point("Verde", 142));
  6. $chart->setTitle("Cual es tu color favorito?");
  7. $chart->render("demo/demo2.png");
  8. echo "<img src='demo/demo2.png' />";

libchart

Y las bases de datos, ¿qué?

Sabía que se lo preguntarían, suponiendo que ya tenemos todo el código para la conexión de una base de datos, podemos tomar un ejemplo sencillo de como gráficar datos de alumnos de una determinada escuela.

PHP:
  1. include "libchart/libchart.php";
  2. $chart = new HorizontalChart(500, 170);
  3. $chart->setTitle("Promedio Grupal");
  4. $sql = "select nombre, promedio from alumnos where semestre=2 and idgrupo=3";
  5. $result = mysql_query($sql, $enlace_a_la_bd);
  6. $registros = mysql_num_rows($ result);
  7. if($registros==0)
  8.     echo "<p>No hay datos para gráficar</p>";
  9. else
  10. {
  11.     while($datos = mysql_fetch_array($result))
  12.     {
  13.         $chart->addPoint(new Point($datos["nombre"], $datos["promedio"]));
  14.     }
  15.     $chart->render("demo/demo2.png");
  16.     echo "<img src='demo/demo2.png' />";
  17. }

Cuyo resultado sería:

Libchart

¡Espero que les haya sido de utilidad!

October 26 2007

Capturar la IP real del usuario en PHP

En muchas de nuestras aplicaciones, nos veremos obligados o necesitados de capturar la ip de nuestros usuario, por ejemplo, para fines estadísticos, para alimentar la paranoia de nuestro jefe y / o cliente, etc. Así que la forma de capturar la ip sería:

PHP:
  1. $ip = $_SERVER["REMOTE_ADDR"];

Pero, por supuesto, este dato puede verse falseado por el uso de proxies y trucos similares para enmascarar la ip, así que hagamos una función php que nos devuelva la ip real del usuario

PHP:
  1. function ipreal()
  2. {
  3.     if ($_SERVER)
  4.     {
  5.         if ($_SERVER[HTTP_X_FORWARDED_FOR])
  6.             $ip = $_SERVER["HTTP_X_FORWARDED_FOR"];
  7.         else
  8.             if ( $_SERVER["HTTP_CLIENT_IP"] )
  9.                 $ip = $_SERVER["HTTP_CLIENT_IP"];
  10.             else
  11.                 $ip = $_SERVER["REMOTE_ADDR"];
  12.     }
  13.     else
  14.     {
  15.         if ( getenv( "HTTP_X_FORWARDED_FOR" ) )
  16.             $ip = getenv( "HTTP_X_FORWARDED_FOR" );
  17.         else
  18.             if ( getenv( "HTTP_CLIENT_IP" ) )
  19.                 $ip = getenv( "HTTP_CLIENT_IP" );
  20.             else
  21.                 $ip = getenv( "REMOTE_ADDR" );
  22.     }
  23.     return $ip;
  24. }

Que se utilizaría así

PHP:
  1. echo ipreal();

O así

PHP:
  1. $ip = ipreal();

October 11 2007

Verificando formularios de registro y comentarios en php

Disclaimer: Este es un artículo muy básico, por lo que algunos hardcore programadores y DJSOSO's podrían verlo como juegos de niños, si eres uno de esos, este artículo no es para tí.

Hoy les voy a explicar de una forma muy sencilla, una técnica que utilizan muchos sitios en sus formularios de registro y comentarios para evitar a los spam-bots y cosas similares. Se trata simplemente de obligar al usuario a digitar un número verificador de cuatro cifras generado aleatoriamente, así que, abrimos nuestro editor favorito, y vamos a crear una sencilla función.

PHP:
  1. <?php
  2.     function validador()
  3.     {
  4.         $num = rand(1000,9999);
  5.         return $num;
  6.     }
  7. ?>

Ahora, en cada formulario en el que vayamos a implementar esto, hemos de añadir un poco de código adicional, lo primero será, obviamente notificarle al usuario que tiene que escribir ese valor y de paso explicarle porque debe hacerle, pero también, usaremos un objeto tipo hidden para usarlo del otro lado del formulario. Veamos

PHP:
  1. <?php       
  2.         $n = validador(); //aquí llamamos a nuestra función, no te olvides de hacer el include correspondiente
  3.     echo "<input type='hidden' name='verifica' value='$n' />";
  4. ?>
  5. <p>Verificaci&oacute;n:<strong><?php echo $n ?></strong>. <small>Escriba este valor en la caja de texto</small>
  6. <input type="text" name="verifica_usuario" size="4" maxlength="4" /></p>

Ahora, del otro lado (es decir, cuando el formulario se procesa) simplemente revisamos que no haya quedado vacío el campo y que coincida con los dígitos generados (aquí es donde puedes pensar en AJAX si quieres).

PHP:
  1. <?php
  2. $v = true;
  3. if(strlen(trim($_POST["verifica_usuario"]))>0)
  4. {
  5.      if($_POST["verifica_usuario"]!=$_POST["verifica"])
  6.      {
  7.          $v = false;
  8.          echo "<p>Debe escribir el dígito verificador correcto.</p>";
  9.      }     
  10. }
  11. else
  12. {
  13.       $v = false;
  14.       echo "<p>Debe escribir el dígito verificador.</p>";
  15. }
  16. if($v)
  17. {
  18.      // Aquí se continua con el proceso
  19. }

Por supuesto, esto se puede implementar en un desarrollo propio o hacerle una modificación directa al formulario de comentarios de nuestro blog (sin necesidad de instalar un plug-in).

RSS