martes, 13 de enero de 2009

Jugando con los posts (Estilo magazine) The end - Vagabundia


Vamos a ver si podemos darle un final a esta serie de entradas sobre las plantillas tipo magazine en Blogger, agregando un par de funciones más.

Lo primero, entonces, es definir con claridad cuáles son las características propias de este tipo de sitios y, en este caso, saber qué podemos hacer y qué no podemos hacer ya que nos enfrentamos con las limitacions propias de un servicio que ofrece un acceso restringido a nuestros datos.

La plantilla deberá contemplar algunos puntos que considero imprescindibles para un blog de este estilo:
  1. La página principal del sitio (home) debe ser exclusiva, distinta del resto y es la única que muestra el estilo magazine. Debería ser diferente, tanto por la forma en que se muestran las entradas como en su estructura y allí, mostrarse un extracto personalizado de cada entrada con un enlace a la página individual.
  2. La página de entradas individuales se mostrará de manera normal, con cualquier tipo de contenido y ese contenido deberá ser independiente del resto.
  3. Las páginas que se muestran durante la navegación deben ser listas con títulos y, eventualmente, incluir la opción de expandirlos.
  4. La sidebar debe ser dinámica y contemplar la posibilidad de mostrar contenido de referencia a la entrada individual que se esté viendo.

Partiendo de estas premisas, comienzo con una Plantilla Mínima y, como ya estoy un poco harto del color blanco, le cambio algunos detalles gráficos y la amplío. Aunque todo eso no tiene mayor importancia y la parte estética puede ser cualquier cosa, de todas formas, la plantilla ejemplo está disponible para ser descargada en formato ZIP

El ejemplo, puede verse funcionando online en un blog de pruebas o se puede acceder haciendo click en cada una de las imágenes de esta entrada.

A los efectos de la explicación, sólo hay que saber que los anchos de referencia son los siguientes:

header-wrapper: width: 980px
outer-wrapper: width: 980px
main-wrapper: width: 660px
sidebar-wrapper: width: 260px
footer-wrapper: width: 980px


Es decir, el blog tiene 980 pixeles de ancho máximo dividido en dos partes, las entradas ocupan 660 y la sidebar 260. El resto, los 60 pixeles restantes, son las separaciones entre ambos.

La idea es la siguiente: en la página principal se verá el estilo magazine. Por la forma en que lo quiero distribuir, necesito que sólo se muestren 6 entradas por página así que voy a Configuracion | Formato y coloco ese valor:

Mostrar en la página principal.

Ese estilo magazine, con entradas sumarias, sólo se verá allí en home, de esa manera, cualquier blog podría adaptarse ya que no sería necesario editar las entradas anteriores, basta que las primeras (en este caso esas seis) posean el nuevo código; el resto se seguirá mostrando normalmente.

Para darle más fuerza a ese home y diferenciarlo más del resto del sitio, cambiaremos de lugar la sidebar y, en lugar de colocarla al lado de las entradas como en el resto de las páginas, la pondremos abajo.


Vamos a modificar el código de Blogger, expandiendo los artilugios y buscando esto:

<b:includable id='post' var='post'>

un poco más abajo, veremos el código que se usa para mostrar las entradas:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
Modificaremos eso, interceptándolo de manera similar a lo que se mostraba en el artículo anterior:
<!-- diferenciar el tipo de pagina -->

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- entradas "normales" -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
<b:else/>
<!-- entradas tipo magazine -->
<div class='post-body entry-content'>

<div expr:id='"original-" + data:post.id'>
CONTENIDO ORIGINAL DEL POST
</div>
<div style='clear: both;'/>
</div>
<script type='text/javascript'>
// enviar el ID generado por Blogger <data:post.id/>
// enviar el contenido HTML del post <data:post.body/>

