Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby

Introducción a Haml y Sinatra

by
Read Time:15 minsLanguages:

Spanish (Español) translation by Manuel (you can also view the original English article)

Dos veces al mes, revisamos algunas de las publicaciones favoritas de nuestros lectores a lo largo de la historia de Nettuts+. Este tutorial se publicó por primera vez en octubre de 2010.

Este tutorial presentará Haml y Sinatra. Haml es un lenguaje de marcado que produce un HTML limpio y bien estructurado. Sinatra es un sencillo pero potente framework de Ruby para crear sitios o servicios web. Ambos funcionan muy bien juntos y proporcionan una potente herramienta para el desarrollo web rápido y sencillo. Me parecen ideales para la creación de prototipos.

Al final de este tutorial, habrás creado un sitio web con dos páginas utilizando Sinatra y Haml. En el camino, aprenderás cómo se estructuran las aplicaciones de Sinatra, y serás introducido a Haml. También aprenderás a utilizar un archivo de diseño para reducir la cantidad de código duplicado y dar consistencia entre las páginas.


Paso 1: Instalar Ruby y las Gemas

Puedes saltarte esta sección si ya tienes Ruby instalado y funcionando en tu sistema.

Necesitamos instalar el lenguaje Ruby y las gemas Sinatra y Haml para empezar.

El método para hacer esto variará dependiendo de tu sistema operativo. Me gusta usar el Ruby Version Manager (RVM) para gestionar Ruby en OS X y Linux. (Los usuarios de Windows podrían querer mirar Pik como una alternativa a RVM).

Instalar RVM para gestionar nuestro entorno Ruby

Para aquellos que no tengan Ruby instalado, descarguen e instalen RVM.

Siguiendo las instrucciones de la página de instalación del RVM, abre un terminal e introduce lo siguiente:

Esto descargará e instalará RVM. Necesitamos añadir una línea al final de nuestro archivo .bashrc. Aquellos que utilicen una alternativa para cubrir a Bash tendrán que modificar el perfil apropiado. Vea la página de instalación de RVM para más detalles.

¿Quiere saber más sobre cómo trabajar con RVM?

Cierra y vuelve a abrir tu armazón y ya deberías estar listo.

Instalar dependencias y el lenguaje Ruby

Escribe 'rvm notes' para comprobar las dependencias que puedas necesitar instalar para tu sistema operativo. Hay varias versiones de Ruby que RVM puede manejar. Utilizaremos la versión estándar llamada MRI. Por lo tanto, en la salida de las rvm notes busca la sección que dice, 'For MRI and REE...'. Luego copia y pega el comando indicado para 'ruby'.

Por ejemplo, en una instalación fresca de Ubuntu, obtuve la siguiente salida y necesité instalar las dependencias listadas usando el comando aptitude dado en la salida. Ve la captura de pantalla de abajo.

Una vez terminada la parte complicada, instalar y utilizar diferentes versiones de Ruby y gemas es ahora fácil. Instala la versión 1.9.2 de Ruby introduciendo lo siguiente:

RVM debería ahora descargar e instalar la versión 1.9.2 de Ruby.

La última etapa consiste en instalar las gemas Sinatra y Haml. Tipo:

Deberías ver la siguiente salida en el terminal:

Ahora escribe gem install haml para instalar la gema Haml en tu sistema de la misma manera.


Paso 2: Crear la aplicación Sinatra

¿Eres nuevo en Sinatra? Haz nuestro curso gratuito.

Para empezar a hacer la aplicación Sinatra, crea una carpeta que contenga un archivo Ruby para el código de la aplicación. En tu terminal, escribe:

Abre el archivo 'website.rb' recién creado en tu editor de texto e introduce lo siguiente:

Esta es una aplicación básica de Sinatra. Las dos primeras líneas traen las bibliotecas 'rubygems' y 'sinatra' para hacer el trabajo pesado.

La siguiente sección le dice a Sinatra cómo responder a una petición "get". En concreto, le dice qué hacer cuando se solicita la url raíz (la ruta '/'). En este ejemplo, Sinatra sólo devuelve la cadena "Esto es Sinatra". Esto es lo que aparecerá en el navegador cuando se solicite la url raíz de la aplicación.

Para verlo en acción, vuelve a tu terminal y ejecuta la aplicación Sinatra con el siguiente comando:

Tendrás que reiniciar este archivo website.rb cada vez que lo cambies. Por lo tanto, es una buena idea mantener un armazón separado que se ejecuta en su propia ventana o pestaña para iniciar y detenerlo.

Deberías recibir la respuesta:

Esto nos dice que un servidor web (llamado WEBrick) se ha iniciado y está sirviendo tu aplicación en el puerto 4567.

Para verlo, abre tu navegador y ve a "localhost:4567". Deberías ver la salida de la aplicación:

¡Felicidades! Tu aplicación Sinatra está en funcionamiento.

