SicilianGirl

modalbox para mootools

2010-02-20T15:39:00.002+01:00

ModalBox para Mootools 1.2.x:

e-moodalbox es una clase que podemos extender gracias a Mootools.
Con ella podemos crear clases heredadas creando no solo las típica galería, sino también, formularios, etc.

e-moodalbox usa javascript no intrusivo y es totalmente accesible, a demás, solo ocupa 2,69 KB (yui compressor).
Es compatible con los navegadores Internet Explorer 6+, Firefox 2+, Safari 3+, Opera 9.5+, Chrome 1.0+ y seguramente otros más que no han sido probados.

La ventaja de e-moodalbox es su flexibilidad, y con un mínimo conocimiento de javascript, podemos crear la cantidad de clases heredadas que queramos.
Tengo pensado realizar clases heredadas genéricas que añadan funcionalidades, mientras tanto os dejo el link con ejemplos, howto y la descarga de la última versión:
modalbox para mootools

Restaurante Loidi

2009-03-17T09:50:00.005+01:00

Cliente: Hotel Condes de Barcelona
Web: Restaurante Loidi
Diseño web: Ricard Catalan Diaz
Maquetación: Xhtml 1.1, CSS 2.1
Programación: Javascript, mootools 1.2 y PHP5
Servicios web: No
Posicionamiento: Si
CMS: Si

Crear elementos con mootools segunda parte

2009-02-19T16:31:00.002+01:00

Este es el segundo artículo de Como crear elementos con mootools, el primero podéis acceder aquí.
En el primer artículo ya vimos como crear un elemento sencillo como puede ser un tag A, DIV, IMG, etc. hasta uno algo más complejo como SELECT por el cual necesitábamos de un bucle para recorrerlo.
En este artículo explicaré un poco los métodos que hay y que podemos hacer con ellos.

Los métodos para insertar un elemento son los siguientes:

- injectBefore: Inserta el elemento antes del indicado en el parámetro
- injectAfter: Inserta el elemento después del indicado
- injectTop: Insertamos arriba del elemento que indiquemos
- injectInside: Insertamos al final del elemento indicado

miElemento = new Element('div', { 'id': 'miElemento', 'html': 'Al insertar con injectInside, se colocará al final' });
miElemento.injectInside($('elementoDestino')); //Inserta miElemento al final del elementoDestino

Esto en HTML se podría traducir de la siguiente manera:

miElemento es una etiqueta DIV con texto dentro, etc.
elementoDestino es otro div que contiene otros div y estiquetas
Después de ejecutar el JavaScript, quedaría asi:

<div id="elementoDestino">
  <p>1er parágrafo</p>
  <p>2on parágrafo</p>
  <div class="miClase">1er layer</div>
  <div id="miElemento">Al insertar con injectInside, se colocará al final</div>
</div>

Antes de la ejecución del JavaScript, no teníamos ese div, y ahora gracias al DOM, hemos insertado un DIV dentro de otro al final del mismo.

Métodos para la entrada y salida (getters y setters):

- get(string): Recibimos el valor del atributo que pasamos por parámetro, ejemplo: $('miElemento').get('id'), recibimos el nombre de su ID
- set(string, value): Insertamos un valor al atributo que le pasamos, ejemplo: $('miElemento').set('id', 'otroElemento'), con eso cambiamos el valor de la ID
- getPoperty(string): Es un alias de get por lo que puede hacer prácticamente lo mismo / Podemos recibir varios atributos a la vez de un elemento
- setPoperty(string, value) / setPoperties: Es un alias de set / Podemos pasar varios atributos a la vez a un elemento
- getNext, getFirst, getLast, getParent, etc.: Estos métodos y otros similares realizan mediante DOM una búsqueda sobre los elementos que hay antes, después, etc. del elemento que indiquemos. Supongamos que tenemos un elemento del tipo INPUT type="submit" y queremos acceder al elemento FORM, usaremos getParent('form').

Varios ejemplos con la entrada y salida de atributos de un elemento:

$('miElemento').set('html', 'Esto es <b>código HTML</b> y se insertará dentro del "miElemento", pero <i>OJO</i> si contenia algo, se perderá.');
var temp = $('miElemento').getProperties('tag', 'id', 'html'); //Esto devolverá el TAG="div", la id="miElemento" y todo el contenido dentro de este DIV mediante HTML
$('miElemento').setProperties({
 'html': 'esto introducirá código HTML dentro de "miElemento" a demás de las siguientes propiedades',
 'title': 'título para este DIV',
 'class': 'miClase'
});

Aquí finalizo este artículo sobre como crear elementos con mootools, en el próximo hablaré sobre eliminar contenido, borrar elementos y algunos ejemplos prácticos sobre los 3 artículos.

Usar Ajax con mootools y JSON

2009-02-19T11:23:00.006+01:00

Lo prometido es deuda, y a continuación explicaré como realizar consultas Ajax con mootools 1.2.x y JSON.
He creado una clase llamada moojson para realizar las peticiones al servidor con Request.JSON de hay un poco mi tardanza, pero ha valido la pena.

Porqué Json? pues muy simple, Request.HTML solo recibimos texto formateado en código html, sin embargo con JSON recibimos un objeto, donde dentro hay propiedades, objetos, arrays, etc. Su gran dinamismo y el estar pensado para trabajar con javaScript, lo hace único y mejor que usar XML.

Un ejemplo que ilustra su sencillez: Si tenemos un objeto "coche" y una propiedad "color", solo con poner coche.color tendremos el color. así de sencillo. En el caso de un array "caracteristicas" dentro de "coche", podremos acceder a su contenido con coche.caracteristicas[0]. A continuación os pongo este ejemplo como sería en JSON:


{ "coche": {
 "color": "rojo",
 "caracteristicas": ["AA","4 Airbags","5 puertas"]
 }
}

