Hoy blogueo, mañana existo.
« Líneas Diagonales
Notepad2 »

Paginas 404 útiles

Martes 20 de Marzo del 2007 Compártelo
Error 404

Paseandome por anieto2K me topo con un artículo en SigT sobre páginas de error amigables para el usuario (una traducción de un artículo originario de Coding Horrors) me dispuse a mejorar mi propia página de error de página no encontrada (404). Aún cuando el artículo antes mencionado nos da los puntos más importantes a considerar, no nos dice cómo hacerlos; y es por ello que ahora os explicaré cómo cumplir algunas de las recomendaciones que nos hacen bajo la plataforma de Wordpress.

Creando nuestra página usable

Una página de error no debería nunca ser un aviso y nada más. Una página de error debe también de dar, o al menos recomendar una solución. Por lo tanto, y como dice el artículo arriba mencionado, debemos incluir algunos elementos: entradas relacionadas, opciones de lugares a dónde ir para el usuario, entradas recientes y/o populares, etc. Pero no todo puede ir en la misma página de error; al final, es una página de error, no contenido. Debe sacar al usuario del aprieto en el que está (no encontrar lo que busca), no meterlo en otro (no saber para dónde ir). Por lo tanto, debes elegir bien los elementos que has de agregar y diseñar bien tu página de error; tampoco queremos que el usuario se desespere porque no carga la página y se vaya.

Así que empecemos con nuestra página de error. Modifica o crea tu archivo 404.php dentro de la carpeta de tu theme y escribe algo como esto:

TEXTO PLANO
PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head profile="http://gmpg.org/xfn/11">
  4.  
  5. <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
  6.  
  7. <title><?php bloginfo('name'); ?> - No se encuentra la p&aacute;gina "<?php echo $keyword ?>"</title>
  8.  
  9. <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- 4 stats -->
  10.  
  11. <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/404.css" type="text/css" media="screen" />
  12. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  13.  
  14. <link rel="icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />
  15. <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />
  16.  
  17. </head>
  18. <body>
  19.  
  20.     <h1 id="error">&iexcl;No se encuentra la p&aacute;gina!</h1>
  21.        
  22. </body>
  23. </html>

He tenido que usar las entidades del HTML latinas de algunos caracteres, quiza ustedes deban hacerlo también. Ya tenemos el esqueleto de nuestra página de error. Ahora vamos a hacerla amigable a nuestros usuarios.

Agregando entradas recientes

¿Qué tal mostrar al usuario las últimas entradas de tu blog? Quiza algo de lo más reciente que has puesto en tu blog le sea de interés, así que mostrarlo es una buena idea. Simplemente agrega el código que wordpress nos ofrece para estos casos:

TEXTO PLANO
PHP:
  1. <ul id="lista_enlaces">
  2.                 <li><h3 id="nuevoshead">nuevos</h3>
  3.                     <ul id="nuevoslist">
  4.                         <?php c2c_get_recent_posts(); ?>
  5.                     </ul>
  6.                 </li>
  7.             </ul>

TagCloud y entradas relacionadas

Una nube de tags y entradas relacionadas son un buen elemento para empezar nuestra página de error. Así le estamos dando opciones al usuario y buscando una posible solución a su problema. Para esto necesitaremos algunos plugins que puedan crear nuestra nube de tags. Existen muchas alternativas, pero la que yo uso se llama Jermoe's Keywords. Bastante estable y adaptable, para ser un beta. Sin embargo, debo recomendar que instalen el related entries; pues para el objetivo de nuestra página de error amigable les ahorrará dolores de cabeza, ya que tiene una extensión para agregar entradas relacionadas a tus páginas de error 404.

Una vez que decidas qué plugin vas a utilizar, debes poner la nube de tags en tu página de error. Simplemente llamala como el creador del plugin lo ha indicado. Si, por ejemplo, has usado Jerome's Keywords, simplemente pon algo como esto:

TEXTO PLANO
PHP:
  1. <ul id="tags">
  2.                 <li>
  3.                     <h3 id="tagshead">tags</h3>
  4.                     <ul id="tagslist">
  5.                     <?php jkeywords_tag_cloud(); ?>
  6.                     </ul>
  7.                 </li>
  8.             </ul>

El caso es poder mostrar nuestra nube de tags al usuario.

El que busca... encuentra

Claro está que si han entrado a nuestra web y no han llegado a donde querían, los usuarios querrán (o necesitarán) buscar tu web en busca de la información que necesitan. ¿Por qué no facilitarles las cosas y agregar un formulario para buscar en tu web lo que necesitan? Igual que con las entradas recientes, simplementeusa el código que wordpress nos ofrece:

TEXTO PLANO
PHP:
  1. <ul id="buscar">
  2.                 <li>
  3.                 <?php include (TEMPLATEPATH . '/searchform.php'); ?>
  4.                 </li>
  5.             </ul>

Palabras clave

Ahora llegamos a la verdadera razón de esta entrada. Lo más probable es que, si estás usando Wordpress, también estés usando permalinks. Si este es tu caso, puedes obtener las palabras clave de la url y así poder sugerir o crear una lista de entradas relacionadas a lo que el usuario ha venido buscando. Para esto, agrega este código hasta arriba de tu archivo 404.php:

TEXTO PLANO
PHP:
  1. <?php
  2. //Obteniendo las keywords
  3.         $keyword = substr($_SERVER['REQUEST_URI'],1);
  4.         $keyword = urldecode(stripslashes($keyword));
  5.         $keyword = str_replace('/',' ',$keyword);
  6.         $keyword = str_replace('-',' ',$keyword);
  7. ?>

Con este pequeño código ya tenemos una variable llamada $keyword que contiene las palabras que el usuario ha buscado en nuestro blog. Esta variable la podemos usar para una infinidad de cosas. Digamos, por ejemplo, que queremos poner en el título de nuestra página la frase "La página "$keyword" no ha sido encontrada. Simplemente agrega un echo a tu tag <title> de esta manera:

TEXTO PLANO
PHP:
  1. <title><?php bloginfo('name'); ?> - No se encuentra la p&aacute;gina "<?php echo $keyword ?>"</title>

También podemos decirle al usuario que la página que ha buscado no se encuentra, ponerlo como meta keywords, pasarlo a nuestra SQL y buscar posts relacionados o crear una lista de palabras clave. ¡El único límite es tu imaginación (y tu conocimiento de PHP... je)!

Vamos a crear una lista de sugerencias para buscar en nuestra web para evitar que el usuario tenga que pensar mucho en qué poner. Para esto necesitaremos nuestro string $keyword, pero no con todas sus palabras. No tiene caso sugerir palabras como "de" o "para". Son inútiles para nuestra búsqueda, por lo que vamos a eliminarlas con el siguiente código:

TEXTO PLANO
PHP:
  1. <?php
  2.                 // Eliminando números
  3.                     $recomendaciones = " $keyword ";
  4.                     $recomendaciones = str_replace('1',' ',$recomendaciones);
  5.                     $recomendaciones = str_replace('2',' ',$recomendaciones);
  6.                     $recomendaciones = str_replace('3',' ',$recomendaciones);
  7.                     $recomendaciones = str_replace('4',' ',$recomendaciones);
  8.                     $recomendaciones = str_replace('5',' ',$recomendaciones);
  9.                     $recomendaciones = str_replace('6',' ',$recomendaciones);
  10.                     $recomendaciones = str_replace('7',' ',$recomendaciones);
  11.                     $recomendaciones = str_replace('8',' ',$recomendaciones);
  12.                     $recomendaciones = str_replace('9',' ',$recomendaciones);
  13.                     $recomendaciones = str_replace('0',' ',$recomendaciones);
  14.                 //Eliminando palabras innecesarias
  15.                     $recomendaciones = str_replace(' de ',' ',$recomendaciones);
  16.                     $recomendaciones = str_replace(' es ',' ',$recomendaciones);
  17.                     $recomendaciones = str_replace(' es ',' ',$recomendaciones);
  18.                     $recomendaciones = str_replace(' a ',' ',$recomendaciones);
  19.                     $recomendaciones = str_replace(' para ',' ',$recomendaciones);
  20.                     $recomendaciones = str_replace(' como ',' ',$recomendaciones);
  21.                     $recomendaciones = str_replace(' que ',' ',$recomendaciones);
  22.                     $recomendaciones = str_replace(' de ',' ',$recomendaciones);
  23.                     $recomendaciones = str_replace(' el ',' ',$recomendaciones);
  24.                     $recomendaciones = str_replace(' la ',' ',$recomendaciones);
  25.                     $recomendaciones = str_replace(' los ',' ',$recomendaciones);
  26.                     $recomendaciones = str_replace(' las ',' ',$recomendaciones);
  27.                     $recomendaciones = str_replace(' les ',' ',$recomendaciones);
  28.                     $recomendaciones = str_replace(' le ',' ',$recomendaciones);
  29.                     $recomendaciones = str_replace(' este ',' ',$recomendaciones);
  30.                     $recomendaciones = str_replace(' esta ',' ',$recomendaciones);
  31.                     $recomendaciones = str_replace(' ha ',' ',$recomendaciones);
  32.                     $recomendaciones = str_replace(' sea ',' ',$recomendaciones);
  33.                     $recomendaciones = str_replace(' fue ',' ',$recomendaciones);
  34.                     $recomendaciones = str_replace(' mi ',' ',$recomendaciones);
  35.                     $recomendaciones = str_replace(' yo ',' ',$recomendaciones);
  36.                     $recomendaciones = str_replace(' tu ',' ',$recomendaciones);
  37.                     $recomendaciones = str_replace(' nosotros ',' ',$recomendaciones);
  38.                     $recomendaciones = str_replace(' ustedes ',' ',$recomendaciones);
  39.                     $recomendaciones = str_replace(' ellos ',' ',$recomendaciones);
  40.                     $recomendaciones = str_replace(' ellas ',' ',$recomendaciones);
  41.                     $recomendaciones = str_replace(' y ',' ',$recomendaciones);
  42.                     $recomendaciones = str_replace(' ni ',' ',$recomendaciones);
  43.                     $recomendaciones = str_replace(' lo ',' ',$recomendaciones);
  44.                     $recomendaciones = str_replace(' aun ',' ',$recomendaciones);
  45.                     $recomendaciones = str_replace(' va ',' ',$recomendaciones);
  46.                     $recomendaciones = str_replace(' ya ',' ',$recomendaciones);
  47.                     $recomendaciones = str_replace(' con ',' ',$recomendaciones);
  48.                     $recomendaciones = str_replace(' sin ',' ',$recomendaciones);
  49.                     $recomendaciones = str_replace(' me ',' ',$recomendaciones);
  50.                     $recomendaciones = str_replace(' o ',' ',$recomendaciones);
  51.                     $recomendaciones = str_replace(' e ',' ',$recomendaciones);
  52.                     $recomendaciones = str_replace(' u ',' ',$recomendaciones);
  53.                     $recomendaciones = str_replace(' en ',' ',$recomendaciones);
  54.                     $recomendaciones = str_replace(' no ',' ',$recomendaciones);
  55.                     $recomendaciones = str_replace(' si ',' ',$recomendaciones);
  56.                     $recomendaciones = str_replace(' asi ',' ',$recomendaciones);
  57.                     $recomendaciones = str_replace(' son ',' ',$recomendaciones);
  58.                     $recomendaciones = str_replace(' seran ',' ',$recomendaciones);
  59.                     $recomendaciones = str_replace(' fue ',' ',$recomendaciones);
  60.                     $recomendaciones = str_replace(' fueron ',' ',$recomendaciones);
  61.                     $recomendaciones = str_replace(' estas ',' ',$recomendaciones);
  62.                     $recomendaciones = str_replace(' aqui ',' ',$recomendaciones);
  63.                     $recomendaciones = str_replace(' alla ',' ',$recomendaciones);
  64.                     $recomendaciones = str_replace(' te ',' ',$recomendaciones);
  65.                     $recomendaciones = str_replace(' eso ',' ',$recomendaciones);
  66.                     $recomendaciones = str_replace(' ese ',' ',$recomendaciones);
  67.                     $recomendaciones = str_replace(' esa ',' ',$recomendaciones);
  68.                 // Eliminando espacios en blanco
  69.                     $recomendaciones = str_replace('  ',' ',$recomendaciones);
  70.                     $recomendaciones = str_replace('   ',' ',$recomendaciones);
  71.                     $recomendaciones = str_replace('  ',' ',$recomendaciones);
  72.                     $recomendaciones = trim($recomendaciones);

Sé que no es la mejor manera, pero funciona. Si se te ocurre alguna otra palabra que se me haya olvidado no dudes en agregarla también. Ya solo nos falta imprimir nuestra lista de sugerencias de palabras clave a buscar en nuestro sitio, en base a la URL que el usuario usó. Para ello usamos un simple echo:

TEXTO PLANO
PHP:
  1. echo "<p id=\"buscar_rec\">Recomendaciones de b&uacute;squeda:</p><p id=\"keywords\">$recomendaciones</p>"; ?>

Si has instalado el related entries, puedes también instalar la extensión de este plugin que te permite agregar una lista de enlaces relacionados a tu página de error.

Ya tenemos una página con practicamente todos los elementos que necesitamos. Ahora solo falta agregar una breve explicación de la situación que el usuario enfrenta al llegar a una página de error y comentar las soluciones que, probablemente, hemos encontrado para el; además de agregar el estilo. El código de mi página de error 404 es el siguiente:

TEXTO PLANO
PHP:
  1. <?php
  2. //Obteniendo las keywords
  3.         $keyword = substr($_SERVER['REQUEST_URI'],1);
  4.         $keyword = urldecode(stripslashes($keyword));
  5.         $keyword = str_replace('/',' ',$keyword);
  6.         $keyword = str_replace('-',' ',$keyword);
  7. ?>
  8.  
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  10. <html xmlns="http://www.w3.org/1999/xhtml">
  11. <head profile="http://gmpg.org/xfn/11">
  12.  
  13. <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
  14.  
  15. <title><?php bloginfo('name'); ?> - No se encuentra la p&aacute;gina "<?php echo $keyword ?>"</title>
  16.  
  17. <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- 4 stats -->
  18.  
  19. <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/404.css" type="text/css" media="screen" />
  20. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  21.  
  22. <link rel="icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />
  23. <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />
  24.  
  25. </head>
  26. <body>
  27.  
  28.     <div id="error404">
  29.  
  30.         <h1 id="error">&iexcl;No se encuentra la p&aacute;gina "<?php echo $keyword ?>"!</h1>
  31.        
  32.         <div id="info">
  33.             <p id="infotext"><em>&iexcl;Oops!</em> &iexcl;No se ha encontrado la p&aacute;gina que buscas (<strong><?php echo $keyword ?></strong>)! Probablemente sea culpa de un error m&iacute;o o quiz&aacute; has escrito mal la direcci&oacute;n, en cualquier caso, quiz&aacute; te interesen las &uacute;ltimas entradas del blog, las tags de las entradas, <a href="/" class="back">volver a la portada</a> o buscar tu mismo lo que buscas:</p>
  34.    
  35.             <ul id="lista_enlaces">
  36.                 <li><h3 id="nuevoshead">nuevos</h3>
  37.                     <ul id="nuevoslist">
  38.                         <?php c2c_get_recent_posts(); ?>
  39.                     </ul>
  40.                 </li>
  41.             </ul>
  42.            
  43.             <ul id="tags">
  44.                 <li>
  45.                     <h3 id="tagshead">tags</h3>
  46.                     <ul id="tagslist">
  47.                     <?php jkeywords_tag_cloud(); ?>
  48.                     </ul>
  49.                 </li>
  50.             </ul>
  51.                
  52.             <ul id="buscar">
  53.                 <li>
  54.                 <?php include (TEMPLATEPATH . '/searchform.php'); ?>
  55.                 <?php
  56.                 // Eliminando números
  57.                     $recomendaciones = " $keyword ";
  58.                     $recomendaciones = str_replace('1',' ',$recomendaciones);
  59.                     $recomendaciones = str_replace('2',' ',$recomendaciones);
  60.                     $recomendaciones = str_replace('3',' ',$recomendaciones);
  61.                     $recomendaciones = str_replace('4',' ',$recomendaciones);
  62.                     $recomendaciones = str_replace('5',' ',$recomendaciones);
  63.                     $recomendaciones = str_replace('6',' ',$recomendaciones);
  64.                     $recomendaciones = str_replace('7',' ',$recomendaciones);
  65.                     $recomendaciones = str_replace('8',' ',$recomendaciones);
  66.                     $recomendaciones = str_replace('9',' ',$recomendaciones);
  67.                     $recomendaciones = str_replace('0',' ',$recomendaciones);
  68.                 //Eliminando palabras innecesarias
  69.                     $recomendaciones = str_replace(' de ',' ',$recomendaciones);
  70.                     $recomendaciones = str_replace(' es ',' ',$recomendaciones);
  71.                     $recomendaciones = str_replace(' es ',' ',$recomendaciones);
  72.                     $recomendaciones = str_replace(' a ',' ',$recomendaciones);
  73.                     $recomendaciones = str_replace(' para ',' ',$recomendaciones);
  74.                     $recomendaciones = str_replace(' como ',' ',$recomendaciones);
  75.                     $recomendaciones = str_replace(' que ',' ',$recomendaciones);
  76.                     $recomendaciones = str_replace(' de ',' ',$recomendaciones);
  77.                     $recomendaciones = str_replace(' el ',' ',$recomendaciones);
  78.                     $recomendaciones = str_replace(' la ',' ',$recomendaciones);
  79.                     $recomendaciones = str_replace(' los ',' ',$recomendaciones);
  80.                     $recomendaciones = str_replace(' las ',' ',$recomendaciones);
  81.                     $recomendaciones = str_replace(' les ',' ',$recomendaciones);
  82.                     $recomendaciones = str_replace(' le ',' ',$recomendaciones);
  83.                     $recomendaciones = str_replace(' este ',' ',$recomendaciones);
  84.                     $recomendaciones = str_replace(' esta ',' ',$recomendaciones);
  85.                     $recomendaciones = str_replace(' ha ',' ',$recomendaciones);
  86.                     $recomendaciones = str_replace(' sea ',' ',$recomendaciones);
  87.                     $recomendaciones = str_replace(' fue ',' ',$recomendaciones);
  88.                     $recomendaciones = str_replace(' mi ',' ',$recomendaciones);
  89.                     $recomendaciones = str_replace(' yo ',' ',$recomendaciones);
  90.                     $recomendaciones =