En el mundo de la lucha la competitividad es brutal. No es para nada extraño escuchar comentarios del tipo: Cualquier karateka le parte la boca a ese de Taekwondo, ¿Aikido? Eso es para maricones, etc. Miles de egos hinchados luchan, además de contra sus propios compañeros, contra los “rivales” de otras escuelas/tradiciones. Y esto ha sido así desde el principio. ¿Cuantas historias de samurais se conocen sobre viajes de dôjô en dôjô en busca de un “rival a la altura”?

¿Pero qué clase de mentalidad es esa en la que lo más importante no es evitar la confrontación, sino buscarla desesperadamente? Pues precisamente la mentalidad humana. Aquella en la que nos creemos superiores, por encima de todo y de todos, mejores que cualquiera aún a riesgo de nuestra propia seguridad.

La mayor parte de la gente entiende las artes marciales como un tipo de “deporte” en el que se lucha, pero se olvidan de que el origen de todas y cada una de estas formas de arte marcial vienen de un mismo origen, un origen guerrero. Un origen de vida o muerte. Se olvidan de que la principal enseñanza debe ser no luchar si puedes evitarlo en lugar del yo te zurro la badana porque soy mejor que tú.

Ingredientes

• Una pechuga de pollo hermosa
• Aceite de girasol
• Curry
• Pimienta molida
• Romero
• Tomillo
• Orégano
• Sal
• Un par de ajos

Preparación

Esta receta es extremadamente sencilla, y aunque también se puede comer por si sola, es un excelente recurso para usar en otros platos, como por ejemplo la ensalada de pasta con pollo, sustituyendo el pollo asado por este pollo confitado.

Para hacerla tan sólo tenemos que embadurnar nuestra pechuga con todas las especias listadas en los ingredientes, es importante no quedarse corto, hay que ser generosos. Una vez hecho se mete en un cazo y se cubre con el aceite de girasol, se meten los dos ajos aplastados con cáscara y todo, y lo más importante, se deja durante unos 40 minutos a fuego muy muy muy bajo (por ejemplo en una vitrocerámica con 10 valores de potencia, lo ponemos en el 3).

PD.- Esta receta forma parte del Recetarium de Colores Efímeros.

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.

Sin ir más lejos, hace un par de días mientras esperaba en la Plaza del Museo al compañero con el que subo a la oficina todas las mañanas, un hombre tiraba al suelo el envoltorio de su paquete de tabaco, y pocos minutos después la colilla del cigarro que se había fumado. Eso de por si ya es de poca educación, pero lo peor de todo es que a dos metros de él había una papelera. Y a cinco metros estaba una barrendera del Ayuntamiento ejerciendo su labor.

¿Por qué ocurre esto? ¿Es por el individualismo reinante en estos días? No lo creo. Yo soy una persona muy individualista, y me importa un carajo lo que le pase a cualquier persona a mi alrededor con la que yo no tenga relación. Pero eso no es una excusa para ser un maleducado. Siempre procuraré no molestar a nadie, no tirar mierda al suelo, no alzaré la voz en lugares en los que se requiere silencio, no escucharé música en lugares públicos sin auriculares. Siempre saldrán de mi boca las palabras “por favor” y “gracias”, y a ser posible más de una vez en la misma conversación.

Creo que es algo cultural, y por desgracia los españoles solemos salir perdiendo en estos aspectos. Un ejemplo, de nuevo en la Plaza del Museo. Se me acercó una persona con rasgos asiáticos y un taco de folletos en la mano. Lo primero que hizo fue darme los buenos días, y luego me preguntó que si hablaba inglés. Una vez que le dije que sí, se presentó (e incluso me escribió su nombre para que lo entendiera) y me explicó lo mejor que pudo de qué trataba el folleto que estaba repartiendo, (una charla del fundador de la Peace Cup que se celebró hace unos días en Sevilla). Me preguntó si quería el folleto, le dije que sí, y se marchó no sin antes preguntarme si tenía alguna duda al respecto de lo que me había explicado.

Por el contrario, siempre que una persona española me ha dado un folleto lo ha hecho sin dirigirme la palabra, notándose desde lejos que lo único que quiere es soltar cuanto antes todo ese taco de papeles y largarse a su casa.

Me preocupa mucho la mala educación de la gente. Pero me preocupa aún más ser consciente de que no tiene solución.

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.

Ingredientes

• 250 gramos de garbanzos cocidos
• Un limón
• Uno o dos ajos
• Aceite de oliva
• Comino molido (también sirve un poco de curry suave)
• Pimentón
• Sal

Preparación

En un vaso de batidora se trituran los garbanzos cocidos junto con la sal, el zumo de medio limón (o menos, si te no gusta demasiado), un poco de comino al gusto (o curry), el ajo entero pelado, y un poco de aceite.

La cantidad de aceite dependerá de los garbanzos, pero se debe añadir a ojo. Lo suficiente para conseguir que los ingredientes liguen al pasar la batidora. La pasta resultante debe ser fina, pero sin llegar a ser líquida ni mucho menos.

Una vez conseguida la pasta, se sirve extendida en un plato, se espolvorea con pimentón picante, y se le echa un chorro de buen aceite de oliva por encima. Se come acompañado por pan de pita, usándolo a modo de cuchara.

Puedes leer más información sobre el hummus en la Wikipedia.

PD.- Esta receta forma parte del Recetarium de Colores Efímeros.

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

Recuerdo la primera vez que lo escuché. Fue una noche en casa, después de haber ido a un concierto de Rufus Wainwright en Sevilla con mi pareja (por aquel entonces no lo era). Llegamos a casa, y me dijo que tenía que oír un par de canciones. Las susodichas fueron My Lady Story y Hope There’s Someone. Me quedé de piedra al escucharlas, fue algo indescriptible. Aquel hombre estaba llorando para mi, estaba rompiendo su alma directamente en mis oídos. Al día siguiente devoré su obra.

No puedo más que recomendarlo para vosotros. Pedir que le escuchéis, que le disfrutéis, incluso que le améis, independientemente de su vida, de sus extravagancias, de su locura. Merece la pena.