4.08.2010

Crear firma dinamica con PHP y una Imagen [TUTORIAL]

Quizas muchos han visto las famosas firmas "Danasoft" que nos muestran nuestra direccion IP, proveedor de internet entre otros detalles "personales" que claro, cualquier programa en php es capaz de atrapar, pero.. en una imagen?



Hoy vamos a aprender a hacer un monito como este, para ello vamos a necesitar un host gratuito que soporte PHP y tenga la libreria GD habilitada. En este minitutorial, vamos a utilizar pues no necesitamos un gran ancho de banda ni enormes requisitos para mostrar una pequeña imagen dinamica

http://www.000webhost.com

Paso 1.

Seleccionar la imagen que vas a utilizar como "fondo", en mi caso, voy a usar una muy al estilo de Bloggeandolo, y lo llamaremos imagen.png






Paso 2.

Abrimos block de notas o cualquier otro editor de texto plano y vamos a pegar el siguiente codigo:

 <?php

header("Content-type: image/png");

$image = imagecreatefromPng("imagen.png");

$browser = "Tu explorador es: ";
if(!$_SERVER["HTTP_USER_AGENT"]){
$browser .= "Unknown";
}else{
$browser .= $_SERVER["HTTP_USER_AGENT"];
}

if ($_SERVER["HTTP_X_FORWARDED_FOR"]){
$ip = $_SERVER["HTTP_X_FORWARDED_FOR"];
}else{
$ip = $_SERVER["REMOTE_ADDR"];
}
$ip = explode(",", $ip);
$ip = "Tu Ip es: ".$ip[0];

$number = rand(1,5);
if ($number == "1"){$fortune="Que tengas un Buen Dia.";}
if ($number == "2"){$fortune="No olvides visitar http://bloggeandolo.blogspot.com.";}
if ($number == "3"){$fortune="Dios no juega a los dados con el universo.";}
if ($number == "4"){$fortune="Yo solo se, que no se nada.";}
if ($number == "5"){$fortune="La realidad casi siempre es un error.";}

// COLORS
$black = imagecolorallocate($image, 0, 0, 0);
$white = imagecolorallocate($image, 250, 250, 250);
$orange = imagecolorallocate($image, 220, 210, 60);
$red = imagecolorallocate($image, 250, 0, 0);
$blue = imagecolorallocate($image, 0, 250, 0);
$green = imagecolorallocate($image, 0, 0, 250);
$grey = imagecolorallocate($image, 250, 250, 250);
$grey2 = imagecolorallocate($image, 140, 140, 140);
$grey3 = imagecolorallocate($image, 110, 110, 110);
$grey4 = imagecolorallocate($image, 90, 90, 90);
$grey5 = imagecolorallocate($image, 60, 60, 60);
$grey5 = imagecolorallocate($image, 250, 0, 250);
//end colors

imagestring($image, 3, 5, 30, $fortune, $white);
imagestring($image, 3, 5, 160, $ip, $white);
imagestring($image, 3, 5, 170, $browser, $white);

imagepng($image);
imagedestroy($image);
?>
Haz click en "Archivo" > "Guardar Como" y lo guardas como index.php 

Es un programa extremadamente sencillo que "imprime" sobre la imagen que seleccionamos de fondo, algunas variables utilizando la función imagestring() donde 30, 160 y 170 marcan la posición del texto en la imagen. y $white corresponde al color que tomara el texto acorde a la lista que esta despues de //COLORS

Puedes modificar las frases de:


$number = rand(1,5);
if ($number == "1"){$fortune="Que tengas un Buen Dia.";}
if ($number == "2"){$fortune="No olvides visitar http://bloggeandolo.blogspot.com.";}
if ($number == "3"){$fortune="Dios no juega a los dados con el universo.";}
if ($number == "4"){$fortune="Yo solo se, que no se nada.";}
if ($number == "5"){$fortune="La realidad casi siempre es un error.";}
 Para hacerlas tuyas.. recuerda modificar únicamente lo que esta en negrita, claro a menos que sepas un poco de PHP y sepas que es lo que estas haciendo.

Una vez, hemos guardado nuestro archivo y tenemos nuestra imagen, solo hace falta que los subamos al host (esto no lo explicare aqui) Si tienes dudas sobre como subir archivos a un host puedes leerte el siguiente articulo

Si todo ha funcionado como esperabamos, podremos apuntar nuesto explorador al subdominio de nuestro host, en mi caso



Paso 3 

Si todo esta en orden, ahora vamos a decirle al sitio que trate los archivos .png como si de una aplicacion se trataran, para eso utilizaremos un archivo .htaccess

Le agregaremos el siguiente contenido y lo subiremos al hosting

AddType application/x-httpd-php .png 
Si tienes problemas para generar este archivo (a veces en windows es algo tedioso) puedes descargartelo desde aqui


Una vez que hemos subido este archivo al directorio donde tenemos nuestra imagen y nuestro index.php, vamos a renombrar este ultimo y le pondremos index.png

Una vez que hemos hecho esto, comprobamos que nuestro sitio lo trate como un archivo ejecutable apuntando nuestro navegador a:


Si todo ha resultado como esperabamos, hemos terminado. Tenemos una firma Dinamica muy original, al mejor estilo de cada quien 


A la espera de sus comentarios. Un Saludo 

10 comentarios:

Anónimo dijo...

cool.. ya me preguntaba como hacian eso xD ..
buenazo!!!

Anónimo dijo...

Dark Viking :>
la verdad esto lo havia estado buscando grasias!!!

Anónimo dijo...

mmmmm.....

oye Mz como le hago para poner la direccion parecida a la tuya

http://animematagalpa.webuda.com//note.png un ejemplo para ke enmedio de "//" ponerle algo gracias.

mas o menos parecido al tuyo

http://todotutoriales.netai.net/firma/imagenl.png

MzStudios dijo...

creando una carpeta en tu servidor

Anónimo dijo...

Oye al que era index.php se le cambia a index.png?

MzStudios dijo...

si

Anónimo dijo...

Graciias muy bien explicado amigo :)

Peroo porque cuando cambio el index.php a index.png me sale que no se puede mostrar? xD

MzStudios dijo...

subiste el htaccess? deberia funcionar si asi fue

Anónimo dijo...

Sii lo subi... luego pongo el index.php a index.png y al abrirlo me dice que no se puede mostrar porque contiene errores :(

alvaro dijo...

Seria posible incluir una imagen a la firma? por ejemplo un pequeño avatar?
Lo que yo pregunto es "pegar" una imagen chiquitita dentro de la otra(por decirlo de manera sencilla xD)

Publicar un comentario

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Design Blog, Make Online Money