.

6 de abril de 2013

Plantilla Simple de Blogger: su estructura

Escrito por
La estructura de una plantilla de Blogger es similar a la de una página Web pero tiene algunas características propias, así que vamos a explicarlo para que incluso los que los principiantes en lenguaje HTML y CSS lo podamos entender a la perfección. Abro el Blogger el editor de plantillas de uno de mis blogs, expando los gadgets, copio el código y lo pego en un editor de texto tipo Word, el resultado son 50 páginas de texto. Y suerte que para este blog de Blogger estaba usando la plantilla que se llama Simple, así que es normal que uno se asuste y no se atreva a entrar en este jeroglífico lleno de etiquetas que se abren y se cierran. Por ello explicaremos la estructura de las plantillas de Blogger en HTML4 paso a paso, y hoy empezamos por marcar las 4 zonas principales y explicar que función tienen dentro del blog, para entrar en otros posts al detalle de las 14 secciones que las componen.

Para facilitar el trabajo he cogido la plantilla Simple de Blogger tal y como aparecer al crear un blog nuevo, para que puedan trabajar sobre ella y porque tiene menos gadgets que otras plantillas. Para empezar también aconsejo trabajar con la plantilla sin los gadgets expandidos, que sólo ocupará 20 páginas de Words y que es la que nos servirá de referencia para el análisis que vamos a hacer.

Este es el esquema general para la plantilla Simple de Blogger.

1. Sección DOCTYPE y apertura del HTML.
2. HEAD.
        2.1. Sección Metatags: título, descripción, geolocalización y códigos generales.
        2.2. Sección Códigos CSS Variables Definitions.
        2.3. Sección Códigos CSS Content (contenidos para el blog normal de Blogger)
        2.4. Sección Códigos CSS Mobile (contenidos para la versión del blog para teléfonos móviles).
3. BODY.
        3.1 Sección Inicial del cuerpo.
        3.2 Sección Cabecera (header)
        3.3 Sección Tablas del cuerpo (tabs-outer)
        3.4 Sección Columnas (columns-inner). Incluye la columna central y las barras laterales.
                        3.4.1 Gadget de los posts o entradas
        3.5 Sección Pie (footer)
        3.6 Sección final del cuerpo.
4. Sección final y cierre HTML.
        4.1 Gadgets de las columnas laterales.

1. Apertura de la plantilla. Toda plantilla de Blogger abre con una etiqueta <html>, que como verás es más larga porque en el interior de la etiqueta se dan instrucciones generales para toda la página. Además, antes de la apertura del código HTML se incluye una línea llamada DOCTYPE que se refiere al tipo de documento visualizado, y que es siempre lo primero porque ser necesaria para la comunicación entre el servidor que aloja la información del blog y el navegador que la muestra en la pantalla de tu ordenador. Esta parte de las plantillas de Blogger ocupa muy poco, solo unas líneas en la primera página, y termina justo antes de la etiqueta <head>.

2. Head, la cabeza del blog. Esta zona incluye todo lo que encontramos entre las etiquetas <head> y </head>, que en total son 4 secciones en la plantilla Simple de Blogger y ocupa casi 3/4 partes del espacio del código (sin expandir los gadgets). Es decir que cuando trasladamos la plantilla a un documento de texto tipo Word, la "cabeza" va casi desde el principio a la página 15. En esta zona se dan indicaciones tan importantes como se va a mostrar el titulo del blog que aparecerá en Google y también está casi todo el código CSS, es decir donde vamos a controlar los colores, tipo de texto, márgenes y otros estilos de nuestro blog.

3. Body, el cuerpo del blog. Esta zona es la que indica la distribución de los elementos que componen la página, y es la que modificamos cuando desde el editor de Blogger movemos un Gadget desde la barra central al pie de página o a una columna lateral. En ella también están algunos de los Widgets, los elementos que añadimos a esta página. Toda esta zona se encuentra entre las etiquetas <body> y </body>, que ocupa sólo 3 páginas si los gadgets no están expandidos, pero que al abrir los gadgets se hace enorme. La he dividido en seis secciones, aunque dentro de la sección de Columnas hay un gadget que si lo expandimos es enorme y puede ocupar más de 15 páginas, que es el gadget que define como son nuestras entradas.

4. Sección final y cierre de HTML. Una vez ya se ha cerrado la etiqueta body, aún quedan 2-3 páginas de código antes de que se cierre la plantilla con la etiqueta </html>. En esta parte se añaden algunos elementos accesorios del blog, además he visto que aparecen algunos de los gadgets de la barras laterales.

0 comentarios:

Publicar un comentario

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.