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

Crear una nube de etiquetas con jQuery

Aunque las nubes de etiquetas ya no están tan de moda como hace un tiempo, el tutorial donde explican cómo hacer un tagscloud mediante jQuery merece la pena, ya que se trata de una explicación detallada.
No solo se centra en jQuery, sino en la parte PHP que devuelve los datos en JSON y en los estilos CSS para mostrar las etiquetas según su relevancia.
Realmente la parte jQuery solo cambia el tamaño de la letra según la frecuencia de la etiqueta.
Building a jQuery-Powered Tag-Cloud

Obtener logs de todas las queries con MySQL 5.0

En algunas ocasiones necesitamos tener un log de todas las queries que se realizan, sobre todo en preproducción para poder tener una visión general de qué consultas se realizan y del coste.
En MySQL 5.1 es sencillo porque se puede poner el tiempo máximo para slow queries a milisegundos, por lo que todas las queries serían lentas y obtendríamos datos de sobre las consultas bastante interesantes.
En MySQL 5.0 tan solo se puede reducir el tiempo de slow queries a un segundo, por lo que es necesario usar tcpdump para capturar el tráfico de MySQL a un log y luego mediante otros comandos obtener las queries.
Logging all the queries with MySQL 5.0

Bordes irregulares con CSS3 y webkit

Jugando un poco con las CSS3 y Webkit (en mi caso Chrome) me ha dado por crear bordes irregulares. Lo he hecho mediante -webkit-border-top-left-radius y similares.
El concepto es sencillo, hay dos colores: el de fondo (no puede ser transparente) y el del borde, en las curvas concavas se usan los colores tal cual, y en las curvas convexas se usan al revés (el color borde se simula usando el color de fondo, y el fondo con el borde).
bordeslocos.png
La verdad es que lo he hecho rápido y me he liado bastante y está muy a ojo, pero espero estudiarlo un poco mejor cómo va e incluso hacer un plugin para jquery.
Ejemplo

Lista de herramientas para generar datos de prueba

Una de los grandes problemas con los que nos podemos enfrentar a la hora de desarrollar una aplicación web es que el rendimiento en las etapas iniciales no es similar a cuando hay muchos datos y muchos usuarios concurrentes. Para los usuarios se pueden hacer pruebas de estrés, pero para el volumen de datos que debe manejar la base de datos hay que rellenar las tablas con datos de prueba. Para ello, este listado puede sernos bastante útil:

  • GenerateData: para mí uno de los mejores, y del que ya hablé hace tiempo.
  • DBMonster: para generar datos aleatorios en la base de datos. Muy completo pero algo más complejo.
  • CSV Data Generator: basado en Ruby genera ficheros CSV.
  • Datagenerator: este me ha gustado bastante, es sencillo y no por ello simple. Permite introducir datos en Mysql, Firebird, Interbase, MSSQL, Oracle, SQLite y PostgreSQL.

En el post original mencionan otros, pero no me han llegado a gustar.

Test (Sample) Data Generators

Evitar spam en formularios mediante Javascript

Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha.
Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso

|

Open Blog: CMS de blogs creado en CodeIgniter

Open Blog es un CMS para crear un propio blog realizado en CodeIgniter.
Tiene una interfaz de usuario limpia y fácil de usar, se instala y configura también de forma sencilla. Soporte a multilenguaje, plantillas, urls friendly, panel de administración, editor WYSIWYG, páginas estáticas, blogroll, feeds, y soporte a plugins.
Open Blog