Error 404 – Ajustes finales

Buee, no se como empezar, luego de casi un mes sin escribir algo me siento raro, pero debo decir que tenía el diseño final de la página de error desde hace 20 días :S.

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:

Seguir Leyendo esta Entrada

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 esta Entrada

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 esta Entrada

Distinto CSS para cada Navegador

Un día tuve que buscar una solución para un diseño que estaba armando. El problema era que en Google Chrome se veía mal mi diseño, pero en IE y Firefox se veía sin problemas, la solución que encontré fue la siguiente:

CSS Browser Selector, un excelente script que nos permite utilizar distinto CSS en cada navegador.

Dependiendo del navegador podremos utilizar distintos diseños y lo único que necesitamos es agregar un script a nuestra página.

Copia y pega el siguiente código dentro de <head> y </head> de tu  página:

<script type='text/javascript' src='http://blooging.googlecode.com/files/css-selector.js'></script>

Modo de uso:

En este ejemplo usaremos el div #nav.

CSS distinto en Google Chrome:

.chrome #nav {aquí tus estilos}

CSS distinto en Opera:

.opera #nav {aquí tus estilos}

CSS distinto en Safari:

.webkit #nav {aquí tus esilos}

Es muy simple de aplicar y no necesita mayor conocimiento, sólo debemos agregar un "class" antes de cada "div" que queramos cambiar, en nuestra hoja de estilos.

Puedes ver más ejemplos en la web oficial:

Enlace: CSS Browser Selector