Table of Contents

¿Qué es HAML?

HAML (HTML Abstraction Markup Language) es un lenguaje de marcado ligero con el que podemos crear plantillas HTML a partir de un sencillo lenguaje de dominio específico.

Está diseñado para ser un lenguaje de marcado tan elegante como sea posible. Busca hacer plantillas más sencillas y deshacerse de los lenguajes “feos” o difíciles de entender. Haml eliminina la necesidad de escribir código HTML específico dentro de la plantilla


Principios de HAML

El marcado debería ser bonito

El marcado no debería usarse solamente como una herramienta para lograr que los navegadores muestren una página como el autor lo desee. El marcado se debe entender, debería ser amigable y placentero como el renderizado.


El marcado no debería repetirse

HTML implica grandes repeticiones. La mayoría de los elementos deben ser nombrados dos veces: una vez antes de su contenido y otra después.

ERB agrega aun más repetición y caracteres innecesarios. Haml evita todo esto recurriendo al sangrado en vez del texto para determinar dónde empiezan y terminan los elementos y los bloques de código. Esto no soloda como resultado plantillas más compactas sino que además hace el código mucho más limpio a la vista.



El marcado debería tener un buen sangrado

Uno de los mayores problemas de los lenguajes de plantillas tradicionales es que no solo no fomentan el código bien sangrado sino que encima lo hacen difícil o incluso imposible de escribir. El resultado es un XHTML confuso e ilegible. Haml formatea las etiquetas de manera que todas estén bien sangradas y reflejen la estructura subyacente del documento.


La estructura de HTML debería ser clara

XML y XHTML son formatos fundados sobre la idea de un documento estructurado. Tal estructura se refleja en su marcado, y asimismo debería reflejarse en metamarcado como Haml. Debido a que la lógica de Haml se basa en el sangrado de elementos hijos, esta estructura se preserva naturalmente, lo que hace al documento mucho más fácil y lógico de leer por simples humanos.




No sólo Ruby...

La implementación oficial de HAML está hecha para trabajar con Ruby, con extensiones para Ruby on Rails y Merb, pero también es bastante útil para el desarrollo web en general. A continuación expongo un ejemplo de HAML - HTML


Ejemplo HAML - HTML


HAML con Ruby

La implementación original de HAML está diseñada para trabajar con código ruby embebido.
Usando HAML se logran plantillas con ruby embebido escuetas, bonitas y sobre todo legibles al tiempo que mantiene la flexibilidad de las plantillas ERB tradicionales.

ERB

ERB (Embedded Ruby) es el lenguaje que utiliza Ruby por defecto como plantillas para generar archivos HTML con código Ruby embebido. La filosofía que usa es escribir en HTML y para especificar código Ruby utiliza <% %> y <%= %> como se suele hacer para embeber código ASP.


Ejemplo de ERB

<div id="perfil">
<div id="fecha"><%=print_fecha%></div>
<div id="direccion"><%=current_user.direccion%></div>
</div>
<div id="segundos_datos">
<div id="correo"><%=current_user.correo%></div>
<div id="telefono"><%=current_user.telefono%></div>
</div>


HAML como alternativa a ERB

ERB son las plantillas que casi todo programador en Ruby conoce, pero para usarlas es necesario implementar código HTML específico, teniendo que estar pediente del cierre correcto de tags, etc... Con ERB los códigos embebidos son más difíciles de entender por más ordenados que seamos.
Con HAML generar tags es mucho más sencillo ya que no hay que estar pendientes de cerrarlos, se cierran automáticamente por la identación del código. HAML usa un código más limpio y ordenado en el que sin duda escribiremos mucho menos.
"la perfección se alcanza no cuando ya no queda nada más por agregar, sino cuando ya no queda nada más por eliminar"

Ejemplo de ERB


Ejemplo de HAML





Usando HAML

Instalar HAML

gem instal haml (en Windows hay que utilizar el Ruby's Windows Installer y escribir el mismo comando en la consola)

Nomenclatura

Nombre.html.haml

Definicion de un elemento

tagname{:attr1 => 'value1', :attr2 => 'value2'} Content

Ejemplo:

%font{:face=>"Arial", :size=>16}

Agregando ID(#)

%tagname#id

Agregando Clase (.)

%tagname.clase

Ejemplo:

%strong.code#message calendario --> <strong class = 'code' id = 'message'>Calendario</strong>

Utilizando los DIV

Los DIV no se declaran en HAML. En su lugar se usan los nombres de las clases (.) o el nombre del ID (#).

Identación

La identación se realiza con los propios elementos.

Embebiendo Ruby

Para Mostrar código Ruby utilizamos el símbolo =
Para no mostrar el código Ruby utilizamos el símbolo -

Ejemplo:

%h1 = @perro.nombre
- if @perro.agresividad > 5
%p Es muy agresivo

Compilación

De la siguiente manera se convierte un fichero HAML en uno HTML
haml fichero.html.haml fichero.html


SASS

SASS (http://sass-lang.com/) es una extensión de CSS3  por la cual se consigue imprimir elegancia y limpieza en tu hoja de estilo.
Con SASS se puede simplificar enormemente la creación de hojas de estilo, con una sintaxis más minimalista y permitiendo el uso de variables. Nos podemos olvidar de los punto y coma de las llaves.