Sinatra, un framework web para Ruby

sinatra logo

Ruby es un lenguaje de programación que se ha hecho tremendamente conocido (de hecho es el lenguaje más usado en los repositorios de GitHub en estos momentos), Es un lenguaje dinámico y orientado a objetos que es sencillo de aprender. Además, posee diversos frameworks que lo convierte en un lenguaje potente para desarrollar aplicaciones web.

Uno de estos frameworks toma el nombre del célebre artista Frank Sinatra. Se usa en la actualidad por empresas como la BBC o la propia GitHub. Es tremendamente potente y bastante más sencillo que Ruby On Rails, más conocido y complejo. En este artículo veremos una brevísima introducción a qué es trabajar con Sinatra.

Instalación

Lo primero que necesitamos es una instalación de Ruby, para lo cual tenemos varios enlaces en su página oficial dependiendo de nuestro sistema operativo. Una vez instalado ruby podremos agregar nuevos paquetes usando RubyGems, y deberemos ejecutar el siguiente comando desde nuestra consola:

$ gem install sinatra

Descifrando el Hola Mundo

El hola mundo que nos ofrece el framework es muy sencillo, y es lo que podemos encontrar en la página principal. Acudimos a una carpeta cualquiera de nuestro sistema, y creamos un fichero llamado hi.rb:

require 'sinatra'

get '/hi' do
  "Hello World!"
end

Para ejecutar esta aplicación solamente tendremos que escribir el siguiente comando en nuestra terminal:


$ ruby -rubygems hi.rb
== Sinatra has taken the stage ...
>> Listening on 0.0.0.0:4567

A continuación se cargará el servidor de desarrollo de ruby, y solamente tendremos que acudir a localhost:4567 y ver nuestra página en funcionamiento.

El primer valor que se muestra es el comando HTTP al que responde (si recordamos este artículo los diferentes comandos HTTP son get, post, put, delete… ) con lo cual podemos hacer que nuestra aplicación responda a una petición en concreto, lo cual nos puede ser de gran utilidad si estamos desarrollando cualquier tipo de servicio web.

Además de mostrar código, podemos hacer uso de los diferentes motores de visualización que soporta. Uno de ellos se conoce como erb (acrónimo de embebed ruby), y permite tener en una página HTML código ruby.

Para ello editamos nuestra aplicación y agregamos el siguiente código:

...

get '/hello/:id' do
  @name = params[:id]
  erb :hello
end

Además necesitamos crear una carpeta llamada views (que contendrá las vistas de nuestra aplicación) y agregar el fichero, que tendrá extensión erb.



</pre>
<h2>Hello</h2>
<pre>


Esto no es del todo cómodo ya que nos obliga a repetir el código de marcado para cada vista que queramos tener en nuestra aplicación, sin embargo lo que podemos hacer es tener una plantilla que inserte cierto código antes y después de la vista, para lo cual usamos un fichero llamado layout.erb que contendrá la estructura básica del sitio, y actualizaremos el código para mostrar esta diferencia.


    
    

 


El código anterior contiene una etiqueta, yield, que especifica donde se ha de cargar el código específico de nuestra vista. El fichero de la vista actualizado contendría la siguiente información:

</pre>
<h2>Hello</h2>
<pre>

Con esto seríamos capaces de crear un portal básico que responda a ciertos parámetros de entrada.

Pasos adicionales

Tenemos mucho más que poder agregar a nuestra app: Modelos de datos con DataMapper, autorización con Warden, posibilidad de devolver los resultados en formato json (y usarlo entonces como un servicio web)… Las posibilidades son infinitas, pero todo comienza con get «/hi»….

Más información

El framework 960gs para diseño web

Reconozco que soy un diseñador y/o maquetador bastante del montón (de la parte baja del montón), en comparación con los artistas que se ven actualmente en internet, así que recurro de manera bastante habitual a frameworks que me facilitan bastante la existencia.

960gs es un framework CSS que  fija el ancho de la web que estás desarrollando a 960px, (el ancho estándar para una web vista correctamente en un monitor de 1024x 768), y la tarea que realiza es bastante simple, establece dicho ancho, y divide la web en 12, 16 o 24 paneles que podemos emplear a nuestra voluntad.

Un ejemplo de uso sería el siguiente, tras agregar en el head de nuestra web la referencia al css, agregamos esta estructura, que nos divide la web en dos secciones, un grid de anchura 4 y otro de anchura 8. cada «unidad» en este caso tiene 60 px con un margen de 10px a cada lado, lo que nos permite jugar un poco con la estructura de nuestro sitio.

<div class="container_12">
    <div class="grid_4"></div>
    <div class="grid_8"></div>
</div>

Personalmente me parece extremadamente útil para poder maquetar la web y mantener cierta coherencia en el diseño, además, el resultado final es muy agradable para la vista.

Como detalle adicional, cuando nos descargamos el paquete tenemos además plantillas y plugins para photoshop/illustrator, además de un par de plantillas para hacer bocetos sobre papel directamente, que nos permitirán hacer nuestro sitio pensando en los 960px directamente en la fase de diseño y que nos sea más sencillo luego implementarlo.

Espero que os resulte interesante.

Más información: 960.gs