José Suárez Córdova

Galeria de Fotos PHP sin BBDD

admin — Wed, 25 Nov 2009 09:35:30 +0000

Muy buenas tigres de la programacion, bueno aqui nuevamente para mostrarles un recurso que les puede interesar, resulta que hace poco teniamos que resolver un problemilla, que era mostrar distintas imagenes a especie de catalogo de productos, hasta ahi todo sencillo porque con un “img src” se hubiera terminado el tema, pero el cliente queria cambiarlas el y no tenia ni p…. idea de HTML ni de PHP queria el agregar o quitar fotos cuando quisiera, bueno eso tampoco significaria mucho pues podiamos desarrollar un pequeño gestor de contenidos especificamente para esta seccion, osea subir, cambiar y eliminar fotitos.. nada del otro mundo, pero, aqui viene el tema y lo cabrones que quieren ser los clientes cuando quieren que no queria aumentar su presupuesto!!!! osea queria las joyas del nilo a precio de “todo 100″, bueno como era un cliente recomendado y teniamos que hacerlo para no quedar mal, negociamos un poco y despues de algunos arañazos y mordidas, resolvimos el tema para “bien” de los dos, lo pongo entre comillas porque fue un chollo para el cliente. Pero al menos nos sirvio de ejercicio para poner algo en este venerable blog de vuestro servidor .

Bueno, ahora explico como solucionamos este asunto.

1.-Organizamos la estructura de carpetas donde estaran las imagenes que se van a mostrar.
2.- Creamos un fichero que abrira y recorrera la carpeta asi como mostrara las imagenes. A este fichero le llamaremos catalogo_view.php y tendra el siguiente codigo.

^?View Code PHP


$dir="imagenes/galeria/"; 
 
$directorio = opendir($dir); 
 
$ancho=80;
$alto=80;
while ($archivo = readdir($directorio)){ 
	if ($archivo != "." && $archivo != ".."){
		$ext=explode(".",$archivo);
		$ext[1] = strtolower($ext[1]);
		if($ext[1] == 'jpg' || $ext[1] == 'png' || $ext[1] == 'gif' || $ext[1] == 'jpeg'){		
			$archivos[$archivo] = '.$dir.$archivo.'">.$dir.$archivo.'" width="'.$ancho.'" '.'height="'.$alto.'" />'."\n";
		}	
	}
}
closedir($directorio);
ksort ($archivos);
?>

Ahora procedo a explicar brevemente las partes mas importantes.

En la primera linea definimos una variable $dir con la ruta exacta donde estan las imagenes a utilizar. La siguiente linea abre el directorio y guarda la informacion en la variable $directorio.

^?View Code PHP

1 2	$dir="imagenes/galeria/"; $directorio = opendir($dir);

Ahora definimos las variables que guardan las dimensiones de las imagenes en formato thumbnail. Tener cuidado con guardar la proporcion de imagen.

^?View Code PHP

1 2	$ancho=80; $alto=80;

Lo siguiente es recorrer la carpeta donde tenemos las imagenes y evita que se recorran indices que podrian vulnerar la seguridad, recuerden, a este nivel trabajamos a modo UNIX.

^?View Code PHP

1 2	while ($archivo = readdir($directorio)){ if ($archivo != "." && $archivo != ".."){

Ahora buscamos el “.” para empezar a filtrar los ficheros por su extension, recuerden queremos obtener las imagenes con formato ‘jpg’, ‘png’, ‘gif’ o ‘jpeg’. Pero no se limiten que ahi pueden poner la extension que quieran.

^?View Code PHP

1
2
3

$ext=explode(".",$archivo);
$ext[1] = strtolower($ext[1]);
if($ext[1] == 'jpg' || $ext[1] == 'png' || $ext[1] == 'gif' || $ext[1] == 'jpeg')

A continuacion guardamos cada imagen de la carpeta en una posicion determinada del array $archivo[], le he puesto un enlace porque en realidad tenia un efecto lightbox para darle un toque mas guapo.

^?View Code PHP

1	$archivos[$archivo] = '.$dir.$archivo.'" rel="lightbox[roadtrip]">.$dir.$archivo.'" width="'.$ancho.'" '.'height="'.$alto.'" />'."\n";

Por ultimo cerramos el directorio, no olvidar, y ordenamos la matriz por clave.

^?View Code PHP

1 2	closedir($directorio); ksort ($archivos);

Pero ahi no queda la cosa jejeje nonono .. ahora tenemos que crear otro fichero que cargara nuestra genial programacion, y recorrera el array $archivo para mostrarlo en la pagina.

^?View Code PHP


	include_once('catalogo_view.php');
	foreach($archivos as $enlaces_uo){
		echo $enlaces_uo;						
			}
?>

Y listo, asi de facil, ahora a probarlo y si teneis alguna duda, ya sabes donde encontrarme en el bar de Pepe el Toro Saludos!

Colores Hexadecimales

admin — Sat, 10 Oct 2009 14:34:23 +0000

Hola chavalotes que pensabais que ya me habia vuelto a Perú! nooooo, aqui denuevo reloaded!, bueno a lo nuestro , aqui les dejo una cosilla que seguro os va a servir un guebo, con esta paleta tendreis los colores hexa chupaos!

Que lo disfruten

Agur!

Enviando mensajes HTML con PHP-Mail (III)

admin — Thu, 24 Sep 2009 13:36:56 +0000

Buenas amigos del PHP y demas hierbas, despues de un breve tiempo “fuera del ring” he vuelto para poner algunas cosillas. Continuando con el tema del envio de mensajes por PHP, como ya les repito es muy util que le hagais a vuestros clientes cuando tengais alguna chapuzilla web, pues un formulario de envio de contactos o presupuestos, etc.. en condiciones, entonces a todo lo que estabamos haciendo le faltaba el envio de mensajes como HTML, osea que nos llegue el mensaje ordenado con formato HTML predefinido y bien, esto a los clientes les vuelve loco: asi que aprovechen el siguiente codigo que es muy sencillo ademas es el codigo de un caso real.

Bueno, primero como siempre creamos un formulario, en este caso me la he currado y he hecho un formulario como debe ser con capas y todo correctamente ordenado o al menos eso parece

^?View Code PHP

<div id="contenidosformulario" style="width:30%; border:1px solid;"> 
<form name="form1" action="enviar3.php" method="post">
	 <div style="width:100%; float:left;">
		<div style="float:left;">
			<label>empresa:label> <input type="text" id="empresa" name="empresa"/>
		div>
	div>
             <div style="width:100%; float:left;">
		<div style="float:left;">
			<label>persona de contacto:label> <input type="text" id="contacto" name="contacto"/>
		div>
	div>
             <div style="width:100%; float:left;">
		<div style="float:left;">
			<label>teléf. de contacto:label> <input type="text" id="telefono" name="telefono"/>
		div>
	div>
	<div style="width:100%; float:left;">
		<div style="float:left;">
			<label>e-mail:label> <input type="text" id="email" name="email"/>
		div>
	div>
             <div style="width:100%; float:left;">
		<div style="float:left;">
			<label>Comentarios:label>
		div>
	div>
	<div style="width:100%; float:left;">
		<div style="float:left;">
			<textarea id="comentario" name="comentario" cols="40" rows="5">textarea>
		div>
	div>
	<div style="width:100%; float:left;">
		<div style="float:right;">
		<label for="">&nbsp;label> <input class= "btn" type="submit" value="Enviar consulta"/>
		div>
	div>
form>
div>

Facil no? pero si esto es XHTML de primero de ESO !! jejejeje bueno ahora creamos el proceso, recordar publicar el proceso en un servidor con server APACHE o alguno que permita ejecutar PHP o en su XAMPP de toda la vida

^?View Code PHP


$empresa=$_REQUEST['empresa'];
$contacto=$_REQUEST['contacto'];
$telefono=$_REQUEST['telefono'];
$email=$_REQUEST['email'];
$comentario=$_REQUEST['comentario'];
 
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: '.$email. "\r\n";
 
$mensaje= "Empresa:".$empresa."
".
"Nombre:".$contacto."
".
"Telefono:".$telefono."
".
"Email:".$email."
".
"Comentario:".$comentario;
 
mail('webtrainner@hotmail.com', 'Contacto de la Web', $mensaje, $headers);
 
header('Location: form3.php?rpta=ok&contacto='.$contacto);
?>

Ya sabeis que los datos que estan ahi son temporales, no lo dejeis asi y lo publiqueis hee pajaroo!! que se entera vuestro cliente y os cruje hee!!! . Bueno como veis ya en el mensaje podeis meter HTML sin problemas, lo que querais, esto es un breve ejemplo pero se puede extender a muchas aplicaciones.

Ver ejemplo

Pues asi de rapido ha sido este post, espero que os sirva, y ya saben recuerden que esta prueba llega a mi e-mail asi que porfavor no me pidan dinero que estoy a dos velas quilllooo!, Agur!!!!

Cargando paginas por pais con PHP

admin — Mon, 10 Aug 2009 08:32:58 +0000

Buenas, amigos de PHP, otra vez lunes ufff, que mal dia para poner un post, pero bueno aqui estoy “eme aqui y aqui eme”, esta vez vamos a detectar el codigo del pais donde os encontreis y segun eso cargareis una u otra pagina, esto viene bien cuando se tienen versiones del Sitio Web para cada pais aun compartiendo el mismo idioma, bueno lo mas importante es obtener el codigo del pais donde nos encontramos para esto usamos la funcion $_SERVER["HTTP_ACCEPT_LANGUAGE"] que nos devolvera el codigo del pais y su correspondiente lenguaje, por ejemplo:

en-us
en-gb
de
nl
en-us,zh;q=0.5
es
en
nl-be

$_SERVER es una matriz que contiene información tal como headers, paths, y script locations, las entradas a esta matriz son proporcionadas por el servidor web. Esta matriz tiene muchos atributos el que veremos en esta ocasion sera HTTP_ACCEPT_LANGUAGE, pero hay muchas mas como : REQUEST_TIME, QUERY_STRING, HTTP_ACCEPT etc.. para mas informacion podeis ver la madre del los manuales de PHP el manual oficial.

Bueno vamos al negocio, crearemos un nuevo documento PHP y ahi escribiremos el siguiente codigo.

^?View Code PHP


// IMPORTANTE: 
// - Cambia pagina.php por el archivo correcto de acuerdo al pais
// - Quita el comentario del include para que cargue la pagina correspondiente
if (isset($pais) && ($pais <> '')) {
	$cod_pais = substr($pais,0,5);
} else {
	$cod_pais = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"],0,5);
}
 
echo "El codigo de tu pais es: ".$cod_pais;
return false;
 
//Dependiendo del codigo del pais cargara una u otra pagina;
 
switch ($dgo_pais) {
 
	case "es-es":
	//si el pais es España
	include("pagina.php");
	break;
 
	case "es-pe":
	//si el pais es Perú
	include("pagina.php");
	break;
 
	case "es-ar":
	//si el pais es Argentina
	include("pagina.php");
	break;
 
	case "es-cl":
	//si el pais es Chile
	include("pagina.php");
	break;
 
	case "es-ve":
	//si el pais es Venezuela
	include("pagina.php");
	break;
 
	case "pt-br":
	//si el pais es brasil
	include("pagina.php");
	break;
 
	case "es-co":
	//si el pais es colombia
	include("pagina.php");
	break;
 
	case "es-ec":
	//si el pais es ecuador
	include("pagina.php");
	break;
 
	case "es-uy":
 
	//si el pais es uruguay
	include("pagina.php");
	break;
 
	default:
	//si es algun otro pais
	include("pagina.php");
	break;
}
?>

Como veis, primero creamos una condicional que dara siempre FALSE, entonces entrara a esta linea $cod_pais = substr($_SERVER["HTTP_ACCEPT_LANGUAGE"],0,5); donde creamos una variables que guardara el codigo y lenguaje usado por la zona geografica donde nos encontremos, y el resto es historia, usamos un SWITCH/CASE de toda la vida para determinar que pagina cargar dependiendo del valor de la variable, pero debeis comentar estas lineas

^?View Code PHP

1 2	echo "El codigo de tu pais es: ".$cod_pais; return false;

y claro, cambiar el nombre de la pagina.php dependiendo del caso.

Bueno pues nada mas, facil no?, si teneis alguna duda ya sabes dejad un comentario “pa ver que hacemo quilloo!”

Ver ejemplo

Enviando mensajes con PHP-Mail (II)

admin — Wed, 05 Aug 2009 14:12:39 +0000

Buenas denuevo, ahora amigos de PHP, sorprendidos que mande otro post tan rapido, vamos que yo tambien, pero bueno hay que aprovechar el tiempo muerto en el trabajo no?, a ver en este segundo ejemplo tunearemos un poco mas nuestro formulario de envio de mensaje, el anterior lo entendiste no?, sino ya sabes postea un comentario y vemos que hacemos, 5urs por respuesta jejejejeje mentira, ya sabes que todo esto es Open Source tambien.

A ver a lo nuestro, veamos el siguiente formulario

^?View Code JAVASCRIPT

<form name="frmEnviar" action="enviar2.php" method="post">
de:<input type="text" name="remite" value=""><br>
tu email:<input type="text" name="emailRemite" value=""><br>
email destino:<input type="text" name="destinoEmail" value=""><br>
Titulo Mensaje:<input type="text" name="tituloMensaje" value=""><br>
Mensaje:<input type="text" name="mensaje" value="">
<input type="submit" value="ok">
form>

feo no? pero bueno sirve que es lo que importa, como veis he definido el nombre de los campos a mi parecer, ya vosotros lo hareis segun vuestros requerimientos, ahora veamos el fichero enviar2.php

^?View Code PHP


	$de= $_REQUEST['remite'];
	$remiteEmail= $_REQUEST['emailRemite'];
	$paraEmail= $_REQUEST['destinoEmail'];
	$tituloMensaje= $_REQUEST['tituloMensaje'];
	$mensaje= $_REQUEST['mensaje'];
	$headers = 'From:'.$de."\r\n".'Reply-To:'.$remiteEmail;
 
	mail($paraEmail, $tituloMensaje, $mensaje, $headers);
	echo "Mensaje enviado con exito!";
 
?>

Como veis , primero recuperamos todos los datos y luego armamos las variable $mensaje y $headers para realizar el envio, facil a que si, bueno ya sabeis agregad un formulario en condiciones para que vuestros clientes puedan recibir mensajes desde sus Webs, una cosa que me olvide advertirle en el post anterior, esto probadlo en el Hosting, no el localhost.

Otra cosa, es probable que llegue como correo no deseado, bueno eso es decirle a su cliente de correos que lo registre como un remitente confiable y listo, ahora si podeis probar este ejemplo con vuestro mail. Hasta la proxima pajaros!

Podeis probar el ejemplo aqui

Enviando mensajes con PHP-Mail (I)

admin — Wed, 05 Aug 2009 12:12:30 +0000

Muy buenas amigos del Jquery, bueno ahora veremos algo que siempre interesa en PHP, que es montar un formulario guapo que envie los datos hacia nuestra cuenta de correo, esto es vital en cualquier Web que se digne de serlo, bueno comenzaremos como siempre desde “0″, no porque seamos unos melones, sino porque asi podremos darnos cuenta como “tunear” nuestro formulario y quiza crear cosas mas chulas con esta poderosa herramienta , para los que aun no se han enterado de PHP, vean esto para comenzar , y luego vuelva por aqui para continuar .

Bueno para comenzar, creamos un formulario muy simple, un campo donde se escribira el mensaje y el boton submit, todo dentro del form donde se define el fichero PHP que recibira los datos con el atributo “action” y el metodo de envio de datos definido con el atributo “method”. Esto quedaria asi:

^?View Code JAVASCRIPT

<form name="frmEnviar" action="enviar1.php" method="post">
Mensaje:<input type="text" name="mensaje" value="">
<input type="submit" value="ok">
form>

Simple verdad? , pues ya esta ya tienes lo mas dificil, jejejjjeje que si que esto es lo mas dificil, lo que viene a continuacion es de risa, claro una vez que le cojas el gustito como todo en la vida no?. A ver ahi vamos mirad este es el fichero “enviar1.php” :

^?View Code PHP


	$mensaje= $_REQUEST['mensaje'];
	$headers = 'From: Jose Suarez'. "\r\n".'Reply-To: webtrainner@hotmail.com';
 
	mail('webtrainner@hotmail.com', 'Titulo del Mensaje', $mensaje, $headers);
	echo "Mensaje enviado con exito!";
 
?>

Primer recuperamos el mensaje que enviamos desde el formulario y lo almacenamos temporalmente en la variable $mensaje, despues definimos la variable $headers donde indicamos quien envia el mensaje, porsupuesto el menda, y a quien deberia de responder, claro el menda tambien , esto es importante porque sino saldria algo cutre con un “No body” como remitente, eso no mola nada.

Por ultimo utilizamos el metodo “mail” de PHP al que le enviamos los siguientes parametros: [mail_destino], [Titulo_mensaje], [mensaje], [cabecera_mensaje] y para indicar que se ha enviado con exito, el clasico mensaje.

Podeis probar el ejemplo aqui

Claro tener cuidado con lo que me envias heee pajaroo!, pues ya sabies si teneis algun problema aqui estoy pa lo que sea, menos dinero

Agur!

Validate con Jquery

admin — Mon, 22 Jun 2009 15:24:13 +0000

Aqui nuevamente amigos del Jquery.. ahora veremos una breve introduccion del plugin Validate de Jquery, como los vereis es muy facil de utilizar, posteriormente ire tuneando este ejemplo, pero espero que este post les sirva, el script necesitara definir las reglas “rules” y los mensajes de error “messages”, claro debeis tambien importar las librerias que como siempres las podeis descargar desde aqui.

Descargarte las libreria

No hace falta decir la importancia de validar los campos de formularios, asi que supongo que sabreis como y cuando poder utilizarlo, osea SIEMPREEEEEEEEEEEE PAJARO!!!!

En este ejemplo utilizo un controlador PHP que recibe los datos y ya luego podreis hacer con ellos cualquier cosa. vosotros lo podeis adaptar a vuestros requerimientos.

prueba1.htm

^?View Code JAVASCRIPT

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery-1.2.6.pack.js">script>
<script type="text/javascript" src="js/jquery.validate.min.js">script>
<script type="text/javascript">
script>
<style>
		label { 
      color: #000; 
      font-size: 1em; 
      line-height: 140%; 
      margin: 10px 0 .2em 90px; 
      display: block; 
    }
 
    .error-message, label.error { 
      color: #bb0000; 
      margin: 0;  
      display: block; 
      font-size: 0.5em; 
      font-weight:bold; 
    }
style>
 
<form id="form" name="form" method="post"  action="proceso.php">
	<table width=500>
    <tr> 
        <td><label for="ContactName">nombre:label><td><input name="nombre" type="text" class="textField" maxlength="255" value="" id="ContactName" />
    tr>
    <tr>
        <td><label for="ContactRecipient">email:label><td><input name="email" type="text" class="textField " value="" id="ContactRecipient" />
    tr>
    <tr>
        <td><label for="ContactPhone">fono:label><td><input name="telefono" type="text" class="textField" maxlength="255" value="" id="ContactPhone" />
    tr>
    <tr>
       <td><label for="ContactMessage">mensaje:label><td><textarea name="mensaje" cols="20" rows="3" class="textArea" id="ContactMessage" >textarea>
    tr>
    <tr>
        <td>&nbsp;<td><center><input type="submit" value="enviar datos">center>
    tr>
form>

Como veis el codigo presenta ciertas caracteristicas que empezare a describir, al menos las mas importantes:

$(“#form”).validate({ .- Aqui debeis indicar la id del formulario a validar.
event: “blur”.- Aqui se establece el evento con el que se disparara la validacion, esto es util porque cuando te aparezcan los mensajes de validacion y empeceis a completar los campos y hagas el blur() se iran validando.
rules: .- Aqui se definen las reglas para los campos, recordar ponerle id’s a los campos a validar.
messages:.- Aqui los mensajes que apareceran cuando dejeis un campo sin validar.
submitHandler.- Aqui podeis definir las acciones a realizar cuando la validacion sera correcta.

Pues como veis es bastante sencillo, solo claro procura repetir el ejemplo e ir cambiando cosillas para que veas resultados. Bueno ahora os paso el PHP que recibiria los datos, no es gran cosa, pero os servira para completar la idea.

proceso.php

^?View Code JAVASCRIPT

1
2
3

php
echo "Llegaron los datos --> Nombre:".$_REQUEST[nombre]."/e-mail:".$_REQUEST[email]."/Telefono:".$_REQUEST[telefono];
?>

Listo.. ¡ezto e to chiquillo!

Pruebalo y que os aproveche.

José Suárez Córdova

Galeria de Fotos PHP sin BBDD

Colores Hexadecimales

Enviando mensajes HTML con PHP-Mail (III)

Cargando paginas por pais con PHP

Enviando mensajes con PHP-Mail (II)

Enviando mensajes con PHP-Mail (I)

Validate con Jquery

prueba1.htm

proceso.php

DatePicker, Calendario con Jquery UI

DatePicker

Efecto FishEye con Interface y Jquery

Efecto Accordion con Jquery

Acordion con Interface

Acordion con toggle

Acordion con UI

Tooltip con Interface Jquery

Efecto drag & drop con Jquery Interface

Drag simple

Drag con desplazamiento

Drag con efecto Volver

Drag con desplazamiento fijo

Drag con desplazamiento por ejes

Drag con desplazamiento por Handle

Drag dentro de una capa Contenedora

Dia 7 : Jquery en 7 dias para no iniciados [Efectos]

show()

Hide()

toggle()

Dia 6 : Jquery en 7 dias para no iniciados [Eventos][parte3]

Evento:resize()

Evento: unload()

Evento:submit()

Evento: scroll()

Evento: select()

Dia 5 : Jquery en 7 dias para no iniciados [Eventos][parte2]

Evento: focus()

Evento: keydown():

Evento: keypress()

Evento: keyup()

Evento: mousedown(), mouseup()

Evento: mousemove()

Evento: mouseover / mouseout()

Dia 4 : Jquery en 7 dias para no iniciados [Eventos][parte1]

css(propiedad)

Evento : hover(sobre, salir)

Evento: toggle(fn1,fn2)

Evento : blur(fn)

Evento: change()

Evento: click()

Evento: dblclick()

Evento: error()

Dia 3 : Jquery en 7 dias para no iniciados [Manupulation_DOM][parte2]

after(content)

before(content)

wrap(html)

wrapAll(html)

remove()

empty

replaceWith

clone(bool)

Dia 2 : Jquery en 7 dias para no iniciados [Manupulation_DOM][parte1]

El metodo ready

html( val )

text()

append(content)

prepend(content)

Dia 1 : Jquery en 7 dias para no iniciados [introduccion] [instalacion]

Presentación

Introducción

Características de jQuery

Instalando Jquery

Primer Ejemplo

Segundo Ejemplo