Usar codificación utf-8 con MySQLi

Como estos días estoy hablando de MySQLi voy a seguir un poco más con el tema y comentar una peculiaridad: si quieres recuperar datos de una BD donde se hayan guardado en utf-8 y manipularlos e imprimirlos sin problemas de codificación tienes que especificarlo.

Es decir, no basta con que los datos estén en la base codificados como utf-8 y que, además, en la web también esté definido que usaremos esta codificación. No, además debemos indicar a MySQLi que queremos trabajar con utf-8 específicamente. Esto no es para nada complicado porque ya hay una función que te permite elegir la codificación. Un ejemplillo de código simplón os lo aclarará:

$con = new mysqli("server", "user", "password");
if (mysqli_connect_errno($con)) { //comprobamos que no haya fallo en la conexión
	die("Fallo al conenctar a MySQL: " . mysqli_connect_error());
}
				
if (!$con->set_charset("utf8")) {//asignamos la codificación comprobando que no falle
       die("Error cargando el conjunto de caracteres utf8");
}

Como podéis ver, es simple: creamos la conexión y luego simplemente definimos un juego de caracteres. En el ejemplo he usado utf-8, pero vamos, que podéis usar cualquiera de los soportados por MySQL.

Bucles en PHP: do, while, foreach y for

Hoy vamos con una lección de PHP básico: el uso de los distintos bucles existentes en este lenguaje de programación. Esencialmente tenemos cuatro bucles, por lo que no es muy difícil aprendérselos. Lo curioso es que muchas veces la gente hace un mal uso de ellos, os lo digo yo que en los últimos meses casi he trabajado más sobre código de otros (plugins de CMS, terminar trabajos a medias) que creando el mío.

Empezamos por el bucle for. Este debe usarse cuando queremos ejecutar una instrucción o bloque de instrucciones un número conocido de veces. Es decir, si sabes que tienes que repetir una instrucción exactamente, por ejemplo, diez veces entonces usa for. La sintaxis sería for(inicialización; condición de terminación; incremento) pero mejor te la explico en un ejemplillo:

for($i=0; $i<10; $i++){
    echo 'Voy a imprimir esto 10 veces y esta es la '.$i;
}

Es habitual ver a programadores usando el for de forma abusiva e inadecuada.

El siguiente bucle a comentar será el while. En este caso el código de este bucle se ejecuta si una condición dada es cierta y se repite mientras esta sigue siendo cierta. Es decir, si no se da la condición antes de entrar ya no se ejecuta, y se se entra se hará hasta que la condición deje de darse, evaluándola en cada iteración. Debemos usar este bucle cuando no sepamos con exactitud la cantidad de veces que tiene que ejecutarse el bucle, pero sí el valor que queremos alcanzar. La sintaxis es while(condición). Un ejemplo:

<?php
$i=0;
$precio = 50;

while( $precio < 5000)
{
   $precio*2;
   $i++;
}
echo ("Hemos doblado el precio  ".$i." veces hasta superar los 5000");
?>

Parecido, pero no igual, es el bucle do-while. La diferencia es que este se ejecuta siempre al menos una vez, aunque la condición de salida no se cumpla a la entrada. Es decir, en el ejemplo anterior entró en el bucle porque la variable precio era menor de 5000, pero en caso de un do-while habría entrado y ejecutado el código al menos una vez aunque hubiéramos inicializado la variable con un valor superior a 5000. La sintaxis es do{código}while(condición). Veamos un ejemplo simple donde lo diferenciamos del while:

$i=5;
while($i<4)
{
   echo 'Esto no se va a imprimir porque no va a entrar';
}

do
{
    echo 'Aunque la condición es la misma, esto se imprimirá al menos una vez';
}while($i<4);

Finalmente tenemos el foreach, pensado para iterar dentro de arrays. En este bucle lo que hacemos es recorrer todos los elementos de un array. La sintaxis es foreach(array as valor). Es el bucle que debemos utilizar siempre para este propósito. Un ejemplo donde imprimimos los nombres de una serie de frutas:

$frutas = array('melón','limón','fresa','manzana');
echo 'Existencias:'
foreach($frutas as $fruta){
   echo $fruta;
}

Con esto ya estarían repasados los cuatro bucles. Existen, además, dos sentencias que pueden usarse para romper/modificar el flujo natural del bucle: break y continue.

La sentencia break fuerza la salida de un bucle, saltando a la siguiente línea tras el mismo. Su uso natural es para las condicionales switch/case, si bien a veces se ve dentro de bucles. Por cuestiones de elegancia y comprensión del código se recomienda no usarlo. El ejemplo sería:

