Error 404 – Primer intento

Como hablabamos en el post anterior, la página de Error 404 debe ser muy simple y funcional, evitando sobrecargarla para que sea fácil la navegación y uso de la misma.

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í:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="Buscar" name="s" id="s" onfocus="if(this.value=='Buscar')this.value=''" onblur="if(this.value=='')this.value='Buscar'" />
</form>

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:

body
.logo
.buscador

Seguir leyendo este Post

Error 404 – Creación

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:

ErrorDocument 404 /404.php

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.

Tabs con jQuery y CSS

Desde hace un tiempo empezé a amar jQuery y todo su potencial y como siempre quiero aprender algo nuevo, estuve buscando tabs con jQuery y CSS simples, fáciles de usar y que cumplan bien su función.

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:

<ul class="tabs">
    <li><a href="#tab1">Galería</a></li>
    <li><a href="#tab2">Formulario</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        Aquí va tu galería
    </div>
    <div id="tab2" class="tab_content">
       Aquí tu formulario
    </div>
</div>

Ahora, debemos agregar los scripts a nuestra página, que son 2:
Seguir leyendo este Post

Usar jQuery desde Microsoft CDN

En este época donde todo es dominado por Google, incluso el uso de librerías AJAX, Microsoft no quiere dejarse vencer tan fácilmente y es por eso que ha liberado el uso de jQuery desde su propio CDN.

Ya mucho se ha hablado sobre la velocidad de carga de un sitio, que debe ser buena, ya que es un factor de posicionamiento, y gran parte de los desarrolladores han optado por utilizar las librerias desde Google, ya que su servicio es muy rápido, pero ¿usarlas desde Microsoft tendrá alguna diferencia?

La diferencia, en velocidad, es muy poca, en algunos lugares en mejor que en otros, por lo tanto no creo que sea mala idea probarlo.

Para agregarlo a nuestra web tan solo debemos agregar esta línea de código:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

Recuerda que no debes agregar este framework si ya utilizas el de Google, ya que sería un completo desperdicio de tiempo.

Si programas en ASP deberías darte una vuelta por su web, donde encontrarás otro framework con el cuál trabajar.