Asturias 2.0

Hoy es el 8 de septiembre, día de la asturianía, y como asturiano no puedo dejar de celebrar semejante evento. He visto con cierta sorpresa que en varias ventanas y balcones los particulares han puesto banderas del Principado, supongo que serán las que han reciclado después de haber ido a ver a Alonso, el nuevo asturiano de oro. Yo también voy a colaborar con nuestro orondo presidente —que ya fue ayer rodando cuesta arriba a Cuadonga— en las celebraciones de tan especial día, y para la ocasión crear una nueva bandera de Asturies, que refleje la realidad del Principado de manera más fiel y sobre todo más acorde con la visión particular de los bolsillos de nuestros maravillosos políticos. Estoy seguro de que si Areces y toda su cuadrilla de sanguijuelas, incluyendo a todos los demás políticos de nuestra bella y decadente comunidad autónoma, ven el nuevo estandarte quedarán prendados de él, y me comprometo a hacerlo libre de copyright para que lo puedan usar a destajo en todas sus intervenciones demagógicas. ¡Puxa la corrupción y el lucro personal!

6.000 km

Dos meses sin Internet y dos meses alejado del mundo informático, uno podría pensar que se echa de menos, pero no, incluso en momentos de aburrimiento extremo, el portátil era la última opción. Una vez más digo eso de que a todo se acostumbra uno, y la verdad es que sienta bien estar al margen durante un tiempo, ver otras cosas y otras culturas —próximas y a la vez lejanas— y ganar cierto grado de perspectiva.

Ahora vuelvo a la “rutina” (si se le puede llamar así) del día a día en España.

Rossini Blues

Mmmm…

¿El futuro?

Quizá…

Columnas CSS

Uno nunca se deja de asombrar de los usos impropios que se les dan a las etiquetas y entidades del (X)HTML. El caso quizá más común de todos es la mala utilización de ciertos elementos para el diseño de páginas web, conocidísimo es el uso de las tablas, los GIF transparentes y los   para componer el diseño. Ninguno de esos tres elementos son inválidos per se, pero se les está dando un uso inapropiado y que daña seriamente la accesibilidad de la página. Cualquier diseño (he dicho cualquier diseño) que se pueda componer con esos elementos (o con cualquier otro para el caso) se puede emular mediante CSS y la correcta utilización de etiquetas semánticas. ¡Oh! Ya sé que predico en el desierto de la estulticia y la ignorancia, pero hay hábitos difíciles de erradicar. Como Santo Tomás, si no lo veo no lo creo, así que pondré un ejemplo.

Digamos que en éste blog por ejemplo, quisiera poner dos fotos en una entrada, y que encima las quiero lado a lado, una a la derecha y otra a la izquierda. Las soluciones incorrectas serían por ejemplo crear una tabla con dos celdas y poner en cada una una foto, o maquetar las fotos a base de infinitos   e incluso se podrían pegar las dos fotos en una con algún software de retoque fotográfico, aunque en este caso eso no tiene sentido, porque voy a poner a Bill Gates (sí, podría ser alguien con más ideales) y al querido Robert Plant (él sí que sabe cantar) y sería un poco incongruente unir a esos dos.

La solución correcta y en CSS es extremadamente simple (y reutilizable). Lo primero es arropar cada imagen en un <div>, cada uno con una id diferente, en este caso “derecha” e “izquierda”, con lo cual nos quedaría un código parecido a esto:

<div id="post">
   <p>
   Lorem ipsum…
   </p>
   <div id="derecha">
      <img src="img/percy.jpg" alt="Robert Plant" />
      <p>
      Robert Plant
      </p>
   </div>
   <div id="izquierda">
      <img src="img/billgates.jpg" alt="Bill Gates" />
      <p>
      Bill Gates
      </p>
   </div>
   <p>
   Lorem ipsum…
   </p>
</div>

Sólo nos queda añadir el nuevo código CSS a nuestra plantilla ya existente, aunque antes hay que realizar algunos cálculos. Presupongo que la plantilla es fija, con un ancho definido en píxels, en caso de que fuera flexible o basada en porcentajes, la técnica sería diferente. El post tiene una anchura determinada de 500 píxles, por tanto podemos poner 250 píxels a cada id de la siguiente manera:

#post {
   width: 500px;
   }
#derecha {
   float: right;
   width: 250px;
   text-align: center;
   }
#izquierda {
   float: left;
   width: 250px;
   text-align: center;
   }

Las imágenes como es lógico no deben superar en anchura el tamaño del <div> que las contiene, en nuestro caso 250 píxels, y ya está, sin aplicar ningún estilo más daría un resultado parecido a esto:



Evidentemente se podría seguir trabajando en el CSS hasta conseguir algo visualmente atractivo y elegante, pero eso es otra cuestión, aquí sólo se ofrece el esqueleto funcional.