Centrado vertical de elementos con CSS3

No existe una propiedad de CSS que centre verticalmente un elemento dentro de otro. Gracias a las propiedades de transformación de CSS3 podemos centrar elementos verticalmente sin necesidad de conocer el alto del elemento contenedor.

Lo hariamos con la siguiente definición:

.centrado_vertical {

position:relative;
top: 50%;
transform: translateY(-50%);

}

Al aplicar esta clase a un elemento, éste quedará centrado verticalmente con respecto al que lo contiene. Funciona en las últimas versiones de todos lo navegadores. Solamente Safari (8) necesita del prefijo -webkit-transform.

Es posible que en algunos navegadores se vea borroso el elemento centrado. Esto es debido a la posibilidad de que al mover un 50% el elemento quede en “medio pixel”. Para evitar esto se le puede aplicar al elemento padre el siguiente estilo:

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

Read More

Ordenar de forma natural un campo de texto en MySQL

Al ordenar un campo de tipo texto que contiene números el resultado puede no ser el esperado. Por ejemplo, tenemos una tabla de corredores de maratón en la que el dorsal, por alguna razón que no viene al caso, es de tipo texto.

Si hiciéramos una ordenación normal veríamos que el orden de los corredores no es el esperado. Pues el dorsal numero 2, por ejemplo, quedaría por detrás de todos lo que empiezan por 1.


Ejemplo: 

SELECT * FROM corredores ORDER BY dorsal

La sentencia anterior nos daría como resultado los corredores ordenados de la siguiente forma: 1, 10, 11, 12, 13… 2, 20, 21…

Una solución para ordenar los corredores de forma natural sería:

SELECT * FROM corredores ORDER BY length(dorsal), dorsal

Read More

Considerar como 0 los null para sumar campos

A veces queremos obtener la suma de dos campos numéricos, pero si alguno de ellos contiene valores NULL el resultado de la suma es NULL, aun conteniendo algún valor el resto de campos. Si queremos considerar los NULL como 0 a la hora de hacer la suma, podemos utilizar la funcion COALESCE.

Esta función admite una lista de parámetros y devuelve el primer valor no nulo. Si la utilizamos de esta forma COALESCE (nombre_de_campo, 0) nos devolverá 0, en caso de que el valor del campo sea NULL. De esta forma sumaremos 0 y no NULL, obteniendo el resultado deseado.

Ejemplo: 

SELECT gastos1, gastos2, (COALESCE (gastos1, 0) + COALESCE (gastos2, 0)) as total from eventos

Otra opción que se suele utilizar función IFNULL. Como en el siguiente ejemplo:

SELECT gastos1, gastos2, (IFNULL(gastos1, 0) + IFNULL(gastos2, 0)) as total from eventos

Es mejor la primera opción porque la función COALESCE es una función estándar de SQL y funcionará en cualquier motor de base de datos.

Read More

Enlaces HTML de emails para evitar el spam

Cuando publicamos una dirección de correo en una página web, además de estar dando a conocer la dirección a todos los visitantes de la web, exponemos la dirección a los spam-bots. Los spam-bots son programas araña que recorren las webs buscando direcciones de correo para posteriormente enviarles spam.

Entonces, ¿cómo dar a conocer nuestra dirección de correo a visitantes o posibles clientes y a la vez protegernos del spam?

Existen muchas propuestas para solucionar este problema, pero las más interesantes son las que impiden, o más bien dificultan, la lectura de las direcciones por los spam-bot pero mantienen toda la operatividad que un enlace de tipo mailto: ofrece al usuario de la web. Además es importante que su mantenimiento sea sencillo. Es decir, que si tenemos que modificar o añadir nuevas direcciones, lo podamos hacer de forma rápida y sencilla.

Teniendo en cuenta todo esto, esta podría ser una buena solución. La idea es que en el código HTML no vaya escrita el email en claro, de esta forma los bot-spam lo pasarán por alto. lo que tendremos en el código HTML será la cadena del enlace del email codificada en base64. Una pequeña función en javascript se encargará de descodificarla, así cuando se vea la página, el enlace aparecerá correctamente y con toda su funcionalidad.

Para codificar el enlace en base64 nos ayudamos de PHP. Como PHP se ejecuta del lado del servidor podemos tener en nuestro código PHP la dirección de email en claro. Esto nos facilitará el mantenimiento.

Vamos a poner un ejemplo:

Definimos la siguiente función en una librería PHP:

function poner_mail($m){
$lnk=  base64_encode('<a href="mailto:'.$m.'">'.$m.'</a>');
echo "<script>document.write (atob('".$lnk."'))</script>";
}

Esta función se encarga de tomar una dirección de email y crear la cadena del enlace. Todo ello lo pasa a base64 y finalmente le añade el código javascript necesario para decodificar la cadena.

Utilizaremos la función como se muestra en el siguiente ejemplo:

<p>Puedes escribirnos a la siguiente dirección: <?php poner_mail("micorreo@empresa.es"); ?></p>

Lo que veremos en el código fuente de nuestra página, y por tanto lo que verán los bot-spam, es lo siguiente:

<p>Puedes escribirnos a la siguiente dirección: <script>document.write (atob('PGEgaHJlZj0ibWFpbHRvOm1pY29ycmVvQGVtcHJlc2EuZXMiPm1pY29ycmVvQGVtcHJlc2EuZXM8
L2E+'))</script></p>

Algo que a los bot-spam les será difícil identificar como una dirección de correo.

Read More

Funciones frecuentes de PHP para consultas en MySQL

A continuación mostramos algunas funciones de uso frecuente cuando trabajamos con bases de datos. En los ejemplos usamos PHP para hacer selecciones, inserciones y modificaciones en una base de datos MySQL.

En PHP es posible trabajar de diferentes formas con MySQL. En estos ejemplos utilizamos funciones prepare para realizar las consultas.


Número de filas devueltas en un SELECT

$consulta = $conexion->prepare("SELECT nombre FROM usuarios WHERE grupo = ?");
$consulta->bind_param("i", $_POST["id_grupo"]);
$consulta->store_result();
$numero_usuarios = $consulta->num_rows();
$consulta->close();

Obtener el ID generado después de un INSERT

$consulta = $conexion->prepare("INSERT INTO usuarios(nombre) VALUES(?)");
$consulta->bind_param("s", $_POST["nombre"]);
$consulta->execute();
$id_usuario = $consulta->insert_id;

Filas afectadas después de un INSERT o UPDATE

$consulta = $conexion->prepare("UPDATE usuarios SET estado = ? WHERE grupo = ?");
$consulta->bind_param("ii", $_POST["estado"], $_POST["id_grupo"]);
$consulta->execute();
$usuarios_cambiados = $consulta->affected_rows;
$consulta->close();

Obtener el error que se produce al ejecutar una sentencia SQL

$consulta = $conexion->prepare("UPDATE usuarios SET estado = ? WHERE id = ?");
$consulta->bind_param("ii", $_POST["estado"], $_POST["id"]);
if (!$consulta->execute()) print_r($consulta->error);

Read More

Gradle: Could not reserve enough space for object heap

¿Qué es Gradle?

Gradle es una herramienta para automatizar la construcción de proyectos. Se ocupa, entre otras cosas, de las tareas de compilación, testing, empaquetado... Y es la herramienta que Google ha elegido para Android Studio.

Cuando empecé ha hacer las primeras pruebas con Android Studio solía tener muchos problemas con Gradle. Al compilar los proyectos me daba fallo y tenía que reiniciar Android Studio.

Error occured during the initialization of VM
Could not reserve enough space for object heap
Error: Could not create Java Virtual Machine
Error: A fatal exception has occurred. Program will exit.

Buscando información sobre el error encontré una configuración para la memoria que usa Gradle que me ha solucionado el problema:

- Settings (Ctrl+Alt+s)
- Gradle
- Gradle VM options: -Xmx768m -Xms12m

Read More

Selector :contains de jQuery no case-sensitive

El selector :contains de jQuery selecciona elementos que contienen un texto determinado. El texto buscado puede aparecer directamente en el elemento de la selección o en alguno de sus descendientes.

Vamos a poner un ejemplo. Imaginemos que tenemos un formulario con un elemento <select>, y queremos mediante jQuery seleccionar uno de los elementos del <select>. El <select> no tiene values en sus options, por lo que solo los podemos identificar por el texto que contiene.

<select id="calidad" name="calidad">
<option>Buena</option>
<option>Normal</option>
<option>Mala</option>
</select>

Para hacer la selección del la opción "Normal" podríamos utilizar el siguiente código.

$("#calidad option:contains('Normal')").attr("selected", true)

El selector tiene la limitación de ser case-sensitive, por lo que distingue entre mayúsculas y minúsculas. Si en el ejemplo anterior hubiéramos utilizado :contains('normal') no hubiera funcionado.

Puede que en algunos casos nos interese que este selector no sea case-sensitive, para cambiar el funcionamiento del selector podemos sobre-escribir la función de jQuery de la siguiente forma:

jQuery.expr[":"].contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});

Read More