ejecutarExtracto(&#39;<data:post.id/>&#39;,&#39;<data:post.body/>&#39;);
</script>
</b:if>
La gran diferencia es que usamos esta condición:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

que es la que nos permite diferenciar la página de inicio del cualquier otra página de nuestro blog.

Como quiero que las páginas con listas (Archivos, Etiquetas, Navegación, Búsqueda) se muestren resumidas, vamos a agregarle el hack de PeekABooPost tal como lo que explica El escaparate de Rosa


Buscamos esto:

<b:includable id='main' var='top'>

y justo encima, agregamos el código:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table class='listaArchivos'>
<tr>
<td class='masmenos'><a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer esta entrada'>[+/-]</a></td>

<td class='titulo'><a expr:href='data:post.url'><data:post.title/></a></td>
</tr>
</table>
<div class='post-body entry-content' expr:id='data:post.id' style='display:none'>
<data:post.body/>
<div style='clear: both;'/>
</div>

</div>
</b:includable>
Seguimos allí y más abajo, eliminaremos esta línea:

<b:include data='top' name='status-message'/>

Por último, reemplazaremos esta línea:

<b:include data='post' name='post'/>

por este otro código:
<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Bien, si seguimos cuerdos, podemos continuar; la parte más engorrosa ha terminado. Ahora, sólo nos queda agregar el CSS y los scripts, justo antes de </head>
<style>

/* ocultar el contenido dinamico de las entradas */
/* este dato dependerá de la plantilla y puede tener otro ID */
#HTML1 {display:none;}
</style>

<!-- estableceremos estilos diferentes para home y el resto del blog -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
/* los estilos para la pagina principal estilo magazine */
.post {
-moz-border-radius: 10px;
border: 2px solid DarkGray;
float: left;
font-family: Verdana;
height: 190px; /* la altura de los extractos es fija */
margin: 0 5px 10px;
overflow: hidden;
padding: 10px;
width: 275px; /* habrá tres extractos en el ancho */
}
.post h3 a, .post h3 a:visited {/* propiedades de los títulos */ }
.post img {
width: 100px;
height: 100px;
float: left;
margin: 0 5px 0 0;
}
h2.date-header {display: none;} /* ocultamos la fecha que pone Blogger */
.post-footer { /* propiedades del footer */ }
/* los cambios de la sidebar */
#main-wrapper { /* le damos ancho y eliminamos la flotación para que se muestre abajo */
float: none;
width: 930px;
}
#sidebar-wrapper {
float: left;
margin: 20px 0 0 25px;
overflow: hidden;
padding: 0;
width: 930px;
}
.sidebar .widget { /* definimos las propeidades de cada elemento */
float: left;
margin: 10px;
padding: 10px;
width: 270px; /* el ancho de cada elemento (en este caso hay sólo tres) */
}
</style>
<b:else/>
<style>

/* los estilos para el resto de las paginas */
.extractoOculto {display:none;} /* ocultamos los extractos de las entradas */
/* los estilos para listas de archivos */
.post table.listaArchivos { /* la tabla que contiene el hack */ }
.post table.listaArchivos td.masmenos { /* la celda para expandir/colapsar */ }
.post table.listaArchivos td.titulo { /* la celda del título */ }
</style>
</b:if>

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

function leerExtractoPOST(cadena) {
// llega con una cadena (bodyPOST) con el HTML del post procesado
// y la devuelve procesada extrayendo el contenido
// busca la secuencia del DIV con el extracto oculto (28 caracteres)
var verificar = cadena.indexOf('<div class=\"extractoOculto\">');
if (verificar != -1) {
// si encuentra el DIV con el extracto oculto busca la secuencia final
var hasta = cadena.indexOf('</div>');
// y extra el contenido
cadena = cadena.substr(28,hasta-28);
} else {
// si no encuentra el DIV con el extracto oculto VEREMOS
// alert ("ERROR");
}
return cadena;
}

function ejecutarExtracto(idPOST,bodyPOST) {
// llega con idPOST que es el ID generado por Blogger
// llega con bodyPOST que es el contenido HTML del post

// la funcion verifica que haya un extracto y devuelve una cadena HTML
bodyPOST = leerExtractoPOST(bodyPOST);
// lo que se va a escribir es el contenido del extracto
var divPOST = "original-" + idPOST; // el DIV del post normal
document.getElementById(divPOST).innerHTML = bodyPOST;
}

