GRID-A-LICIOUS:
Este título, que Sergio puso en su twitter, es lo primero que pensé cuando vi ReformRevolution, la web de Suprb. Suprb creó (o crearon, porque son 2) un tema para su espacio muy curioso donde cada entrada se coloca con javascript (usando el framework jQuery) en una “rejilla” de forma distinta según qué resolución tengas. Lo llamaron grid-a-licious. Debido al éxito de su originalidad que mucha gente copiaba lo convirtieron en theme de wordpress y las pasadas navidades lo colgaron libre (ahora mismo el link directo me da error 404, así que ése es el link la entrada donde lo presentan).

Pensé: “Ugg, es original pero apenas se puede leer bien” (según estudios la mejor . En seguida pasé a sopesar pros y contras:
Actualmente la portada de los blogs (por lo menos de los que son como el mío: “de andar por casa entre amigos“) ha caído en desuso, o como mínimo, su uso ha mutado. Antiguamente la portada servía para presentar los contenidos de las últimas X entradas y el formato de blog convencional es aquel que las muestra completas (o no) en su portada, cada una encima de la anterior. Lo cierto es que hoy en día con el auge de los gestores de feeds y Google Reader en particular, los seguidores de un blog lo leen sin el formato que el autor pensó para él, vía feed; y aquel visitante perdido que llega a tí a través de una búsqueda llega directamente a las páginas interiores de tu blog. Es por esto que el interior cobra importancia, restándole a la portada, y mientras surgen widgets como la nube de tags, que pretenden ofrecer una información más dispersa y general del interior del blog en ésta. La portada sirve pues para presentar una serie de contenidos para dar una idea general, sin profundizar en nada porque al fin y al cabo se puede leer entrando en la entrada que te interesa.

Por otro lado, ¿qué porcentaje de visitantes casuales de un blog leen la portada hasta el final y cuántos leen únicamente las 3 primeras noticias? Entonces, ¿qué ocurre si no actualizo en mucho tiempo y la última entrada fue una especialmente aburrida? Estudios sobre esto hay millones y no pretendo sentar cátedra, pero me baso en mi experiencia: si llego a un blog quiero saber de qué va en líneas generales y, si me interesa algo concreto profundizaré pinchando en el link.

Por todo esto he decidido que, en pro de la originalidad, la lectura cómoda en portada es “prescindible” frente a un diseño que forme una nube de entradas para ofrecer al lector en un único “golpe de vista” y minimizando el uso del scroll vertical la máxima información posible.

Por si alguien tiene interes en usarlo, aquí unos truquillos en el código:

Como siempre, no me gustaba todo de este theme, así que he tenido que “tweak-earlo” (tuiquearlo). Para empezar, fijé en el script el ancho mínimo en 4 columnas (unos 960 píxeles) que por defecto estaba en 2. De esta forma consigo poder tener un banner igual que el resto de páginas de la web.

En scripts/grid-a-licious.js:

	var MIN_COLS = 4;
	var COL_WIDTH = 220;
	var GAP = 25;

Este tema además extrae la primera imagen que encuentra en la entrada y la coloca arriba del todo antes del título. Según el tamaño de ésta decide si la columna en cuestión tendrá de ancho “1 columna”, “2 columnas” o “3 columnas”. Esto desajusta un poco todo, así que para lograr un mayor control y limpieza en la estructura lo cambié para que fuesen siempre de ancho “1 columna”.

En index.php, un simple:

 
$new_width =" 200"; $theClass = "eachpost";

Por todo lo que había antes:

if ( $width < "440" ) { $new_width = "200"; $theClass = "eachpost "; } 
				else if ( $width < "660" ) { $new_width = "430"; $theClass = "eachpost twocols"; }
					else { $new_width = "660"; $theClass = "eachpost threecols"; }*/

Aunque cabría la posibilidad de conservar el if para aplicar una clase distinta a distintas entradas y tal vez cambiarles el color de fondo o algo. Por defecto, los “twocols” (las entradas que ocupan 2 columnas de ancho) son amarillas, por ejemplo.

También me interesaba que no se viera la carga de las entradas al cargar la página porque queda un poco desastre la verdad xDDD. Así que englobé el contenido entre los tags de <body></body> con un id:

<div id="todo">blablabla</div>

luego definí en el style.css:

#todo {display:none;}

para que no mostrara NADA por defecto, y finalmente con javascript cargo la función desesconderDiv:

<body onload="desesconderDiv()" >

previamente definida en el head para modificar la visibilidad una vez cargada la página:

<script>
function desesconderDiv(){
document.getElementById('todo').style.visibility="visible";
}
desesconderDiv()
</script>

Para lograr claridad en el orden de las entradas añadí una variable que fuese el número de entrada y así salieran numeradas:

Justo antes del Loop de Wordpress:

<?php $numerito=0; ?>

y dentro del Loop:

<$numerito=$numerito+1; echo '<h1>'.$numerito.'.</h1>';

Ojo aquí porque las entradas con imagen entran en un if, y las entradas sin imagen entran en un else. Para que se numeren todas debería estar por duplicado.

Además, las páginas internas del theme no me gustaban nada, así que hice este diseño desde cero, para facilitar la lectura de los posts largos en columnas de 600 píxeles de ancho.

INFINITE-SCROLL:
Junto a este tema modificado, para lograr este efecto, pretendo usar el script de Paul Airish, infinite-scroll, pero todavía no lo he podido configurar para que funcione correctamente. La idea es que cuando el visitante llegue al final de la página, el contenido de lo que sería la siguiente página se cargue con ajax a continuación para que no tenga que hacer uso de los links de navegación (<>) que, en ocasiones, suponen barreras a la lectura. ¿Cuántas páginas podría uno leer por encima si se van cargando solas en grupos de 10?

Como cualquier método en Internet, tiene pros y contras. Este método de navegación no es válido para webs con contenidos de actualidad como portales de noticias. La actualidad se queda obsoleta tan rápidamente que un lector no quiere encontrarse con noticias del mes pasado (posiblemente ni de la semana pasada). Pero el handicap más criticado es que cuando el visitante ha leído algo que le interesaba, instintivamente guarda en su memoria la posición del scroll en la página, para poder volver a ello. Si la barra de scroll se mueve loca hacia arriba y hacia abajo se pierde el sentido espacial de tu posicionamiento en la página. Digamos que el scroll sirve para saber dónde te encuentras. Para arreglar este efecto Travis B. Isaacs propone usar marcadores en la página por cada página que vaya siendo cargada.

Siempre que hay un problema, salen nuevas soluciones… y la realidad es que los diseños de las páginas van evolucionando según su temática o el público al que van dirigidas, de una forma u otra. Se ponen de moda ciertos temas o widgets y desaparecen usos de scripts y tags que acaban obsoletos. Innovar o morir ;-).

Tags: ajax, CSS, grid-a-licious, infinite scroll, plugins, Wordpress

Sigue los comentarios con el siguiente feed: RSS 2.0.