Colores Efímeros

Iteración 01: El theme y el XHTML

Escrito el 22 de Julio de 2009

Y aquí está la primera iteración sobre el diseño de este blog. Es una iteración bastante sencilla a nivel global, puesto que la única modificación real es la modificación del XHTML para obtener algo más acorde a mis consideraciones personales. Pero a nivel interno es la primera piedra de lo que será la construcción visual de este sitio.

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

• Categorías Iteraciones, Web
• 2 comentarios