function toggleIt(id) {
// la funcion del hack PeekABooPost
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

//]]-->
</script>


Un último esfuerzo para tener más opciones. Vamos a agregar script más, nos vamos al final de nuestra plantilla y justo antes de </body> colocaremos la función que nos permitirá mostrar contenidos variables en la sidebar:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>
//<![CDATA[
if (document.getElementById('contenedorOculto') != null) {
var copiarContenido=document.getElementById('contenedorOculto').innerHTML;
document.getElementById('contenedorDinamico').innerHTML=copiarContenido;
document.getElementById('HTML1').style.display='block';
}
//]]>
</script>
</b:if>
Como ya dije, para simplificar las cosas, la plantilla ejemplo está disponible para ser descargada en formato ZIP

Vamos a ver cómo debemos usarla.

Una parte, el extracto, es exactamente igual que el que usamos antes (más información). El extracto es lo que se verá en la página principal en lugar del post. Basta colocarlo al inicio de las entradas, entre etiquetas DIV que tengan la clase extractoOculto.

Para que el estilo magazine funcione correctamente, las entradas deberán incluir ese DIV, caso contrario, se mostrará el contenido normal, cortado, ya que la altura de esos rectángulos es fija.

Por el contrario, el contenido dinámico es optativo. Ese contenido es el que se mostrará sólo en la sidebar cuando veamos la entrada individual y lo agregamos de modo similar, por ejemplo, al final del post, en un DIV con la clase contenedorOculto.

Un ejemplo de un post con ese contenido puede verse en esta entrada y el código tiene esta estructura:
<div class="extractoOculto"><img src="URL_imagen" />Este es el contenido del extracto.</div>
....... el resto del post .......
<div id="contenedorOculto" style="display:none;">Este es un contenido exclusivo de la entrada.</div>

REFERENCIAS:

  • Magazine Parte 1
  • Magazine Parte 2
  • Magazine Parte 3

















  • TABLA - FUENTES - FONTS


    SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








    free counters


    Disculpen las Molestias




    TABLA - INFORMÁTICA - UTILIDADES

    miércoles, 7 de enero de 2009

    Jugando con los posts (Magazine 3) - Vagabundia


    Y seguimos con el magazine, este estilo de plantilla que se ha hecho popular en WordPress.

    No cabe duda, cuando vemos uno de los demos de ese tipo de plantillas, nos asombramos, salen del esquema normal de un blog y es probable que eso sea lo que nos llama la atención. Deja de ser una sucesión de entradas una debajo de la otra, se parecen ... a un sitio "normal" sorpresa1

    Y tal vez el punto clave venga por ese lado. Un blog es un blog. Un blog no es una página web común y en esas diferencias están sus pros y sus contras. Tal vez, bajo ciertas condiciones y con ciertos contenidos, este formato magazine sea útil pero no siempre porque devirtua la escencia misma del blog y esto no es ni malo ni bueno, sólo es distinto.

    De todas manera, como cualquier herramienta, abre posibilidades que pueden explorarse aunque en Blogger, las limitaciones son muchas.

    A mi juicio, un tema tipo magazine no está definido porque las entradas se muestren resumidas y en varias columnas. Un tema tipo magazine tiene una característica especial que es la que podemos ver en cualquier portal de noticia: en la página principal (en relativamente poco espacio) se muestran los títulos de los últimos artículos, un copete o bajada que nos da una idea del contenido de cada uno de ellos, otros artículos destacados y cierto contenido dinámico auxiliar en alguna sidebar (videos, galería de imágenes, etc).

    Todo eso, hace que, utilizar alguna plantilla de este tipo en el mismo WordPress, con todas sus ventajas, no sea sencillo; implica pensar la diagramación, agregar datos extras para que la plantilla los interprete, colocar imágenes especiales, etc, etc, etc. Obviamente, cuanto más sofisticada sea, más cosas habrá que tener en cuenta pero, siempre es posible resignar funcionalidades y simplificar las cosas.

    Sigo creyendo que en Blogger el tema es complejo si es que queremos sacarle el máximo partido y avanzar un poco más, no limitarnos a cortar el post en cierto punto sino pensarlo desde cero para que las entradas se muestren de dos maneras diferentes y no sólo gráficamente, sino también su contenido.

    Partiendo de eso, entonces, vamos a ver qué posibilidades nos quedan ... pocas, es cierto.

    La idea es: escribo un post, cualquiera, tiene videos, imágenes, lo que se me ocurra. Si uso un modelo magazine con algún sistema tipo Leer Más, tendré que armarlo de alguna manera para que lo que se muestre en la página principal no descalabre todo. Puede hacerse, hay que pensarlo pero, prefiero no hacerlo porque es demasiado trabajo y no siempre conseguiré algo razonable. Prefiero buscar una forma de agregarle a ese post, algo que me sirva de "copete/bajada" un extracto especial, algo que sólo veré allí y no en la entrada individual.

    Voy a hacer lo siguiente, colocaré ese extracto al inicio de mi entrada, en un bloque DIV al que le daré una clase:
    <div class="extractoOculto">

    Este es el contenido del extracto o resumen oculto de la entrada.
    </div>
    ..........
    y aquí colocaré el post "normal"
    Ahora, modificaré la plantilla y me baso en la misma que en los casos anteriores, una plantilla mínima.

    Expandimos los artilugios y buscamos el área donde se muestran los posts:
    <div class='post-body entry-content'>
    <p><data:post.body/></p>

    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    Vamos a cambiar ese código por este otro:
    <b:if cond='data:blog.pageType == "item"'>
    <!-- en una página individual no hay cambios -->
    <div class='post-body entry-content'>

    <data:post.body/>
    <div style='clear: both;'/>
    </div>
    <b:else/>
    <!-- extracto para la página principal -->

    <div class='post-body entry-content'>
    <div expr:id='&quot;original-&quot; + data:post.id' style='display:none;'>
    <data:post.body/> <!-- CONTENIDO ORIGINAL DEL POST NO VISIBLE -->
    </div>
    <div style='clear: both;'/>

    </div>
    <!-- ejecutar función JavaScript -->
    <script type='text/javascript'>
    // enviará el ID generado por Blogger (data:post.id)
    ejecutarExtracto(&#39;<data:post.id/>&#39;);
    </script>

    </b:if>
    ¿Qué hemos hecho? Usamos los condicionales para saber si estamos en una página individual (y en ese caso no hacemos nada) o si estamos en la página principal que es donde queremos cambiar las cosas.

    El lugar de mostrar, lo tenemos oculto hasta analizarlo utilizando JavaScript y allí cambiaremos su contenido, lo re-escribiremos y recién luego lo mostraremos.

    Pondremos ahora el CSS al igual que hicimos antes, justo antes de </head>:
    <b:if cond='data:blog.pageType != "item"'>
    <style>

    /* las propiedades de las entradas en la página principal */
    .post {
    background-color: #FAF5FF;
    border-bottom: 10px solid #FFFFFF;
    float: left;
    height: 190px; /* el alto es fijo */
    margin: 0 10px;
    overflow: hidden; /* evitamos barras en caso de error */
    width: 310px; /* el ancho es la mitad de una entrada normal */
    }
    .post img {
    float: left;
    height: 100px;
    margin: 0 5px 0 0;
    width: 100px;
    }
    </style>
    <b:else/>
    <style>
    /* ocultamos el extracto en las páginas individuales */
    .extractoOculto {display:none;}
    </style>
    </b:if>
    Inmediatamente debajo de eso, agregamos la función del script:
    <script type='text/javascript'>

    //<![CDATA[

    // llega con el ID del post
    function ejecutarExtracto(idPOST) {
    var namePOST = "original-" + idPOST; // el DIV del post normal
    var divPOST = document.getElementById(namePOST);
    // buscamos los DIVS
    var lista = divPOST.getElementsByTagName("div");
    if(lista.length>0){
    // buscamos un DIV con la clase extractoOculto
    for(var i=0; i<lista.length; ++i) {
    if(lista[i].className=="extractoOculto") {
    // cambiamos el contenido del psot por el de ese DIV
    divPOST.innerHTML = lista[i].innerHTML;
    // lo mostramos
    divPOST.style.display = "block";
    return;
    }
    }
    }
    }
    //]]>
    </script>
    Y eso es todo. Un ejemplo de esto es el que puede verse en este demo online.

    A mi entender, habría que resolver dos cosas más, la primera es tratar que este tipo de formato se muestre en la página principal exclusivamente y no en otro tipo de páginas con listas como Archivos, Búsqueda o cuando avanzamos o retrocedemos con la barra de navegacion inferior del blog. Este es un tema complejo y no sé si tiene solución.

    El otro punto que sería interesante es ver si existe la posibilidad de agregar contenido dinámico, es decir, realizar el proceso inverso, tener en el post algún tipo de información extra que no se vea en la página principal y tampoco en las páginas individuales sino que se ubique en alguna otra parte del blog, por ejemplo en la sidebar.

    REFERENCIAS:

  • Magazine Parte 1
  • Magazine Parte 2
















  • TABLA - FUENTES - FONTS


    SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








    free counters


    Disculpen las Molestias




    TABLA - INFORMÁTICA - UTILIDADES

    Correo Vaishnava