lunes, 29 de octubre de 2007

Hacémela corta

Imagen de 'Hacémela corta'Imagen: Corta de tueros con tronzón. Aparentemente eso en Asturias es un deporte. ¡Estos asturianos están majaretas!

En Blogger se puede configurar cuántos artículos se desea que aparezcan en la página principal, pero cada uno de ellos aparece siempre completo. Esto funciona bien para artículos cortos (dos o tres párrafos), pero no tanto cuando son más largos, ya que la página se vuelve demasiado extensa, y se hace bastante engorroso pasar de un artículo a otro buscando algo.

Por eso muchos prefieren mostrar sólo un extracto de cada artículo, que si se desea se puede expandir para leer el resto. Lamentablemente Blogger no ofrece ninguna opción para hacer esto automáticamente, pero existen algunos hacks que con algo de trabajo permiten lograrlo, y es lo que se usa, por ejemplo, en este mismo blog.

Una posibilidad es que al expandir un artículo, se muestre en la propia página principal. Las instrucciones para lograr esto son bastante simples, pero si eso te resulta chino, o quizá malayo, o incluso indonesio, quizá prefieras leer la versión original en inglés. También parece haber una versión en español, pero más que una traducción, es la explicación de ciertas modificaciones para lograr algunas mejoras [Oct. 31, 2007: parece que justo ayer am0x modificó totalmente su artículo. Ahora sí es simplemente una traducción del artículo de Ramani, y las mejoras que antes proponía no aparecen por ningún lado. La máquina del tiempo, afortunadamente, no me deja mentir], así que aquí va, para quien pueda interesarle, una traducción al español del artículo original.

Artículos expandibles en Blogger
(traducción de Blogger hack: Expandable posts with Peekaboo view)

La página principal de tu blog usualmente muestra el contenido completo de cada artículo. Si tus artículos son normalmete de más de 2 párrafos, el lector encontrará difícil encontrar rápidamente lo que le interesa porque necesitará mucho desplazamiento hacia abajo en la página. Para esto es que eran útiles los resúmenes expandibles de artículos para el antiguo Blogger. ¡Este truco tiene la misma utilidad en el nuevo Blogger y aún más! Es decir, la página principal mostrará sólo los resúmenes de los artículos y cuando le des click a "Leer más", ¡el artículo completo aparecerá en la propia página (vista Peekaboo)! Tuve algunos pedidos para implementar este truco y me las arreglé para hacerlo andar. Luego, Hans lo mejoró agregando un enlace "Sólo resumen" con el cual puedes colapsar nuevamente el artículo a su resumen. Entre ambos, también hicimos que el enlace "Leer más" se muestre sólo para los artículos que están resumidos. Este es un truco sorprendente pero necesitas tener cuidado al cambiar tu plantilla. Si no estás familiarizado con HTML, te recomiendo conseguir la ayuda de alguien que sepa HTML para aplicar este truco. Estos son los pasos a seguir:

Paso 0: Descargar y guardar tu plantilla de modo que puedas volver a ella en caso de algún problema con este truco (¡Importante!)

Paso 1: Encontrar en tu plantilla la marca

<head>


y agregar justo antes todo el código de esta página.

Paso 2: Encontrar un includable llamado 'post' y copiar y pegar los cambios que están resaltados en esta página (ten mucho cuidado de no cometer errores. Fíjate que la palabra "uncustomized-post-template" puede no aparecer en tu plantilla pero no hay problema con eso). Para enconrar el includable, podrías buscar la expresión id='post'. Si no lo encuentras, puede que no hayas expandido la plantilla. Marca la opción "Expandir plantillas de artilugios" (expand widget templates), que está justo encima del código de la plantilla.

Paso 3. Ir a Configuración->Formato (Settings->Formatting) y al final de la página encontrarás el casillero para especificar la "Plantilla de entrada" (post template). Copiar y pegar estas líneas dentro de ese casillero y guardar la configuración. (Por favor NO escribas tú mismo estas líneas porque podrías introducir espacios en blanco que harían que no funcionase).

Escribe tu resumen aquí

<span id="fullpost">

Escribe aquí el resto del artículo

</span>


Si ahora creas un nuevo artículo, verás claramente dónde escribir el resumen y dónde agregar el resto del artículo. Es importante cerciorarse de que la marca </span> quede al final. Para asegurarte de esto, usa el modo "Edición de Html" en lugar de "Redactar" mientras escribes el artículo. Después de escribir puedes ir al modo "Redactar" y cambiar fuentes, colores, etc. Fíjate que también puedes editar algunos de tus anteriores artículos (o todos) para dividirlos en resumen y artículo completo. El enlace "Leer más" aparecerá solo para los artículos que hayan sido divididos de esta manera.

[Si es tu primera visita a mi blog, no te pierdas estas otras cosas bonitas que ofrezco:
1. Un sitio para compartir blogs al estilo Digg - bvives.com.
2. Plantilla rápida manejada por AJAX - Neo ]

Notas importantes:
Nota 1: Por favor no olvides agregar un enlace a Hackosphere en tu barra lateral. Eso es lo único que espero a cambio.
Nota 2: Si te gustarían algunos efectos especiales fade in / fade out para este truco, los puedes tener haciendo estos pocos cambios descriptos en este otro artículo.
Nota 3: Si quisieras que el enlace "Leer mas" te llevara a la página del artículo, en lugar de expandirse en la propia página principal, usa este otro truco [Nota del traductor: también traducido al español más abajo]
Nota 4: Después de hacer click en "Entradas antiguas", el enlace "Leer más" puede aparecer incluso para artículos que no hayan sido divididos en resumen y articulo completo. Es un problema conocido que aún no hemos resuelto.

