JMiur [E]

Suele ser común que pregunten por qué no funcionan ciertos códigos que vemos en la plantilla cuando se intenta agregarlos en un elemento HTML, en una entrada o incluso en alguna parte distinta de la misma plantilla. Esto, puede ser confuso si no se comprende cómo funciona un blog.

Hay una diferencia sustantiva entre eso que uno ve en la plantilla y el código fuente del sitio; es algo obvio si comparamos ambas cosas; en ambas veremos etiquetas que están delimitadas por los caracteres < y > pero, en la primera hay muchas de ellas que no son "comunes", es decir, que no son etiquetas HTML sino propias del Blogger; en cambio, en el código fuente, sólo veremos etiquetas HTML "normales".

La plantilla de un blog está formada por una serie de instrucciones que le damos al servidor para que "escriba" el código HTML de nuestro sitio. A diferencia de una página común, eso no lo hace el navegador sino que se ejecuta ANTES. Es el servidor (Blogger en este caso) el que interpreta y procesa esas instrucciones, arma la página y luego la envía al navegador para que este la muestre como pueda.

Que eso ocurra antes es lo que permite, por ejemplo, que una plantilla pueda ser condicionada; que ciertas cosas sean mostradas o no. Es una diferencia importante porque de ese modo, se evita la carga de códigos inútiles.

Si por ejemplo, yo quisiera ocultar la sidebar en una página estática, podría usar CSS poniendo algo como:
<!-- esto sólo se ejecutará en las páginas estáticas -->
<b:if cond='data:blog.pageType == "static_page"'>
  <style>
    #sidebar-wrapper { display: none; }
  </style>
</b:if>
Suponiendo que la sidebar de mi blog tuviera ese ID, el código fuente de mi página estática mostraría esto y, efectivamente, la sidebar estaría oculta :
<style>
  #sidebar-wrapper { display: none; }
</style>
Pero estaría allí. No la vería pero todo su contenido sería parte del código fuente y por lo tanto, cada cosa que tuviera agregada, sería cargada y ejecutada.

Por el contrario, usara un condicional inverso en TODO el código:
<!-- esto sólo se ejecutará en cualquier pa´gina que no sea una página estática -->
<b:if cond='data:blog.pageType != "static_page"'>
  <div id='sidebar-wrapper'>
    .......
  </div>
</b:if>
ese DIV, con toda la sidebar, no sólo no se vería en una página estática sino que tampoco sería parte del código fuente. Al interpretar nuestra plantilla, el servidor recibe la instruccíon de ignorar toda esa parte y por lo tanto, simplemente se la saltea y continua con el resto.

Esto mismo es lo que ocurre con el uso de ciertos códigos específicos que son todos aquellos que comienzan con <b: o con <data:

Todos ellos, son instrucciones o datos que se le da al servidor y se ejecutan ANTES de ver la página en el navegador. Todo eso que nosotros agregamos en un elemento HTML o en una entrada, se ejecuta DESPUES y no lo hace el servidor sino el navegador por lo tanto, si en un elemento HTML o una entrada, queremos usar alguna de esas cosas, no funcionará, será ignorado ya que el navegador, que es quien toma el control, no tiene la menor idea de qué significan ya que desconoce ese lenguaje.

Para complicar un poquito más las cosas, ciertos datos de Blogger, sólo son interpretados en determinados contextos.

Por ejemplo, <data:post.url/> nos dice cuál es la URL de una entrada pero, sólo es accesible dentro de un includable del elemento Blog y no afuera; es por eso que no podemos usar widgets o gadgets de Blogger en una entrada; de nada sirve copiar y pegar el código de la plantilla; el resultado será nulo.

22 comentarios:

Luis Kasanova  

Es interesante ver cómo es la estrategia que usan algunas plataformas para expresar sus contenidos.

En estos momentos se me viene una duda al respecto, Wordpress utiliza una misma metodología sólo que el lenguaje entre plantilla-servidor sí sería único, no?

Responder
JMiur  

WordPress funciona con PHP que es un lenguaje diferente y estandarizado pero, que también es ejecutado en el servidor que es quien crea el código HTML que se envia al navegador.

Por eso, por ejemplo, en un post de WordPress tampoco podrías incluir códigos en PHP a menos que agregaras algún plugin de alguna clase para modificar el sistema.

Responder
mojul8  

Una preguntilla ¿como se podría poner un listado de blogs(el de blogger mismo) en una página? es algo que intento y no puedo... muchas gracias...


mi blog es....http://albacete-fotos.blogspot.com/

hasta proto

Responder
JMiur  

Lo que inenta explicar esta entrada es justamente que eso es algo que no se puede hacer.

Responder
Karla  

JMiur,

No se si pase con todos pero, a mi no me funciona el editor de Blogger, ni siquiera en Blogger in Draft...

Quise probar la nueva funcionalidad de agregar un enlace al widget de las páginas estáticas, y taraaaan! magia...!, me desapareció todos los enlaces que ya tenía en el widgtet (que es el menu del top)....

Tenía uno que agregue manualmente, no se si eso fue la causa, y habrá que probarlo...

Qué tal?

Responder
JMiur  

Karla:
No lo he notado porque no lo he estado usando pero, varias personas me han comentado que hoy les han ocurrido cosas similares así que parecería que puede ser un problema del mismo Blogger.

Responder
La hormiguita  

Buenísimo :)gracias
lo de bloger es también PHP?

Responder
JMiur  

No. Blogger no usa PHP en las plantillas.

Responder
Pablo Taboada  

Hola... Entonces Blogger es un lenguaje único, patentado, de uso exclusivo de Google?

Responder
JMiur  

Toda etiqueta que comience con <b: es privativa de Blogger. Es algo normal y en muchos servicios de blogs se utilizan etiquetas similares, exclusivas de esos servicios.

Responder
MaX  

Estaria bueno que pusieras un tuto de como subir los blogs a un server.
Ya que quiero hacerlo y nose bien como es.

Responder
JMiur  

¿Subir el blog a un server? ¿Qué quieres decir con eso?

Responder
Francmi08  

Hola de nuevo, si no entendí mal, para no ejecutar la sidebar y ganar tiempo de carga de una página estática, habría que sustituir el primer código por el último, no? Gracias y perdón por mi ignorancia.El único código que tengo parecido al primero que muestras es este:(Lo escribo así por lo que ya sabemos de los comentarios con códigos).


#main-wrapper {align: center; width: 1150px;}
#sidebar-wrapper {
width: 0px;
display: none;
visibility: hidden;
}

Con lo cual deduzco que tendría que cambiarlo por el último que propones incluyendo los puntos suspensivos.
¿Estoy en lo cierto o voy mal encaminado?

JMiur  

Cuando ocultas con CSS algo que es lo que parece decir esta regla:

#sidebar-wrapper {
width: 0px;
display: none;
visibility: hidden;
}

el código sigue estando en al página; no se ve pero es parte de ella y por lo tanto, se carga.

Los condicionales sirven para evitar eso, para que no se cargue algo o sólo se cargue en ciertas condiciones. Entonces, si no entendí mal la pregunta, al respuesta sería si, es mejor agregar el condicional y de ese modo alivias la carga.

Los puntos suspensivos indican (o pretenden indicar) que allí puede haber más etiquetas, por ejemplo, los widgets; eso se deja tal cual, es decir, la condición comienza justo antes del DIV sidebar-wrapper

<b:if cond='data:blog.pageType != "static_page"'>
<div id='sidebar-wrapper'>

y termina justo después de su cierre:

</div>
</b:if>

lo que está en el medio de eso (los .... ) se deja tal como está.

Francmi08  

Vale, yo ya tengo el condicional, justo antes de #sidebar-wrapper, y mi pregunta era si tengo que sustituir el condicional que yo tengo por el condicional con el div id='sidebar-wrapper' que tu propones, es lo que entendí, No? y dejo los puntos como están.

Francmi08  

Bueno pues, el intento ha salido fallido...sustituyendo mi condicional por el tuyo no me carga la página...quizás deba colocarlo en otro sitio de la plantilla?? Agradecería tu ayuda ya que todo lo referente a mejorar la carga del blog, siempre es bienvenido...

JMiur  

El condicional que dices tener originalmente, supongo que envuelve la etiqueta STYLE con la regla:
#sidebar-wrapper {
width: 0px;
display: none;
visibility: hidden;
}

Eso, sólo es visual, no se ve pero sigue estando allí.

El otro, condiciona el HTML es decir las etiquetas que generan la sidebar y envuelve a ese DIV y su contenido. Si no se carga la página o Blogger te muestra un error es que esl condicional está mal colocado pero, como no sé que dice tu plantilla, ahí ya no puedo decirte mucho más.

El código no es mio, es el que usa Blogger :D

Francmi08  

Entonces para que surta el efecto esperado, tengo que cambiar uno por otro o añadir el de blogger, y si es así, en que parte de la plantilla. Disculpa mi ignorancia, pero no me manejo muy bien si no es con ejemplos...la plantilla se me hace un mundo..:(

Francmi08  

Bueno, probando de nuevo he colocado el condicional de blogger después justo del /head> y parece que acepta la vista previa sin ningún error, lo que no se es si ese es el sitio donde debe de ir ese condicional...como te dije en un comentario anterior, la plantilla no es mi fuerte..espero que me digas si lo he puesto en el sitio adecuado. Perdón por mi insistencia, y disculpa si en algún momento te causé alguna molestia.

Responder
Francmi08  

Vale, perdóname y a ver si logro explicarme correctamente. El condicional que yo tengo ahora en mi plantilla es el siguiente:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#main-wrapper {align: center; width: 1150px;}
#sidebar-wrapper {
width: 0px;
display: none;
visibility: hidden;
}
#main-wrapper {
width: 1150px;
}
</style>

Y mi pregunta es ¿ como debería quedar para poder aplicar el de blogger y si lo debo colocar en el mismo sitio que lo tengo ahora, es decir, sustituir uno por otro...con mis reglas, claro.

JMiur  

Ese condiconal "condiciona un etiqueta: la etiqueta STYLE; esa etiqueta y su contenido, todo lo que está entre <style> y </style> será procesado por Blogger sólo si la página a mostrar es una página estática; caso contrario, sera ignorado.

Las condiciones hacen eso, la diferencia que muestra esta entrada es que, en lugar de condicional la etiqueta STYLE (que sólo ocultará la diebar) se podría condicionar la sidebar en si misma, es decir, la etiqueta <div id='sidebar-wrapper'> con su contenido, es decir, hasta el </div>

Las primera, la que condiciona el STYLE, no es necesario quitarla para hacer la prueba; si todo está bien colocado, será inútil pero no interfiere.

Usando vista previa, lo único que verías sería el blog normal ya que lo que se muestra en vista previa es el home y allí, no habría cambios.

No se trata de sustituir uno por otro. Para condicionar el DIV debe colocar esa condición en el DIV mismo; buscar <div id='sidebar-wrapper'> anteponer la condición,

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='sidebar-wrapper'>

buscar el </div&gt ;y terminar la condición:

</div>
</b:if>

Un ejemplo concreto con gadgets:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='XXXX' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVOS' type='BlogArchive'/>
</b:section>
</div>
</b:if>

Francmi08  

OK, todo aclarado...muchísimas gracias.

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