while( $i < 10)
{
   $i++;
   if( $i == 5 )break;
}

En cuanto a continue se utiliza con un condicional antes y lo que hace es saltarse las instrucciones cuando se cumpla esa condición, pero sin salir del bucle. Por ejemplo imaginemos que queremos recorrer una serie de números pero imprimir sólo los pares:

$i=1;
while($i<10)
{
  if($i % 2 != 0) continue;
  echo $i;
}

El código del ejemplo no haría nada cuando se cumpliera la condición, y cuando no se cumpliera imprimiría el valor.

En fin, con esto ya damos por terminada la lección sobre bucles en PHP. Espero que haya sido de ayuda a alguien. Y recordad, usad cada bucle cuando sea necesario, no de forma indiscriminada.

PHP prepared statement (consulta parametrizada) con MySQLi

Si bien en el pasado ya vimos como hacer una consulta parametrizada en este blog de una forma primitiva (fue un artículo antiguo y a día de hoy no lo haría así ni lo recomiendo, por lo que quedaos con este) o haciendo uso de PDO, toca ahora ver cómo hacerlo con MySQLi.

¿Por qué usar MySQLi y no PDO? En fin, todo depende del caso. PDO nos permite abstraernos del SGBD, con sólo cambiar un parámetro en la creación nuestro código funcionará en Postgres, MySQL, Oracle… MySQLi, en cambio, sólo funciona con MySQL. En principio parece que no hay ningún motivo para usar MySQLi, pero si nos metemos en temas de rendimiento veremos que MySQLi va a penalizar menos el rendimiento de la página que PDO. Es decir, trabajando con MySQL nuestra web requerirá menos recursos usando MySQLi que PDO. Si por lo que sea estás con un proyecto que estás seguro de que no a tener que migrarse de SGBD, si sabes positivamente que se va a usar MySQL durante mucho tiempo, entonces MySQLi es tu opción.

Entonces ¿cómo hacemos una consulta parametrizada con MySQLi? Bueno, veamos como se hace una SELECT que recogería unos datos de la BD vinculados a un id del que disponemos en nuestro PHP?


$mysqli = new mysqli ("servidor", "usuario", "password", "nombre_base_de_datos"); //creamos el objeto MySQLi<code>
</code>

if($mysqli->connect_errno){ //comprobamos que no haya errores de conexión

die( 'La cagaste, esto no va'); //mensaje de error

}

if(!$prepared_st = $mysqli->prepare("SELECT * FROM tabla WHERE id = ?")){//creamos el statment y controlamos los errores

die("La cagaste again"); //mensaje de error

}

&nbsp;

//ahora toca vincular el parámetro id a la consulta

$id=5;

if(!$prepared_st->bind_param("i",$id)){ //vinculamos el parámetro

die("Fallito en la vinculación");

}

if(!$prepared_st->execute()){//ejecutamos la consulta

die("Fallo en la ejecución");

}

$resultado = $prepared_st->get_result(); //recogemos resultado

$prepared_st->close(); //cerramos el prepare

$mysqli->close(); //cerramos la conexión a la base de datos

Bueno, toca una pequeña explicación de bind_param: como veis en este caso recibe dos parámetros. El primer parámetro de bind param siempre es una cadena donde le pasamos una serie de letras que identificarán los tipos de datos que le vamos a proporcionar luego con las variables. Es decir, en el ejemplo le decimos primero que le va a llegar un entero, y luego pasamos la variable de ese entero. Si quisiéramos pasar un entero y una cadena (en se orden) el primer parámetro sería «is» y luego irían la variable entera y la variable cadena. El orden es fundamental.

Finalmente recogemos el resultado (para usar get_result() tienes que tener instalada la extensión mysqlnd, si no tendrás que usar bind_result()), que podemos convertir a array con las funciones fetch_array o fetch_assoc según convenga. En cualquier caso en la web de php.net tenéis más información con la que trabajar. Para el resto de operaciones CRUD la cosa va siendo similar: consulta, vinculamos parámetros, ejecutamos, recogemos resultado si procede.

Bajar y subir el volumen en LXDE (sobre Ubuntu)

Por vicisitudes de la vida, por andar jugando con versiones de desarrollo de Ubuntu, he acabado instalando LXDE en mi equipo. Y de repente me topo con un curioso hecho: no veo por ninguna parte ningún control de volumen.

En fin, soluciones hay varias. La más inmediata, por si las urgencias (tipo, como me ha pasado a mi, os salta a todo volumen un anuncio en medio de la biblioteca) es abrir un terminal y teclear alsamixer. Desde ahí tenéis una consola de control de sonido.

