Para ello detectaremos el idioma del usuario a partir del navegador. Por defecto el navegador nos envia los idiomas que acepta el usuario en una lista ordenada por prioridad. Este dato lo podemos encontrar en la super variable $_SERVER['HTTP_ACCEPT_LANGUAGE']. Esta variable tiene la siguiente forma:

Accept-Language: ca,es-es;q=0.8,es;q=0.6,en-us;q=0.4,en;q=0.2

Por cada idioma que acepta el usuario aparece separado por “,” y en cada idioma aparece una q de prioridad.

Para ofrecer al usuario la web en su idioma vamos a programar primero de todo, una funcion que nos procese este string y nos devuelva un array ordenado por prioridad de idioma.

function getAcceptedLanguages(){
  preg_match_all('/([a-z]{1,8}(-[a-z]{1,8})?)\s*(;\s*q\s*=\s*(1|0\.[0-9]+))?/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'], $lang_parse);
  if (count($lang_parse[1])) {
    $langs = array_combine($lang_parse[1], $lang_parse[4]);
    foreach ($langs as $lang => $val) {
      if ($val === '')
        $rlangs[substr($lang, 0, 2)] = 1;
      else if ($rlangs[substr($lang, 0, 2)] < $val)
        $rlangs[substr($lang, 0, 2)] = $val;
    }
    arsort($rlangs, SORT_NUMERIC);
  }
  else $rlangs = array("es" => 1);
  return $rlangs;
}

Esta función, segun el string mostrado antes de HTTP_ACCEPT_LANGUAGE, nos devolveria un array como el siguiente:

Array (
  [ca] => 1
  [es] => 0.8
  [en] => 0.4
);

Cada posicion del array, contiene como clave el idioma, y como valor la prioridad del usuario. Ahora que ya tenemos este array, simplemente debemos compararlo con los idiomas en los que ofrecemos nuestra página y por defecto mostrarla en el idioma de mayor prioridad para el usuario:

function autoDetectLanguage(){
  $langs = $this->getAcceptedLanguages();
  foreach ($langs as $lang => $val) {
    foreach($this->_pagelangs as $key => $l){
      if (strpos($lang, $key) === 0) {
        return $key;
      }
    }
  }
  return DEFAULT_LANGUAGE;
}

El valor de $this->_pagelangs es un array con los idiomas en los que está de la página dónde cada clave del array es el código del idioma. El valor de cada item del array puede ser cualquier cosa:

 $this->_pagelangs = array( "es" => "Español", "en" => "Inglés" );

La constante DEFAULT_LANGUAGE define el idioma por defecto de la página si no se encuentra concordancia con los idiomas del vistante.

La función autoDetectLanguage nos devolverá el idioma al que mostrar la página, y a partir de ahí podemos hacer una redirección a la url que se desee para configurar el idioma. Esta función solo debemos llamarla la primera vez que el usuario entra en la página y que aun no sepamos su idioma. Una vez lo sepamos ya no es necesario.

Cualquier duda o comentario es bien recibido.

El navegador cuando entra en una página, como norma general, se descarga todo su contenido, esto supone que la primera vez que se entra en una página se tenga que transferir mucha información. Imágenes, CSS, Javascripts, etc…

Los navegadores hace muchísimo tiempo que utlizan una caché interna para así acelerar el proceso de carga de las páginas. Ésto hace que si un navegador accede a una página y descarga el archivo styles.css por ejemplo, la próxima vez que cargue la página no lo descargará, a menos que el archivo haya cambiado. Esto, actualmente, se hace comprobando los headers que envia el servidor web del archivo. Si el archivo ha sido modificado, o su tiempo en caché ha expirado, se descarga de nuevo, sino se utiliza el archivo descargado previamente. Gracias a ésta técnica se cargan más rápido las páginas, ya que las imágenes y archivos complementarios solo se descargan una vez, y posteriormente se sirven de la caché local del navegador. Además es una tarea que incorpora automáticamente el servidor web y no debemos preocuparnos por ella.

Ahora bien, existe un pequeño problema con las páginas dinámicas. Éstas páginas se generan en el momento que el usuario acceden a ella, es decir, su fecha de creacion es justamente la fecha actual de la página, y es algo que debe ser así, ya que queremos que al usuario se le muestre el contenido más nuevo de la página, pero en situaciones queremos que no sea así. Podemos ver el caso de las imágenes generadas por PHP (como vimos en entradas anteriores).

