Por si aún no lo tenéis claro, CSS es un lenguaje que se utiliza para aplicarle estilos al contenido de nuestras páginas web. ¿Qué significa eso de dar estilos? Muy sencillo, dar estilos significa poner bonita una página. Especificarle un tipo de letra, su color, su tamaño. Decir dónde se coloca cada bloque de textos, qué color de fondo van a llevar. Significa poner imágenes decorativas, bordes. En definitiva, todo lo que tenga que ver con el aspecto de una web se hace (o se debe hacer) mediante CSS.

A la hora de escribir todas las reglas que definirán todas estas cosas con las que pondremos bonita la web, se debe seguir una sintaxis concreta para que el navegador web pueda entender qué es lo que queremos decir con cada regla. Esta sintaxis está estandarizada por el W3C, y podéis leer todo lo que queráis sobre ella en el documento sobre CSS que tienen disponible.

La sintaxis de CSS es muy sencilla, sigue la siguiente estructura:

selector {
	propiedad: valor;
	propiedad: valor;
	propiedad: valor;
}

En el trozo de código anterior vemos como hay agrupadas entre unos símbolos de llave ({ }) una serie de pares “propiedad-valor”. Estas propiedades se corresponderían con todo aquello que queramos definir en lo referente a aspecto (color de fondo, tamaño de letra, etc.) y deben estar separados por el símbolo de dos puntos (:). Además, después del valor asociado a una propiedad debe colocarse el símbolo de punto y coma (;) para dar por finalizada la asignación de valores a la propiedad.

Esta agrupación de propiedades se aplicará sólo sobre aquellos elementos que coincidan con lo especificado en el selector. Pongamos un ejemplo para verlo más claro: Imaginad que queremos que los enlaces de nuestra web sean rojos y no estén subrayados.

a {
	color: red;
	text-decoration: none;
}

Como podéis ver he definidos dos pares “propiedad-valor” que determinan el color de letra que quiero, en este caso red para el color rojo, y que no se quiere subrayado. Estas dos propiedades se encuentran englobadas dentro de un grupo con el selector que especifica que sólo se aplicará a todos los elementos que sean A (enlaces) en nuestra página web.

A primera vista puede parecer muy sencillo, pero hay varios conceptos algo más complicados de los que hablaré en próximos “básicos”, como pueden ser todos los tipos de selectores que hay, la especificidad de los mismos, la aplicación de propiedades en cascada, etc.

La aplicación está disponible, como toda las “legales”, desde la AppStore de Apple, pero tiene su propia página desde la que se puede bajar. Es totalmente gratuita, y actualmente la versión que se puede obtener es la 1.3.

No se puede decir que escribir un post aquí sea muy cómodo, pero la limitación viene dada por el soporte y no por la aplicación. El iPhone puede ser muy buen cacharro, pero para escribir textos medianamente largos apesta un poco. De hecho, la aplicación es excelente y te permite hacer prácticamente todo lo que se puede hacer desde el panel de administración de WordPress (escribir, categorizar, moderar comentarios…). En definitiva, te puede sacar de un apuro si necesitas escribir en tu blog pero no tienes un ordenador a mano.

Si observáis la hoja de estilos para esta iteración veréis que apenas hay unas pocas reglas en las que aplico la tipografía, algunos colores y muy poca cosa más. Pero todo lo que he definido en la hoja de estilos tiene su por qué.

Tipografía

Una de las primeras cosas que me gusta definir cuando comienzo a maquetar un diseño es su tipografía. En mi trabajo diario no soy yo el que define el tipo a utilizar, de eso se encarga el diseñador, y yo lo único que tengo que hacer es seguir sus instrucciones. Pero en este caso es distinto, porque el diseñador soy yo.

Para Colores Efímeros he decidido que la tipo a utilizar sea la famosísima Helvética. Siempre me ha parecido muy precisa, muy cuidada y sobre todo muy legible, que es de lo que se trata. Así que en mi hoja de estilos definí la siguiente regla relativa a la tipografía para el body completo:

font: 10px/1.6 Helvetica, Arial, sans-serif;

