JMiur [E]

Blogger es un servicio de blogs, eso no es novedad. Un blog tiene una característica fundamental, las entradas se muestran ordenadas cronológicamente y todas y cada una de ellas aparecerán listadas en un elemento como Archivos. No hay manera de ocultarlas. A diferencia de otros servicios carece de las llamadas páginas estáticas y esta es una de las ventajas de sistemas como WordPress.

Una página estática no es otra cosa que una entrada atemporal, está fuera del orden cronológico y suelen usarse para agregar información adicional; por ejemplo, la página About que tanto vemos, el formulario para contactos, índices diversos o incluso el blogroll.

Es cierto que tenemos fomas de simular ese tipo de página ya sea personalizando ciertos posts de tal manera que no parezcan entradas, creando blogs auxiliares pero, no es lo mismo.

Hace mucho, descargué un ZIP con un demo donde se mostraba una alternativa para crear páginas estáticas en Blogger. Lamentablemente, no encuentro la página original pero, de cualquier manera, el demo incluye la página con las explicaciones. Su autor es Haochi Chen de Googlified y él mismo lo dice: "no es una gran solución pero funciona" sonrisa

Yo disiento con eso, creo que es una buena idea aunque no es sencilla de aplicar si no se tienen conocimientos elementales de JavaScript pero, de todas formas, es un punto de partida para experimentar.

Para implementarlo, he cambiado algunos detalles de tal manera que podamos emplear la menor cantidad de archivos externos. De todas maneras, ciertas cosas deberán adaptarse a la estructura de cada plantilla así que hay que hacerlo con cuidado.

Veamos. Lo primero que necesitamos es el script cuyo contenido se encuentra en este archivo. Allí, debemos cambiar y verificar algunas cosas así que vamos a la plantilla y lo agregaremos al final, justo antes de </body>. Si tenemos agregados otros scripts al final de la plantilla como Google Analytics o Twitter, convendría que lo pusiéramos antes de estos. No, la explicación no es muy precisa pero diría que lo ideal sería buscar el último </div> de la plantilla y agregarlo justo allí debajo.

Como hay que hacerle alguna modificación para adaptarlo a cada sitio, vamos a ver el código:
<script type='text/javascript'>
//<![CDATA[

// esta función escribe el script que cargará la página estática
function get(url) {
var script = document.createElement("script");
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
document.body.appendChild(script);
}

// función creada por Dieter Raber de http://dieterraber.net
function readGet() {
var _GET = new Array();
var uriStr  = window.location.href.replace(/&amp;/g, '&');
var paraArr, paraSplit;
if(uriStr.indexOf('?') > -1){
var uriArr  = uriStr.split('?');
var paraStr = uriArr[1];
} else {
return _GET;
}
if(paraStr.indexOf('&') > -1) {
paraArr = paraStr.split('&');
} else {
paraArr = new Array(paraStr);
}
for(var i = 0; i < paraArr.length; i++) {
paraArr[i] = paraArr[i].indexOf('=') > -1 ? paraArr[i] : paraArr[i] + '=';
paraSplit  = paraArr[i].split('=');
_GET[paraSplit[0]] = decodeURI(paraSplit[1].replace(/\+/g, ' '));
}
return _GET;
}

// es la función que "escribe" la página estática y debemos editar
function page() {
elHTML = '<div class="post">';
elHTML += '<h3 class="post-title"><a href="http://miSitio.blogspot.com/?page='; 
elHTML += tituloPE.toLowerCase();
elHTML += '">' + tituloPE + '</a></h3>';
elHTML += '<div class="post-body"><p>' + contenidoPE + '</p>';
elHTML += '<div style="clear: both;"></div>';
elHTML += '</div></div>';
document.getElementById('main').innerHTML = elHTML;
document.getElementById('main').style.display = 'block';
}

// las variables 
var _GET = readGet(); // crea la URL
var ifPAGE  = false; // TRUE si estamos mirando una página estática
var tituloPE  = ''; // el título de la página estática
var contenidoPE = ''; // el contenido de la página estática

// cargamos las diferentes páginas
switch(_GET['page']) {
case 'paginaEstatica-1': // ejemplo 1
get('URL_paginaEstatica1.txt');
ifPAGE = true;
break
case 'paginaEstatica-2': // ejemplo 2
get('URL_paginaEstatica2.txt');
ifPAGE = true;
break
default:
}

// ejecutar y mostrar la página
if (ifPAGE == true) {
window.onload = function(){
page();
}
}

//]]>
</script>
Lo que hará el script es usar el DIV main que es el que por defecto usa Blogger para mostrar los posts y "escribir" su contenido; por eso es importante verificar que los nombres de las clases sean las de nuestra plantilla y ahí es donde debemos tener cuidado si lo que queremos es crear algo que tenga las mismas características que un post. Este es el esquema básico del DIV main:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
.......
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
.......
<h3 class='post-title'> ....... </h3>
.......
<div class='post-body'>
.......
<div style='clear: both;'/>
</div>
</div>
</b:includable>
.......
</b:widget>
</b:section>
Otra cosa que debemos cambiar y adaptar a nuestras necesidades es la configuración de las páginas que vayamos a crear. Eso, en el modelo original es lo que se ve en en el archivo page-config.js pero, me parece mejor colocarlo directamente junto con el otro y ponerlo en la plantilla para así, poder editarlo con facilidad.

