Ruby en OpenShift ( II ) Sinatra y haml

En esta oportunidad vamos a usar haml en vez de HTML, siempre en Sinatra. Pueden ver el tuto oficial para guiarse un poco.

haml es una forma más rápida y bonita de escribir, básicamente porque no ocupas los tags de cierre y te obliga a usar identación (es como python, si no identas no corre). Vean el tutorial

Agarré la costumbre de hacer todo con Bootstrap de Twitter, y para aprender haml, ps transformé el esqueleto😀 Vamos a usar el ejemplo “Hero” que da twitter.

Primero creamos las carpetas “public” y “views” . Sinatra las busca automágicamente. Todo lo css, imágenes, js, etc. debe estar en public (dentro de las respectivas carpetas), mientras que los archivos haml van en views. De esta manera, mi estructura es así:

Desde Eclipse

Como ven, dentro de views tengo 2 archivos: index.haml y layout.haml Considerando que siempre usamos la misma estructura en una página (header, menú, footer, etc), movemos lo que se repite en layout y cargamos dentro lo que cambia (index).

De esta forma, mi layout es así:

Todo lo que empiece son % es un tag, mientras que lo que comience con . o # es un div. Reduce a, dependiendo cómo escribamos, casi la mitad de las líneas.

La clave de todo es el = yield dentro del div container. Lo que hace, es evaluar porción del código ruby que le entreguemos a Sinatra.

Seguimos con el index.haml:

Funciona de la misma manera. Siempre respetando las identaciones.

Por último, Sinatra:

Agregamos la referencia a haml (para que transforme) y le decimos que transforme el archivo index. Sinatra solo se encarga de la ubicación, ya que mágicamente busca en la carpeta views. Además, siempre empieza por algún layout (nuestro archivo) y no es necesario escribir la referencia.

Si tuviéramos más páginas, las vamos agregando y cambiando (cambiar index por about, contacto, etc).

Corremos app.rb , vamos a http://localhost:4567 y vemos los cambios😀

Comprobamos todo, y lo cargamos a OpenShift (si lo están usando :D)

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en Ruby, Tutoriales y etiquetada , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s