Ahora, este es el post final sobre la creación de la página de Error 404, podemos decir que ya hicimos todo lo difícil, ahora sólo nos falta mejorar un poco nuestro primer intento con un poco de CSS e imaginación

Habíamos dicho que la página de error llevaría los últimos posts y suscripción al feed, eso es algo simple de hacer.

Para los últimos posts ya hemos visto varios ejemplos de como hacerlo, el más estable y seguro de usar en WordPress es este, que usa funciones nativas de WP para funcionar, pero en el ejemplo voy a usar el método con FeedBurner, fue más simple y además el diseño lo tengo hecho en una plantilla HTML básica.

En el post sobre FeedBurner se explica claramente como encontrar el código para usarlo (las imágenes ya no están por problemas de hosting, pero voy a intentar arreglarlas), se trata de un simple javaScript que obtiene los últimos posts, en mi caso elegí que se mostraran 7.

Lo hacemos de esta forma:

Ahora agregamos un poco de CSS:

De esta forma lograremos hacer que se vean bien los enlaces, para que sean agradables a la vista. El div "creditfooter" muestra una imagen de FB, por eso la ocultamos. Ahora pondremos la suscripción al feed, recuerden que dijimos que iría una imagen y un formulario de suscripción por mail.

Empezamos con la imagen:

Y ahora el formulario para el mail:

Si lo dejamos de esta forma se ve feo, hay que decirlo, pero nosotros le agregaremos un poco de CSS para mejorar el aspecto:

Ahora se ve aceptable nuestra página de error y podemos decir que está lista. En el siguiente link podrán verla funcionando:

Demo Error 404

Como mencioné en el primer post, la idea de hacer esto es que los usuarios sientan la necesidad de explorar el sitio, pero sin ser molestos, ya que todo se ve ordenado.

Espero que les sea útil este simple tutorial, cualquier duda háganla en los comentarios

Ahora haremos nuetro primer intento creando una y, como dijimos en el otro post, sólo incluíremos el logo, un texto de aviso y una caja de busqueda. El diseño de la misma la veremos en otro post, por ahora me baso en los colores de mi blog (no son muy bonitos, pero vamos, es el primer intento ).

Para hacer una caja de busqueda, podemos basarnos en la que trae nuestro theme, que se encuentra, normalmente, en el archivo searchform.php. Copiamos el contenido en nuestro archivo 404.php, que debería ser algo así:

Ahora ya tenemos nuestro buscador hecho. Este paso es muy importante (todos lo son), ya que con el buscador estamos invitando a los usuarios a mantenerse dentro de nuestra página cuando se encuentren con este error.

Entonces sólo nos falta darle estilos a nuestra página. Para eso abriremos nuestro archivo style.css y usaremos los siguientes divs:

Y la estructura de nuestro 404.php será la siguiente:

Con esto ya está listo nuestro archivo 404.php, pero si lo abrimos no veremos nada interesante :S. Lo que haremos ahora será agregar algunas cosas al mismo, de esta forma:

Primero agregaremos el mensaje de error, algo como esto:

Eso es muy simple y ustedes pueden modificarlo como quieran, ahora comenzaremos a agregarle estilos a nuestra página y, como dije antes, me baso en los colores del blog para que no desentonen con lo demás. Lo primero que hago es definir el color de fondo y el ancho de la página, agregando estilos a la etiqueta body, así:

Ahora pondremos el logo, esto es lo más divertido, ya que es lo más difícil, podemos hacerlo de varias formas, pero yo lo hice de tal forma que sólo el lugar donde aparece el nombre tenga la url para enviar de vuelta a la página principal, de esta forma:

Con eso, por lo menos en mi caso, logré hacer que el logo se viera "decente". Ahora continuaremos con el buscador y con esto terminamos nuestro primer intento con la página. El buscador es grande, la idea es que sea bien visible, y lo hacemos de esta forma:

Con esto hice que el buscador estuviera 150px alejado del borde izquierdo y además que el cuadro de busqueda midiera 600px.

Y bueno, eso es todo. Ahora les dejo el código completo que usé para la página, yo no la hice para WP, hice una web estática, es por eso que uso una hoja de estilos distinta.

La plantilla HTML quedó de esta forma:

Y la hoja de estilos así:

Demo de la página

Ahora podemos esperar al otro post, ahí agregaremos la suscripción al feed y los últimos posts.

El error 404, muy conocido en internet, aparece cuando llegamos a una página que no existe, ya sea porque la borraron o porque escribimos mal la url de la misma.