La clase que he creado permite realizar multiples consultas ajax dentro del mismo documento a diferentes documentos (PHP, ASP, .NET ...).
Actualmente funciona solo con los tag A (link) y INPUT (del tipo BUTTON), cuando mejore la clase permitirá algunos más.

Para realizar un consulta ajax con un link, lo podemos realizar de la siguiente manera:


<a class="moojson.tu_ID.true.false" href="#tudocumento.php">tu_link</a>

El atributo class es donde especificamos que queremos realizar una consulta, moojson es el nombre por el que se identifica, y siempre deberá empezar así, tu_ID indica a que ID queremos que aparezcan los resultados, es decir, si tenemos un DIV con "id=tu_ID" los resultados recibidos se mostrarán aquí. "TRUE" indica si queremos que se muestre el nombre de la propiedad, es decir, en el ejemplo anterior JSON, una propiedad es color, y su valor rojo, por defecto siempre mostraremos rojo, pero en algunos casos quizás nos interese que se muestre también el nombre de la propiedad. Para finalizar "FALSE" significa si queremos mostrar los resultados en DIV (false) o bien en TABLE (true).

El atributo href indica que documento realizará la consulta ajax. Siempre se deberá poner # delante.
Con esto será suficiente, a continuación os pongo una imagen que muestra su funcionamiento:

La clase mooJson sigue los estándares de W3C y es compatible con el DOCTYPE XHTML 1.0 Strict / Transitional y XHTML 1.1
A demás funciona con los navegadores Internet Explorer 6, 7 y 8, Firefox 2 y 3, Safari 2 y 3, Opera 9.5 y Chrome 1.0

Para finalizar, solo deciros que la clase también permite recoger los datos del formulario y enviarlos, de esta manera, podremos realizar multiples combinaciones realizando consultas a la base de datos.

Os dejo un link con el ejemplo y otro para descargar Usar Ajax con mootools y JSON

ejemplo

descargar

NOTA: el ejemplo del formulario no funciona, pues el servidor donde esta alojado no tiene base de datos, pero si queréis os he puesto un .sql con la tabla y los insert para hacer las pruebas.
Cualquier duda de la clase, mejora, etc. agradecería que me informárais.
Gracias y un saludo

Ibidem Group

2009-01-16T17:33:00.004+01:00

Cliente: Ibidem Group
Web: Ibidem Group
Maquetación: Xhtml 1.1
Programación: Javascript, PHP, mootools 1.2
Servicios web: No
Posicionamiento: Si
Nota: Creación del formulario de presupuesto con javascript, mootools y PHP5

Crear elementos con mootools primera parte

2008-12-22T16:18:00.008+01:00

Una de las grandes ventajas de cualquier framework de javascript es poder acceder con gran facilidad al DOM. Con esto quiero decir, poder recorrer y acceder a cualquier contenido de un documento html / xhtml.

En esta primera parte, quiero poner algunos ejemplos sencillo de como se usa y un explicacion de los mismo:


this.link = new Element('a',{
 'href': 'http://siciliangirl.blogspot.com',
 'title': 'Un blog sobre web 2.0, xhtml, css, javascript',
 'html': 'siciliangirl blog'
});
this.link = new Element('img',{
 'src': 'http://siciliangirl.blogspot.com/images/mi_image.jpg',
 'alt': 'titulo de mi imagen'
})

Con new Element podemos crear un elemento o tag html, como el link expuesto en el ejemplo. Incluso podríamos añadir a que clase pertenece o si tiene una id única, o bien, añadirle estilos propios, etc.
Ocurriría lo mismo si queremos crear un nuevo div:


this.link = new Element('div', {
 'id': 'id_unica',
 'class': 'mi_clase'
})

Aunque hay muchas propiedades dentro de un elemento hay que seguir el estándar marcado por W3C consortium y por nuesto doctype, es decir, a un elemento div no le pondremos la propiedad src que es propia de algunos elementos como img.
Para añadir más dinamismo, imaginemos que queremos hacer un listado dinámico (tag select), se podría hacer de la siguiente manera:


this.ids = new Element('div',{ 'class': 'selection' });
this.selects = new Element('select');
for(var i=0; i<options.tipo.length; i++){
 this.tipo = new Element('option', { 'name': i, 'text':options.tipo[i] });
 this.tipo.injectInside(this.selects);
}
this.selects.injectInside(this.ids);
this.ids.injectInside(select);

Aquí en este ejemplo hay más conceptos, vamos por partes:

options.tipo: options es un objeto que contiene un array llamado tipo y que recorremos con un bucle
injectInside: es un método que tiene Elements y sirve para indicar que incrustemos el elemento creado dentro de otro elemento al final de su contenido.
1. Creamos un elemento div con las clase 'selecction'
2. Creamos un elemento select
3. Recorremos con un bluce un array y dentro creamos por cada contenido dentro del array un elemento del tipo option
4. Incrustamos los nuevos elementos del tipo option dentro del elemento del tipo select
5. Fuera del bucle incrustamos el elemento sel tipo select dentro del elemento div previamente creado

En próximos artículos iré ampliando como crear elementos con mootools, entre ellos explicaré los métodos de Element.

Eidata

2008-12-16T17:15:00.002+01:00

Cliente: Eidata Internet Services
Web: Eidata
Diseño web: Ricard Catalan Diaz
Maquetación: Xhtml 1.1, CSS 2.1
Programación: Javascript, mootools 1.2 y PHP
Servicios web: No
Posicionamiento: Si
CMS: No

Crear una pasarela de pago con BBVA tercera parte

2008-12-09T10:37:00.014+01:00

En este tercer artículo sobre crear una pasarela de pago con BBVA, explicaré el archivo pasarela.php.

Brevemente expondré los pasos que hará el cliente en nuestro comercio y que importancia tiene el documento PHP pasarela:

