LESS, o “Leaner CSS” es una gema de Ruby que extiende el lenguaje CSS con elementos propios de otros lenguajes de programación, como variables, herencia, operaciones aritméticas, etc. Algunas de las cosas que nos permite son:

Variables
LESS te permite declarar variables y reutilizarlas dentro de tus hojas de estilo, haciendo cambios globales tan sencillos como modificar una linea.

@color_logo: #F7BD01;
 
#logo { background: @color_logo; }

Elementos anidados (herencia)
Con LESS, en vez de tener selectores largos podemos anidar un selector dentro de otro. De esta forma la herencia queda más clara y tus hojas de estilo más pequeñas.

/* less */
#cabecera {
    background:#222;
    color:#ccc;
    a {
        text-decoration:none;
        font-weight:bold;
    }
}
 
/* css */
#cabecera {
    background:#222;
    color:#ccc;
}
#cabecera a {
    text-decoration:none;
    font-weight:bold;
}

No voy a hablar mucho más de LESS en este articulo. Para ver más características os recomiendo que leais la documentación oficial, donde explican cómo extiende el lenguaje CSS y todo lo que se puede hacer con la librería.

Instalando LESS

Instalar LESS es tan sencillo como instalar cualquier otra gema de Ruby. Basta con abrir una sesión de terminal y ejecutar:

$ sudo gem install less

Integrar LESS con Nanoc

Lo primero que necesitas es un proyecto de nanoc. Si seguiste el anterior articulo ya deberías de tener un proyecto, si no es así, leetelo y empieza a usar esta maravillosa herramienta.

Vete al directorio donde tengas tu proyecto de nanoc y crea un nuevo item. Para mantener las cosas organizadas, los items que sean hojas de estilo los vamos a crear dentro del directorio css.

$ cd code/mi_sitio
$ nanoc3 create_item css/estilos
      create  content/css/estilos.yaml
      create  content/css/estilos.html

Fíjate en que no he escrito la extensión del fichero, y que nanoc ha supuesto automáticamente que quiero crear una página .html. Bueno, no hay forma de decirle que extensión queremos usar, por lo que la única solución es renombrar a posteriori el fichero. Los las hojas de estilo de LESS llevan la extensión .less

$ mv content/css/estilos.html content/css/estilos.less

Ahora tenemos que decir a nanoc como tiene que compilar nuestras hojas de estilo. Para ello tenemos que modificar el fichero Rules de la raíz de nuestro proyecto y añadir lo siguiente al principio del todo.

# Stylesheets
route '/css/*' do
  item.identifier.chop + '.css'
end
 
compile '/css/*' do
  filter :less
end

No entraré en detalles, pero el código que hemos añadido en el fichero le dice a nanoc tres cosas: donde tiene que guardar nuestras hojas de estilo, con que nombre, y qué filtro debe utilizar para ello.

Para comprobar que funciona vamos a crear una hoja de estilo con LESS muy sencilla.

* {
    margin: 0; padding: 0;
    font-family: Georgia, Palatino, Times, 'Times New Roman', sans-serif;
}
 
body {
    background: #fff;
}
 
a {
    text-decoration: none;
    :link, :visited {
        color:#f30;
    }
    :hover {
        color:#f90;
    }
}
 
#main {
    position: absolute;
    top: 40px; left: 280px;
    width: 500px;
 
    h1 {
        font-size: 40px;
        font-weight: normal;
        line-height: 40px;
        letter-spacing: -1px;
    }
    p {
        margin: 20px 0;
        font-size: 15px;
        line-height: 20px;
    }
    ul {
        margin: 20px;
    }
    li {
        list-style-type: square;
        font-size: 15px;
        line-height: 20px;
    }
}
 
#sidebar {
    position: absolute;
    top: 40px; left: 20px;
    width: 200px;
    padding: 20px 20px 0 0;
    border-right: 1px solid #ccc;
    text-align: right;
    h2 {
        text-transform: uppercase;
        font-size: 13px;
        color: #333;
        letter-spacing: 1px;
        line-height: 20px;
    }
    ul {
        list-style-type: none;
        margin: 20px 0;
    }
    li {
        font-size: 14px;
        line-height: 20px;
    }
}

Como puedes ver estamos haciendo uso de los selectores anidados de LESS para dejar la hoja de estilo más limpia.

Para comprobar que los cambios han surtido efecto vamos a arrancar el autocompilador de nanoc. Para ello ejecutamos:

$ nanoc3 aco

Si ahora abrimos un navegador y pedimos la URL http://localhost:3000/css/estilos.css, deberíamos de ver la hoja de estilos procesada con LESS:

* {
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, Times, 'Times New Roman', sans-serif;
}
body { background: #ffffff; }
a { text-decoration: none; }
a:link { color: #ff3300; }
a:visited { color: #ff3300; }
a:hover { color: #ff9900; }
...

Utilizar la nueva hoja de estilo ya procesada es tan fácil como añadir un <link /> a tu fichero de layout. Para ello modificamos el fichero “layouts/default.html”, buscamos la siguiente linea:

<link rel="stylesheet" type="text/css" href="/style.css" media="screen">

y la cambiamos por esta otra:

<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen">

Nanoc es un generador de páginas estáticas escrito en Ruby. Nanoc crea ficheros HTML a partir de plantillas escritas en ERB, HAML u otros lenguajes.

No necesitas nada especial en el servidor para usar nanoc, ya que las plantillas se procesan en tu ordenador. Basta con subir los ficheros estáticos generados a un servidor web y el sitio ya estará accesible.

Creando un sitio

Lo primero que tenemos que hacer es instalar nanoc y otras gemas que vamos a necesitar.

$ sudo gem install nanoc3 rack mime-types

Una vez instalado todo el siguiente paso es crear nuestro primer sitio web.

$ nanoc3 create_site mi_sitio

Esto nos genera la siguiente salida:

      create  config.yaml
      create  Rakefile
      create  Rules
      create  content/index.yaml
      create  content/index.html
      create  layouts/default.yaml
      create  layouts/default.html
Created a blank nanoc site at 'mi_sitio'. Enjoy!

El comando anterior crea un nuevo proyecto de nanoc en la carpeta ‘mi_primer_sitio’, pero aún no hay ningún fichero que podamos abrir con un navegador web. Para ello debemos indicar a nanoc que compile nuestro proyecto en un sitio estático.

$ nanoc3 compile
Loading site data...
Compiling site...
      create  [0.01s]  output/index.html

Site compiled in 0.01s.

Si echamos un vistazo al directorio output vemos que se ha creado un nuevo fichero llamado index.html. El contenido de este fichero se genera a partir de un contenedor o fichero de layout y un fichero de plantilla.

Los ficheros que genera nanoc no están pensados para abrirse directamente con el navegador, sino para ser servidos mediante un servidor web. Esto es importante, ya que nanoc por defecto utiliza rutas absolutas para los recursos (imágenes, hojas de estilo, etc…). Si abrimos el fichero directamente con el navegador seguramente veamos el contenido sin estilos aplicados.

Si a esto añadimos que con cada cambio que hagamos debemos recompilar el sitio, el proceso de desarrollo se hace muy tedioso. Para ello nanoc nos permite arrancar un servidor web local que compila automáticamente el sitio cada vez que accedemos a él. Para arrancarlo basta con escribir en el terminal.

mi_sitio$ nanoc3 aco

Con esto abrimos un servidor web en el puerto 3000 de nuestra maquina en el que podremos ver el sitio web compilado. No es necesario compilar manualmente ya que nanoc lo hará por nosotros cada vez que accedamos a este servidor.

Podemos entrar con nuestro navegador favorito en http://localhost:3000/ y veremos el sitio web compilado:

Editando plantillas

Las diferentes plantillas para generar nuestro sitio web estático se almacenan en el directorio content. Si entramos en él, veremos que tiene una estructura similar a esta:

mi_sitio/content$ ls -l
total 16
-rw-r--r--  1 alex  _www  981  4 ene 01:21 index.html
-rw-r--r--  1 alex  _www   17  4 ene 01:21 index.yaml

index.html es el fichero que contiene el contenido de la plantilla, e index.yaml es donde se almacenan los metadatos de la misma.

Vamos a modificar el título de la página. Para ello modificamos el fichero index.html y cambiamos el contenido del tag <h1> por lo siguiente:

<h1>Mi primer sitio con nanoc</h1>

Ahora abrimos el fichero index.yaml y dejamos su contenido como sigue:

--- 
title: Mi primer sitio con nanoc

Accedemos de nuevo a http://localhost:3000/ para comprobar que ha modificado el sitio con nuestros cambios.

Creando una nueva página

Crear una nueva página en nanoc es muy simple:

$ nanoc3 create_item nombre_pagina

Por ejemplo, vamos a crear una página en la que metamos información acerca de nosotros mismos

mi_sitio$ nanoc3 create_item acerca_de
      create  content/acerca_de.yaml
      create  content/acerca_de.html
An item has been created at /acerca_de/.

Si ahora apuntamos nuestro navegador a http://localhost:3000/acerca_de/ veremos que se ha creado una nueva página en blanco. Si modificamos el fichero content/acerca_de.html se actualizará el contenido de la página que acabamos de crear.

Entendiendo el layout

Los layouts (podemos tener varios) se almacenan en el directorio layouts. Si echamos un vistazo al directorio tendremos una estructura similar a esta.

mi_sitio/layouts$ ls -l
total 16
-rw-r--r--  1 alex  _www  875  4 ene 23:51 default.html
-rw-r--r--  1 alex  _www    8  4 ene 23:51 default.yaml

Esta estructura nos resultará familiar del contenido del directorio content.

Por defecto el fichero default.yaml viene vacío, así que de momento vamos a centrarnos en el contenido de default.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>A Brand New nanoc Site - <%= @item[:title] %></title>
    <link rel="stylesheet" type="text/css" href="/style.css" media="screen">
  </head>
  <body>
    <div id="main">
<%= yield %>
    </div>
    <div id="sidebar">
      <h2>Documentation</h2>
      <ul>
        <li><a href="http://nanoc.stoneship.org/tutorial/">Tutorial</a></li>
        <li><a href="http://nanoc.stoneship.org/manual/">Manual</a></li>
      </ul>
      <h2>Community</h2>
      <ul>
        <li><a href="http://groups.google.com/group/nanoc/">Discussion Group</a></li>
        <li><a href="http://groups.google.com/group/nanoc-es/">Spanish Discussion Group</a></li>
        <li><a href="http://projects.stoneship.org/trac/nanoc/">Wiki</a></li>
      </ul>
    </div>
  </body>
</html>

Como podemos ver se trata de un fichero HTML normal y corriente, salvo por dos detalles. El primero lo encontramos en el http://antarticonorte.com/blog/2010/01/04/como-usar-markdown-en-rails/ http://antarticonorte.com/blog/2010/01/04/como-usar-markdown-en-rails/#comments Mon, 04 Jan 2010 08:30:50 +0000 Al-x http://antarticonorte.com/blog/?p=170 Me encanta markdown. Tiene una sintaxis fácil de aprender y convive muy bien con texto existente en HTML. Es un buen lenguaje para foros o blogs, ya que permite dar formato de forma sencilla sin necesidad de saber HTML.

Recientemente quería usar markdown para un proyecto que estoy haciendo con Rails. El framework ofrece un método para trabajar directamente con markdown, pero es necesario tener instalada una librería externa a Rails. En mi caso opté por BlueCloth.

Para usar bluecloth basta con instalar la gema

$ sudo gem install bluecloth

NOTA: en algunas guías he visto el comando sudo gem install BlueCloth en vez de bluecloth. RubyGems es sensible a mayúsculas y minúsculas y al usar BlueCloth se instala una versión antigua de la gema.

Haciendo que Rails reconozca bluecloth

Para que Rails permita usar el método markdown debemos indicarle que queremos usar bluecloth. Para ello modificamos el fichero config/environment.rb

Rails::Initializer.run do |config|
  ...
  config.gem "bluecloth"
  ...
end

Reiniciamos el servidor de desarrollo para que reconozca nuestros cambios y voila! Usar markdown en nuestras vistas es tan simple como llamar al helper markdown

<!-- cosas... -->
<%= markdown variable %>
<!-- otras cosas... -->

Ayer sábado fue la Marcha zombie Madrid. Es una marcha en honor al nacimiento de George A. Romero, considerado el padre del arquetipo zombie.

Por motivos que no recuerdo, no pude asistir a las ediciones pasadas, pero este año allí estuve, rodeado de no-muertos, de otros fotógrafos y de híbridos de ambas cosas.

El set completo podeis verlo en mi flickr ]]> http://antarticonorte.com/blog/2009/02/09/de-marcha-con-los-zombies/feed/ 0 http://antarticonorte.com/blog/2009/01/27/pongame/ http://antarticonorte.com/blog/2009/01/27/pongame/#comments Tue, 27 Jan 2009 14:18:02 +0000 Al-x http://antarticonorte.com/?p=122

…uno de esos sanguixes de beicon por favor.

Capturado en una cafetería de Campo de los cojones naciones

Ahí van mis cinco:

1. Textmate: EL editor de código. Con soporte para un porrón de lenguajes y con la posiblidad de crear los tuyos propios. El día que le pongan autocompletado de código de verdad se convertirá en el editor perfecto.
2. Quicksilver: Algo así como una navaja suiza. Su principal funcion es la de lanzador de aplicaciones, pero es capaz de mucho más.
3. Adium: El sustituto perfecto para el messenger de microsoft (al que detesto con avaricia). Puede usarse con más redes de mensajería.
4. Vienna: Un lector de feeds de escritorio libre y gratuito.
5. Cyberduck: Un cliente de FTP, libre y gratuito también. Se integra bastante bien con textmate para editar los ficheros directamente en el servidor.

Tiro la piedra al aire a ver donde cae. El que quiera poner una lista de cinco programas que use en su sistema operativo de elección, que lo haga.

¿Por qué debo yo usar fuentes relativos?

Simple: por usabilidad.

Como diseñadores, tenemos que dar al usuario la posibilidad de usar el tamaño de fuente que ellos quieran. Usando un tamaño de fuente absoluto estamos quitando esta opción a los usuarios, a muchos usuarios (los que usan ese gran amigo de los diseñadores y desarrolladores web).

Cojamos una web cualquiera al azar, como por ejemplo elpais.com.

Ahora ir al menú Ver > Tamaño de fuente > La más grande.

Y podemos ver como el texto no cambia, tiene el mismo tamaño:

Cómo usar fuentes relativas

Para poder usar tamaños relativos de fuente, debemos partir de la base de que casi todos los navegadores tienen un tamaño estándar de 16px. Sabiendo esto sólo tenemos que hacer algo de matemáticas y usar em como unidad para las fuentes.

Por definición, 1em equivale al tamaño de fuente que estemos utilizando (en nuestro caso 16px). Así 2em equivalen a 32px y 0.5em a 8px.

Si queremos que el tamaño de todos los &ld;p /> de nuestra página tengan un tamaño de fuente de 12px, tendremos que usar el siguiente CSS

p { font-size:.75em; }

Calcular el tamaño de todos los elementos puede ser una tarea tediosa (y odiosa). Podemos simplificarlo cambiando el tamaño de fuente del documento a 10px de forma que las conversiones sean más directas (1em = 10px, 1.2em = 12px, …)

html { font-size:62.5%; } /* 10/16 = 0.625. Usamos porcentajes por que hay navegadores que discriminan el tercer decimal */
p { font-size:1.2em; }

Mas allá: unidades relativas para las medidas

Podemos hacer que el layout de la página se adapte al tamaño de fuente del usuario usando unidades relativas para los anchos. Como hemos establecido un tamaño base de 10px la conversión es directa.

Supongamos el siguiente layout:

<div class="container">
	<div class="col1"><h2>lorem ipsum dolor sit amet</h2></div>
	<div class="col2"><h2>consequecter adipliscing elit</h2></div>
	<div style="clear:both;"></div>
</div>

.container { width:300px; margin:0 auto; }
.col1 { float:left; width: 100px; }
.col2 { float:right; width:200px; }
h2 { font-size:2em; }

Si aumentamos el tamaño de la fuente con el navegador, llegará un momento en el que el texto no entre en las columnas y se solapen. Sin embargo, si utilizamos el siguiente CSS

.container {width:30em;}
.col1 {width:10em;}
.col2 {width:20em;}

Al aumentar el tamaño de la fuente, aumentará de forma proporcional el ancho de las columnas, por lo que nunca se llegará a solapar el texto de una sobre el de otra.

¡Donde puedo ir! ¡Incertidumbre!

Pero además de fornicadores en potencia hay un cielo estrellado precioso, apenas contaminado por la luz de la capital, donde se puede experimentar con fotografía nocturna.

Para este tipo de tomas es mejor subir acompañado (para no aburrirse, por eso de no poder tocar la cámara en 20-30 minutos..) y a ser posible con más de una cámara. Mientras dejas una de ellas haciendo una foto de esas largas puedes hacer el tonto con la otra.