Archive for month: September, 2010

Firefox: Marcar imagenes no encontradas

Categories: CSS - Tags: ,

Este es un pequeño tip para usuarios de Firefox, usualmente en Internet Explorer o en otros navegadores cuando no se encuentra alguna imagen (Broken Images) se muestra un rectángulo y un ícono para indicarlo pero Firefox no muestra nada y si estamos desarrollando un sitio no nos enteramos que faltan cosas.

La solución es muy simple basta agregar las siguientes líneas a nuestra hoja de estilos:

1
2
3
4
5
img:-moz-broken{  
     -moz-force-broken-image-icon:1;  
     width:24px;  
     height:24px;  
}

De esta forma se comportará similar a otros navegadores mostrando un pequeño ícono para indicarnos que falta alguna imagen

Paypal: Boton BuyNow

Categories: html, paypal - Tags: ,

Paypal sigue avanzando y ya es posible no sólo enviar dinero sino también recibirlo a travez de una cuenta en Perú asi que aprovecharé de escribir algunos artículos sobre paypal desde los más simples botones hasta algunas técnicas avanzadas usando IPN.

La forma más simple de un botón paypal es simplemente un formulario con algunos campos hidden que dan el nombre, precio, gastos de envio… y finalmente un input tipo imagen que es el botón en si, puedes usar cualquiera de los botones que tiene paypal o incluso crear el tuyo propio.

El primer parametro es el formulario, aqui hay una cuestión interesante y es que podemos usar paypal o su sandbox variando esa linea, en próximo artículo hablaré sobre como utilizar el Paypal Sandbox o centro de pruebas.

1
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

El siguiente parametro nos habla del tipo de botón que puede ser “buynow” o un carrito de compras

1
<input type="hidden" name="cmd" value="_xclick">

El parámetro business es el más importante ya que hace referencia a nuestra cuenta en paypal, por defecto este se mostrará como título a la hora de pagar pero es posible configurar o incluso colocar un logotipo, igualmente esto será motivo de otro post

1
<input type="hidden" name="business" value="hiteck3000@hotmail.com">

El siguiente atributo es el nombre del producto, existen técnicas más avanzadas que permiten usar atributos adicionales como color, talla, etc. Eso también será motivo de otro post

1
<input type="hidden" name="item_name" value="Mi Producto">

Los siguientes 2 valores nos dan el precio y el tipo de moneda, yo sugiero usar dólares por un tema de standard internacional

1
2
<input type="hidden" name="amount" value="50.00">
<input type="hidden" name="currency_code" value="USD">

Luego tenemos los gastos de shipping es decir el costo de envio, en carritos de compra es posible seleccionar un shipping por el primer producto y otro por el resto

1
<input type="hidden" name="shipping" value="5.00">

Y finalmente tenemos la imagen que nos va a servir como botón para comprar

1
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

Finalmente nuestro código quedaría algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="hiteck3000@hotmail.com">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Mi Producto">
<input type="hidden" name="amount" value="50.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="shipping" value="5.00">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Jquery: Autocompletar Estilo Facebook

Categories: AJAX - Tags:

He probado varios plugins de autocompletar usando jquery lo interesante de este es que permite hacer listados como cuando enviamos un correo en hotmail y además de autocompletar lo va agregando a una lista de la que podemos borrarlo de forma simple.

Personalmente me parece muy intuitivo y fácil de implementar, pueden leer un poco más y descargarlo con un ejemplo AQUI

Y pueden dar una mirada a la demo AQUI

Prestashop: Actualizando a la ultima versión

Categories: Prestashop - Tags: ,

Y aunque lo normal es que no debería presentarse ningún error al actualizar Prestashop o cualquier otro carrito de compras lo cierto que algunos plugins podrían no funcionar correctamente o perderse algunos detalles que hayamos personalizado de ahi que no esta demás tomar algunas medidas para actualizar Prestashop.

Realizando un backup

Yo sugiero realizar un backup integral usando cpanel pero sino queremos por lo menos debemos realizar un backup de nuestra base de datos usando phpmyadmin y además un backup de nuestras traducciones en nuestro Back Office >> Tools >> Translations, exportar cada lenguaje que usamos, para ello nos valemos de la herramienta Export tool. Y luego podemos hacer un backup de nuestros archivos como un archivo zip o gzip.

Actualizando

Descargamos la última versión de Prestashop y procedemos a sobreescribir los archivos, este proceso puede ser en verdad largo(son un montóoooon de archivos) dependiendo de nuestra conexión a Internet.

Una vez sobreescrito hay ciertos aspectos que debemos tener en cuenta si deseamos mantener nuestra configuración de ciertos módulos como editorial por ejemplo debemos usar nuestro backup para sobreescribir con la nueva versión, igualmente categorias u otros módulos y los correos electrónicos (carpeta mails).

Si hemos modificado el archivo .httaccess debemos combinar ambos archivos revizando que se ha agregado de nuevo

Si estamos usando la plantilla por defecto debemos sobreescribirla de nuestro backup

Finalmente debemos asegurarnos de mantener nuestro archivo config/settings.inc.php de nuestro backup

Una vez que hayamos realizado todos estos pasos podemos actualizar la base de datos, con la URL http://www.misitio.com/prestashop/install

Si todo ha sido realizado correctamente ya deberiamos poder ver nuestra tienda funcionando nuevamente.

Facebook: Mostrar contenido solo para fans

Categories: Diseño, socializacion - Tags:

Anteriormente ya había explicado como crear una fan page ahora voy a explicar como mostrar cierto contenido sólo para fans de nuestra página.

Dentro de nuestra pestaña copiamos un código similar a este:

1
2
3
<fb:visible-to-connection>
Aqui ponemos todo el contenido para fans
</fb:visible-to-connection>

Pero también puede darse el caso que debamos hacer aparecer un contenido para fans y otro para los no fans con algun mensaje tipo “Subscribete para bla, bla, bla”. Eso se hace de la siguiente forma:

1
2
3
4
5
6
<fb:fbml version="1.1">
<fb:visible-to-connection>
Este contenido es sólo para fans
<fb:else>Este es contenido para no fans, subscribete..</fb:else>
</fb:visible-to-connection>
</fb:fbml>

// Actualización
El contenido para no fans tiende a generar un espacio en blanco para solucionar esto al div que contiene el contenido para no fans le ponemos un position absolute.

1
2
3
4
5
6
<fb:fbml version="1.1">
<fb:visible-to-connection>
Este contenido es sólo para fans
<fb:else><div class="position:absolute;">Este es contenido para no fans, subscribete..</div></fb:else>
</fb:visible-to-connection>
</fb:fbml>

Con esto podemos hacer mil cosas como mostrar ofertas sólo para fans, permitir acceso a algunos links y cosas así que nos ayudarán a publicitar nuestra empresa.

Puedes ver el ejemplo en esta fanpage de ejemplo para ser más precisos en la pestaña “Bienvenido”