Si generamos imágenes desde PHP, estas siempre seran generadas al momento, lo que provoa que, aunque la imagen sea la misma, el navegador no pueda hacer caché ya que las cabeceras del archivo le indican que la imágen se acaba de generar ahora. Por ello vamos a ver como generar las cabeceras necesarias para hacerle entender al navegador que la imágen es nueva. Básicamente seguiremos este diagrama:

Ante todo, debemos mostrar los headers para informarle al navegador que puede hacer caché de la imagen y que periodo de cache le damos:

header("Cache-Control: private, max-age=10800, pre-check=10800");

header("Expires: " . date(DATE_RFC822,strtotime(" 2 day")));

Después  necesitaremos saber si la imagen solicitada existe o no. Para ello simplemente con file_exists obtendremos la respuesta

if (file_exists($imagen)){
    //TO DO...
}
else{
    header("Redirect: image-not-found.jpg");
}

Ahora vamos a ver como comprobar si la imagen existe en la cache del navegador. Para ello vamos a ver como solicita una imagen el navegador cuando la tiene en caché.

Si el navegador no tiene la imagen en caché, simplemente hará una petición GET del archivo, pero si ya la tiene en la caché, hara una petición enviando la información en las cabeceras HTTP de la imagen que está pidiendo. Básicamente nos interesan las siguientes cabeceras:

If-Modified-Since:Sun, 03 Apr 2011 16:50:39 GMT
If-None-Match:"256c42e-580c-715cd5c0"
ETag:"256c42e-580c-715cd5c0"

Esto nos informa, de la fecha de creación de la imágen que está solicitando que tiene en caché, y de un codigo generado para dicha imágen.

Si nosotros queremos realizar las operaciones de caché en nuestro script, deberemos comprobar nosotros cuando la imagen es válida y cuando no. Por lo tanto tendremos que comprobar que la imagen que tenemos fue creada antes de la que tiene el navegador, y que el códdigo coincide. En ese caso le informaremos al navegador que la imagen es la misma, en caso contrario le deberemos proporcionar los nuevos datos y servirle la imágen.

Para generar nuestro código, simplemente cogeremos la fecha de modificación de la imágen y lo pasaremos por un md5. Para hacer esto lo hacemos de la siguiente manera:

$fp = fopen($imagen, "r");
$etag = md5(serialize(fstat($fp)));
fclose($fp);

Ahroa simplemente comprobamos que haya coincidencia en los parámetros y generamos las cabeceras necesarias:

header('Etag: '.$etag);
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && (strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) >= filemtime($imagen) || trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) ) {
    header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($imagen)).' GMT', true, 304);
    exit();
}
else{
    header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($imagen)).' GMT');
    readfile($imagen);
}

Tal y como vemos en el código, comprobamos si estamos recibiendo el parámetro If-Modified-Since, y comprobamos que esta fecha sea mayor que la del archivo, luego comprobamos también que If-None-Match coincida con el archivo, si todo es correcto, enviamos el header Last-Moddified, con un código 304, que significa que el contenido no ha cambiado, y salimos del script. Si no coincide, enviamos el Last-Modified igual pero sin codigo 304 para hacer que el navegador descargue el contenido, y leemos el servimos del fichero.

Por lo tanto el codigo final es el siguiente:

header("Cache-Control: private, max-age=10800, pre-check=10800");header("Expires: " . date(DATE_RFC822,strtotime(" 2 day")));
if (file_exists($imagen)){
$fp = fopen($imagen, "r");
<pre>    $etag = md5(serialize(fstat($fp)));
    fclose($fp);
    header('Etag: '.$etag);
    if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && (strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) >= filemtime($imagen) || trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) ) {
        header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($imagen)).' GMT', true, 304);
        exit();
    }
    else{
        header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($imagen)).' GMT');
        readfile($imagen);
    }</pre>
}
else{
 header("Location: image-not-found.jpg");
}

Por supuesto podemos combinar todo esto con el escalado de imágenes y otras operaciones. Aprovechar la capacidad de la caché de los navegadores, sobre todo en contenidos que se estan sirviendo continuamente en nuestra página, nos hará reducir en gran medida el tiemo de carga de páginas y sobre todo, el ancho de banda de nuestro servidor. En un cliente con esta simple operación, se ha reducido el ancho de banda del servidor en un 65%. Y con ello también se reduce el uso de CPU y de memoria.

