Unfollow

JMiur [E]

REFERENCIAS:labnol

YouTube Uso compartido

Resumen Posts 2: Extractos del texto

Hay muchísimas formas de mostrar los post de manera resumida; no sólo hay variantes usando scripts sino que también podemos definir en qué páginas se mostrarán resumidos.

Para responder a varias inquietudes, aquí comienza la explicación del método que utilizo aunque, en realidad, el primer paso es modificar el encabezado de las entradas para manipular la fecha de manera segura y no tener que estar lidiando con ella.

El LOOP de Blogger es la parte del código de la plantilla donde se muestran las entradas y se encuentra dentro de un INCLUDABLE [Ver/Ocultar Código Original [+]

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>

Es my largo porque está lleno de cosas que por lo general no usamos así que lo simplificamos un poco para quedarnos sólo con lo fundamental y tratar de entenderlo:

<b:includable id='main' var='top'>
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
</b:includable>

Eso que vemos como b:loop es un bucle. Blogger recorre la lista de entradas (tantas como hayamos establecido en la Configuración) y ejecuta otra parte, otro INCLUDABLE; por último si es una página individual, le agrega los comentarios. La forma en que se mostrarán los post es lo que se encuentra en ese otro INCLUDABLE así que lo primero que vamos a hacer es interceptar esa parte, es decir, en lugar de mostrar las entradas, vamos a agregar alguna condición para que sólo se ejecute en determinados casos y en otros, se ejecute otro código personal. Esto, no es otra cosa que una variante del hack que muestra tanto en el blog de Gem@

como en El escaparate de Rosa

y que es el llamado PeekABooPost.

¿Qué condición pondremos? Eso puede variar, y en este ejemplo haremos lo mismo que hace PeekABooPost: el home se mostrará normal pero las páginas con listas de entradas (etiquetas, navegación, archivos) se mostrarán resumidas:

<b:includable id='main' var='top'>
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='ResumenPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
</b:includable>

Y justo debajo de </b:includable> agregamos nuesto nuevo INCLUDABLE:

<b:includable id='ResumenPost' var='post'>
<!-- aqui luego pondremos el nuevo código -->
</b:includable>

Si ahora viéramos el blog, tanto el home como las entradas individuales no tendrían cambios pero ninguna página con listas de entradas mostraría algo así que sería hora de agregar nuestro código personal:

<b:includable id='ResumenPost' var='post'>
<table cellpadding='0' cellspacing='0' class='post-resumen'><tbody>
<tr>
<td rowspan='2'>
<h3><a expr:href='data:post.url'><data:post.title/></a></h3>
<p class='txt-resumen' expr:id='&quot;resumen-&quot; + data:post.id'/>
</td>
<td class='celdaderecha'>
<span class='lafecha-resumen' expr:id='&quot;fecha-&quot; + data:post.id'>
<script type='text/javascript'>calendario(&#39;<data:post.timestamp/>&#39;);</script>
</span>
</td>
</tr>
<tr>
<td class='celdaspan'>
<a class='toggleresumenpost' expr:onclick='&quot;toggleResumenPost(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'>[+/-]</a>
</td>
</tr>
</tbody></table>
<div class='post-oculto' expr:id='&quot;dummy-&quot; + data:post.id'>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>
</div>
<script type='text/javascript'>resumenPost(&#39;<data:post.id/>&#39;);</script>
</b:includable>

Tratemos de entender todo eso que parece tan engorroso porque es la mejor manera de poder personalizarlo y armar cualquier otro modelo.

En la columna de la izquierda de la tabla colocaremos el titulo de la entrada y su resumen al que lo mostramos como un párrafo.

En la parte superior de la columna derecha irá la fecha que se mostrará usando un script que la descomponga (el mismo que usamos para las entradas normales) y debajo, un enlace que ejecutará otra función de JavaScript para expandir y contraer el post oculto.

Fuera de la tabla se ubica el post normal pero oculto y por último la llamada al script que resumirá la entrada.

La mayor parte de las etiquetas tienen un atributo class que nos permitirá personalizar cada sector y a varias de ellas les colocamos un ID único para poderlas identificar y decirle al script dónde debe escribir o qué elementos debe modificar.

Pongamos entonces el script antes de </head>:

<script type='text/javascript'>
//<![CDATA[

// RESUMEN POSTS
function resumenPost(idPOST) {
var divAuxiliar = "dummy-" + idPOST;
contenido = document.getElementById(divAuxiliar).innerHTML;
resumen = contenido.replace(/<[^>]+>/g,'');
longitud = 150; // máxima cantidad de caracteres a tener en cuenta para resumir la entrada
var auxiliar = resumen.split(" ");
var nueva ="";
for(var i=0; i<auxiliar.length; ++i) {
nueva = nueva.concat(auxiliar[i]) + " ";
if(nueva.length > longitud) {break}
}
resumen = nueva +"...";
var spanResumen = "resumen-" + idPOST;
document.getElementById(spanResumen).innerHTML = resumen;
}

// PERMUTAR ESTADO
function toggleResumenPost(cual) {
var elpost = "dummy-" + cual; 
var elElemento=document.getElementById(elpost);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}

//]]>
</script>

Lo que faltaría es el CSS así que lo agregamos antes de </b:skin> y ahí deberemos usar nuestra imaginación:

.post-resumen { /* tabla post resumidos */
border-bottom: 1px solid #444;
height: 100px;
margin: 30px 0 0;
padding: 0 0 0 10px;
width: 410px;
}
.post-resumen:hover {background-color: #000;}
.post-resumen td {position: relative;}

.post-resumen td.celdaderecha { /* la celdas con la fecha */
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
background-color: #333;
text-align: center;
vertical-align: top;
width: 60px;
}
.post-resumen td.celdaspan { /* la celda con el enlace */
background-color: #333;
text-align:center;
vertical-align:top;
width: 60px;
}

.post-resumen h3 { /* el título de las entradas */
color: skyBlue;
font-family: Lucida Grande,sans-serif;
font-size: 20px;
font-weight: normal;
margin: 0;
}
.post-resumen h3 a {
color: skyBlue;
font-family: Lucida Grande,sans-serif;
font-size: 20px;
font-weight: normal;
text-decoration: none;
}

/* la fecha de las entradas */
.post-resumen span.lafecha-resumen {text-align: center;}
.post-resumen span.lafecha-resumen .lafechaDia {font-size: 24px;}
.post-resumen span.lafecha-resumen .lafechaMes {font-size: 14px;}
.post-resumen span.lafecha-resumen .lafechaAnio {font-size: 12px;}

/* el post resumidoen si mismo */
.txt-resumen {color: #CCC; margin: 5px;}

/* el enlace para expandir yy contraer */
a.toggleresumenpost {
color: #87CEEB;
font-size: 12px;
text-align: center;
}
a.toggleresumenpost:hover {color: #FFF}

/* el post normal oculto */
.post-oculto {
border-bottom: 1px dotted #333;
display: none;
margin:30px 0;
padding-bottom:15px;
}

Google, Blogger y los códigos maliciosos

Es probable que quien haya leido el reciente artículo de SpamLoco

donde nos cuentan de las nuevas funciones agregadas a la Herramientas para Desarolladores de Google, sólo lo haya visto como una información interesante pero que poco tenía que ver con nuestros blogs.

Sin embargo, si usamos Blogger, yo diría que mejor la tengamos guardada en los marcadores porque nos toca de cerca.

Es usual que en el inicio de un blog (y también después) experimentemos con gadgets, scripts y todo tipo de servicio ofrecido por terceros. Es una práctica normal; un proceso inevitable pero a la vez, es una forma de arriesgarse ya que ese código que agregamos es incontrolable y muchas veces dejamos la puerta abierta para cualquier cosa.

También es probable que hayamos visto que al agregar cierto gadget aparece publicidad indeseada, pop-ups que no sabíamos que existían y suelen ser nuestros visitantes los que nos advierten. Esto es molesto pero aún peor es si el gadget inyecta cualquier tipo de código o enlace que Google considera malicioso. En ese caso, los sancionados seremos nosotros ya que somos responsables de todo aquello que mostramos.

No crean que esto no ocurre y no crean que esto es un detalle menor; las consecuencias son graves y complicadas de resolver:

"Ahora bien, no es extraño que los sitios legítimos sean atacados para inyectar códigos maliciosos, si esto se logra y el webmaster no detecta a tiempo la filtración, seguramente Google marque al sitio como sospechoso, pasando a formar parte de su lista negra.

Hace un tiempo comenté ¿qué hacer si Google marca nuestro sitio como peligroso?, cuando esto sucede lo que se debe hacer es limpiar el código y enviarle una solicitud a Google para que realice un nuevo escaneo y así elimine el sitio de su lista negra."

Las nuevas funciones agregadas nos permiten anticiparnos a esta situación por lo que hay que tenerlas muy en cuenta.

Las encontramos en el Panel de nuestro sitio bajo el título de Labs y si hacemos click en Detalles de malware nos mostrará el resultado del análisis que hace Google y, eventualmente, la lista de páginas afectadas y los detalles del código malicioso o sospechoso.

Las API de Páginas de diagnóstico de Google siguen funcionando y son una forma manual de verificar lo mismo; se accede a ellas colocando la siguiente URL en el navegador:

http://www.google.com/safebrowsing/diagnostic?site=http://misitio.blogspot.com/

Allí se mostrará un breve análisis y de cómo fue evaluado el sitio en los últimos 90 días, e incluye un dato curioso, muestra un enlace al hosting donde está alojado lo que nos lleva al análisis de este que, en este caso, sería blogspot:

"... de los 145933 sitios verificados en los últimos 90 días, 172 contenían software malicioso que fue descargado e instalado sin consentimiento del usuario ..."

Moraleja: En casa de herrero, cuchillo de palo dice el refrán ...

Resumen Posts 1: El encabezado

La característica principal de un blog es que eso que publicamos se ordena de manera cronológica, desde lo más nuevo hasta lo más viejo, por lo tanto, el dato que indica la fecha suele ser un dato importante.

Uno podría imaginar que las entradas son una serie de rectángulos apilados, cada uno de ellos conteniendo datos (fecha, titulo, etc) y eso sería lógico pero, la forma en que Blogger maneja las fechas de las entradas es extraña; por algún motivo, esa fecha está afuera, en un rectángulo separado y accedemos a ella con un dato tan particular que sólo se muestra una vez, es decir, si hay dos entradas en la misma fecha, sólo se muestra una de ellas:

El formato de esa fecha es la que podemos establecer en Configuración | Formato:

Formato de cabecera de fecha

En un blog "normal con algún truco, podemos hacer que se muestre en todas las entradas, algo imprescindible si usamos alguna característica gráfica como los calendarios pero que esté separada no sólo molesta en este sentido, también complica las cosas cuando usamos alguna clase de plantilla donde se muestran las entradas de manera resumida ya que debemos ocultar esa fecha.

En realidad, no es necesario seguir las reglas de Blogger y es más sencillo eliminar ese dato tal como está ya que de todos modos, la fecha es accesible igual sólo que el dato a leer es otro.

En una plantilla mínima, la fecha se muestra de este modo:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<data:post.dateHeader/> es el dato que contiene la fecha y es el que molesta así que fuera con él; eliminamos todo eso de un plumazo.

Hay un segundo dato que nos da la fecha y que se encuentra dentro del post en si mismo y es todo lo que que necesitamos. Se llama <data:post.timestamp/>

Por lo general la vemos en el footer de los posts y lo usamos para mostrar la hora de la publicación ya que así está establecido por defecto pero, en la misma Configuración | Formato, podemos seleccionar la forma en que se mostrará. Por ejemplo, la definimos como fecha:

Formato de hora

De ese modo, la hora no será la hora sino la fecha en formato mes/dia/año y la vamos a usar para crear un DIV nuevo que contenga el encabezado completo de cada entrada, la fecha, el título, el autor y cualquier otra cosa que se me ocurra.

Por defecto, el título de las entradas se encuentra en <b:includable id="post" var="post" > y tiene este código:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Vamos a cambiarlo por algo así:

<div class='elEncabezado'>
  <span class='lafecha' expr:id='&quot;fecha-" + data:post.id'>
    <script type='text/javascript'>calendario(&#39;<data:post.timestamp/>&#39;);</script>
  </span>
  <b:if cond='data:post.title'>
    <h3 class='post-title' expr:id='&quot;titulo-&quot; + data:post.id'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h3>
</b:if>
<span class='elAutor'>mi_nombre</span>
<span> ... cualquier otra cosa ... </span>
</div>

Eso, hará que ahora, las entradas sean rectángulos individuales y por lo tanto, serán mucho más sencillas de manipular cuando intentemos resumirlas:

La primera parte contiene un script optativo que se usará para descomponer la fecha y mostrarla de manera diferente; su código debería agregarse antes de </head> y es el siguiente:

<script type='text/javascript'>
//<![CDATA[
  // LAS FECHAS DE LOS POSTS
  var mes=new Array();
  mes[1]="ene"; mes[2]="feb"; mes[3]="mar"; mes[4]="abr"; mes[5]="may"; mes[6]="jun";
  mes[7]="jul"; mes[8]="ago"; mes[9]="sep"; mes[10]="oct"; mes[11]="nov"; mes[12]="dic";
  function calendario(cual) {
    var verCero;
    var lafecha = cual.split('/');
    verCero=lafecha[1].substr(0,1); if (verCero == "0") { lafecha[1]=lafecha[1].substr(1) }
    fday = "<span class='lafechaDia'>"+lafecha[1]+"</span>";
    fmonth = "<span class='lafechaMes'>"+mes[lafecha[0]]+"</span>";
    fyear = "<span class='lafechaAnio'>"+lafecha[2]+"</span>";
    document.write(fday+fmonth+fyear);
  }
//]]>
</script>

Nos faltaría agregar el CSS.

Aquí lo más importante es agregarle la propiedad position:relative al DIV con el encabezado. Esto será la clave para poder ubicar cada parte de su contenido de manera absoluta, sin márgenes extraños, flotaciones que perturben ni propiedades complejas; de tal forma que pueda verse correctamente en cualquier navegador. Agregamos entonces las definiciones entre <b:skin> y </b:skin>.

No hay demasiadas restricciones al respecto:

/* titulo de los posts */
.post .elEncabezado {
  /* lo importante es definir ancho, alto y posición */
  background-color: #000;
  height: 70px;
  margin: 20px 0;
  position: relative;
  width: 100%;
}
.post h3.post-title {
  border-bottom: 1px solid #444;
  border-top: 1px solid #444;
  font-family: Lucida Grande,sans-serif;
  font-size: 28px;
  font-weight: normal;
  line-height: 1.4em;
  margin: 0;
  width: 410px;
  /* con esta propiedades posicionamos el título */
  padding: 10px 0 20px 60px;
  position: absolute;
  left: 0;
  top: 0;
}
.post h3.post-title a, .post h3 a:visited { 
  /* estas propiedades deben colocarse porque el título es un enlace */
  color: skyBlue;
  display: block;
  font-family: Lucida Grande,sans-serif;
  font-size: 28px;
  font-weight: normal;
  text-decoration: none;
}

/* el autor de los posts */
.post .elAutor {
  color: skyBlue;
  /* con esta propiedades posicionamos al autor */
  position: absolute;
  right: 5px;
  top: 45px;
}

/* la fecha de los posts */
.lafecha {
  display: block;
  font-family: Verdana,Arial;
  font-weight: normal;
  height: auto;
  line-height: normal;
  text-align: center;
  width:40px;
  /* con esta propiedades posicionamos la fecha */
  position: absolute;
  left: 5px;
  top: 4px;
}
.lafechaDia {
  color: #6495ED;
  display: block;
  font-family: Georgia;
  font-size: 36px;
}
.lafechaMes {
  color: #94D5FD;
  display: block;
  font-size: 14px;
  margin-top: -10px;
}
.lafechaAnio {
  color: #DDDDEE;
  display: block;
  font-size: 14px;
  margin-top: -6px;
}

En resumen, dentro de un rectángulo llamado elEncabezado, colocamos cada parte a mostrar y usamos la propiedad position:absolute para ubicarlo en un lugar preciso y eso lo hacemos con las propiedades top, bottom, left y right.