13 dic. 2013

Curso Blogger: crea tus contenedores

En la anterior entrega aprendimos a crear nuestra 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 llaman <div> y se estructuran así:
 <div>
   información dentro del contenedor
</div>
Entre la etiqueta de apertura <div> y la de cierre </div> tendremos la  información dentro del contenedor que 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> 
</div>
Entre la etiqueta de apertura <div> y la de cierre </div> tendremos el contenedor principal que dentro contiene entre la nueva etiqueta <div> y su correspondiente de cierre </div> la información del Contenedor 1 (Dentro del  Contenedor principal) . Igualmente el contenedor principal también contiene la información del Contenedor 2 (Dentro del  Contenedor principal) entre sus correspondientes etiquetas delimitadoras <div> </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> 
</div>
El contenedor principal recibe el identificador "contenedor principal"  y en su interior, hasta su cierre con  </div> tiene dos contenedores más: "contenedor 1" "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 el contenedor principal queremos que se le de el estilo de la #Clase en hoja de estilos para dar formato al contenedor 1 (ancho de 10 píxeles, alto de 10 pixeles y color: rojo) que contiene el título Contenedor 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 texto Contenedor principal con el título por medio de que el <div 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 creado un 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 tu Blog 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">
<html xmlns='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> 
<title><data: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">
    <html xmlns='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 </html> lo 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ódigo <title> título </title> expresa que en el interior de la etiqueta <title> hasta que se cierre con </title> tendremos el título que queramos ponerle a la página. Como cualquier otra etiqueta el  <head> debe cerrarse con su etiqueta con indicando que se cierra la etiqueta:  <head>. Dentro de <title> y su cierre </title> encontramos el código <data:blog.pageTitle/>:
  • En XHTML se hace referencia al atributo data: para poner del blog el .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 etiqueta <body> hasta donde aparezca su cierre </body> con su correspondiente /. En su interior hemos escrito <data:blog.title/>: 
  • En XHTML se hace referencia al atributo data: para poner del blog el .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 el  <body> será 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 cabecera <div id="cabecera"> que contiene en su interior <b:section id="header" class="header" showaddelement="yes" /> una sección de identificador header y clase header que 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 llame cabecera para 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 cuerpo <div id="cuerpo">  que contiene en su interior <b:section id="main" class="main" showaddelement="yes" /> una sección de identificador main y clase main que 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 llame cuerpo para 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-lateral  que contiene en su interior <b:section id="sidebar" class="sidebar" showaddelement="yes" />  una sección de identificador sidebar y clase sidebar que 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 llame barra-lateral para 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, pie  que contiene en su interior <b:section id="footer" class="footer" showaddelement="yes" />  una sección de identificador footer y clase footer que 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 llame pie para delimitar su ancho, alto, etc...  
  • </body> </html> cierran el cuerpo de la plantilla y la plantilla respectivamente.


4) Pulsa "Guardar Plantilla". Te debe haber quedado algo como lo que ves en la pantalla a continuación:



¡Eso es todo!, en la próxima entrega empezamos a jugar con los estilos para darle un poco de forma a la plantilla.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

14comentarios:

  1. Disculpa Miguel, es que estoy haciendo mi primer blog y lo quiero hacer bien, así mas o menos como el tuyo... Con los códigos que has dado para cada contenedor, se puede empezar a hacer el blog o se puede modifcar los códigos de una de las plantillas de blogger, explicarme, quiero saber por favor?

    ResponderEliminar
    Respuestas
    1. Encantado de ayudarte Francis, para lo que necesites para sacar tu Blog desde cero.

      Te cuento, estos cursillos son de código Blogger, de cómo se programa para tener unas nociones básicas mínimas con las que empezar a dominar el tema.

      En tu caso, pienso que si bien estas guías pueden ayudarte, quizás te compense más ponerte una buena plantilla que es más rápido y asequible.

      Mira esta guía para ponerte una plantilla en Blogger: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger.html

      Cualquier cosa no dudes en preguntar, espero ayudarte en lo que pueda.

      Esto es poco a poco, Vamos viendo lo que necesites. Un saludo!

      Eliminar
  2. Hola Miguel, yo estaba probando la apariencia de las miniaturas de las entradas de mi blog y ocurrió algo inesperado, la imagen de miniatura es rectangulas, más precisamente de 200x150 pixeles. Tienes alguna idea de cómo hacer que sean cuadradas? Me serviría de mucho porque ya estoy a 1 semana de abrir mi blog gracias a ti y no me gustaría imágenes estiradas =D

    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Ded,
      El problema es la relación de aspecto que puedan tener las imágenes. Si estas son rectangulares son "16:9" y si son cuadradas pueden ser "4:3". Si estiras una imagen cuadrada se deforma por los lados y si empequeñeces una imagen alagrada se achata por arriba y abajo.

      Lo mejor es que recortes con forma de cuadrado la imagen que quieras poner y luego con "imageresizer" (una aplicación para descargar) puedes adaptarla al tamaño que necesitas.

      Es ir probando y buscar el tamaño adecuado. La otra opción es tocar directamente en la css el tamaño width y height de la imagen y ver qué tal queda, pero puede resultar más complejo.

      Un saludo!

      Eliminar
  3. Hola Miguel.

    Estava siguiendo este estupendo tutorial, y al aplicar en mi plantilla de prueba el codigo que pones me salta este erro "Error al analizar XML, línea 10, columna 2: The markup in the document following the root element must be well-formed"

    El codigo lo copie tal cual lo has puesto tu aqui y el error que señala es el body no entiendo porque o a que es devido.
    Gracias de antemano

    PD: Esperando mas tutos para el blog ;)

    ResponderEliminar
    Respuestas
    1. ¡Hola Nancy!,
      esto es para un blog de pruebas, no lo hagas sobre tu blog principal, recuerda que la finalidad en este caso es aprender el código ;)

      Dicho esto, tiene pinta de que pudieras tener código previo en tu plantilla antes de copiar y pegar el de este tutorial. Si borras todo el código que exista y añades sólo este "tal cual" y después guardas, te debería funcionar.

      A mí me sucede lo que comentas si copio y pego el código machacando el código ya existente. Primero borra el código existente, no le des a guardar y pega el de este tutorial y ya después le das a guardar.

      Debería funcionarte, cualquier cosa me dices.

      Un saludo amiga y muchas gracias por la motivación que me das para seguir con el cursillo.

      Eliminar
    2. Gracias por responder miguel, y tranquilo que lo e realizaco en el de pruevas como tu sugeriste jeje.
      Siempre e tenido el gusanillo de aprender pero es dificil y ahy gente que se explica como un libro cerrado "no es tu caso".
      PD: Al pegar el del siguiente tutorial, se me soluciono.
      Gracias ;)

      Eliminar
  4. Gracias a ti Nancy, me alegro que te haya servido. Si te gusta, en cuanto tenga tiempo continúo el curso.

    Un saludo amiga!!!

    ResponderEliminar
  5. Muy buena y útil información.

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Gracias a ti Carolina, a tu servicio para lo que necesites.

      Un saludo y gracias de nuevo por participar.

      Eliminar
  6. Respuestas
    1. Me alegro que te guste. Un placer ayudar. Gracias a ti por participar.

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.