Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger

Tal como lo mencioné en una entrada anterior, he creado un breve vídeotutorial en el que se muestra cómo construir una plantilla HTML5 para Blogger, corresponde al primer artículo de tantos que comenzaré a realizar para el blog.



Pido disculpas si no se entiende o si cometo muchos errores, es mi primer vídeotutorial hablado y soy pésimo explicando a voz. Si tienen algunas dudas pueden preguntar directamente en el vídeo o en esta entrada.

Les agradecería que se suscribieran a mi canal de Youtube, en donde comenzaré a publicar artículos relacionados a Blogger.

Tipos de Widgets:

Esta lista permite tener acceso a los distintos gadgets para así agregarlos a una plantilla, algunos como el gadget HTML o el de encuesta requieren una previa configuración.

Type="Blog"	Permite mostrar las entradas del blog, en el tutorial es el que se trabaja desde cero.
Type="PlusOne"	Nos permite mostrar el botón +1 dentro de alguna sección.
Type="PlusFollowers"	Muestra tus seguidores en Google+.
Type="PlusBadge"	Muestra una insignia de perfil de Google+.
Type="Translate"	El traductor por defecto en Blogger (de Google).
Type="FollowByEmail"	Permite a los usuarios seguirte mediante FeedBurner.
Type="PopularPosts"	Muestra los posts populares del blog.
Type="Stats"	Permite ver las estadísticas (Básicas) de las visitas del blog.
Type="PageList"	Muestra una lista de las páginas estáticas del blog.
Type="AdSense"	Muestra anuncios de Google AdSense.
Type="CustomSearch"	Buscador personalizado de Google.
Type="HTML"	Permite insertar código HTML.
Type="Text"	Permite insertar texto en el blog.
Type="Image"	Muestra una imagen en una sección.
Type="Slideshow"	Muestra un SlideShow de fotografías.
Type="VideoBar"	Muestra una insignia de perfil de Google+.
Type="Poll"	Muestra una insignia de perfil de Google+.
Type="LinkList"	Lista simple de enlaces personalizados.
Type="TextList"	Lista simple de elementos personalizados.
Type="Feed"	Enlaces que direccionan a las feeds.
Type="NewsBar"	Muestra las últimas noticias de Google Noticias.
Type="Label"	Muestra las etiquetas del blog, en lista o nube.
Type="Subscribe"	Enlaces de suscripción al blog.
Type="BloggerButton"	Botón de Blogger para el blog.
Type="Profile"	Información del autor o lista a los perfiles de cada uno.
Type="BlogArchive"	Archivo del Blog.
Type="Header"	Logo/Nombre y descripción del blog.
Type="Wikipedia"	Buscador Wikipedia.
Type="ContactForm"	Formulario de Contacto.
Type="Followers"	Seguidores en Google.

Variables Data:

Las variables data, en Blogger son objetos que almacenan alguna información, nos otorgan con facilidad determinados elementos con la simple acción de mencionarlas.

En Blogger, poseemos una basta cantidad de estos elementos, para evitar la sobrecarga de información utilizaremos los más importantes.

Estos datos se pueden utilizar de la siguiente forma:

De manera inline: Nos permiten utilizar los objetos como atributos, por ejemplo:

<div expr:id='"post"+ data:post.id'>

Lo que resulta en:

<div id='post30422323223'>

Mediante etiquetas: Permiten incluirlas en cualquier parte válida, por ejemplo:

<div class="titulo-entrada"><data:post.title/></div>

Resultando:

<div class="titulo-entrada">Título de la entrada</div>

Locales: 

Requieren alguna ubicación concreta, o ciclo para poder funcionar (Ej: data:post.title requiere estar dentro del ciclo de las entradas), de lo contrario no se encuentran inicializadas y por lo tanto no arrojarán resultados o bien se mostrará una alerta en la plantilla.

Dentro del ciclo de entradas:

<data:post.url/>	Devuelve la URL de la entrada.
<data:post.title/>	Devuelve el título de la entrada.
<data:post.snippet/>	Devuelve un resúmen de la entrada.
<data:post.thumbnailUrl/>	Devuelve la primera imagen del post, cortada a 72px, cuadrada (Requiere imagen subida a Picasa/Blogger).
<data:post.firstImageUrl/>	Devuelve la primera imagen detectada en el post sin alterar.
<data:post.dateHeader/>	Devuelve un rango de fechas para organizar las entradas.
<data:post.timestamp/>	Devuelve la hora de una entrada.
<data:post.author/>	Devuelve el nombre del autor que escribió la entrada.
<data:post.authorProfileUrl/>	Devuelve la URL del perfil del autor de la entrada.
<data:post.id/>	Devuelve el identificador numérico de la entrada.
<data:post.canonicalUrl/>	Devuelve la URL canónica de la entrada.
<data:post.timestampISO8601/>	Devuelve la fecha de la entrada según la ISO8601.
<data:post.emailPostUrl/>	Enlace para enviar entrada por Email.
<data:post.location.mapsUrl/>	Devuelve la URL de la geoubicación de la entrada (Requiere incluir al crear la entrada).
<data:post.location.name/>	Devuelve el nombre de la geoubicación de la entrada (Requiere incluir al crear entrada).
<data:post.editUrl/>	Devuelve la URL para editar rápidamente la entrada.

Dentro del gadget type="Blog":

<data:newerPageUrl/>	Devuelve URL "Entradas recientes" o "Entrada siguiente" dependiendo el caso.
<data:newerPageTitle/>	Devuelve nombre "Entradas recientes" o "Entrada siguiente".
<data:olderPageUrl/>	Devuelve URL "Entradas antiguas" o "Entrada anterior" dependiendo el caso.
<data:olderPageTitle/>	Devuelve nombre "Entradas antiguas" o "Entrada anterior".
<data:homeMsg/>	Devuelve mensaje "Página principal".

Dentro del ciclo de etiquetas (Dentro de entrada):

<data:post.label/>	Devuelve la(s) etiqueta(s) dentro de la entrada, requiere ciclo post.labels.
<data:label.url/>	Devuelve la URl de cada etiqueta, requiere ciclo post.labels.

Globales: 

Pueden ser utilizadas dentro de cualquier elemento y a diferencia de las locales, es que no requieren ninguna dependencia para funcionar:

<data:blog.pageType/>	Devuelve el tipo de página actual (index,static_page,item,error_page,archive).
<data:blog.pageUrl/>	Devuelve la URL actual (Ej: http://wwww.blog.blogspot.com/p/pag-actual.html).
<data:blog.pageTitle/>	Arroja el título de la página actual (Ej: Blog : Título entrada).
<data:blog.blogId/>	Devuelve el ID de tu blog (Ej: 6894142822305456206).
<data:blog.metaDescription/>	Devuelve la meta descripción del blog.
<data:blog.canonicalUrl/>	Devuelve la URL canónica del blog.
<data:blog.homepageUrl/>	Devuelve la página principal del blog.

Ciclos/Iteraciones:

Traemos contenido almacenado dentro de una matriz en Blogger, a diferencia de otros lenguajes sólamente definimos el ciclo, no lo programamos.

Existen varios bucles en Blogger, como por ejemplo en el gadget del tipo BlogList, pero tampoco los mencionaremos para que cada uno se encargue de buscarlos dentro de cada gadget que haya agregado.

Estructura:

<b:loop values="data:elementos" var="elemento">
        <!--Contenido iterado-->
</b:loop>

Ciclo de etiquetas (Para mostrar las etiquetas dentro de una entrada):

<b:loop values='data:post.labels' var='label'>
        <!--Traer las etiquetas de una entrada, requiere estar dentro del ciclo de las entradas y para mostrar cada etiqueta se requiere data:post.label-->
</b:loop>

Ciclo de etiquetas (Todas las etiquetas):

<b:loop values='data:labels' var='label'>
       <!--Permite mostrar todas las etiquetas del blog, requiere estar dentro de un gadget de tipo Label-->
</b:loop>

¿Sencillo no? Puedes de esta forma generar el contenido de tu blog.

Condicionales/Bifurcaciones:

Estructura simple (If):

Esta estructura nos permite condicionar si la condición es true, o false, pero no ambas.

<b:if cond='Si esto es == true'>

       <!--Se mostrará este contenido en el blog--> 

</b:if>

Estructura compuesta (If/Else):

Esta sentencia nos permite condicionar para ambos casos, si se cumple se ejecuta, y si no, se ejecuta lo que se encuentre debajo de <b:else/>.

<b:if cond='Si esto es == true'>
       <!--Se mostrará este contenido si la condición se cumple-->
<b:else/>
       <!--Se mostrará este contenido si la condición NO se cumple.-->
</b:if>

Algunos ejemplos con distintas formas de uso:

<b:if cond='data:blog.pageType == "index"'>

       <!--Mostrar esto en el índice del blog-->

<b:else/>

      <!--Mostrar esto en el resto de elementos, como páginas y entradas-->

</b:if>

<b:if cond='data:post.thumbnailUrl'>
       <!-- Este ejemplo, a diferencia del anterior, bifurca cuando la variable data existe-->
</b:if>

<b:if cond='data:post.thumbnailUrl == "URL_DE_LA_MINIATURA"'>
       <!-- Un ejemplo con la misma variable anterior, que indica que si el texto de la derecha es la URL de la miniatura, se mostrará algún código-->
</b:if>

<b:if cond='data:post.author= "Víctor Calderón"'> 

      <!-- En este ejemplo, preguntamos si el que escribió este artículo es Victor Calderón, se mostrará un fragmento que nosotros escojamos-->

</b:if>

<b:if cond='data:postNum == 2'>

      <!-- El post es el 3ero en la página principal, en él se mostrará algo, requiere que en el ciclo de entradas agreguemos el atributo index='postNum'-->

</b:if>

Includable/Include:

Esta maravillosa función, que muy poco mencioné en el vídeotutorial nos permite crear zonas de código reutilizables, o bien para mantener el código mucho más organizado.

La forma de uso se basa, en construir un elemento <b:includable> y en él añadir el código que queramos, debe llevar un identificador y la variable en donde se aplica.

Un ejemplo para el gadget de entradas:

<b:includable id="estructuraentradasindice" var="post">
      <div class="post_indice"> 

          <div class="titulo_entrada"><a expr:href="data:post.url"><data:post.title/></a></div>
          <div class="resumen_entrada"><data:post.snippet/></div>
          <div class="miniatura"><data:post.thumbnailUrl/></div> 
      </div> 
</b:includable>

Y para utilizarlo dentro de un ciclo:

<b:loop values="data:posts" var="post">
      <b:include name="estructuraentradasindice"/>
</b:loop> 

Nota: Existe en el widget de entradas, el <b:includable> que tiene como valor var="top", quiere decir que dentro de este se encuentran todos los demás.

Enlace del vídeo:

http://youtu.be/6xcPf0YEi4g

Información: Esta entrada se irá actualizando debido a que faltan una inmensidad de códigos, pero estos son los que más necesitan.

Actualización: Código fuente del vídeotutorial:

Código fuente del primer vídeotutorial para crear plantillas para Blogger. GitHub Gist