Para una vez está bien, pero es un pelín coñazo andar abriendo y cerrando terminales cada vez que quieres modificar el volumen. Tranquilo y don’t worry.

Haz click derecho sobre la barra de tareas y vete a Añadir/Eliminar elementos del Panel. En la ventana que se te abra te encontrarás una pestaña llamada Applets del Panel. Ahí, en los botones de la derecha pulsas Añadir y, en el menú que sale, seleccionas Control de Volumen. (en la imagen de abajo te señalo todo)

Control de volumen en LXDE
Ventana de agregar Applets

Esto hará que ya te salga un icono en la barra para controlar el volumen. Por defecto el software de sonido es Alsa, aunque podéis cambiarlo.

Crear un botón Pin it para compartir en Pinterest desde tu web

Cierto es que Pinterest ha sacado un complemento para el navegador que agrega un botón Pin-it a tu Firefox o Chrome, pero con todo es recomendable agregar un botón de compartir en Pinterest a tu web. Puede que en España no sea todavía muy popular esta red social (y desconozco las estadísticas para América Latina)  pero para sitios de fotografía y moda se ha vuelto indispensable.

Como en todas las redes sociales, crear el botón es fácil (a ellos les interesa facilitarte el trabajo): Tan sólo tienes que irte al generador de widgets de Pinterest y crearlo desde allí.

Para el botón de Pin It verás que se te ofrecen 3 opciones: One Image, Any Image o Image Hover. La primera opción es para crear el botón sólo para una imagen concreta, de ahí el formulario donde se te pedirá el url de la imagen y que elijas donde ubicar un contador. Debes copiar tanto la notación HTML como el script que te da y ubicarlo donde te sea más cómodo.

Boton Pin it
Pin it!!!

La opcion Any Image te permitirá crear un botón para insertar cualquier imagen de la página en que esté ubiado en Pinterest (similar al que hay implementado a día de hoy en los productos de la web de la marca Mango, por ejemplo). Tienes que pegar un HTML en tu código para que genere el botón y un script.

Finalmente Image Hover hará que sobre cada imagen de la página en que ubiques el script aparezca un botón de compartir en Pinterest al sobrevolarla con el ratón. En este caso no habrá HTML y sólo tendrás que copiar el script.

Y así, de forma sencilla tienes el botón insertado en tu web. Para insertar el botón Pin It en un blog de Blogger podéis seguir esta guía.

Configurar servidor Apache para que nos muestre los errores de nuestro PHP

Un poco de sistemas y un poco de PHP mezclado en esta entrada, porque aunque sean tareas muy básicas no está demás comentarlas.

Lo primero es decir que esto NUNCA debe hacerse en un servidor de producción, JAMÁS. Es decir, esta configuración es una ayuda para el programador, por lo que lo recomendable es hacerlo en el servidor de desarrollo/local. Mostrar los errores en producción supondrá una debilidad en la seguridad de la página, así que recuerda: Sólo para desarrollo.

Apache Foundation

Una vez dicho esto, comentar también que si instaláis Apache en un servidor Linux, o si utilizáis XAMPP en Windows, por defecto vendrá con la detección de errores desconectada. En ese caso si tenéis un fallo se mostrará una página en blanco. Este es el comportamiento adecuado en producción, pero en vuestro equipo de desarrollo lo más cómodo es que os muestre el error y en qué línea se ha detectado.

Para cambiar la configuración tenéis que iros a buscar el archivo de configuración de PHP (php.ini), que en Ubuntu por defecto está en etc/php5/apache2/php.ini y en XAMPP podéis acceder a él desde el panel de control principal. Si no lo encontráis basta con que hagáis una página que imprima la función phpinfo() y ahí veréis la ruta completa al archivo (aparece como Loaded Configuration File).

Una vez abierto el archivo con un editor de texto os vais a buscar la instrucción display_errors, que estará por defecto en Off y la cambiáis por On. Vamos que quedará display_errors = On y, tras esto, guardáis los cambios en el archivo. Tras eso reiniciáis el servicio (en XAMPP desde el panel, en Ubuntu con sudo/etc/init.d/apache2 restart) y ya debería estar cantándoos los errores. En todo caso, ejecutad un script con algún fallo que sepáis dónde está (tipo dejaros fuera una coma en la primera fila o un paréntesis sin abrir) para ver que todo funciona correctamente.

Con esto habréis configurado ya vuestro servidor para que detecte los errores, lo que será una enorme ayuda a la hora de desarrollar páginas PHP.

Interlineado en CSS

Una entrada simple y básica de CSS ¿Quieres modificar el interlineado de un texto en tu web? Es muy simple.

