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. ♦

miércoles, 24 de octubre de 2007

jueves, 4 de octubre de 2007

The name is Bond, James Bond

Imagen de 'The name is Bond, James Bond'No hace mucho contaba cómo un grupo de colaboradores voluntarios me estaba ayudando a crear unos montajes con PhotoShop para utilizar en una charla sobre la persuasión para el Encuentro GeneXus.

Uno de los puntos de esa presentación tenía que ver con la manera en que las personas que nos gustan tienen un mayor poder de influencia sobre nosotros. Ese gustar ciertamente incluye a la atracción física o sexual pero no se restringe a ella; también puede aplicar a quienes nos resultan simpáticos (piensen en actores de comedia), o inteligentes, o nos despiertan ternura (piensen en los bebés o los niños en general), o lo que sea que implique que alguien nos agrade en general.

Durante la charla, esto iba ejemplificado con algunas fotos de los casos más típicos de explotación de esta debilidad tomados del campo de la publicidad. Entre algunas fotos de chicas bonitas posando junto a autos, aparecía también ésta del principio con Pierce Brosnan promocionando los relojes Omega, y otra de Brad Pitt para los relojes Tag Heuer.

Brad Pitt - relojes Tag HeuerEl punto con estas dos fotos era que alguien podría cuestionar si su efecto en la publicidad estaba dado por el hecho de ser tipos lindos, o por ser también sumamente famosos (en el caso de Brosnan, además, fuertemente ligado nada menos que a James Bond).

Sin embargo, yo creo que salvo en los casos en que cierta celebridad guarda alguna relación directa con el producto (como puede ser Ronaldinho en una publicidad de zapatos de fútbol Nike, o Michael Schumacher en un comercial de Shell), la elección tiende a recaer sobre un famoso lindo, o en caso de no poder pagarlo, sobre un desconocido pero que sea lindo.

Como forma de probar esta conjetura, y más en broma que en serio, el propósito era jugar a imaginar qué pasaría si en cualquiera de estas fotos sustituyeramos al famoso-lindo por alguien famoso pero no lindo. Ese era el trabajo que le pedí a los artistas del PhotoShop.

Gracias a la colaboración de gente como Andrés "ElAndrew" Rodríguez, Carmen de Moura, Gonzalo Losada, Hernán Hiriart, María Inés Carriquiry, Rodrigo Alvarez, y Viviana Domínguez, llegamos a juntar 26 montajes, todos muy buenos. Como estaba previsto, algunos de los trabajos aparecieron durante la presentación (y a juzgar por las risas del momento, con todo éxito), pero para que se puedan apreciar todos los trabajos preparé estos dos videos:




Si quieren acceder a cada una de las fotos, también pueden hacerlo a través del mini-sitio que usábamos para ver los trabajos a medida que iban llegando.

La verdad es que todo esto me resultó una experiencia sumamente divertida, y quiero agradecer públicamente a los artistas por su colaboración, y felicitarlos por el excelente trabajo que hicieron. ♦