Cualquier duda o comentario es bien recibido.

Primero de todo instalaremos las librerias necesarias, tanto de php como de ImageMagick

sudo apt-get install php-pear php5-dev imagemagick libmagick9-dev php5-imagick

Ahora deberiamos hacer

pecl install imagick

Si funciona perfecto, pero a mi me daba un error de que no encontraba el método raiseError, así que la otra opción es instalar el paquete manualemnte. Para ello descargar la última versión de la extensión Imagick de  http://pecl.php.net/package/imagick

Descomprimimos el archvo descargado y en la consola entramos en el directorio dónde se encuentran todos los archivos y hacemos

phpize
./configure
make
sudo make install

Si instalamos ghostcript tendremos acceso a las funciones de pdf de Imagick. Para ello simplemente tenemos que hacer

sudo apt-get install ghostcript

Espero que os sea de ayuda.

En resumen, és el típico “Me gusta” de facebook, pero con utilidad, me explico… Actualmente el me gusta de facebook, para lo único que sirve es para compartir una página con tus amigos, hoy le das a “Me gusta” y mañana ese “Me gusta” ha caido en la time line y desaparece. Pero el +1 de Google va más allá. Utilizarán esta información para refinar las búsquedas en los resultados, permitiendo que si amigos tuyos han dado un +1 a una página, ésta gane posiciones cuando realices una  búsqueda.

La integración de dicho botón es de lo más sencillo que hay. Simplemente hay que introducir el código que encontraremos en http://www.google.com/intl/es/webmasters/+1/button/index.html

Incluimos el javascript en el head

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

y luego donde queramos introducir el +1 incluimos lo siguiente:

<g:plusone></g:plusone>

En la página que os he puesto antes, podeis configurar idioma y atamaño y os generará el código necesario.

Como recomendación, debereis tener los metas title y description correctos ya que son los que se usaran para compartir. También deberemos tener el canonical si la pagina que vamos a compartir tiene varias urls distintas (algo que ya deberiamos estar haciendo). Podéis encontrar más información aquí: http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonical.html

Por último el meta image_src nos permitirá definir la imagen a compartir. Básicamente debemos añadir en nuestro head el siguiente código:

<link rel="image_src" href="URL IMAGEN PRICNIPAL" />

Esto también nos servirá a la hora de compartir en Facebook una url.

No hay nada peor en una empresa que tener varios sistemas independientes entre ellos y ademas que los usuarios tengan que estar recordando usuarios y contraseñas en cada sistema, y que un cambio de contraseña en un sitio no afecte a los demás, y viceversa.

Por ello me puse a investigar y ví varias paginas dónde explicaban cómo autentificarnos en wordpress con el usuario y contraseña de otro servico.

Despues de varias pruebas y modificaciones, conseguí que funcionase, puesto que algunos códigos que encontré no eran compatibles o directamente no funcionaban correctamente (almenos no conseguía que funcionasen), decidí montarlo yo mismo a partir de lo que iva viendo. Como es la primera vez que me he puesto a tocar un plugin en wordpress, he ido bastante lento y seguramente que habrán maneras mejores de hacerlo, pero ahí va mi propuesta.

Este código esta basado en el plugin External DB authentication

La idea es muy sencilla, cuando un usuario se identifica en el panel de administración de wordpress, capturamos el login, y comprobamos en nuestro sistema si ese login es correcto y puede acceder al blog. Si es así actualizamos el usuario en wordpress con los datos del usuario en nuestro sistema, así cuando wordpress intente loguear al usuario se lo encontrará en la tabla con los datos correctos.

Para ello crearemos un fichero en la carpeta /wp-content/plugins. Podemos llamarlo “customAuthenticate.php”. Es básico que incluyamos la siguiente información al principio del archivo (almenos es lo que creo que se ha de hacer):

/*
Plugin Name: Custom Authentication System
Plugin URI: http://blog.davidrojo.es/2011/06/custom-login-en-wordpress/
Description: This plugin allows to customize Login process with a personal system.
Version: 1.0
Author: David Rojo
Author URI: http://www.davidrojo.es
License: GPL2
*/

Lógicamente podeis poner aquí la información que queráis. Una vez creado este archivo, si vamos al menú de plugins de wordpress, nos aparecerá nuestro plugin para activarlo.

A continuación en nuestro fichero capturaremos el proceso de autentificación de wordpress:

add_filter('wp_authenticate', 'customAuthentication', 1, 2 );

function customAuthentication( $username, $password) {

}

Y ahora tenemos simplemente que programar nuestro login dentro de la función customAuthentication. El resultado seria algo similar a lo siguiente:

add_filter('wp_authenticate', 'customAuthentication', 1, 2 );

function customAuthentication( $username, $password) {
  $user = p_obtenerUsuario($username, $password);
  if ($user){
    // HEMOS ENCONTRADO EL USUARIO EN NUESTRO SISTEMA
    $userarray['user_login'] = $user["username"];
    $userarray['user_pass'] = $password;
    $userarray['first_name'] = $user["nombre"];
    $userarray['last_name'] = $user["apelildos"];
    $userarray['user_email'] = $user["email"];</pre>
    // COMPROBAMOS SI EL USUARIO YA ESTÁ EN WORDPRESS
    if ($id = username_exists($username)) {
      // ACTUALIZAMOS EL USUARIO EN WORDPRESS
      $userarray['ID'] = $id;
      wp_update_user($userarray);
    }
    else{
      // INSERTAMOS EL USUARIO EN WORDPRESS
      wp_insert_user($userarray);</pre>
    }
  }
  else{ // USUARIO INCORRECTO
    remove_action('authenticate', 'wp_authenticate_username_password', 20);
  }
}

Ahora solo nos queda programar la función p_obtenerUsuario, en la cual deberemos devolver NULL o false si el usuario no existe o su contraseña es incorrecta, en caso contrario deberemos devolver los datos del usuario como un array asociativo, con los datos necesarios para insertar el usuario en wordpress tal y como se ve en el paso anterior.

En nuestro caso vamos a conectar a una base de datos donde hay una tabla de usuarios con sus contraseñas en md5 y una columna blog indica si el usuario puede acceder al blog, asumiermos que tambien tiene las columnas username, nombre, apellidos y email. Si estas columnas tuviesen otro nombre, o estuvieran en otra tabla, se deberia hacer un mapeo para devolverlo correctamente, o cambiar en el paso anterior los nombres de las claves del array asociativo $user.

function p_obtenerUsuario($username, $password){
  $mydb = new wpdb(DB_USER, DB_PASS, DB_NAME, DB_HOST);
  $r = $mydb->get_row( $mydb->prepare( "SELECT * FROM usuarios WHERE username = %s AND pass = %s AND blog = 1", $username, md5($password)), ARRAY_A);
  return $r;
}

Lógicamente se deba cambiar DB_USER, DB_PASS, DB_NAME y DB_HOST por las credenciales de la base de datos a donde vayamos a conectar.

Por último deberíamos desactivar todas las opciones de recordar contraseña, registro, etc, ya que ahora la gestion de usuarios se deberia hacer desde nuestro sistema alternativo. Para ello ñadiremos el siguiente código:

//disables the (useless) password reset option in WP when this plugin is enabled.
function ext_db_show_password_fields() {
  return 0;
}

/* * Disable functions.  Idea taken from http auth plugin. */
function disable_function_register() {
  $errors = new WP_Error();
  $errors->add('registerdisabled', __('User registration is not available from this site, so you can\'t create an account or retrieve your password from here. See the message above.'));
  ?></form><br /><div id="login_error">User registration is not available from this site, so you can't create an account or retrieve your password from here. See the message above.</div>
  <p id="backtoblog"><a href="<?php bloginfo('url'); ?>/" title="<?php _e('Are you lost?') ?>"><?php printf(__('&larr; Back to %s'), get_bloginfo('title', 'display' )); ?></a></p>
  <?php
  exit();
}
function disable_function() {
  $errors = new WP_Error();
  $errors->add('registerdisabled', __('User registration is not available from this site, so you can\'t create an account or retrieve your password from here. See the message above.'));
  login_header(__('Log In'), '', $errors);
  ?>
  <p id="backtoblog"><a href="<?php bloginfo('url'); ?>/" title="<?php _e('Are you lost?') ?>"><?php printf(__('&larr; Back to %s'), get_bloginfo('title', 'display' )); ?></a></p>
  <?php
  exit();
}
add_action('lost_password', 'disable_function');
add_action('user_register', 'disable_function');
add_action('register_form', 'disable_function_register');
add_action('retrieve_password', 'disable_function');
add_action('password_reset', 'disable_function');
add_filter('show_password_fields','ext_db_show_password_fields');