Algunos creen que no es muy necesario crearla, pero realmente sirve, tanto para el webmaster como para el usuario que llegó a ella. Al webmaster le sirve porque puede utilizarla para conectar toda su página, normalmente con un buscador y al usuario le sirve por lo mismo, ya que puede seguir buscando en la página, sin necesidad de volver a la portada.

Nosotros nos dedicaremos a crear una página de error que sea aceptable y funcional para nuestros usuarios, que contendrá lo siguiente:

• El logo de la página (o sólo el nombre si no usan un logo).
• Un mensaje avisando del error.
• Un buscador.

Hasta eso es lo común dentro de esta página, pero nosotros agregaremos esto:

• Los últimos posts usando las funciones de WordPress.
• Posibilidad de suscripción: esto es algo que ayudará mucho. Agregaremos un enlace al feed y un formulario de suscripción por mail para que los usuarios se mantengan al tanto de nuestro blog.

Con eso será suficiente, la idea es hacer que no se vea muy sobrecargada, por lo que utilizaremos una página especial, sin la sidebar ni el footer ni nada, solo lo mencionado.

Para hacerlo en WordPress debemos crear un archivo llamado 404.php y lo subimos junto a nuestro theme.

Para hacerlo en una página estática es necesario configurar el .htaccess para que sepa cual es nuestra página, de esta forma:

En el próximo post veremos un ejemplo, sólo con lo mencionado al principio, sin los últimos posts ni la suscripción. Lo haremos de a poco para no cometer errores.

Haciendo eso encontré esto: Simple Tabs with CSS & jQuery, y me encantaron. Son tan simples que hasta un gato puede hacerlas (?), pero lo bueno es que son 100% funcionales y utilizan un efecto fadeIn al presionar una tab, lo que las hace agradables a la vista.

Para implementarlas sólo debemos hacer lo siguiente:

Primero creamos la estructura de nuestras tabs, de la siguiente forma:

Ahora, debemos agregar los scripts a nuestra página, que son 2:

• jQuery

• Script tabs

Como ya sabemos, utilizamos jQuery desde Google, aunque podríamos utilizarlo perfectamente desde Microsoft, pero no lo usemos desde nuestro hosting, ya que es un completo desperdicio.

Por último, pero no menos importante, el CSS:

• CSS de las Tabs

• CSS contenido de las Tabs

El CSS es completamente configurable y sólo depende de nuestra imaginación.

Ya hemos visto varias formas para mostrar el contenido de un feed en cualquier lugar del blog, pues ahora veremos otra forma que es mucho más efectiva y rápida, utilizando WordPress.

Este método lo tengo implementado en la sección "Blogs  de Ayuda" desde hace unos días y realmente funciona mucho más rápido que utilizando FeedBurner.

Podemos hacerlo de 3 formas, una donde sólo mostraremos el título del post con su url, mostrar el título y un extracto del contenido o mostrar el título y todo el contenido.

Para mostrar sólo el título utilizaremos este código:

Para mostrar el título y un extracto utilizaremos este otro código:

Podemos elegir la extensión que tendrá el extracto en caracteres, que por defecto trae 200 y que puedes modificar donde dice:

Y por último podemos mostrar el título y el contenido del feed completo, utilizando este código:

Este último muestra el artículo completo, siempre y cuando el feed esté configurado para mostrarse completamente, ya que algunos sólo muestran extractos.

Para modificar el feed que se mostrará deben modificar la tercera línea y agregar el feed que quieran, en este caso se muestra el de Blogs de Ayuda.

Mostrar imágenes transparentes es una buena técnica en diseño, sí, se ven bien. Esta técnica la utilizo en la sidebar, donde están las imágenes 125x125.

En este post les mostraré como hacerlo utilizando CSS. Las imágenes estarán transparentes de forma predeterminada y al pasar el mouse sobre ellas volverán a su estado normal.

Para hacerlo crearemos un class en CSS, que puede tener cualquier nombre. El código que agregaremos a nuestra hoja de estilos será el siguiente:

Para lograr el efecto debemos agregar el class a la imágen, de esta forma:

Si quires usarlo en las imágenes dentro de tus posts, debemos hacerlo de esta forma:

En este caso sólo se mostrará la transparencia, sin el efecto hover.

Con esto será suficiente y ya podremos observar el efecto en nuestras imágenes.

Esa imagen muestra 1 de mis backups, que pesa solamente 21 megabytes.

Este backup incluirá todos nuestros archivos, no solo los de WordPress.

