Curso Blogger: crea tus contenedores – Virtual ~ CosasParaMiBlogs

En la anterior entrega aprendimos a crearnuestra primera plantilla.La idea no era copiar y pegar el código que "nos dan hecho", esta vez se trataba de conseguir entender bien cómo y porqué se hace cada cosa en Blogger.

Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy continuamos con la "maquetación", el siguiente gran paso para configurar el aspecto que tendrá nuestra plantilla.

El término maquetación se suele emplear en el argot informático para referirse a la colocación que tendrán los distintos elementos que conformen el Blog en nuestra página (entre otras muchas más funciones que se aluden a este significado).

Esta vez vamos a ser capaces de decidir qué elementos "contenedores de información" compondrán nuestro blog: una barra lateral, una zona para el cuerpo del blog con las entradas, una cabecera y un pie de página.

NOTA IMPORTANTE:Se evita utilizar terminología compleja o excesivamente técnica en esta guía para acercar con la mayor simplificación posible el código a todas las personas que deseen conocerlo. No se va a utilizar en ningún momento palabras o nomenclatura de programación convencional, esta guía va dirigida a aquellos que no tienen ninguna o poca experiencia en programación de páginas web.

Aprendiendo a "maquetar" y colocar los "contenedores de información" que formarán nuestro Blog:

Como hemos comentado, la información en el Blog se distribuirá en diversas secciones:

Una sección superior que llamaremos cabecera donde podremos poner el título.

Una barra lateral donde colocar los componentes que prefiramos (entradas populares, categorías del blog, publicidad, etc...).

Un cuerpo del Blog donde almacenaremos las entradas.

Un pie de página para la terminación del Blog.

Esta clase de división en "contenedores" es parte del proceso de "maquetación" de la futura presentación del Blog. Decidirá en gran medida cómo se van a mostrar los elementos en la página principal y por tanto es vital antes de continuar con el resto de la plantilla.

¿Cómo se montan estos "contenedores de información"?

Montarlos es muy sencillo, se llamandivy se estructuran así:

div

información dentro del contenedor

/div

Entre la etiqueta de aperturadivy la de cierre/divtendremos lainformación dentro del contenedorque deseamos mostrar a través de él.

Un contenedor puede contener a otros contenedores:

div
Contenedor principal

div

Contenedor 1 (Dentro del Contenedor principal)

/div

div

Contenedor 2 (Dentro del Contenedor principal)

/div

Entre la etiqueta de aperturadivy la de cierre/divtendremos el contenedor principal que dentro contiene entre la nueva etiquetadivy su correspondiente de cierre/divla información delContenedor 1 (Dentro del Contenedor principal).Igualmente el contenedor principal también contiene la información delContenedor 2 (Dentro del Contenedor principal)entre sus correspondientes etiquetas delimitadorasdivy/div.

¿Cómo distingo unos contenedores de otros?, ¿cómo se identifican?

Los contenedores tienen un identificador que debe ser único para que el navegador pueda diferenciarlos y "dibujarlos". El identificador se incorpora así al ejemplo anterior:

div id = "contenedor principal"
Contenedor principal

div id = "contenedor 1"

Contenedor 1 (Dentro del Contenedor principal)

/div

div id = "contenedor 2"

Contenedor 2 (Dentro del Contenedor principal)

/div

El contenedor principal recibe el identificador"contenedor principal"y en su interior, hasta su cierre con/divtiene dos contenedores más:"contenedor 1"y"contenedor 2".

¿Cómo defino el aspecto y presentación que tendrá la información que va dentro de cada contenedor?

Lo haremos por medio del atributo class (clase). Se refiere a una clase que exista en la hoja de estilos. Esto que suena "extraño" es así de sencillo, para entendernos, conceptualmente esto es cómo se hace :

---- HOJA DE ESTILOS CONCEPTUAL ----

#Clase en hoja de estilos para contenedor 1{

ancho:10 píxeles

alto:10 pixeles

color: rojo

}

---- FIN HOJA DE ESTILOS CONCEPTUAL ----

div id ="Clase en hoja de estilos para dar formato al contenedor 1"

div Contenedor principal con el título/div

/div

He delimitado la hoja de estilos con el texto---- HOJA DE ESTILOS CONCEPTUAL ---- y---- FIN HOJA DE ESTILOS CONCEPTUAL ----.

En elcontenedor principalqueremos que se le de el estilo de la#Clase en hoja de estilospara dar formato al contenedor 1(ancho de 10 píxeles,alto de 10 pixeles ycolor: rojo) que contiene el títuloContenedor principal con el título.Es decir, en la hoja de estilos hemos dicho cómo debe dibujarse un título, con qué ancho, alto y color para luego indicar dentro del contenedor que queremos aplicar ese estilo al textoContenedor principal con el títulopor medio de que eldiv id =tiene el mismo nombre que hemos definido para su estilo en la hoja de estilos:Clase en hoja de estilos para contenedor 1.

Así pues, podemos crear estructuras más complejas basándonos en lo anterior, donde podemos "anidar" o meter contenedores dentro de otros para componer como si de un "mecano" se tratara nuestro Blog.

Usando los conceptos aprendidos en nuestra plantilla de pruebas en Blogger:

