Todavía no me puse a probar Wordpress 2.3, principalmente por problemas de tiempo, pero según pude leer, la tabla wp_categories en la base de datos ha dejado de utilizarse. Debido a esto sale un error en Fontella (gracias Alex por el aviso).

Para los que no sepan, Fontella es un theme gratuito que he liberado para Wordpress hace muy poco tiempo, el cual forma parte de mi lista de themes, a la cual pienso agregar algunas nuevas plantillas muy pronto. Si ya tienes instalado la versión anterior de Fontella, sólo debes modificar el archivo header.php.

Seguramente todos los que tenemos un blog/sitio hemos pensado alguna vez en su diseño, algunos hemos invertido gran cantidad de tiempo y esfuerzo en el mismo y otros han pagado una buena cantidad de dinero por él. Ahora bien ¿es realmente bueno nuestro diseño? ¿Qué hace que un diseño sea bueno?.

Tal como lo hacen en Pro Blog Design considero que hay varios puntos a tener en cuenta a la hora de hacernos esta pregunta.

Como primer medida podríamos preguntarnos si el diseño de nuestro sitio ayuda a lograr nuestro objetivo. Por ejemplo, si tenemos un sitio simplemente para hacer dinero ¿ayuda nuestro diseño a cumplir esta meta o lo hace más difícil?. Si nuestro diseño nos está haciendo ganar menos de lo que deberíamos, definitavemente no es un buen diseño.

Además de nuestro objetivo, hay que tener en cuenta el objetivo del usuario cuando visita nuestra web. En nuestro sitio donde el visitante puede ver letras de canciones ¿el diseño hace que sean más fáciles de encontrar y leer o complica la navegación? La usabilidad y la experiencia del usuario determinan que tipo de diseño tenemos. Si alguien que ingresa a tu sitio se pierde y no puede cumplir el objetivo por el cual entró son puntos negativos para tu diseño.

Otra función importante que cumple el diseño empieza cuando el usuario abandona nuestro sitio. ¿Lo recordará en un futuro y volverá a entrar?. Si no lo recuerda y jamás vuelve tal vez sea bueno hacer un rediseño.

Como último punto, debemos tener en cuenta el lado “artístico”, por llamarlo de alguna manera. Nuestro diseño debe diferenciarnos de los demás y causar una buena primera impresión. Debemos transmitir nuestra identidad a traves de nuestro diseño y no creo que la plantilla que viene por defecto en Wordpress lo haga. ¿Qué es lo primero que piensa el visitante cuando tu sitio termina de cargar en su navegador?.

Si bien es posible, tal vez sea un poco complicado lograr que estos puntos anteriores sean logrados simultáneamente y en un 100%. Es aquí donde debemos poner en la balanza nuestras prioridades. Dicho de otra manera, si nuestro objetivo de ganar dinero se superpone al de generar una agradable experiencia al usuario al colocar banners entre el texto, debemos aquí establecer prioridades.

Hace algunas semanas Nicolás Píccoli me contactó porque quería cambiar el diseño de su blog Sicrono y tuvo la muy mala idea de que yo me encargara de eso. Así fue como nos pusimos a trabajar.

Ahora que el trabajo está terminado los invito a que con un helado de chocolate y crema del cielo, entren y vean el nuevo diseño donde predominan esos colores. Textos en Verdana, títulos de entradas en Arial y algún que otro detalle en Tahoma es el espectro tipográfico que seleccioné, el cual con un espaciado amplio (al cual siempre recurro) genera una lectura agradable.

En cuanto a lo demás no hay ningún secreto, una selección de colores pasteles para que no estorben, una ubicación de los elementos para que el resultado se vea limpio y no mucho más que no esté a la vista.

Hace algunos días les explicaba la manera de mostrar quienes nos enlazan utilizando los feeds de Technorati o el de Google Blogs Search. Ahora, para quienes no tienen muchas ganas de llevar a cabo los pasos que expliqué, hice un simple plugin para Wordpress que lo realiza automáticamente.

Se trata de Who’s linking to me? (¿Quién me está enlanzando?), el cual se suma a mi lista de Plugins para Wordpress. En este caso utiliza Technorati para mostrar los links recientes que nuestro blog haya recibido.