El interlineado es la separación existente entre las líneas de un mismo texto. Por defecto en html se aplica un interlineado sencillo, pero podéis usar css para cambiarlo. La propiedad que debéis usar es line-height, tal cual así:


line-height: 1.3em;

Como siempre podéis definir las medidas del ancho de línea en diversas unidades: píxeles, centímetros, em, un porcentaje. Si queréis que mantenga la proporción respecto al texto lo más recomendable es usar em, si queréis un tamaño fijo px y para diseños fluídos porcentaje.

Añadiendo filtros a GIMP 2.8 o 2.6

GIMP es el software libre de edición fotográfica más conocido y, probablemente, el más potente y el que más puede intentar acercarse a Photoshop. Cierto es que es menos productivo que el de Adobe, pero cuenta con las ventajas del software libre, lo que lo ha hecho popular a nivel corporativo, ya que es muy válido para muchos trabajos sin tener que pagar los precios de la licencia de Adobe.

El caso es que hoy vamos a hablar de la asombrosa colección de filtros y efectos libres (106 filtros y efectos) que Paul Sherman ha desarrollado para GIMP. Los podéis descargar desde GIMPHELP.org y su instalación es muy sencilla.

En GNU/Linux basta con copiarlos a /home/tucarpeta/.gimp-2.8/scripts si los quieres sólo para ti, y a /usr/share/gimp/2.0/scripts si deseas que estén disponibles para todos los usuarios.

En el caso de Windows7 las carpetas serían C:\Program Files\GIMP 2\share\gimp\2.0\scripts o C:\Users\TU-CARPETA\.gimp-2.8\scripts. Para Vista y XP la primera es válida, pero la segunda sería C:\Documents and Settings\tucarpeta\.gimp-2.8\scripts

Con esta sencilla operación dispondréis de más de un centenar de scripts. Estos, por cierto, están disponibles tanto para 2.8 como para 2.6 (el proceso es el mismo, cambiando el número de versión en las carpetas). Eso sí, no intentéis meter los scripts del 2.8 en el GIMP 2.6 porque provocarán fallos.

Para usarlos basta con que vayáis al menú Filtros en GIMP y escojáis allí la opción Script FU para lanzar la consola y cargar los scripts.

Sincronizar Ubuntu con tus cuentas de Facebook, Twitter o Google

Una opción que puede interesar a muchos usuarios recién llegados a Ubuntu es sincronizar el sistema operativo con sus cuentas de Google, Facebook o Twitter. Esto les permitirá por ejemplo utilizar Empathy para chatear con sus contactos o recibir notificaciones de novedades sin tener que estar en el navegador conectados.

La sincronización es simple. Tenéis que ir las preferencias del sistema y allí seleccionar Cuentas en Línea
rede

Tras esto seleccionáis Añadir Nueva Cuenta, elegís que la queráis de la lista y os logueáis marcando No Cerrar Sesión en Ubuntu. Con esto la cuenta está añadida y luego podréis configurar con qué servicios queréis sincronizarla, en el recuadro de la derecha.
Captura de pantalla de 2013-05-30 18:31:38

Y con esto ya tenéis Ubuntu sincronizado con lo que queráis.

Colorzilla: Complemento productivo para desarrolladores

¿Te ha pasado alguna vez de ver en una web y decir «Ese es el color que quiero para mi cabecera»? Bueno, Colorzilla te permite integrar en tu navegador (Chrome o Firefox) una serie de herramientas relacionadas con el tema de la elección/búsqueda de colores que puede facilitar tu trabajo como desarrollador.

En principio lo que yo buscaba era un simple Eyedropper para mi navegador, es decir, una aplicación que me permitiera conocer el código RGB de un color que esté saliendo en mi pantalla. Esta es la función principal de Colorzilla, pero no la única ni la más potente. También nos dota de un selector de color (Colorpicker) y un navegador de paletas que agilizan bastante el trabajo (combínalo, por ejemplo, con Firebug y piensa en la velocidad de poder probar todo eso en el navegador) y que además nos deja salvar colores y paletas como «favoritos».

Pero las dos herramientas más interesantes, y más potentes, creo que son el generador de degradados, que te permite modificar varias plantillas y te da el código CSS pensado para mantener la compatibilidad con navegadores obsoletos, y el Web Page DOM Color Analizer. Este último se tira un ratito analizando una página y finalmente te da todos los colores que se han usado en la misma, informándote sobre qué elementos usan cada uno. Esto te ayudará a hacerte una idea al respecto del diseño del sitio.

Resumiendo, un complemento ligero que puede ser muy útil y productivo a la hora de trabajar desarrollando un front-end.