224/365 » Los últimos detalles

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

Teniendo todo casi listo, estoy seguro que no hay adónde perderse, por lo que simplemente voy a hablar de cómo termine el diseño de la plantilla:

Tipografía
Para el diseño de un sitio a mí me gusta utilizar tipografía uniforme. Al momento de decidirse por un tipo, hay que tomar en cuenta que si una computadora de algún lector no tiene instalado nuestro tipo de letra favorito, él no podrá ver el sitio como nosotros querríamos. Por esto, los diseñadores escogen fonts comunes y fáciles de leer.

body {background-color:#030303; font-family:Lucida Grande, Verdana, sans-serif; }

Fecha
Para crear el efecto del listón azul, primero ubiqué el div para la fecha. Para no perderse a la hora de buscar el div para modificar, hay dos modos de hacerlo: el primero es como comenté ayer, con la barra de Web Developer. Otra es hurgando el código fuente del sitio publicado.

.date-header {
color:white;
height:11px;
width:460px;
font-size:11px; 
clear:both; 
padding-left:10px;
background-color:#4c9acf;
padding-top:20px;
float:right;
margin-right:15px;
margin-top:10px;
text-align:right;
text-transform:uppercase;
}

Separación
Si notan, la plantilla tiene el efecto de separar los posts entre sí. Esto lo hago simplemente con un borde inferior del mismo color del body del sitio. Así, crea la ilusión de continuidad del fondo.

.uncustomized-post-template {border-bottom:31px solid #030303;}

Banner
Al ver el banner en medio del sitio, pueden amarlo, u odiarlo. En mi caso, yo siento los dos. Y es exactamente por eso que lo he dejado ahí, porque es molesto y llamativo, como la buena publicidad. Para crearlo, creé una paleta de colores basada en la imagen que quería para mi blog, utilicé una imagen que contuviera esos colores, y después de un par de filtros y modificaciones en Photoshop, obtuve mi banner. Nada muy complicado una vez se tiene una idea de qué hacer.

223/365 » El sidebar

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

El sidebar está compuesto por widgets, ¿verdad? La mayoría de estos widgets van en el sidebar, así que ahora vamos a aprender a modificarlos. Para esto, me auxilio de alguna herramienta como Firebug o la barra de Web Developer; ambas están disponibles para Firefox. Yo uso la última.

Si decidieron usar la misma que yo, les explico el método que uso para trabajar. Primero, deben añadir los widgets desde el menú de Blogger, en "Elementos de la página". Yo decidí que mi blog tuviera un blogroll, una lista de tags, un widget de Flickr, mi perfil y una lista para el archivo de la página. Ustedes pueden poner los que más les gusten. Ahora, abran su blog, y desde la Web Developer Toolbar seleccionen Información - Mostrar detalles ID y CLASS. Van a ver algo como esto:

Ahora ya sabemos qué significan los # y los puntos, ¿verdad? Recapitulando, los # son los divs con id, y los puntos son los id con clases. Pueden observar que generalmente las clases van adentro de los id, porque son de más baja jerarquía. Por el momento vamos a usar los nombres de los id para cada elemento. Por ejemplo, para modificar los atributos de mi perfil, añado en mi CSS:

NOTA: Para poder modificar el CSS de cualquier widget, dentro de la ventana del código de HTML seleccionen la opción "Expandir plantillas de artilugios". Si no lo hacen, Blogger les va a decir que va a borrar los widgets para grabar el código. Han sido advertidos.

#Profile1 
{
margin-top:20px; 
margin-bottom:20px;
border-top:2px solid #555;
border-bottom:2px solid #555;
padding:10px 0 20px 0;
}

Este código dice: al div con id "Profile1" se le genera un margen superior (este se cuenta como externo al elemento) de 20 pixeles, y también uno inferior de 20 pixeles. Tiene un borde superior e inferior de 2 pixeles, sólido y de color gris (ahora es un buen momento para hablar de los códigos hexadecimales... o no: con una búsqueda en Google de "hex colors", van a encontrar muchas herramientas para escoger los colores que más quieran para su blog). Por último, el padding es el contrario de margin, es un tipo de margen interno. Pueden ver que coloqué cuatro números, lo cual es un modo abreviado para evitar repetir los atributos como sucedió arriba; cada número se cuenta como arriba-derecha-abajo-izquierda. Por tanto, arriba y abajo tienen valores, mientras que derecha e izquierda no.

He decidio también colocar los widgets de etiquetas y del blogroll como columnas para ahorrar espacio, así que he colocado lo siguiente:

#BlogList1 {width:135px; float:left;}
#Label1 {width:135px; float:left;}

El sidebar ahora tiene un ancho de 290px (lo reduje para colocarle un padding de 20px y evitar que el logo del blog esté junto a los títulos de los elementos), por lo que he tenido que reducir el tamaño de ambos elementos. Con 135 pixeles de ancho y un float hacia la izquierda, los dos widgets se colocan uno junto al otro.

Entre otras cosas, una que es importante es que modifiqué el color del texto. Debido a que mi sidebar es negra, necesito letras claras, por lo que uso el siguiente código (lo que ven del sidebar se lo añadí al selector que ya tenía antes:

#sidebar a {color:#ddd;}
#sidebar {width:290px; height:1000px; background-color:#030303; color:white; font-size:9px;float:right; padding-left:20px;}

El selector #sidebar a aplica a los elementos "a", como los hipervínculos. En el sitio de w3c pueden encontrar mucha información sobre todo lo que pueden modificar del CSS de un sitio.

Después de una que otra modificación, y que coloqué un bannercito al blog, voy quedando con una plantilla bastante completa, y solo me falta modificar la parte de los posts. ¿Le gusta cómo vamos hasta el momento?

222/365 » Tamaños y floats

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

Ayer usamos atributos de color para no perdernos mientras movemos nuestros divs de un lado a otro. Ahora vamos a organizar la estructura del sitio. Ya que este tutorial no se encarga de modificar los elementos XML de la plantilla (ya que Blogger hace esto por nosotros), solo vamos a trabajar en darle forma a nuestra plantilla. A partir de este momento, todo lo que voy a hacer es solo para darles un ejemplo de lo que usé para crear mi plantilla. Para una estructura de dos columnas y un header, hay un div de logo (generalmente le llaman header, recuerden que pueden ordenar su sitio como más les guste) justo después de abrir el body, y antes del container:

<div id='logo'>
</div>

Este div por su cuenta no hace mucho, mientras no le den forma. Intenten con algo así:

#logo {height:200px; 
background:url("http://www.urldeejemplo.com") no-repeat; 
clear:both;}

En mi caso, decidí hacer algo diferente. Ya que generalmente escribo posts demasiado cortos, y con el fin de llevarle la contraria al mundo, decidí aprovechar el espacio horizontal para mi header. Les explico un poco de lo que significan algunos de los atributos que van a ver:

• margin es utilizado para crear márgenes fuera de los divs. En el caso específico que ven ahí, al colocar margin-left con margin-right para un elemento, hace que este quede centrado;
• width sirve para el ancho del elemento, y height para su altura;
• float sirve para definir hacia adónde los divs van a "flotar" cuando se les deja sueltos. Los divs que flotan hacia el mismo lado se ordenan, según su orden de declaración. En este caso, el div de content está antes que el del logo, por lo que ese se encuentra más a la izquierda.
• clear es utilizado como un "salto de línea", es decir, para evitar que hayan elementos a los lados del elemento.
  

#navbar-iframe {height:0px;visibility:hidden;display:none;}
#container {width:910px; background-color:99BDAB; margin-left:auto; margin-right:auto; border-top: 4px solid black;}
#content {width:450px; float:left; background-color:#EDEFD1;}
#logo {width:150px; height:1000px; float:left; background-color:#CED59F;}
#sidebar {width:310px; height:1000px; background-color:#F06463; float:right;}
#footer {height:45px; background-color:black; overflow:auto; clear:both;}

Así, tengo un sitio que se ve así por el momento:

A partir de acá, la plantilla está básicamente organizada, y solo es cuestión de organizar los elementos, dar color y dar estilo al texto y uno que otro elemento en el sitio.

A partir de esto, ya están listos para hacer su plantilla con la forma que quieran.

¿Les gustaría tener una plantilla con un footer grande que tenga su blogroll u otras cosas? Solo crean otros divs dentro del footer. ¿Qué tal de tener un blog con dos, tres o cuatro columnas? Hay tantas opciones que pueden hacer de su plantilla única y especial. Pero mientras tanto, sigamos viendo cómo hice para terminar mi plantilla.

221/365 » La estructura del sitio

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

Como vimos ayer, los sitios web están organizados por medio de los div. Revisemos un código que preparé para comenzar a diseñar nuestra plantilla. Cópienlo y peguenlo dentro de la parte de edición de HTML de su blog:

<?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 expr:dir='data:blog.languageDirection' 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>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name:     Templeit
Designer: Esnipi
URL:      www.snipedia.net
Date:     10/01/09
----------------------------------------------- 
*/

 ]]></b:skin>
</head>
<body>
   <div id='wrapper'>
  <div id='container'>
   <div id='content'>
    <div class='post-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
     <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
    </b:section>
    </div>
</div>
<div id='sidebar-wrapper'>
    <div id='sidebar'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
     </b:section>
    </div>
</div>
</div>
<!-- acá termina container -->
<div id='footer'>
   <div align="center">
Hacer plantillas es fácil.</div>
</div>
</div>
<!-- acá termina wrapper -->
</body>
</html>

Ahora, hablemos de lo que pensamos hacer. Primero, hay que tener en cuenta que dentro del header va generalmente todo el código CSS. Este nos va a servir para darle forma a todo lo que hagamos con el HTML: tamaños, formas, colores, etc. Ahora, esta plantilla ya está lista para que comencemos a jugar. Primero, revisemos de forma general qué es lo que tenemos dentro del body del código. Entremos a nuestro blog y revisemos qué es lo que se puede ver:

Et voílà! ¿Les gusta cómo vamos? Bueno, no podemos quejarnos, si solo tenemos un post de prueba, y nada más. Ahora, comencemos con la magia. Antes que nada, revisemos la estructura de los divs, para tener claro qué es lo que estamos haciendo.

Con esto en mente, podemos comenzar a jugar con el CSS un poco. Una regla básica de este lenguaje es que todo atributo que se aplique a un elemento, se aplica también a los elementos dentro de ella. Así, por ejemplo, si decidimos el atributo:

body {background-color:green;}

Va a significar que no solo body, sino que todos los elementos dentro de él (container, content, footer, sidebar-wrapper, etc.) tendrán un fondo color verde. Así, si deseáramos que container tenga un fondo blanco, por ejemplo, tendríamos que especificarlo dentro del  código, haciendo que ese div (y los contenidos dentro de él) sean una excepción del atributo global que hemos creado antes.

Juguemos un poco con el código que ya tenemos en nuestro sitio, ¿Les parece? El código CSS puden ponerlo una línea antes de ]]>, dentro del head. Comencemos con quitarle la barra de navegación, y con ponerle algo de color, por motivos puramente didácticos. Voy a escoger una paleta bonita:

#navbar-iframe {height:0px;visibility:hidden;display:none;} /*que significa: el div navbar-iframe va a tener una altura de 0 pixeles, estará escondido, y no tendrá visibilidad.*/
#wrapper {background-color:#7BA38B;}
#container {background-color:#D5A423;}
#content {background-color:#EED4AF;}
#sidebar {background-color:#BE270A;}
#footer {background-color:#CE6C11;} 

Ahora, veamos qué es lo que obtenemos al guardar los cambios. ¿Notan la falta de algunos elementos? Eso es porque todavía no tienen forma, ni contenido. Pero eso es justamente lo que haremos mañana.

220/365 » Sintaxis

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

Ayer revisamos un poco sobre cómo se estructura un sitio en HTML (bueno, XHTML en este caso). Ahora, hablemos un poco de cómo se organizan los sitios web en este lenguaje.

HTML
Primero, ya sabemos que funcionan a través de etiquetas, ¿verdad? Ya saben, se abren así: <elemento> y se cierran con </elemento>. Ahora, hablemos de cómo se organizan uno dentro de otro. Una cosa importante que deben saber es que en HTML los elementos van dentro de otros, pero si ese es el caso, deben abrirse y cerrarse mientras se encuentran adentro. Por ejemplo, un buen ejemplo relacionado a lo que vimos ayer es que html es una etiqueta que contiene a head y body. Ambas se abren y cierran sin entrelazarse entre sí:

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Ahora, esto no solamente es útil para estas etiquetas, sino para organizar la información de todas las etiquetas, especialmente las que se encuentran dentro de body. ¿Cómo se hace eso? Pues por medio de los divs. Un div es una "caja" que contiene elementos en el sitio web. A mí me gusta pensar en body como la caja maestra que contiene a todo el universo de divs, mientras que existen divs más pequeños que se organizan para caber dentro de ella mientras contienen a su vez a todo el contenido. Así, los sitios web se ven así:

He coloreado cada div con un color distinto. Existe uno para el encabezado de los blogs, para el espacio donde irán los post, para la sidebar (barra lateral), etc. Incluso hay divs dentro de otros: los widgets pueden ir dentro de la sidebar, o el título del post puede ir dentro de un div para cada post. Así, existen tantos divs como elementos y subdivisiones existen en la plantilla.

Para diferenciar un div de otro, se utilizan dos métodos para etiquetarlos: id y class. Así, se le colocan nombres a cada uno de los divs cuando se abren: <elemento id="atributo"> o <elemento class="atributo">. Generalmente, los id tienen más jerarquía que los class, pero te recomiendo que investigués más al respecto para que no te cause problemas.

CSS
Todo el código de CSS está basado en las etiquetas que usamos para nombrar a los divs. La sintaxis para el código se resume así:

selector {propiedad:valor;}

Y ya, así de sencillo es. A un selector se le pone enfrente un símbolo de numeral (#) si estamos dando atributos a un div etiquetado con un id, y un punto si el div tiene una class. Un par de ejemplos:

1) #post {border:1px solid #ffffff;}

2) .date {background-color:white;}

El ejemplo 1 se lee: el div con el id "post" posee un  borde sólido con un valor de 1px y de color negro. El otro ejemplo dice: el div con clase "date" tiene un fondo de color blanco. Aparte de esto, existen elementos como los headers o párrafos (h1, h2, p, etc.) que no requieren ningún símbolo frente a ellos, por mostrarles cómo funciona esto, de forma rápida.

Ahora, veamos cómo vamos a usar todo esto para crear nuestro sitio.

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.

Plantillas en blogger: un tutorial

¿No pude?

¿No tuve tiempo para aprender?

¿Se me fueron las ganas?

Algo así me pasó a mí. Pero al fin decidí sentarme a aprender un poco de cómo funcionan las páginas web. Yo sé que hace mucho que había prometido, así que voy poco a poco. Así que voy a ir actualizando a medida vaya trabajando en mi nueva plantilla web.

Introducción
Sintaxis
La estructura del sitio
Tamaños y floats
El sidebar
Los últimos detalles

069/365 » Diseñando un blog #1

Como con todas las cosas, para diseñar un sitio web es importante dejar de pensar en código y cosas geek por un rato, y referirnos a lo más básico de la vida: ¿qué es lo que realmente queremos? Eso es lo más complicado, después de todo. Casi todos los blogs tienen una estructura común, donde el contenido está organizado en columnas, una para los posts, y otras para cosas extra de la vida. En mi caso, pienso que mi blog es demasiado espacioso para la cantidad de cosas que escribo, y me gustaría probar algo un poco minimalista. Quizá como mi plantilla anterior, ¿la recuerdan?

Así que se me vino a la mente que podría intentar un diseño que tenga mis post un poco más ordenados en columnas más pequeñas, y algo a la derecha un poco más interesante: mis fotos de flickr, quizá algo que tenga que ver con mi Twitter, y demás. También me gustaría tener un footer grandecito, para tener más espacio.

Ya veremos si realmente puedo hacer algo decente con esta idea.