El esquema para agregar una página es este:
case 'nombrePaginaEstatica':
get('URL_paginaEstatica.txt');
ifPAGE = true;
break
nombrePaginaEstatica es un nombre que le daremos a la página estática para identificarla
URL_paginaEstatica.txt es la dirección URL del archivo de texto con el contenido de esa página que habremos subido a algún servidor

Cada página que creemos, deberá tener ese esquema y el nombrePaginaEstatica deberá ser único.

Ufff, suena engorroso; ya saben ahora por qué lo tuve tantos meses guardado pero, vale la pena seguir adelante. Paciencia.

Hasta aquí, tenemos el script. Podemos guardar la plantilla y, si no cometimos errores de sintaxis, el blog no sufrirá cambios; nada será distinto de lo que era. Ahora, debemos continuar y lo lógico, sería crear las páginas estáticas.

Esas páginas, originalmente eran archivos JS pero, como es más sencillo alojar archivos TXT, lo mejor es hacerlos así. Tienen sólo dos partes, dos variables, en una va el título que se mostrará y en la otra el contenido que es código HTML.

Cada página deberá tener algo así:
var tituloPE = 'EL TITULO A MOSTRAR';
var contenidoPE = 'EL CONTENIDO A MOSTRAR';
Cada una de ellas las colocaremos entre comillas simples (') y allí estará la única restricción; el contenido puede ser cualquier cosa pero no incluir comillas simples; si las necesitamos, debemos reemplazarlas por su equivalente &#39;

¿Cómo creamos ese contenido? Con cualquier editor, incluyendo el de Blogger. Basta escribir y copiar el código  HTML donde deberemos agregar manualmente los saltos de línea; es decir, si queremos que algo se muestre en una línea distinta, agregamos <br/> y si queremos dejar una línea en blanco, agregamos <br/><br/> o bien podemos colocar los párrafos entre etiquetas <p> y </p>.

¿Funcionará cualquier código? En principio sí pero, habrá que probar. Este es un ejemplo de un archivo TXT

Ahora ya está completo y lo único que falta es colocar el enlace donde nos guste, utilizando esta sintaxis:
<a href="?page=nombrePaginaEstatica">ENLACE</a>
Quiere decir que, para usar el archivo de texto about.txt del ejemplo, podría poner esto en el script:
case 'about':
get('https://dl.dropboxusercontent.com/u/21163834/SRC/about.txt');
ifPAGE = true;
break
Y usar un enlace así:
<a href="?page=about">CLICK PARA VER</a>
Cada página nueva que creamos, la agregamos al script:
case 'demoPage1':
get('URL_demoPAGE1.txt');
ifPAGE = true;
break
case 'demoPage2':
get('URL_demoPAGE2.txt');
ifPAGE = true;
break
Y los enlaces donde quisiéramos mostrarlos, usando textos o imágenes; como parte de un menú o en la sidebar:
<a href='?page=demoPage1'>DEMO-1</a>
<a href='?page=demoPage2'>DEMO-2</a>
Un último detalle que tiene que ver más con lo estético que con otra cosa, es ver si podemos resolver la forma en que se nos muestra la página estática.

Como lo que hace el script es "re-escribir" la página donde nos encontremos eliminando parte de su contenido y lo reemplaza por el contenido del archivo de texto, la ubicamos al final y la ejecutamos cuando está cargada. Para reemplazar algo, primero debe existir ese "algo".

Esto, produce una situación indeseada, primero se nos mostrará una cosa y luego, cambiará y se nos mostrará otra.

Para disimular ese efecto, agregaremos un pequeño script justo antes de </head>, leeremos la URL de la página que se mostrará y si detectamos que en ella se encuentran los caracteres ?page significa que será una página estática así que, temporalmente, ocultaremos el DIV main y sólo lo mostraremos cuando ya esté terminado el reemplazo:
<script type='text/javascript'>
// <![CDATA[
var uriStr = window.location.href.replace(/&amp;/g, '&');
if(uriStr.indexOf('?page') > -1){
document.write('<style>#main{display:none;}</style>')
}
// ]]>
</script>
No, no es algo que puede hacerse con un par de clicks pero vale la pena intentarlo. En este blog de pruebas hay un demo online con cuatro páginas estáticas a las que se accede desde un menú y que muestran diferentes altenativas, simples o complejas.

Se crean dinámicamente pero son enlaces normales por lo tanto, también son accesibles desde otra página web así que esas páginas, también podrían ser abiertas desde acá:

19 comentarios:

Graciela  

así es con blogger, si creas una página estática con fecha anterior queda en Archivo...lo estoy haciendo, pero además si deseas que sea totalmente distinta, tienes que sacar cada elemento...voy a probar de esta manera...buen día :D

Responder
HaCk CrAcK  

Waw quedo perfecto, es la mejor solucion que vi en todo este tiempo. Ahora vamos a poder tener paginas estaticas como en Wordpress. Ahi que agradecer a estas personas que se toman el trabajo para mejor poco a poco el sistema de Blogger...y a vos por explicarnos tan bien ;)