Es probable que a muchos de vosotros os parezca chocante que use un tamaño en píxeles para el tipo, ya que nuestro querido Internet Explorer 6 no es capaz de permitirle al usuario cambiar el tamaño del texto si está definido en esa unidad de media. Pero como Colores Efímeros es mi blog personal, he decidido que voy a darle un tratamiento especial a este navegador, así que no tiene importancia que use un tamaño fijo de tipo.

Según la regla anterior, además de decidir que quiero Helvética (y las demás por si se da el caso de que alguien no la tenga en su máquina), defino que quiero un tamaño base de 10px para el texto. Este número no es al azar, obviamente. Como en el interior del documento quiero usar unidades relativas de medida para (casi) todos los elementos, en concreto quiero usar em, me resulta mucho más fácil hacer los cálculos si sé de antemano que 1em equivale a 10px. Sobre todo teniendo en cuenta que más adelante quiero basar la maquetación del blog en base a una grilla elástica (hablando del tema, aquí os dejo un par de artículos de Rodrigo Galíndez sobre el tema: Diseño con grillas (formato PDF, 1.6 Mb) y Utilizando grillas (formato PDF, 2.4 Mb)).

Maquetación

Para controlar la maquetación de los elementos he necesitado englobar todo el contenido del documento en un <div id="wrapper"></div> con el que poder jugar para centrar el bloque de texto. Para hacerlo he usado la técnica de aplicarle un ancho concreto, y determinar que sus márgenes laterales sean automáticos:

#wrapper {
	margin: 0 auto;
	min-width: 640px;
	width: 64em;
}

Además de eso, y para asegurarme de que el ancho nunca sea menor de lo que considero adecuado, he definido un ancho mínimo con min-width de 640px, que se corresponden con los 64em si tenemos en cuenta que el tamaño base del tipo es de 10px.

clearfix

Algo que me gusta tener en todas mis hojas de estilos es el archiconocido clearfix. Este conjunto de reglas se utiliza para “limpiar” bloques que contienen elementos flotantes. ¿No entendéis un pimiento? Bueno, os lo explico en el siguiente gráfico:

En la figura de la izquierda, tenemos un div que contiene a otros dos elementos, uno flotando a la izquierda y otro a la derecha. Como nuestro div padre no tiene colocado el class="clearfix", no es capaz de “entender” que tiene dos elementos contenidos dentro de si. Se comporta como si los elementos flotantes no existieran y por tanto no ocupa el alto que debería. Imaginad que debajo hubiera texto, el resultado sería desastroso, los elementos flotados pisarían el texto y no quedaría nada bien.

Por el contrario, en la figura de la derecha, donde nuestro div sí tiene el class="clearfix", no ocurre nada raro, ya que al tenerlo colocado entiende que posee contenido flotante, y se ajusta a la altura del mismo, comportándose de manera lógica.

Hay otros sistemas para hacer esto mismo (clear: both, etc.), pero de entre todos ellos considero que el mejor es este, y por eso siempre lo tengo en mis hojas de estilo:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* HACK: Esconder de IE/Mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* FIN-HACK: Esconder de IE/Mac */

Ocultaciones

Otra de las cosas que siempre me gusta tener en mi hoja de estilos, y la de este blog no se escapa de tenerla, es una serie de reglas para ocultar elementos. Quizá os sorprenda, porque con un simple display: none; bastaría. Pero hay un problema con esta regla, con ella estamos ocultando los elementos sobre los que la usemos a los ojos de la gran mayoría de lectores de pantalla.

Y vosotros os preguntaréis: ¿Y a quién cojones le importan los lectores de pantalla? Pues tenéis razón, ni siquiera a mi me importan, dudo mucho que alguien vaya a entrar a mi blog con uno de ellos… Pero como no me cuesta absolutamente nada, uso las siguientes reglas para ocultar elementos:

.ocultar {
	height: 1px;
	left: -9999px;
	position: absolute;
	top: -9999px;
	width: 1px;
}

Captura de la iteración

Y de nuevo, para los visitantes que vengan del futuro y quieran ver cómo estaba el diseño del blog en la iteración número 02, aquí os dejo una captura.

• Iteración 02

Para el que no lo sepa, un screencast es una grabación en vídeo donde se muestra, por ejemplo, el funcionamiento de algún software, y en el que se ve el sistema operativo de la persona que está grabando el screencast, todo lo que está haciendo en cada momento, y se escuchan sus comentarios y explicaciones. Es un formato estupendo para explicar cosas en el ámbito de la informática, porque ves “en vivo” qué es lo que está haciendo en su máquina la persona que te está dando el tutorial.

En el caso de ThinkWasabi, los screencasts se centran en el uso de diversos programas de Mac, además de dedicar algunos capítulos a hablar sobre la metodología GTD (Getting Things Done). Todos están explicados de una manera excelente, clara y amena. Así que ya sabéis, echadle un ojo a lo que cuenta el amigo Berto Pena.

Maqueta básica

Lo primero por lo que empecé fue la maqueta XHTML básica. Con mi editor de código preferido, TextMate, creé una página simple con todo el contenido que, por ahora, tendrá el blog. Título del blog, artículos, acerca de, enlaces, etc. Y lo fui encerrando entre etiquetas, tratando de aportar un poco de semántica a cada contenido mediante el uso de los pertinentes elementos h1, h2, ul y demás amigos que XHTML pone a nuestra disposición, y con los que lidiamos normalmente.

En esta maqueta procuré evitar en la medida de lo posible el uso de elementos div, ya que eso vendrá en una futura iteración, cuando tenga que empezar a pensar en el aspecto visual del blog, y no en su contenido. A pesar de todo, he usado alguno que otro, pero sólo para dividir conceptualmente algunos bloques muy concretos, como pueden ser los distintos artículos de los que se compone el contenido.

También he procurado evitar el uso de atributos class en los elementos, ya que de nuevo eso sólo será necesario cuando vaya a aplicarle los estilos al diseño. En este caso también he colocado alguno suelto para aportar algo más de semántica al contenido. No hay que confundirse, esta semántica no es una semántica real, para eso ya hay muchas tecnologías especializadas en las que por ahora no me quiero meter (sobre las que mi compañero Antonio Santos sabe un montón, por cierto). A pesar de todo, me gusta ser lógico con los atributos class, y trato de aplicarlos coherentemente, pensando en lo que significa el contenido del elemento al que se lo pongo.

De una maqueta tan sencilla como este no se puede sacar mucha miga, pero aún así me gustaría comentar un par de detalles que considero importantes. El primero de ellos es el uso de los encabezados que pone a nuestra disposición XHTML. Sobre este tema puede haber algo de discusión, ya que hay dos “corrientes de pensamiento” que no están de acuerdo en el uso del elemento h1. Unos dicen que debe ser el nombre del blog, y sólo debe haber uno por página, otros dicen que no, que para eso está el title, y que los h1 deben usarse cuantas veces sea necesario según el número de títulos de primer nivel que posea el documento. Yo, por mi parte, no pienso entrar en discusiones absurdas y hago lo que considero más correcto, que en este caso es colocar el nombre de la página en un único h1 para todo el documento.

El segundo detalle que quisiera comentar es el uso de listas para determinadas cosas. Por ejemplo, y como es natural, para los listados de enlaces y recomendaciones, no hay discusión en que se debe usar una lista desordenada. Espero que a estas alturas todos estemos de acuerdo en eso. Pero también he usado listas en otros elementos de la maqueta que no son tan obvios. Es el caso de los enlaces a los comentarios y a las distintas categorías de cada artículo. A mi entender son una lista de datos sobre el artículo, y por tanto deben ir etiquetados como tal, con ul y sus correspondientes li. Lo mismo ocurre con los enlaces de paginación para ver artículos antiguos, o artículos más recientes.

Construcción del theme

Para construir el theme lo primero que hice fue duplicar el que trae WordPress por defecto, el genial Kubrick. Pero para lo que yo necesito el theme de este blog, hay muchas cosas que Kubrick controla y que yo no quiero, así que fui borrando los ficheros que no me hacían falta, (404.php, rtl.CSS, links.php, etc.). Una vez borrados los ficheros ya podía ponerme a tratar de pasar el código XHTML de mi maqueta a los fuentes PHP del theme.

Lo que sí me gustaría comentar por encima es la estructura básica de un theme de WordPress en lo que a XHTML se refiere. Hay tres ficheros principales:

• header.php
• index.php
• footer.php

En estos tres ficheros se compone la estructura básica de la portada del blog. Imaginemos que dividimos nuestro documento XHTML en tres zonas: cabecera, cuerpo y pie. Pues bien, cada una de esas zonas va en los respectivos ficheros PHP.

No voy a entrar a detallar las variables que pone WordPress a nuestra disposición porque para eso ya hay infinidad de tutoriales, e incluso la propia documentación del proyecto que es de un valor incalculable. Pero lo que sí me gustaría destacar es que lo único que tenemos que ir haciendo es encajando las piezas de nuestro puzzle XHTML y sustituir los valores dinámicos del mismo (nombre del blog, artículos, etc.) por las variables correspondientes de WordPress.

También quisiera aprovechar para lanzar una consulta pública sobre un asunto de WordPress que no consigo averiguar. Si os fijáis en el contenido ahora que hay pocos artículos, aparecen dos li vacíos. Esos li se corresponden con los enlaces de paginación que, al haber sólo tres artículos, no se muestran. Lo que no consigo hacer es tener un condicional alrededor del ul que haga que sólo se pinte si se va a mostrar alguno de los enlaces, al mismo tiempo que otro condicional controla si se pintan los li según si hay enlace de “artículos anteriores” o de “artículos posteriores”. Coloco el código tal y como lo tengo ahora, comentado para que lo entendáis mejor:

<!-- Aquí necesito un condicional que me muestre todo esto sólo si hay enlaces de anterior y siguiente -->
<p>Navegación entre artículos:</p>
<ul class="paginador">
	<!-- Aquí necesito un condicional que me pinte el LI sólo si hay enlace de anterior -->
	<li>
		< ?php next_posts_link('Anteriores') ?>
	</li>
	<!-- Aquí necesito un condicional que me pinte el LI sólo si hay enlace de siguiente -->
	<li>
		< ?php previous_posts_link('Siguientes') ?>
	</li>
</ul>

Captura de la iteración

En cada artículo que escriba sobre cada iteración del diseño colocaré un enlace a una “captura” de la misma. Esta “captura” no será más que un fichero XHTML plano (y CSS si es necesario) del estado del diseño en el momento de realizar la iteración. Así, en un futuro, se podrá seguir con un poco más de visión de primera mano lo que se realizó y cómo se hizo.

• Iteración 01

Me explico: Como soy tan flojo y me da tanta pereza ponerme a diseñar algo que me guste y me convenza, lo que voy a hacer es empezar el blog sin diseño. Sin nada de diseño. Nada de CSS, nada de Javascript, y nada de XHTML estudiado y pensado. Voy a comenzar desde cero, como en cualquier otro diseño de los que me toca maquetar en la oficina, pero en este caso explicando en cada momento qué es lo que he hecho, y por qué. A modo de tutoriales, si queréis verlo así (aunque lo cierto es que para mi es una excusa con la que empezar el blog sin tener que comerme el coco sobre el diseño).

En esta primera iteración, lo que he hecho ha sido quitarle el CSS al tema por defecto de WordPress, el Kubrick. No he tocado nada de XHTML, no he añadido Javascript, no he traducido los textos… Y es así como voy a empezar. En la próxima iteración comenzaré modificando el XHTML, para obtener una estructura básica que me convenza semántica y estructuralmente hablando, y así iré avanzando en el diseño “en directo”.

Ni que decir tiene que aceptaré cualquier sugerencia que queráis hacerme, puesto que estoy convencido de que la gran mayoría de los que estéis interesados en seguir esta “aventura” sabéis mucho más de diseño y desarrollo web que yo mismo. También acepto consejos sobre WordPress, plataforma de la que no soy un gran conocedor.

Espero que disfrutéis leyéndome, al mismo tiempo que espero disfrutar yo escribiendo.