- El cliente insertará los datos de compra/reserva en el formulario que hayamos creado.
- Finalizada la insercción de datos mostraremos el archivo confirm.php (por ejemplo) según la primer parte del artículo
- El cliente al confirmar la compra, enviaremos mediante POST la variable $xml, con formato XML que contiene la id transaccion, el precio formateado, la firma de la compra, etc.
- Al cliente se le redirecciona al tpv virtual del BBVA donde realiza los pasos finales de la compra.
- El BBVA nos enviará mediante GET una variable peticion en formato XML a pasarela.php, independientemete de si se realizó o no la compra
- En pasarela.php realizaremos los pasos siguientes:
- Parseo del XML enviado, extracción de la id transacción y confirmación del coderror (el coderror es devuelto por el bbva y nos indica si la compra se realizó o no)
- Si la compra se realizó, accedemos al archivo XML guardado en el servidor con el nombre de la id transacción
- Extraemos los datos del cliente, y lo insertamos en nuestra base de datos
- Borramos el archivo XML (opcional), y enviamos un e-mail al usuario que realizó la compra/reserva y otro e-mail al comercio.

Pasarela.php es llamado una vez se confirma o no la compra/reserva, por lo tanto no mostraremos ningún dato, solo realizaremos un proceso de la información y realizaremos los pasos según el estado de la compra.
El tpv del BBVA mostrará la confirmación de la compra o el error que hubo, justo después de enviar los datos a pasarela.php, y nos dará la opción mediante un botón de redirigir a nuestro comercio. Esto es opcional y los pondremos al enviar la variable $xml mediante POST dentro de la etiqueta urlredir.

A continuación pongo parte del código:


<?php
//Recibimos variable peticion el BBVA, y confirmamos que hayan datos
if(!empty($_GET['peticion'])){
 require_once("includes/admin/Connect_db.php");
 require_once("includes/admin/info_db.php");
 require_once('pasarela/mailing.php'); //Usado para el envio de e-mails. Usa la clase PHPMAILER
 //Abrimos el fichero en modo de escritura
 $peticion=$_GET['peticion'];
 $file='peticion/pasarela.xml';
 $pasarela = fopen($file,"w+");
 //Escribimos temporalmente el archivo XML recibido por el BBVA. Siempre estará en modo sobreescritura
 fputs($pasarela,$peticion);
 chmod($file,0755); //Modificamos los permisos
 fclose($pasarela); //Cerramos el fichero 
 //Leemos el archivo guardado en XML mediante SimpleXML_load_File, esta funcion esta incluida en PHP 5.1.0
 //o bien Libxml 2.6.0. Convierte un XML en un objeto, facilitando su parseo y acceso.
 $resXml = simplexml_load_file($file);
 foreach ($resXml->respago as $res){
  $idtrans=$res->idtransaccion;
  $coderror=$res->coderror; //Coderror nos indicará si se realizó o no la compra
 }
 //Recuperamos el XML con la misma IDTransaccion y los datos del cliente
 //Coderror=0000; indica que se realizó correctamente la compra.
 if($coderror==0000){
  $fileTrans="xml/$idtrans.xml";
  //Comprovamos que exista el fichero
  if(file_exists($fileTrans)){
   $resXml = simplexml_load_file($fileTrans);
   foreach($resXml->transid as $res){
    $nom=$res->nombre;
    $apellido=$res->apellido;
    $email=$res->email;
    $lang=$res->idioma; //Idioma que usa el cliente durante la reserva, para enviar el correo según idioma usado
    $precio=$res->precio;
    /* ...  Aquí extraeremos el resto del XML guardado, dependerá de lo datos guardados */
   }

Como se puede ver en pasarela.php realizaremos bastantes comprovaciones de errores. (He implementado varias, pero se pueden realizar todo tipo de comprovaciones).
Este código no necesita mucha explicación:

Recibimos una variable, guardamos temporalmente sus datos y comprovamos si se realizó la compra, si es asi, accedemos a los datos del cliente guardados en el XML.

En otro artículo ya dije que este archivo es el más "dinámico", porque según nuestro comercio puede ser diferente, y por lo tanto se debe considerar este ejemplo como tal.
Continuo con otra parte del código:


 //Creamos el e-mail con los datos (estos datos serán usados en el caso de error) y nos conectamos a la Base de Datos
 $clientname=$nom." ".$apellido; $body="Datos de Contacto del cliente:<br><br>";
 $body.="Localizador de reserva <b>$idtrans</b><br>";
 //... Aqui va el resto del cuerpo del e-mail
 $conexion = new Connect_db($hostname,$dbname,$username,$password); //Creamos instancia del objeto Connect DB
 $conexion->getConnect(); //Nos conectamos a la base de datos
 //GUARDAMOS LOS DATOS EN LA BASE DE DATOS de la RESERVA  si el estado es OK
 $sql="INSERT INTO $reservas VALUES($idtrans,'$nom','$apellido','$email','$telf1','$telf2','$nacion','$fecha',$pase,'$servicio',$adults,$nens,'reservado',$precio);";
 $res=mysql_query($sql);
 if($res>0){ //Si se guardó correctamente en la base de datos
  unlink($fileTrans);//Borramos el archivo del XML con los datos del cliente
  //Envio de correo al cliente dela reserva y al cliente de la web
  //OPCIONAL: Si nuestro comercio esta en varios idiomas, aquí podremos elegir un envio de correo según el idioma del usuario
  switch($lang){
   case 'es': $asunto="Reserva $nombre-del-comercio num.$idtrans";
    //CLIENTE Creamos instancia para enviar mail al cliente
    //Esta clase "Mailing" envía un correo mediante PHPMAILER, aquí en vez de usar esta clase, podemos usar directamente una llamada a PHPMAILER o la funcion que usemos para enviar el correo
    $mail= new Mailing($email,$nombre-del-comercio,$asunto,$body);
    $mail->sendMail(); //enviamos mail al cliente
    //Instancia para enviar mail al comercio
    $mail2= new Mailing($email,$clientname,$asunto,$bodyAlt); //$bodyAlt es un texto alternativo al que se envia al cliente
    $mail2->sendMailWebClient(); //enviamos mail
    break;
   case 'en': $asunto="$nombre-del-comercio reservation num.$idtrans""; //Idioma inglés
    //... Resto del código del envio de correo

En este código creamos una variable $body donde almacenamos el cuerpo del e-mail, y lo usaremos por si surge algún error.
Dentro del switch es donde pondremos todos los datos del envio de e-mail al cliente y lo enviaremos. Hay que tener en cuenta que no será necesario usar un switch si solo usamos un idioma en nuestro comercio.
A continuación pondré el resto del código con los errores, que puedan surgir:


  }else{ //Error al guardar los datos, reintentamos la insercción.
   $reintento=0;
   while($reintento<5){
    sleep(1);//Esperamos 1 segundo antes del siguiente reintento
    $res=mysql_query($sql);
    if($res>0) break; //Si hubo éxito en la insercción, salimos del bucle con un break
    $reintento++;
   }
   if($res>0){
    unlink($fileTrans);//Borramos el archivo del XML con los datos del cliente
    $bodyAlt.="<b>Esta reserva a requerido $reintento intentos de registro en la Base de Datos.</b>"; //Esto se añadirá solo en el envio al comercio a modo informativo
    switch($lang){
     case 'es': /*... Aqui va el resto de código igual que el anterior */;
    }
   }else{ //Hubo error en los siguientes 5 intentos, se envia e-mail al comercio indicando el error y un e-mail al cliente con la reserva, puesto que existe un reserva, sin embargo ha fallado la insercción en la base de datos, tras 5 intentos
    $errorMysql=mysql_error(); //GUARDAMOS ERROR DE MYSQL
    $error2="Ocurrió un problema en la BD tras $reintento intentos de inserción, el error que devolvió MySQL es el siguiente:<br>"; //esto es parte del e-mail que enviaremos al comercio
    $error2.="<b>".$errorMysql."</b><br><br>";
    $dia=date('d');
    $mes=date('n');
    $hora=date('G\:i\:s');
    //AQUI va el resto del e-mail para envia el correo al comercio, y posteriormente el envio de e-mail al cliente, igual que en los anteriores casos
   }
  }
 }else{ //En el caso de que no exista el archivo XML
  $dia=date('d');
  $mes=date('n');
  $hora=date('G\:i\:s');
  $asunto="Error: xml no encontrado";
  $body="Ocurrio un problema el dia $dia del mes $mes a la hora $hora<br>";
  //AQUI va el resto de código para el envio de correo al Comercio con el error.
 }

Primero hago un reintento de insercción en la base de datos. Es posible que esté saturado el servicio o que pueda surgir algún problema, si usamos transacciones con SQL, este paso no sería necesario.
Para no saturar sel servicio hago un reintento 5 veces con una espera de 1 segundo por reintento. (Podemos cambiar el número de reintentos y tiempo de espera)

Desde mi punto de vista, es preferible hacer varios reintentos, pues estamos trabajando con compras reales, y siempre es preferible saturar el servicio unos segundos, que perder el registro de la compra en nuestra base de datos.

Posteriormente de los reintentos, si tuvo éxito alguno, salimos del bucle y ejecutamos el envio de e-mail, en caso contrario enviaremos un e-mail con el error ocurrido al comercio y un e-mail normal de compra al cliente, pues la compra existe realmente, aunque no aparecerá en nuestra base de datos.

Para finalizar esta parte del código, depuro el error en el caso de no existir el XML.
En este caso, el problema sería grabe, pues no tendremos los datos del cliente que realizó la compra.
Este error será común si a la hora de generar la id transacción no la creamos con 12 dígitos, y el tpv virtual del BBVA añadirá un cero a la izquierda, por lo que ocasionará una id transacción erronea. Hay que tener mucho cuidado con la generación de esta clave única

Por último pongo el resto de código:


 //Este Error se produce cuando el coderror devuelto por el BBVA no coincide con la compra realizada (siempre es 0000)
 }else{
  //Volvemos a leer el XML para parsear la información del DESERROR
  foreach ($resXml->respago as $res){
   $deserror=$res->deserror; //Aquí esta la descripción del error devuelto por el BBVA
  }//Leemos el XML del cliente con su ID Trans
  $fileTrans="xml/$idtrans.xml";
  if(file_exists($fileTrans)){
   $resXml = simplexml_load_file($fileTrans);
   foreach($resXml->transid as $res){
    $nom=$res->nombre;
    $apellido=$res->apellido;
    $precio=$res->precio;
    //AQUI va el resto de código de extracción de dato del XML
   }
   $dia=date('d');
   $mes=date('n');
   $hora=date('G\:i\:s');
   $clientname=$nom." ".$apellido;
   $asunto="Compra no realizada: coderror no correcto";
   $body="Se intentó realizar una compra el dia $dia del mes $mes a la hora $hora<br>";
   $body.="El BBVA devolvió este error (code error:<b>$coderror</b>): <b>$deserror</b><br>";
   //Enviamos un e-mail al comercio con los datos, por si les intersa ponerse en contacto con el cliente.
   $mail= new Mailing('un e-mail','Compra-no-realizada',$asunto,$body);
   $mail->sendMailWebClient(); //enviamos mail al comercio
   unlink($fileTrans);//Borramos el archivo del XML con los datos del cliente, al enviar un e-mail con los datos
  } //Hay que tener en cuenta que aquí compruebo si existe o no el XML, se puede realizar.
 }
}

Esta última parte, compruebo si el BBVA devolvió un error, y recojo que tipo de error es y envio un e-mail al comercio.
En este caso no se debe enviar ningún e-mail al cliente, puesto que la compra no existe, es un e-mail informativo para el comercio, indicandole los datos del cliente que intentó realizar una compra.

Este es el útimo artículo de la creación de un pasarela de pago con bbva, estos son los otros 2 artículos:

Puede descargar los archivos del ejemplo aquí:

descargar

Trabajando con Quinta Dimensión

2008-12-05T17:15:00.003+01:00

Aunque este es un artículo que se sale un poco de los temas habitualmente escribo, creo que es de interés para algunos.
Hace un tiempo me topé con un juego espacial llamado 5dim o Quinta Dimensión, la dirección es: http://www.5dim.es y se juega a través del navegador.
Es un tipo de juego al estilo Ogames, aún así es muy superior, aunque todo hay que decirlo, esta en fase beta y es por ello que decidí colaborar en el proyecto.
Actualmente estoy realizando la parte de diseño y maquetación, para crear un nuevo skin o theme, porque el que hay es algo anticuado. En breve estará listo el diseño y será implementado sobre finales de diciembre, si todo va bien.

Os invito a que entréis al juego 5dim, un saludo.

Crear una pasarela de pago con BBVA segunda parte

2008-12-03T15:46:00.015+01:00

Este es el segundo artículo de la creacion de una pasarela de pago con BBVA
Trataremos los archivos incluidos Desofuscar.php y IdTransaccion.php

IdTransaccion.php sirve para crear un número de reserva (id de la transacción), es un número identificativo único para cada compra/reserva que realiza el usuario en nuestro comercio, a continuación os pongo el código y luego lo comento, veréis que es muy sencillo:


<?php
/*****************************************************
/** @Author: Ricard Catalan
/** @return: IDTransaccion
/** Clase usada para devolver un identificador de la transacción único
/****************************************************/

class IdTransaccion{
 private $y;
 private $ddd;
 private $hh;
 private $mm;
 private $ss;
 private $an;
 private $id;
 public function __construct(){
  $this->setIdTrans();
 }
 private function setIdTrans(){
  $this->y=substr(date('y'),strlen(date('y'))-1,strlen(date('y')));
  $this->ddd=date('z'); //Devuelve el día del año desde 0 a 365
  if($this->ddd < 10) $this->ddd= '00'.$this->ddd; //añadimos 2 ceros en el caso de ser menos de 10
  else if($this->ddd > 9 && $this->ddd < 100) $this->ddd= '0'.$this->ddd; //añadimos un 0 en el caso de ser mayor de 9 y menor de 100
  $this->hh=date('H'); //Devuelve la hora en formato 00 a 24
  $this->mm=date('i'); //Devuelve los minutos desde 00 a 59
  $this->ss=date('s'); //Devueve los segundos en 00 a 59
  $this->an=rand('11','99'); //Devuelve un valor aleatorio ente 10-99
 }
 public function getIdTrans(){
  return $this->id=$this->y.$this->ddd.$this->hh.$this->mm.$this->ss.$this->an;
 }
}
?>

He creado una pequeña clase con PHP5, en la que creo un número único de 12 dígitos con date() desde la hora del servidor:

- Primero recojo el último digito del año
- Los días del año de 001 a 365, es muy importante que tenga 3 dígitos porque sino date('z') nos puede devolver por ejemplo 32 y el número generado será de 11 dígitos y el TPV virtual del BBV le añadirá un 0 delante, puesto que siempre debe ser un número de 12 dígitos, y al ser diferente nunca podremos recorger los datos del cliente guardados en XML.
- El resto de valores son la hora, los minutos y segundos con 2 dígitos cada uno
- Por último el número aleatorio de 2 dígitos. Hay que tener en cuenta que dependiendo de la versión de PHP que tengamos en el servidor podrémos usar milisegundos que siempre será mejor que 2 dígitos aleatorios.

Desofuscar.php es un script que nos facilitará BBVA en la documentación que encontraremos en el TPV virtual del BBVA.
Sin embargo, es bastante "tosco" como esta realizado y yo lo he adaptado a PHP5 orientado a objetos por lo que el código es más elegante y más fácil de hacer la "llamada".
Os pongo la clase como quedaría, pero sin poner todo el código, puesto que ya lo facilita BBVA:


<?php
/*****************************************************
/** @Author: Ricard Catalan
/** @return: pal_sec
/** Clase usada para devolver la palabra desofuscada
/****************************************************/
class Desofuscar{
 private $pal_sec_ofuscada;
 private $clave_xor;
 private $cad1_0="0";
 private $cad2_0="00";
 private $cad3_0="000";
 private $cad4_0="0000";
 private $cad5_0="00000";
 private $cad6_0="000000";
 private $cad7_0="0000000";
 private $cad8_0="00000000";
 private $pal_sec="";
 public function __construct($ofuscada,$clave,$idcomercio){
  $this->pal_sec_ofuscada=$ofuscada;
  $this->clave_xor=$clave.substr($idcomercio,0,9).'***';
  $this->Desofuscar(); //Desofuscamos
 }
 private function Desofuscar(){
  $trozos=explode (";", $this->pal_sec_ofuscada);
  $tope=count($trozos);
  for ($i=0; $i<$tope ; $i++){
   $res = "";
   $pal_sec_ofus_bytes[$i] = decbin(hexdec($trozos[$i])); 
   if (strlen($pal_sec_ofus_bytes[$i]) == 7){ $pal_sec_ofus_bytes[$i] = $this->cad1_0.$pal_sec_ofus_bytes[$i]; }
    if (strlen($pal_sec_ofus_bytes[$i]) == 6){ $pal_sec_ofus_bytes[$i] = $this->cad2_0.$pal_sec_ofus_bytes[$i]; }
    ... /* aquí va el código restante del manual */
  }
 }
 public function getDesofuscar(){
  return $this->pal_sec;
 }
}
?>

Simplemtente con crear una instancia de la clase Desofuscar y hacer una llamada al método getIdTrans() obtendremos la palabra desofuscada.
Podéis ver como se realiza la instancia de la dos clases (Desofuscar y IdTransaccion) en la primera parte del artículo aquí.

Hasta aqui el segundo artículo, en el tercer artículo veremos el archivo pasarela.php para que sirve y las múltiples opciones que tendremos en él.

Crear una pasarela de pago con BBVA primera parte

2008-12-03T12:18:00.037+01:00

Es la primera parte de una serie de artículos relacionados con la creación de una pasarela de pago.
En concreto pondré un ejemplo con el TPV virtual del BBVA.

Todo el código siguiente esta comentado y es a modo de ejemplo, para poder implementar la pasarela de pago con nuestro comercio.
En este ejemplo no trataré el servicio web SOAP y la implementación se llevará a cabo pasando los datos al TPV virtual y redirigiendo al usuario al mismo.

Esta parte del código lo pondré dentro de un archivo (por ejemplo: confirmacion.php) y será el paso final del comercio, donde el cliente confirmará la compra:

//************************************************************************//
// INTEGRACIÓN PASARELA BBVA con PHP5 (parcialmente orientado a objetos)
// @Author: Ricard Catalan
// Licencia: GNU
// NOTA: Esto es un ejemplo y sigue los pasos de la documentación descargada desde
// el TPV virtual del BBVA para su implementación en PHP ,y en ningún caso substituye
// a la documentación.
//************************************************************************//

require_once('includes/admin/Connect_db.php'); //Incluimos la clase conexión
require_once('includes/admin/Select_db.php');  //Incluimos una clase con métodos SELECT a MySQL
require_once('includes/admin/info_db.php');  //Incluimos datos de la conexión
require_once('pasarela/IdTransaccion.php'); //Clase que genera la ID de la transacción
require_once('pasarela/Desofuscar.php'); //Clase para Desofuscar la palabra secreta

$conexion = new Connect_db($hostname,$dbname,$username,$password); //Creamos instancia del objeto Connect DB
$conexion->getConnect(); //Nos conectamos a la base de datos

// IDCOMERCIO: es el número del comercio que tendrá el cliente (aparece en el panel de control del TPV del BBVA)
//TERMINAL: el número de terminal (aparece en el panel de control del TPV del BBVA)
//PALABRA: Esta es la palabra clave que se pone en el TPV del BBVA y que posteriormente generará la clave Ofuscada
//OFUSCADA: El el contenido del .TXT descargado una vez puesta la "palabra clave", tiene la estructra siguiente XX;XX;...etc.
$sql="SELECT idcomercio, terminal, palabra, ofuscada FROM rpreferencias;"; //Extraemos los datos necesarios
$res=mysql_query($sql); //recojemos la consulta. NOTA: Hay que tener en cuenta que no hago comprobación de errores
$dades=mysql_fetch_array($res);
$idcomercio=$dades['idcomercio'];
$terminal=$dades['terminal'];
$clave=$dades['palabra'];
$ofuscada=$dades['ofuscada'];

$clave_xor=$clave.substr($idcomercio,0,9).'***'; //Creamos la CLAVE_XOR según el manual
$trans=new IdTransaccion; //Creamos instancia de la clase IdTransaccion
$idTrans=$trans->getIdTrans(); //recojemos la ID de transacción para petición
//Obtenemos Palabra desofuscada
$desofuscar=new Desofuscar($ofuscada,$clave,$idcomercio); //Instancia de la clase Desofuscar
$clave=$desofuscar->getDesofuscar(); //recojemos la clave Desofuscada

//El paso siguiente es convertir el formato del precio XXX.XX por XXXX (quitando la coma)  -> para calcular la firma
$explo_preu=explode(".",$preuTotal);// formatear el importe de 87,5 a 875
$preuTemp=$explo_preu[1];
if(strlen($preuTemp)==1) $preuTemp=$preuTemp.'0'; //En el caso de tener: XX.5 pasamo a XX.50
elseif(strlen($preuTemp)==0) $preuTemp='00'; //En el caso de tener: XX pasamo a XX00 (añadiendo dos ceros finales)
$importe_formateado=$explo_preu[0].$preuTemp; //Guardamos el importe formateado para el calculo de la firma
$precio=$explo_preu[0].'.'.$preuTemp; //Guardamos el importe con el formato correcto, que usaremos en el envio del XML
$moneda='978'; //Euro

//Creación de la FIRMA
$datosfirma=$terminal.$idcomercio.$idTrans.$importe_formateado.$moneda.$clave;
$firma=strtoupper(sha1($datosfirma)); //Generación SHA-1 por PHP5

Los archivos que se incluyen al principio del código IdTransaccion.php y Desofuscar.php serán tratado en la segunda parte del artículo, el resto se usan para la conexión a la base de datos y no hace parte del artículo, ya que me extendería demasiado.

- Primero nos conectamos a nuestra base de datos y recogemos los datos del idcomercio, la terminal, la palabra clave que nosotros habremos puesto, y la palabra ofuscada generada en el TPV del BBVA por la palabra clave.

- La clave_xor esta implementada dentro del archivo Desofuscar.php y lo he puesto aquí a modo de ejemplo

- El siguiente paso es formatear el precio (ej. 99,50 €) a 9950 para generar la firma y 99.50 para el envio del XML al TPV virtual del BBVA

- Los datos que hemos ido recogido, son necesarios para la generación de la firma que se envía mediante POST dentro del XML, y que el BBVA usa para autentificar que el comercio es correcto.

A continuación sigo con el resto del código:

//Creamos  una variable en formato XML
//URLCOMERCIO: es el archivo PHP por el cual BBVA hará una llamada pasandole los datos de la compra  (correcta o incorrecta)
//URLREDIR: Una vez realizada la compra y el cliente salga del TPV, será redirigido a esta dirección (OPCIONAL)
$xml="<tpv>
 <oppago>
  <idterminal>$terminal</idterminal>
  <idcomercio>$idcomercio</idcomercio>
  <idtransaccion>$idTrans</idtransaccion>
  <moneda>$moneda</moneda>
  <importe>$precio</importe>
  <urlcomercio>http://www.tucomercio.com/pasarela.php</urlcomercio>
  <idioma>$lang<<idioma>
  <pais>$pais</pais>
  <urlredir>http://www.tucomercio.com/estado_transaccion.php</urlredir>
  <firma>$firma</firma>
 </oppago>
</tpv>";

<form action="https://w3.grupobbva.com/TLPV/tlpv/TLPV_pub_RecepOpModeloServidor" method="POST">
/* AQUI VA EL CÓDIGO HTML del FORMULARIO que queramos */
<input type="hidden" name="peticion" value="<?php echo $xml; //ponemos en un campo oculto la variable que contiene el XML ?>" />
</form>

/******  Guardamos una copia con los datos del cliente en formato XML en el servidor  ******/
//Aqui guardaremos los datos de la compra de un cliente, esto puede variar según los datos que queramos guardar
//El siguiente XML es un ejemplo:
$xml2="<?xml version='1.0' encoding='UTF-8'?>
<tpv>
 <transid>
  <nombre>$nom</nombre>
  <apellido>$cognom</apellido>
  <email>$email</email>
  <telf1>$telf1</telf1>
  <telf2>$telf2</telf2>
  <nacion>$nacion</nacion>
  <fecha>$fecha</fecha>
  <pase>$pase</pase>
  <servicio>$serv</servicio>
  <adults>$adults</adults>
  <nens>$nens</nens>
  <idioma>$language</idioma>
  <precio>$precio</precio>
 </transid>
</tpv>";
//NOTA: la primera línea es para guardar texto codificado en UTF-8, podemos quitarla, si no lo queremos

$file="xml/$idTrans.xml";
$transc = fopen($file,"w+"); //Creamos un fichero y por nombre le ponemos la ID TRANSACCÓN
fputs($transc,$xml2); //Añadimos el contenido
chmod($file,0755); //Modificamos los permisos para posteriormente poder  hacer un borrado.
fclose($transc); //Cerramos el fichero

Esta parte del código tambien la pondriamos dentro del ejemplo confirmacion.php

El primer XML, se guarda dentro de una variable, y se envía junto con los datos que requiere el BBVA mediante POST a la URL que indica en el manual.
En el formulario que he puesto como ejemplo, la URL es correcta, pero es posible que la modalidad de pago que tenga vuestro comercio sea diferente, este ejemplo usa la modalidad 3D Secure, pero cambiando la url puede servir para cualquier forma de pago, pues los datos que enviaremos (xml) siempre son iguales.

En el último XML guardaremos los datos del cliente que necesitemos en el servidor como un archivo XML.
El XML se guardará de la siguiente manera: 826511175711.xml, dentro de la carpeta /XML o la que se quiera.
Este XML se usará después que el cliente acceda a la pasarela de pago del BBVA y realize la compra. Es entonces cuando el BBVA hace una llamada a http://www.tucomercio.com/pasarela.php (o la urlcomercio que nosotros hayamos puesto) y nos pasará una variable mediante GET, en formato XML con los datos de la compra.
En estos datos devueltos por el BBVA se incluye la ID Transacción que concuerda con el nombre del XML guardado en el servidor, así se podrá recoger todos los datos del cliente (nombre, apellidos, dirección, etc.) para guardarlo en nuestra base de datos, enviar e-mails etc.

En la segunda parte, trataremos los archivos IdTransaccion.php y Desofuscar.php

Gruas Orion

2008-11-27T15:23:00.006+01:00

Cliente: Gruas Orion S.L.
Web: Gruas orion
Diseño web: Ricard Catalan Diaz
Maquetación: HTML 4.1, CSS 2.1
Programación: Javascript y PHP (junto a la clase phpmailer) para el formulario
Servicios web: No
Posicionamiento: No
CMS: No

Tablao de carmen

2008-11-27T13:43:00.005+01:00

Cliente: tablao de carmen
Web: Tablao de carmen
Diseño web: Deboom
Maquetación: XHTML 1.0 Strict, CSS 2.1 y Flash
Programación: Javascript y PHP
Servicios web: Si XML-RPC para Turismo de Barcelona
Posicionamiento: No
CMS: Si

Oasis piscinas

2008-11-27T13:18:00.009+01:00

Cliente: OasisPool s.l.
Web: oasis piscinas
Diseño web: Ricard Catalan Diaz
Maquetación: HTML 4.1, CSS 2.1 y Flash 8
Programación: ActionScript, Javascript y PHP (junto a la clase phpmailer) para el formulario
Servicios web: No
Posicionamiento: No
CMS: No

Galeria imagenes

2008-11-27T12:43:00.001+01:00

Aquí va la galería de imágenes

Calendario con mootools 1.2

2008-11-27T10:34:00.016+01:00

Hace unos meses estuve buscando un calendario en javascript que funcionara con mootools y que fuese sencillo de implementar.
Después de buscar, me encontré en el blog de Andrés Nieto, pero por desgracia los links de los ejemplos no funcionaban y de nuevo me vi buscando por google, pero al final obtuve la recompensa, lo conseguí encontrar.
Pero no es oro todo lo que reluce y al probarlo vi que solo funcionaba para la versión 1.1 de mootools, así que me puse manos a la obra y lo arreglé para que funcionara para la versión 1.2

La implementación es muy simple:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Calendario para mootools 1.2</title>
<link href="calendario.css" el="stylesheet" type ="text/css" media="screen" />
<script src="mootools.js" type="text/javascript"></script>
<script src="calendario.js" type="text/javascript">lt;/script>
</head>
<body>
<input class="ncalendar" name="calen" maxlength="20" id="calen" type="text" value="Seleccione una fecha" />
</body>
</html>

Os dejo un link con el ejemplo y otro para descargar el calendario con mootools

descargar

Capturar variables con javascript desde una url

2008-11-25T17:21:00.022+01:00

No hace mucho me surgió la idea de realizar un formulario en HTML enviando las variables mediante POST a un php donde realizaba el envio de e-mail (hasta aquí algo normal).
Normalmente el formulario lo realizaba integramente con php y se cargaba sobre si mismo, o bien lo redireccionaba a otro html indicando el estado de su envio.
La idea que me surgió es usar la segunda opción de redirigir a otro documento enviando variables mediante GET y capturar variables con javascript desde una url , por ejemplo: http://www.undominio.com/formulario.html?estado=ok.

A continuación propongo un ejemplo usando mootools, por el cual podremos recibir una cantidad n de variables:


/* Capturamos la variable enviado mediante GET con JavaScript */
window.addEvent('domready', function() {
 var estado = window.location.search;
 if((/^\?/).test(estado)){
  var resultado = estado.substr(1,estado.length)+'&'; //Quitamos  ? y añadimos & al final
  var variables = resultado.split(/\=\w+\&/);
  var contenido = resultado.split(/\w+\=/);
  for(var i=0; i<contenido.length; i++) contenido[i] = contenido[i].substr(0,contenido[i].length-1);
  contenido.shift(); //Quitamos el valor de la primera posición del array al estar vacio
  
  /* OPCIONAL: ejemplo que muestra una capa indicando el envío correcto o no */
  var capa = $('estado');
  if(variables[0]=='estado' && contenido[0]=='ok'){
   capa.addClass('enviado'); //Cambiamos la CLASS a ENVIADO
   capa.setStyle('visibility','visible'); //Visible, por defecto hidden
   capa.setStyle('height','16px');
   capa.setStyle('padding','10px');
   capa.setStyle('margin-bottom','20px');
   capa.set('html','Se ha enviado correctamente el formulario de contacto.'); //Ponemos el texto
  }else if(variables[0]=='estado' && contenido[0]=='ko'){
   capa.addClass('error'); //Cambiamos la CLASS a ERROR
   capa.setStyle('visibility','visible'); //Visible, por defecto hidden
   capa.setStyle('height','16px');
   capa.setStyle('margin-bottom','20px');
   capa.setStyle('padding','10px');
   capa.set('html','Ocurrió un error durante el envio, por favor inténtelo más tarde.'); //Ponemos el texto
  }
 }
});

Variables y contenidos son dos arrays, el primero contiene el nombre de las variables y el segundo el valor de las variables.
En el comentario donde aparece OPCIONAL, lo he usado en este blog, y con javascript oculto i/o muestro el resultado del envío.

Este pequeño script tiene muchas más utilidades y solo he mostrado un posible uso, espero que os sirva de ayuda.

formulario de contacto

2008-11-25T10:21:00.005+01:00

Rellene el formulario correctamente, y en breve me pondré en contacto con usted:
(Si quiere solicitar información y/o presupuesto para realizar una web, rellene el teléfono correctamente, de lo contrario puede poner ceros si no quiere faciltar esta información)

CSS 3 y Safari 3.1

2008-11-24T16:55:00.002+01:00

Después de la aparición de Safari 3.1 y posterior, todos aquellos que anhelaban poder aplicar efectos, como sombreado en la tipografía o bien añadir/incrustar una tipografía en un página web, ahora con Safari se ha hecho realidad.

Lo podéis comprobar desde este mismo blog, todo aquel que acceda con Safari, podrá visualizar los 2 efectos antes comentados.
Acualtmente, tanto Opera 9.6 como Firefox 3.0 solo soportan el sombreado de letras en este blog, para poder visualizar al tipografía se requiere Safari

En esta web: http://www.css3.info/ tenéis toda la información de las nuevas posibilidades que traerá la nueva versión CSS 3 aún en desarrollo e implementación y que navegadores tienen compatibilidad.

sobre mi

2008-11-24T15:59:00.005+01:00

Mi nombre es Ricard Catalán Díaz.
Nací en Barcelona (Spain) en 1980, y actualmente vivo en Sant Cugat del Vallés con mi novia Gabriella (la auténtica SicilianGirl) y trabajo en la empresa Sercom.

Principalmente desarrollo aplicaciones web, con XHTML, CSS 2.1 y CSS 3, PHP5, javascript y mootools.

Mis conocimientos son:

Estudios:: Ciclo Formativo Superior en Gráfica Publicitaria, año 2002; Curso de Flash para diseñadores, año 2004; Ciclo Formativo Superior en Desarrollo de Aplicaciones Informáticas, 2008
Experiencia:: 2007 - 2008 en Sercom, como maquetador y programador web; 2006 - 2007 en varias empresas, como diseñador gráfico y maquetador web; 2002 - 2003 en Originalets, como diseñador gráfico trabajando conjuntamente para el ajuntamiento de Sant Cugat del Vallés
Idiomas:: Castellano (nativo); Catalán (nativo); Inglés (medio); Italiano (bajo)
Programación:: PHP 5 (Orientado a objetos); SQL (mysql y oracle); Javascript 1.5; Framework mootools 1.2; Ruby y el framework Ruby on Rails; ActionScript 2.0 y 3.0
Maquetación:: Xhtml 1.1 (Cumpliendo el estandar W3C); CSS 2.1 y 3.0; XML 1.0

Bienvenidos a mi Blog "SicilianGirl"

2006-12-09T13:24:00.000+01:00

En este blog hablaré sobre nuevas tecnologías del desarrollo web y eso llamado web 2.0 :

Xhtml

Javascript

Ruby

Espero que sea del agrado de todos,
un saludo.