Usando LESS con Nanoc
En el articulo anterior vimos como crear un sitio web básico con nanoc. Ahora vamos a ver como podemos gestionar nuestras hojas de estilo en un proyecto de nanoc utilizando LESS.
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.
Empezando con nanoc
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.
Cómo usar markdown en Rails
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.
Fuentes relativas en CSS
En algún momento de nuestra carrera profesional, todos nosotros hemos oído o leido que debemos usar tamaños de fuentes relativos (si no es el caso, te lo digo yo: debes usar tamaños de fuentes relativos).
¿Por qué debo yo usar fuentes relativos?
Simple: por usabilidad.
El viajero
Ha costado un poquito de sudor y unas gotas de sangre, pero por fin hemos sacado el rediseño de el viajero de elpais.com.
“Un gran lugar donde los viajeros puedan dejar sus opiniones y hacer efectivas sus ideas”. Así definió ayer Jesús del Río, director general de contenidos de Prisacom, el nuevo portal de viajes del Grupo PRISA (empresa editora de EL PAÍS), www.elpais.com/elviajero. En él, los internautas podrán encontrar información de destinos, guías, recomendaciones y fotos de lectores, blogs, consejos de expertos y una selección de hoteles y restaurantes.
Podéis leer la noticia completa en El País.
Si algo se ve mal echarme la culpa, con confianza 
PNGs transparentes en nuestros CSS para Internet Explorer
Que levanten la mano todos los que han querido meter una caja en su web con un fondo translucido y no han podido por culpa de Internet Explorer.
Hasta su versión 7, Internet Explorer no soporta el uso de PNGs transparentes de modo nativo. Sin embargo es posible usar un PNG transparente en nuestras hojas de estilos usando un filtro propietario. Nos interesa que dicho filtro solo lo interprete Internet Explorer 6 e inferiores, por lo que tendremos que utilizar comentarios condicionales o algún otro método para filtrar CSS. (Yo personalmente uso el Tan hack)
.capa-con-png {
background:url('../img/transparente.png');
}
* html .capa-con-png {
background-image: none; /* Sin esto no veríamos la imagen cargada con el filtro */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/transparente.png', sizingMethod='scale');
}
A tener en cuenta
Es más que posible que en nuestro sitio la estructura de carpetas sea similar a la de la imagen, y que en nuestra hoja de estilos estemos poniendo las rutas relativas como en el ejemplo de arriba. Es importante saber que en el filtro las rutas no se tienen en cuenta desde el CSS, sino desde la página en la que estemos. Para ahorrarnos problemas es mejor usar rutas absolutas (siempre que tengamos posibilidad).
Las imagenes cargadas con el filtro no aceptan las propiedades background-position y background-repeat. Siempre se posicionarán en la esquina superior izquierda y se repetirán una única vez.
Dentro del filtro, la propiedad sizingMethod acepta dos valores:
- image: pondrá la imagen a su tamaño. Si tenemos un PNG de 1×1 pixels, lo mostrará a 1×1.
- scale: redimesiona la imagen al tamaño de la caja en la que estamos aplicando el filtro. Si tenemos un png de 100×100 pixels puesto en una caja que mide 200×400 px, lo reescalará hasta ocupar toda la página
Estructurando nuestra web con HTML5
Este artículo está basado en el borrador público del estándar HTML5. La información aquí escrita podría no ser válida cuando se apruebe el estandar definitivo.
HTML5 va a suponer un paso importante hacia la web semántica. Las nuevas etiquetas para el marcado permiten describir mejor el contenido de nuestros documentos, lo que mejorará el tratamiento que dan a la información los navegadores y los motores de búsqueda.
Secciones, encabezados y pies
Hasta ahora para definir las distintas partes de un documento era necesario el uso de <div>s con el atributo class para organizar el contenido. Aunque el uso de clases es útil para nosotros como desarrolladores, los UAs poco pueden hacer para interpretar el significado semántico de las mismas. Si nosotros escribimos <div class="header"> o <div class="cabecera"> sabemos que se corresponde a la cabecera de un bloque, pero un navegador o un motor de búsqueda no sabría diferenciar ese bloque de cualquier otro.
Con las nuevas etiquetas <section>, <header> y <footer> podremos definir con exactitud la función que desempeña cada bloque de nuestro documento.
Extensiones en el DOM de HTML5
Una de las cosas que mas me gustan del nuevo HTML5 son las extensiones de los objetos HTMLDocument y HTMLElement. Si bien son cosas que podemos hacer actualmente con librerías como prototype o jQuery, no viene mal que se puedan realizar de manera nativa.
HTMLDocument
El nuevo HTML5 define el metodo getElementsByClassName() para seleccionar elementos a través de su clase.
innerHTML pasa a ser estandar, y a nivel de documento (antes solo estaba implementado en HTMLElement). De esta forma podemos serializar todo el documento.
activeElement devuelve el elemento que tiene foco actualmente. Si ningún elemento tiene foco devuelve el body de la página.
hasFocus determina si el documento tiene foco.
getSelection() devuelve un objeto que representa la selección o selecciones actuales del documento. Si por ejemplo el usuario selecciona el siguiente bloque de texto en su navegador 
document.getSelection().toString() devolverá "est qui dolorem ipsum quia dolor sit amet"
HTMLElement
Tambien implementa getElementsByClassName(). Combinado con getElementById() podemos restringir el ámbito de la búsqueda. Así podremos escribir sentencias como:
var articulos = document.getElementById('contenido').getElementsByClassName('articulo');
Al igual que en HTMLDocument, innerHTML pasa a ser estandar.
classList devuelve un objeto con el que poder manipular las clases de un elemento. Esto es muy útil cuando tenemos un elemento con más de una clase.
clases = document.getElementById('contenido').classList;
clases.has('clase'); // Vemos si el elemento tiene una clase determinada
clases.add('clase'); // Añade una clase al elemento
clases.del('clase'); // Elimina una clase del elemento
clases.toggle('clase'); // Si el elemento tiene la clase, la elimina. Si no la tiene la añade
Para los elementos a, area y link se añade un objeto llamado relList con los mismos métodos para manejar el atributo rel
Lo malo: que las podremos usar cuando Microsoft las implemente en Internet Explorer 17 o así.
