30.9.09

219/365 » Introducción

¿Te gustaría leer este tutorial desde el inicio?

Para comenzar a trabajar en su nuevo sitio, les voy a recomendar un par de cosas:
1. Utilicen un blog nuevo, para no arruinar su plantilla actual. Si les gusta lo que han hecho, cámbienla; sino, pueden seguir experimentando hasta lograr algo con lo que se sientan cómodos.
2. Utilicen una herramienta para modificar código. Aunque pueden hacerlo al cálculo, en serio les recomiendo una herramienta como Notepad ++, que les ayuda a revisar la sintaxis y a llevar en orden su código.
3. Revisen y ayúdenme a mejorar este tutorial. Lo que yo voy a poner en mi tutorial es algo súper básico, porque yo no soy ni programador ni diseñador. Si creen que algo no lo he hecho bien, si hay un modo más rápido, o algo por el estilo, no duden en comentar. En realidad, este tutorial tiene como objetivo aprender mientras hago.

Ahora, comencemos con lo más básico.
Las plantillas en Blogger utilizan varios lenguajes para armar el sitio que aparece en la pantalla. Blogger utiliza etiquetas de XML para hacer los llamados de la información de la base de datos relacionada al blog: los posts, los widget y las características de estos elementos. Si están interesados en este tipo de información, pueden ver esta serie de posts que explican de forma clara qué es todo eso. En nuestro caso, nos vamos a dedicar exclusivamente a trabajar con las partes que contienen el HTML y el CSS del código.

El código
Por supuesto que este no es un tutorial larguísimo de HTML, y es muy probable que su experiencia modificando el código de sus publicaciones sea suficiente para entender que el lenguaje funciona por medio de etiquetas. En teoría, la estructura general de un documento es así:
<html>
 <head>
  Información para el sitio
 </head>
 <body>
  Contenido del cuerpo
 </body>
</html>
Dentro de las etiquetas de head se encuentra la información para la identificación de la plantilla: nombre, autor, tipo de documento, las etiquetas XML definidas para el funcionamiento de las plantillas y el CSS, entre otras cosas. Vamos a comenzar con una plantilla básica que preparé para que no tengan que matar su querido blog.

Ya saben cómo funciona esto: se van a la pestaña de plantilla, la edición de HTML y sustituyen el código de la plantilla por esta nueva. Tan fácil como esto. Ahora, analicemos un poco los elementos de la plantilla. Para comenzar, es importante notar una diferencia entre las plantillas de Blogger y de Wordpress: Blogger permite la modificación del código en un solo logar, desde donde hace llamados a los módulos de los posts y los widgets. Wordpress, en cambio, es un poco más organiado en sus módulos y utiliza archivos que son llamados por el software, y da la oportunidad para modificar estos widgets y loops dentro del código, si es necesario.

Ahora, veamos qué significa todo el código de la plantilla.
  • Todo lo que se encuentra antes de la etiqueta inicial de html es información sobre el código utilizado en la plantilla.
  • Dentro de las etiquetas head tiene información sobre la plantilla, el código css (aunque si lo prefieren, pueden referenciar a un sitio externo si lo desean). También acá se encuentran los scripts que utilicen para su sitio y otras cosas que crean convenientes utilizar.
  • Dentro de las etiquetas body se encuentra todo lo que se ve cuando se abre el sitio, el contenido.
Ya, suficiente. Fácil, ¿verdad? Ahora, sigamos con un poco de la sintaxis para HTML y CSS.

1 comentario :

ROMAN ORLANDO dijo...

personalmente te recomiendo JOOMLA o Wordpress , para no andar dando vía con HTML pues estos CMS´s dividen "aspecto" llámese CSS ....y Contenido....