Luego de descargarlo, subrilo a la carpeta wp-content/plugins, activarlo desde el panel de administración de Wordpress y realizar la llamada  <?php wltm(8,false) ?> (donde el 8 es la cantidad de links a mostrar y el true/false es la posibilidad de mostrar o no una descripción), podrás mostrar en tu blog los enlaces entrantes tal como lo hago en la parte de Navegación de Gran Impetu.

En estos días les conté como hacer los archivos CSS más pequeños y con esto lograr que carguen más rapido en nuestro navegador. Ahora, para optimizar más aún la carga de nuestro sitio, podemos hacer que nuestras páginas también esten comprimidas.

Esto lo haremos con una de las características que nos provee Wordpress, es decir, la compresión Gzip para las páginas. Como las mismas son en gran cantidad texto, tiene un gran ratio de compresión y aprovechando que la mayoría de los navegadores soporta este tipo de compresión, podemos hacer que lo descargue comprimido y lo descomprima a la vez que lo lee.

Para activar esta propiedad, en el Panel de Administración de Wordpress, nos dirigimos a Opciones, luego a Lectura y allí activamos la opción “WordPress debería comprimir las entradas (gzip) si los navegadores lo requieren”.

Si buscamos que nuestras páginas carguen más rápido, otra opción que tenemos es utilizar el plugin WP-Cache, que cachea las páginas solicitadas por lo usuarios y entrega esta versión en caso de que otro la requiera. La misma se elimina luego de un período de tiempo determinado. Lo que hay que tener en cuenta, es que si decidimos utilizar este plugin, hay que desactivar la compresión Gzip porque no son compatibles.

La compresión Gzip para los archivos también podemos realizarla nosotros mismos para páginas que no sean de Wordpress, llevando a cabo los pasos que hicimos con el archivo CSS, es decir, renombrando el archivo a .php y agregando esto al principio:

<?php if ( extension_loaded( "zlib" ) ) ob_start( "ob_gzhandler" ); ?>

Y esto al final de todo:

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Podemos hacer esto también con los archivos JavaScript, recordando siempre agregar de que tipo de archivo se trata para que el navegador pueda interpretarlo.

Después de estar leyendo un poco más sobre como hacer archivos CSS más pequeños, llegué a un muy interesante artículo de Paul Stamatiou donde muestra una manera de reducirlos mucho más, lo cual al principio vi con ojos un poco escépticos, pero luego de probarlo en algunos de mis diseños verdaderamente me sorprendió.

Para hacerlos más pequeños, vamos a utilizar una compresión GZIP y la vamos a realizar por medio de PHP. Tal como cuenta el autor, por ejemplo el archivo CSS de Digg pasó de 26kb a 6kb con este método. Para realizarlo hay que seguir estos pasos:

Cómo primer medida hacemos una copia de seguridad de nuestro archivo style.css (o como se llame) y renombramos al original agregandole .php al final. Es decir, debe quedar como style.css.php. Luego actualizamos el nombre de archivo en nuestras páginas, pasando del primer ejemplo al segundo:

<link rel="stylesheet" type="text/css" media="screen" xhref="/style.css"/>

<link rel="stylesheet" type="text/css" media="screen" xhref="/style.css.php"/>

Una vez hecho esto pasamos a la parte importante. Abrimos nuestro flamante archivo style.css.php y arriba de todo, en la primer línea agregamos lo siguiente:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

A continuación vamos al final del archivo y agregamos:

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Listo, eso es todo. Ahora tu página debería cargar un poco más rápido y tal vez lo haga mucho más rápido. Lo que hicimos fue comprimir el CSS con la libería zlib, luego de haber comprobado que existe.

En Wordpress por ejemplo, la mayoría de los themes, por defecto cargan el archivo CSS de la siguiente manera:

<style type="text/css" media="screen">
@import url(<?php bloginfo('stylesheet_url'); ?>);
</style>

Para modificar el nombre, es decir, agregarle el .php al final, simplemente lo agregamos después de la llamada, lo cual quedaría algo así:

<style type="text/css" media="screen">
@import url(<?php bloginfo('stylesheet_url'); ?>.php);
</style>