Usa jQuery para mostrar mensajes según origen de la visita

Curioso ejemplo para jQuery que permite personalizar mensajes en nuestra página según la página de origen (referrer). Es una buena opción si tienes tráfico originado por alguna página en particular y quieres agradecerles el que visiten tu página con un mensaje personalizado.

// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/,    'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/,      'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/,         'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/,         'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/,      'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//,               'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);

Se podría hacer algo parecido para el navegador del usuario, por si usa IE recomendarle que cambie a Firefox, Opera, Safari o Chrome.

jQuery Fun: Greeting Your Site Referrals

Vía / dzone

MemcacheDB

MemcacheDB es un sistema de almacenamiento clave-valor distribuido diseñado para persistencia. No se trata de una solución de caché, pero si sigue el control memcache (no completamente), por lo que cualquier cliente de memcached puede conectar con él. Utiliza como sistema base de almacenamiento Berkeley DB (una de las más rápidas), por lo que muchas de sus características incluye transacciones y replicación.
Tiene un alto rendimiento de lectura/escritura para objetos basados en claves-valor. Entre los comandos de memcache soporta get, set, add, replace, append, prepend, incr, decr, delete y stats.
MemcacheDB

Extensión PHP para Drizzle

Ya he hablado anteriormente de Drizzle, una base de datos muy ligera y rápida, pensada para aplicaciones web. Lo que se echaba en falta era una librería PHP para poder desarrollar.

Drizzle PHP Extension es una extensión que nos permite desarrollar bajo PHP usando Drizzle de forma sencilla.

$drizzle= drizzle_create();
$con= drizzle_con_add_tcp($drizzle, "127.0.0.1", 0, "root", NULL, "sakila", 0);
$result= drizzle_query($con, "SELECT * FROM film LIMIT 3");
drizzle_result_buffer($result);
while (($row= drizzle_row_next($result)) != NULL)
print implode(':', $row) . "\n";

Drizzle PHP Extension

Vía / Oddments

CodeIgniter 1.7.1

Ha salido la nueva versión de CodeIgniter (1.7.1) que soluciona algunos bugs y trae algunas mejoras, como por ejemplo evitar XSS en casos específicos contra Internet Explorer.
Sigo recomendando CodeIgniter a todos aquellos que programen PHP.
CodeIgniter 1.7.1
Vía / PHPDeveloper.org

Preview de imágenes en enlaces con jQuery

Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).

imagepreview.png

$('ul#fourth a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('' + $(link).text() + '').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});

New jQuery plugin: ‘imgPreview’

|

Laboratorio: barra de progreso mediante Ajax

Una de las necesidades con las que nos encontramos a la hora de realizar procesos largos en la web, es indicar al usuario que le toca esperar. A veces es bastante complicado realizar una barra de progreso que indice el estado actual del proceso que estamos ejecutando.

Una forma de realizarlo es usando Ajax. Realizamos una llamada Ajax que ejecuta la acción, y cuando el objeto Ajax tiene el estado LOADING (readyState == 3), podemos obtener la respuesta del script llamado y parsearlo para mostrar el porcentaje de acción que se ha realizado.

Para ello, estoy pensando en que un script (res.php por ejemplo) devuelva el porcentaje que lleva seguido de un guión. Por ejemplo, cuando pasa por el 1% habrá devuelto “1-” cuando lleve el 5% habrá devuelto “1-2-3-4-5-“. Parseando esto podemos saber por el último número cuanto lleva ejecutado.

El PHP sería el siguiente:

for($i=0; $i<10000000; $i++) {
if ($i%10000 == 0) echo ((int) $i/100000).'-';
flush();
}

Y el javascript sería así:

function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}
return _ajaxobj;
}
function prueba () {
ajax = ajaxobj();
ajax.open("GET", "res.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState == 3) {
// Mostramos porcentaje
var res = ajax.responseText;
res = res.split('-');
alert(res[res.length-2]);
} else if (ajax.readyState == 4) {
// Fin
alert('FIN');
}
}
// Enviamos algo para que funcione el proceso
ajax.send(null);
} 

Como no hay nada perfecto, y menos aún Internet Explorer, sólo he sido capaz hacer que funcione en FF, Opera, Safari y Chrome.

Simpletip: tooltips mediante jQuery

Simpletip es un plugin para jQuery que nos permite añadir tooltips a elementos HTML de forma sencilla y cómoda.

Posee muchas opciones para configurar el tooltip, además de ser modificable mediante estilos.

$("JQUERY SELECTOR").simpletip({
content: 'My Simpletip',
fixed: false
});

Funciona en Firefox 1.5+, IE6+, Safari 2.0+ y Opera 9.0+.

Simpletip

Convertir IP en su país con PHP

Desde Devshed nos ofrecen un completo tutorial para realizar una aplicación que convierte una dirección IP en su correspondiente país. Para ello, lo más importante es la base de datos de direcciones IP: http://software77.net/cgi-bin/ip-country/geo-ip.pl, sin la cual no se podría hacer la aplicación.
Después nos indica cómo pasar la BD de las IPs a una tabla de MySQL mediante un script, y ya con esta tabla podremos trabajar con la relación IP-país.
Building an IP-to-Country Mapping Application with PHP

ZeroClipboard: copiar al portapapeles desde Javascript

ZeroClipboard es una librería javascript que utiliza un swf para copiar contenido en nuestro portapapeles. Aunque hay algún script que te lo hace, con la nueva versión de Adobe Flash, han dejado de funcionar, algo que no ocurre con ZeroClipboard.
Se trata de una librería bastante completa que permite añadir eventos y estilos.
Podéis ver un ejemplo en micURL
ZeroClipboard
Gracias José Luis por el aviso

Seleccionar cercanos mediante MySQL

En algunos casos tenemos la necesidad de buscar registros cercanos a un cierto valor (numérico, logicamente). Una solución sencilla es obtener el valor absoluto de la resta entre el valor que buscamos y el valor del registro, ordenar por ese valor y limitar la búsqueda a n registros:

SELECT number, ABS( number - 2500 ) AS distance
FROM numbers
ORDER BY distance
LIMIT 6

El problema es que esta consulta es lenta, y en producción no nos podemos permitir consultas lentas, por lo que una opción mucho más eficiente es en vez de realizar esa consulta sobre todos los registros, realizarla sobre la unión de dos consultas: una de los n/2 registros con valor superior al que buscamos y otra con los n/2 registros con valor menor al que buscamos, y luego ordenando como la consulta anterior y cogiendo solo los elementos que nos interesan:

SELECT number, ABS( number - 2500 ) AS distance FROM (
(
SELECT number
FROM `numbers`
WHERE number >=2500
ORDER BY number
LIMIT 6
) UNION ALL (
SELECT number
FROM `numbers`
WHERE number <2500
ORDER BY number DESC
LIMIT 6
)
) AS n
ORDER BY distance
LIMIT 6

Selecting closest values in MySQL

Vía / dzone