Si te has creadoun Blog de pruebas, puedes seguir estos pasos y conseguir tener una idea clara de cómo se genera tu plantilla. Si no lo has hecho, puedes leer los pasos para entender cada punto con especial énfasis en el que se explica el código de la plantilla.

En Blogger nos crearemos un contenedor llamado cabecera que contendrá el título y los elementos que conformen esa sección, otro para el cuerpo, otro para la barra lateral y otro para el pie de todo el Blog.

1)En tuBlog de pruebas, ve directamente en el menú de la izquierda a la opción "Plantilla".

2)Si tenías tu Blog de pruebas ya creado, no es necesario que hagas este paso (paso 2). Pulsa el botón gris "Editar HTML" y borra todo el código que aparece en la plantilla (puedes pulsar en Chrome CONTROL+ A y después cuando esté seleccionado todo el código pulsa el botón "Supr" para suprimir el texto seleccionado).

3)Ahora copia el código que te pongo a continuación y pégalo directamente como nuevo código para tu plantilla:

?xml version="1.0" encoding="UTF-8" ?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'

head

titledata:blog.pageTitle//title

b:skin![CDATA[/*

/b:skin

/head

body
data:blog.title/

div id="cabecera"

b:section id="header" class="header" showaddelement="yes" /

/div

div id="cuerpo"

b:section id="main" class="main" showaddelement="yes" /

/div

div id="barra-lateral"

b:section id="sidebar" class="sidebar" showaddelement="yes" /

/div

div id="pie"

b:section id="footer" class="footer" showaddelement="yes" /

/div

/body

/html

Explicación detallada de cada parte del código:

?xml version="1.0" encoding="UTF-8" ?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'
:Esta etiqueta le informa al navegador de que se está trabajando con una página XHTML. Esta información la pasamos por alto para no añadir complejidad a la guía. Simplemente debes saber que le indica al navegador con qué tipo de código va a trabajar para que sepa interpretarlo. En otras guías más complejas abordaremos este punto.

html
xmlns
:Esta etiqueta informa de que en su interior y hasta donde llegue su cierre/htmllo que hay dentro es el código XHTML que conforma la página que estamos construyendo, la plantilla, la base de todo el Blog.

head:Esta etiqueta le informa al navegador de que dentro de ella se compondrá el apartado "head", cabeza en inglés. Dentro de él está la cabecera del XHTML que estamos formando. La parte de códigotitletítulo/titleexpresa que en el interior de la etiquetatitlehasta que se cierre con/titletendremos el título que queramos ponerle a la página. Como cualquier otra etiqueta elheaddebe cerrarse con su etiqueta con/indicando que se cierra la etiqueta:head.Dentro detitley su cierre/titleencontramos el códigodata:blog.pageTitle/:
En XHTML se hace referencia al atributodata:para poner delblogel.pageTitle,el título de la página. Así pues, será el título de la página que aparecerá en la barra de título de tu navegador. Coincidirá con el del nombre del Blog.

body:Es el cuerpo la plantilla que estamos creando. Va desde donde ponemos la etiquetabodyhasta donde aparezca su cierre/bodycon su correspondiente/.En su interior hemos escritodata:blog.title/:
En XHTML se hace referencia al atributodata:para poner delblogel.title. Así pues, será el título del Blog que aparecerá como texto dentro de la página principal del Blog. Si os dais cuenta, al estar en elbodyserá texto que aparecerá en el navegador "dentro del cuerpo" del propio Blog.

Los contenedores añadidos al código general en esta entrega del cursillo:

div id="cabecera"
b:section id="header" class="header" showaddelement="yes" /

/div

Asi estamos creando un contenedor para la cabeceradiv id="cabecera"que contiene en su interiorb:section id="header" class="header" showaddelement="yes" /una sección de identificadorheaderyclaseheaderque le dice a Blogger que en su interior se encontrará todo lo correspondiente a la zona de cabecera.Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llamecabecerapara delimitar su ancho, alto, etc...

div id="cuerpo"
b:section id="main" class="main" showaddelement="yes" /

/div

Asi estamos creando un contenedor para la parte principal del blog, su cuerpodiv id="cuerpo"que contiene en su interiorb:section id="main" class="main" showaddelement="yes" /una sección de identificadormainyclasemainque le dice a Blogger que en su interior se encontrará todo lo correspondiente a las entradas del Blog.Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llamecuerpopara delimitar su ancho, alto, etc...

div id="barra-lateral"
b:section id="sidebar" class="sidebar" showaddelement="yes" /

/div

Asi estamos creando un contenedor para una barra lateral del blog,barra-lateralque contiene en su interiorb:section id="sidebar" class="sidebar" showaddelement="yes" /una sección de identificadorsidebaryclasesidebarque le dice a Blogger que en su interior se encontrará todo lo correspondiente a la barra lateral Blog.Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llamebarra-lateralpara delimitar su ancho, alto, etc...

div id="pie"
b:section id="footer" class="footer" showaddelement="yes" /

/div

Asi estamos creando un contenedor para el pie del blog,pieque contiene en su interiorb:section id="footer" class="footer" showaddelement="yes" /una sección de identificadorfooteryclasefooterque le dice a Blogger que en su interior se encontrará todo lo correspondiente al pie del Blog.Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llamepiepara delimitar su ancho, alto, etc...