Ahora bien, en lugar de que el artículo se expanda en la misma página, también se puede lograr que al hacer click se vaya a la página propia del artículo, en la que se muestra el contenido completo y los comentarios. Esta variante, del mismo autor, está explicada en Selective Expandable posts. La versión tailandesa también puede resultar divertida, y recíprocamente, ofrezco esta traducción al español para que se diviertan los tailandeses:

Artículos expandibles selectivos
(traducción de Selective Expandable posts)

Anteriormente había anunciado los artículos Peekaboo que muestran resúmenenes de los artículos en la página principal y los expande en la misma página. Pero a algunas personas les gustaría usar el modo clásico de expandir los artículos que lleva al lector a la página del artículo al hacer click en "Leer más". Uno de ellos me preguntó como hacer para mostrar el enlace "Leer más" sólo para artículos largos y no para otros. Le di una combinación de código peekaboo y no peekaboo que sirve para esto. Como comencé a recibir más de estos pedidos, pensé en publicar el código para todos quienes quieran usarlo. Esto es lo que necesitas hacer:

1. Encontrar en tu plantilla la marca

<head>


y agregar justo antes todo el código de esta página.

2. Encontrar la marca div para post-body, y agregar el código que está en rojo.

   <div class='post-body'  expr:id='"post-" + data:post.id' >

<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>
<a expr:href='data:post.url'>Leer más......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


3. Ir a Configuración->Formato (Settings->Formatting) y al final de la página encontrarás el casillero para especificar la "Plantilla de entrada" (post template). Copiar y pegar estas líneas dentro de ese casillero y guardar la configuración. (Por favor NO escribas tú mismo estas líneas porque podrías introducir espacios en blanco que harían que no funcionase).

Escribe tu resumen aquí

<span id="fullpost">

Escribe aquí el resto del artículo

</span>


Si ahora creas un nuevo artículo, verás claramente dónde escribir el resumen y dónde agregar el resto del artículo. Es importante cerciorarse de que la marca </span> quede al final. Para asegurarte de esto, usa el modo "Edición de Html" en lugar de "Redactar" mientras escribes el artículo. Después de escribir puedes ir al modo "Redactar" y cambiar fuentes, colores, etc. Fíjate que también puedes editar algunos de tus anteriores artículos (o todos) para dividirlos en resumen y artículo completo. El enlace "Leer más" aparecerá solo para los artículos que hayan sido divididos de esta manera.

Nota 1: Si no puedes encontrar las lineas a cambiar, puede que no hayas expandido la plantilla. Marca la opción "Expandir plantillas de artilugios" (expand widget templates), que está justo encima del código de la plantilla.

Nota 2: Después de hacer click en "Entradas antiguas", el enlace "Leer más" puede aparecer incluso para artículos que no hayan sido divididos en resumen y articulo completo. Es un problema conocido que aún no hemos resuelto.

Espero que agregues un enlace a Hackosphere en tu barra lateral. Es lo único que espero a cambio ;)

Posiblemente haya otras maneras de lograr lo mismo que se explica aquí, pero de estas técnicas (en particular la segunda), puedo decir que funcionan sin problemas, y que aunque requieren un poquito de trabajo para la configuración inicial, luego el uso para cadad artículo no es para nada engorroso.

Un aspecto importante a tener en cuenta, es que si bien se logra que la página principal muestre resúmenes, en el HTML se está cargando el contenido completo de cada artículo, por lo que el tamaño y los tiempos de transferencia y carga de la página siguen siendo básicamente los mismos. ♦

8 comentarios:

Sebastian dijo...

Bien ahi Lamas!!!
Estoy seguro que ha mucha gente este tip le viene barbaro!

Jose Lamas Rios dijo...

Gracias, Seba.
Espero que sí. Al menos algunos me lo habían pedido :)

am0x dijo...

Hola José

En efecto, originalmente lo que yo publiqué eran algunas adecuaciones a lo realizado por Ramani, sin embargo ayer que andaba actualizando el sitio, resulta que el original ha cambiado e incorporó al menos una de dichas modificaciones. Además, el .js hospedado ya no funciona. Por ello es que consideré dejar mejor ya la traducción tal cual.
Como sea, gracias por la referencia, te voy poniendo una liga a tu sitio.

am0x

Jose Lamas Rios dijo...

Ok, am0x, todo bien. Gracias por la aclaración y el link.

Saludos,

Valeria Roxana Rico dijo...

Muchas gracias! Me la pasé revisando códigos y el que posteas es el único que funcionó! Ya agregué el link a Hackosphere, tal como pides... Saludos y de nuevo, gracias!

Jose Lamas Rios dijo...

Por nada, Valeria, me alegro de que te sirviera. Saludos.

Neida dijo...

Bueno tu blog y esta nota en particular, sin embargo veo que tu tienes resumenes en tu página principal y un vínculo que te lleva a la página de la entrada en cuestión, es decir no la expande en la misma página, me gustaría saber como se hace para que mi blog haga lo mismo, a saber, mostrar resumen de la entrada en la página principal y un vínculo a la entrada en sí para leerlo completo. Saca una entrada explicándolo por favor.

Jose Lamas Rios dijo...

Hola, Neida, gracias por el comentario.

Lo que tú pides, que es lo que se usa en este blog, está explicado también en el artículo. Cerca de la mitad hay un párrafo que comienza con "Ahora bien, en lugar de que el artículo se expanda en la misma página, también se puede lograr que al hacer click se vaya a la página propia del artículo" y lo que se explica a partir de allí es exactamente lo que estás buscando.

Saludos,