Responder
Bonzu Pipinpadaloxicopolis III  

Se ve muy prometedor y un efecto muy rápido :-)

Responder
LuzdeLuna  

Con este sistema se podría implentar una página de inicio fija, que solo tuviera imagen y el "entrar" que vemos en algunas webs??
Con esto se podría sacar el header del blog en los post? ufff compliqueti no? :P

Responder
Marcos Gabriel  

Este sistema realmente é legal , não sabia que dava para usar este tipo de efeito apenas com javascript simples, ja cheguei a fazer algo parecido , porem usando jquery como na minha pagina ja se usa Jquery , acho que seria mais vantagem usalo (ja esta sendo carregado mesmo... uma linha a + ou a - tanto faz)

entretanto eu continuo usando a forma 'blogger' de criar e depois eu uso umas condicionais do blogger , pois eu sempre penso algo como:

E se a pessoa estiver com o javascript desabilitado?
claro que estas pessoas sao uma quantidade minima ... mas emfim , é uma otima opção esta, gostei principalmente pela rapidez.

parabens

:D

Responder
JMiur  

Graciela: es un método un poco engorroso a la hora de escribir que hay herramientas que ayudan a hacerlo y termina siendo casi casi fácil.

HaCk CrAcK: A mi también me gustó la idea, no sé porque no la desarrollaron más.

Bonzu: es rápido, en realidad, tan rápico como el blog mismo porque es muy poco lo que se carga. Vale la pena probarlo.

LuzdeLuna: Imagino que sí pero habría que hacerle modificaciones importantes. Voy a pensar en eso :D

Marcos: En realidad, si no se tiene JavaScript habilitado, no sé si Blogger funciona porque hay muchos scripts que se agregan de forma automática. Lo que me gustó de esta idea es justamente que no usara librerías externas lo que lo hace bastante flexible.

Responder
Marcos Gabriel  

algumas coisas realmente n funcionam , porem o que é mais importante no caso o conteudo eu deixo de alguma forma que quem esteja ou não com o javascript abilitado possa ver.

nossa vc é rapido para responder :D

Responder
Graciela  

he estado casi todo el día fuera...cuando tengas tiempo mira la cabecera que me regalaron, no lo puedo creer aún, sin decirle qué me gusta o no...es una amiga preciosa que no quiere dé su nombre...nunca te agradezco, digo qué bueno JM y no gracias...bueno ya sabes lo que pienso en fin :) sueña con los ángeles si puedes y si no no sueñes nada...chauuuuuuuuuuuuuuuu

Responder
JMiur  

Eso es lo único que importa, Marcos :D

Graciela: Muy bella imagen realmente :D

Responder
javfanel  

master waw que post, con este post puedes hasta dejar de escribir por meses y ni asi abra kien lo supere waw en un futuro kiero poner un menu al blog y gracias a ti puedo poner algo decente, saludos jmiur aah me inscribi a tu RSS por que conociendote kada tanto tiempo haces mejoras o actualizaciones, voi a estar pendiente por si acaso.

Responder
Graciela  

no sabes lo que no hemos reído con Coki, sí pondré su nombre en el blog...resultó que estaba haciendo bocetos y coloqué el mismo...el grito se escuchó gracielaaaaaaaaaa jajaja...dice según sus palabras me arruinaría el blog (el boceto), hizo anoche una captura: cuando vió puesto allí jajaja...sí que me he divertido durante la mañana.

Dije Jmiur se quedó sin energía :(( no llegaron las actualizaciones por correo...qué te pasa Feed Burner!!!...allí hice la valija para ir a cocinarte, por la tarde apareció en el escritorio, pero no el hotmail...avisa si no tienes energía que bien picantes están las boletitas de luz y gashhhhhhhh, que los :X...mis besos!!!

Responder
Ignacio  

d

Responder
JMiur  

Gracias por el comentario, javfanel :$

Graciela: Pués, no sé. Últimamente TODO anda bastante mal :D

Responder
jebuzz  

lo implemente y todo salio muy bien, grasias por la explicacion

Responder
uhno  

Excelente, compadre!!!... La verdad es que he visto muchos 'resultados finales' de hacks para páginas estáticas en blogger, pero creo que éste es el mejor lejos... Ya lo voy a implementar en mi blog de pruebas, y si queda igual de bien, lo pongo en el 'verdadero', jeje...

Responder
Anacronikus  

Qual a interferência deste script quando se usa também o script de posts resumidos com Thumbnails?

Responder
JMiur  

Lo desconozco, no veo en qué puedan interferir ya que actuan sobre cosas diferentes.

Responder
racnarok  

Jmur, te recomendaria que revises Blogger Draft, ahora aparece la opción de crear páginas estaticas, me pareceria interesante que opinaras al respecto.

La opción aparece en la parte de edición de entradas.

Responder
JMiur  

Lo vi pero, por ahora me abstengo; está muy verde, veremos en unos días.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR