Fecha de publicación del tutorial: 2004-01-16

Tutorial visitado 19.101 veces Descargar en PDF

Personalización de páginas de error utilizando Internet Information Server (IIS).

1- INTRODUCCIÓN

A continuación describiremos el proceso para la configuración y personalización de las páginas de error proporcionadas por el IIS de Microsoft, para conseguir que nuestro site controle y presente páginas personalizadas y que nos produzcan un valor añadido como ahora veremos.

En este tutorial se ofrecerá información sobre la configuración de estos errores, dentro del IIS (para este tutorial nos basaremos en la versión 5.0), ofreceremos información sobre los errores presentados e indicaremos como poder presentar nuevas páginas de errores personalizadas para nuestro site.

Los apartados que se seguirán en este tutorial son:

  • Información acerca de los errores gestionados por el IIS.
  • Desarrollo de páginas personalizadas de errores.
  • Localización en el IIS de la opción para la configuración de errores.
  • Configuración en el IIS de las nuevas páginas personalizadas.

 

Nota: Para este tutorial, damos por supuesto que ya tenemos un site funcionando y que se tiene conocimiento suficiente sobre maquetación html y utilización del IIS. Para tener más información sobre estos temas podéis consultar el siguiente tutorial realizado por Roberto Canales sobre la instalación del IIS.

 

2- CONTENIDOS DEL TUTORIAL

2.1- Información acerca de los errores gestionados por el IIS.

Los errores que se producen al navegar por un site gestionado con Internet Information Server 5.0., por defecto presentan unos mensajes preestablecidos, que son procesados y gestionados por el propio IIS, los cuales nos presentan el código del error que ha ocurrido y una breve explicación de dicho error y enlaces de ayuda, por ejemplo el mensaje típico para el error 404 (página no encontrada), es el siguiente:

Error 404

A continuación ofreceremos un listado completo (en inglés) de los códigos de error y la descripción breve de cada uno, si necesitáis consultar más información al respecto, os indico la siguiente dirección de microsoft: http://support.microsoft.com/?kbid=318380

Código de estado : Descripción
"100" : Continue
"101" : Switching Protocols
"200" : OK
"201" : Created
"202" : Accepted
"203" : Non-Authoritative Information
"204" : No Content
"205" : Reset Content
"206" : Partial Content
"300" : Multiple Choices
"301" : Moved Permanently
"302" : Found
"303" : See Other
"304" : Not Modified
"305" : Use Proxy
"307" : Temporary Redirect
"400" : Bad Request
"401" : Unauthorized
"402" : Payment Required
"403" : Forbidden
"404" : Not Found
"405" : Method Not Allowed
"406" : Not Acceptable
"407" : Proxy Authentication Required
"408" : Request Time-out
"409" : Conflict
"410" : Gone
"411" : Length Required
"412" : Precondition Failed
"413" : Request Entity Too Large
"414" : Request-URI Too Large
"415" : Unsupported Media Type
"416" : Requested range not satisfiable
"417" : Expectation Failed
"500" : Internal Server Error
"501" : Not Implemented
"502" : Bad Gateway
"503" : Service Unavailable
"504" : Gateway Time-out
"505" : HTTP Version not supported

 

2.2- Desarrollo de páginas personalizadas de errores.

Como indica el título de este tutorial, vamos a personalizar los mensajes de error estándar por unos personalizados por nosotros, pues manos a la obra ...

Lo primero que necesitamos, es definir los errores que queremos personalizar (sólo la página 404, que es el error más frecuente, algunas páginas o todas), definir los mensajes y contenidos que vamos a presentar y finalmente realizar el desarrollo de las páginas en html que se presentarán.

En la parte de definición de contenidos es muy importante dar la información adecuada al usuario del error que se ha producido, pero sobre todo para nosotros, esta parte es muy interesante para presentar aquellos apartados, enlaces, servicios, ... que más nos interesen, por ejemplo: enlaces a comercios electrónicos, información del site, sección descargas, noticias, ... con esta sencilla estrategia de marketing, podemos obtener más visitas a nuestro site y orientadas a las secciones que más nos interesen.

Para este tutorial he creado un página sencilla personalizando la página del error 404, a continuación presento la imagen de dicha página y su código, esta página la denominaremos: 404.htm. Esta página puede servir de boceto para la creación del resto de páginas para personalizar los otros códigos de errores (400.htm, 500.htm, ...). Estás páginas creadas las subiremos a nuestro site, para ello crearemos una carpeta en el raíz que llamaremos "errores" y será donde copiaremos todos los archivos html.

Página 404

CÓDIGO HTML
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td> </td></tr>
<tr>
<td valign="bottom">
<table width="100%"border="0" cellspacing="0" cellpadding="0">
<tr><td><b>ERROR 404: Página no encontrada.</b></td></tr>
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr>
<td>
Se ha producido un error al cargar la página solicitada, es posible que dicha página no se encuentre o no esté disponible en este momento.<br><br>
Le indicamos algunos enlaces interesantes para facilitar su navegación.
</td>
</tr>
<tr>
<td>
<table width="70%" border="0" align="left" cellpadding="7" cellspacing="7">
<tr align="left">
<td><a href="http://www.carixma.com/"><img border="0" src="http://www.carixma.com/img/carixma.gif" width="125" height="36"></a></td>
<td><a href="http://www.carixma.com/tarjetas/"><img src="http://www.carixma.com/img/tvisitas.gif" border="0"></a></td>
<td><a href="http://www.autentia.com/"><img src="http://www.carixma.com/img/banners/autentia2.gif" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>

Para descargar el código de la página 404.htm de este ejemplo, pincha aquí.

 

2.3- Localización en el IIS de la opción para la configuración de errores.

Para acceder a la consola de administración del IIS debemos hacer lo siguiente:

  1. Para ejecutar la consola de administración del IIS debemos seleccionar las opciones del menú de windows: "Botón Inicio" --> "Programas" --> "Herramientas de Administración" --> "Internet Services Manager".
  2. A continuación se presentará una pantalla con la consola de administración de nuestros sites, de la sección de la izquierda debemos seleccionar nuestro site y con el botón derecho del ratón, seleccionaremos la opción de propiedades.
  3. Consola IIS

  4. Se presentará otra ventana, con varias pestañas:
  5. Propiedades IIS

  6. Debemos seleccionar la pestaña de "Errores personalizados", presentándose los códigos de error y path de cada uno de ellos que se gestionan desde el IIS.
  7. Errores IIS

  8. Seleccionando la opción de Modificar Propiedades podemos ver y modificar el número de error y path del archivo que se mostrará, por defecto todos los errores son estándar, es decir, se presentarán los que mensajes que tiene por defecto el IIS.
  9. Editar Error

 

2.4- Configuración en el IIS de las nuevas páginas personalizadas.

Finalmente, debemos ir seleccionado en la pantalla presentada anteriormente del IIS, la ruta del archivo que queremos que se muestre, por ejemplo para el error 400, debemos sustituir el path por defecto: ...\iisHelp\common\400.htm por el nuevo que hemos creado, que se encontrará en: .../errores/400.htm, siendo los caracteres "...", las rutas donde hayamos situado nuestro site en nuestro servidor.

Esta operación la repetiremos con el resto de códigos, asignando a cada error la correspondiente nueva página.

Si todo ha ido correctamente, podemos probar a incluir una dirección incorrecta en nuestro site, nos deberá presentar nuestra página 404 personalizada.

 

Como habréis visto y como dice un buen amigo mío, "No hay que ir a Salamanca", es bastante sencillo y la mejora que haremos en nuestro site le dará un toque mucho más profesional, además de las ventajas desde el punto de vista de marketing que también obtendremos.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL: