Hicimos un primer acercamiento a la estructura de una página HTML y de qué está compuesta para poder comprender con mayor facilidad ahora cómo funciona el XHTML de la plantilla de Blogger.
Vamos a dar luz a esas sombras que puedes tener de "qué es esta parte del código de la plantilla" o "para qué sirve" poco a poco, sin emplear lenguaje técnico, sólo con el ánimo de que todos lleguemos a conocer en mayor profundidad el funcionamiento de este fantástico medio de comunicación proporcionado por Google.
NOTA IMPORTANTE: En todas las entradas del cursillo se evita utilizar terminología compleja o excesivamente técnica. Se trata de acercar con la mayor simplificación posible el código a todas las personas que deseen conocerlo. Si eres un purista o un experto en la materia, es posible que incluso te resulte aburrido. No se va a utilizar en ningún momento palabras o nomenclatura de programación convencional, esto va dirigido a aquellos que no tienen ninguna o poca experiencia en programación de páginas web y desean conocer cómo funciona su herramienta preferida: Blogger.
La teoría necesaria para encarar la práctica:
Los que lo deseéis podéis crearos un Blog de pruebas para experimentar lo que vamos explicando. Es muy recomendable porque como más se aprende es practicando, pero si no queréis dar el paso, simplemente podéis leer la guía para haceros a la idea de cómo se compone la plantilla.
Para crearos un Blog desde cero que os sirva de pruebas, podéis realizar esta guía.
¿Cómo se programa en XHTML ó HTML?, el nivel más mínimo de la estructura, la etiqueta:
El XHTML es el "lenguaje" en el que nos basamos para escribir en Blogger. Al igual que explicamos con el HTML, Una página XHTML posee una estructura clara que le indica al navegador dónde está la "cabecera" de la página, el cuerpo de la página y su final. Toda la estructura se compone con etiquetas:
<etiqueta> </etiqueta>
El cuerpo de la plantilla se compone de un conjunto de "etiquetas" cuyo comienzo y final se acompañan del símbolo "menor que" < y el símbolo "mayor que" >. Ambos caracteres delimitan el cuerpo de la etiqueta. Dentro de ella se escriben "palabras clave" que el navegador interpreta como "normas" para montar una página.
Normalmente, en HTML las etiquetas llevan una etiqueta de apertura <etiqueta> y otra de cierre </etiqueta> que suele llevar una / para indicar que la etiqueta se está cerrando. En XHTML la terminación o cierre de una etiqueta se puede realizar en la propia etiqueta
<etiqueta/> o con una etiqueta de cierre.
¿Porqué XHTML?, ¿Cómo funciona el código en Blogger?:
Simplificando al máximo, tanto el HTML como el XHTML son lenguajes de marcado (de etiquetas) que al final es interpretado por el navegador. La diferencia fundamental entre ambos es que en el XHTML las etiquetas que se utilizan pueden ser propias de quien las utiliza:
Blogger contiene etiquetas y funciones propias que se escriben en XHTML y que luego se interpretan en una página HTML:
Un ejemplo práctico para comprenderlo perfectamente:
Lo que en HTML se escribiría para poner el título así:
<head>
<tittle> esto es el título de la página </tittle>
</head>
En XHTML de Blogger se escribiría así para meterlo dentro de sus propias etiquetas:
<head>
<title> <data:blog.pageTitle/> </title>
</head>
En ambos ejemplos de código se escribe prácticamente lo mismo, estudiemos las diferencias, son muy sencillas, ¡verás qué fácil!:
<head></head> En HTML y XHTML de Blogger se escriben las etiquetas que indican la parte de cabecera de la página. <head> (cabeza en inglés) expresa la zona de la página donde se van a colocar aspectos que corresponden a la cabecera. En este caso, dentro de la cabecera de una página se suele poner el título <tittle>. Así pues entre la etiqueta que marca el comienzo de la cabecera <head> y la que marca su final </head>, en su interior se escribe el título remarcado entre la etiqueta <tittle> y </title>.
En el HTML convencional entre <tittle> y </title> se escribe el título "esto es el título de la página" como vemos en el ejemplo, pero en el XHTML se referencia a <data:blog.pageTitle/>.
En XHTML se hace referencia al atributo data: para solicitar del blog el .pageTitle, el título de la página. En XHTML se interpreta cada comando data: luego blog y después .pageTitle para terminar pasándole al navegador una página HTML en la que si le das a "ver código fuente" aparecerá lo mismo que en el ejemplo HTML:
<head>
<tittle> lo que el Blog tenga en su atributo data para el título de la página </tittle>
</head>
Así pues, aunque en la plantilla escribes <data:blog.pageTitle/> cuando ves el código que ha interpretado finalmente el navegador, ves ya el HTML: <tittle> esto es el título de la página </tittle>.
Esto permite a Blogger mantener un código más limpio y unificado de cómo debe ponerse el título de un Blog accediendo a sus datos, en lugar de que cada Blog utilice su propio HTML para componerse el título a su gusto. Es por un lado más cerrado pero por otro más limpio, fácil de leer y estandarizado para todos. ¿A que es más sencillo de lo que pensabas?.
Aprendiendo a hacer tu primera plantilla "vacía", con sólo el texto: ¡Hola mundo!.
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.
1) En tu Blog de pruebas, ve directamente en el menú de la izquierda a la opción "Plantilla".
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/><b:section class='header' id='header'/></body>
</html>
Explicación detallada de cada parte del código:
- <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.
- Blogger obliga a que como mínimo dentro de una plantilla de un blog, aunque esté "vacía" como mínimo exista una sección:
- Las secciones en el XHTML de Blogger indican "divisiones", "secciones" dentro de una página. Se hacen secciones para almacenar en su interior "barras laterales", "menús", "anuncios"... cada sección contendrá en su interior "Widgets" que compondrán los componentes que forman el Blog. En este caso, como en esta entrada de la guía no vamos a entrar en el capítulo de los Widgets, dejamos vacía la sección:
<b:section class='header' id='header'/>
- <b:section indica que estamos abriendo sección y que termina con el cierre de etiqueta />. Se puede terminar también cerrando la etiqueta <b:section con > y poneindo después </b:section>.
- class='header' indica que estamos abriendo sección de la clase header o cabecera del blog. Este nombre es libre, aunque en Blogger se suele utilizar como iremos viendo en otras entradas "navbar" (barra de navegación), "header" (cabecera), "main" (principal), "sidebar" (barra lateral) y "footer" (pié) para referenciar a distintas clases de secciones que pueden manejarse dentro de un blog.
- id='header' Establece el nombre o identificador (id) que se le pone a la <b:section, es decir, el nombre que se le pone a la sección. Este nombre no se puede repetir en toda la plantilla para ninguna sección.
- </body> y </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:
5) Por último si le das al botón "Ver Blog" verás que aparece el texto del título del Blog. ¡Tu primera plantilla desde cero, creada y entendida por ti!, ¡enhorabuena!:
Eso es todo, si has comprendido este punto, ya estás listo para ¡saltar a los widgets!... en la próxima entrega.
Si hay algo que no te haya quedado claro o que desees cambiar en la guía para que se comprenda mejor, por favor coméntalo, esta guía es para ti para que te sea lo más sencillo posible.
Muchas gracias! Tengo un blog cuyo diseño nunca me ha convencido. Creo que voy a seguir tus recomendaciones para comenzar a probar cosas e intentar darle un toque más cercano a lo que quiero. A ver si tengo suerte! Feliz día! :-)
ResponderEliminarGenial Mauxi, me alegro que pueda servirte. En Diarios de la nube ya he realizado alguna renovación de diseño de Blogs por un poco de dinerillo, si estás interesado no dudes en contactar conmigo.
EliminarMuchas gracias, me será de mucha utilidad. Lo miraré con calma para enterarme bien.
ResponderEliminarClaro, son para irlas revisando con calma, poco a poco y probando. Al final se aprende mucho más de lo que parece. Un saludo amiga!!!
EliminarYo quiero crear un blog como el tuyo, que plantilla de blogger utilizo o como podría a comenzar a elaborar una plantilla personal, explicarme por favor
ResponderEliminarTe recomiendo seleccionar una plantilla responsive a tu gusto. Tienes cientos en Internet, a mí me gustan de templateism pero hay cientos de sitios. Pilla la que prefieras y hazte esta guía: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger.html
EliminarCualquier duda aquí estaré.
un saludo!
En el código XHTML, ¿dónde debo poner el nombre del blog?
ResponderEliminarDonde pone blog.pagetitle va el título del blog. De todas formas, en las siguientes entradas del cursillo le irás poniendo el título para mostrarlo en pantalla ;)
Eliminarmuy bueno amigo. La verdad es que te agradezco que publiques estas cosas que nadie había hecho públicas. Un saludo
ResponderEliminarGracias Félix, a tu servicio. A mí me gusta compartir lo que aprendo con los demás para juntos progresar y sacar lo mejor entre todos... suena y hasta es utópico o idealista, pero no se me ocurre mejor manera de hacerlo real que practicándolo. Un abrazo!!!
EliminarPues quiero darle un nuevo diseño a mí este 2015, pero sabiendo más sobre el HTML y que mejor que tú guía para ello, claro, me cree el blog de prueba y a ver que tal me va...
ResponderEliminarSeguiré leyéndote.
Hola Claudia, efectivamente esta guía es para saber "qué se toca" cuando se utiliza la plantilla de Blogger y dónde afecta, cómo, etc... te ayuda a sentar las bases para entender mejor todo para realizar el cambio.
EliminarCuando hayas terminado el cursillo, practica con esto otro: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger.html para buscar una plantilla hecha en el mercado que pueda ayudarte en lo que necesitas.
Así seguro que terminas consiguiendo la presentación que deseas.
Un saludo!
Muchas gracias por toda esta información, ya era hora de encontrar tutoriales de calidad. Me encanta aprender por mí misma, y aunque no tengo ni idea de todos estos códigos, me paso la vida retocando mi blog. La mayoría es sacado de otras páginas, con códigos ya prediseñados a los que yo le retoco únicamente el css.
ResponderEliminarDespués aprendí sola, (porque me encantan las plantillas de wordpress) a ir sacando los códigos a través de inspeccionar elemento, un día no se cómo lo descubrí, y de ahí saco eso de los divs y después el css, y me queda perfecto, aunque no siempre puedo hacer lo que quiero porque hay cosas que se me escapan, y no se dónde ubicarlo.
Y ahora me he encontrado esta estupenda guía que me voy a leer de principio a fin, a ver qué es lo que aprendo.
Primera duda, qué diferencia hay entre el título d ela página y el título del blog, es algo que no entendí muy bien, es el mismo en ambos casos?
Gracias, voy a por la segunda parte.
Nada, duda resuelta, cambié por un Hola, y ya vi que cambió el nombre de la pestaña, la página se refiere a todo en general, y el blog al título del blog en particular, puede ser el mismo nombre o distinto, pero no tiene sentido que sea distinto, claro.
EliminarMe alegro que te funcionara entonces Andrea... cualquier cosa por aquí estoy. Un saludo.
EliminarHola, y como hago para modificar las plantillas que he instalado?? Gracias!!
ResponderEliminarHola,
Eliminarlas plantillas que instalas, si son de pago, no se "dejarán modificar" directamente, tendrás que adquirir su versión desbloqueada pagando para poder implementar tus cambios.
Un saludo!
Hola! Instale una gratis y no pude modificarle nada :-(
EliminarHola, las "gratis" suelen estar limitadas y te dan una desbloqueada al pagar... suele ser así...
EliminarMuchas gracias. Hasta aquí está todo muy claro y ya hice la tarea. Tengo una plantilla de blogger hermosa pero que no he podido ajustar a mis deseos. Espero lograr mis objetivos con todas las indicaciones.
ResponderEliminarMil gracias nuevamente.
Gracias a ti por participar, es un placer poder ayudar. Un saludo!
EliminarHola Miguel, otra vez yo; pero te encontré y dificílmente te soltaré, je je je. Tengo mi plantilla de prueba sin menú. Dijiste que lo borráramos e insertáramos uno nuevo y hasta aquí llegué y me aparece sólo el título.
ResponderEliminar¿Qué artículo sigue?.
Muchas gracias por tu ayuda.
Hola,
Eliminarhacer una plantilla es un tema complejo, pero la verdad que luego es divertido. Hay muchas predefinidas que además son responsive que están muy bien. Si quieres ver todo lo que hay de curso sobre Blogger en Diarios de la nube, pon esto en tu navegador: http://www.diariosdelanube.com/p/buscador.html?q=curso+blogger
Un saludo y muchas gracias, cualquier cosa aquí estoy.
Yo te hola el blogger gratis como estoy comenzando con el mundillo del blog me gustaría aprender a diseñar mi plantilla a mi gusto pero no se si con el de gratis se puede???
ResponderEliminarHola, este cursillo puede ayudarte a hacerlo. Las plantillas gratuítas no se pueden modificar, salvo que se pague por ellas, es como lo hacen las personas que las venden. Puedes intentar modificar si quieres por ejemplo una plantilla por defecto de las de Blogger.
EliminarUn saludo!
hola, he probado el codigo y si me funciona bien. Pero intente eliminar esta linea y me dice error, no se porque?
ResponderEliminar¡Hola!,
Eliminarpon la línea pero sin las etiquetas < y > para que se pueda ver el texto. Por otro lado, como es una plantilla de ejemplo didáctico, tiene todo su contenido al mínimo necesario posible y eliminar cualquier línea del mismo puede darte error porque sea obligatoria.
Pon la línea de código que ha sido (sin < ni >) y te digo.
Muchas gracias.
En cuanto pueda voy a probarlo!!! Gracias!!!
ResponderEliminarUn placer, cualquier cosa aquí estaré. Un saludo!
EliminarComo hago para colocar el cuerpo de la entrada?
ResponderEliminarEn los siguientes tutoriales va explicandolo, cualquier duda pregunta lo que necesites.
EliminarUn saludo
Hola!! quería hacer una pregunta a ver si me puedes ayudar, resulta que modifiqué mi plantilla de blogger y ahora no puedo modificar la imagen de la cabecera hacia el centro, lo mismo con el menu, lo quiero centrar y no puedo. alguna solución?
ResponderEliminarmi blog es: www.unaeducacionparatodos.com
Localiza los DIV que contienen la cabecera y el menú y añádeles align=center.
EliminarUn saludo