Empecemos a ver la construcción de páginas con Haml y algunas convenciones por defecto de Sinatra para archivos especiales.


Paso 3: Presentación de Haml

Vamos a construir nuestras páginas con Haml. El primer paso es decirle a nuestra aplicación que vamos a utilizar la gema Haml.

Lo hacemos añadiendo el include 'Haml' hacia la parte superior de tu código. Cambia tu archivo 'website.rb' para que sea como el siguiente:

Tu aplicación sabrá ahora utilizar la gema Haml que hemos instalado anteriormente.

El lenguaje de marcado Haml

Haml es una forma sencilla y limpia de describir HTML. También puede manejar código en línea, como PHP, ASP y Ruby script.

Uno de los objetivos de Haml es reducir la cantidad de duplicidades y repeticiones que se encuentran al crear páginas web con HTML; un ejemplo de ello son las etiquetas de cierre. Para ello, se basa en la estructura de las sangrías del código: Al escribir en Haml, es importante ser coherente con las sangrías, ya que describen la estructura de la página.

El resultado es un marcado lógico y mucho más fácil de leer que el HTML, salvo en los casos más triviales.

Veamos algunas marcas Haml y mostremos el HTML que produce.

El signo '!!!' al principio del código indica a Haml que debe emitir la etiqueta DOCTYPE. Las etiquetas HTML se describen con el signo '%'. Así, %html produce la etiqueta <html>, %head crea la etiqueta <head>, %p crea la etiqueta <p> y así sucesivamente.

Las sangrías indican a Haml qué etiquetas están dentro de otras. Así, la etiqueta de encabezamiento <h1> producida por la marca '%h1' está dentro de la etiqueta <body> creada por la marca '%body'. La siguiente etiqueta de párrafo marcada por la etiqueta '%p' también está dentro de la etiqueta body. Siguiendo las sangrías, podemos ver que el texto se encuentra dentro del párrafo.

Por lo tanto, el marcado anterior da la siguiente salida HTML:

Puedes ver que las etiquetas de cierre corresponden a la sangría en el marcado original de Haml.

Añadir plantillas Haml a la aplicación Sinatra

Con esta rápida introducción a Haml fuera del camino, podemos empezar a utilizarlo en nuestra aplicación. Por defecto, Sinatra buscará las plantillas de las páginas web en una carpeta llamada 'views'. Vamos a añadir esa carpeta ahora.

Abre una terminal, navega a la carpeta sinatra_app que hicimos antes e introduce lo siguiente:

Ahora estamos dentro de la carpeta views, vamos a crear una página 'index.haml'.

Abre 'index.haml' en tu editor de texto y rellena lo siguiente:

El siguiente paso es decirle a Sinatra que utilice este archivo para la página de inicio. Abre el archivo 'website.rb' y cambia el código en el bloque get '/' para que el archivo diga ahora:

Esto indica a la aplicación que envíe la salida del archivo Haml, llamado index.haml (buscado automáticamente en la carpeta 'views'), cuando se solicite la dirección raíz.

De vuelta en el terminal que ejecuta el servidor web, escribe 'Ctrl-C' para detener el servidor web y luego llámalo de nuevo usando el comando ruby para reiniciarlo:

Actualiza tu navegador y deberías ver la página web resultante.

La visualización de la fuente de esta página web muestra el HTML generado por Haml:

Muy bien. Ahora tenemos nuestro sitio web funcionando usando las plantillas Haml en el directorio 'views'.

Ahora vamos a trabajar la página de inicio en algo que sigue una estructura típica con una cabecera, un pie de página, un área de contenido y una barra lateral. También añadiremos algo de CSS básico para posicionar y dar estilo a la página. Al hacer esto, veremos cómo expresar las etiquetas <div> en Haml y cómo llevar el enlace a los archivos CSS.

Crear la página de inicio

Vuelve al archivo 'index.haml' en tu editor de texto y cámbialo por lo siguiente:

Este es un diseño típico con cabecera, contenido, barra lateral y pie de página. Como puedes ver, las etiquetas <div> se crean con el signo #. Toda la página está envuelta en una etiqueta <div id=''wrapper''> creada por la línea '#wrapper'.

Para dar un identificador a una etiqueta HTML solo hay que encadenar el # al final, por lo que podríamos escribir %body#mi_ID para obtener <body id=''my_id''>. Las clases se marcan con un punto. Así, %article.my_class daría <article class=''my_class''>.

Guarda el archivo y actualízalo en tu navegador. Deberías ver algo así:

Añadir algo de estilo CSS

Sinatra utiliza otro directorio especial llamado 'public' para almacenar activos como archivos CSS e imágenes. Crea una carpeta llamada 'public' en la carpeta raíz de tu aplicación. Cambia a ese directorio y crea uno llamado 'css' para almacenar los archivos css. Termina creando un archivo css en blanco en ese directorio.

Hazlo en tu terminal escribiendo:

Abra el archivo styles.css en tu editor y copia y pega lo siguiente:

No voy a entrar en los detalles del css, ya que es solo una forma rápida y sucia de hacer que los elementos de la página sean más evidentes en el navegador.

Tenemos que enlazar con el archivo CSS desde la página de índice. También voy a añadir un enlace al restablecimiento de CSS de Yahoo para ayudar a la coherencia entre los navegadores. Abre la página index.haml el editor y añade estas dos líneas a la sección %head.

Esto ilustra cómo podemos usar paréntesis en Haml para atributos de etiquetas adicionales: rel y href en este caso.

El archivo final debería tener este aspecto:

Refresca tu navegador, y deberías ver la página de inicio con el estilo y los divs posicionados.

Ahora tenemos la plantilla básica para nuestras páginas web que podemos reutilizar para crear páginas adicionales.


Paso 4: Creando una composición común

Ahora que tenemos nuestro diseño de página básico, podemos ver que gran parte del contenido de nuestro archivo index.html podría ser el mismo para otras páginas del sitio. En este ejemplo, mantendremos la cabecera, el pie de página y la barra lateral comunes a ambas páginas. Podemos utilizar un archivo layout en Sinatra para lograr esto.

Vuelve a la página de index en tu editor de texto; cambia el nombre del archivo seleccionando 'Guardar como' a layout.haml.

Ahora editaremos el archivo de layout e introduciremos algunas marcas de plantillas utilizando la etiqueta '=' en Haml.

Cambia el archivo de diseño para que se vea así:

La clave aquí es el comando '=yield'. El signo = te dice a Haml que procese algún código de Ruby y ponga la salida en el navegador. Aquí simplemente estamos llamando a la función yield de Ruby que devolverá el contenido de la página.

Ahora podemos editar nuestra página index.haml para quitar todo el código que está duplicado en el archivo de layout. Cámbialo para que se vea así:

Refrescar el navegador debería proporcionar exactamente el mismo resultado que antes. Pero esta vez, el archivo de layout está siendo recogido automáticamente por Sinatra y la página de index está siendo renderizada como resultado de la función de yield.

Crear la página Acerca de

Crear páginas adicionales que usen esta plantilla es ahora sencillo. Crea un nuevo archivo en la carpeta 'views' llamado about.haml

La estructura de directorios y archivos de la aplicación debería tener el siguiente aspecto:

Introduce el siguiente código en el nuevo archivo:

Como puedes ver, se trata de una página muy sencilla con un título y un texto dentro de una etiqueta de párrafo.

De momento no tenemos forma de ver la página. Para ello, tenemos que modificar el archivo website.rb para decirle a Sinatra que gestione una petición de '/about' y que devuelva la plantilla about.haml como resultado.

Lo hacemos añadiendo las siguientes líneas al archivo website.rb:

El bloque get '/about' simplemente indica a Sinatra que devuelva la plantilla Haml 'about' en respuesta a un HTTP get para '/about'.

Reinicia el servidor web de WEBrick pulsando Ctrl-C en el terminal en el que se está ejecutando, como hicimos antes, y llamando a ruby website.rb.

Deberías ver la siguiente página cuando navegues a 'localhost:4567/about' en tu navegador.

Añadir más páginas sería tan rápido y sencillo como eso. Solo recuerda que tendrás que reiniciar el servidor WEBrick si cambias el archivo de la aplicación.


Paso 5: Añadiendo una Meny (y ordenar)

Necesitamos añadir alguna forma de navegar entre las páginas; así que añadiremos un menú sencillo en el layout. Abre el archivo layout.haml y añade el div de navegación y los enlaces de esta manera:

Aquí, creamos un div con el id de nav. Este div contiene una lista con etiquetas de anchor a '/' y 'about'. Observa cómo el texto vinculado se le aplica sangría en la siguiente línea para rodearlo en la etiqueta de anclaje HTML.

Actualiza tu navegador y deberías ver un menú que enlaza las dos páginas:

Al hacer clic en los enlaces del menú de navegación, podrás acceder a cada página. Puedes experimentar añadiendo más páginas. Recuerda que los pasos son los siguientes:

  • Añade un nuevo archivo .haml al directorio de views.
  • Describe la vista usando Haml en ese archivo.
  • Añade la navegación a la nueva página en la parte del menú del archivo de diseño.
  • Edita el archivo website.rb para la nueva ruta de la misma manera que la ruta '/about'.
  • ¡No olvides reiniciar el archivo website.rb!

Conclusión

Ciertamente hay mucho más en Sinatra y Haml de lo que hemos visto aquí. Sinatra es una gran opción para sitios y servicios web, mientras que un framework más pesado como Ruby on Rails podría ser excesivo. Además, creo que la simplicidad y la claridad de Haml se complementa con Sinatra maravillosamente, y hace que el enfoque de desarrollo sea muy productivo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.