Las opciones del plugin son muy faciles de configurar, aunque tiene 2 modos:

1. EasyMode (Modo Fácil)
2. AdvancedMode (Modo Avanzado)

Modo Facil

Con solo ver la imagen podremos darnos cuenta que cambiar al modo avanzado en tan simple como presionar un enlace.

Backup Path: este es el directorio en donde se encontrarán nuestros backups. Puedes elegir cualquier lugar para guardarlos, pero debes crear el directorio. No se creará automáticamente. Luego presionamos save.

Basic Scheduling:

Backup Type:

1. Full Backup Weekly: nos permite configurar un backup semanalmente. Por defecto viene desactivado, pero activarlo es tan simple como presionar activate >>.
2. SQL Only Backup Daily: nos permite hacer un backup automático de nuestra base de datos. Al igual que el anterior viene desactivado por defecto.

Mail Setup

Nos permite agregar direcciones de email, separadas por "coma" (,), para que nos envía nuestro backup por mail y no tengamos que hacerlo de forma manual.

Modo avanzado

Backup Path: ahora tenemos un control total sobre la dirección donde queremos guardar nuestros backups. Igual que antes debemos crear el directorio para que funcione.

Basic Scheduling: es exactamente igual que el anterior, no debemos hacer nada diferente.

Mail Setup: igual que antes agregamos direcciones de email, separadas por coma. Es exactmente igual que arriba.

Exclude Lists: podemos agregar archivos o directorios que no queramos que sean incluidos en nuestro backup, por ejemplo: wp-includes. Al hacerlo esa carpeta no se agregará en el backup.

Enlace: Backup WordPress

Descarga: Directa

Nota: el plugin lo llevo probando desde hace 2 semanas, funciona correctamente en la versión 2.7.1 de WordPress.

Para empezar debemos loggearnos en FeedBurner (si no tienes una cuenta debes registrarte) y presionar en "Publicize".

Y ahora debemos entrar en "BuzzBoost".

Ahora debemos configurar como queremos que se vea nuestro Widget que tendrá las url de nuestro Blog. Estas son las opciones que nos muestra:

Ahora veamos para que sirve cada opción.

Feed Settings

• Number of items to dislay: seleccionamos un número, el cual será la cantidad de post a mostrar, en este caso 3.
• Open links in: New Window: abrir en una nueva ventana. Same Window: abrir en la misma ventana.

Feed Content to Display

• Display feed title (or provide your own): Mostrará el título que elijamos como link hacia tu Blog.
• Display favicon: mostrará nuestro favicon, siempre y cuando la imagen esté en la siguiente url: http://www.direccionurl.com/favicon.ico
• Display item author name: mostrará el nombre del autor del post.
• Display item content:
  • Item Content Format:
  • Plain Text: mostrará el "texto plano", es decir sin ningún tipo de enlaces ni estilos, como puede ser la negrita.
  • Plain Text Excerpt Length: cantidad de palabras que se mostrará como texto plano.
  • Full HTML: mostrará el texto con las etiquetas HTML funcionales, es decir, mostrará enlaces y negritas.
• Display item publication date:
  • Date format: elegimos el estilo de como se mostrará la fecha.
  • Date Location: lugar en el cual se mostrará la fecha. Above: antes de contenido. Below: debajo del contenido.
• Show linked media from a podcast: mostrará una url para ver o escuchar un podcast, pueden ser videos o archivos de sonido.
• Display link to feed: mostrará un enlace hacia tu Feed, el único problema es que lo muestra en Inglés.

Ahora solo presionamos Activate y nos brindará un código para mostrar el Feed.

Se verá de esta forma: ejemplo.

Ahora que tenemos listo nuestro Widget, podemos darle estilos CSS y acomodarlo al diseño de nuestro Blog.

En esta página nos enseñan como se forma este widget, y también nos muestra los "divs" y "class" que utilizan para darle CSS, que nosotros podemos editar.

La imágen que se muestra debajo de los post la podemos ocultar utilizando el siguiente código:

Podemos editar los titulos de esta forma, ya que se muestran utilizando la etiqueta "li":

Con esto mostraremos una imágen en vez del punto tradicional y se elimina el espacio que está antes de el.

El tamaño y estilo de las fuentes del contenido lo podemos editar de la siguiente forma:

Aquí elegimos como fuenta la Verdana y de 13 px de tamaño.

Dejense llevar por su imaginación

Espero que les sirva este pequeño tutorial, como a mí.