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>

Para darle a nuestra tipografía web un poco más de orden, podemos hacer un espaciado entre los párrafos, lo cual separará el contenido y lo volverá más agradable de leer. Para realizar esto, simplemente debemos utilizar el tag.

Cuando estemos escribiendo un texto largo en HTML debemos marcar los párrafos con el tag, lo cual, por ejemplo, se hace automáticamente cuando escribimos un post en Wordpress. Sabiendo esto, lo que debemos hacer es agregarle un margen inferior que no debe ser grande y que dependerá del tamaño de la fuente que estemos usando.

p {
margin-bottom: 1.5em;
}

También recomendaría utilizar un interlineado para cada párrafo, lo cual también determinará la altura de margen inferior que establecimos. Obviamente pueden poner el tamaño que más se adecue a su diseño, pero manteniendo unas buenas proporciones 1.5em estaría bien.

Para que una vez aplicado no quede desestabilizado nuestro diseño, demos aplicar esto también a nuestras listas y tal vez a los blockquotes:

p, ul, ol, dl, blockquote {
margin-bottom: 1.5em;
}

Si consideramos que nuestros artículos pueden interesarle incluso a personas que no manejan nuestro idioma, podemos hacerle llegar nuestro contenido de manera siemple. Por lo general los hispanohablantes frecuentamos muchos blogs en inglés, pero el porcentaje de quienes tienen por lengua madre el inglés que visitan blogs en español es mínimo.

Esto se debe a que muy pocos de ellos manejan el español, lo cual, el idioma en el que está nuestro blog es una barrera, la cual hace que nuestro contenido no llegue. Tal como sabemos existe traductores de páginas web enteras, por ejemplo el de Google, que si bien no realiza traducciones a la perfección, hace legible lo que fue escrito.

Como podrán ver al final de cada uno de mis entradas, he colocado un enlace para que se traduzcan automáticamente (mediante el servicio de Google). Si quieren incluir lo mismo en sus blogs en Wordpress, coloquen lo siguiente dentro del loop:

<a xhref="http://translate.google.com/translate?u=<?php the_permalink() ?>&amp;langpair=es%7Cen&amp;hl=es&amp;ie=UTF-8&amp;oe=UTF-8&amp;prev=%2Flanguage_tools" rel="no-follow">Translate to english</a>

Además de lo que nosotros tenenemos para decir (nuestros posts) considero que puede ser interesante mostrarle a nuestros visitantes lo que los demás estan diciendo de nosotros o de lo que nosotros hayamos escrito. Una forma simple de hacerlo es mostrando los backlinks que se generan hacia nuestro blog.

Las principales dos formas de realizar esto es mediante los feeds que proveen Technorati y Google Blog Search. En mi caso prefiero utilizar el de Technorati, que a pesar de como todos sabemos no funciona de la major manera, toma la mayoría de los enlaces entrantes, lo cual GBS no hace, además de mostrar muchos de nuestro propio blog.

Para obtener el feed de los backlinks en Technorati utilizamos la siguiente dirección:
http://feeds.technorati.com/search/http://tublog.com

Por su parte, para hacerlo en Google Blog Search:
http://blogsearch.google.com/blogsearch_feeds?q=link:tublog.com

Ahora bien ¿qué hacemos con esto y como lo mostramos?. Lo que necesitamos hacer para mostrar estos enlaces en leer este archivo RSS, lo cual podemos hacerlo directamente con PHP o con alguno lector de feed simple. En Blogger podemos utilizar uno que viene entre los widgets y para Wordpress recomiendo un plugin muy simple y liviano (que utilizo) llamado WP-RSSImport.

Pueden ver un ejemplo en la parte de navegación superior en este blog (click en navegación y en la sección que se despliega se encuentran los “enlaces recientes”).

Es por demás de conocida la importancia del título de la página, principalmente para la ubicación entre los resultados de las búsquedas y también para que el usuario sepa en que parte del blog se encuentra.

Las técnicas SEO recomiendan que el título del post esté lo antes posible, y si es al principio mejor, por lo que una buena estructura para nuestros títulos sería:

“Título del post - Nombre del blog”

Así generaremos un title que describirá claramente de que trata esta página y que puede ubicarnos entre los primeros resultados de la búsqueda para alguna de esas palabras, aunque como sabemos, otros factores también influyen.

Para lograr que Wordpress genere este tipo de títulos de manera automática debemos dirigirnos al archivo header.php de nuestro theme y realizar algunos cambios en la etiqueta title. A continuación dejo la estructura que yo utilizo:

<?php if ( is_category() ) { ?> <?php single_cat_title(''); ?> &mdash; <?php } ?> <?php if ( is_page() ) { ?> <?php wp_title(''); ?> &mdash; <?php } ?> <?php if ( is_single() ) { ?>  <?php wp_title(''); ?> &mdash; <?php } ?> <?php bloginfo('name'); ?> <?php if ( is_home() ) { ?> &mdash; <?php bloginfo('description'); ?> <?php } ?>

Luego de colocar lo anterior entre <title> y </title> conseguiremos un formato de título diferente para cada sección de nuestro blog. Por ejemplo:

Para posts y páginas: “Título del post/página - Nombre del blog”
Para la página principal del blog: “Nombre del blog - Descripción del mismo”
Para las categorías: “Nombre de la categoría - Nombre del blog”

Las páginas de navegación de archivos por fechas y de resultados de búsquedas tendran por título por defecto el nombre del blog, principalmente por no ser objetivo de las búsquedas de Google ni un lugar donde los visitantes pasen mucho tiempo.

Los enlaces entrantes a nuestro sitio son uno de los bienes más preciados ya que es la moneda de cambio que maneja Google. Sabiendo esto es obvio que queremos que se realicen backlinks a nuestros posts y una forma de alentar a que esto se produzca es facilitándole en trabajo a quien quiera realizarlo.

Una manera bastante simple de hacerlo es dejando la URL en cada post individual lista para que quien lo necesite haga copy&paste. Como quizás hayan visto he añadido al final de cada post un “enlazar este post” donde se realiza lo que comento anteriormente. A continuación les dejo el código que utilizo.

<input onclick="this.select()" type="text" value='&#60;a xhref="<?php the_permalink() ?>"&#60;<?php bloginfo('name'); ?> &mdash; <?php the_title(); ?>&#60;/a&#62;'></input>

Para que funcione correctamente deben incluirlo dentro del loop y modificar donde dice “xhref” por “href”. Además, otro elemento que puede favorecer a que nos enlacen (aunque sólo para visitas) es el plugin Short Permalink.

Después de que tras siete meses el diseño anterior me cansara un poco decidí ocupar un poco de mi tiempo libre, que me di cuenta que es muy poco, en hacer un nuevo theme para mi blog. Tenía todo ordenado en la cabeza y sólo faltaba pasarlo a HTML/CSS, lo cual pensé que me llavaría no más de algunas horas.

Cuando abrí el editor de texto me di cuenta de cuán equivocado estaba y lo único que tenía en la cabeza era confusión. Pasé por varios diseños, distintas cabeceras y footers, esquemas de dos columnas y distintas tipografías, pero nada me terminaba de convencer. Así fue como llegué a esto que ven ahora, que si bien no me termina de comprar en un 100%, lo veo un poco más adecuado que el anterior.

La idea básica era simplificar el blog, me decidí a eliminar todas las pavadas que tenía en el sidebar, las cuales comprendí que son totalmente prescindibles y en muchos casos sólo molestaban. Es por esto que considero que un theme de una sola columna es bastante adecuado a este tipo de blog.

Traté tambien (espero haberlo conseguido) que todo sea lo más prolijo posible y facilitar la lectura y la navegación, para eso aploqué un espaciado respetable entre las líneas de texto y los elementos. Hice más fácil el acceso a los themes y plugin para Wordpress, y agregué en la parte superior mi última publicación en Twitter leída por XML (mediante este código, tal vez te sirva).

La navegación por categorías, fechas y demás accesos están en un segundo plano y a quien les intere puede acceder a ellos simplemente haciendo click en “Navegación”, donde se desplegarán en una lista de manera muy animada. Lo restante es básicamente más de lo mismo.

Hace ya algunos días se me había ocurrido hacer este plugin pero por falta de tiempo lo iba posponiendo. Entre ayer y hoy me hice un poco de espacio en mi agenda mental y pude terminarlo.

Últimamente estan de moda dos cosas, la primera es el microblogging (Twitter, Pownce, Jaiku, etc.) y la segunda, a raíz de la anterior, son los servicios para acortar URLs (TinyUrl, abbrr, Fon.gs, y un largo etcétera). Esto se debe a que el espacio para publicar, por ejemplo en Twitter, está restringido a cierta cantidad de caracteres, por lo que si queremos incluir una URL y texto adicional seguramente no nos alcance.

Generando una URL corta podremos incluir mayor cantidad de texto, es por eso que los servicios para acortar URLs que luego generan una redirección están tan de moda. Además del microblogging este tipo de servicios pueden sernos útiles para pasar un enlace por mensajería instantánea, por email o simplemente si tenemos que anotarlo en un papel.

Cuando queremos generar un enlace corto copiamos la dirección URL “larga”, luego ingresamos al sitio del servicio, pegamos la URL, depués generamos el enlace corto y lo copiamos, para finalmente pegarlo donde queramos.

¿Qué hace el plugin? ¿Para que sirve?

Lo que hace el plugin es ahorrarnos estos pasos que acabo de nombrar, generando automáticamente un enlace corto para cada post de nuestro blog, con lo que podemos ofrecerlo al visitante para que simplemente tenga que copiarlo.

Incluyendo la llamada <?php shortpermalink() ?> dentro del loop obtendremos un text box con la URL lista para se copiada. Si prefiere obtenerse sólamente texto, puede modificarse el código fácilmente.

Sobre el plugin

El principal problema que surgió durante el desarrollo fue cómo obtener la URL generada en una variable a partir del API que algunos servicios proveen. Así el primer filtro para la selección del servicio a utilizar fue que provean su API, por lo que muchos quedaron afuera.

Primero pensé obtener la variable mediante la función file_get_contents, pero muchos servidores la tienen deshabilitada, lo mismo ocurre con algunas funciones que hacen esto de tomar la información de páginas externas. Así se aplicó otro filtro a la selección: el API servicio debía ofrecer el resultado en XML, por lo que sólo quedaron 2 servicios.

Uno de ellos era URL(x), que cuenta con un API muy completo, y la otra era abbrr. Finalmente me decidí por este último servicio porque es realmente fácil de usar, genera URLs más cortas, y porque su desarrollador (Victor Bracco) es argentino. Dicho sea de paso le agradezco con haberme aclarado algunas dudas mientras desarrollaba el plugin.

Pueden ver el plugin en funcionamiento al final de este post por ejemplo. Por cualquier duda, error encontrado o algo por el estilo, simplemente comenten en este post o contáctense conmigo.