Con todo esto tendremos listo nuestro plugin, recordad activarlo en la seccion plugins del panel de administración de wordpress. Cualquier duda, comentario, mejora, etc, son bien recibidas.

Resultado final del plugin customAutenticate.

Básicamente vamos a usar un pequeño detalle que mucha gente suele pasar por alto a la hora de usar flash, y cuyas posibilidades pueden dar muy buenos resultados. En concreto hablo de “Blending” de las capas. Algo que se suele usar mucho en Photoshop pero que a veces en flash quedan olvidadas.

Para el ejemplo vamos a usar una imagen de fondo, y sobre ella vamos a crear unos focos que con el Blending adecuado proporcionaran el efecto deseado. Luego animaremos los focos para que parezcan más reales.

Para hacer el foco necesitaremos un cono, el cual su base debe de ser redonda. Para ello primero nos delimitaremos mediante guías realizando una cruz en nuestro documento. Luego, desde el centro de la cruz creamos un circulo (sin borde). Para hacer un circulo delimitado por centro-radio y que sea uniforme, debemos mantener pulsadas las teclas Alt (para que hacerlo centro-radio) y Shift (para que sea uniforme).

Después borraremos la mitad izquierda del círculo seleccionándolo con la herramienta “Selection Tool (V)” hasta la guía vertical.

Acto seguido rotaremos el medio círculo que nos queda. Para rotarlo tenemos que mover el centro de rotación al centro de nuestro círculo original, sino, no rotara como queremos.

Y por último eliminamos la parte que queda a la derecha de la guía vertical.

Y centramos la sección del círculo.

Ahora simplemente lo pintamos de blanco y creamos el Movie Clip “Foco”.

Una vez tengamos el MovieClip, podemos estirarlo para hacer un foco mas estilizado o achatarlo, según nos convenga.

Seleccionando el Movie Clip del foco, en Propiedades -> Display, seleccionamos la opción Overlay. De esta manera conseguiremos el efecto de luminosidad que queremos. Jugando con la tinta y el alfa podemos conseguir focos de colores y de tonalidades más duras o más suaves

Ahora lo único que nos queda es animarlo. Para ello seleccionamos el foco y le damos botón derecho -> Convert to Symbol y creamos un nuevo símbolo “FocoAnimated”.

Entramos en el símbolo “FocoAnimated” y creamos un nuevo frame en el frame 35.

Hacemos click derecho sobre la línea de frames y seleccionamos “Create Motion Tween”. El timeline se tiene que volver de color azul.

Ahora seleccionamos la pestaña “Motion editor” y realizaremos la animación. Aquí depende de cada uno como quiera animarlo, Se trata de hacer una rotación en Z con una determinada aceleración para hacer el efecto de movimiento del foco.

Haremos los siguientes valores:

Frame 1: RotationZ = -25

Frame 7: RotationZ = 0

Frame 14: RotationZ = 25

Frame 35: RotationZ = -25

Para los key frames 1, 14 y 35 hacermos click derecho sobre el punto en la línea del motion editor y seleccionaremos “smooth point”. Esto suavizará la animación

Por último seleccionamos el foco y le aplicaremos un efecto blur de  25px de calidad alta, para que no se noten tanto los bordes del foco.

A partir de ahora, podemos duplicar el símbolo “FocoAnimated” para crear otros focos con otras animaciones y así combinarlos entre ellos para crear el efecto de varios focos.

Descargar código .fla

Esa tipica query que se queda ahi en background corriendo y te deja la base de datos bloqueada con los locks en las tablas y no hay manera de hacer nada. Pues bien, hay una manera muy sencilla de matar una query.

Simplemente primero tenemos que mostrar los procesos que se estan ejecutando, por supuesto debemos hacerlo con el mismo usuario que ha generado la query. Para ello haremos:

SHOW PROCESSLIST

Con esto veremos el ID de cada query que esta ejecutando el usuario. Ahora solo tenemos que matar el que queramos con el comando KILL

KILL 1216094

Y con esto ya habremos matado la query que nos está dando problemas.

Lógicamente si estamos acostumbrados a usar phpmyadmin, si la query bloquea la base de datos, seguramente nos bloqueara el phpmyadmin también, por lo que es recomendable usar otra herramienta para hacer esto, ya sea la GUI Workbench de MySql o desde la propia consola.

Proyecto para la Academia ASES para realizar un portal integrado en Facebook para preparar la selectividad 2011.

En la aplicación integrada en Facebook, se puede descargar los exámenes solucionados en pdf, y las colecciones de problemas.

Los alumnos pueden solicitar correcciones de las colecciones de problemas y reciben una video explicación de cada apartado solicitado.

Como no tengo tiempo de ponerme a explicar todo, lo que voy a hacer es publicaros una clase con todas las funciones necesarias, compatible con archivos png, jpg y gif y con soporte para transparencias. Cualquier duda me la podéis comentar a través de los comentarios.

La clase la he llamado Image (en un alarde de originalidad) y contiene los siguientes métodos:

public function Image($src)

Constructor. Crea una imágen a partir del $src especificado

public function loadImage($src)

Carga una imágen a partir del $src especificado.

public function setQuality($q)

0 <= $q <= 100. Establece la calidad de la imágen a generar. Solo aplicable a imágenes jpg

public function setOutput($type)

Establece el tipo de salida de la imágen. Por defecto es el mismo tipo que la imágen de entrada. Valores aceptados: “image/jpeg”, “image/gif”, “image/png”

public function resize($width = "", $height = "")

Reescala la imàgen cargada previamente para que encaje en un rectángulo de $width x $height sin perder las proporciones originales.

public function printImage()

Imprime por el canal estándar la imagen resultante con el header específico.

public function saveImage($saveFile)

Guarda la imágen en el archivo especificado por $saveFile.

public function setWaterMark($waterSrc, $left, $top, $right = "", $bottom = "")

Añade la imagen especificada en la ruta $waterSrc a la imagen cargada. en la posición $left – $top. En caso de especificar $right o $bottom sobreescriben los valores de $left y $top.

Así pues para generar una imagen y reescalarla tendremos que hacer lo siguiente:

include ("Image.php");
$im = new Image(PATH_TO_IMAGE);
$im->resize(200, 200);
$im->printImage();

Si queremos añadirle una marca de agua simplemente tendremos que añadir la llamada a la función setWaterMark.

$im->setWaterMark(PATH_TO_WATERMARK, 0, 0, 20, 20);

Y si queremos guardar la imágen en el disco duro:

$im->saveImage(PATH_TO_SAVE);

Podéis ver un ejemplo del resultado aquí

Ver código fuente | Descargar código de ejemplo.

El código de la clase Image lo podéis encontrar en la carpeta src. Los ficheros test-image y test-watermark muestran el funcionamiento de la clase Image

Mi amigo al cabo de un par de minutos me comentaba que sí, que le había imprimido el array, pero que no se enteraba de nada, el array era demasiado grande y no veía la estructura que tenía. Para solucionar este problema, debemos usar el tag <pre> de html. Éste tag es especialmente útil para este caso, ya que lo que hace, básicamente, es mostrar el texto tal cual, con todos los espacios y saltos de línea que tenga el código HTML. Podemos emular el comportamiento de éste tag usando css en cualquier parte de nuestra página:

   white-space: pre-wrap;

Por lo tanto si queremos imprimir un array conservando el formato deberemos hacer:

   echo '<pre>';
   print_r($array);
   echo '</pre>';

Bién, hasta aquí todo correcto, ahora, mi consejo es encapsular todo esto en una funcuón, ya que utilizaremos este código muy a menudo, sobre todo para debugar. Yo personalmente la llamo printr, sin el _ en medio, me es muy fácil de recordar:

function printr($array){
    echo '<pre>';
    print_r($array);
    echo '</pre>';
}

Hay un pequeño detalle de la función print_r que mucha gente pasa por alto, y es su segundo parámetro. Podemos añadirle un segundo parámetro booleano, que si es true, entonces en vez de imprimir el array, lo que hace es retornarlo como un string, así que podemos añadirlo a nuestra función para que se comporte exáctamente igual.

function printr($array, $print = true){
    if ($print) return print_r($array, true);
    else echo '<pre>'.print_r($array, true).'</pre>';
}